From bcee6c5281a4fe34e1c25b6bf64b9c3a82f15c16 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 3 Oct 2025 14:29:24 -0400
Subject: [PATCH] More work on the alerts for sessions. I think they are pretty
 good now.

---
 .../session/[session_id]/+page.svelte         |  11 +-
 .../[session_id]/session_page_menu.svelte     |  59 ++++-
 .../ae_comp__event_session_alert.svelte       |  18 +-
 .../ae_comp__event_session_obj_li.svelte      | 250 +-----------------
 4 files changed, 85 insertions(+), 253 deletions(-)

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 dbad8592..703988d0 100644
--- a/src/routes/events/[event_id]/session/[session_id]/+page.svelte
+++ b/src/routes/events/[event_id]/session/[session_id]/+page.svelte
@@ -32,6 +32,7 @@ import Comp_event_presenter_form_agree from '../../presenter/[presenter_id]/ae_c
 import Element_manage_event_file_li_wrap from '$lib/element_manage_event_file_li_direct.svelte';
 import Session_view from './session_view.svelte';
 import Session_page_menu from './session_page_menu.svelte';
+import Comp_event_session_alert from '../ae_comp__event_session_alert.svelte';
 // import Sign_in_out from './../../sign_in_out.svelte';
 
 import { browser } from '$app/environment';
@@ -189,7 +190,15 @@ if (!$ae_loc.authenticated_access && $events_loc.pres_mgmt.show_content__session
 
 {:else if $lq__event_session_obj?.enable || $ae_loc.trusted_access}
 
-<header class="ae_module_header">
+<header class="ae_module_header relative">
+    {#if $lq__event_session_obj?.alert && $ae_loc.trusted_access}
+        <Comp_event_session_alert
+            lq__event_session_obj={$lq__event_session_obj}
+            position='top'
+            log_lvl={log_lvl}
+            />
+    {/if}
+
     <span
         class="flex flex-row flex-wrap gap-1 items-center justify-center"
         >
diff --git a/src/routes/events/[event_id]/session/[session_id]/session_page_menu.svelte b/src/routes/events/[event_id]/session/[session_id]/session_page_menu.svelte
index 83125d07..abafa652 100644
--- a/src/routes/events/[event_id]/session/[session_id]/session_page_menu.svelte
+++ b/src/routes/events/[event_id]/session/[session_id]/session_page_menu.svelte
@@ -18,6 +18,7 @@ import { goto } from '$app/navigation';
 
 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 { core_func } from '$lib/ae_core/ae_core_functions';
 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';
 
@@ -28,6 +29,8 @@ import Comp__events_menu_nav from '../../../ae_comp__events_menu_nav.svelte';
 // import Comp__global_menu_opts from '$lib/ae_comp__global_menu_opts.svelte';
 import Comp__pres_mgmt_menu_opts from '../../../ae_comp__events_menu_opts.svelte';
 
+// Variables
+let ae_promises: key_val = {};
 let ae_tmp: key_val = $state({});
 let ae_triggers: key_val = $state({});
 
@@ -171,7 +174,52 @@ let ae_triggers: key_val = $state({});
 
             <div class="flex flex-row flex-wrap gap-1 items-center justify-between">
 
-                <div class="flex flex-row gap-1 items-center justify-evenly">
+                <div class="flex flex-row gap-1 items-center justify-evenly relative">
+
+                    <!-- Toggle alert status -->
+                    <button
+                        type="button"
+                        onclick={() => {
+                            console.log('Toggle alert status for the session.');
+
+                            let new_alert_value = !$lq__event_session_obj?.alert;
+                            console.log('New alert value:', new_alert_value);
+
+                            ae_promises.api_update__ae_obj = core_func.update_ae_obj_id_crud_v2({
+                                api_cfg: $ae_api,
+                                object_type: 'event_session',
+                                object_id: $lq__event_session_obj?.event_session_id_random,
+                                object_reload: true,
+                                field_name: 'alert',
+                                new_field_value: new_alert_value,
+                                log_lvl: 1
+                                })
+                            .then(function (results) {
+                            })
+                            .finally(function () {
+                            });
+                        }}
+                        class:opacity-100={$lq__event_session_obj?.alert}
+                        class:opacity-50={!$lq__event_session_obj?.alert}
+                        class="
+                            btn btn-sm
+                            preset-tonal-warning hover:preset-tonal-error
+                            preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
+                            hover:opacity-100
+                            transition-all
+                            "
+                        title={$lq__event_session_obj?.alert ? 'Remove alert status' : 'Mark as alert'}
+                        >
+                        {#if $lq__event_session_obj?.alert}
+                            <!-- <span class="fas fa-exclamation-triangle m-0.75 text-warning-600" title="This session is marked as an alert."></span> -->
+                            <span class="fas fa-bell-slash m-0.75 text-warning-600" title="This session is marked as an alert."></span>
+                        {:else}
+                            <span class="fas fa-bell m-0.75 text-gray-400" title="This session is not marked as an alert."></span>
+                        {/if}
+                        <span class="hidden">Toggle Alert</span>
+                    </button>
+
+
                     <Element_ae_crud
                         trigger_patch={ae_triggers.hide_event_launcher}
                         api_cfg={$ae_api}
@@ -204,19 +252,20 @@ let ae_triggers: key_val = $state({});
                                 // $events_slct.exhibit_tracking_obj.hide_event_launcher = !$lq__event_session_obj?.hide_event_launcher;
                                 ae_triggers.hide_event_launcher = true;
                             }}
-                            class="btn btn-sm m-1 *:hover:inline"
+                            class="btn btn-sm m-1 group"
                             class:ae_btn_surface_outlined={!$lq__event_session_obj?.hide_event_launcher}
                             class:ae_btn_success={$lq__event_session_obj?.hide_event_launcher}
                             disabled={!$ae_loc.trusted_access}
+                            title="{$lq__event_session_obj?.hide_event_launcher ? 'Not showing in the Launcher. Unhide from the Launcher?' : 'Currently showing in the Launcher. Hide from the Launcher?'}"
                             >
                             {#if $lq__event_session_obj?.hide_event_launcher}
                                 <span class="fas fa-toggle-on m-1"></span>
-                                Unhide from Launcher?
+                                Unhide from Launcher
                             {:else}
                                 <!-- <span class="fas fa-toggle-off m-1"></span> -->
                                 <span class="fas fa-paper-plane m-1"></span>
-                                <span class="hidden">
-                                Showing in Launcher
+                                <span class="hidden group-hover:inline">
+                                Hide from Launcher
                                 </span>
                             {/if}
                             <!-- {@html ($lq__event_session_obj?.hide_event_launcher ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')} -->
diff --git a/src/routes/events/[event_id]/session/ae_comp__event_session_alert.svelte b/src/routes/events/[event_id]/session/ae_comp__event_session_alert.svelte
index ad32d86c..cf339cba 100644
--- a/src/routes/events/[event_id]/session/ae_comp__event_session_alert.svelte
+++ b/src/routes/events/[event_id]/session/ae_comp__event_session_alert.svelte
@@ -13,6 +13,8 @@ interface Props {
 
     show__edit_alert_msg?: boolean;
     show__view_alert?: boolean;
+
+    position?: 'top'|'bottom'; // 'top' | 'bottom'
 }
 
 let {
@@ -27,6 +29,8 @@ let {
 
     show__edit_alert_msg = $bindable(false),
     show__view_alert = $bindable(false),
+
+    position = 'bottom', // 'top' | 'bottom'
 }: Props = $props();
 
 // *** Import Svelte specific
@@ -50,8 +54,10 @@ let ae_triggers: key_val = $state({});
 
 <div
     class:h-full={!$events_sess?.pres_mgmt?.show__view_alert[lq__event_session_obj?.event_session_id_random]}
+    class:bottom-0={position == 'bottom'}
+    class:top-0={position == 'top'}
     class="
-        absolute bottom-0 left-0
+        absolute left-0
         flex flex-row items-center justify-center
         text-warning-600
         z-10
@@ -131,6 +137,12 @@ let ae_triggers: key_val = $state({});
         <button
             type="button"
             onclick={() => {
+                // Confirm before removing the alert status?
+                // confirm('Are you sure you want to remove the alert status for this session?')
+                if (!confirm('Are you sure you want to remove the alert status for this session?')) {
+                    return;
+                }
+
                 let new_alert_value = !lq__event_session_obj?.alert;
                 console.log('New alert value:', new_alert_value);
 
@@ -165,7 +177,8 @@ let ae_triggers: key_val = $state({});
         </button>
         </div>
 
-        <div class="preset-tonal-primary p-1 rounded-lg border border-primary-300 min-h-16">
+
+        <div class="preset-tonal-surface p-1 min-h-16 min-w-xs">
         {#if $events_sess.pres_mgmt.show__edit_alert_msg[lq__event_session_obj?.event_session_id_random]}
             <textarea
                 bind:value={$events_sess.pres_mgmt.tmp__alert_msg[lq__event_session_obj?.event_session_id_random]}
@@ -178,6 +191,7 @@ let ae_triggers: key_val = $state({});
         {/if}
         </div>
 
+
         <div class="flex flex-row flex-wrap gap-1 items-center justify-between mt-1">
         {#if $events_sess.pres_mgmt.show__edit_alert_msg[lq__event_session_obj?.event_session_id_random]}
 
diff --git a/src/routes/events/ae_comp__event_session_obj_li.svelte b/src/routes/events/ae_comp__event_session_obj_li.svelte
index 62ffba8b..cfca1347 100644
--- a/src/routes/events/ae_comp__event_session_obj_li.svelte
+++ b/src/routes/events/ae_comp__event_session_obj_li.svelte
@@ -177,252 +177,12 @@ let trigger_reload_session_id: string = $state('');
     >
     <td>
         {#if session_obj?.alert && $ae_loc.trusted_access}
-
-        <Comp_event_session_alert
-            lq__event_session_obj={session_obj}
-            log_lvl={log_lvl}
-            />
-
-
-
-
-        <div
-            class:hidden={1==1}
-            class:h-full={!$events_sess?.pres_mgmt?.show__view_alert[session_obj?.event_session_id_random]}
-            class="
-                absolute bottom-0 left-0
-                flex flex-row items-center justify-center
-                text-warning-600
-                z-10
-                transition-all
-                "
-            title="This session is marked as an alert."
-            >
-            <!-- Toggle show/hide alert status and message -->
-            <button
-                type="button"
-                onclick={() => {
-                    $events_sess.pres_mgmt.show__view_alert[session_obj?.event_session_id_random] = !$events_sess.pres_mgmt.show__view_alert[session_obj?.event_session_id_random];
-                }}
-                class:hidden={$events_sess.pres_mgmt.show__view_alert[session_obj?.event_session_id_random]}
-                class="
-                    btn btn-lg
-                    text-sm
-                    px-3 sm:px-2
-                    preset-tonal-warning
-                    preset-outlined-warning-100-900
-                    opacity-80 hover:opacity-100
-                    transition-all
-                    group
-                    "
-                title="Toggle alert message display"
-                >
-                <span class="fas fa-bell text-warning-600 mx-1" title="This session is marked as an alert."></span>
-                <span class="hidden group-hover:inline">View Alert</span>
-            </button>
-
-            <!-- Alert Message -->
-            <div
-                class:hidden={!$events_sess?.pres_mgmt?.show__view_alert[session_obj?.event_session_id_random]}
-                class:inline-block={session_obj?.alert_msg && $events_sess?.pres_mgmt?.show__view_alert[session_obj?.event_session_id_random]}
-                class="
-                    min-w-xs
-                    max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl
-                    p-1 px-2
-                    bg-warning-100 text-warning-900
-                    border border-warning-300
-                    rounded-lg
-                    shadow-lg
-                    transition-all
-                    "
-                >
-                <div class="flex flex-row flex-wrap gap-1 items-center justify-between mb-1">
-                <!-- Toggle show/hide alert status and message -->
-                <button
-                    type="button"
-                    onclick={() => {
-                        $events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random] = session_obj?.alert_msg;
-                        $events_sess.pres_mgmt.show__edit_alert_msg[session_obj?.event_session_id_random] = false;
-
-                        $events_sess.pres_mgmt.show__view_alert[session_obj?.event_session_id_random] = false;
-                    }}
-                    class:hidden={!$events_sess.pres_mgmt.show__view_alert[session_obj?.event_session_id_random]}
-                    class="
-                        btn btn-sm
-                        text-xs
-                        px-1
-                        preset-tonal-warning hover:preset-tonal-error
-                        preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
-                        opacity-80 hover:opacity-100
-                        transition-all
-                        group
-
-                        "
-                    title="Cancel editing and close alert message"
-                    >
-                    <span class="fas fa-times mx-1"></span>
-                    <!-- <span class="hidden group-hover:inline">Close</span> -->
-                    Close Alert
-                </button>
-
-                <!-- Remove alert status (and message?) -->
-                <button
-                    type="button"
-                    onclick={() => {
-                        let new_alert_value = !session_obj?.alert;
-                        console.log('New alert value:', new_alert_value);
-
-                        ae_promises.api_update__ae_obj = core_func.update_ae_obj_id_crud_v2({
-                            api_cfg: $ae_api,
-                            object_type: 'event_session',
-                            object_id: session_obj?.event_session_id_random,
-                            object_reload: true,
-                            field_name: 'alert',
-                            new_field_value: new_alert_value,
-                            log_lvl: 1
-                            })
-                        .then(function (results) {
-                        })
-                        .finally(function () {
-                        });
-                    }}
-                    class="
-                        btn btn-sm
-                        text-xs
-                        px-1
-                        preset-tonal-secondary hover:preset-filled-secondary-500
-                        preset-outlined-secondary-100-900 hover:preset-outlined-secondary-600-400
-                        opacity-80 hover:opacity-100
-                        transition-all
-                        "
-                    title="Toggle alert status"
-                    >
-                    <span class="fas fa-exclamation-triangle text-warning-600 mr-1" title="This session is marked as an alert."></span>
-                    <span>Remove Alert</span>
-                </button>
-                </div>
-
-                <div class="preset-tonal-primary p-1 rounded-lg border border-primary-300 min-h-16">
-                {#if $events_sess.pres_mgmt.show__edit_alert_msg[session_obj?.event_session_id_random]}
-                    <textarea
-                        bind:value={$events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random]}
-                        rows={3}
-                        class="w-full p-1"
-                        placeholder="Enter alert message here..."
-                        ></textarea>
-                {:else}
-                    {session_obj?.alert_msg ?? 'No message set.'}
-                {/if}
-                </div>
-
-                <div class="flex flex-row flex-wrap gap-1 items-center justify-between mt-1">
-                {#if $events_sess.pres_mgmt.show__edit_alert_msg[session_obj?.event_session_id_random]}
-
-                    <!-- Save alert message; only show if changed -->
-                    <button
-                        type="button"
-                        onclick={() => {
-                            ae_promises.api_update__ae_obj = core_func.update_ae_obj_id_crud_v2({
-                                api_cfg: $ae_api,
-                                object_type: 'event_session',
-                                object_id: session_obj?.event_session_id_random,
-                                object_reload: true,
-                                field_name: 'alert_msg',
-                                new_field_value: $events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random],
-                                log_lvl: 1
-                                })
-                            .then(function (results) {
-                            })
-                            .finally(function () {
-                                $events_sess.pres_mgmt.show__edit_alert_msg[session_obj?.event_session_id_random] = false;
-                            });
-                        }}
-                        class:invisible={$events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random] == session_obj?.alert_msg}
-                        class:visible={$events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random] != session_obj?.alert_msg}
-                        class="
-                            btn btn-sm
-                            text-xs
-                            px-1
-                            preset-tonal-success hover:preset-filled-success-500
-                            preset-outlined-success-100-900 hover:preset-outlined-success-600-400
-                            opacity-80 hover:opacity-100
-                            transition-all
-                            "
-                        title="Save alert message"
-                        >
-                        <span class="fas fa-save mx-1"></span>
-                        <span>Save</span>
-                    </button>
-
-                    <!-- Cancel edit/save alert message -->
-                    <button
-                        type="button"
-                        onclick={() => {
-                            $events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random] = session_obj?.alert_msg;
-                            $events_sess.pres_mgmt.show__edit_alert_msg[session_obj?.event_session_id_random] = false;
-
-                            $events_sess.pres_mgmt.show__view_alert[session_obj?.event_session_id_random] = false;
-
-                            // Reload the session to get the original alert message back.
-                            // events_func.load_ae_obj_id__event_session({
-                            //         api_cfg: $ae_api,
-                            //         event_session_id: session_obj?.event_session_id_random,
-                            //         log_lvl: log_lvl
-                            //         })
-                            // .then(function (load_results) {
-                            //     console.log(`Loaded session:`, load_results);
-                            // });
-                        }}
-                        class="
-                            btn btn-sm
-                            text-xs
-                            px-1
-                            preset-tonal-secondary hover:preset-filled-secondary-500
-                            preset-outlined-secondary-100-900 hover:preset-outlined-secondary-600-400
-                            opacity-80 hover:opacity-100
-                            transition-all
-
-                            "
-                        title="Reset alert message and cancel editing alert"
-                        >
-                        <span class="fas fa-times mx-1"></span>
-                        <span>Cancel</span>
-                    </button>
-
-                {:else}
-
-                    <!-- Edit alert message -->
-                    <button
-                        type="button"
-                        onclick={() => {
-                            console.log('Edit the alert message for the session.');
-                            $events_sess.pres_mgmt.show__edit_alert_msg[session_obj?.event_session_id_random] = true
-
-                            $events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random] = session_obj?.alert_msg;
-                        }}
-                        class="
-                            btn btn-sm
-                            text-xs
-                            px-1
-                            preset-tonal-secondary hover:preset-tonal-error
-                            preset-outlined-secondary-100-900 hover:preset-outlined-secondary-600-400
-                            opacity-80 hover:opacity-100
-                            transition-all
-                            "
-                        title="Edit alert message"
-                        >
-                        <span class="fas fa-edit mx-1"></span>
-                        <span>Edit Message</span>
-                    </button>
-
-                {/if}
-                </div>
-
-
-            </div>
-
-        </div>
+            <Comp_event_session_alert
+                lq__event_session_obj={session_obj}
+                log_lvl={log_lvl}
+                />
         {/if}
+
         <a
             href="/events/{session_obj?.event_id}/session/{session_obj?.event_session_id}"
             class="