From b2f695c84603b5721f55cf91f58476019c3a4098 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 15 Jan 2026 18:01:52 -0500
Subject: [PATCH] feat(core): standardized search UI and improved form padding

- Standardized User Management search to match People Management style.
- Added 'p-3' padding to main search inputs and 'p-2' to selects for better visual clarity.
- Improved search icon spacing with enhanced shim padding (!px-4).
- Applied consistent padding enhancements to Account, Site, and User detail pages.
- Standardized 'Go' button prominence across search sections.
---
 .../core/accounts/[account_id]/+page.svelte   | 46 +++++++++----------
 .../core/people/ae_comp__person_search.svelte | 10 ++--
 src/routes/core/sites/[site_id]/+page.svelte  | 34 +++++++-------
 src/routes/core/users/+page.svelte            |  6 +--
 src/routes/core/users/[user_id]/+page.svelte  |  8 ++--
 5 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/src/routes/core/accounts/[account_id]/+page.svelte b/src/routes/core/accounts/[account_id]/+page.svelte
index 3f7c3362..d5ec509a 100644
--- a/src/routes/core/accounts/[account_id]/+page.svelte
+++ b/src/routes/core/accounts/[account_id]/+page.svelte
@@ -5,7 +5,7 @@
     import { editable_fields__account } from '$lib/ae_core/ae_core__account.editable_fields';
     import { ae_api, ae_loc } from '$lib/stores/ae_stores';
     import { goto } from '$app/navigation';
-    import { Save, Trash2, ArrowLeft, Building } from 'lucide-svelte';
+    import { Save, Trash2, ArrowLeft, Building, Settings, Activity, Info } from 'lucide-svelte';
 
     let account_id = $page.params.account_id;
     let account: any = $state(null);
@@ -105,64 +105,64 @@
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
-                    <span class="text-primary-500">◆</span> Basic Information
+                    <Info size={18} class="text-primary-500" /> Basic Information
                 </h3>
                 <div class="space-y-4">
                     <div class="space-y-1">
-                        <label class="label text-xs font-bold opacity-75">Account Name</label>
-                        <input class="input variant-filled-surface rounded-lg p-2" type="text" bind:value={account.name} />
+                        <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Name</label>
+                        <input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={account.name} />
                     </div>
                     <div class="space-y-1">
-                        <label class="label text-xs font-bold opacity-75">Short Name</label>
-                        <input class="input variant-filled-surface rounded-lg p-2" type="text" bind:value={account.short_name} />
+                        <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Short Name</label>
+                        <input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={account.short_name} />
                     </div>
                     <div class="space-y-1">
-                        <label class="label text-xs font-bold opacity-75">Account Code</label>
-                        <input class="input variant-filled-surface rounded-lg font-mono p-2" type="text" bind:value={account.code} />
+                        <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Code</label>
+                        <input class="input variant-filled-surface rounded-lg font-mono p-3" type="text" bind:value={account.code} />
                     </div>
                     <div class="space-y-1">
-                        <label class="label text-xs font-bold opacity-75">Description</label>
-                        <textarea class="textarea variant-filled-surface rounded-lg p-2" rows="3" bind:value={account.description}></textarea>
+                        <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Description</label>
+                        <textarea class="textarea variant-filled-surface rounded-lg p-3" rows="3" bind:value={account.description}></textarea>
                     </div>
                 </div>
             </div>
 
             <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
-                    <span class="text-secondary-500">◆</span> Settings & Status
+                    <Settings size={18} class="text-secondary-500" /> Settings & Status
                 </h3>
                 <div class="flex flex-col gap-4 py-2">
-                    <label class="flex items-center space-x-2 cursor-pointer">
+                    <label class="flex items-center space-x-3 cursor-pointer group">
                         <input class="checkbox" type="checkbox" bind:checked={account.enable} />
-                        <span class="text-sm font-medium">Enabled</span>
+                        <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Enabled</span>
                     </label>
-                    <label class="flex items-center space-x-2 cursor-pointer">
+                    <label class="flex items-center space-x-3 cursor-pointer group">
                         <input class="checkbox" type="checkbox" bind:checked={account.hide} />
-                        <span class="text-sm font-medium">Hidden</span>
+                        <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden</span>
                     </label>
-                    <label class="flex items-center space-x-2 cursor-pointer">
+                    <label class="flex items-center space-x-3 cursor-pointer group">
                         <input class="checkbox" type="checkbox" bind:checked={account.priority} />
-                        <span class="text-sm font-medium">Priority Account</span>
+                        <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Priority Account</span>
                     </label>
                 </div>
                 <div class="space-y-4 border-t border-surface-500/30 pt-4">
                     <div class="space-y-1">
-                        <label class="label text-xs font-bold opacity-75">Group</label>
-                        <input class="input variant-filled-surface rounded-lg p-2" type="text" bind:value={account.group} />
+                        <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Group</label>
+                        <input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={account.group} />
                     </div>
                     <div class="space-y-1">
-                        <label class="label text-xs font-bold opacity-75">Sort Order</label>
-                        <input class="input variant-filled-surface rounded-lg p-2" type="number" bind:value={account.sort} />
+                        <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Sort Order</label>
+                        <input class="input variant-filled-surface rounded-lg p-3" type="number" bind:value={account.sort} />
                     </div>
                 </div>
             </div>
 
             <div class="card p-6 space-y-4 md:col-span-2 shadow-xl variant-glass-surface border border-surface-500/10">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
-                    <span class="text-tertiary-500">◆</span> Internal Notes
+                    <Activity size={18} class="text-tertiary-500" /> Internal Notes
                 </h3>
                 <div class="space-y-1">
-                    <textarea class="textarea variant-filled-surface rounded-lg p-2" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
+                    <textarea class="textarea variant-filled-surface rounded-lg p-3" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
                 </div>
             </div>
         </div>
diff --git a/src/routes/core/people/ae_comp__person_search.svelte b/src/routes/core/people/ae_comp__person_search.svelte
index 028b6968..36304ea1 100644
--- a/src/routes/core/people/ae_comp__person_search.svelte
+++ b/src/routes/core/people/ae_comp__person_search.svelte
@@ -47,15 +47,15 @@
         <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 People</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"><Search size={18} class="opacity-50" /></div>
+                <div class="input-group-shim !px-4"><Search size={18} class="opacity-50" /></div>
                 <input 
-                    class="bg-transparent border-0 ring-0 focus:ring-0"
+                    class="bg-transparent border-0 ring-0 focus:ring-0 p-3"
                     type="search" 
                     bind:value={qry_str} 
                     placeholder="Search by name, email, or ID..." 
                     onkeydown={(e) => e.key === 'Enter' && handle_search()} 
                 />
-                <button class="variant-filled-primary font-bold px-6 hover:brightness-110 transition-all" onclick={handle_search} disabled={loading}>
+                <button class="variant-filled-primary font-bold px-8 hover:brightness-110 transition-all border-l border-surface-500/20" onclick={handle_search} disabled={loading}>
                     {#if loading}
                         <span class="animate-spin mr-1">⏳</span>
                     {:else}
@@ -68,7 +68,7 @@
         <div class="grid grid-cols-2 gap-4">
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Status</label>
-                <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20" bind:value={qry_enabled} onchange={handle_search}>
+                <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={handle_search}>
                     <option value="all">All Records</option>
                     <option value="enabled">Enabled Only</option>
                     <option value="not_enabled">Disabled Only</option>
@@ -77,7 +77,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</label>
-                <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20" bind:value={qry_hidden} onchange={handle_search}>
+                <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={handle_search}>
                     <option value="all">All Visible</option>
                     <option value="not_hidden">Publicly Visible</option>
                     <option value="hidden">System Hidden</option>
diff --git a/src/routes/core/sites/[site_id]/+page.svelte b/src/routes/core/sites/[site_id]/+page.svelte
index 50fe0c3c..4fffcca6 100644
--- a/src/routes/core/sites/[site_id]/+page.svelte
+++ b/src/routes/core/sites/[site_id]/+page.svelte
@@ -14,7 +14,7 @@
     import { editable_fields__site_domain } from '$lib/ae_core/ae_core__site_domain.editable_fields';
     import { ae_api, ae_loc } from '$lib/stores/ae_stores';
     import { goto } from '$app/navigation';
-    import { Save, Trash2, ArrowLeft, Globe, Plus, ExternalLink, Key, Settings, Activity } from 'lucide-svelte';
+    import { Save, Trash2, ArrowLeft, Globe, Plus, ExternalLink, Key, Settings, Activity, Info } from 'lucide-svelte';
 
     let site_id = $page.params.site_id;
     let site: any = $state(null);
@@ -139,20 +139,20 @@
                     </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">Site Name</label>
-                            <input class="input variant-filled-surface rounded-lg" type="text" bind:value={site.name} />
+                            <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Site Name</label>
+                            <input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={site.name} />
                         </div>
                         <div class="space-y-1">
-                            <label class="label text-xs font-bold opacity-75">Site Code</label>
-                            <input class="input variant-filled-surface rounded-lg font-mono" type="text" bind:value={site.code} />
+                            <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Site Code</label>
+                            <input class="input variant-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.code} />
                         </div>
                         <div class="space-y-1 md:col-span-2">
-                            <label class="label text-xs font-bold opacity-75">Tagline</label>
-                            <input class="input variant-filled-surface rounded-lg" type="text" bind:value={site.tagline} />
+                            <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Tagline</label>
+                            <input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={site.tagline} />
                         </div>
                         <div class="space-y-1 md:col-span-2">
-                            <label class="label text-xs font-bold opacity-75">Description</label>
-                            <textarea class="textarea variant-filled-surface rounded-lg" rows="2" bind:value={site.description}></textarea>
+                            <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Description</label>
+                            <textarea class="textarea variant-filled-surface rounded-lg p-3" rows="2" bind:value={site.description}></textarea>
                         </div>
                     </div>
                 </div>
@@ -162,14 +162,14 @@
                         <Key size={18} class="text-secondary-500" /> Access Control
                     </h3>
                     <div class="flex flex-col gap-4">
-                        <label class="flex items-center space-x-2 cursor-pointer">
+                        <label class="flex items-center space-x-2 cursor-pointer group">
                             <input class="checkbox" type="checkbox" bind:checked={site.restrict_access} />
-                            <span class="text-sm font-medium">Restrict Access</span>
+                            <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Restrict Access</span>
                         </label>
                         {#if site.restrict_access}
                             <div class="space-y-1 max-w-md animate-fade-in">
-                                <label class="label text-xs font-bold opacity-75">Access Key</label>
-                                <input class="input variant-filled-surface rounded-lg font-mono" type="text" bind:value={site.access_key} />
+                                <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Access Key</label>
+                                <input class="input variant-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.access_key} />
                             </div>
                         {/if}
                     </div>
@@ -224,13 +224,13 @@
                         <Activity size={18} class="text-error-500" /> System Status
                     </h3>
                     <div class="space-y-4 py-2">
-                        <label class="flex items-center space-x-2 cursor-pointer">
+                        <label class="flex items-center space-x-3 cursor-pointer group">
                             <input class="checkbox" type="checkbox" bind:checked={site.enable} />
-                            <span class="text-sm font-medium">Site Enabled</span>
+                            <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Site Enabled</span>
                         </label>
-                        <label class="flex items-center space-x-2 cursor-pointer">
+                        <label class="flex items-center space-x-3 cursor-pointer group">
                             <input class="checkbox" type="checkbox" bind:checked={site.hide} />
-                            <span class="text-sm font-medium">Hidden from Public</span>
+                            <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden from Public</span>
                         </label>
                     </div>
                 </div>
diff --git a/src/routes/core/users/+page.svelte b/src/routes/core/users/+page.svelte
index 7c73208c..d1c7694e 100644
--- a/src/routes/core/users/+page.svelte
+++ b/src/routes/core/users/+page.svelte
@@ -84,15 +84,15 @@
             <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"><Search size={18} class="opacity-50" /></div>
+                    <div class="input-group-shim !px-4"><Search size={18} class="opacity-50" /></div>
                     <input 
-                        class="bg-transparent border-0 ring-0 focus:ring-0 p-2"
+                        class="bg-transparent border-0 ring-0 focus:ring-0 p-3"
                         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-6 hover:brightness-110 transition-all" onclick={load_users} disabled={loading}>
+                    <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}>
                         {#if loading}
                             <span class="animate-spin mr-1">⏳</span>
                         {:else}
diff --git a/src/routes/core/users/[user_id]/+page.svelte b/src/routes/core/users/[user_id]/+page.svelte
index 53a1bb1e..ec2e622a 100644
--- a/src/routes/core/users/[user_id]/+page.svelte
+++ b/src/routes/core/users/[user_id]/+page.svelte
@@ -114,17 +114,17 @@
                 <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">Display Name</label>
-                        <input class="input variant-filled-surface rounded-lg" type="text" bind:value={user.name} placeholder="Full Name" />
+                        <input class="input variant-filled-surface rounded-lg p-2" type="text" bind:value={user.name} placeholder="Full Name" />
                     </div>
                     <div class="space-y-1">
                         <label class="label text-xs font-bold opacity-75">Email Address</label>
-                        <input class="input variant-filled-surface rounded-lg" type="email" bind:value={user.email} />
+                        <input class="input variant-filled-surface rounded-lg p-2" 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">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-shim"><Fingerprint size={16} /></div>
-                            <input class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60" type="text" bind:value={user.username} disabled />
+                            <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" type="text" bind:value={user.username} disabled />
                         </div>
                         <p class="text-[10px] opacity-50 mt-1 italic uppercase tracking-tighter">Username changes are currently restricted.</p>
                     </div>