fix(core): comprehensive search UI redesign and module modernization

- Rebuilt Users and People search from scratch using robust flexbox (grow, min-w-100px, whitespace-nowrap).
- Added search functionality and card-grid layout to Address and Contact management lists.
- Modernized detail pages for Addresses and Contacts with standardized headers and iconography.
- Unified form padding (p-3 for inputs, p-2 for selects) across all Core modules.
- Fixed variable hoisting and missing icon imports in Address components.
This commit is contained in:
Scott Idem
2026-01-15 18:17:44 -05:00
parent b2f695c846
commit 156cb79a24
6 changed files with 392 additions and 255 deletions

View File

@@ -83,20 +83,22 @@
<div class="flex flex-wrap gap-6 items-end">
<div class="flex-1 min-w-[280px] space-y-1">
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Users</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] variant-filled-surface rounded-lg overflow-hidden border border-surface-500/20 shadow-inner">
<div class="input-group-shim !px-4"><Search size={18} class="opacity-50" /></div>
<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">
<div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
<Search size={18} class="opacity-50" />
</div>
<input
class="bg-transparent border-0 ring-0 focus:ring-0 p-3"
class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
type="search"
bind:value={qry_str}
placeholder="Search username or email..."
onkeydown={(e) => e.key === 'Enter' && load_users()}
/>
<button class="variant-filled-primary font-bold px-8 hover:brightness-110 transition-all border-l border-surface-500/20" onclick={load_users} disabled={loading}>
<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}>
{#if loading}
<span class="animate-spin mr-1"></span>
<span class="animate-spin text-xl"></span>
{:else}
Go
<span class="whitespace-nowrap tracking-wide">Go</span>
{/if}
</button>
</div>