Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: badge code_to_icon refactor + core variant-* → preset-* migration

Browse Source 
badge ae_comp__badge_obj_view_v2.svelte:
- Replace FA HTML string dict (code_to_html) with Lucide component map
  (code_to_icon) — no FontAwesome dependency for dietary/option icons
- option_1 maps: Biohazard (generic/allergy), Utensils (dietary), Bone,
  Fish, Carrot for specific diets
- option_2 maps: Asterisk (generic flag), Hand (first-time attendee)
- Template: replace {@html option_other_*} with {@const Icon}<Icon /> pattern
- Back-of-badge: shows text label + inline icon

core/ (21 files):
- variant-soft-* → preset-tonal-* (6 variants)
- variant-filled-* → preset-filled-* (6 variants)
- variant-glass-surface → preset-tonal-surface (Skeleton v4 has no glass)
- bare variant-soft → preset-tonal-surface

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-16 14:42:28 -04:00
parent 37c9d830f6
commit 80baaa9d91
22 changed files with 289 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/routes/core/addresses/+page.svelte
View File

@@ -52,7 +52,7 @@
<h1 class="h2 font-black tracking-tight">Address Management</h1>
</div>
<button
class="btn btn-sm variant-filled-primary font-bold shadow-lg"
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
onclick={() => show_add_form = !show_add_form}
>
{#if show_add_form}
@@ -78,7 +78,7 @@
</div>
{/if}
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10">
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
<div class="max-w-2xl space-y-1">
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Directory</span>
<div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
@@ -91,7 +91,7 @@
bind:value={qry_str}
placeholder="Search by city, state, organization, or street..."
/>
<button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_addresses} disabled={loading}>
<button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_addresses} disabled={loading}>
{#if loading}
<span class="animate-spin text-xl">⏳</span>
{:else}
@@ -107,30 +107,30 @@
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
</div>
{:else if filtered_li.length === 0}
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
<div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
<MapPinned size={48} class="mx-auto mb-4 opacity-20" />
<h3 class="h3 font-bold opacity-50">No Addresses Found</h3>
<p class="opacity-60 max-w-xs mx-auto mt-2">Addresses associated with this account will appear here.</p>
</div>
{:else}
<div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
<ListFilter size={18} class="text-secondary-500" />
Linked Addresses
<span class="badge variant-soft-secondary ml-auto">{filtered_li.length} entries</span>
<span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} entries</span>
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{#each filtered_li as addr (addr.address_id_random)}
<div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
<div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
<div class="absolute top-4 right-4">
<span class="badge {addr.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
<span class="badge {addr.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
{addr.enable ? 'Active' : 'Disabled'}
</span>
</div>
<div class="flex items-center gap-3">
<div class="avatar variant-filled-primary w-10 h-10 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
<div class="avatar preset-filled-primary w-10 h-10 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
<MapPin size={20} />
</div>
<div class="pr-12">
@@ -152,7 +152,7 @@
</div>
</div>
<a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/addresses/{addr.address_id_random}">
<a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/addresses/{addr.address_id_random}">
View Details
</a>
</div>

22
src/routes/core/addresses/[address_id]/+page.svelte
View File

@@ -50,7 +50,7 @@
<div class="container mx-auto p-4 space-y-6">
<header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
<div class="flex items-center gap-4">
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/addresses">
<a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/addresses">
<ArrowLeft size={16} />
</a>
<div class="flex items-center gap-3">
@@ -64,14 +64,14 @@
</div>
</div>
<div class="flex gap-2">
<button class="btn btn-sm variant-soft-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
<button class="btn btn-sm preset-tonal-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
{#if is_editing}
<Eye size={16} class="mr-2" /> View Mode
{:else}
<Edit size={16} class="mr-2" /> Edit Mode
{/if}
</button>
<button class="btn btn-sm variant-soft-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
<button class="btn btn-sm preset-tonal-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
<Trash2 size={16} class="mr-2" /> Delete
</button>
</div>
@@ -96,7 +96,7 @@
{:else}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in">
<div class="lg:col-span-2 space-y-6">
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<MapPinned size={20} class="text-primary-500" />
Location Information
@@ -132,12 +132,12 @@
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
<Globe size={10} /> Postal Code / Country
</p>
<p class="font-bold">{address.postal_code || '--'} / <span class="badge variant-soft-surface">{address.country_name || address.country || '--'}</span></p>
<p class="font-bold">{address.postal_code || '--'} / <span class="badge preset-tonal-surface">{address.country_name || address.country || '--'}</span></p>
</div>
</div>
</div>
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Activity size={20} class="text-secondary-500" />
Technical Details
@@ -168,7 +168,7 @@
</div>
<div class="space-y-6">
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<ShieldCheck size={20} class="text-warning-500" />
Visibility & Status
@@ -176,26 +176,26 @@
<div class="space-y-4">
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
<span class="text-sm font-bold opacity-75">Enabled</span>
<span class="badge {address.enable ? 'variant-filled-success' : 'variant-filled-error'} px-4 py-1 shadow-sm">
<span class="badge {address.enable ? 'preset-filled-success' : 'preset-filled-error'} px-4 py-1 shadow-sm">
{address.enable ? 'ACTIVE' : 'DISABLED'}
</span>
</div>
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
<span class="text-sm font-bold opacity-75">Hidden</span>
<span class="badge {address.hide ? 'variant-filled-warning' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
<span class="badge {address.hide ? 'preset-filled-warning' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
{address.hide ? 'YES' : 'NO'}
</span>
</div>
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
<span class="text-sm font-bold opacity-75">Priority</span>
<span class="badge {address.priority ? 'variant-filled-secondary' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
<span class="badge {address.priority ? 'preset-filled-secondary' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
{address.priority ? 'YES' : 'NO'}
</span>
</div>
</div>
</div>
<div class="card p-5 variant-soft-surface shadow-inner border border-surface-500/10 space-y-3">
<div class="card p-5 preset-tonal-surface shadow-inner border border-surface-500/10 space-y-3">
<p class="text-[10px] uppercase font-black opacity-40 tracking-widest border-b border-surface-500/20 pb-1">System Audit</p>
<div class="space-y-2 text-[10px] font-mono opacity-60">
<p class="flex justify-between"><span>ID:</span> <span class="text-primary-500 font-bold">{address.address_id_random}</span></p>

36
src/routes/core/addresses/ae_comp__address_form.svelte
View File

@@ -111,7 +111,7 @@
}
</script>
<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl variant-glass-surface">
<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
<header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
<h3 class="h3 flex items-center gap-2">
<MapPin size={24} />
@@ -119,11 +119,11 @@
</h3>
<div class="flex gap-2">
{#if onCancel}
<button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
<button type="button" class="btn btn-sm preset-tonal-surface" onclick={onCancel}>
<X size={16} class="mr-1" /> Cancel
</button>
{/if}
<button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
<button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
{#if is_loading}
<span class="animate-spin mr-2">⏳</span>
{:else}
@@ -135,7 +135,7 @@
</header>
{#if error_msg}
<aside class="alert variant-filled-error">
<aside class="alert preset-filled-error">
<div class="alert-message">
<p>{error_msg}</p>
</div>
@@ -149,27 +149,27 @@
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-attention-to">Attention To / Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-attention-to" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-attention-to" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-org-name">Organization Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-org-name" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-org-name" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-line-1">Address Line 1</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-1" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-1" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
</div>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-line-2">Line 2</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-2" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-2" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-line-3">Line 3</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-3" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-3" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
</div>
</div>
</fieldset>
@@ -181,22 +181,22 @@
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-city">City</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-city" type="text" bind:value={formData.city} required placeholder="Metropolis" />
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-city" type="text" bind:value={formData.city} required placeholder="Metropolis" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-state">State / Province</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-state" type="text" bind:value={formData.state_province} placeholder="NY" />
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-state" type="text" bind:value={formData.state_province} placeholder="NY" />
</div>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-postal">Postal Code</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-postal" type="text" bind:value={formData.postal_code} placeholder="12345" />
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-postal" type="text" bind:value={formData.postal_code} placeholder="12345" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-country">Country (Code)</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Globe size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-country" type="text" bind:value={formData.country} placeholder="USA" />
</div>
@@ -210,7 +210,7 @@
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-timezone">Timezone</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Clock size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-timezone" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
</div>
@@ -219,14 +219,14 @@
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-latitude">Latitude</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Navigation size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-latitude" type="text" bind:value={formData.latitude} placeholder="40.7128" />
</div>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-longitude">Longitude</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Navigation size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-longitude" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
</div>
@@ -255,13 +255,13 @@
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="addr-notes">Internal Notes</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-notes" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
<textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-notes" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
</div>
</fieldset>
</div>
<footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
<button type="submit" class="btn variant-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
<button type="submit" class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
{#if is_loading}
<span class="animate-spin mr-2">⏳</span>
{/if}