From 76b9e978945bb2f36e3240b8fb9b97b0c0862362 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 3 Feb 2026 13:19:04 -0500
Subject: [PATCH] feat(hosted-files): enhance download component with style
 variants and robust progress states

- refactor(ae_comp__hosted_files_download_button): add 'variant' (tonal, filled, outline, ghost) and 'color' props.
- fix(ae_comp__hosted_files_download_button): ensure Tailwind bundles variant classes using a literal lookup map.
- fix(ae_comp__hosted_files_download_button): prevent premature "Failed to download" message during initialization.
- feat(testing): add comprehensive Hosted Files testing dashboard at /testing/hosted_files with large file progress trials.
- chore: remove legacy v1 download button component.
---
 ..._comp__hosted_files_download_button.svelte |  62 ++++-
 ...mp__hosted_files_download_button_v1.svelte | 156 -------------
 src/routes/testing/hosted_files/+page.svelte  | 217 ++++++++++++++++++
 3 files changed, 276 insertions(+), 159 deletions(-)
 delete mode 100644 src/lib/ae_core/ae_comp__hosted_files_download_button_v1.svelte
 create mode 100644 src/routes/testing/hosted_files/+page.svelte

diff --git a/src/lib/ae_core/ae_comp__hosted_files_download_button.svelte b/src/lib/ae_core/ae_comp__hosted_files_download_button.svelte
index 62f6a795..5d098e42 100644
--- a/src/lib/ae_core/ae_comp__hosted_files_download_button.svelte
+++ b/src/lib/ae_core/ae_comp__hosted_files_download_button.svelte
@@ -24,6 +24,8 @@
         download_complete?: null | boolean;
         download_percent?: number;
         download_status_msg?: string;
+        variant?: 'tonal' | 'filled' | 'outline' | 'ghost';
+        color?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'surface';
         classes?: string;
         label?: import('svelte').Snippet;
     }
@@ -40,10 +42,64 @@
         download_complete = $bindable(),
         download_percent = $bindable(),
         download_status_msg = $bindable('Not started'),
-        classes = 'btn btn-sm lg:btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 min-w-48',
+        variant = 'tonal',
+        color = 'primary',
+        classes = '',
         label
     }: Props = $props();
 
+    // Map variant/color to classes using literal strings so Tailwind can find them
+    const color_map: Record<string, Record<string, string>> = {
+        primary: {
+            tonal: 'preset-tonal-primary border border-primary-500/30 hover:preset-filled-primary-500',
+            filled: 'preset-filled-primary-500 hover:preset-filled-primary-600',
+            outline: 'border border-primary-500 hover:preset-tonal-primary',
+            ghost: 'hover:preset-tonal-primary'
+        },
+        secondary: {
+            tonal: 'preset-tonal-secondary border border-secondary-500/30 hover:preset-filled-secondary-500',
+            filled: 'preset-filled-secondary-500 hover:preset-filled-secondary-600',
+            outline: 'border border-secondary-500 hover:preset-tonal-secondary',
+            ghost: 'hover:preset-tonal-secondary'
+        },
+        tertiary: {
+            tonal: 'preset-tonal-tertiary border border-tertiary-500/30 hover:preset-filled-tertiary-500',
+            filled: 'preset-filled-tertiary-500 hover:preset-filled-tertiary-600',
+            outline: 'border border-tertiary-500 hover:preset-tonal-tertiary',
+            ghost: 'hover:preset-tonal-tertiary'
+        },
+        success: {
+            tonal: 'preset-tonal-success border border-success-500/30 hover:preset-filled-success-500',
+            filled: 'preset-filled-success-500 hover:preset-filled-success-600',
+            outline: 'border border-success-500 hover:preset-tonal-success',
+            ghost: 'hover:preset-tonal-success'
+        },
+        warning: {
+            tonal: 'preset-tonal-warning border border-warning-500/30 hover:preset-filled-warning-500',
+            filled: 'preset-filled-warning-500 hover:preset-filled-warning-600',
+            outline: 'border border-warning-500 hover:preset-tonal-warning',
+            ghost: 'hover:preset-tonal-warning'
+        },
+        error: {
+            tonal: 'preset-tonal-error border border-error-500/30 hover:preset-filled-error-500',
+            filled: 'preset-filled-error-500 hover:preset-filled-error-600',
+            outline: 'border border-error-500 hover:preset-tonal-error',
+            ghost: 'hover:preset-tonal-error'
+        },
+        surface: {
+            tonal: 'preset-tonal-surface border border-surface-500/30 hover:preset-filled-surface-500',
+            filled: 'preset-filled-surface-500 hover:preset-filled-surface-600',
+            outline: 'border border-surface-500 hover:preset-tonal-surface',
+            ghost: 'hover:preset-tonal-surface'
+        }
+    };
+
+    let variant_classes = $derived.by(() => {
+        const base = 'btn btn-sm lg:btn-md min-w-48 transition-all';
+        const style = color_map[color]?.[variant] || color_map.primary.tonal;
+        return `${base} ${style} ${classes}`.trim();
+    });
+
     $effect(() => {
         if (log_lvl) {
             console.log(
@@ -69,9 +125,9 @@
     <button
         type="button"
         disabled={!$ae_loc.trusted_access}
-        class={classes ?? 'btn'}
+        class={variant_classes}
         onclick={() => {
-            download_complete = false;
+            download_complete = undefined;
             download_status_msg = 'Downloading...';
             ae_promises[file_id] = download_ae_obj_id__hosted_file({
                     api_cfg: $ae_api,
diff --git a/src/lib/ae_core/ae_comp__hosted_files_download_button_v1.svelte b/src/lib/ae_core/ae_comp__hosted_files_download_button_v1.svelte
deleted file mode 100644
index b4e4a926..00000000
--- a/src/lib/ae_core/ae_comp__hosted_files_download_button_v1.svelte
+++ /dev/null
@@ -1,156 +0,0 @@
-<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/stores/ae_stores';
-    import { ae_util } from '$lib/ae_utils/ae_utils';
-    import { api } from '$lib/api/api';
-    import {
-        ae_snip,
-        ae_loc,
-        ae_sess,
-        ae_api,
-        ae_trig,
-        slct,
-        slct_trigger
-    } from '$lib/stores/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 = $bindable(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 preset-tonal-tertiary border border-tertiary-500 hover:preset-filled-tertiary-500 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]?.percent_completed) {
-            download_percent =
-                $ae_sess.api_download_kv[hosted_file_obj?.hosted_file_id].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] = api
-                .download_hosted_file({
-                    api_cfg: $ae_api,
-                    hosted_file_id: hosted_file_obj.hosted_file_id,
-                    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}\n Linked to: ${linked_to_type} ID: ${linked_to_id}`}
-    >
-        {#await ae_promises[hosted_file_obj.hosted_file_id]}
-            <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]}
-                    {$ae_sess.api_download_kv[hosted_file_obj.hosted_file_id]
-                        .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}
diff --git a/src/routes/testing/hosted_files/+page.svelte b/src/routes/testing/hosted_files/+page.svelte
new file mode 100644
index 00000000..fec4738b
--- /dev/null
+++ b/src/routes/testing/hosted_files/+page.svelte
@@ -0,0 +1,217 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { ae_api, ae_loc } from '$lib/stores/ae_stores';
+    import { load_ae_obj_id__hosted_file } from '$lib/ae_core/core__hosted_files';
+    import AE_Comp_Hosted_Files_Download_Button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
+    import * as Lucide from 'lucide-svelte';
+
+    let hosted_files: any[] = $state([]);
+    let large_file_obj: any = $state(null);
+    let loading = $state(true);
+
+    const LARGE_FILE_ID = 'sPw1he_RGCW';
+    const test_ids = [
+        'QpyZNtEb2LQBmNJPQU_aOA', // small.mp4
+        'ZmMTrrqx8nTTY0Cj0wvA3Q', // Test PowerPoint video.pptx
+        'e7NcV-275YPLQLoFMWuUZw', // Test PDF.pdf
+        'INVALID_ID_TEST'
+    ];
+
+    onMount(async () => {
+        // Load the large file specifically first
+        large_file_obj = await load_ae_obj_id__hosted_file({ 
+            api_cfg: $ae_api, 
+            hosted_file_id: LARGE_FILE_ID,
+            log_lvl: 1 
+        });
+
+        // Fallback for large file if API doesn't have it (for UI testing)
+        if (!large_file_obj) {
+            large_file_obj = {
+                id: LARGE_FILE_ID,
+                hosted_file_id: LARGE_FILE_ID,
+                filename: 'Large_Test_File_Fallback.zip',
+                extension: 'zip',
+                hash_sha256: 'pending...'
+            };
+        }
+
+        const promises = test_ids.map(id => 
+            load_ae_obj_id__hosted_file({ 
+                api_cfg: $ae_api, 
+                hosted_file_id: id,
+                log_lvl: 1 
+            })
+        );
+        
+        const results = await Promise.all(promises);
+        hosted_files = results.filter((f: any) => f !== null) as any[];
+        
+        // Add a fake object for the invalid ID test
+        hosted_files.push({
+            id: 'INVALID_ID_TEST',
+            hosted_file_id: 'INVALID_ID_TEST',
+            filename: 'non_existent_file.txt',
+            extension: 'txt',
+            hash_sha256: '0000000000'
+        });
+
+        loading = false;
+    });
+
+</script>
+
+<!-- Outer wrapper to enable scrolling if parent is overflow-hidden -->
+<div class="h-full w-full overflow-y-auto overflow-x-hidden bg-transparent">
+    <div class="container mx-auto p-4 space-y-8 pb-20">
+        <header class="flex justify-between items-center bg-surface-50-900-token p-6 rounded-container shadow-xl border border-gray-500">
+            <div class="space-y-1">
+                <h1 class="h1 flex items-center gap-3">
+                    <Lucide.Download class="text-primary-500" /> Hosted Files Testing
+                </h1>
+                <p class="opacity-60 text-sm">Testing the AE_Comp_Hosted_Files_Download_Button component</p>
+            </div>
+        </header>
+
+        <!-- Dedicated Large File Section -->
+        <div class="card p-6 variant-soft-primary border-2 border-primary-500 shadow-xl space-y-4">
+            <header class="flex justify-between items-center border-b border-primary-500/30 pb-2">
+                <h2 class="h2 flex items-center gap-2">
+                    <Lucide.Zap class="text-warning-500" /> Large File Progress Test
+                </h2>
+                <span class="badge variant-filled-warning animate-pulse">Testing Percentage</span>
+            </header>
+            
+            <p class="text-sm opacity-80 italic">
+                Use this file to verify the <strong>percentage counter</strong> and <strong>loading spinner</strong>. 
+                This file is ~100MB+, which should provide ample time to observe the progress state.
+            </p>
+
+            {#if large_file_obj}
+                <div class="bg-black/20 p-4 rounded-container border border-primary-500/20 flex flex-col md:flex-row justify-between items-center gap-4">
+                    <div class="flex items-center gap-4">
+                        <div class="p-3 bg-primary-500/20 rounded-lg">
+                            <Lucide.FileArchive size={32} />
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-lg">{large_file_obj.filename}</h3>
+                            <p class="text-xs font-mono opacity-50">ID: {LARGE_FILE_ID}</p>
+                        </div>
+                    </div>
+                    
+                    <div class="w-full md:w-auto">
+                        <AE_Comp_Hosted_Files_Download_Button 
+                            hosted_file_id={LARGE_FILE_ID}
+                            hosted_file_obj={large_file_obj}
+                            variant="filled"
+                            color="primary"
+                            classes="w-full md:min-w-64 py-4"
+                        />
+                    </div>
+                </div>
+            {/if}
+        </div>
+
+        <div class="card p-6 variant-soft-surface space-y-4 border border-gray-500 shadow-lg">
+            <h2 class="h2">Style & Variant Trials</h2>
+            
+            {#if loading}
+                <div class="flex items-center gap-2 py-10 justify-center">
+                    <Lucide.Loader2 class="animate-spin" />
+                    <span>Loading test metadata gallery...</span>
+                </div>
+            {:else}
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {#each hosted_files as file}
+                        <div class="card p-4 variant-soft-secondary space-y-4">
+                            <div class="flex justify-between items-start">
+                                <div>
+                                    <h3 class="font-bold">{file.filename}</h3>
+                                    <p class="text-xs opacity-60 font-mono">ID: {file.id}</p>
+                                </div>
+                                <span class="badge variant-filled-primary uppercase">{file.extension}</span>
+                            </div>
+                            
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
+                                <div class="space-y-1">
+                                    <p class="text-[10px] opacity-50 uppercase font-bold">Variant: Tonal</p>
+                                    <AE_Comp_Hosted_Files_Download_Button 
+                                        hosted_file_id={file.id}
+                                        hosted_file_obj={file}
+                                        variant="tonal"
+                                        color="primary"
+                                        classes="w-full"
+                                    />
+                                </div>
+    
+                                <div class="space-y-1">
+                                    <p class="text-[10px] opacity-50 uppercase font-bold">Variant: Filled</p>
+                                    <AE_Comp_Hosted_Files_Download_Button 
+                                        hosted_file_id={file.id}
+                                        hosted_file_obj={file}
+                                        variant="filled"
+                                        color="secondary"
+                                        classes="w-full"
+                                    />
+                                </div>
+    
+                                <div class="space-y-1">
+                                    <p class="text-[10px] opacity-50 uppercase font-bold">Variant: Outline</p>
+                                    <AE_Comp_Hosted_Files_Download_Button 
+                                        hosted_file_id={file.id}
+                                        hosted_file_obj={file}
+                                        variant="outline"
+                                        color="tertiary"
+                                        classes="w-full"
+                                    />
+                                </div>
+    
+                                <div class="space-y-1">
+                                    <p class="text-[10px] opacity-50 uppercase font-bold">Variant: Ghost</p>
+                                    <AE_Comp_Hosted_Files_Download_Button 
+                                        hosted_file_id={file.id}
+                                        hosted_file_obj={file}
+                                        variant="ghost"
+                                        color="surface"
+                                        classes="w-full"
+                                    />
+                                </div>
+                            </div>
+    
+                            <div class="pt-2 border-t border-surface-500/20">
+                                <p class="text-[10px] opacity-50 uppercase font-bold">Custom Label Snippet:</p>
+                                <AE_Comp_Hosted_Files_Download_Button 
+                                    hosted_file_id={file.id}
+                                    hosted_file_obj={file}
+                                    variant="tonal"
+                                    color="success"
+                                    classes="w-full mt-1"
+                                >
+                                    {#snippet label()}
+                                        <Lucide.FileArchive size={16} class="mr-2" />
+                                        <span>Download Source</span>
+                                    {/snippet}
+                                </AE_Comp_Hosted_Files_Download_Button>
+                            </div>
+                        </div>
+                    {/each}
+                </div>
+            {/if}
+        </div>
+
+        <div class="card p-6 variant-soft-warning border border-warning-500 shadow-lg">
+            <h3 class="h3 font-bold text-warning-700 dark:text-warning-500 flex items-center gap-2">
+                <Lucide.AlertTriangle size={20} /> Edge Case: Missing Metadata
+            </h3>
+            <p class="text-sm opacity-80 mt-2">
+                Testing the component when <code>hosted_file_id</code> or <code>hosted_file_obj</code> is missing.
+            </p>
+            <div class="flex gap-4 mt-4">
+                <AE_Comp_Hosted_Files_Download_Button 
+                    hosted_file_id={null}
+                    hosted_file_obj={null}
+                />
+            </div>
+        </div>
+    </div>
+</div>