From ced62cfd99921fc3ddc8f675cd5f6ba86b0bb556 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 23 Jul 2025 13:22:34 -0400
Subject: [PATCH] Style improvements for file uploads and related.

---
 src/routes/events/[event_id]/+layout.svelte   | 16 ++++--
 src/routes/events/[event_id]/+page.svelte     | 12 +++--
 .../events/[event_id]/event_page_menu.svelte  | 45 ++++++++--------
 .../location/[event_location_id]/+page.svelte |  8 +--
 .../presenter/[presenter_id]/+page.svelte     | 52 +++++++++----------
 .../session/[session_id]/+page.svelte         |  8 +--
 .../events/[event_id]/sign_in_out.svelte      | 29 +++++++----
 .../events/ae_comp__event_files_upload.svelte | 52 +++++++++++++++----
 8 files changed, 134 insertions(+), 88 deletions(-)

diff --git a/src/routes/events/[event_id]/+layout.svelte b/src/routes/events/[event_id]/+layout.svelte
index 9c75e531..8f4b94a6 100644
--- a/src/routes/events/[event_id]/+layout.svelte
+++ b/src/routes/events/[event_id]/+layout.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
-/** @type {import('./$types').LayoutData} */
-export let data: any;
+interface Props {
+    /** @type {import('./$types').LayoutData} */
+    data: any;
+    children?: import('svelte').Snippet;
+}
+
+let { data, children }: Props = $props();
+
 let log_lvl: number = 0;
-// console.log(`ae_events_pres_mgmt event [event_id] +page.svelte data:`, data);
+
 
 // import { browser } from '$app/environment';
 // import { goto, invalidate, pushState, replaceState } from '$app/navigation';
@@ -16,6 +22,7 @@ let log_lvl: number = 0;
 // import { db_events } from "$lib/db_events";
 import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
+
 // import { events_func } from '$lib/ae_events_functions';
 
 
@@ -24,7 +31,6 @@ import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_ev
 
 // Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
 $slct.account_id = data.account_id;
-// console.log(`$slct.account_id = `, $slct.account_id);
 let ae_acct = data[$slct.account_id];
 if (log_lvl) {
     console.log(`ae_acct = `, ae_acct);
@@ -47,4 +53,4 @@ $events_slct.event_location_obj_li = ae_acct.slct.event_location_obj_li;
 </script>
 
 
-<slot />
+{@render children?.()}
diff --git a/src/routes/events/[event_id]/+page.svelte b/src/routes/events/[event_id]/+page.svelte
index e4cd5982..1270628b 100644
--- a/src/routes/events/[event_id]/+page.svelte
+++ b/src/routes/events/[event_id]/+page.svelte
@@ -540,11 +540,13 @@ max-w-max -->
 
     <button
         type="button"
-        class="btn btn-sm mx-1 ae_btn_warning"
+
         onclick={() => {
             $events_sess.pres_mgmt.fulltext_search_qry_str = '';
             $events_trigger = 'load__event_session_obj_li';
         }}
+        class:hidden={!$events_sess.pres_mgmt.fulltext_search_qry_str || $events_sess.pres_mgmt.fulltext_search_qry_str.length == 0}
+        class="btn btn-sm mx-1 ae_btn_warning"
         title="Clear search text"
         >
         <!-- <span class="fas fa-backspace"></span> -->
@@ -663,16 +665,16 @@ max-w-max -->
             link_to_id={$lq__event_obj?.event_id}
             >
             <span slot="label">
-                <div>
+                <div class="text-lg">
                     <span class="fas fa-upload"></span>
-                    <strong class="bg-red-200 p-1">Upload global event files only!</strong>
+                    <strong class="">Upload global event files only!</strong>
                 </div>
-                <span class="text-sm text-gray-600 dark:text-gray-400 italic">
+                <div class="text-sm text-gray-600 dark:text-gray-400 italic">
                     <strong>Global event files only</strong><br>
                     Recommended: PowerPoint (pptx) or Keynote (key)<br>
                     Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
                     Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
-                </span>
+                </div>
             </span>
         </Comp_event_files_upload>
 
diff --git a/src/routes/events/[event_id]/event_page_menu.svelte b/src/routes/events/[event_id]/event_page_menu.svelte
index a410fca4..46c39174 100644
--- a/src/routes/events/[event_id]/event_page_menu.svelte
+++ b/src/routes/events/[event_id]/event_page_menu.svelte
@@ -1,8 +1,16 @@
 <script lang="ts">
-// export let data: any;
-export let log_lvl: number = 0;
+interface Props {
+    // export let data: any;
+    log_lvl?: number;
+    lq__event_obj: any; // let ae_tmp: key_val = {};
+}
 
-import type { key_val } from '$lib/ae_stores';
+let {
+    log_lvl = 0,
+    lq__event_obj
+}: Props = $props();
+
+// import type { key_val } from '$lib/ae_stores';
 import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
 // import { events_func } from '$lib/ae_events_functions';
@@ -11,11 +19,6 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv }
 import Element_data_store from '$lib/element_data_store_v2.svelte';
 import Comp__pres_mgmt_menu_nav from '../ae_comp__events_menu_nav.svelte';
 
-export let lq__event_obj: any;
-
-// let ae_tmp: key_val = {};
-// let ae_triggers: key_val = {};
-
 </script>
 
 
@@ -42,7 +45,7 @@ export let lq__event_obj: any;
         <!-- Button to toggle between the regular event session search view and managing event files -->
         <button
             type="button"
-            on:click={() => {
+            onclick={() => {
                 if ($events_loc.pres_mgmt.show_content__event_view == 'manage_files') {
                     $events_loc.pres_mgmt.show_content__event_view = null;
                 } else {
@@ -75,7 +78,7 @@ export let lq__event_obj: any;
         <!-- Button to toggle between showing and not showing the extended options menu -->
         <button
             type="button"
-            on:click={() => {
+            onclick={() => {
                 if ($events_loc.pres_mgmt.show_menu__session_search == 'options') {
                     $events_loc.pres_mgmt.show_menu__session_search = null;
                 } else {
@@ -101,7 +104,7 @@ export let lq__event_obj: any;
 
         <button
             type="button"
-            on:click={() => {
+            onclick={() => {
                 if ($events_loc.pres_mgmt.show_menu__session_search == 'help') {
                     $events_loc.pres_mgmt.show_menu__session_search = null;
                 } else {
@@ -145,7 +148,7 @@ export let lq__event_obj: any;
             <!-- Save search text option toggle button? -->
             <button
                 type="button"
-                on:click={() => {
+                onclick={() => {
                     $events_loc.pres_mgmt.save_search_text = !$events_loc.pres_mgmt.save_search_text;
                 }}
                 class="btn btn-sm"
@@ -248,7 +251,7 @@ export let lq__event_obj: any;
             {#if $events_loc.pres_mgmt.show__launcher_link || $events_loc.pres_mgmt.show__location_link}
                 <button
                     disabled={!$ae_loc.trusted_access}
-                    on:click={() => {
+                    onclick={() => {
                         $events_loc.pres_mgmt.show__launcher_link = false;
                         $events_loc.pres_mgmt.show__launcher_link_legacy = false;
                         $events_loc.pres_mgmt.show__location_link = false;
@@ -261,7 +264,7 @@ export let lq__event_obj: any;
             {:else}
                 <button
                     disabled={!$ae_loc.trusted_access}
-                    on:click={() => {
+                    onclick={() => {
                         $events_loc.pres_mgmt.show__launcher_link = true;
                         $events_loc.pres_mgmt.show__launcher_link_legacy = true;
                         $events_loc.pres_mgmt.show__location_link = true;
@@ -277,7 +280,7 @@ export let lq__event_obj: any;
             {#if !$events_loc.pres_mgmt?.hide__session_li_poc_field}
                 <button
                     disabled={!$ae_loc.authenticated_access}
-                    on:click={() => {
+                    onclick={() => {
                         $events_loc.pres_mgmt.hide__session_li_poc_field = true;
                     }}
                     class="btn btn-sm ae_btn_surface"
@@ -288,7 +291,7 @@ export let lq__event_obj: any;
             {:else}
                 <button
                     disabled={!$ae_loc.authenticated_access}
-                    on:click={() => {
+                    onclick={() => {
                         $events_loc.pres_mgmt.hide__session_li_poc_field = false;
                     }}
                     class="btn btn-sm ae_btn_surface_outlined"
@@ -302,7 +305,7 @@ export let lq__event_obj: any;
             {#if $events_loc.pres_mgmt.qry_hidden == 'all'}
                 <button
                     type="button"
-                    on:click={() => {
+                    onclick={() => {
                         if ($events_loc.pres_mgmt.qry_hidden == 'all') {
                             $events_loc.pres_mgmt.qry_hidden = 'not_hidden';
                         } else {
@@ -318,7 +321,7 @@ export let lq__event_obj: any;
             {:else}
                 <button
                     type="button"
-                    on:click={() => {
+                    onclick={() => {
                         if ($events_loc.pres_mgmt.qry_hidden == 'all') {
                             $events_loc.pres_mgmt.qry_hidden = 'not_hidden';
                         } else {
@@ -337,7 +340,7 @@ export let lq__event_obj: any;
                 {#if $events_loc.pres_mgmt.qry_enabled == 'all'}
                     <button
                         type="button"
-                        on:click={() => {
+                        onclick={() => {
                             if ($events_loc.pres_mgmt.qry_enabled == 'all') {
                                 $events_loc.pres_mgmt.qry_enabled = 'enabled';
                             } else {
@@ -353,7 +356,7 @@ export let lq__event_obj: any;
                 {:else}
                     <button
                         type="button"
-                        on:click={() => {
+                        onclick={() => {
                             if ($events_loc.pres_mgmt.qry_enabled == 'all') {
                                 $events_loc.pres_mgmt.qry_enabled = 'enabled';
                             } else {
@@ -389,7 +392,7 @@ export let lq__event_obj: any;
     <div>
         <button
             type="button"
-            on:click={() => {
+            onclick={() => {
                 $events_loc.pres_mgmt.show_menu__session_search = !$events_loc.pres_mgmt.show_menu__session_search;
             }}
             class="btn btn-sm mx-1 ae_btn_info_filled"
diff --git a/src/routes/events/[event_id]/location/[event_location_id]/+page.svelte b/src/routes/events/[event_id]/location/[event_location_id]/+page.svelte
index f442bd79..93777dd9 100644
--- a/src/routes/events/[event_id]/location/[event_location_id]/+page.svelte
+++ b/src/routes/events/[event_id]/location/[event_location_id]/+page.svelte
@@ -267,16 +267,16 @@ onMount(() => {
             link_to_id={$lq__event_location_obj.event_location_id}
             >
             <span slot="label">
-                <div>
+                <div class="text-lg">
                     <span class="fas fa-upload"></span>
-                    <strong class="bg-orange-200 p-1">Upload location (room) specific files only!</strong>
+                    <strong class="">Upload location (room) specific files only!</strong>
                 </div>
-                <span class="text-sm text-gray-600 dark:text-gray-400 italic">
+                <div class="text-sm text-gray-600 dark:text-gray-400 italic">
                     <strong>Location (room) files only</strong><br>
                     Recommended: PowerPoint (pptx) or Keynote (key)<br>
                     Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
                     Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
-                </span>
+                </div>
             </span>
         </Comp_event_files_upload>
 
diff --git a/src/routes/events/[event_id]/presenter/[presenter_id]/+page.svelte b/src/routes/events/[event_id]/presenter/[presenter_id]/+page.svelte
index 026c78aa..4c5d1b22 100644
--- a/src/routes/events/[event_id]/presenter/[presenter_id]/+page.svelte
+++ b/src/routes/events/[event_id]/presenter/[presenter_id]/+page.svelte
@@ -306,20 +306,18 @@ let lq__auth__event_presenter_obj = $derived(liveQuery(async () => {
         link_to_type="event_presenter"
         link_to_id={$lq__event_presenter_obj?.event_presenter_id}
         >
-        {#snippet label()}
-            <span >
-                <div>
-                    <span class="fas fa-upload"></span>
-                    <strong class="bg-green-100 p-1">Upload presenter (speaker) specific files</strong>
-                </div>
-                <span class="text-sm text-gray-600 dark:text-gray-400 italic">
-                    <strong>Presenter (speaker) presentation files only</strong><br>
-                    Recommended: PowerPoint (pptx) or Keynote (key)<br>
-                    Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
-                    Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
-                </span>
-            </span>
-        {/snippet}
+        <span slot="label">
+            <div class="text-lg">
+                <span class="fas fa-upload"></span>
+                <strong class="">Upload presenter (speaker) specific files</strong>
+            </div>
+            <div class="text-sm text-gray-600 dark:text-gray-400 italic">
+                <strong>Presenter (speaker) presentation files only</strong><br>
+                Recommended: PowerPoint (pptx) or Keynote (key)<br>
+                Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
+                Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
+            </div>
+        </span>
     </Comp_event_files_upload>
     {/if}
 
@@ -354,20 +352,18 @@ let lq__auth__event_presenter_obj = $derived(liveQuery(async () => {
             link_to_type="event_presenter"
             link_to_id={$lq__event_presenter_obj.event_presenter_id}
             >
-            {#snippet label()}
-                <span >
-                    <div>
-                        <span class="fas fa-upload"></span>
-                        <strong class="bg-green-100 p-1">Upload presenter (speaker) specific files</strong>
-                    </div>
-                    <span class="text-sm text-gray-600 dark:text-gray-400 italic">
-                        <strong>Presentation related files only</strong><br>
-                        Recommended: PowerPoint (pptx) or Keynote (key)<br>
-                        Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
-                        Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
-                    </span>
-                </span>
-            {/snippet}
+            <span slot="label">
+                <div class="text-lg">
+                    <span class="fas fa-upload"></span>
+                    <strong class="">Upload presenter (speaker) specific files</strong>
+                </div>
+                <div class="text-sm text-gray-600 dark:text-gray-400 italic">
+                    <strong>Presentation related files only</strong><br>
+                    Recommended: PowerPoint (pptx) or Keynote (key)<br>
+                    Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
+                    Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
+                </div>
+            </span>
         </Comp_event_files_upload>
         {/if}
 
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 d3a47823..191893f4 100644
--- a/src/routes/events/[event_id]/session/[session_id]/+page.svelte
+++ b/src/routes/events/[event_id]/session/[session_id]/+page.svelte
@@ -338,16 +338,16 @@ onMount(() => {
             link_to_id={$lq__event_session_obj.event_session_id}
             >
             <span slot="label">
-                <div>
+                <div class="text-lg">
                     <span class="fas fa-upload"></span>
-                    <strong class="bg-yellow-100 p-1">Upload session (breakout) specific files only!</strong>
+                    <strong class="">Upload session (breakout) specific files only!</strong>
                 </div>
-                <span class="text-sm text-gray-600 dark:text-gray-400 italic">
+                <div class="text-sm text-gray-600 dark:text-gray-400 italic">
                     <strong>Session (breakout) files only</strong><br>
                     Recommended: PowerPoint (pptx) or Keynote (key)<br>
                     Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
                     Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
-                </span>
+                </div>
             </span>
         </Comp_event_files_upload>
 
diff --git a/src/routes/events/[event_id]/sign_in_out.svelte b/src/routes/events/[event_id]/sign_in_out.svelte
index 864b64c2..5333d094 100644
--- a/src/routes/events/[event_id]/sign_in_out.svelte
+++ b/src/routes/events/[event_id]/sign_in_out.svelte
@@ -1,16 +1,25 @@
 <script lang="ts">
-// /** @type {import('./$types').PageData} */
-export let data: any;
+interface Props {
+    // /** @type {import('./$types').PageData} */
+    data: any;
+    event_session_id: string;
+    lq__event_session_obj: any;
+    lq__auth__event_presenter_obj: any;
+}
+
+let {
+    data,
+    event_session_id,
+    lq__event_session_obj,
+    lq__auth__event_presenter_obj
+}: Props = $props();
+
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
 
 import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
 
-export let event_session_id: string;
-export let lq__event_session_obj: any;
-export let lq__auth__event_presenter_obj: any;
-
 if (browser) {
     console.log('Browser environment detected.');
 
@@ -169,7 +178,7 @@ function sign_out() {
 <button
     type="button"
     class="btn btn-sm preset-tonal-warning"
-    on:click={() => {
+    onclick={() => {
         sign_out();
         alert('You have been signed out.');
     }}
@@ -193,18 +202,18 @@ function sign_out() {
         class="input max-w-36"
         placeholder="Key"
         value={$events_sess.auth__entered_key ?? ''}
-        on:input={(e) => $events_sess.auth__entered_key = e.target.value}
+        oninput={(e) => $events_sess.auth__entered_key = e.target?.value}
         >
     <input
         type="text"
         class="input max-w-36"
         placeholder="Passcode"
         value={$events_sess.auth__entered_passcode ?? ''}
-        on:input={(e) => $events_sess.auth__entered_passcode = e.target.value}
+        oninput={(e) => $events_sess.auth__entered_passcode = e.target?.value}
         >
     <button
         class="btn btn-md preset-tonal-primary border border-primary-500"
-        on:click={() => {
+        onclick={() => {
             console.log('Sign in with URL values');
 
             if ($events_sess.auth__person.presenter_id) {
diff --git a/src/routes/events/ae_comp__event_files_upload.svelte b/src/routes/events/ae_comp__event_files_upload.svelte
index a2896249..e4982904 100644
--- a/src/routes/events/ae_comp__event_files_upload.svelte
+++ b/src/routes/events/ae_comp__event_files_upload.svelte
@@ -235,23 +235,35 @@ async function handle_input_upload_files(input_upload_files, task_id) {
     </div>
     {/await}
 
+    <div
+        class="
+            border-2 hover:border-2 border-dashed border-green-500
+            p-1
+            preset-filled-success-50-950 hover:border-green-800
+            cursor-pointer
+            "
+        >
     <label
         for="ae_comp__event_files_upload__input"
-        class="svelte_input_file_label text-center"
+        class="
+            svelte_input_file_label
+            text-center
+            cursor-pointer
+            "
         class:hidden={$events_sess.files.disable_submit__event_file_obj}
         >
         <slot name="label">
-        <div>
+        <div class="text-lg">
             <span class="fas fa-upload"></span>
             <!-- Select files to upload -->
             <!-- <span class="fas fa-file-archive"></span> -->
-            <strong class="bg-blue-300 p-1">Upload files</strong>
+            <strong class="">Upload files</strong>
             <!-- (drag and drop) -->
         </div>
-        <span class="text-sm text-gray-600 dark:text-gray-400 italic">
+        <div class="text-sm text-gray-600 dark:text-gray-400 italic">
             <strong>Presentation related files only</strong><br>
             (PowerPoint, Keynote, PDF, mp4, Word Doc, Excel, txt, etc)
-        </span>
+        </div>
         </slot>
     </label>
 
@@ -263,9 +275,19 @@ async function handle_input_upload_files(input_upload_files, task_id) {
         {required}
         {accept}
         name={input_name}
-        class="svelte_input_file_element file-dropzone-input block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-hidden dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 {input_class_li.join(' ')}"
         class:hidden={$events_sess.files.disable_submit__event_file_obj}
+        class="
+            svelte_input_file_element file-dropzone-input
+            block w-full text-lg text-center
+            rounded-lg
+            cursor-pointer
+            p-1
+            preset-tonal-primary preset-outlined-primary-200-800 hover:preset-filled-success-200-800
+            transition-all
+            {input_class_li.join(' ')}
+            "
         />
+    </div>
 
     <Element_input_files_tbl
         bind:input_file_list={input_file_list}
@@ -277,7 +299,15 @@ async function handle_input_upload_files(input_upload_files, task_id) {
 
     <button
         type="submit"
-        class="btn btn-lg btn-primary preset-tonal-primary border border-primary-500 hover:preset-tonal-success border border-success-500 w-54"
+        class="
+            btn btn-lg
+            text-lg
+            preset-tonal-primary hover:preset-tonal-success
+            flex items-center justify-center
+            w-54
+            transition-all
+            "
+        class:opacity-20={$events_sess.files.disable_submit__event_file_obj || $events_sess.files.status__file_list != 'ready'}
         disabled={$events_sess.files.disable_submit__event_file_obj || $events_sess.files.status__file_list != 'ready'}
         >
         {#await ae_promises.upload__hosted_file_obj}
@@ -290,18 +320,18 @@ async function handle_input_upload_files(input_upload_files, task_id) {
             </span>
         {:then}
             <span class="fas fa-upload m-1"></span>
-            <span class="text-sm">
-                Upload?
+            <span class="">
+                Upload
             </span>
             <!-- <span class="fas fa-save m-1"></span> -->
-            <span class="grow font-bold">
+            <span class="text-sm px-1 font-semibold bg-neutral-500/50 rounded">
                 {#if $events_sess.files.processed_file_list.length > 0}
                     <!-- {#each $events_sess.files.processed_file_list as file_obj, index}
                         <span class="text-xs">
                             {file_obj.filename}
                         </span>
                     {/each} -->
-                    {$events_sess.files.processed_file_list.length == 1 ? `${$events_sess.files.processed_file_list.length} file` : `${$events_sess.files.processed_file_list.length} files`}
+                    {@html $events_sess.files.processed_file_list.length == 1 ? `${$events_sess.files.processed_file_list.length}&times; file` : `${$events_sess.files.processed_file_list.length}&times; files`}
                 {:else}
                     <span class="text-xs">
                         No files selected