1 files changed, 13 insertions, 47 deletions
diff --git a/frontend/src/components/Status.svelte b/frontend/src/components/Status.svelte
index 6ae2cfb..ce2a753 100644
--- a/frontend/src/components/Status.svelte
+++ b/frontend/src/components/Status.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { Alert } from '$lib/components/ui/alert';
+  import * as Card from '$lib/components/ui/card';
+
   interface Props {
     error?: string | null;
     busy?: boolean;
@@ -11,60 +14,23 @@
 </script>
 
 {#if busy}
-  <div class="status" role="status">
-    <span class="spinner" aria-hidden="true"></span>
+  <div class="text-muted-foreground flex items-center gap-2 py-3 text-sm" role="status">
+    <span class="inline-block size-4 rounded-full border-2 border-primary border-t-transparent align-[-0.125em] animate-spin" aria-hidden="true"></span>
     {busyText}
   </div>
 {:else if error}
-  <Alert variant="destructive" class="bg-[var(--danger-soft)] text-[var(--destructive)] border-[#f2c7c7]">
+  <Alert variant="destructive">
     <span aria-hidden="true">⚠</span>
     <span>{error}</span>
   </Alert>
 {:else if empty !== null && empty !== undefined && empty !== false}
-  <div class="state-empty">
-    <p class="empty-title">{empty}</p>
-    {#if emptyHint}<p class="hint">{emptyHint}</p>{/if}
-  </div>
+  <Card.Root class="border-dashed text-center py-8 px-4 text-muted-foreground">
+    <p class="font-semibold mb-1">{empty}</p>
+    {#if emptyHint}<p class="text-sm text-muted-foreground">{emptyHint}</p>{/if}
+  </Card.Root>
 {/if}
 {#if warnings && warnings.length > 0}
-  <div class="stack">
-    {#each warnings as w, i (i)}
-      <Alert variant="default" class="bg-[var(--warn-soft)] text-[var(--warn)] border-[#f0ddb4]"><span aria-hidden="true">△</span><span>{w}</span></Alert>
-    {/each}
-  </div>
+  {#each warnings as w, i (i)}
+    <Alert variant="default"><span aria-hidden="true">△</span><span>{w}</span></Alert>
+  {/each}
 {/if}
-
-<script lang="ts" module>
-  import { Alert } from '$lib/components/ui/alert';
-</script>
-
-<style>
-  .status {
-    color: var(--text-3);
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.9rem 0;
-    font-size: 0.9rem;
-  }
-  .spinner {
-    width: 15px;
-    height: 15px;
-    border: 2px solid var(--teal);
-    border-top-color: transparent;
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-  }
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-  .state-empty {
-    text-align: center;
-    padding: 2.2rem 1rem;
-    border: 1px dashed var(--border-strong);
-    border-radius: var(--radius);
-    color: var(--text-2);
-    background: var(--surface);
-  }
-  .empty-title { font-weight: 600; margin-bottom: 0.2rem; }
-</style>