Lots of work and testing on the debug and page load process.

src/lib/ae_stores.ts

@@ -47,7 +47,7 @@ export let ae_snip = string_snippets;
 //     };
 
 // Set the version for the app data. Changing this should force a notification and ask the user to clear and reload the page.
-let ver = '2025-04-29_1545'; // KEEP: 2025-04-18_1335
+let ver = '2025-04-30_1320'; // KEEP: 2025-04-18_1335 and 2025-04-29_1545
 let ver_idb = '2025-04-18_1100'; // Not used
 
 // *** BEGIN *** Longer-term app data. This should be stored to local storage.

src/routes/+layout.svelte

@@ -675,8 +675,8 @@ $effect(() => {
 
 {#if (browser && flag_new_ver)}
     <div class="flex flex-col items-center justify-center h-full max-w-lg mx-auto space-y-4">
-        <h1 class="text-4xl font-bold text-red-600 dark:text-red-400">New Version Available</h1>
+        <h1 class="text-4xl text-center font-bold text-red-600 dark:text-red-400">New Version Available</h1>
-        <p class="text-lg text-center text-gray-800 dark:text-gray-200">A new version of the site is available. Please reload the page.</p>
+        <p class="text-lg text-center text-gray-800 dark:text-gray-200">A new version of the site is available. Please use the Clear Cache and Reload button below to update.</p>
         <button
             type="button"
             onclick={() => {
@@ -686,30 +686,40 @@ $effect(() => {
                 // Clear localStorage and sessionStorage
                 clear_local();
 
-                confirm('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
+                // alert('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
 
                 window.location.reload();
             }}
-            class="btn btn-lg m-1 variant-filled-warning hover:variant-filled-success text-error-1000 hover:text-error-800 transition-all"
+            class="btn btn-lg m-1 variant-filled-warning hover:variant-filled-success text-error-1000 hover:text-error-800 transition-all text-wrap"
-            title="Reload and clear the page cache"
+            title="Reload and clear the page cache to update"
             >
             <span class="fas fa-sync mx-1"></span>
-            Reload and Clear Cache
+            Clear Cache and<br/> Reload to Update
         </button>
 
+        <!-- This is mainly for IDAA using iframes in the Novi site. -->
+        <div
+            class="text-center text-sm text-gray-500"
+            class:hidden={!$ae_loc.iframe}
+            >
+            <p>If you have tried the "Clear Cache and Reload" button, you may need to manually reload the page using your browser's reload button or by pressing <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>Cmd</kbd> + <kbd>R</kbd>.</p>
+            <p>This sometimes happens with new versions of the app or when in an iframe.</p>
+        </div>
+
         <button
             type="button"
             onclick={() => {
                 window.location.reload();
             }}
+            class="btn btn-sm"
             >
             <span class="fas fa-sync mx-1"></span>
-            Reload Page
+            Reload
         </button>
     </div>
 {:else if browser && $ae_loc?.cache_expired}
     <div class="flex flex-col items-center justify-center h-full max-w-lg mx-auto space-y-4">
-        <h1 class="text-4xl font-bold text-red-600 dark:text-red-400">Expired Cache</h1>
+        <h1 class="text-4xl text-center font-bold text-red-600 dark:text-red-400">Expired Cache</h1>
         <p class="text-lg text-center text-gray-800 dark:text-gray-200">The cache for this site has expired. Please reload the page.</p>
         <button
             type="button"
@@ -720,25 +730,35 @@ $effect(() => {
                 // Clear localStorage and sessionStorage
                 clear_local();
 
-                confirm('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
+                alert('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
 
                 window.location.reload();
             }}
-            class="btn btn-lg m-1 variant-filled-warning hover:variant-filled-success text-error-1000 hover:text-error-800 transition-all"
+            class="btn btn-lg m-1 variant-filled-warning hover:variant-filled-success text-error-1000 hover:text-error-800 transition-all text-wrap"
             title="Reload and clear the page cache"
             >
             <span class="fas fa-sync mx-1"></span>
-            Reload and Clear Cache
+            Clear Cache and Reload
         </button>
 
+        <!-- This is mainly for IDAA using iframes in the Novi site. -->
+        <div
+            class="text-center text-sm text-gray-500"
+            class:hidden={!$ae_loc.iframe}
+            >
+            <p>If you have tried the "Clear Cache and Reload" button, you may need to manually reload the page using your browser's reload button or by pressing <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>Cmd</kbd> + <kbd>R</kbd>.</p>
+            <p>This sometimes happens with new versions of the app or when in an iframe.</p>
+        </div>
+
         <button
             type="button"
             onclick={() => {
                 window.location.reload();
             }}
+            class="btn btn-sm"
             >
             <span class="fas fa-sync mx-1"></span>
-            Reload Page
+            Reload
         </button>
     </div>
 
@@ -749,7 +769,7 @@ $effect(() => {
         data-sveltekit-preload-data="false"
         class="flex flex-col items-center justify-center h-full max-w-lg mx-auto space-y-4"
         >
-        <h1 class="text-4xl font-bold text-red-600 dark:text-red-400">Access Denied</h1>
+        <h1 class="text-4xl text-center font-bold text-red-600 dark:text-red-400">Access Denied</h1>
         <p class="text-lg text-center text-gray-800 dark:text-gray-200">You do not have access to this site. You may need a <strong>passcode</strong>, <strong>sign in link</strong>, and or <strong>URL site key</strong>.</p>
         <!-- xx {JSON.stringify(data.route)} xx -->
         <button
@@ -763,25 +783,15 @@ $effect(() => {
                 clear_local();
                 // clear_sess();
 
-                confirm('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
+                alert('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
 
                 window.location.reload();
             }}
-            class="btn btn-sm m-1 variant-ghost-surface hover:variant-ghost-warning hover:variant-outline-warning text-error-600 hover:text-error-900 transition-all"
+            class="btn btn-sm m-1 variant-ghost-surface hover:variant-ghost-warning hover:variant-outline-warning text-error-600 hover:text-error-900 transition-all text-wrap"
             title="Reload and clear the page cache"
             >
             <span class="fas fa-sync mx-1"></span>
-            Reload and Clear Cache
+            Clear Cache and Reload
-        </button>
-
-        <button
-            type="button"
-            onclick={() => {
-                window.location.reload();
-            }}
-            >
-            <span class="fas fa-sync mx-1"></span>
-            Reload Page
         </button>
 
         <!-- This is mainly for IDAA using iframes in the Novi site. -->
@@ -789,9 +799,20 @@ $effect(() => {
             class="text-center text-sm text-gray-500"
             class:hidden={!$ae_loc.iframe}
             >
-            <p>If you have tried the "Reload and Clear Cache" button, you may need to manually reload the page using your browser's reload button or by pressing <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>Cmd</kbd> + <kbd>R</kbd>.</p>
+            <p>If you have tried the "Clear Cache and Reload" button, you may need to manually reload the page using your browser's reload button or by pressing <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>Cmd</kbd> + <kbd>R</kbd>.</p>
             <p>This sometimes happens with new versions of the app or when in an iframe.</p>
         </div>
+
+        <button
+            type="button"
+            onclick={() => {
+                window.location.reload();
+            }}
+            class="btn btn-sm"
+            >
+            <span class="fas fa-sync mx-1"></span>
+            Reload
+        </button>
     </div>
 
 {:else if (browser && $ae_loc?.allow_access)}
@@ -1094,35 +1115,112 @@ max-w-max -->
 
 {/if}
 
+<!-- opacity-25
+hover:opacity-100 -->
+<!-- text-slate-400 hover:text-slate-800 -->
 <div
-    class="absolute bottom-0 left-0 flex text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1 w-full outline"
+    class="
-    class:ae_debug={$ae_loc?.debug}
+        absolute bottom-0 left-0
-    >
+        flex
-    <!-- {#if $ae_loc.app_cfg?.show_element__sign_in_out}
+        text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg
-    <Element_sign_in_out
-        data={data}
-        hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
-        />
-    {/if} -->
 
-    <!-- <button
+        dark:text-slate-400 dark:hover:text-slate-200
+        bg-red-100/60 dark:bg-red-800/50
+        hover:bg-red-200 hover:dark:bg-red-900
+
+        mx-1 my-2
+        max-h-min
+        max-w-lg
+        transition-all
+        transition-delay-1000
+        transition-duration-1000
+        ease-in
+        z-50
+
+        border-2
+        border-red-300 dark:border-red-700
+        hover:border-red-500 hover:dark:border-red-500
+        "
+    class:top-0={$ae_loc?.debug}
+    class:w-full={$ae_loc?.debug}
+    class:hidden={!$ae_loc?.trusted_access}
+    class:border-transparent={!$ae_loc?.debug}
+    class:hover:border-transparent={!$ae_loc?.debug}
+    class:hover:bg-transparent={!$ae_loc?.debug}
+    >
+
+    <div
+        class:hidden={!$ae_loc?.debug}
+        class:border-red-200={$ae_loc?.debug}
+        class:dark:border-red-800={$ae_loc?.debug}
+        class="
+
+            transition-all
+            transition-delay-1000
+            transition-duration-1000
+            ease-in
+            overflow-y-auto
+            px-1 py-4
+            opacity-50
+            hover:opacity-100
+            relative
+            "
+        >
+
+        <!-- flex flex-col items-center justify-center max-h-full outline -->
+        <div>
+            <span class="fas fa-bug mx-1"></span>
+            <span>Debug</span>
+        </div>
+
+        <pre>
+            {JSON.stringify($ae_loc, null, 2)}
+        </pre>
+
+    </div>
+
+    <button
+        type="button"
+        onclick={() => {
+            console.log('Debug ae_loc:', $ae_loc);
+            $ae_loc.debug = !$ae_loc?.debug;
+        }}
+        class="
+            btn btn-sm variant-ghost-surface hover:variant-ghost-warning
+            transition-all *:hover:inline-block
+
+            absolute top-0 right-0
+            "
+        title="Turn debug content and styles off and on"
+        >
+        <span class="fas fa-toggle-on mx-1"></span>
+        Debug
+        <span class="hidden">
+            Mode On
+        </span>
+    </button>
+
+    <button
         type="button"
         onclick={() => {
             console.log('Debug ae_loc:', $ae_loc);
             $ae_loc.debug = !$ae_loc?.debug;
         }}
         id="AE-Quick-Debug"
-        class="ae_quick_debug btn btn-sm variant-glass-surface transition-all"
+        class="
+            btn btn-icon
+            variant-glass-surface
+            hover:variant-ghost-warning
+            transition-all
+            fixed bottom-2 left-2
+            text-gray-400 hover:text-gray-800
+            "
         title="Turn debug content and styles off and on"
         >
+        <!-- absolute bottom-2 left-2 -->
+        <!-- fixed bottom-0 left-0 -->
         &pi;
-    </button> -->
+    </button>
-
-    <!-- {#if $ae_loc.app_cfg?.show_element__access_type}
-    <Element_access_type
-        hidden={$ae_loc.iframe && !$ae_loc.trusted_access}
-        />
-    {/if} -->
 </div>
 
 
@@ -1130,29 +1228,29 @@ max-w-max -->
 /* BEGIN: AE's Svelte Quick Debug component  */
 #AE-Quick-Debug {
     /* position: absolute; */
-    position: fixed;
+    /* position: fixed; */
     /* position: relative; */
     /* position: static; */
     /* position: sticky; */
     /* top: 1em; */
-    bottom: 2rem;
+    /* bottom: 2rem; */
-    left: 1rem;
+    /* left: 1rem; */
 
-    padding: .0rem;
+    /* padding: .0rem; */
 
     /* lightyellow */
     /* background-color: hsla(60,100%,90%,.30);  */
     /* background-color: rgba(var(--color-surface-500) / .5); */
 
-    border: none;
+    /* border: none;
 
     border-top: solid thin hsla(0,0%,0%,.25);
     border-left: solid thin hsla(0,0%,0%,.25);
-    border-bottom: solid thin hsla(0,0%,0%,.25);
+    border-bottom: solid thin hsla(0,0%,0%,.25); */
     /* border-top-left-radius: .5em; */
     /* border-bottom-left-radius: .5em; */
 
-    opacity: .15;
+    /* opacity: .15; */
     /* opacity: 1; */
 
     font-size: .75rem;
@@ -1170,16 +1268,16 @@ max-w-max -->
     /* lightyellow */
     /* background-color: hsla(60,100%,90%,.95); */
     /* background-color: rgba(var(--color-surface-500) / 1); */
-
+/*
     border-top: solid thin hsla(0,0%,0%,.95);
     border-left: solid thin hsla(0,0%,0%,.95);
-    border-bottom: solid thin hsla(0,0%,0%,.95);
+    border-bottom: solid thin hsla(0,0%,0%,.95); */
 
-    opacity: 1;
+    /* opacity: 1; */
 
-    padding: .5rem;
+    /* padding: .5rem; */
 
-    font-size: 1.75rem;
+    font-size: 1.5rem;
     /* Need to zoom 3.5 when hovering */
     /* transform: scale(3.5); */