Package updates and trying to fix a reversion with reactivity within the same page file. The Dexie liveQuery does not seem to refresh correctly when on the same page. It does show the update on child components. Even if nearly identical.

src/app.postcss

@@ -482,3 +482,51 @@ img.qr_code:focus {
     color: hsla(210, 100%, 50%, .75);
     text-decoration: none;
 }
+
+
+/* .ae_btn.btn-danger,
+.ae_btn.btn-info,
+.ae_btn.btn-warning {
+    border-radius: 60px;
+} */
+
+/* .ae_margin_xs {
+    margin: 0.25em;
+}
+.ae_margin_sm {
+    margin: 0.5em;
+}
+.ae_margin_md {
+    margin: 0.75em;
+}
+.ae_margin_lg {
+    margin: 1em;
+}
+.ae_margin_lg {
+    margin: 1.25em;
+} */
+
+.iframe .novi_btn {
+    border-radius: 60px;
+    border-color: hsla(0, 0%, 50%, .5);
+}
+
+.iframe .novi_margin_sm {
+    /* margin: 0.5em; */
+}
+
+.iframe button.ae_normal,
+.iframe .btn.ae_normal {
+    /* font: normal 1em sans-serif; */
+    font-size: 1rem;
+}
+
+.iframe button.ae_smaller,
+.iframe .btn.ae_smaller {
+    font-size: 0.8rem;
+}
+
+.iframe button.ae_smallest,
+.iframe .btn.ae_smallest {
+    font-size: 0.65rem;
+}

src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 /** @type {import('./$types').PageData} */
-let log_lvl: number = 0;
+let log_lvl: number = 1;
 
 // *** Import Svelte specific
 import { browser } from '$app/environment';
@@ -25,7 +25,8 @@ import Archive_view from './ae_idaa_comp__archive_obj_id_view.svelte';
 
 import Archive_content_obj_li from './ae_idaa_comp__archive_content_obj_li.svelte';
 import Archive_content_obj_id_edit from './ae_idaa_comp__archive_content_obj_id_edit.svelte';
-import Media_player from './../ae_idaa_comp__media_player.svelte';
+// import Media_player from './../ae_idaa_comp__media_player.svelte';
+import Modal_media_player from './ae_idaa_comp__modal_media_player.svelte';
 
 interface Props {
     data: any;
@@ -50,7 +51,9 @@ $idaa_slct.archive_id = ae_acct.slct.archive_id;
 
 
 let lq__archive_obj = $derived(liveQuery(async () => {
-    console.log(`lq__archive_obj: archive_id = ${$idaa_slct?.archive_id}`);
+    if (log_lvl) {
+        console.log(`lq__archive_obj: archive_id = ${$idaa_slct?.archive_id}`);
+    }
     let results = await db_archives.archive
         .get($idaa_slct?.archive_id ?? ''); // null or undefined does not reset things like '' does
 
@@ -85,10 +88,19 @@ let lq__archive_content_obj_li = $derived(liveQuery(async () => {
 }));
 
 let lq__archive_content_obj = $derived(liveQuery(async () => {
-    let results = await db_archives.content
+    if (log_lvl) {
-        .get($idaa_slct.archive_content_id ?? ''); // null or undefined does not reset things like '' does
+        console.log(`lq__archive_content_obj: archive_content_id = ${$idaa_slct?.archive_content_id}`);
+    }
+    if ($idaa_slct.archive_content_id) {
+        let results = await db_archives.content
+            .get($idaa_slct.archive_content_id); // null or undefined does not reset things like '' does
 
-    return results;
+        return results;
+    }
+    // const results = await db_archives.content
+    //     .get($idaa_slct.archive_content_id); // null or undefined does not reset things like '' does
+
+    // return results;
 }));
 
 
@@ -266,8 +278,8 @@ if (browser) {
 
 <!-- Modal: Archive Content edit ID -->
 <Modal
-    title="{$lq__archive_content_obj?.name ?? 'New Archive Content'} - {$lq__archive_content_obj?.id ?? 'Not Saved Yet'}"
     bind:open={$idaa_sess.archives.show__modal_edit__archive_content_id}
+    title="{$lq__archive_content_obj?.name ?? 'New Archive Content'} - {$lq__archive_content_obj?.id ?? 'Not Saved Yet'}"
     autoclose={false}
     placement="top-center"
     size="xl"
@@ -332,10 +344,22 @@ if (browser) {
 
 
 <!-- Modal: Archive Content ID media player -->
+<!-- {#if $lq__archive_content_obj?.name} -->
+{#if $idaa_slct.archive_content_id && $idaa_sess.archives.show__modal_view__archive_content_id}
+<Modal_media_player
+    lq__archive_content_obj={lq__archive_content_obj}
+    />
+{/if}
+
+{#if 1==2}
 <Modal
-    title="{$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}"
     bind:open={$idaa_sess.archives.show__modal_view__archive_content_id}
-    autoclose={false}
+    title="{$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}"
+    autoclose={true}
+    onclose={() => {
+        // We want to cancel the inline edit if the modal is closed
+        // $idaa_sess.archives.show__inline_edit__archive_content_id = false;
+    }}
     outsideclose={true}
     placement="top-center"
     size="xl"
@@ -349,7 +373,7 @@ if (browser) {
                 <span class="text-sm text-gray-500">
                     Viewing:
                 </span>
-                {$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}</h3>
+                {$idaa_slct.archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}</h3>
             </div>
 
 
@@ -359,4 +383,7 @@ if (browser) {
         lq__archive_content_obj={lq__archive_content_obj}
         />
 
+    {$lq__archive_content_obj?.archive_content_id}
+
 </Modal>
+{/if}

src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte

@@ -328,6 +328,7 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
             class="input w-full"
             placeholder="Content name"
             >
+            {$lq__archive_content_obj?.name}
         </label>
 
         <label for="description">

src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_li.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 // *** Import Svelte specific
+import { goto, invalidate, pushState, replaceState } from '$app/navigation';
 
 // *** Import Aether specific variables and functions
 import type { key_val } from '$lib/ae_stores';
@@ -34,7 +35,7 @@ let ae_promises: key_val = $state({});
     <div class="ae_row archive_content__group flex flex-row items-center justify-center">
         <button
             type="button"
-            class="btn btn-md btn-info variant-glass-secondary hover:variant-filled-secondary transition w-96"
+            class="novi_btn novi_margin_sm btn btn-md btn-info variant-glass-secondary hover:variant-filled-secondary transition w-96"
             onclick={() => {
                 if ($idaa_sess.archives.show_list__archive_content_li_group == idaa_archive_content_obj.group) {
                     $idaa_sess.archives.show_list__archive_content_li_group = null;
@@ -91,6 +92,11 @@ let ae_promises: key_val = $state({});
                     $idaa_slct.archive_content_id = idaa_archive_content_obj?.archive_content_id;
                     $idaa_slct.archive_content_obj = idaa_archive_content_obj;
 
+                    const url = new URL(location);
+                    url.searchParams.set('archive_content_id', idaa_archive_content_obj?.archive_content_id);
+                    pushState(url, {});
+                    // replaceState(url, {});
+
                     let message = {'archive_content_id': $idaa_slct?.archive_content_id};
                     window.parent.postMessage(message, "*");
 
@@ -106,7 +112,7 @@ let ae_promises: key_val = $state({});
                     $idaa_sess.archives.show__modal_view__archive_content_id = $idaa_slct.archive_content_id;
                     $idaa_sess.archives.show__modal_edit__archive_content_id = false;
                 }}
-                class="btn btn-md btn-primary variant-ghost-primary hover:variant-filled-primary transition"
+                class="novi_btn btn btn-md btn-primary variant-ghost-primary hover:variant-filled-primary transition"
                 title={`View: ${idaa_archive_content_obj?.name}`}
                 >
                 <span class="fas fa-play m-1"></span> Play/View

src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__modal_media_player.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+/** @type {import('./$types').PageData} */
+
+// *** Import Svelte specific
+// import { onDestroy, onMount } from 'svelte';
+// import { browser } from '$app/environment';
+
+// *** Import other supporting libraries
+import { Modal } from 'flowbite-svelte';
+
+// *** Import Aether specific variables and functions
+// import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
+
+import Media_player from './../ae_idaa_comp__media_player.svelte';
+
+interface Props {
+    log_lvl?: number;
+    lq__archive_content_obj: any;
+}
+
+let { log_lvl, lq__archive_content_obj }: Props = $props();
+
+if (log_lvl) {
+    console.log(`lq__archive_content_obj:`, lq__archive_content_obj);
+}
+
+</script>
+
+
+<Modal
+    bind:open={$idaa_sess.archives.show__modal_view__archive_content_id}
+    title="{$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}"
+    autoclose={true}
+    onclose={() => {
+        // We want to cancel the inline edit if the modal is closed
+        // $idaa_sess.archives.show__inline_edit__archive_content_id = false;
+    }}
+    outsideclose={true}
+    placement="top-center"
+    size="xl"
+    class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
+    >
+
+    {#snippet header()}
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-lg font-semibold">
+                <span class="text-sm text-gray-500">
+                    Viewing:
+                </span>
+                {$idaa_slct.archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}</h3>
+            </div>
+
+
+    {/snippet}
+
+    <Media_player
+        lq__archive_content_obj={lq__archive_content_obj}
+        />
+
+    {$lq__archive_content_obj?.archive_content_id}
+
+</Modal>

src/routes/idaa/(idaa)/archives/ae_idaa_comp__archive_obj_li.svelte

@@ -50,7 +50,7 @@ let { lq__archive_obj_li }: Props = $props();
 
         <div class="ae_options flex flex-row gap-2 items-center justify-center">
 
-            <a href="/idaa/archives/{idaa_archive_obj?.archive_id}" class="btn btn-md variant-ghost-primary hover:variant-filled-primary transition" title={`View: ${idaa_archive_obj?.name}`}>
+            <a href="/idaa/archives/{idaa_archive_obj?.archive_id}" class="btn btn-secondary btn-md variant-ghost-primary hover:variant-filled-primary transition" title={`View: ${idaa_archive_obj?.name}`}>
                 <span class="fas fa-envelope-open m-1"></span> Open
 
                 {#if idaa_archive_obj?.archive_content_count}

src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte

@@ -96,7 +96,7 @@ onMount(() => {
                     $idaa_sess.recovery_meetings.show__modal_view = true;
                     $idaa_sess.recovery_meetings.show__modal_edit = false;
                 }}
-                class="btn btn-md variant-ghost-primary hover:variant-filled-primary transition"
+                class="novi_btn btn btn-primary btn-md variant-ghost-primary hover:variant-filled-primary transition"
                 title={`Open to see details: ${idaa_event_obj?.name}`}
                 >
                 <span class="fas fa-envelope-open m-1"></span>
@@ -121,7 +121,7 @@ onMount(() => {
                         $idaa_sess.recovery_meetings.show__modal_view = false;
                         $idaa_sess.recovery_meetings.show__modal_edit = true;
                     }}
-                    class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
+                    class="novi_btn btn btn-warning btn-sm variant-ghost-warning hover:variant-filled-warning transition"
                     title={`Edit meeting: ${idaa_event_obj?.name}`}
                     >
                     <span class="fas fa-edit m-1"></span>

src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte

@@ -214,7 +214,7 @@ if ($idaa_loc.recovery_meetings.qry__fulltext_str && $idaa_loc.recovery_meetings
         <div class="ae_group flex flex-row gap-2 w-full items-center justify-center">
             <button
                 type="button"
-                class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition-all"
+                class="novi_btn btn btn-sm variant-ghost-warning hover:variant-filled-warning transition-all"
                 on:click={() => {
                     $idaa_loc.recovery_meetings.qry__fulltext_str = '';
                     // $idaa_trig.event_li_qry = true;
@@ -239,11 +239,11 @@ if ($idaa_loc.recovery_meetings.qry__fulltext_str && $idaa_loc.recovery_meetings
                     }
                 }
                 style="width: 50%;"
-                class="bs-input input text-sm hover:text-2xl font-bold font-mono w-80 transition-all"
+                class="input text-sm hover:text-2xl font-bold font-mono w-80 transition-all"
                 >
             <button
                 type="submit"
-                class="btn btn-lg variant-ghost-success hover:variant-filled-success text-2xl font-bold w-48 transition-all"
+                class="novi_btn btn btn-lg variant-ghost-success hover:variant-filled-success text-2xl font-bold w-48 transition-all"
                 title="Search for meetings by day of week, location, contacts, etc."
                 >
                 <!-- <span class="fas fa-search m-1"></span> -->
@@ -518,7 +518,7 @@ if ($idaa_loc.recovery_meetings.qry__fulltext_str && $idaa_loc.recovery_meetings
                 $idaa_sess.recovery_meetings.show__modal_view = false;
                 $idaa_sess.recovery_meetings.show__modal_edit = true;
             }}
-            class="btn_new_recovery_meeting btn btn-sm variant-ghost-warning hover:variant-filled-warning transition text-xs"
+            class="novi_btn btn btn-warning btn-sm variant-ghost-warning hover:variant-filled-warning transition text-xs"
             disabled={!$ae_loc.authenticated_access}
             >
             <span class="fas fa-plus m-1"></span> Create New Meeting