Baseline: full tree snapshot after git repository loss

The previous .git directory was found gutted (only info/ remained), so
history is unrecoverable locally. This commit restores version control
with the tree exactly as it stands: the working app, the preview-tracks
launcher on the artist hero, the scrollable-track-previews design bundle
(docs + approved mockups), and the Phase 0 validation artifacts.

src/views/Home.svelte

@@ -0,0 +1,91 @@
+<script>
+    import { libraryStore, ui } from "../lib/state.svelte.js";
+    import AlbumCard from "../components/AlbumCard.svelte";
+
+    const recent = $derived(libraryStore.albums.slice(0, 8));
+
+    const greeting = (() => {
+        const h = new Date().getHours();
+        if (h < 12) return "Good morning";
+        if (h < 18) return "Good afternoon";
+        return "Good evening";
+    })();
+</script>
+
+<div class="home">
+    <h1>{greeting}</h1>
+
+    {#if recent.length === 0}
+        <div class="empty">
+            <p class="big">Welcome to SoulStream</p>
+            <p class="sub">
+                Search the network, stream instantly, and downloaded albums
+                will show up here.
+            </p>
+            <button class="cta" onclick={() => (ui.view = "search")}>Start searching</button>
+        </div>
+    {:else}
+        <section>
+            <h2>Recently added</h2>
+            <div class="grid">
+                {#each recent as a (a.id)}
+                    <AlbumCard album={a} />
+                {/each}
+            </div>
+        </section>
+    {/if}
+</div>
+
+<style>
+    h1 {
+        font-size: 28px;
+        font-weight: 800;
+        margin-bottom: 24px;
+    }
+
+    h2 {
+        font-size: 20px;
+        font-weight: 700;
+        margin-bottom: 16px;
+    }
+
+    .grid {
+        display: grid;
+        /* Fixed tracks, not minmax(...,1fr): fluid tracks make every card
+           resize in a sawtooth as the column count snaps during window/panel
+           resizing — visible jitter. Fixed tracks only add/remove a column. */
+        grid-template-columns: repeat(auto-fill, 180px);
+        gap: 18px;
+    }
+
+    .empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        padding-top: 15vh;
+        text-align: center;
+    }
+
+    .big {
+        font-size: 22px;
+        font-weight: 700;
+    }
+
+    .sub {
+        color: var(--text-secondary);
+    }
+
+    .cta {
+        margin-top: 10px;
+        padding: 10px 24px;
+        border-radius: 24px;
+        background: var(--accent);
+        color: #000;
+        font-weight: 700;
+    }
+
+    .cta:hover {
+        background: var(--accent-hover);
+    }
+</style>