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

30
src/routes/core/users/+page.svelte
View File

@@ -70,7 +70,7 @@
</div>
<h1 class="h2 font-black tracking-tight">User Management</h1>
</div>
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={() => show_add_form = !show_add_form}>
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={() => show_add_form = !show_add_form}>
{#if show_add_form}
<X size={16} class="mr-2" /> Cancel
{:else}
@@ -79,7 +79,7 @@
</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 Users</span>
@@ -94,7 +94,7 @@
placeholder="Search username or email..."
onkeydown={(e) => e.key === 'Enter' && load_users()}
/>
<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_users} 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_users} disabled={loading}>
{#if loading}
<span class="animate-spin text-xl">⏳</span>
{:else}
@@ -107,7 +107,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">Scope</span>
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_account_scope} onchange={load_users}>
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_account_scope} onchange={load_users}>
<option value="all">All (Current + Global)</option>
<option value="account">Account Only</option>
<option value="global">Global Only</option>
@@ -116,7 +116,7 @@
<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_users}>
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_users}>
<option value="all">All</option>
<option value="enabled">Enabled</option>
<option value="not_enabled">Disabled</option>
@@ -131,25 +131,25 @@
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
</div>
{:else if user_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">
<Fingerprint size={48} class="mx-auto mb-4 opacity-20" />
<h3 class="h3 font-bold opacity-50">No Users Found</h3>
<p class="opacity-60 max-w-xs mx-auto mt-2">Try adjusting your search or scope filters.</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" />
Directory Results
<span class="badge variant-soft-secondary ml-auto">{user_li.length} found</span>
<span class="badge preset-tonal-secondary ml-auto">{user_li.length} found</span>
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{#each user_li as user (user.user_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">
<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">
<header class="flex justify-between items-start">
<div class="flex items-center gap-3">
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
<User size={24} />
</div>
<div>
@@ -159,16 +159,16 @@
</div>
<div class="flex flex-col items-end gap-1">
{#if user.super}
<span class="badge variant-filled-error text-[8px] uppercase font-bold">Super</span>
<span class="badge preset-filled-error text-[8px] uppercase font-bold">Super</span>
{:else if user.manager}
<span class="badge variant-filled-warning text-[8px] uppercase font-bold">Manager</span>
<span class="badge preset-filled-warning text-[8px] uppercase font-bold">Manager</span>
{/if}
{#if !user.account_id && !user.account_id_random}
<span class="badge variant-soft-secondary text-[8px] uppercase font-bold flex items-center gap-1">
<span class="badge preset-tonal-secondary text-[8px] uppercase font-bold flex items-center gap-1">
<Globe size={8} /> Global
</span>
{:else}
<span class="badge variant-soft-primary text-[8px] uppercase font-bold flex items-center gap-1">
<span class="badge preset-tonal-primary text-[8px] uppercase font-bold flex items-center gap-1">
<Landmark size={8} /> Account
</span>
{/if}
@@ -186,7 +186,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/users/{user.user_id_random}">
<a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/users/{user.user_id_random}">
Manage User
</a>
</div>

32
src/routes/core/users/[user_id]/+page.svelte
View File

@@ -80,11 +80,11 @@
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
<div class="flex items-center gap-4">
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/users">
<a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/users">
<ArrowLeft size={16} />
</a>
<div class="flex items-center gap-3">
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
<UserIcon size={24} />
</div>
<div>
@@ -94,10 +94,10 @@
</div>
</div>
<div class="flex gap-2">
<button class="btn btn-sm variant-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={saving}>
<button class="btn btn-sm preset-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={saving}>
<Trash2 size={16} class="mr-2" /> Disable
</button>
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={saving}>
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={saving}>
{#if saving}
<span class="animate-spin mr-2">⏳</span>
{:else}
@@ -111,22 +111,22 @@
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Main Info -->
<div class="lg:col-span-2 space-y-6">
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<UserIcon size={18} class="text-primary-500" /> Basic Profile
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="user-display-name">Display Name</label>
<input class="input variant-filled-surface rounded-lg p-2" id="user-display-name" type="text" bind:value={user.name} placeholder="Full Name" />
<input class="input preset-filled-surface rounded-lg p-2" id="user-display-name" type="text" bind:value={user.name} placeholder="Full Name" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75" for="user-email">Email Address</label>
<input class="input variant-filled-surface rounded-lg p-2" id="user-email" type="email" bind:value={user.email} />
<input class="input preset-filled-surface rounded-lg p-2" id="user-email" type="email" bind:value={user.email} />
</div>
<div class="space-y-1 md:col-span-2">
<label class="label text-xs font-bold opacity-75" for="user-username">Username</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-soft rounded-lg overflow-hidden border border-surface-500/20">
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-tonal-surface rounded-lg overflow-hidden border border-surface-500/20">
<div class="input-group-shim !pl-4 !pr-0"><Fingerprint size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60 p-2" id="user-username" type="text" bind:value={user.username} disabled />
</div>
@@ -135,33 +135,33 @@
</div>
</div>
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<ShieldCheck size={18} class="text-secondary-500" /> System Permissions
</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<label class="flex items-center space-x-3 card p-4 variant-soft-error cursor-pointer border border-error-500/20 hover:variant-filled-error transition-all group">
<label class="flex items-center space-x-3 card p-4 preset-tonal-error cursor-pointer border border-error-500/20 hover:preset-filled-error transition-all group">
<input class="checkbox" type="checkbox" bind:checked={user.super} />
<div class="flex flex-col">
<span class="font-black uppercase text-xs tracking-widest">Super User</span>
<span class="text-[10px] opacity-70 group-hover:opacity-100">Full system override access</span>
</div>
</label>
<label class="flex items-center space-x-3 card p-4 variant-soft-warning cursor-pointer border border-warning-500/20 hover:variant-filled-warning transition-all group">
<label class="flex items-center space-x-3 card p-4 preset-tonal-warning cursor-pointer border border-warning-500/20 hover:preset-filled-warning transition-all group">
<input class="checkbox" type="checkbox" bind:checked={user.manager} />
<div class="flex flex-col">
<span class="font-black uppercase text-xs tracking-widest">Manager</span>
<span class="text-[10px] opacity-70 group-hover:opacity-100">Global account & user management</span>
</div>
</label>
<label class="flex items-center space-x-3 card p-4 variant-soft-primary cursor-pointer border border-primary-500/20 hover:variant-filled-primary transition-all group">
<label class="flex items-center space-x-3 card p-4 preset-tonal-primary cursor-pointer border border-primary-500/20 hover:preset-filled-primary transition-all group">
<input class="checkbox" type="checkbox" bind:checked={user.administrator} />
<div class="flex flex-col">
<span class="font-black uppercase text-xs tracking-widest">Administrator</span>
<span class="text-[10px] opacity-70 group-hover:opacity-100">Account-level administrative access</span>
</div>
</label>
<label class="flex items-center space-x-3 card p-4 variant-soft-secondary cursor-pointer border border-secondary-500/20 hover:variant-filled-secondary transition-all group">
<label class="flex items-center space-x-3 card p-4 preset-tonal-secondary cursor-pointer border border-secondary-500/20 hover:preset-filled-secondary transition-all group">
<input class="checkbox" type="checkbox" bind:checked={user.verified} />
<div class="flex flex-col">
<span class="font-black uppercase text-xs tracking-widest">Verified User</span>
@@ -174,7 +174,7 @@
<!-- Sidebar / Meta -->
<div class="space-y-6">
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Activity size={18} class="text-tertiary-500" /> Account Status
</h3>
@@ -194,7 +194,7 @@
</div>
</div>
<div class="card p-6 space-y-4 shadow-xl variant-soft-surface border border-surface-500/10">
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Lock size={18} class="text-surface-500" /> Linking Info
</h3>
@@ -218,7 +218,7 @@
</div>
</div>
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Clock size={18} class="text-surface-500" /> Timestamps
</h3>