style: badge code_to_icon refactor + core variant-* → preset-* migration
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
@@ -71,12 +71,12 @@
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Digital Properties & Domains</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_add_site}>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_add_site}>
|
||||
<Plus size={16} class="mr-2" /> Add Site
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Sites</span>
|
||||
@@ -90,7 +90,7 @@
|
||||
bind:value={qry_str}
|
||||
placeholder="Search by name or code..."
|
||||
/>
|
||||
<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_sites} 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_sites} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
@@ -103,7 +103,7 @@
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_sites}>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_sites}>
|
||||
<option value="all">All Statuses</option>
|
||||
<option value="enabled">Enabled Only</option>
|
||||
<option value="not_enabled">Disabled Only</option>
|
||||
@@ -112,7 +112,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_sites}>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_sites}>
|
||||
<option value="all">All Visibility</option>
|
||||
<option value="not_hidden">Not Hidden Only</option>
|
||||
<option value="hidden">Hidden Only</option>
|
||||
@@ -127,33 +127,33 @@
|
||||
<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">
|
||||
<Globe size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Sites Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Sites for this account will appear here. Add your first site to get started.</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 Properties
|
||||
<span class="badge variant-soft-secondary ml-auto">{filtered_li.length} found</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} found</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each filtered_li as site (site.site_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 flex gap-1">
|
||||
{#if site.hide}
|
||||
<span class="badge variant-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
|
||||
<span class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
|
||||
{/if}
|
||||
<span class="badge {site.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
<span class="badge {site.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
{site.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<header class="flex items-center gap-3">
|
||||
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<Globe size={24} />
|
||||
</div>
|
||||
<div class="pr-12">
|
||||
@@ -173,7 +173,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/sites/{site.site_id_random}">
|
||||
<a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/sites/{site.site_id_random}">
|
||||
Manage Site
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user