More work on the Launcher and related

src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte

@@ -703,7 +703,7 @@ $effect(() => {
         static
 
         m-auto
-        border border-gray-200 dark:border-gray-600
+        border-x border-gray-200 dark:border-gray-600
         mt-12 mb-14 sm:mb-12
         h-full w-full max-w-7xl
         "
@@ -753,7 +753,7 @@ $effect(() => {
         flex flex-col sm:flex-row flex-wrap sm:flex-nowrap gap-0
         items-center
         justify-center
-        py-1 px-1
+        py-1 px-0.5
         bg-gray-100
         "
     >
@@ -765,10 +765,11 @@ $effect(() => {
         basis-1/5
         min-w-56 md:min-w-64 lg:min-w-72
         max-w-xs
-        py-1 px-0.5
+        pt-0.5 pr-0.5
         flex flex-col gap-1 items-center justify-start
         overflow-y-auto
-        border-r border-gray-300 dark:border-gray-600
+        border-r border-gray-200 dark:border-gray-700
+        hover:bg-surface-100-900
         "
     class:hidden={$events_loc.launcher.hide__launcher_menu}
     >
@@ -793,6 +794,7 @@ $effect(() => {
 
         bind:loading__session_li_status={$events_sess.launcher.loading__session_li_status}
         lq__event_session_obj_li={lq__event_session_obj_li}
+        bind:loading__session_id_status={$events_sess.launcher.loading__session_id_status}
         lq__event_session_obj={lq__event_session_obj}
         slct__event_session_id={$events_slct.event_session_id}
         >
@@ -814,13 +816,12 @@ $effect(() => {
         h-full
         min-w-xs
         max-w-full
-        py-1 px-1
+        py-1 px-0.5
         basis-4/5
         flex flex-col gap-1
         items-center
         justify-center
         overflow-y-auto
-
         "
     >
 

src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte

@@ -586,18 +586,42 @@ async function handle_open_file() {
     </Element_ae_crud>
 
 
-    <span class="event_file_created_on" class:hidden="{hide_created_on}">
+    <span
-        <span>
+        class="
-            <span class="fas fa-calendar-day hidden lg:inline-block"></span>
+            event_file_created_on
+            text-xs text-center
+            flex flex-row gap-1 items-center justify-end
+            w-24 max-w-28
+            preset-filled-surface-100-900
+            rounded
+            p-1
+            "
+        class:hidden="{hide_created_on}"
+        >
+        <span class="fas fa-calendar-day"></span>
+        <span class="flex flex-row flex-wrap gap-1 items-center justify-end">
+        <span class="w-18">
             {ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_short')}
         </span>
-        <span>
+        <span class="w-18">
             <!-- <span class="fas fa-clock"></span> -->
             {ae_util.iso_datetime_formatter(event_file_obj.created_on, 'time_12_short')}
         </span>
+        </span>
     </span>
 
-    <span class="event_file_size text-right" class:hidden="{hide_size}">
+    <span
+        class="
+            event_file_size
+            text-xs text-center
+            flex flex-row gap-1 items-center justify-end
+            preset-filled-surface-100-900
+            w-22 max-w-28
+            rounded
+            p-1
+            "
+        class:hidden="{hide_size}"
+        >
         <span class="fas fa-save"></span>
         {#if event_file_obj.file_size}{ae_util.format_bytes(event_file_obj.file_size)}{/if}
     </span>

src/routes/events/[event_id]/(launcher)/launcher_menu.svelte

@@ -51,7 +51,7 @@ let {
 
 // *** Import Aether specific variables and functions
 import type { key_val } from '$lib/ae_stores';
-// import { ae_util } from '$lib/ae_utils/ae_utils';
+import { ae_util } from '$lib/ae_utils/ae_utils';
 import { api } from '$lib/api';
 // import Element_ae_crud from '$lib/element_ae_crud.svelte';
 // import Element_data_store from '$lib/element_data_store_v2.svelte';
@@ -104,8 +104,6 @@ let ae_promises: key_val = $state({
         "
         >
 
-<!-- <h2 class="text-sm font-semibold">{$lq__event_obj?.cfg_json.short_name ?? 'loading...'}</h2> -->
-
 
 {#if $lq__event_event_file_obj_li}
 <div class="w-full">
@@ -138,9 +136,32 @@ let ae_promises: key_val = $state({
                 hover:preset-tonal-success
                 transition-all
                 "
+            title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_obj.event_file_id_random}`}
             >
-            <span class="fas fa-file-archive m-1 text-neutral-800/80"></span>
+            {#await ae_promises[event_file_obj.event_file_id_random]}
-            {event_file_obj?.filename}
+                <span class="fas fa-spinner fa-spin mx-1"></span>
+                <span class="">
+                    Downloading
+                    {#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
+                        {$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
+                    {/if}
+                    :
+                </span>
+            {:then}
+                <!-- <span class="fas fa-download mx-1"></span> -->
+                <span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)}"></span>
+                <!-- <span class="text-sm">
+                Download:
+                </span> -->
+            {/await}
+
+            <span class="grow">
+            {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 30})}
+            </span>
+
+
+            <!-- <span class="fas fa-file-archive m-1 text-neutral-800/80"></span>
+            {event_file_obj?.filename} -->
         </button>
     {/each}
 </div>
@@ -156,113 +177,6 @@ let ae_promises: key_val = $state({
     />
 {/if}
 
-<!-- <div
-    class="
-        w-full max-w-full
-        flex flex-row gap-1 items-center justify-center
-        "
-        >
-    {#if $lq__event_location_obj_li && $lq__event_location_obj_li.length > 0}
-    <div class="text-xs text-neutral-800/80"><strong>
-        Location:
-        {#if $ae_loc.administrator_access}
-            ({$lq__event_location_obj_li?.length}&times;)
-        {/if}
-        {#await ae_promises[slct_event_location_id]}
-            <span class="fas fa-spinner fa-spin text-blue-500"></span>
-        {:then result}
-            <span class="fas fa-check text-green-500/80"></span>
-        {/await}
-    </strong></div>
-    <select
-        class="select text-xs p-1 w-42"
-        bind:value={slct_event_location_id}
-        onchange={async () => {
-            // console.log(`slct_event_location_id:`, slct_event_location_id);
-
-            console.log('Remove fields from the URL.');
-            // data_url.searchParams.delete('location_id');
-            data_url.searchParams.delete('presentation_id');
-            data_url.searchParams.delete('presenter_id');
-            data_url.searchParams.delete('session_id');
-
-            // let url_location_id = slct_event_location_id;
-            // data_url.searchParams.set('location_id', url_location_id);
-
-            let new_url = `/events/${$events_slct.event_id}/launcher`;
-
-            if (slct_event_location_id) {
-                $events_loc.launcher.slct.event_location_id = slct_event_location_id;
-                $events_slct.event_location_id = slct_event_location_id;
-
-                $events_slct.id_li__event_session = [];
-
-                ae_promises[slct_event_location_id] = events_func.load_ae_obj_li__event_session({
-                    api_cfg: $ae_api,
-                    for_obj_type: 'event_location',
-                    for_obj_id: $events_slct.event_location_id,
-                    inc_file_li: true,
-                    inc_presentation_li: true,
-                    inc_presenter_li: true,
-                    enabled: $events_loc.launcher.show_content__enabled_sessions ? 'all' : 'enabled',
-                    hidden: $events_loc.launcher.show_content__hidden_sessions ? 'all' : 'not_hidden',
-                    limit: 49,
-                    try_cache: true,
-                    log_lvl: 1,
-                })
-                .then(async function (load_results) {
-                    console.log(`load_results = `, load_results);
-
-                    let event_session_id_li = [];
-
-                    let tmp_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
-
-                    for (let i = 0; i < load_results.length; i++) {
-                        let event_session_obj = load_results[i];
-                        let event_session_id_random = event_session_obj.event_session_id_random;
-                        tmp_li.push(event_session_id_random);
-                    }
-                    event_session_id_li = tmp_li;
-                    console.log(`event_session_id_li:`, event_session_id_li);
-                    $events_slct.id_li__event_session = event_session_id_li;
-
-                    return load_results;
-                });
-                new_url = `/events/${$events_slct.event_id}/launcher/${$events_slct.event_location_id}`;
-
-            } else {
-                // This will hide the selected session if the location is changed to false.
-                // WARNING: This may need to be commented out later.
-                // slct_event_session_id = null;
-                $events_loc.launcher.slct.event_location_id = null;
-                $events_slct.event_location_id = null;
-                $events_loc.launcher.slct.event_session_id = null;
-                $events_slct.event_session_id = null;
-                // WARNING: This may need to be commented out later.
-            }
-            goto(new_url, {replaceState: true});
-            // goto(new_url, {replaceState: false});
-        }}
-        >
-        <option value="">Select a location</option>
-        {#each $lq__event_location_obj_li as event_location_obj}
-            <option
-                value={event_location_obj?.id}
-                >
-            {event_location_obj?.name}
-            </option>
-        {/each}
-    </select>
-    {:else}
-    <div class="text-sm">
-        No locations found.
-        (Event ID: {$lq__event_obj?.id})
-    </div>
-    {/if}
-</div>
-{/if} -->
-
-
 
 {#if $lq__location_event_file_obj_li}
 <div class="w-full">
@@ -287,6 +201,7 @@ let ae_promises: key_val = $state({
                 hover:preset-tonal-success
                 transition-all
                 "
+            title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_obj.event_file_id_random}`}
             >
             <span class="fas fa-file-archive m-1 text-neutral-800/80"></span>
             {event_file_obj?.filename}
@@ -296,18 +211,15 @@ let ae_promises: key_val = $state({
 {/if}
 
 
-
-<!-- <div class="w-full"> -->
-
 {#if $lq__event_session_obj_li}
 <Menu_session_list_menu
     data_url={data_url}
+    bind:loading__session_id_status={loading__session_id_status}
     lq__event_session_obj_li={lq__event_session_obj_li}
     slct_event_session_id={$events_slct.event_session_id}
     />
 {/if}
 
-<!-- </div> -->
 
 {#if $ae_loc.edit_mode}
 <div

src/routes/events/[event_id]/(launcher)/launcher_presenter_view.svelte

@@ -62,11 +62,11 @@ let lq__event_file_obj_li = $derived(liveQuery(async () => {
 {#if $lq__event_file_obj_li && $lq__event_file_obj_li.length}
 <section class="event_session_file_list">
     <div>
-        <div class="text-xs"><strong>
+        <div class="text-xs text-surface-600-400"><strong>
             <span class="fas fa-file-archive"></span>
             Presenter Files:
-            {#if $ae_loc.administrator_access}
+            {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
-                ({$lq__event_file_obj_li?.length})
+                ({$lq__event_file_obj_li?.length}&times;)
             {/if}
         </strong></div>
     </div>

src/routes/events/[event_id]/(launcher)/launcher_session_view.svelte

@@ -146,239 +146,267 @@ ae_promises[$events_slct.event_session_id] = events_func.load_ae_obj_li__event_p
         event_launcher_session_view
         grow h-full w-full
         space-y-1
+        relative
         "
         >
     <!-- <slot name="event_session_message">event session message</slot> -->
 
-    {#if $lq__event_session_obj && $lq__event_session_obj.event_session_id_random}
+{#if $events_sess.launcher.loading__session_id_status}
-        <header class="event_session_about text-center border-b-2 border-gray-400">
+    <span class="absolute top-0 right-0 text-sm text-center text-gray-400">
+        <span class="fas fa-spinner fa-spin"></span>
+        Loading session information...
+    </span>
+    <!-- {:else}
+    <span class="absolute top-0 right-0 text-sm text-center text-gray-400">
+        Session loaded?
+    </span> -->
+{/if}
 
-            <h3
+
-                class="event_session_datetimes"
+{#if $lq__event_session_obj && $lq__event_session_obj.event_session_id_random}
+    <header class="event_session_about text-center border-b-2 border-gray-400">
+
+        <h3
+            class="event_session_datetimes"
+            >
+            <button
+                type="button"
+                onclick={() => {
+                    if ($events_loc.launcher.time_format == 'time_12_short') {
+                        // $events_loc.launcher.datetime_format = 'datetime_long';
+                        $events_loc.launcher.time_format = 'time_short';
+                        $events_loc.launcher.time_hours = 24;
+                    } else {
+                        $events_loc.launcher.time_format = 'time_12_short';
+                        // $events_loc.launcher.datetime_format = 'datetime_12_long';
+                        $events_loc.launcher.time_hours = 12;
+                    }
+                }}
+                >
+                <strong>{ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, 'week_long')}</strong>
+                <span class="font-normal">
+                    {ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, 'date_long_month_day')}
+                </span>
+                <strong>{ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, $events_loc.launcher.time_format)}</strong>
+                <span class="font-normal">
+                    –
+                    {ae_util.iso_datetime_formatter($lq__event_session_obj.end_datetime, $events_loc.launcher.time_format)}
+                </span>
+            </button>
+        </h3>
+        <h2 class="text-xl">
+
+            {$lq__event_session_obj?.name}
+            {#if $lq__event_session_obj?.code}
+            <span class="text-base text-gray-500 font-normal p-1"
+                title="Session code {$lq__event_session_obj.code}"
+                >
+                <span class="fas fa-barcode"></span>
+                {$lq__event_session_obj?.code}
+            </span>
+            {/if}
+
+        </h2>
+
+    </header>
+
+    <!-- <section class="event_session_description text-xs" class:d_none="{hide_description}">
+        {@html $lq__event_session_obj.description}
+    </section> -->
+
+    {#if !$lq__event_session_obj?.file_count_all}
+        <p class="text-2xl text-center text-red-500 font-bold">
+            <span class="fas fa-exclamation-triangle"></span>
+            Warning
+            <span class="fas fa-exclamation-triangle"></span>
+            <br>
+            No files available show for this session.
+
+        </p>
+    {/if}
+
+
+    {#if $lq__event_file_obj_li && $lq__event_file_obj_li.length}
+    <section class="event_session_file_list">
+        <div>
+            <div class="text-xs text-surface-600-400">
+                <strong>
+                <span class="fas fa-file-archive"></span>
+                Session Files:
+
+                <span class:hidden={!$ae_loc.trusted_access || !$ae_loc.edit_mode}>
+                    ({$lq__event_file_obj_li?.length}&times;)
+                </span>
+                </strong>
+            </div>
+            <!-- {#if $ae_loc.trusted_access || $events_loc.launcher.trusted_access}
+            <button on:click={async () => {
+                show_modal_upload_files = true;
+                link_to_type = 'event_session';
+                link_to_id = $lq__event_session_obj.event_session_id_random;
+                }}
+                type="button" class="ae_btn btn_outline_warning btn_xs" title="Upload updated or additional files"
+                >
+                <span class="fas fa-upload"></span> Upload Session File(s)
+            </button>
+            {/if} -->
+        </div>
+        <ul>
+        {#each $lq__event_file_obj_li as event_file_obj, index}
+            <li
+                class="flex flex-row justify-center gap-1"
+                class:hidden={!$events_loc.launcher.show_content__hidden_files && event_file_obj.hide}
                 >
                 <button
-                    type="button"
+                    disabled={!$ae_loc.trusted_access}
                     onclick={() => {
-                        if ($events_loc.launcher.time_format == 'time_12_short') {
+                        // ae_promises[event_file_obj.event_file_id_random]
-                            // $events_loc.launcher.datetime_format = 'datetime_long';
+                        ae_promises[event_file_obj.event_file_id_random] = api.download_hosted_file({
-                            $events_loc.launcher.time_format = 'time_short';
+                            api_cfg: $ae_api,
-                            $events_loc.launcher.time_hours = 24;
+                            hosted_file_id: event_file_obj.hosted_file_id_random,
-                        } else {
+                            return_file: true,
-                            $events_loc.launcher.time_format = 'time_12_short';
+                            filename: event_file_obj.filename,
-                            // $events_loc.launcher.datetime_format = 'datetime_12_long';
+                            auto_download: true,
-                            $events_loc.launcher.time_hours = 12;
+                            log_lvl: 0
-                        }
+                        });
+
+                        // window.postMessage({ type: 'download_event_file', event_file_id: event_file_obj.event_file_id_random, filename: event_file_obj.filename, auto_download: true }, '*');
                     }}
+                    class="btn btn-sm lg:btn-md preset-tonal-secondary hover:preset-filled-primary-500 min-w-72 lg:min-w-96
+                    transition-all
+                    "
+                    title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_obj.event_file_id_random}`}
                     >
-                    <strong>{ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, 'week_long')}</strong>
+                    {#await ae_promises[event_file_obj.event_file_id_random]}
-                    <span class="font-normal">
+                        <span class="fas fa-spinner fa-spin mx-1"></span>
-                        {ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, 'date_long_month_day')}
+                        <span class="">
-                    </span>
+                            Downloading
-                    <strong>{ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, $events_loc.launcher.time_format)}</strong>
+                            {#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
-                    <span class="font-normal">
+                                {$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
-                        –
-                        {ae_util.iso_datetime_formatter($lq__event_session_obj.end_datetime, $events_loc.launcher.time_format)}
-                    </span>
-                </button>
-            </h3>
-            <h2 class="text-xl">
-
-                {$lq__event_session_obj?.name}
-                {#if $lq__event_session_obj?.code}
-                <span class="text-base text-gray-500 font-normal p-1"
-                    title="Session code {$lq__event_session_obj.code}"
-                    >
-                    <span class="fas fa-barcode"></span>
-                    {$lq__event_session_obj?.code}
-                </span>
-                {/if}
-
-            </h2>
-        </header>
-
-        <!-- <section class="event_session_description text-xs" class:d_none="{hide_description}">
-            {@html $lq__event_session_obj.description}
-        </section> -->
-
-        {#if !$lq__event_session_obj?.file_count_all}
-            <p class="text-2xl text-center text-red-500 font-bold">
-                <span class="fas fa-exclamation-triangle"></span>
-                Warning
-                <span class="fas fa-exclamation-triangle"></span>
-                <br>
-                No files available show for this session.
-
-            </p>
-        {/if}
-
-
-        {#if $lq__event_file_obj_li && $lq__event_file_obj_li.length}
-        <section class="event_session_file_list">
-            <div>
-                <div class="text-xs"><strong>
-                    <span class="fas fa-file-archive"></span>
-                    Session Files:
-                    {#if $ae_loc.administrator_access}
-                        ({$lq__event_file_obj_li?.length})
-                    {/if}
-                </strong></div>
-                <!-- {#if $ae_loc.trusted_access || $events_loc.launcher.trusted_access}
-                <button on:click={async () => {
-                    show_modal_upload_files = true;
-                    link_to_type = 'event_session';
-                    link_to_id = $lq__event_session_obj.event_session_id_random;
-                    }}
-                    type="button" class="ae_btn btn_outline_warning btn_xs" title="Upload updated or additional files"
-                    >
-                    <span class="fas fa-upload"></span> Upload Session File(s)
-                </button>
-                {/if} -->
-            </div>
-            <ul>
-            {#each $lq__event_file_obj_li as event_file_obj, index}
-                <li
-                    class="flex flex-row justify-center gap-1"
-                    class:hidden={!$events_loc.launcher.show_content__hidden_files && event_file_obj.hide}
-                    >
-                    <button
-                        disabled={!$ae_loc.trusted_access}
-                        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,
-                                hosted_file_id: event_file_obj.hosted_file_id_random,
-                                return_file: true,
-                                filename: event_file_obj.filename,
-                                auto_download: true,
-                                log_lvl: 0
-                            });
-
-                            // window.postMessage({ type: 'download_event_file', event_file_id: event_file_obj.event_file_id_random, filename: event_file_obj.filename, auto_download: true }, '*');
-                        }}
-                        class="btn btn-sm lg:btn-md preset-tonal-secondary hover:preset-filled-primary-500 min-w-72 lg:min-w-96"
-                        title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_obj.event_file_id_random}`}
-                        >
-                        {#await ae_promises[event_file_obj.event_file_id_random]}
-                            <span class="fas fa-spinner fa-spin mx-1"></span>
-                            <span class="">
-                                Downloading
-                                {#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
-                                    {$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
-                                {/if}
-                                :
-                            </span>
-                        {:then}
-                            <!-- <span class="fas fa-download mx-1"></span> -->
-                            <span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)}"></span>
-                            <!-- <span class="text-sm">
-                            Download:
-                            </span> -->
-                        {/await}
-
-                        <span class="grow">
-                        {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 30})}
-                        </span>
-
-                        <span
-                            class="badge preset-tonal-success hover:preset-filled-success-500 text-sm"
-                            class:hidden={!event_file_obj.file_purpose}
-                            >
-                            {event_file_obj.file_purpose}
-                        </span>
-                    </button>
-                    <!-- <Launcher_file_cont {event_file_obj} hide_created_on={false} show_bak_download={($ae_loc.trusted_access || $events_loc.launcher.trusted_access)} open_file_as={$lq__event_session_obj.type_code} poster_title={$lq__event_session_obj.title} /> -->
-
-
-                    <!-- <a
-                        href="{$ae_api.base_url}/event/file/{event_file_obj.event_file_id_random}/download?filename={event_file_obj.filename}&x_no_account_id_token=direct-download"
-                        class="btn btn-sm variant-soft-secondary m-0.5 *:hover:inline"
-                        class:hidden={!ae_tmp.show__direct_download}
-                        title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_obj.event_file_id_random}`}
-                        >
-                        <span class="fas fa-download mx-1"></span>
-                        <div class="hidden">
-                        Download
-                        </div>
-                    </a> -->
-                </li>
-            {/each}
-            </ul>
-        </section>
-        {/if}
-
-        <!-- <hr class="w-full border border-gray-200" /> -->
-
-        <section class="event_presentation_list">
-
-
-        <!-- {$lq__event_session_obj?.event_presentation_li?.length ?? 'loading...?'} -->
-
-        {#if $lq__event_presentation_obj_li}
-
-            <div class="text-xs"><strong>
-                {#if $lq__event_session_obj.type_code == 'poster'}
-                    <span class="fas fa-image"></span>
-                    Posters:
-                {:else}
-                    <span class="fas fa-tv"></span>
-                    Presentations:
-                {/if}
-                {#if $ae_loc.administrator_access}
-                    ({$lq__event_presentation_obj_li?.length})
-                {/if}
-            </strong></div>
-
-            <!-- Maybe set max with? max-w-(--breakpoint-md) -->
-            <ul class="event_presentation_list max-w-full space-y-2">
-            {#each $lq__event_presentation_obj_li as event_presentation_obj}
-                <li class="border-b-2 border-gray-300 my-1 py-1 text-center md:text-left">
-
-                    <!-- The presentation information -->
-                    <div class="event_presentation_datetime_name flex flex-row justify-evenly gap-4">
-                        <!-- <div class="event_presentation_datetime_name"> -->
-                            {#if event_presentation_obj?.start_datetime}
-                                <span class="event_presentation_datetime"><strong>{ae_util.iso_datetime_formatter(event_presentation_obj?.start_datetime, 'time_12_short_no_leading')}</strong></span>
                             {/if}
+                            :
+                        </span>
+                    {:then}
+                        <!-- <span class="fas fa-download mx-1"></span> -->
+                        <span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)}"></span>
+                        <!-- <span class="text-sm">
+                        Download:
+                        </span> -->
+                    {/await}
 
-                            <span class="event_presentation_name grow">{event_presentation_obj?.name}</span>
+                    <span class="grow">
-                        <!-- </div> -->
+                    {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 30})}
+                    </span>
+
+                    <span
+                        class="badge preset-tonal-success hover:preset-filled-success-500 text-sm"
+                        class:hidden={!event_file_obj.file_purpose}
+                        >
+                        {event_file_obj.file_purpose}
+                    </span>
+                </button>
+                <!-- <Launcher_file_cont {event_file_obj} hide_created_on={false} show_bak_download={($ae_loc.trusted_access || $events_loc.launcher.trusted_access)} open_file_as={$lq__event_session_obj.type_code} poster_title={$lq__event_session_obj.title} /> -->
+
+
+                <!-- <a
+                    href="{$ae_api.base_url}/event/file/{event_file_obj.event_file_id_random}/download?filename={event_file_obj.filename}&x_no_account_id_token=direct-download"
+                    class="btn btn-sm variant-soft-secondary m-0.5 *:hover:inline"
+                    class:hidden={!ae_tmp.show__direct_download}
+                    title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_obj.event_file_id_random}`}
+                    >
+                    <span class="fas fa-download mx-1"></span>
+                    <div class="hidden">
+                    Download
                     </div>
-
+                </a> -->
-                    <!-- The presenter list -->
+            </li>
-                    {#if $lq__event_presenter_obj_li && $lq__event_presenter_obj_li.length}
+        {/each}
-                        <ul class="event_presentation_presenter_list">
+        </ul>
-                        {#each $lq__event_presenter_obj_li as event_presenter_obj, index}
+    </section>
-                            {#if event_presenter_obj.event_presentation_id_random == event_presentation_obj.event_presentation_id_random}
-                            <li>
-                                {#if $lq__event_session_obj.type_code == 'poster'}
-                                    <Launcher_presenter_view_posters
-                                        lq__event_presenter_obj={event_presenter_obj}
-                                        />
-                                {:else}
-                                    <Launcher_presenter_view
-                                        lq__event_presenter_obj={event_presenter_obj}
-                                    />
-                                {/if}
-                            </li>
-                            {/if}
-                        {/each}
-                        </ul>
-                    {:else}
-                        <span class="event_launcher_no_presenters">No presenters to display</span>
-                    {/if}
-
-                </li>
-            {/each}
-            </ul>
-        {:else}
-            <p>No presentations available to display.</p>
-        {/if}
-        </section>
-    {:else}
-        <span class="fas fa-spinner fa-spin"></span>
-        No session selected
     {/if}
 
+    <!-- <hr class="w-full border border-gray-200" /> -->
+
+    <section class="event_presentation_list">
+
+
+    <!-- {$lq__event_session_obj?.event_presentation_li?.length ?? 'loading...?'} -->
+
+    {#if $lq__event_presentation_obj_li}
+
+        <div class="text-xs text-surface-600-400"><strong>
+            {#if $lq__event_session_obj.type_code == 'poster'}
+                <span class="fas fa-image"></span>
+                Posters:
+            {:else}
+                <span class="fas fa-tv"></span>
+                Presentations:
+            {/if}
+            {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
+                ({$lq__event_presentation_obj_li?.length}&times;)
+            {/if}
+        </strong></div>
+
+        <!-- Maybe set max with? max-w-(--breakpoint-md) -->
+        <ul class="event_presentation_list max-w-full space-y-2">
+        {#each $lq__event_presentation_obj_li as event_presentation_obj}
+            <li class="border-b-2 border-gray-300 my-1 py-1 text-center md:text-left">
+
+                <!-- The presentation information -->
+                <div class="event_presentation_datetime_name flex flex-row justify-evenly gap-4">
+                    <!-- <div class="event_presentation_datetime_name"> -->
+                        {#if event_presentation_obj?.start_datetime}
+                            <span class="event_presentation_datetime"><strong>{ae_util.iso_datetime_formatter(event_presentation_obj?.start_datetime, 'time_12_short_no_leading')}</strong></span>
+                        {/if}
+
+                        <span class="event_presentation_name grow">{event_presentation_obj?.name}</span>
+                    <!-- </div> -->
+                </div>
+
+                <!-- The presenter list -->
+                {#if $lq__event_presenter_obj_li && $lq__event_presenter_obj_li.length}
+                    <ul class="event_presentation_presenter_list">
+                    {#each $lq__event_presenter_obj_li as event_presenter_obj, index}
+                        {#if event_presenter_obj.event_presentation_id_random == event_presentation_obj.event_presentation_id_random}
+                        <li
+                            class="
+                                border border-transparent
+                                rounded-lg
+                                hover:bg-surface-100-900
+                                hover:border-surface-400-600
+                                p-1
+                                transition-all
+                                "
+                            >
+                            {#if $lq__event_session_obj.type_code == 'poster'}
+                                <Launcher_presenter_view_posters
+                                    lq__event_presenter_obj={event_presenter_obj}
+                                    />
+                            {:else}
+                                <Launcher_presenter_view
+                                    lq__event_presenter_obj={event_presenter_obj}
+                                />
+                            {/if}
+                        </li>
+                        {/if}
+                    {/each}
+                    </ul>
+                {:else}
+                    <span class="event_launcher_no_presenters">No presenters to display</span>
+                {/if}
+
+            </li>
+        {/each}
+        </ul>
+    {:else}
+        <p>No presentations available to display.</p>
+    {/if}
+    </section>
+{:else}
+    <span class="fas fa-spinner fa-spin"></span>
+    No session selected
+{/if}
+
 </div>
 
 

src/routes/events/[event_id]/(launcher)/menu_location_list.svelte

@@ -45,15 +45,15 @@ let ae_promises: key_val = $state({
 
 </script>
 
-
+<!-- text-neutral-800/80 -->
 <div
     class="
         w-full max-w-full
-        flex flex-row flex-wrap gap-1 items-center justify-center
+        flex flex-col md:flex-row flex-wrap gap-1 items-center justify-center
         "
         >
     {#if $lq__event_location_obj_li && $lq__event_location_obj_li.length > 0}
-    <div class="text-xs text-neutral-800/80">
+    <div class="text-xs text-surface-600-400">
         <strong>
         Location:
         <span class:hidden={!$ae_loc.trusted_access || !$ae_loc.edit_mode}>

src/routes/events/[event_id]/(launcher)/menu_session_list.svelte

@@ -48,12 +48,12 @@ let hover_timer: any = $state(null);
 
 <div
     class="
-        w-full max-w-full
+        w-full max-w-80
-        flex flex-col flex-wrap items-center justify-start
+        flex flex-col md:flex-row flex-wrap gap-1 items-center justify-start md:justify-center
         "
         >
 {#if $lq__event_session_obj_li && $lq__event_session_obj_li.length > 0}
-<div class="text-xs text-neutral-800/80">
+<div class="text-xs text-surface-600-400">
     <strong>
     Sessions:
     <span class:hidden={!$ae_loc.trusted_access || !$ae_loc.edit_mode}>
@@ -70,10 +70,10 @@ let hover_timer: any = $state(null);
 </div>
 
 <ul
-    class="space-y-1"
+    class="space-y-1 max-w-full p-0 m-0"
     >
     {#each $lq__event_session_obj_li as event_session_obj}
-        <li>
+        <li class="p-0 m-0">
         <button
             type="button"
             onmouseenter={() => {
@@ -81,12 +81,20 @@ let hover_timer: any = $state(null);
                 hover_timer = setTimeout(async () => {
                     loading__session_id_status = true;
 
-                    $events_slct.event_session_id = null;
+                    // $events_slct.event_session_id = null;
-                    await tick();
+                    // await tick();
 
                     slct_event_session_id = event_session_obj?.id;
                     $events_slct.event_session_id = event_session_obj?.id;
                     data_url.searchParams.set('session_id', event_session_obj?.id);
+
+                    let new_url = data_url.toString();
+                    console.log(new_url);
+                    loading__session_id_status = false;
+                    // goto(new_url, {replaceState: true}); // Updates the URL without reloading the page
+                    goto(new_url, {replaceState: false}); // Updates the URL history without reloading the page
+                    loading__session_id_status = 'loading';
+
                     $events_slct.event_session_obj = event_session_obj;
 
                     ae_promises.slct_event_session_id = events_func.load_ae_obj_id__event_session({
@@ -100,11 +108,11 @@ let hover_timer: any = $state(null);
                     .then(async (load_results) => {
                         console.log(`load_results = `, load_results);
 
-                        let new_url = data_url.toString();
+                        // let new_url = data_url.toString();
-                        console.log(new_url);
+                        // console.log(new_url);
                         loading__session_id_status = false;
-                        // goto(new_url, {replaceState: true}); // Updates the URL without reloading the page
+                        // // goto(new_url, {replaceState: true}); // Updates the URL without reloading the page
-                        goto(new_url, {replaceState: false}); // Updates the URL history without reloading the page
+                        // goto(new_url, {replaceState: false}); // Updates the URL history without reloading the page
                     });
                 }, hover_timer_wait);
             }}
@@ -122,9 +130,9 @@ let hover_timer: any = $state(null);
 
                 let new_url = data_url.toString();
                 console.log(new_url);
-                loading__session_id_status = false;
                 // goto(new_url, {replaceState: true}); // Updates the URL without reloading the page
                 goto(new_url, {replaceState: false}); // Updates the URL history without reloading the page
+                loading__session_id_status = 'loading';
 
                 // $events_slct.event_session_id = event_session_obj?.id;
                 $events_slct.event_session_obj = event_session_obj;
@@ -158,8 +166,11 @@ let hover_timer: any = $state(null);
                 btn btn-sm hover:preset-filled-primary-500
                 overflow-hidden
                 text-sm
-                w-full max-w-full
+                w-full
                 text-left
+                m-0
+                p-0
+
                 rounded-md
                 flex flex-row items-center justify-start
                 transition-all
@@ -175,7 +186,7 @@ let hover_timer: any = $state(null);
             >
 
             <span
-                class="border-r border-surface-400-600 pr-1 w-28 max-w-28"
+                class="border-r border-surface-400-600 pr-1 min-w-28"
                 >
                 {#if $events_slct.event_session_id === event_session_obj?.id}
                     <span class="fas fa-calendar-check"></span>