feat: build dashboard design system

src/lib/ui/components/StatusStrip.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { UiStatusItem } from "../types";
+  import FooterCell from "./FooterCell.svelte";
+
+  let {
+    items,
+    compact = false,
+  }: {
+    items: UiStatusItem[];
+    compact?: boolean;
+  } = $props();
+</script>
+
+<section class="status-strip" data-compact={compact}>
+  {#each items as item (item.id)}
+    <FooterCell {item} />
+  {/each}
+</section>
+
+<style>
+  .status-strip {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+    gap: 1px;
+    border: var(--ui-border);
+    background: var(--ui-color-line);
+  }
+
+  .status-strip[data-compact="true"] {
+    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+  }
+</style>