Lots of work on upgrading to Tailwind CSS 4. Still more to go. Need to fix Modals everywhere.

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}`);