Lots of work with linking files to Journal Entries.

src/lib/ae_core/ae_comp__hosted_files_download_button.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+// *** Import Svelte specific
+
+// Eventually this should use Lucide icons instead of FontAwesome
+// import {
+//         ArrowDown01, ArrowDown10, ArrowDownUp,
+//         BookHeart, BriefcaseBusiness,
+//         CalendarClock, CalendarOff, Clock, CodeXml, Copy,
+//         Eye, EyeOff,
+//         Flag, FlagOff, FileX, Fingerprint,
+//         Globe, Group,
+//         Hash, History,
+//         LockKeyhole, LockKeyholeOpen,
+//         MessageSquareWarning, Menu, Minus,
+//         NotebookPen, NotebookText, NotepadTextDashed,
+//         Pencil, PenLine, Plus,
+//         RemoveFormatting,
+//         Search, Settings,
+//         Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
+//         SquareLibrary,
+//         Tags, Trash2, TypeOutline,
+//         X
+//     } from '@lucide/svelte';
+
+// *** Import Aether specific 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';
+
+interface Props {
+    log_lvl?: number;
+    hosted_file_id: null|string;
+    hosted_file_obj: null|key_val;
+    filename?: null|string;
+    max_length?: number;
+    auto_download?: boolean;
+    linked_to_type?: null|string;
+    linked_to_id?: null|string;
+    download_complete?: null|boolean;
+    download_percent?: number;
+    download_status_msg?: string;
+    classes?: string;
+}
+
+let {
+    log_lvl = 0,
+    hosted_file_id,
+    hosted_file_obj,
+    filename = $bindable(null),
+    max_length = $bindable(30),
+    auto_download = true,
+    linked_to_type = $bindable(null),
+    linked_to_id = $bindable(null),
+    download_complete = $bindable(),
+    download_percent = $bindable(),
+    download_status_msg = $bindable('Not started'),
+    classes = 'btn btn-sm lg:btn-md variant-ghost-tertiary hover:variant-filled-tertiary min-w-48'
+}: Props = $props();
+
+if (log_lvl) {
+    console.log(`ae_comp__hosted_files_download_button.svelte hosted_file_id=${hosted_file_id}`, hosted_file_obj);
+}
+
+let ae_promises: key_val = $state({});
+
+
+$effect(() => {
+    if ($ae_sess?.api_download_kv[hosted_file_obj?.hosted_file_id_random]?.percent_completed) {
+        download_percent = $ae_sess.api_download_kv[hosted_file_obj?.hosted_file_id_random].percent_completed;
+    }
+
+});
+</script>
+
+
+{#if hosted_file_id && hosted_file_obj}
+<button
+    type="button"
+    disabled={!$ae_loc.trusted_access}
+    class="{classes ?? 'btn'}"
+    onclick={() => {
+        download_complete = false;
+        download_status_msg = 'Downloading...';
+        ae_promises[hosted_file_obj.hosted_file_id_random] = api.download_hosted_file({
+            api_cfg: $ae_api,
+            hosted_file_id: hosted_file_obj.hosted_file_id_random,
+            return_file: true,
+            filename: filename ?? hosted_file_obj.filename,
+            auto_download: auto_download,
+            log_lvl: log_lvl
+        })
+        .then((result) => {
+            if (result === null) {
+                console.log('File not found (404)');
+                download_complete = null;
+                download_status_msg = 'File not found';
+            } else if (result === false) {
+                console.log('Possible error with API server (check network and server status)');
+                download_complete = false;
+                download_status_msg = 'Failed to download';
+            } else {
+                // console.log('File found and downloaded');
+                download_complete = true;
+                download_status_msg = 'File downloaded';
+            }
+            return result;
+        });
+    }}
+
+    title={`Download this file:\n${filename ?? hosted_file_obj.filename}\n[API] SHA256: ${hosted_file_obj?.hash_sha256.slice(0, 10)}...\nHosted ID: ${hosted_file_obj.hosted_file_id_random}\n Linked to: ${linked_to_type} ID: ${linked_to_id}`}
+    >
+    {#await ae_promises[hosted_file_obj.hosted_file_id_random]}
+        <span class="fas fa-spinner fa-spin mx-1"></span>
+        <span class="">
+            Downloading
+            {#if $ae_sess.api_download_kv[hosted_file_obj.hosted_file_id_random]}
+                {$ae_sess.api_download_kv[hosted_file_obj.hosted_file_id_random].percent_completed}%
+            {/if}
+            :
+        </span>
+    {:then}
+        <span class="fas fa-{ae_util.file_extension_icon(hosted_file_obj?.extension)}"></span>
+
+    {/await}
+
+    {#if download_complete === null}
+        <span class="text-red-800 dark:text-red-200">File not found</span>
+    {:else if download_complete === false}
+        <span class="text-red-800 dark:text-red-200">Failed to download!</span>
+    {/if}
+
+    <span class="grow">
+    {ae_util.shorten_filename({filename: filename ?? hosted_file_obj?.filename, max_length: max_length})}
+    </span>
+</button>
+
+{:else}
+
+<button
+    type="button"
+    disabled
+    class="{classes ?? 'btn'}"
+    title="No file selected"
+    >
+    <span class="fas fa-{ae_util.file_extension_icon(hosted_file_obj?.extension)}"></span>
+    <span class="grow">
+        No file info
+    </span>
+</button>
+
+{/if}

src/lib/ae_journals/db_journals.ts

@@ -58,7 +58,7 @@ export interface Journal {
 
     cfg_json?: null|key_val; // This is the configuration JSON for the journal
 
-    data_json?: null|string; // We always need to store something extra...
+    data_json?: null|key_val; // We always need to store something extra...
 
     ux_mode?: null|string; // 'mobile' or 'desktop'
 
@@ -229,7 +229,7 @@ export interface Journal_Entry {
     related_entry_id_li?: null|key_val; // List of related journal entry IDs
 
     // cfg_json?: null|key_val; // This is the configuration JSON for the journal entry
-    data_json?: null|string; // We always need to store something extra...
+    data_json?: null|key_val; // We always need to store something extra...
 
     // This only allows for basic access to the content.
     passcode_read?: null|string; // For LLM (AI) generated summary...???

src/lib/element_manage_hosted_file_li.svelte

@@ -99,7 +99,8 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
                 hidden: 'not_hidden',
                 limit: 250,
                 // params: params,
-                try_cache: true
+                try_cache: true,
+                log_lvl: 2
             });
 
             // ae_tmp.show__file_li = false;