The archives are looking better now. Mostly style and sorting improvements.

src/routes/idaa/(idaa)/archives/+layout.ts

@@ -31,7 +31,7 @@ export async function load({ params, parent }) { // route
             for_obj_id: account_id,
             inc_content_li: true,
             order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC', 'name': 'ASC'},
-            params: {qry__enabled: 'enabled', qry__hidden: 'all', qry__limit: 200},
+            params: {qry__enabled: 'enabled', qry__hidden: 'not_hidden', qry__limit: 20},
             try_cache: true,
             log_lvl: log_lvl
         });

src/routes/idaa/(idaa)/archives/+page.svelte

@@ -28,7 +28,8 @@ $: lq__archive_obj_li = liveQuery(async () => {
         // .orderBy('updated_on')
         // .toArray()
         .reverse()
-        .sortBy('updated_on');
+        .sortBy('sort');
+        // .sortBy('updated_on');
         // .sortBy('updated_on, created_on');
         // .sortBy('[updated_on+created_on]');
         // .sortBy('[created_on+updated_on]');

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 /** @type {import('./$types').PageData} */
 export let data: any;
-let log_lvl = 0;
+let log_lvl = 1;
 
 // Imports
 import { Modal } from 'flowbite-svelte';
@@ -55,14 +55,30 @@ $: lq__archive_obj = liveQuery(async () => {
 });
 
 $: lq__archive_content_obj_li = liveQuery(async () => {
-    let results = await db_archives.content
-        .where('archive_id')
-        .equals($idaa_slct?.archive_id ?? '') // null or undefined does not reset things like '' does
-        .reverse()
-        .sortBy('updated_on');
-        // .sortBy('title');
+    if (log_lvl) {
+        console.log(`$lq__archive_obj.cfg_json = `, $lq__archive_obj?.cfg_json);
+    }
+    if ($lq__archive_obj?.cfg_json?.content_group_sort === 'DESC') {
+        let results = await db_archives.content
+            // .orderBy('updated_on')
+            .where('archive_id')
+            .equals($idaa_slct?.archive_id ?? '') // null or undefined does not reset things like '' does
+            .reverse()
+            .sortBy('tmp_sort_2');
+            // .sortBy('updated_on');
+            // .sortBy('title');
+
+        return results;
+    } else {
+        let results = await db_archives.content
+            .where('archive_id')
+            .equals($idaa_slct?.archive_id ?? '') // null or undefined does not reset things like '' does
+            // .reverse()
+            .sortBy('tmp_sort_2');
+
+        return results;
+    }
 
-    return results;
 });
 
 $: lq__archive_content_obj = liveQuery(async () => {

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

@@ -13,21 +13,53 @@ import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
 export let lq__archive_content_obj_li: any;
 
 let ae_promises: key_val = {};
-let ae_tmp: key_val = {};
-let ae_triggers: key_val = {};
+// let ae_tmp: key_val = {};
+// let ae_triggers: key_val = {};
 
-onMount(() => {
-    console.log('** Component Mounted: ** List - Archive Obj');
-});
 </script>
 
 
-<section class="archive_list">
+<section class="archive_list flex flex-col gap-2 items-center justify-center w-full">
 {#if $lq__archive_content_obj_li && $lq__archive_content_obj_li.length}
 
+<!-- <div class="ae_group">
+    <span class="ae_label">Group:</span>
+    <span class="ae_value">{current_group}</span> -->
+
 {#each $lq__archive_content_obj_li as idaa_archive_content_obj, index}
+
+{#if idaa_archive_content_obj.group && idaa_archive_content_obj.group != $lq__archive_content_obj_li[index - 1]?.group}
+    <div class="ae_row archive_content__group flex flex-row items-center justify-center">
+        <button
+            class="btn btn-md variant-glass-secondary hover:variant-filled-secondary transition w-96"
+            on:click={() => {
+                if ($idaa_loc.archives.show_list__archive_content_li_group == idaa_archive_content_obj.group) {
+                    $idaa_loc.archives.show_list__archive_content_li_group = null;
+                } else {
+                    $idaa_loc.archives.show_list__archive_content_li_group = idaa_archive_content_obj.group;
+                }
+            }}
+            >
+            {#if $idaa_loc.archives.show_list__archive_content_li_group == idaa_archive_content_obj.group}
+                <span class="fas fa-caret-down"></span>
+                <!-- <span class="fas fa-minus"></span> -->
+                <span class="ae_label text-xs">Hide:</span>
+            {:else}
+                <span class="fas fa-caret-right"></span>
+                <!-- <span class="fas fa-plus"></span> -->
+                <span class="ae_label text-xs">Show:</span>
+            {/if}
+            <!-- <span class="fas fa-caret-down"></span> -->
+            <!-- <span class="ae_label">Show:</span> -->
+            <span class="ae_value text-lg font-bold">{idaa_archive_content_obj.group}</span>
+        </button>
+    </div>
+{/if}
+
+{#if $idaa_loc.archives.show_list__archive_content_li_group == idaa_archive_content_obj.group}
+
     <div
-        class="container archive archive_content_obj border border-1 rounded p-2 mb-2 space-y-2"
+        class="container archive archive_content_obj border border-1 rounded p-2 mb-2 space-y-2 w-full max-w-screen-lg flex flex-col items-center justify-center"
         class:dim={idaa_archive_content_obj.hide}
         class:bg-warning-100={!idaa_archive_content_obj?.enable}
         >
@@ -44,6 +76,7 @@ onMount(() => {
                     <span class="ae_value">{idaa_archive_content_obj.original_location}</span>
                 </h4>
             {/if}
+            <!-- <span>group: {idaa_archive_content_obj.group}</span> -->
         </header>
 
         {#if idaa_archive_content_obj.description}<pre class="archive__description p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-normal whitespace-pre-wrap">{@html idaa_archive_content_obj.description}</pre>{/if}
@@ -206,9 +239,14 @@ onMount(() => {
             </span>
         </section>
 
-</div>
+    </div>
+
+{/if}
+
 {/each}
 
+<!-- </div> -->
+
 {:else}
     <p>No archive content available to show.</p>
 {/if}

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

@@ -2,6 +2,7 @@
 // *** Import Svelte core
 import { onMount } from 'svelte';
 import { Spinner } from 'flowbite-svelte';
+import { goto } from '$app/navigation';
 
 // *** Import Aether core variables and functions
 import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -95,6 +96,8 @@ onMount(() => {
 
                         $idaa_sess.archives.show__modal_view__archive_id = false;
                         $idaa_sess.archives.show__modal_edit__archive_id = $idaa_slct.archive_id;
+
+                        goto(`/idaa/archives/${idaa_archive_obj?.archive_id}`);
                     }}
                     class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
                     title={`Edit archive: ${idaa_archive_obj.title}`}