More general code clean up. Updating Lucide icons.

This commit is contained in:
Scott Idem
2026-02-11 13:21:38 -05:00
parent 3ca041383f
commit 3ffe9cbcc9
12 changed files with 130 additions and 128 deletions

View File

@@ -34,7 +34,7 @@
label?: import('svelte').Snippet;
}
let {
let {
log_lvl = 0,
hosted_file_id,
hosted_file_obj,
@@ -218,10 +218,10 @@
{@const file_id = hosted_file_obj?.id || hosted_file_obj?.hosted_file_id || hosted_file_id}
{#await ae_promises[file_id]}
<div class="flex items-center w-full min-h-[1.5rem]">
<div
class="flex items-center pr-2 shrink-0 {show_divider ? 'border-r border-surface-500/30 mr-2' : ''}"
<div
class="flex items-center pr-2 shrink-0 {show_divider ? 'border-r border-surface-500/30 mr-2' : ''}"
>
<Lucide.Loader2 class="animate-spin" size={18} />
<Lucide.LoaderCircle class="animate-spin" size={18} />
</div>
<div class="grow relative text-left h-full">
{#if show_filename_view}
@@ -250,8 +250,8 @@
{:else}
{@const IconComp = ae_util.file_extension_icon_lucide(hosted_file_obj?.extension)}
<div class="flex items-center w-full">
<div
class="flex items-center pr-2 shrink-0 {show_divider ? 'border-r border-surface-500/30 mr-2' : ''}"
<div
class="flex items-center pr-2 shrink-0 {show_divider ? 'border-r border-surface-500/30 mr-2' : ''}"
>
<IconComp size={18} />
</div>
@@ -276,7 +276,7 @@
{#if hosted_file_id && hosted_file_obj}
{@const file_id = hosted_file_obj.id || hosted_file_obj.hosted_file_id || hosted_file_id}
{#if show_direct_download}
<a
href={direct_download_url}
@@ -300,8 +300,8 @@
{:else}
<button type="button" disabled class={variant_classes} title="No file selected">
<div class="flex items-center w-full">
<div
class="flex items-center pr-2 shrink-0 {show_divider ? 'border-r border-surface-500/30 mr-2' : ''}"
<div
class="flex items-center pr-2 shrink-0 {show_divider ? 'border-r border-surface-500/30 mr-2' : ''}"
>
<Lucide.FileX size={18} />
</div>

View File

@@ -278,7 +278,7 @@
<form onsubmit={handle_submit_form_files} class="{class_li_default} {class_li}">
{#await ae_promises.upload__hosted_file_obj}
<div class="text-lg flex flex-row gap-1 items-center justify-center">
<Lucide.Loader2 class="animate-spin m-1" />
<Lucide.LoaderCircle class="animate-spin m-1" />
<span class="">
Uploading
{#if $ae_sess.api_upload_kv[task_id]}
@@ -320,7 +320,7 @@
block w-full text-lg
text-gray-900
border border-gray-300 rounded-lg
cursor-pointer
cursor-pointer
bg-gray-50 dark:text-gray-400 focus:outline-hidden dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
{input_class_li.join(' ')}
"
@@ -341,7 +341,7 @@
$ae_sess.files.status__file_list != 'ready'}
>
{#await ae_promises.upload__hosted_file_obj}
<Lucide.Loader2 class="animate-spin m-1" />
<Lucide.LoaderCircle class="animate-spin m-1" />
<span class="">
{#if $ae_sess.api_upload_kv[task_id]}
{$ae_sess.api_upload_kv[task_id].percent_completed}%

View File

@@ -4,18 +4,18 @@
import { goto } from '$app/navigation';
import { update_ae_obj__user, delete_ae_obj_id__user } from '$lib/ae_core/ae_core__user';
import { editable_fields__user } from '$lib/ae_core/ae_core__user.editable_fields';
import {
ShieldCheck,
Mail,
User as UserIcon,
ArrowLeft,
Save,
Trash2,
import {
ShieldCheck,
Mail,
User as UserIcon,
ArrowLeft,
Save,
Trash2,
Lock,
Clock,
Key,
CheckCircle2,
XCircle,
CircleX,
Fingerprint,
Activity,
Settings
@@ -63,7 +63,7 @@
async function handle_delete() {
if (!confirm('Are you sure you want to disable this user account?')) return;
const result = await delete_ae_obj_id__user({
api_cfg: $ae_api,
user_id: user.user_id_random,

View File

@@ -8,7 +8,7 @@
import { db_events } from '$lib/ae_events/db_events';
import { ae_loc } from '$lib/stores/ae_stores';
import { events_loc, events_sess } from '$lib/stores/ae_events_stores';
import { Key, Mail, Lock, User, ArrowRight, LoaderCircle, AlertCircle, CheckCircle2 } from 'lucide-svelte';
import { Key, Mail, Lock, User, ArrowRight, LoaderCircle, CircleAlert, CheckCircle2 } from 'lucide-svelte';
import { untrack } from 'svelte';
const exhibit_id = $derived(page.params.exhibit_id ?? '');
@@ -59,12 +59,12 @@
try {
// Determine raw JSON string
const raw_json = $lq__exhibit_obj?.license_li_json;
// Parse if string, otherwise use empty array
const licenses = typeof raw_json === 'string' ? JSON.parse(raw_json || '[]') : (Array.isArray(raw_json) ? raw_json : []);
const found = licenses.find((l: any) => l.email?.toLowerCase() === email.toLowerCase().trim());
if (found && found.passcode === user_passcode) {
// SUCCESS
complete_signin(found.email, 'licensed');
@@ -81,10 +81,10 @@
function complete_signin(key: string, type: string) {
status = 'success';
// Save to persistent store
if (!$events_loc.leads.auth_exhibit_kv) $events_loc.leads.auth_exhibit_kv = {};
$events_loc.leads.auth_exhibit_kv[exhibit_id] = {
key: key,
type: type,
@@ -102,10 +102,10 @@
</script>
<div class="exhibit-signin card p-6 variant-filled-surface shadow-xl border border-surface-500/20 space-y-6">
<!-- Tab Toggle -->
<div class="flex p-1 bg-surface-500/10 rounded-xl">
<button
<button
class="flex-1 flex items-center justify-center gap-2 py-2 rounded-lg text-sm font-bold transition-all"
class:bg-surface-100-900={signin_mode === 'passcode'}
class:shadow-sm={signin_mode === 'passcode'}
@@ -114,7 +114,7 @@
>
<Lock size="1.2em" /> Shared Code
</button>
<button
<button
class="flex-1 flex items-center justify-center gap-2 py-2 rounded-lg text-sm font-bold transition-all"
class:bg-surface-100-900={signin_mode === 'licensed'}
class:shadow-sm={signin_mode === 'licensed'}
@@ -127,17 +127,17 @@
<!-- Forms -->
<form onsubmit={(e) => { e.preventDefault(); handle_signin(); }} class="space-y-4">
{#if signin_mode === 'passcode'}
<div class="space-y-2 animate-in fade-in slide-in-from-left-2">
<label class="label">
<span class="text-[10px] uppercase font-bold opacity-50 ml-1 tracking-widest">Booth Passcode</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-soft rounded-xl overflow-hidden border border-surface-500/20">
<div class="input-group-shim"><Key size="1.2em" /></div>
<input
type="text"
bind:value={passcode}
placeholder="Enter shared code..."
<input
type="text"
bind:value={passcode}
placeholder="Enter shared code..."
class="bg-transparent font-mono tracking-[0.3em] font-bold text-center"
autocomplete="off"
/>
@@ -150,10 +150,10 @@
<span class="text-[10px] uppercase font-bold opacity-50 ml-1 tracking-widest">Email Address</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-soft rounded-xl overflow-hidden border border-surface-500/20">
<div class="input-group-shim"><Mail size="1.2em" /></div>
<input
type="email"
bind:value={email}
placeholder="your@email.com"
<input
type="email"
bind:value={email}
placeholder="your@email.com"
class="bg-transparent"
/>
</div>
@@ -163,10 +163,10 @@
<span class="text-[10px] uppercase font-bold opacity-50 ml-1 tracking-widest">Personal Passcode</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-soft rounded-xl overflow-hidden border border-surface-500/20">
<div class="input-group-shim"><Key size="1.2em" /></div>
<input
type="text"
bind:value={user_passcode}
placeholder="Your code..."
<input
type="text"
bind:value={user_passcode}
placeholder="Your code..."
class="bg-transparent font-mono font-bold"
autocomplete="off"
/>
@@ -177,13 +177,13 @@
{#if status === 'error'}
<div class="p-3 rounded-lg variant-soft-error flex items-start gap-3 animate-shake">
<AlertCircle size="1.2em" class="shrink-0 mt-0.5" />
<CircleAlert size="1.2em" class="shrink-0 mt-0.5" />
<p class="text-xs font-bold leading-tight">{error_msg}</p>
</div>
{/if}
<button
type="submit"
<button
type="submit"
class="btn btn-lg variant-filled-primary w-full font-bold shadow-lg shadow-primary-500/20 group"
disabled={status === 'submitting'}
>

View File

@@ -11,7 +11,7 @@
import { events_func } from '$lib/ae_events_functions';
import Element_qr_scanner_v2 from '$lib/element_qr_scanner_v2.svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { LoaderCircle, UserPlus, CheckCircle, AlertCircle, Eye } from 'lucide-svelte';
import { LoaderCircle, UserPlus, CheckCircle, CircleAlert, Eye } from 'lucide-svelte';
import type { ae_EventBadge } from '$lib/types/ae_types';
interface Props {
@@ -28,7 +28,7 @@
.where('event_exhibit_id')
.equals(exhibit_id)
.toArray();
const map = new Map();
leads.forEach(l => {
const b_id = l.event_badge_id_random || l.event_badge_id?.toString();
@@ -50,7 +50,7 @@
if (obj && obj.type === 'event_badge' && obj.id) {
start_qr_scanner = false;
// Check if already exists
if ($existing_leads_map?.has(obj.id)) {
scanning_status = 'already_added';
@@ -58,7 +58,7 @@
} else {
scanning_status = 'found';
}
// Load full badge info
try {
found_badge = await events_func.load_ae_obj_id__event_badge({
@@ -77,9 +77,9 @@
async function confirm_add_lead() {
if (!found_badge || !found_badge.event_badge_id_random) return;
scanning_status = 'adding';
// Use the actual signed-in licensed user's email
const user_email = $events_loc.leads.auth_exhibit_kv?.[exhibit_id]?.key || 'shared_passcode';
@@ -95,7 +95,7 @@
if (result) {
scanning_status = 'success';
if (on_lead_added) on_lead_added(found_badge);
// Auto-reset after 2 seconds to scan next
setTimeout(reset_scanner, 2000);
}
@@ -123,7 +123,7 @@
<div class="absolute inset-0 pointer-events-none border-2 border-primary-500/50 m-8 sm:m-12 rounded-lg animate-pulse"></div>
</div>
<p class="text-center opacity-70 italic text-sm">Point camera at the badge QR code</p>
{:else if scanning_status === 'already_added'}
<div class="card p-6 w-full max-w-md space-y-4 variant-soft-secondary shadow-xl border-2 border-secondary-500 animate-in zoom-in">
<div class="text-center space-y-2">
@@ -132,17 +132,17 @@
<p class="text-xl font-bold">{found_badge?.full_name || 'Attendee'}</p>
<p class="opacity-70 text-sm">This attendee is already in your leads list.</p>
</div>
<a
<a
href={`/events/${page.params.event_id}/leads/exhibit/${exhibit_id}/lead/${existing_tracking_id}`}
class="btn btn-xl w-full variant-filled-secondary font-bold py-6"
>
<Eye size="1.5em" class="mr-2" />
View Lead Details
</a>
<button
type="button"
<button
type="button"
class="btn btn-sm w-full opacity-50"
onclick={reset_scanner}
>
@@ -156,9 +156,9 @@
<h3 class="h3 font-bold">{found_badge?.full_name || 'Badge Found'}</h3>
<p class="opacity-70">{found_badge?.affiliations || ''}</p>
</div>
<button
type="button"
<button
type="button"
class="btn btn-xl w-full preset-filled-primary font-bold py-6"
disabled={scanning_status === 'adding'}
onclick={confirm_add_lead}
@@ -171,9 +171,9 @@
Add as Lead
{/if}
</button>
<button
type="button"
<button
type="button"
class="btn btn-sm w-full opacity-50"
disabled={scanning_status === 'adding'}
onclick={reset_scanner}
@@ -194,7 +194,7 @@
{:else if scanning_status === 'error'}
<div class="card p-6 w-full max-w-md flex flex-col items-center space-y-4 variant-soft-error">
<AlertCircle size="3em" class="text-error-500" />
<CircleAlert size="3em" class="text-error-500" />
<p class="text-center font-bold">{error_msg}</p>
<button type="button" class="btn btn-sm preset-filled-error" onclick={reset_scanner}>
Try Again

View File

@@ -193,7 +193,7 @@
>
{#await ae_promises.upload__hosted_file_obj}
<div class="text-lg flex flex-row gap-1 items-center justify-center">
<Lucide.Loader2 class="animate-spin m-1" />
<Lucide.LoaderCircle class="animate-spin m-1" />
<span class="">
Uploading
{#if $ae_sess.api_upload_kv[task_id]}
@@ -279,7 +279,7 @@
$events_sess.files.status__file_list != 'ready'}
>
{#await ae_promises.upload__hosted_file_obj}
<Lucide.Loader2 class="animate-spin m-1" />
<Lucide.LoaderCircle class="animate-spin m-1" />
<span class="">
{#if $ae_sess.api_upload_kv[task_id]}
{$ae_sess.api_upload_kv[task_id].percent_completed}%

View File

@@ -4,7 +4,7 @@
* Modernized Journals Index View
* Focus: Simplicity for regular users, power tools for edit mode.
*/
import { onMount } from 'svelte';
// import { onMount } from 'svelte';
import { goto } from '$app/navigation';
// *** Icons
@@ -13,7 +13,7 @@
SquareLibrary,
Wrench,
FileUp,
Loader2,
LoaderCircle,
Sparkles
} from 'lucide-svelte';
@@ -31,10 +31,10 @@
} from '$lib/ae_journals/ae_journals_stores';
// *** Components
import AeCompModalJournalConfig from './ae_comp__modal_journal_config.svelte';
import AE_Comp_Modal_Journal_Config from './ae_comp__modal_journal_config.svelte';
import Journal_obj_li from './ae_comp__journal_obj_li.svelte';
import AeCompJournalEntryQuickAdd from './ae_comp__journal_entry_quick_add.svelte';
import AeCompModalJournalImport from './ae_comp__modal_journal_import.svelte';
import AE_Comp_Journal_Entry_Quick_Add from './ae_comp__journal_entry_quick_add.svelte';
import AE_Comp_Modal_Journal_Import from './ae_comp__modal_journal_import.svelte';
interface Props {
data: any;
@@ -119,9 +119,9 @@
<section class="w-full max-w-2xl">
<div class="relative group">
<div
class="absolute -inset-1 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"
class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"
></div>
<AeCompJournalEntryQuickAdd
<AE_Comp_Journal_Entry_Quick_Add
journals_li={$lq__journal_obj_li}
class="relative shadow-2xl rounded-xl overflow-hidden border border-surface-500/10 bg-surface-50 dark:bg-surface-900"
/>
@@ -176,7 +176,7 @@
<div
class="flex flex-col items-center justify-center p-20 gap-4 opacity-50"
>
<Loader2 size="3em" class="animate-spin" />
<LoaderCircle size="3em" class="animate-spin" />
<p class="text-xl font-bold">Accessing Brain...</p>
</div>
{:else if $lq__journal_obj_li.length > 0}
@@ -215,6 +215,7 @@
>
<div class="p-2 space-y-4">
<div class="space-y-1">
<!-- svelte-ignore a11y_label_has_associated_control -->
<label class="label text-sm font-bold opacity-75"
>Journal Name</label
>
@@ -226,6 +227,7 @@
/>
</div>
<div class="space-y-1">
<!-- svelte-ignore a11y_label_has_associated_control -->
<label class="label text-sm font-bold opacity-75"
>Type Code</label
>
@@ -255,12 +257,12 @@
{/if}
{#if $journals_sess.show__modal__journals_config}
<AeCompModalJournalConfig
<AE_Comp_Modal_Journal_Config
show={$journals_sess.show__modal__journals_config}
/>
{/if}
<AeCompModalJournalImport
<AE_Comp_Modal_Journal_Import
bind:open={show_import_modal}
on_close={() => (show_import_modal = false)}
on_import_complete={() => {}}

View File

@@ -15,7 +15,7 @@
ChevronLeft,
CircleCheck,
CircleX,
Loader2,
LoaderCircle,
RefreshCw
} from 'lucide-svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -137,7 +137,7 @@
<RefreshCw size="1em" />
</button>
{#if $journals_loc.entry.auto_save}
{#if save_status === 'saving'}<Loader2
{#if save_status === 'saving'}<LoaderCircle
size="1em"
class="animate-spin text-primary-500"
/>

View File

@@ -12,7 +12,7 @@
Download,
Paperclip,
ExternalLink,
Loader2,
LoaderCircle,
RefreshCw
} from 'lucide-svelte';

View File

@@ -8,7 +8,7 @@
*/
// *** Import Svelte core
import { goto } from '$app/navigation';
// import { goto } from '$app/navigation';
// *** Import secondary libraries
import { marked } from 'marked';
@@ -25,16 +25,16 @@
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { decrypt_journal_entry } from '$lib/ae_journals/ae_journals_decryption';
import AeCompJournalEntryEditor from './ae_comp__journal_entry_editor.svelte';
import AeCompJournalEntryHeader from './ae_comp__journal_entry_header.svelte';
import AeCompJournalEntryMetadata from './ae_comp__journal_entry_metadata.svelte';
import AeCompJournalEntryAiTools from './ae_comp__journal_entry_ai_tools.svelte';
import AeCompJournalEntryObjFileLi from './ae_comp__journal_entry_obj_file_li.svelte';
import AeCompModalJournalEntryAppend from './ae_comp__modal_journal_entry_append.svelte';
import AeCompModalJournalEntryConfig from './ae_comp__modal_journal_entry_config.svelte';
import AE_Comp_Journal_Entry_Editor from './ae_comp__journal_entry_editor.svelte';
import AE_Comp_Journal_Entry_Header from './ae_comp__journal_entry_header.svelte';
import AE_Comp_Journal_Entry_Metadata from './ae_comp__journal_entry_metadata.svelte';
import AE_Comp_Journal_Entry_AiTools from './ae_comp__journal_entry_ai_tools.svelte';
import AE_Comp_Journal_Entry_ObjFileLi from './ae_comp__journal_entry_obj_file_li.svelte';
import AE_Comp_Modal_Journal_Entry_Append from './ae_comp__modal_journal_entry_append.svelte';
import AE_Comp_Modal_Journal_Entry_Config from './ae_comp__modal_journal_entry_config.svelte';
// Icons
import { AlertCircle, XCircle, Loader2 } from 'lucide-svelte';
import { CircleAlert, CircleX, LoaderCircle } from 'lucide-svelte';
// *** Props
interface Props {
@@ -425,7 +425,7 @@
bind:clientHeight={$ae_loc.iframe_height_modal_body}
>
{#if $lq__journal_entry_obj && $lq__journal_obj}
<AeCompJournalEntryHeader
<AE_Comp_Journal_Entry_Header
entry={$lq__journal_entry_obj}
journal={$lq__journal_obj}
journals_li={$lq__journal_obj_li}
@@ -445,7 +445,7 @@
<div
class="flex items-center gap-4 text-error-700 dark:text-error-300 font-bold"
>
<AlertCircle size="2.5em" />
<CircleAlert size="2.5em" />
<span class="text-xl">{decryption_error}</span>
</div>
<button
@@ -453,7 +453,7 @@
class="btn btn-sm variant-filled-error shadow-lg font-bold"
onclick={() => (decryption_error = null)}
>
<XCircle size="1.2em" class="mr-2" /> Dismiss
<CircleX size="1.2em" class="mr-2" /> Dismiss
</button>
</div>
{/if}
@@ -465,7 +465,7 @@
] == 'current'}
>
<div class="absolute top-2 right-2 z-10">
<AeCompJournalEntryAiTools
<AE_Comp_Journal_Entry_AiTools
content={tmp_entry_obj.content}
bind:summary={tmp_entry_obj.summary}
on_save={() => update_journal_entry()}
@@ -473,7 +473,7 @@
/>
</div>
<AeCompJournalEntryEditor
<AE_Comp_Journal_Entry_Editor
entry={$lq__journal_entry_obj}
journal={$lq__journal_obj}
bind:tmp_entry_obj
@@ -485,16 +485,16 @@
/>
</section>
<AeCompJournalEntryObjFileLi
<AE_Comp_Journal_Entry_ObjFileLi
{log_lvl}
link_to_type="journal_entry"
link_to_id={$lq__journal_entry_obj.journal_entry_id}
{lq__journal_entry_obj}
/>
<AeCompJournalEntryMetadata entry={tmp_entry_obj as any} />
<AE_Comp_Journal_Entry_Metadata entry={tmp_entry_obj as any} />
<AeCompModalJournalEntryAppend
<AE_Comp_Modal_Journal_Entry_Append
bind:open={show_append_modal}
journal_entry={$lq__journal_entry_obj}
journal_config={$lq__journal_obj?.cfg_json}
@@ -506,7 +506,7 @@
{log_lvl}
/>
<AeCompModalJournalEntryConfig
<AE_Comp_Modal_Journal_Entry_Config
bind:show={show_config_modal}
entry={$lq__journal_entry_obj}
journal={$lq__journal_obj}
@@ -528,7 +528,7 @@
<div
class="p-20 text-center opacity-50 flex flex-col items-center gap-4"
>
<Loader2 class="animate-spin" size="4em" />
<LoaderCircle class="animate-spin" size="4em" />
<span class="text-2xl font-bold">Loading Journal Entry...</span>
</div>
{/if}

View File

@@ -3,7 +3,7 @@
import {
Upload,
FileText,
AlertCircle,
CircleAlert,
Check,
X,
RefreshCw

View File

@@ -22,10 +22,10 @@
onMount(async () => {
// Load the large file specifically first
large_file_obj = await load_ae_obj_id__hosted_file({
api_cfg: $ae_api,
large_file_obj = await load_ae_obj_id__hosted_file({
api_cfg: $ae_api,
hosted_file_id: LARGE_FILE_ID,
log_lvl: 1
log_lvl: 1
});
// Fallback for large file if API doesn't have it (for UI testing)
@@ -39,17 +39,17 @@
};
}
const promises = test_ids.map(id =>
load_ae_obj_id__hosted_file({
api_cfg: $ae_api,
const promises = test_ids.map(id =>
load_ae_obj_id__hosted_file({
api_cfg: $ae_api,
hosted_file_id: id,
log_lvl: 1
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',
@@ -85,7 +85,7 @@
<div class="flex items-center gap-3">
<span class="text-[10px] font-bold uppercase opacity-50">Direct Download</span>
<button
<button
class="btn btn-sm {test_direct_download ? 'variant-filled-primary' : 'variant-soft-surface'}"
onclick={() => test_direct_download = !test_direct_download}
>
@@ -108,9 +108,9 @@
{/if}
</div>
</header>
<p class="text-sm opacity-80 italic">
Use this file to verify the <strong>percentage counter</strong> and <strong>loading spinner</strong>.
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>
@@ -125,9 +125,9 @@
<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
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={LARGE_FILE_ID}
hosted_file_obj={large_file_obj}
show_direct_download={test_direct_download}
@@ -142,10 +142,10 @@
<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" />
<Lucide.LoaderCircle class="animate-spin" />
<span>Loading test metadata gallery...</span>
</div>
{:else}
@@ -159,11 +159,11 @@
</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
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={file.id}
hosted_file_obj={file}
show_direct_download={test_direct_download}
@@ -172,10 +172,10 @@
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
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={file.id}
hosted_file_obj={file}
show_direct_download={test_direct_download}
@@ -184,10 +184,10 @@
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
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={file.id}
hosted_file_obj={file}
show_direct_download={test_direct_download}
@@ -196,10 +196,10 @@
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
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={file.id}
hosted_file_obj={file}
show_direct_download={test_direct_download}
@@ -209,10 +209,10 @@
/>
</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
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={file.id}
hosted_file_obj={file}
show_direct_download={test_direct_download}
@@ -240,7 +240,7 @@
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
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={null}
hosted_file_obj={null}
/>