From 80965167a5129c5390c8cff2cff554f97c8de801 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 6 Nov 2024 13:15:16 -0500
Subject: [PATCH] We can now see a list of archive content and it doesn't look
 terrible.

---
 src/lib/ae_archives/ae_archives__archive.ts   |   2 +-
 .../ae_archives__archive_content.ts           |   6 +-
 src/lib/db_archives.ts                        |  11 +-
 .../idaa/(idaa)/archives/+layout.svelte       |   4 +-
 src/routes/idaa/(idaa)/archives/+page.svelte  |   8 +-
 .../(idaa)/archives/[archive_id]/+layout.ts   |  48 ++++
 .../(idaa)/archives/[archive_id]/+page.svelte | 110 +++++++++
 .../(idaa)/archives/[archive_id]/+page.ts     |  82 +++++++
 ...e_idaa_comp__archive_content_obj_li.svelte | 223 ++++++++++++++++++
 .../ae_idaa_comp__archive_obj_id_edit.svelte  |   1 +
 .../ae_idaa_comp__archive_obj_id_view.svelte  | 107 +++++++++
 .../archives/[archive_id]/del +layout.svelte  |   0
 .../ae_idaa_comp__archive_obj_li.svelte       |  16 +-
 13 files changed, 603 insertions(+), 15 deletions(-)
 create mode 100644 src/routes/idaa/(idaa)/archives/[archive_id]/+layout.ts
 create mode 100644 src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
 create mode 100644 src/routes/idaa/(idaa)/archives/[archive_id]/+page.ts
 create mode 100644 src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_li.svelte
 create mode 100644 src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_edit.svelte
 create mode 100644 src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_view.svelte
 create mode 100644 src/routes/idaa/(idaa)/archives/[archive_id]/del +layout.svelte

diff --git a/src/lib/ae_archives/ae_archives__archive.ts b/src/lib/ae_archives/ae_archives__archive.ts
index 11e80697..7d1fb6f7 100644
--- a/src/lib/ae_archives/ae_archives__archive.ts
+++ b/src/lib/ae_archives/ae_archives__archive.ts
@@ -69,7 +69,7 @@ export async function load_ae_obj_id__archive(
             api_cfg: api_cfg,
             for_obj_type: 'archive',
             for_obj_id: archive_id,
-            params: {qry__enabled: 'all', qry__limit: 25},
+            params: {qry__enabled: 'all', qry__limit: 99},
             try_cache: try_cache,
             log_lvl: log_lvl
         })
diff --git a/src/lib/ae_archives/ae_archives__archive_content.ts b/src/lib/ae_archives/ae_archives__archive_content.ts
index c9ea7128..ccb6ef3d 100644
--- a/src/lib/ae_archives/ae_archives__archive_content.ts
+++ b/src/lib/ae_archives/ae_archives__archive_content.ts
@@ -63,7 +63,7 @@ export async function load_ae_obj_li__archive_content(
             api_cfg,
             for_obj_type = 'archive',
             for_obj_id,
-            order_by_li = {'priority': 'DESC', 'sort': 'DESC', 'start_datetime': 'ASC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
+            order_by_li = {'priority': 'DESC', 'sort': 'DESC', 'original_datetime': 'ASC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
             params = {},
             try_cache = true,
             log_lvl = 0
@@ -280,7 +280,7 @@ export function db_save_ae_obj_li__archive_content(
                     url: obj.url,
                     url_text: obj.url_text,
 
-                    hosted_file_id: obj.hosted_file_id,
+                    hosted_file_id: obj.hosted_file_id_random,
 
                     file_path: obj.file_path,
 
@@ -309,6 +309,8 @@ export function db_save_ae_obj_li__archive_content(
                     // From SQL view
                     archive_code: obj.archive_code,
                     archive_name: obj.archive_name,
+
+                    hash_sha256: obj.hosted_file_hash_sha256
                 });
                 // console.log(`Put obj with ID: ${obj.archive_content_id_random} or ${id_random}`);
             } catch (error) {
diff --git a/src/lib/db_archives.ts b/src/lib/db_archives.ts
index ebd24cca..73974232 100644
--- a/src/lib/db_archives.ts
+++ b/src/lib/db_archives.ts
@@ -112,6 +112,8 @@ export interface Archive_Content {
     // Additional fields for convenience (database views)
     archive_code?: null|string;
     archive_name?: null|string;
+
+    hash_sha256?: null|string;
 }
 
 
@@ -137,12 +139,13 @@ export class MySubClassedDexie extends Dexie {
                 archive_content_type,
                 name,
                 hosted_file_id,
-                file_path,
-                filename, file_extension,
-                original_datetime, original_timezone, original_location, original_url, original_url_text,
-                enable_for_public,
                 enable, hide, priority, sort, group, notes, created_on, updated_on`,
             });
+
+            // file_path,
+            // filename, file_extension,
+            // original_datetime, original_timezone, original_location, original_url, original_url_text,
+            // enable_for_public,
     }
 }
 
diff --git a/src/routes/idaa/(idaa)/archives/+layout.svelte b/src/routes/idaa/(idaa)/archives/+layout.svelte
index bb46e5a7..c627d36d 100644
--- a/src/routes/idaa/(idaa)/archives/+layout.svelte
+++ b/src/routes/idaa/(idaa)/archives/+layout.svelte
@@ -2,7 +2,7 @@
 /** @type {import('./$types').LayoutData} */
 export let data: any;
 let log_lvl = 2;
-console.log(`ae_idaa_archives  +layout.svelte data:`, data);
+console.log(`ae_idaa_archives +layout.svelte data:`, data);
 
 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';
@@ -13,7 +13,7 @@ $slct.account_id = data.account_id;
 let ae_acct = data[$slct.account_id];
 console.log(`ae_acct = `, ae_acct);
 
-$idaa_slct.post_obj_li = ae_acct.slct.post_obj_li;
+$idaa_slct.archive_obj_li = ae_acct.slct.archive_obj_li;
 
 </script>
 
diff --git a/src/routes/idaa/(idaa)/archives/+page.svelte b/src/routes/idaa/(idaa)/archives/+page.svelte
index f216f075..10f35b1b 100644
--- a/src/routes/idaa/(idaa)/archives/+page.svelte
+++ b/src/routes/idaa/(idaa)/archives/+page.svelte
@@ -44,9 +44,9 @@ $: lq__archive_obj = liveQuery(async () => {
 });
 
 $: lq__archive_content_obj_li = liveQuery(async () => {
-    let results = await db_posts.comment
-        .where('post_id')
-        .equals($idaa_slct.post_id)
+    let results = await db_archives.content
+        .where('archive_id')
+        .equals($idaa_slct.archive_id)
         .reverse()
         .sortBy('updated_on');
         // .sortBy('title');
@@ -55,7 +55,7 @@ $: lq__archive_content_obj_li = liveQuery(async () => {
 });
 
 $: lq__archive_content_obj = liveQuery(async () => {
-    let results = await db_posts.comment
+    let results = await db_archives.content
         .get($idaa_slct.archive_content_id);
 
     return results;
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/+layout.ts b/src/routes/idaa/(idaa)/archives/[archive_id]/+layout.ts
new file mode 100644
index 00000000..7cf70ad3
--- /dev/null
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/+layout.ts
@@ -0,0 +1,48 @@
+/** @type {import('./$types').LayoutLoad} */
+console.log(`IDAA Archives - [archive_id] +layout.ts start`);
+
+import { error } from '@sveltejs/kit';
+import { browser } from '$app/environment';
+import { archives_func } from '$lib/ae_archives/ae_archives_functions';
+
+export async function load({ params, parent }) { // route
+    // let log_lvl = 0;
+
+    // let data = await parent();
+    // data.log_lvl = log_lvl;
+
+    // let account_id = data.account_id;
+    // let ae_acct = data[account_id];
+    // console.log(`ae_acct = `, ae_acct);
+
+    // let archive_id = params.archive_id;
+    // if (!archive_id) {
+    //     console.log(`ae IDAA Archives - [archive_id] +layout.ts: The archive_id was not found!!!`);
+    //     error(404, {
+	// 		message: 'IDAA Archives - Archive ID not found'
+	// 	});
+    // }
+
+    // ae_acct.slct.archive_id = archive_id;
+
+    // if (browser) {
+    //     if (log_lvl) {
+    //         console.log(`ae_idaa_archives archives [archive_id] +layout.ts: archive_id = `, archive_id);
+    //     }
+    //     // Load event archive object
+    //     let load_archive_obj = archives_func.load_ae_obj_id__archive({
+    //         api_cfg: ae_acct.api,
+    //         archive_id:  archive_id,
+    //         inc_content_li: true,
+    //         try_cache: true
+    //     });
+
+    //     console.log(`load_archive_obj = `, load_archive_obj);
+    //     ae_acct.slct.archive_obj = load_archive_obj;
+    // }
+
+    // WARNING: Precaution against shared data between sites and sessions.
+    // data[account_id] = ae_acct;
+
+    // return data;
+}
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
new file mode 100644
index 00000000..cd87dfcd
--- /dev/null
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+/** @type {import('./$types').PageData} */
+export let data: any;
+let log_lvl = 0;
+
+// Imports
+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 { db_archives } from "$lib/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_trigger } from '$lib/ae_idaa_stores';
+import { archives_func } from '$lib/ae_archives/ae_archives_functions';
+
+import Archive_view from './ae_idaa_comp__archive_obj_id_view.svelte';
+// import Archive_page_menu from './session_page_menu.svelte';
+
+import Archive_content_obj_li from './ae_idaa_comp__archive_content_obj_li.svelte';
+
+import { browser } from '$app/environment';
+
+// Variables
+
+
+// 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);
+let ae_acct = data[$slct.account_id];
+console.log(`ae_acct = `, ae_acct);
+
+// For some reason data.params.archive_id (or whatever param) is not being passed to this page when loaded by a link from another page. This seems to be a bug with Svelte or SvelteKit. Hopefully fixed in a future version 5? 2024-11-06
+$idaa_slct.archive_id = ae_acct.slct.archive_id;
+$idaa_slct.archive_obj = ae_acct.slct.archive_obj;
+
+
+$: lq__archive_obj = liveQuery(async () => {
+    console.log(`lq__archive_obj: archive_id = ${$idaa_slct?.archive_id}`);
+    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.');
+}
+
+
+</script>
+
+
+<section
+    class="
+        ae_idaa__bb
+        container h-full mx-auto
+        flex flex-col gap-1
+        py-1 px-2 pb-16
+        items-center
+        min-w-full
+        max-w-max
+        "
+    >
+
+<!-- <h1>Archives {$lq__archive_obj?.name} - {$lq__archive_content_obj_li?.length}</h1> -->
+
+<Archive_view
+    lq__archive_obj={lq__archive_obj}
+    lq__archive_content_obj_li={lq__archive_content_obj_li}
+    />
+
+<!-- {#if $lq__archive_content_obj_li && $lq__archive_content_obj_li?.length } -->
+    <Archive_content_obj_li
+        lq__archive_content_obj_li={lq__archive_content_obj_li}
+        />
+<!-- {:else} -->
+    <!-- <p>No archive content available to show.</p> -->
+<!-- {/if} -->
+
+
+</section>
\ No newline at end of file
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.ts b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.ts
new file mode 100644
index 00000000..3833100e
--- /dev/null
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.ts
@@ -0,0 +1,82 @@
+/** @type {import('./$types').PageLoad} */
+import { error } from '@sveltejs/kit';
+console.log(`ae_p_idaa_archives [archive_id] +page.ts start`);
+
+import { browser } from '$app/environment';
+import { archives_func } from '$lib/ae_archives/ae_archives_functions';
+
+export async function load({ params, parent }) { // route
+    let log_lvl = 1;
+
+    let data = await parent();
+    data.log_lvl = log_lvl;
+
+    let account_id = data.account_id;
+    let ae_acct = data[account_id];
+
+    let archive_id = params.archive_id;
+    if (!archive_id) {
+        console.log(`ae_idaa_archives archives [archive_id] +page.ts: The archive_id was not found in the params!!!`);
+        error(404, {
+			message: 'IDAA Archives - Archive ID not found'
+		});
+    }
+    ae_acct.slct.archive_id = archive_id;
+
+    if (browser) {
+        if (log_lvl) {
+            console.log(`ae_idaa_archives archives [archive_id] +page.ts: archive_id = `, archive_id);
+        }
+        // Load event archive object
+        let load_archive_obj = archives_func.load_ae_obj_id__archive({
+            api_cfg: ae_acct.api,
+            archive_id:  archive_id,
+            inc_content_li: true,
+            try_cache: true
+        });
+
+        ae_acct.slct.archive_obj = load_archive_obj;
+
+        // Load archive contents for the archive
+        // let load_archive_content_obj_li = archives_func.load_ae_obj_li__archive_content({
+        //     api_cfg: ae_acct.api,
+        //     for_obj_type: 'archive',
+        //     for_obj_id: archive_id,
+        //     params: {qry__enabled: 'all', qry__limit: 99},
+        //     try_cache: true
+        // })
+        // .then((archive_content_obj_li) => {
+        //     if (log_lvl) {
+        //         console.log(`archive_content_obj_li = `, archive_content_obj_li);
+        //     }
+        //     for (let index = 0; index < archive_content_obj_li.length; index++) {
+        //         let archive_content_obj = archive_content_obj_li[index];
+        //         let archive_content_id = archive_content_obj.archive_content_id_random;
+
+        //         let load_archive_content_obj_li = archives_func.load_ae_obj_li__archive_content({
+        //             api_cfg: ae_acct.api,
+        //             for_obj_type: 'archive_content',
+        //             for_obj_id: archive_content_id,
+        //             params: {qry__enabled: 'all', qry__limit: 15},
+        //             try_cache: true
+        //         });
+        //         if (log_lvl) {
+        //             console.log(`load_archive_content_obj_li = `, load_archive_content_obj_li);
+        //         }
+        //         archive_content_obj_li[index].archive_content_li = load_archive_content_obj_li;
+        //     }
+
+        //     return archive_content_obj_li;
+        // });
+        // if (log_lvl) {
+        //     console.log(`load_archive_content_obj_li = `, load_archive_content_obj_li);
+        // }
+        // ae_acct.slct.archive_content_obj_li = load_archive_content_obj_li;
+
+    }
+
+    // WARNING: Precaution against shared data between sites and presentations.
+    data[account_id] = ae_acct;
+
+    return data;
+}
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_li.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_li.svelte
new file mode 100644
index 00000000..88b89eba
--- /dev/null
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_li.svelte
@@ -0,0 +1,223 @@
+<script lang="ts">
+// *** Import Svelte core
+import { onMount } from 'svelte';
+import { Spinner } from 'flowbite-svelte';
+
+// *** Import Aether core variables and functions
+import type { key_val } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils/ae_utils';
+import { api } from '$lib/api';
+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_content_obj_li: any;
+
+let ae_promises: 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">
+{#if $lq__archive_content_obj_li && $lq__archive_content_obj_li.length}
+
+{#each $lq__archive_content_obj_li as idaa_archive_content_obj, index}
+    <div
+        class="container archive archive_content_obj border border-1 rounded p-2 mb-2 space-y-2"
+        class:dim={idaa_archive_content_obj.hide}
+        class:bg-warning-100={!idaa_archive_content_obj?.enable}
+        >
+
+        <header class="ae_header flex flex-row gap-2 items-center">
+            <h3 class="archive__name h3">
+                <span class="archive__name">{@html idaa_archive_content_obj.name}</span>
+            </h3>
+
+            {#if idaa_archive_content_obj.original_location}
+                &mdash;
+                <h4 class="h4">
+                    <!-- <span class="ae_label">Location:</span> -->
+                    <span class="ae_value">{idaa_archive_content_obj.original_location}</span>
+                </h4>
+            {/if}
+        </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}
+
+        <div class="ae_options flex flex-row flex-wrap gap-2 items-center justify-center">
+            <button
+                disabled={!$ae_loc.administrator_access}
+                on:click={() => {
+                    $idaa_slct.archive_content_id = idaa_archive_content_obj?.archive_content_id;
+                    $idaa_slct.archive_content_obj = idaa_archive_content_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_content_obj?.archive_id);
+                    // history.pushState({}, '', url);
+
+                    // let message = {'archive_id': idaa_archive_content_obj?.archive_id};
+                    // window.parent.postMessage(message, "*");
+
+                    $idaa_sess.archives.show__modal_view__archive_content_id = true;
+                    $idaa_sess.archives.show__modal_edit__archive_content_id = false;
+                }}
+                class="btn btn-md 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
+            </button>
+
+            {#if $ae_loc.trusted_access && idaa_archive_content_obj?.hosted_file_id}
+                <button
+                    disabled={!$ae_loc.trusted_access}
+                    on:click={() => {
+                        ae_promises[idaa_archive_content_obj.hosted_file_id] = api.download_hosted_file({
+                            api_cfg: $ae_api,
+                            hosted_file_id: idaa_archive_content_obj.hosted_file_id,
+                            return_file: true,
+                            filename: idaa_archive_content_obj.filename,
+                            auto_download: true,
+                            log_lvl: 0
+                        });
+
+                        // window.postMessage({ type: 'download_event_file', hosted_file_id: idaa_archive_content_obj.hosted_file_id, filename: idaa_archive_content_obj.filename, auto_download: true }, '*');
+                    }}
+                    class="btn btn-sm lg:btn-md variant-soft-primary hover:variant-filled-primary min-w-72 lg:min-w-96"
+                    title={`Download this file:\n${idaa_archive_content_obj.filename}\n[API] SHA256: ${idaa_archive_content_obj?.hash_sha256.slice(0, 10)}... Hosted ID: ${idaa_archive_content_obj.hosted_file_id} Archive Content ID: ${idaa_archive_content_obj.archive_content_id}`}
+                    >
+                    {#await ae_promises[idaa_archive_content_obj.hosted_file_id]}
+                        <span class="fas fa-spinner fa-spin mx-1"></span>
+                        <span class="">
+                            Downloading
+                            {#if $ae_sess.api_download_kv[idaa_archive_content_obj.hosted_file_id]}
+                                {$ae_sess.api_download_kv[idaa_archive_content_obj.hosted_file_id].percent_completed}%
+                            {/if}
+                            :
+                        </span>
+                    {:then}
+                        <span class="fas fa-{ae_util.file_extension_icon(idaa_archive_content_obj?.file_extension)}"></span>
+                    {/await}
+
+                    <span class="grow">
+                    {ae_util.shorten_filename({filename: idaa_archive_content_obj?.filename, max_length: 30})}
+                    </span>
+                </button>
+
+
+                <!-- <a href="{$ae_loc.base_url}{idaa_archive_content_obj.hosted_file_path}" class="btn btn-md variant-ghost-secondary" title="Download this file">
+                    <span class="fas fa-download m-1"></span>
+                        Download
+                    <span class="badge">
+                        {#if ae_util.file_extension_icon(idaa_archive_content_obj?.file_extension)}
+                            <span class="fas fa-{ae_util.file_extension_icon(idaa_archive_content_obj?.file_extension)} m-1"></span>
+                        {:else}
+                            <span class="fas fa-file"></span>
+                        {/if}
+                    .{idaa_archive_content_obj?.file_extension}</span>
+                </a> -->
+            {/if}
+
+            {#if $ae_loc.trusted_access}
+                <button
+                    disabled={!$ae_loc.administrator_access}
+                    on:click={() => {
+                        $idaa_slct.archive_id = idaa_archive_content_obj.archive_id;
+                        $idaa_slct.archive_content_obj = idaa_archive_content_obj;
+
+                        $idaa_sess.archives.show__modal_view = false;
+                        $idaa_sess.archives.show__modal_edit__archive_content_obj = true;
+                    }}
+                    class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
+                    title={`Edit archive: ${idaa_archive_content_obj?.name}`}
+                    >
+                    <span class="fas fa-edit m-1"></span> Edit Content
+                </button>
+            {/if}
+        </div>
+
+        <!-- Doing some checks before the media player/viewer shows. The player should be the only one showing. So there is a sort of global check first. -->
+        {#if idaa_archive_content_obj.archive_content_id == $idaa_sess.archives.show_view__archive_content_media}
+            <!-- <Player_archive_content_obj archive_content_id={idaa_archive_content_obj.archive_content_id_random} /> -->
+             Player Goes Here
+        {/if}
+
+
+        <section class="ae_section archive_content__content">
+            {#if idaa_archive_content_obj?.description}
+            <div
+                class="archive_content__description ae_description"
+                >
+                <div class="ae_label archive_content__description">Description:</div>
+                <div class="ae_value archive_content__description">
+                    {idaa_archive_content_obj?.description}
+                </div>
+            </div>
+            {/if}
+
+            {#if idaa_archive_content_obj?.content_html}
+            <div
+                class="archive_content__content_html ae_content_html"
+                >
+                <div class="ae_label archive_content__content_html">Content:</div>
+                <div class="ae_value archive_content__content_html">
+                    {@html idaa_archive_content_obj?.content_html}
+                </div>
+            </div>
+            {/if}
+
+            <div
+                class="ae_group"
+                class:hidden={!idaa_archive_content_obj?.original_datetime && !idaa_archive_content_obj?.original_timezone}
+                >
+                <span class="ae_label">Original date/time:</span>
+                {#if idaa_archive_content_obj.original_datetime}
+                    <span class="ae_value ae_prop prop_original_datetime fs_smaller">{ae_util.iso_datetime_formatter(idaa_archive_content_obj.original_datetime, 'datetime_long')}</span>
+                {/if}
+                {#if idaa_archive_content_obj.original_timezone}
+                    <span class="ae_label">Timezone:</span>
+                    <span class="ae_value">{idaa_archive_content_obj.original_timezone}</span>
+                {/if}
+            </div>
+
+        </section>
+
+
+        <section
+            class="ae_section ae_footer ae_meta archive_content__meta"
+            class:ae_d_none={!$ae_loc.administrator_access}
+            >
+            <span
+                class="archive_content__archive_content_type"
+                class:ae_d_none={!idaa_archive_content_obj.archive_content_type}
+                >
+                Type: {idaa_archive_content_obj.archive_content_type}
+            </span>
+            <span class="ae_group">
+                <span
+                    class="archive_content__created_on"
+                    >
+                    Created on: {ae_util.iso_datetime_formatter(idaa_archive_content_obj.created_on, 'datetime_short')}
+                </span>
+                <span
+                    class="archive_content__updated_on"
+                    class:ae_d_none={!idaa_archive_content_obj.updated_on}
+                    >
+                    Updated on: {ae_util.iso_datetime_formatter(idaa_archive_content_obj.updated_on, 'datetime_short')}
+                </span>
+            </span>
+        </section>
+
+</div>
+{/each}
+
+{:else}
+    <p>No archive content available to show.</p>
+{/if}
+</section>
+<!-- {/if} -->
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_edit.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_edit.svelte
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_edit.svelte
@@ -0,0 +1 @@
+
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_view.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_view.svelte
new file mode 100644
index 00000000..b1a374ed
--- /dev/null
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_view.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+// *** Import Svelte core
+import { onMount } from 'svelte';
+import { Spinner } from 'flowbite-svelte';
+
+// *** Import Aether core 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: any;
+export let lq__archive_content_obj_li: any;
+
+onMount(() => {
+    console.log('** Component Mounted: ** ID - Archive Obj');
+});
+</script>
+
+
+<section class="svelte_component ae_section ae_view archive_obj view__archive_obj" bind:clientHeight={$ae_loc.iframe_height_modal_body}>
+
+<header class="ae_header archive__header">
+    <h2 class="archive__name">{@html $lq__archive_obj?.name} - {$lq__archive_content_obj_li?.length}</h2>
+</header>
+
+<section class="archive__content">
+    {#if $lq__archive_obj?.description}<div class="ae_value archive__description">{@html $lq__archive_obj?.description}</div>{/if}
+    {#if $lq__archive_obj?.content_html}<div class="ae_value">{@html $lq__archive_obj?.content_html}</div>{/if}
+    {#if $lq__archive_obj?.original_url}
+        <div>
+            <span class="ae_label">URL:</span>
+            <span class="ae_value">{$lq__archive_obj?.original_url}</span>
+        </div>
+    {/if}
+    {#if $lq__archive_obj?.original_datetime}
+        <div class="archive__original_datetime">
+            <span class="ae_label">Start Date:</span>
+            <span class="ae_value">{ae_util.iso_datetime_formatter($lq__archive_obj?.original_datetime, 'datetime_long')}</span>
+        </div>
+    {/if}
+    {#if $lq__archive_obj?.original_timezone}
+        <span class="ae_label">Timezone:</span>
+        <span class="ae_value">{$lq__archive_obj?.original_timezone}</span>
+    {/if}
+    {#if $lq__archive_obj?.original_location}
+        <div>
+            <span class="ae_label">Location:</span>
+            <span class="ae_value">{$lq__archive_obj?.original_location}</span>
+        </div>
+    {/if}
+</section>
+
+<section
+    class="ae_section ae_meta archive__meta"
+    class:ae_d_none={!$ae_loc.administrator_access}
+    >
+    <div class="ae_group">
+        <div class="archive__created_on_updated_on">
+            <span class="ae_label">Created on:</span>
+            <span class="ae_value archive__created_on">{ae_util.iso_datetime_formatter($lq__archive_obj?.created_on, 'datetime_iso_no_seconds')}</span>
+            {#if $lq__archive_obj?.updated_on}
+                <span class="ae_label">Updated on:</span>
+                <span class="ae_value">{ae_util.iso_datetime_formatter($lq__archive_obj?.updated_on, 'datetime_iso_no_seconds')}</span>
+            {/if}
+        </div>
+    </div>
+
+    {#if $ae_loc.trusted_access}
+    <div class="ae_options">
+        {#if $ae_loc.trusted_access || $lq__archive_obj?.external_person_id === $idaa_loc.novi_uuid}
+        <button
+            on:click={() => {
+                $slct.archive_content_id = null;
+                $slct.archive_content_obj = {};
+                $idaa_loc.archives.show_edit__archive_content_id = true;
+            }}
+            class="ae_btn ae_smallest btn btn-warning"
+            title={`Add content for: ${$lq__archive_obj?.name}`}
+            >
+            <span class="fas fa-plus"></span> Add Content
+        </button>
+
+        <button
+            on:click={() => {
+                // $slct.archive_id = $lq__archive_obj?.archive_id_random;
+                // $lq__archive_obj? = $lq__archive_obj?;
+
+                // const url = new URL(location);
+                // url.searchParams.set('archive_id', $lq__archive_obj?.archive_id_random);
+                // history.pushState({}, '', url);
+
+                // $idaa_loc.archives.show_main__options = false;
+                // $idaa_loc.archives.show_list__archive_obj_li = false;
+                $idaa_loc.archives.show_view__archive_obj = false;
+                $idaa_loc.archives.show_edit__archive_obj = true;
+            }}
+            class="ae_btn ae_smallest btn btn-xs btn-warning"
+            title={`Edit archive: ${$lq__archive_obj?.name}`}
+            >
+            <span class="fas fa-edit"></span> Edit Archive
+        </button>
+        {/if}
+    </div>
+    {/if}
+</section>
+
+</section>
\ No newline at end of file
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/del +layout.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/del +layout.svelte
new file mode 100644
index 00000000..e69de29b
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 55d53dc8..6c8b30ec 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
@@ -43,7 +43,18 @@ onMount(() => {
         {#if idaa_archive_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_obj.description}</pre>{/if}
 
         <div class="ae_options flex flex-row gap-2 items-center justify-center">
-            <button
+
+            <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}`}>
+                <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}
+            </a>
+
+            <!-- <button
                 on:click={() => {
                     $idaa_slct.archive_id = idaa_archive_obj?.archive_id;
                     $idaa_slct.archive_obj = idaa_archive_obj;
@@ -73,10 +84,11 @@ onMount(() => {
                         <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>
+            </button> -->
 
             {#if $ae_loc.administrator_access}
                 <button
+                    disabled={!$ae_loc.administrator_access}
                     on:click={() => {
                         $idaa_slct.archive_id = idaa_archive_obj.archive_id;
                         $idaa_slct.archive_obj = idaa_archive_obj;