Unify UI workflows and streamline fleet management

src/lib/ui/components/primitives/EmptyState.svelte

@@ -6,20 +6,15 @@
         description?: string | null;
         icon?: Snippet;
         actions?: Snippet;
+        spacious?: boolean;
     }
 
-    let { title, description = null, icon, actions }: Props = $props();
+    let { title, description = null, icon, actions, spacious = false }: Props = $props();
 </script>
 
-<div class="empty" role="status">
+<div class="empty" class:spacious role="status">
     {#if icon}
         <div class="icon">{@render icon()}</div>
-    {:else}
-        <div class="icon default">
-            <svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true">
-                <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="3 4" />
-            </svg>
-        </div>
     {/if}
     <h3 class="title">{title}</h3>
     {#if description}<p class="desc">{description}</p>{/if}
@@ -32,12 +27,13 @@
         flex-direction: column;
         align-items: center;
         text-align: center;
-        padding: var(--space-16) var(--space-6);
+        padding: var(--space-6);
         gap: var(--space-3);
         color: var(--text-secondary);
         border-radius: var(--radius-lg);
         background: color-mix(in oklab, var(--surface) 60%, transparent);
     }
+    .spacious { padding: var(--space-12) var(--space-6); }
     .icon {
         color: var(--text-tertiary);
         margin-bottom: var(--space-2);