From 376837950e385328dc0541a6eb33e69ac728abff Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 18 Jun 2025 20:36:09 -0400
Subject: [PATCH] Lots of work on upgrading to Tailwind CSS 4. Still more to
 go. Need to fix Modals everywhere.

---
 src/app.css                                   |  13 +-
 src/lib/ae_events_stores.ts                   |   5 +
 src/lib/ae_stores.ts                          |   2 +
 src/lib/components/shad-editor/editor.css     |  37 ++++--
 src/lib/components/shad-editor/onedark.css    |   4 +-
 src/lib/e_app_clipboard.svelte                |  64 ++++++++++
 src/lib/e_app_debug_menu.svelte               |  10 +-
 src/lib/element_manage_event_file_li.svelte   |  86 +++++++++----
 .../[event_id]/(launcher)/+layout.svelte      |  15 ++-
 .../events/[event_id]/event_page_menu.svelte  |   4 +-
 .../locations/locations_page_menu.svelte      |   2 +-
 .../[presenter_id]/presenter_page_menu.svelte |   6 +-
 .../session/[session_id]/+page.svelte         |  10 +-
 .../ae_comp__event_session_poc_profile.svelte |  58 +++++++--
 .../session/[session_id]/session_view.svelte  | 114 ++++++++++++------
 15 files changed, 319 insertions(+), 111 deletions(-)
 create mode 100644 src/lib/e_app_clipboard.svelte

diff --git a/src/app.css b/src/app.css
index 4759b651..a09a3424 100644
--- a/src/app.css
+++ b/src/app.css
@@ -9,15 +9,18 @@
 @import '@skeletonlabs/skeleton/themes/modern';
 @import '@skeletonlabs/skeleton/themes/wintry';
 
-@source '../../node_modules/@skeletonlabs/skeleton-svelte/dist';
+@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
 
 
 /* Add your theme import for your theme: "osit-custom-theme" here */
-@plugin '@tailwindcss/forms';
-@plugin '@tailwindcss/typography';
+/* @plugin '@tailwindcss/forms'; */
+/* @plugin '@tailwindcss/typography'; */
 
-@import "tailwindcss/preflight";
-@tailwind utilities;
+
+/* @import "tailwindcss/theme.css" layer(theme); */
+/* @import "tailwindcss/preflight"; */
+@import "tailwindcss/utilities.css" layer(utilities);
+/*@tailwind utilities;*/
 
 
 /* Register a Custom Themes */
diff --git a/src/lib/ae_events_stores.ts b/src/lib/ae_events_stores.ts
index aa86931f..ca2029dc 100644
--- a/src/lib/ae_events_stores.ts
+++ b/src/lib/ae_events_stores.ts
@@ -462,6 +462,11 @@ let events_session_data_struct: key_val = {
         show_fields__presentation: true,
         show_fields__session: true,
 
+
+        show_modal__presenter_agree: false,
+        show__session_poc_profile: false,
+        show_modal__session_poc_agree: false,
+
         status_rpt: {
             recent_files: null,
             presenters_agree: null,
diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts
index bff2937b..acba1441 100644
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -371,6 +371,8 @@ let ae_app_session_data_defaults: key_val = {
         qry_limit__people: 99,
     },
 
+    show__modal_change_password: false,
+
 
     'download': {},
     // For API download and upload progress status per file.
diff --git a/src/lib/components/shad-editor/editor.css b/src/lib/components/shad-editor/editor.css
index 67a222af..c2568fe6 100644
--- a/src/lib/components/shad-editor/editor.css
+++ b/src/lib/components/shad-editor/editor.css
@@ -1,5 +1,18 @@
-@import "tailwindcss/preflight";
-@tailwind utilities;
+@import 'tailwindcss';
+
+@import "@skeletonlabs/skeleton";
+@import "@skeletonlabs/skeleton/optional/presets";
+
+/* @import "tailwindcss/preflight"; */
+/* @tailwind utilities; */
+
+@import '@skeletonlabs/skeleton/themes/cerberus';
+@import '@skeletonlabs/skeleton/themes/modern';
+@import '@skeletonlabs/skeleton/themes/wintry';
+
+@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
+
+@import "tailwindcss/utilities.css" layer(utilities);
 
 
 .tiptap :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
@@ -9,7 +22,7 @@
 
 .tiptap code:not(pre code) {
 	/* Remove the before and after pseudo elements */
-	@apply rounded-sm border bg-muted/50 p-1 before:content-[''] after:content-[''];
+	@apply rounded-sm border bg-black/50 p-1 before:content-[''] after:content-[''];
 }
 
 .tiptap blockquote p {
@@ -54,11 +67,12 @@ ul[data-type='taskList'] li label {
 }
 
 ul[data-type='taskList'] li[data-checked='true'] div {
-	@apply text-muted-foreground line-through;
+	@apply text-black/50 line-through;
 }
 
 input[type='checkbox'] {
-	@apply size-4 cursor-pointer rounded-sm !important;
+	@apply size-4 cursor-pointer rounded-sm;
+	/* This kills compiling  !important */
 }
 
 ul[data-type='taskList'] ul[data-type='taskList'] {
@@ -71,7 +85,7 @@ ul[data-type='taskList'] ul[data-type='taskList'] {
 }
 
 .color::before {
-	@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded-sm border border-muted align-middle;
+	@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded-sm border border-black/50 align-middle;
 	background-color: var(--color);
 	content: ' ';
 }
@@ -87,7 +101,7 @@ ul[data-type='taskList'] ul[data-type='taskList'] {
 
 .tiptap table td,
 .tiptap table th {
-	@apply border border-muted;
+	@apply border border-black/50;
 	box-sizing: border-box;
 	min-width: 1em;
 	padding: 6px 8px;
@@ -101,17 +115,20 @@ ul[data-type='taskList'] ul[data-type='taskList'] {
 }
 
 .tiptap table th {
-	@apply bg-muted/50 text-left font-bold;
+	@apply bg-black/50 text-left;
+	/* Kills compile: font-bold */
+	font-weight: bold;
+
 }
 
 .tiptap table .selectedCell:after {
-	@apply pointer-events-none absolute bottom-0 left-0 right-0 top-0 border-[2px] border-muted-foreground;
+	@apply pointer-events-none absolute bottom-0 left-0 right-0 top-0 border-[2px] border-black/50;
 	content: '';
 	z-index: 2;
 }
 
 .tiptap table .column-resize-handle {
-	@apply pointer-events-none absolute -bottom-[2px] -right-[2px] top-0 w-1 bg-muted;
+	@apply pointer-events-none absolute -bottom-[2px] -right-[2px] top-0 w-1 bg-black/50;
 }
 
 .tiptap .tableWrapper {
diff --git a/src/lib/components/shad-editor/onedark.css b/src/lib/components/shad-editor/onedark.css
index 1a781818..50d368c3 100644
--- a/src/lib/components/shad-editor/onedark.css
+++ b/src/lib/components/shad-editor/onedark.css
@@ -63,7 +63,9 @@
 }
 
 .hljs-strong {
-	@apply font-bold;
+	/* @apply font-bold; */
+	/* Kills compile: font-bold */
+	font-weight: bold;
 }
 
 /* Base styles */
diff --git a/src/lib/e_app_clipboard.svelte b/src/lib/e_app_clipboard.svelte
new file mode 100644
index 00000000..452e57d3
--- /dev/null
+++ b/src/lib/e_app_clipboard.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+
+interface Props {
+    log_lvl?: number;
+    value: any;
+    success: boolean;
+    btn_text: string;
+    btn_title?: string;
+    btn_class?: string;
+}
+
+let {
+    log_lvl = 1,
+    value = $bindable(''),
+    success = $bindable(false),
+    btn_text = 'Copy to Clipboard',
+    btn_title = 'Copy to Clipboard',
+    btn_class = 'btn btn-sm preset-tonal-warning text-warning-500 m-1'
+}: Props = $props();
+
+if (log_lvl) {
+    console.log(`Clipboard component initialized with value:`, value);
+}
+
+// Select your trigger element
+const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]');
+
+// Add a click event handler to the trigger
+// elemButton?.addEventListener('click', () => {
+//     // Call the Clipboard API
+//     navigator.clipboard
+//     // Use the `writeText` method write content to the clipboard
+//     .writeText(value)
+//     // Handle confirmation
+//     .then(() => {
+//         if (log_lvl) {
+//             console.log(`Clipboard write successful: ${value}`);
+//         }
+//         success = true;
+//     });
+// });
+</script>
+
+
+<button
+    data-button
+    onclick={() => {
+        // Call the Clipboard API
+        navigator.clipboard
+        // Use the `writeText` method write content to the clipboard
+        .writeText(value)
+        // Handle confirmation
+        .then(() => {
+            if (log_lvl) {
+                console.log(`Clipboard write successful: ${value}`);
+            }
+            success = true;
+        });
+    }}
+    class={btn_class}
+    title={btn_title}
+    >
+    {btn_text}
+</button>
diff --git a/src/lib/e_app_debug_menu.svelte b/src/lib/e_app_debug_menu.svelte
index 1c74269e..dc803f68 100644
--- a/src/lib/e_app_debug_menu.svelte
+++ b/src/lib/e_app_debug_menu.svelte
@@ -106,7 +106,7 @@ hover:opacity-100 -->
                 $ae_loc.debug_mode = !$ae_loc?.debug_mode;
             }}
             class="
-                btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-tonal-warning border border-warning-500
+                btn btn-sm preset-tonal-surface border-sm border-surface-500 hover:preset-tonal-warning
                 transition-all *:hover:inline-block
 
 
@@ -141,7 +141,7 @@ hover:opacity-100 -->
                 $ae_loc.debug_menu = !$ae_loc?.debug_menu;
             }}
             class="
-                btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-tonal-warning border border-warning-500
+                btn btn-sm preset-tonal-surface border-sm border-surface-500 hover:preset-tonal-warning
                 transition-all *:hover:inline-block
                 "
             title="Turn debug content and styles off and on"
@@ -166,8 +166,8 @@ hover:opacity-100 -->
         id="AE-Quick-Debug"
         class="
             btn btn-icon
-            preset-tonal-surface border border-surface-500
-            hover:preset-tonal-warning border border-warning-500
+            preset-tonal-surface border-sm border-surface-500
+            hover:preset-tonal-warning
             transition-all
             fixed bottom-2 left-2
             text-gray-400 hover:text-gray-800
@@ -182,5 +182,5 @@ hover:opacity-100 -->
 </section>
 
 
-<style lang="postcss">
+<style lang="css">
 </style>
diff --git a/src/lib/element_manage_event_file_li.svelte b/src/lib/element_manage_event_file_li.svelte
index d7cbb3f9..89f484a2 100644
--- a/src/lib/element_manage_event_file_li.svelte
+++ b/src/lib/element_manage_event_file_li.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-export let log_lvl: number = 0;
 import { onMount } from 'svelte';
 // import { liveQuery } from "dexie";
+import { Clipboard } from "flowbite-svelte";
 
 import type { key_val } from '$lib/ae_stores';
 import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -15,19 +15,33 @@ import { db_events } from "$lib/ae_events/db_events";
 import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
 import { events_func } from '$lib/ae_events_functions';
 
-export let container_class_li: string|Array<string> = [];
-export let lq__event_file_obj_li: any;
-export let link_to_type: string;
-export let link_to_id: string;
-export let allow_basic: boolean = false;
-export let allow_moderator: boolean = false;
-export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
+interface Props {
+    log_lvl?: number;
+    container_class_li?: string|Array<string>;
+    lq__event_file_obj_li: any;
+    link_to_type: string;
+    link_to_id: string;
+    allow_basic?: boolean;
+    allow_moderator?: boolean;
+    display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
+}
+
+let {
+    log_lvl = 0,
+    container_class_li = [],
+    lq__event_file_obj_li,
+    link_to_type,
+    link_to_id,
+    allow_basic = false,
+    allow_moderator = false,
+    display_mode = 'default'
+}: Props = $props();
 
 // export let show_convert_btn: null|boolean = null;
 
 // let ae_placeholder_li: key_val = {};
-let ae_promises: key_val = {};
-let ae_tmp: key_val = {};
+let ae_promises: key_val = $state({});
+let ae_tmp: key_val = $state({});
 ae_tmp.show__file_li = true;
 ae_tmp.show__direct_download = $events_loc.pres_mgmt.show__direct_download;
 // let ae_triggers: key_val = {};
@@ -38,6 +52,8 @@ onMount(() => {
         console.log(`allow_basic: ${allow_basic}; allow_moderator: ${allow_moderator}`);
     }
 });
+
+let clipboard_success = $state(false);
 </script>
 
 
@@ -46,7 +62,7 @@ onMount(() => {
     >
     <button
         type="button"
-        on:click={() => {
+        onclick={() => {
             console.log('*** Refresh button clicked ***');
 
             db_events.files.clear();
@@ -81,7 +97,7 @@ onMount(() => {
 
     <button
         type="button"
-        on:click={() => {
+        onclick={() => {
             console.log('*** Show Alt Download button clicked ***');
             ae_tmp.show__direct_download = !ae_tmp.show__direct_download;
         }}
@@ -152,7 +168,7 @@ onMount(() => {
         <button
             type="button"
             disabled={!allow_basic && !allow_moderator && !$ae_loc.trusted_access}
-            on:click={() => {
+            onclick={() => {
                 // ae_promises[event_file_obj.event_file_id_random]
                 ae_promises[event_file_obj.event_file_id_random] = api.download_hosted_file({
                     api_cfg: $ae_api,
@@ -215,7 +231,7 @@ onMount(() => {
                     Download
                     </span>
                 </a>
-                <button
+                <!-- <button
                     type="button"
                     use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
                     class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
@@ -225,7 +241,15 @@ onMount(() => {
                     <span class="hidden">
                     Copy Link
                     </span>
-                </button>
+                </button> -->
+
+                <Clipboard
+                    value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
+                    bind:success={clipboard_success}
+                    class="w-24"
+                    >
+                    {#if clipboard_success}Copied!{:else}Copy Link{/if}
+                </Clipboard>
             </div>
 
             <div class="flex flex-row gap-0.5">
@@ -242,7 +266,7 @@ onMount(() => {
                     Renamed
                     </span>
                 </a>
-                <button
+                <!-- <button
                     type="button"
                     use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
                     class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
@@ -252,7 +276,14 @@ onMount(() => {
                     <span class="hidden">
                     Copy Renamed
                     </span>
-                </button>
+                </button> -->
+                <Clipboard
+                    value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
+                    bind:success={clipboard_success}
+                    class="w-24"
+                    >
+                    {#if clipboard_success}Copied!{:else}Copy Renamed{/if}
+                </Clipboard>
             </div>
 
             <div class="flex flex-row gap-0.5">
@@ -269,7 +300,7 @@ onMount(() => {
                     Renamed
                     </span>
                 </a>
-                <button
+                <!-- <button
                     type="button"
                     use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
                     class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
@@ -279,7 +310,14 @@ onMount(() => {
                     <span class="hidden">
                     Copy Renamed
                     </span>
-                </button>
+                </button> -->
+                <Clipboard
+                    value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
+                    bind:success={clipboard_success}
+                    class="w-24"
+                    >
+                    {#if clipboard_success}Copied!{:else}Copy Renamed{/if}
+                </Clipboard>
             </div>
         </span>
 
@@ -301,7 +339,7 @@ onMount(() => {
             {#if $events_sess.pres_mgmt.tmp_val__filename_no_ext.trim() != event_file_obj.filename_no_ext}
             <button
                 type="button"
-                on:click={async () => {
+                onclick={async () => {
                     let new_filename = $events_sess.pres_mgmt.tmp_val__filename_no_ext.trim()
                     // Remove possible double extension
                     new_filename = new_filename.replace('.'+event_file_obj.extension, '');
@@ -353,7 +391,7 @@ onMount(() => {
         <button
             type="button"
             disabled={!allow_basic && !$ae_loc.trusted_access}
-            on:click={() => {
+            onclick={() => {
                 if ($events_sess.pres_mgmt.show_field_edit__filename == event_file_obj.event_file_id_random) {
                     $events_sess.pres_mgmt.tmp_val__filename_no_ext = '';
                     $events_sess.pres_mgmt.show_field_edit__filename = false;
@@ -377,7 +415,7 @@ onMount(() => {
         <button
             type="button"
             disabled={!allow_basic && !$ae_loc.trusted_access}
-            on:click={async () => {
+            onclick={async () => {
                 let event_file_data = {
                     hide: !event_file_obj.hide,
                 };
@@ -433,7 +471,7 @@ onMount(() => {
         <button
             type="button"
             disabled={!allow_basic && !$ae_loc.trusted_access}
-            on:click={async () => {
+            onclick={async () => {
                 if (!confirm(`Are you sure you want to delete this file?\n${event_file_obj.filename} [${event_file_obj.event_file_id_random}]`)) {return false;}
 
                 // ae_promises[event_file_obj.event_file_id_random] = handle_delete__event_file({event_file_id: event_file_obj.event_file_id_random});
@@ -487,7 +525,7 @@ onMount(() => {
                 name="file_purpose"
                 disabled={!allow_basic && !allow_moderator && !$ae_loc.trusted_access}
                 value={event_file_obj.file_purpose}
-                on:change={e => {
+                onchange={e => {
                     // ae_tmp[event_file_obj.event_file_id_random].file_purpose = e.target.value;
                     console.log(`Selected file_purpose: ${e.target.value}`);
 
diff --git a/src/routes/events/[event_id]/(launcher)/+layout.svelte b/src/routes/events/[event_id]/(launcher)/+layout.svelte
index 0ec9ca1c..9d306426 100644
--- a/src/routes/events/[event_id]/(launcher)/+layout.svelte
+++ b/src/routes/events/[event_id]/(launcher)/+layout.svelte
@@ -689,8 +689,8 @@ $: {
 
     <span
         class="*:hover:inline px-1 rounded-md"
-        class:preset-tonal-warning border border-warning-500={!$events_loc.launcher.ws_connect}
-        class:preset-tonal-success border border-success-500={$events_loc.launcher.ws_connect}
+        class:preset-tonal-warning={!$events_loc.launcher.ws_connect}
+        class:preset-tonal-success={$events_loc.launcher.ws_connect}
         >
         {#if $events_sess.launcher.ws_connect_status == 'connected'}
             <span class="fas fa-wifi mx-1"></span>
@@ -708,8 +708,8 @@ $: {
     <span
         class:hidden={$events_loc.launcher.app_mode != 'native'}
         class="*:hover:inline px-1 rounded-md"
-        class:preset-tonal-warning border border-warning-500={!$events_sess.launcher?.av_recording_status}
-        class:preset-tonal-success border border-success-500={$events_sess.launcher?.av_recording_status}
+        class:preset-tonal-warning={!$events_sess.launcher?.av_recording_status}
+        class:preset-tonal-success={$events_sess.launcher?.av_recording_status}
         >
     {#if $events_sess.launcher?.av_recording_status}
         <span class="fas fa-video mx-1"></span>
@@ -745,6 +745,7 @@ $: {
         class:hover:opacity-75={!$ae_loc.trusted_access}
         >
         <span class="fas fa-biohazard"></span>
+        <span class="hidden">Launcher Config</span>
     </button>
 </div>
 
@@ -824,8 +825,12 @@ $: {
             >
             Debug
         </h2>
-        <button on:click={() => ($events_loc.launcher.hide_drawer__debug = true)} class="mb-4 dark:text-white">
+        <button
+            on:click={() => ($events_loc.launcher.hide_drawer__debug = true)}
+            class="mb-4 dark:text-white"
+            >
             <span class="fas fa-times"></span>
+            <span class="hidden">Close Debug Drawer</span>
         </button>
     </div>
 
diff --git a/src/routes/events/[event_id]/event_page_menu.svelte b/src/routes/events/[event_id]/event_page_menu.svelte
index d96a6ea0..37b955a2 100644
--- a/src/routes/events/[event_id]/event_page_menu.svelte
+++ b/src/routes/events/[event_id]/event_page_menu.svelte
@@ -149,8 +149,8 @@ export let lq__event_obj: any;
                     $events_loc.pres_mgmt.save_search_text = !$events_loc.pres_mgmt.save_search_text;
                 }}
                 class="btn btn-sm"
-                class:preset-tonal-success border border-success-500={$events_loc.pres_mgmt.save_search_text}
-                class:preset-tonal-warning border border-warning-500={!$events_loc.pres_mgmt.save_search_text}
+                class:preset-tonal-success={$events_loc.pres_mgmt.save_search_text}
+                class:preset-tonal-warning={!$events_loc.pres_mgmt.save_search_text}
                 title="Save the search text for this session search?"
                 >
                 {#if $events_loc.pres_mgmt.save_search_text}
diff --git a/src/routes/events/[event_id]/locations/locations_page_menu.svelte b/src/routes/events/[event_id]/locations/locations_page_menu.svelte
index 224bfc65..e504d59f 100644
--- a/src/routes/events/[event_id]/locations/locations_page_menu.svelte
+++ b/src/routes/events/[event_id]/locations/locations_page_menu.svelte
@@ -113,7 +113,7 @@ export let lq__event_obj: any;
                 }}
                 class="btn btn-sm"
                 class:preset-tonal-success border border-success-500={$events_loc.pres_mgmt?.show_content__location_devices_sessions== 'sessions'}
-                class:preset-tonal-warning border border-warning-500={$events_loc.pres_mgmt?.show_content__location_devices_sessions== 'devices'}
+                class:preset-tonal-warning border-warning-500={$events_loc.pres_mgmt?.show_content__location_devices_sessions== 'devices'}
                 title="Show the session list or device list."
                 >
                 {#if $events_loc.pres_mgmt.show_content__location_devices_sessions == 'sessions'}
diff --git a/src/routes/events/[event_id]/presenter/[presenter_id]/presenter_page_menu.svelte b/src/routes/events/[event_id]/presenter/[presenter_id]/presenter_page_menu.svelte
index 5384e241..77dba3cb 100644
--- a/src/routes/events/[event_id]/presenter/[presenter_id]/presenter_page_menu.svelte
+++ b/src/routes/events/[event_id]/presenter/[presenter_id]/presenter_page_menu.svelte
@@ -224,7 +224,7 @@ let ae_triggers: key_val = {};
                 }}
                 class="btn btn-sm m-1 transition-all hover:transition-all *:hover:inline"
                 class:preset-outlined-surface-500={!$lq__event_presenter_obj?.priority}
-                class:preset-tonal-success border border-success-500={$lq__event_presenter_obj?.priority}
+                class:preset-tonal-success={$lq__event_presenter_obj?.priority}
                 >
                 {#if $lq__event_presenter_obj?.priority}
                     <span class="fas fa-star m-1"></span>
@@ -277,7 +277,7 @@ let ae_triggers: key_val = {};
                     ae_triggers.hide = true;
                 }}
                 class="btn btn-sm m-1 transition-all hover:transition-all *:hover:inline"
-                class:preset-tonal-success border border-success-500={!$lq__event_presenter_obj?.hide}
+                class:preset-tonal-success={!$lq__event_presenter_obj?.hide}
                 class:preset-outlined-warning-500={$lq__event_presenter_obj?.hide}
                 disabled={!$ae_loc.trusted_access}
                 >
@@ -333,7 +333,7 @@ let ae_triggers: key_val = {};
                     ae_triggers.enable = true;
                 }}
                 class="btn btn-sm"
-                class:preset-tonal-success border border-success-500={$lq__event_presenter_obj?.enable}
+                class:preset-tonal-success={$lq__event_presenter_obj?.enable}
                 class:preset-outlined-warning-500={!$lq__event_presenter_obj?.enable}
                 disabled={!$ae_loc.manager_access}
                 >
diff --git a/src/routes/events/[event_id]/session/[session_id]/+page.svelte b/src/routes/events/[event_id]/session/[session_id]/+page.svelte
index 8d6e6301..9b5744b8 100644
--- a/src/routes/events/[event_id]/session/[session_id]/+page.svelte
+++ b/src/routes/events/[event_id]/session/[session_id]/+page.svelte
@@ -193,7 +193,7 @@ onMount(() => {
                 }
             }}
             class="btn btn-md hover:preset-filled-primary-500"
-            class:preset-tonal-tertiary border border-tertiary-500={$events_loc.pres_mgmt.show_content__session_view == 'manage_files'}
+            class:preset-tonal-tertiary={$events_loc.pres_mgmt.show_content__session_view == 'manage_files'}
             class:preset-filled-tertiary-500={$events_loc.pres_mgmt.show_content__session_view != 'manage_files'}
             class:hidden={!$ae_loc.public_access}
             title="View session information or manage files for the session"
@@ -389,7 +389,7 @@ onMount(() => {
         lq__event_presenter_obj={lq__event_presenter_obj}
         />
 
-    <svelte:fragment slot="footer">
+    <footer class="flex justify-end gap-4">
         <div class="text-center w-full">
 
             <button
@@ -402,10 +402,6 @@ onMount(() => {
                 Close
             </button>
         </div>
-    </svelte:fragment>
+    </footer>
 
 </Modal>
-
-
-<style lang="postcss">
-</style>
diff --git a/src/routes/events/[event_id]/session/[session_id]/ae_comp__event_session_poc_profile.svelte b/src/routes/events/[event_id]/session/[session_id]/ae_comp__event_session_poc_profile.svelte
index b10114ba..8b04484f 100644
--- a/src/routes/events/[event_id]/session/[session_id]/ae_comp__event_session_poc_profile.svelte
+++ b/src/routes/events/[event_id]/session/[session_id]/ae_comp__event_session_poc_profile.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-export let log_lvl: number = 0;
+import { run } from 'svelte/legacy';
+
 
 // Imports (external and then internal)
 import { browser } from '$app/environment';
 // import { liveQuery } from "dexie";
+import { Clipboard } from "flowbite-svelte";
 
 import { ae_util } from '$lib/ae_utils/ae_utils';
 
@@ -20,16 +22,23 @@ import { events_func } from '$lib/ae_events_functions';
 // import { db_events } from "$lib/db_events";
 
 
-// Exports
-export let class_li: string = 'outline';
+
 // export let event_session_id: string;
-// export let lq__event_obj: any;
-export let lq__event_session_obj: any;
+
+interface Props {
+    log_lvl?: number;
+    // Exports
+    class_li?: string;
+    // export let lq__event_obj: any;
+    lq__event_session_obj: any;
+}
+
+let { log_lvl = 0, class_li = 'outline', lq__event_session_obj }: Props = $props();
 // export let event_session_obj_poc_profile: any|key_val;
 
 // Local Variables
-let ae_promises: key_val = {};
-let ae_tmp: key_val = {};
+let ae_promises: key_val = $state({});
+let ae_tmp: key_val = $state({});
 // let ae_triggers: key_val = {};
 
 ae_tmp.biography = null;
@@ -37,15 +46,19 @@ ae_tmp.biography = null;
 let poc_type = $events_loc.pres_mgmt.label__session_poc_type;
 let poc_name = $events_loc.pres_mgmt.label__session_poc_name;
 
-$: if (browser && ae_tmp.biography === null && $lq__event_session_obj?.poc_kv_json && $lq__event_session_obj?.poc_kv_json[poc_type]?.biography) {
+run(() => {
+if (browser && ae_tmp.biography === null && $lq__event_session_obj?.poc_kv_json && $lq__event_session_obj?.poc_kv_json[poc_type]?.biography) {
     ae_tmp.biography = $lq__event_session_obj?.poc_kv_json[poc_type].biography;
     console.log(`ae_tmp.biography:`, ae_tmp.biography);
 }
+});
 
 // $: if ($lq__event_session_obj?.poc_kv_json) {
 //     lq__event_session_obj.poc_kv_json = JSON.parse(lq__event_session_obj.poc_kv_json);
 // }
 
+let clipboard_success = $state(false);
+
 </script>
 
 
@@ -57,7 +70,7 @@ $: if (browser && ae_tmp.biography === null && $lq__event_session_obj?.poc_kv_js
     <span class="float-right">
     <!-- A button to copy the access link to the clipboard. -->
     <!-- Example: /events/CHs3F44Xq76/session/Wh8UnJlbIA0?person_id=fV1dl_IJ0yY&person_pass=abc123 -->
-    <button
+    <!-- <button
         type="button"
         use:clipboard={encodeURI(`${$ae_loc.url_origin}/events/${$events_slct.event_id}/session/${$events_slct.event_session_id}?person_id=${$lq__event_session_obj.poc_person_id_random}&person_pass=${$lq__event_session_obj.poc_person_passcode}&session_id=${$lq__event_session_obj.event_session_id_random}`)}
         class="btn btn-sm preset-tonal-warning border border-warning-500 m-1"
@@ -65,7 +78,17 @@ $: if (browser && ae_tmp.biography === null && $lq__event_session_obj?.poc_kv_js
         >
         <span class="fas fa-copy mx-1"></span>
         Copy Access Link
-    </button>
+    </button> -->
+
+    <Clipboard
+        value={encodeURI(`${$ae_loc.url_origin}/events/${$lq__event_session_obj.event_id}/session/${$events_slct.event_session_id}?person_id=${$lq__event_session_obj.poc_person_id}&person_pass=${$lq__event_session_obj.poc_person_passcode}&session_id=${$lq__event_session_obj.event_session_id}`)}
+        bind:success={clipboard_success}
+        class="btn btn-sm preset-tonal-warning text-warning-500 m-1"
+        title="Copy the POC (moderator/champion) access link to the clipboard."
+        >
+        {#if clipboard_success}Copied!{:else}Copy Access Link{/if}
+    </Clipboard>
+
     </span>
 {/if}
 
@@ -85,7 +108,7 @@ $: if (browser && ae_tmp.biography === null && $lq__event_session_obj?.poc_kv_js
     >
 
 <div class="label event_session__biography required space-y-4">
-    <button
+    <!-- <button
         type="button"
         use:clipboard={ae_tmp.biography?.trim()}
         class="btn btn-sm preset-tonal-warning border border-warning-500 float-right m-1"
@@ -94,7 +117,16 @@ $: if (browser && ae_tmp.biography === null && $lq__event_session_obj?.poc_kv_js
         >
         <span class="fas fa-copy mx-1"></span>
         Copy Biography Text
-    </button>
+    </button> -->
+
+    <Clipboard
+        value={ae_tmp.biography?.trim()}
+        bind:success={clipboard_success}
+        class="btn btn-sm preset-tonal-warning text-warning-500 float-right m-1"
+        title="Copy the session POC biography text to the clipboard."
+        >
+        {#if clipboard_success}Copied!{:else}Copy Biography Text{/if}
+    </Clipboard>
 
     <label for="session_poc__biography" class="label">
         <span class="fas fa-book"></span>
@@ -127,7 +159,7 @@ $: if (browser && ae_tmp.biography === null && $lq__event_session_obj?.poc_kv_js
     type="button"
     class="btn btn-md preset-tonal-primary hover:preset-filled-primary-500"
     disabled={(ae_tmp.biography == $lq__event_session_obj.biography)}
-    on:click={() => {
+    onclick={() => {
         console.log('*** Save button clicked ***');
 
         let event_session_data = {poc_kv_json: $lq__event_session_obj.poc_kv_json};
diff --git a/src/routes/events/[event_id]/session/[session_id]/session_view.svelte b/src/routes/events/[event_id]/session/[session_id]/session_view.svelte
index 6de065e7..e7d3f9cb 100644
--- a/src/routes/events/[event_id]/session/[session_id]/session_view.svelte
+++ b/src/routes/events/[event_id]/session/[session_id]/session_view.svelte
@@ -1,5 +1,24 @@
 <script lang="ts">
-export let log_lvl: number = 0;
+import { run } from 'svelte/legacy';
+
+interface Props {
+    log_lvl?: number;
+    // export let lq__event_obj: any;
+    lq__event_presenter_obj: any; // This is the currently selected presenter.
+    lq__event_session_obj: any;
+    // );
+    lq__auth__event_presenter_obj: any;
+    lq__event_presentation_obj_li: any;
+}
+
+let {
+    log_lvl = 0,
+    lq__event_presenter_obj,
+    lq__event_session_obj,
+    lq__auth__event_presenter_obj,
+    lq__event_presentation_obj_li
+}: Props = $props();
+
 if (log_lvl) {
     console.log(`ae_events_pres_mgmt session_view.svelte`);
 }
@@ -7,6 +26,7 @@ if (log_lvl) {
 // Imports (external and then internal)
 import { liveQuery } from "dexie";
 import { Modal } from 'flowbite-svelte';
+import { Clipboard } from "flowbite-svelte";
 
 // const dispatch = createEventDispatcher();
 
@@ -14,9 +34,10 @@ import type { key_val } from '$lib/ae_stores';
 import { ae_util } from '$lib/ae_utils/ae_utils';
 import Element_ae_crud from '$lib/element_ae_crud.svelte';
 // import Element_data_store from '$lib/element_data_store_v2.svelte';
+import MyClipboard from '$lib/e_app_clipboard.svelte';
 
-let ae_promises: key_val = {};
-let ae_tmp: key_val = {};
+let ae_promises: key_val = $state({});
+let ae_tmp: key_val = $state({});
 let ae_triggers: key_val = {};
 
 import { core_func } from '$lib/ae_core/ae_core_functions';
@@ -48,17 +69,14 @@ $events_sess.pres_mgmt.show_content__presenter_start = false;
 
 // let poc_type = $events_loc.pres_mgmt.label__session_poc_type;
 
-// export let lq__event_obj: any;
-export let lq__event_presenter_obj: any; // This is the currently selected presenter.
-export let lq__event_session_obj: any;
+
 
 // let lq__event_session_obj = liveQuery(
 //     () => db_events.sessions.get(event_session_id)
-// );
 
-export let lq__auth__event_presenter_obj: any;
 
-export let lq__event_presentation_obj_li: any;
+
+
 
 // let lq__event_presentation_obj_li = liveQuery(
 //     () => db_events.presentations
@@ -86,7 +104,8 @@ $slct.person_obj_kv = {}; // This is intended for the person POC lookup list whe
 
 // Functions and Logic
 $events_sess.pres_mgmt.session__updated_on = null;
-$: if ($lq__event_session_obj) {
+run(() => {
+if ($lq__event_session_obj) {
     if (log_lvl > 1) {
         console.log(`$lq__event_session_obj:`, $lq__event_session_obj);
     }
@@ -124,6 +143,9 @@ $: if ($lq__event_session_obj) {
         $events_sess.pres_mgmt.session__updated_on = null;
     }
 }
+});
+
+let clipboard_success = $state(false);
 </script>
 
 
@@ -231,7 +253,7 @@ $: if ($lq__event_session_obj) {
             &
             <button
                 type="button"
-                on:click={() => {
+                onclick={() => {
                     if ($events_loc.pres_mgmt.time_hours == 12) {
                         $events_loc.pres_mgmt.time_hours = 24;
                         $events_loc.pres_mgmt.datetime_format = 'datetime_long';
@@ -384,7 +406,7 @@ $: if ($lq__event_session_obj) {
 
                 <button
                     type="button"
-                    on:click={() => {
+                    onclick={() => {
                         console.log('Cancel editing the location for the session.');
 
                         ae_tmp.event_location_id = null;
@@ -399,7 +421,7 @@ $: if ($lq__event_session_obj) {
             {:else}
                 <button
                     type="button"
-                    on:click={() => {
+                    onclick={() => {
                         console.log('Edit the location for the session.');
 
                         let params = {
@@ -474,7 +496,7 @@ $: if ($lq__event_session_obj) {
             <!-- Modal toggle -->
             <button
                 class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
-                on:click={() => ($events_sess.pres_mgmt.show__session_poc_profile = true)}>
+                onclick={() => ($events_sess.pres_mgmt.show__session_poc_profile = true)}>
                 <span class="fas fa-id-card m-1"></span>
                 <!-- {$events_loc.pres_mgmt?.label__session_poc_name}'s -->
                  {$lq__event_session_obj?.poc_person_full_name}'s Profile
@@ -493,21 +515,23 @@ $: if ($lq__event_session_obj) {
                         lq__event_session_obj={lq__event_session_obj}
                         />
 
-                <svelte:fragment slot="footer">
+                {#snippet footer()}
+
                     <div class="text-center w-full">
                         <button
                             type="button"
-                            on:click={() => {
-                                console.log('Close modal session poc profile.');
-                                $events_sess.pres_mgmt.show__session_poc_profile = !$events_sess.pres_mgmt.show__session_poc_profile;
-                            }}
+                            onclick={() => {
+                            console.log('Close modal session poc profile.');
+                            $events_sess.pres_mgmt.show__session_poc_profile = !$events_sess.pres_mgmt.show__session_poc_profile;
+                        }}
                             class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
                             >
                             <span class="fas fa-times mx-1"></span>
                             Close
                         </button>
                     </div>
-                </svelte:fragment>
+
+                {/snippet}
 
             </Modal>
 
@@ -519,8 +543,8 @@ $: if ($lq__event_session_obj) {
             !$events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id] === true}
                 class="btn btn-sm hover:preset-filled-success-500"
                 class:preset-tonal-success={$lq__event_session_obj?.poc_agree}
-                class:preset-tonal-warning border border-warning-500={!$lq__event_session_obj?.poc_agree}
-                on:click={() => ($events_sess.pres_mgmt.show_modal__session_poc_agree = true)}>
+                class:preset-tonal-warning={!$lq__event_session_obj?.poc_agree}
+                onclick={() => ($events_sess.pres_mgmt.show_modal__session_poc_agree = true)}>
                 {#if !$lq__event_session_obj?.poc_agree}
                     <span class="fas fa-times bg-red-500 text-white px-1 mx-1" title="Not agreed to terms and conditions"></span>
                     Not yet agreed
@@ -541,20 +565,22 @@ $: if ($lq__event_session_obj) {
                     lq__event_session_obj={lq__event_session_obj}
                     />
 
-                <svelte:fragment slot="footer">
+                {#snippet footer()}
+
                     <div class="text-center w-full">
 
                         <button
-                            on:click={() => {
-                                $events_sess.pres_mgmt.show_modal__session_poc_agree = false;
-                            }}
+                            onclick={() => {
+                            $events_sess.pres_mgmt.show_modal__session_poc_agree = false;
+                        }}
                             class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
                             >
                             <span class="fas fa-times m-1"></span>
                             Close
                         </button>
                     </div>
-                </svelte:fragment>
+
+                {/snippet}
 
             </Modal>
             {/if}
@@ -658,7 +684,7 @@ $: if ($lq__event_session_obj) {
             {#if ae_tmp.show__edit_poc_person}
             <button
                 type="button"
-                on:click={() => {
+                onclick={() => {
                     console.log('Cancel the POC person for the session.');
 
                     ae_tmp.poc_person_id = null;
@@ -672,7 +698,7 @@ $: if ($lq__event_session_obj) {
             {:else}
             <button
                 type="button"
-                on:click={async () => {
+                onclick={async () => {
                     console.log('Edit the POC person for the session.');
 
                     // let params = {
@@ -728,12 +754,11 @@ $: if ($lq__event_session_obj) {
         {#if $events_loc.pres_mgmt?.require__session_agree
             && $events_loc?.pres_mgmt?.show__email_access_link
             && $lq__event_session_obj?.poc_person_primary_email
-            && ($ae_loc.trusted_access || !$events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id])
-            }
+            && ($ae_loc.trusted_access || !$events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id])}
 
             <button
                 type="button"
-                on:click={() => {
+                onclick={() => {
                     console.log('Email the access link');
                     if (!$lq__event_session_obj.poc_person_primary_email) {
                         alert('No email address found for this point of contact (moderator/champion).');
@@ -773,7 +798,7 @@ $: if ($lq__event_session_obj) {
             && $ae_loc.trusted_access && $lq__event_session_obj.poc_person_id}
             <!-- A button to copy the access link to the clipboard. -->
             <!-- Example: /events/CHs3F44Xq76/session/Wh8UnJlbIA0?person_id=fV1dl_IJ0yY&person_pass=abc123 -->
-            <button
+            <!-- <button
                 type="button"
                 use:clipboard={encodeURI(`${$ae_loc.url_origin}/events/${$lq__event_session_obj.event_id}/session/${$events_slct.event_session_id}?person_id=${$lq__event_session_obj.poc_person_id}&person_pass=${$lq__event_session_obj.poc_person_passcode}&session_id=${$lq__event_session_obj.event_session_id}`)}
                 class="btn btn-sm preset-tonal-warning border border-warning-500 m-1"
@@ -781,7 +806,26 @@ $: if ($lq__event_session_obj) {
                 >
                 <span class="fas fa-copy mx-1"></span>
                 Copy Access Link
-            </button>
+            </button> -->
+
+            <!-- <Clipboard
+                value={encodeURI(`${$ae_loc.url_origin}/events/${$lq__event_session_obj.event_id}/session/${$events_slct.event_session_id}?person_id=${$lq__event_session_obj.poc_person_id}&person_pass=${$lq__event_session_obj.poc_person_passcode}&session_id=${$lq__event_session_obj.event_session_id}`)}
+                bind:success={clipboard_success}
+                class="text-xs btn btn-sm preset-tonal-warning text-warning-500 border border-transparent hover:border hover:border-warning-500 hover:preset-filled-warning-500"
+                >
+                {#if clipboard_success}Copied!{:else}Copy Access Link{/if}
+            </Clipboard> -->
+
+            <MyClipboard
+                value={encodeURI(`${$ae_loc.url_origin}/events/${$lq__event_session_obj.event_id}/session/${$events_slct.event_session_id}?person_id=${$lq__event_session_obj.poc_person_id}&person_pass=${$lq__event_session_obj.poc_person_passcode}&session_id=${$lq__event_session_obj.event_session_id}`)}
+                bind:success={clipboard_success}
+                btn_text="Copy Access Link"
+                btn_title="Copy the POC (moderator/champion) access link to the clipboard."
+                btn_class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500"
+                >
+            </MyClipboard>
+
+
         {/if}
         </span>
 
@@ -856,7 +900,7 @@ $: if ($lq__event_session_obj) {
         {#if $lq__event_session_obj.description}
         <button
             type="button"
-            on:click={() => {
+            onclick={() => {
                 console.log('Show/Hide Description');
                 $events_loc.pres_mgmt.show_content__session_description = !$events_loc.pres_mgmt.show_content__session_description;
             }}