From b3dfb5deecfb4a31a90719446b67cd416cda809e Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 3 Dec 2024 15:27:28 -0500
Subject: [PATCH] Starting to switch pages to Runes mode....

---
 .../idaa/(idaa)/archives/+layout.svelte       |  17 +-
 src/routes/idaa/(idaa)/archives/+page.svelte  |  62 ++---
 .../(idaa)/archives/[archive_id]/+page.svelte | 226 ++++++++++--------
 .../ae_idaa_comp__archive_obj_li.svelte       |  55 +----
 4 files changed, 167 insertions(+), 193 deletions(-)

diff --git a/src/routes/idaa/(idaa)/archives/+layout.svelte b/src/routes/idaa/(idaa)/archives/+layout.svelte
index 23cc12d2..b2bd6b1f 100644
--- a/src/routes/idaa/(idaa)/archives/+layout.svelte
+++ b/src/routes/idaa/(idaa)/archives/+layout.svelte
@@ -1,15 +1,22 @@
 <script lang="ts">
 /** @type {import('./$types').LayoutData} */
-export let data: any;
-// import { browser } from '$app/environment';
-let log_lvl = 1;
-if (log_lvl > 1) {
+let log_lvl = 0;
+if (log_lvl) {
     console.log(`ae_idaa_archives +layout.svelte data:`, data);
 }
 
+// *** 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';
 
+interface Props {
+    /** @type {import('./$types').LayoutData} */
+    data: any;
+    children?: import('svelte').Snippet;
+}
+
+let { data, children }: Props = $props();
+
 // Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
 $slct.account_id = data.account_id;
 // console.log(`$slct.account_id = `, $slct.account_id);
@@ -31,4 +38,4 @@ $idaa_slct.archive_obj_li = ae_acct.slct.archive_obj_li;
 </script>
 
 
-<slot />
+{@render children?.()}
diff --git a/src/routes/idaa/(idaa)/archives/+page.svelte b/src/routes/idaa/(idaa)/archives/+page.svelte
index d534c2b7..1c72d5ed 100644
--- a/src/routes/idaa/(idaa)/archives/+page.svelte
+++ b/src/routes/idaa/(idaa)/archives/+page.svelte
@@ -1,27 +1,36 @@
 <script lang="ts">
 /** @type {import('./$types').PageData} */
-export let data: any;
-let log_lvl = 1;
-// console.log(`ae_idaa_bb +page.svelte data:`, data);
+let log_lvl: number = 0;
 
+// *** Import Svelte specific
 import { browser } from '$app/environment';
+// import { Modal } from 'flowbite-svelte';
 
-import { Modal } from 'flowbite-svelte';
-
-import type { key_val } from '$lib/ae_stores';
-import { ae_util } from '$lib/ae_utils/ae_utils';
-
+// *** Import other supporting libraries
 import { liveQuery } from "dexie";
-import { core_func } from '$lib/ae_core/ae_core_functions';
+
+// *** Import Aether specific variables and functions
+// import type { key_val } from '$lib/ae_stores';
+// import { ae_util } from '$lib/ae_utils/ae_utils';
+// import { core_func } from '$lib/ae_core/ae_core_functions';
 import { db_archives } from "$lib/ae_archives/db_archives";
 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, idaa_trig } from '$lib/ae_idaa_stores';
-import { archives_func } from '$lib/ae_archives/ae_archives_functions';
+// import { archives_func } from '$lib/ae_archives/ae_archives_functions';
 
 import Comp__archive_obj_li from './ae_idaa_comp__archive_obj_li.svelte';
 
+interface Props {
+    /** @type {import('./$types').PageData} */
+    data: any;
+}
+let { data }: Props = $props();
 
-$: lq__archive_obj_li = liveQuery(async () => {
+if (log_lvl) {
+    console.log(`ae_idaa_bb +page.svelte data:`, data);
+}
+
+let lq__archive_obj_li = $derived(liveQuery(async () => {
     let results = await db_archives.archive
         .where('account_id')
         .equals($slct.account_id)
@@ -35,33 +44,7 @@ $: lq__archive_obj_li = liveQuery(async () => {
         // .sortBy('[created_on+updated_on]');
 
     return results;
-});
-
-// $: lq__archive_obj = liveQuery(async () => {
-//     let results = await db_archives.archive
-//         .get($idaa_slct.archive_id);
-
-//     return results;
-// });
-
-// $: lq__archive_content_obj_li = liveQuery(async () => {
-//     let results = await db_archives.content
-//         .where('archive_id')
-//         .equals($idaa_slct.archive_id)
-//         .reverse()
-//         .sortBy('updated_on');
-//         // .sortBy('title');
-
-//     return results;
-// });
-
-// $: lq__archive_content_obj = liveQuery(async () => {
-//     let results = await db_archives.content
-//         .get($idaa_slct.archive_content_id);
-
-//     return results;
-// });
-
+}));
 
 if (browser) {
     console.log('Browser environment detected.');
@@ -72,7 +55,6 @@ if (browser) {
     let message = {'archive_id': $idaa_slct.archive_id};
     window.parent.postMessage(message, "*");
 }
-
 </script>
 
 
@@ -98,7 +80,7 @@ if (browser) {
 
 <!-- <h1>Archives {$lq__archive_obj_li?.length}</h1> -->
 
-{#if $lq__archive_obj_li && $lq__archive_obj_li?.length }
+{#if $lq__archive_obj_li && $lq__archive_obj_li?.length}
     <Comp__archive_obj_li
         lq__archive_obj_li={lq__archive_obj_li}
         />
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
index fe399ea8..ecd4dc05 100644
--- a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
@@ -1,22 +1,18 @@
 <script lang="ts">
 /** @type {import('./$types').PageData} */
-export let data: any;
 let log_lvl = 0;
 
-// Imports
+// *** Import Svelte specific
+import { browser } from '$app/environment';
+
+// *** Import other supporting libraries
 import { Modal } from 'flowbite-svelte';
-import { onMount } from 'svelte';
-
-import type { key_val } from '$lib/ae_stores';
-import { ae_util } from '$lib/ae_utils/ae_utils';
-// import Element_data_store from '$lib/element_data_store_v2.svelte';
-
-let ae_promises: key_val = {};
-let ae_tmp: key_val = {};
-let ae_triggers: key_val = {};
-
 import { liveQuery } from "dexie";
-import { core_func } from '$lib/ae_core/ae_core_functions';
+
+// *** Import Aether specific variables and functions
+// import type { key_val } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils/ae_utils';
+// import { core_func } from '$lib/ae_core/ae_core_functions';
 import { db_archives } from "$lib/ae_archives/db_archives";
 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, idaa_trig, idaa_prom } from '$lib/ae_idaa_stores';
@@ -25,12 +21,22 @@ import { archives_func } from '$lib/ae_archives/ae_archives_functions';
 import Archive_obj_id_edit from './ae_idaa_comp__archive_obj_id_edit.svelte';
 import Archive_view from './ae_idaa_comp__archive_obj_id_view.svelte';
 // import Archive_page_menu from './session_page_menu.svelte';
+// import Element_data_store from '$lib/element_data_store_v2.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 { browser } from '$app/environment';
+interface Props {
+    data: any;
+}
+
+let { data }: Props = $props();
+
+// let ae_promises: key_val = {};
+// let ae_tmp: key_val = {};
+// let ae_triggers: key_val = {};
+
 
 // Variables
 
@@ -46,15 +52,15 @@ $idaa_slct.archive_id = ae_acct.slct.archive_id;
 // $idaa_slct.archive_obj = ae_acct.slct.archive_obj;
 
 
-$: lq__archive_obj = liveQuery(async () => {
+let lq__archive_obj = $derived(liveQuery(async () => {
     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
 
     return results;
-});
+}));
 
-$: lq__archive_content_obj_li = liveQuery(async () => {
+let lq__archive_content_obj_li = $derived(liveQuery(async () => {
     if (log_lvl) {
         console.log(`$lq__archive_obj.cfg_json = `, $lq__archive_obj?.cfg_json);
     }
@@ -79,59 +85,61 @@ $: lq__archive_content_obj_li = liveQuery(async () => {
         return results;
     }
 
-});
+}));
 
-$: lq__archive_content_obj = liveQuery(async () => {
+let lq__archive_content_obj = $derived(liveQuery(async () => {
     let results = await db_archives.content
         .get($idaa_slct.archive_content_id ?? ''); // null or undefined does not reset things like '' does
 
     return results;
-});
+}));
 
 
-$: if ($idaa_trig.archive_content_li) {
-    $idaa_trig.archive_content_li = false;
+$effect(() => {
+        if ($idaa_trig.archive_content_li) {
+        $idaa_trig.archive_content_li = false;
 
-    if (log_lvl) {
-        console.log(`Triggered: $idaa_trig.archive_content_li`);
-    }
+        if (log_lvl) {
+            console.log(`Triggered: $idaa_trig.archive_content_li`);
+        }
 
-    if ($idaa_loc.archives.qry__enabled !== 'all' || $idaa_loc.archives.qry__hidden !== 'all') {
-        console.log(`Deleting disabled or hidden archive content.`);
+        if ($idaa_loc.archives.qry__enabled !== 'all' || $idaa_loc.archives.qry__hidden !== 'all') {
+            console.log(`Deleting disabled or hidden archive content.`);
+            // let results = db_archives.content
+            //     .where('enable')
+            //     .notEqual(true)
+            //     .delete();
+            let results = db_archives.content
+                .clear();
+            console.log(`Deleted ${results} disabled archive content.`);
+
+        }
+        // if ($idaa_loc.archives.qry__hidden !== 'all') {
+        //     console.log(`Deleting hidden archive content.`);
+        //     let results = db_archives.content
+        //         .clear();
+        //     console.log(`Deleted ${results} hidden archive content.`);
+
+        // }
         // let results = db_archives.content
         //     .where('enable')
-        //     .notEqual(true)
+        //     .equals('false')
         //     .delete();
-        let results = db_archives.content
-            .clear();
-        console.log(`Deleted ${results} disabled archive content.`);
+        // console.log(`Deleted ${results} disabled archive content.`);
 
+        $idaa_prom.load__archive_content_obj_li = archives_func.load_ae_obj_li__archive_content({
+            api_cfg: $ae_api,
+            for_obj_type: 'archive',
+            for_obj_id: $idaa_slct.archive_id,
+            enabled: $idaa_loc.archives.qry__enabled,
+            hidden: $idaa_loc.archives.qry__hidden,
+            limit: $idaa_loc.archives.qry__limit,
+            order_by_li: $idaa_loc.archives.qry__order_by_li,
+            try_cache: true,
+            log_lvl: log_lvl,
+        });
     }
-    // if ($idaa_loc.archives.qry__hidden !== 'all') {
-    //     console.log(`Deleting hidden archive content.`);
-    //     let results = db_archives.content
-    //         .clear();
-    //     console.log(`Deleted ${results} hidden archive content.`);
-
-    // }
-    // let results = db_archives.content
-    //     .where('enable')
-    //     .equals('false')
-    //     .delete();
-    // console.log(`Deleted ${results} disabled archive content.`);
-
-    $idaa_prom.load__archive_content_obj_li = archives_func.load_ae_obj_li__archive_content({
-        api_cfg: $ae_api,
-        for_obj_type: 'archive',
-        for_obj_id: $idaa_slct.archive_id,
-        enabled: $idaa_loc.archives.qry__enabled,
-        hidden: $idaa_loc.archives.qry__hidden,
-        limit: $idaa_loc.archives.qry__limit,
-        order_by_li: $idaa_loc.archives.qry__order_by_li,
-        try_cache: true,
-        log_lvl: log_lvl,
     });
-}
 
 if (browser) {
     console.log('Browser environment detected.');
@@ -202,13 +210,14 @@ if (browser) {
     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"
     >
 
-    <svelte:fragment slot="header">
-        <div class="flex flex-row items-center justify-between w-full">
-            <h3 class="text-lg font-semibold">
-            {#if $ae_loc.trusted_access}
-            <!-- <div class="ae_options"> -->
-                <button
-                    on:click={() => {
+    {#snippet header()}
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-lg font-semibold">
+                {#if $ae_loc.trusted_access}
+                <!-- <div class="ae_options"> -->
+                    <button
+                        onclick={() => {
                         // const url = new URL(location);
                         // url.searchParams.set('event_id', $lq__archive_obj?.event_id_random);
                         // history.pushState({}, '', url);
@@ -216,22 +225,23 @@ if (browser) {
                         $idaa_sess.archives.show__modal_view__archive_id = $idaa_slct.archive_id;
                         $idaa_sess.archives.show__modal_edit__archive_id = false;
                     }}
-                    class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
-                    title={`View meeting: ${$lq__archive_obj?.name}`}
-                    >
-                    <span class="fas fa-eye m-1"></span> View
-                </button>
-            <!-- </div> -->
-            {/if}
+                        class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
+                        title={`View meeting: ${$lq__archive_obj?.name}`}
+                        >
+                        <span class="fas fa-eye m-1"></span> View
+                    </button>
+                <!-- </div> -->
+                {/if}
 
-            <span class="text-sm text-gray-500">
-                Edit Archive:
-            </span>
-            {$lq__archive_obj?.name}
-        </h3>
-        </div>
+                <span class="text-sm text-gray-500">
+                    Edit Archive:
+                </span>
+                {$lq__archive_obj?.name}
+            </h3>
+            </div>
 
-    </svelte:fragment>
+
+    {/snippet}
 
     <Archive_obj_id_edit
         lq__archive_obj={lq__archive_obj}
@@ -267,13 +277,14 @@ if (browser) {
     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"
     >
 
-    <svelte:fragment slot="header">
-        <div class="flex flex-row items-center justify-between w-full">
-            <h3 class="text-lg font-semibold">
-                {#if $ae_loc.trusted_access}
-                <!-- <div class="ae_options"> -->
-                    <button
-                        on:click={() => {
+    {#snippet header()}
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-lg font-semibold">
+                    {#if $ae_loc.trusted_access}
+                    <!-- <div class="ae_options"> -->
+                        <button
+                            onclick={() => {
                             // const url = new URL(location);
                             // url.searchParams.set('event_id', $lq__archive_content_obj?.event_id_random);
                             // history.pushState({}, '', url);
@@ -281,22 +292,23 @@ if (browser) {
                             $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-sm variant-ghost-warning hover:variant-filled-warning transition"
-                        title={`View meeting: ${$lq__archive_content_obj?.name}`}
-                        >
-                        <span class="fas fa-eye m-1"></span> View
-                    </button>
-                <!-- </div> -->
-                {/if}
+                            class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
+                            title={`View meeting: ${$lq__archive_content_obj?.name}`}
+                            >
+                            <span class="fas fa-eye m-1"></span> View
+                        </button>
+                    <!-- </div> -->
+                    {/if}
 
-                <span class="text-sm text-gray-500">
-                    Edit Archive Content:
-                </span>
-                {$lq__archive_content_obj?.name ?? 'New Archive Content'}
-            </h3>
-        </div>
+                    <span class="text-sm text-gray-500">
+                        Edit Archive Content:
+                    </span>
+                    {$lq__archive_content_obj?.name ?? 'New Archive Content'}
+                </h3>
+            </div>
 
-    </svelte:fragment>
+
+    {/snippet}
 
     <Archive_content_obj_id_edit
         lq__archive_content_obj={lq__archive_content_obj}
@@ -333,16 +345,18 @@ if (browser) {
     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"
     >
 
-    <svelte:fragment slot="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>
-            {$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}</h3>
-        </div>
+    {#snippet header()}
 
-    </svelte:fragment>
+            <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>
+                {$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}</h3>
+            </div>
+
+
+    {/snippet}
 
     <Media_player
         lq__archive_content_obj={lq__archive_content_obj}
diff --git a/src/routes/idaa/(idaa)/archives/ae_idaa_comp__archive_obj_li.svelte b/src/routes/idaa/(idaa)/archives/ae_idaa_comp__archive_obj_li.svelte
index dfb45486..1316957f 100644
--- a/src/routes/idaa/(idaa)/archives/ae_idaa_comp__archive_obj_li.svelte
+++ b/src/routes/idaa/(idaa)/archives/ae_idaa_comp__archive_obj_li.svelte
@@ -1,19 +1,22 @@
 <script lang="ts">
-// *** Import Svelte core
-import { onMount } from 'svelte';
-import { Spinner } from 'flowbite-svelte';
+let log_lvl = 0;
+
+// *** Import Svelte specific
 import { goto } from '$app/navigation';
 
-// *** Import Aether core variables and functions
+// *** Import other supporting libraries
+// import { Spinner } from 'flowbite-svelte';
+
+// *** Import Aether specific variables and functions
 import { ae_util } from '$lib/ae_utils/ae_utils';
 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';
 
-export let lq__archive_obj_li: any;
+interface Props {
+    lq__archive_obj_li: any;
+}
 
-onMount(() => {
-    console.log('** Component Mounted: ** List - Archive Obj');
-});
+let { lq__archive_obj_li }: Props = $props();
 </script>
 
 
@@ -57,42 +60,10 @@ onMount(() => {
                 {/if}
             </a>
 
-            <!-- <button
-                on:click={() => {
-                    $idaa_slct.archive_id = idaa_archive_obj?.archive_id;
-                    $idaa_slct.archive_obj = idaa_archive_obj;
-
-                    // handle_load_post_comment_obj_li({archive_id: $idaa_slct.archive_id, try_cache: false});
-
-                    const url = new URL(location);
-                    url.searchParams.set('archive_id', idaa_archive_obj?.archive_id);
-                    history.pushState({}, '', url);
-
-                    let message = {'archive_id': idaa_archive_obj?.archive_id};
-                    window.parent.postMessage(message, "*");
-
-                    // $idaa_sess.archives.show_main__options = true;
-                    // $idaa_sess.archives.show_list__archive_obj_li = true;
-                    // $idaa_sess.archives.show_edit__archive_id = false;
-                    $idaa_sess.archives.show__modal_view = true;
-                    $idaa_sess.archives.show__modal_edit = false;
-                }}
-                class="btn btn-md variant-ghost-primary hover:variant-filled-primary transition"
-                title={`View: ${idaa_archive_obj?.title}`}
-                >
-                <span class="fas fa-envelope-open m-1"></span> Open
-
-                {#if idaa_archive_obj?.archive_content_count}
-                    <span class="ae_badge ae_info archive__archive_content_count">
-                        <span class="fas fa-content"></span> {(idaa_archive_obj?.archive_content_count == 1 ? `${idaa_archive_obj?.archive_content_count} content` : `${idaa_archive_obj?.archive_content_count} contents` )}
-                    </span>
-                {/if}
-            </button> -->
-
             {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
                 <button
                     disabled={!$ae_loc.administrator_access}
-                    on:click={() => {
+                    onclick={() => {
                         $idaa_slct.archive_id = idaa_archive_obj.archive_id;
                         $idaa_slct.archive_obj = idaa_archive_obj;
 
@@ -110,7 +81,7 @@ onMount(() => {
         </div>
 
         <section
-            class="ae_section ae_footer ae_meta archive__meta mt-2 flex flex-col sm:flex-row gap-1 items-center justify-center flex flex-col text-sm text-gray-500"
+            class="ae_section ae_footer ae_meta archive__meta mt-2 flex flex-col sm:flex-row gap-1 items-center justify-center text-sm text-gray-500"
             class:hidden={!$ae_loc.administrator_access && !$ae_loc.edit_mode}
             >
             <div class="ae_group">