From 83fb6e3ce7f80a9c287764df26b6245e0945a941 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Mon, 7 Sep 2026 16:12:58 +0900
Subject: feat(workspaces): rework tile-grid visuals — Start-screen polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The home canvas now reads as a real Windows 8 Start screen instead of a
cramped, edge-hugging list:

- Geometry: the wide unit is DERIVED from the canvas height (4 rows fill
  it: unit=height/5 clamped to 112-184px, gap=unit/9, margin=unit/3 clamped
  24-64px) — tiles are no longer tiny, and the tile field always carries a
  proportional outer margin (never compressed against the left edge). Tall
  mode keeps fluid columns with a taller 148px row + 12px gap.
- Tiles take a per-workspace SATURATED tone (new pure tileTone(id): FNV-1a
  hash → one of the six theme-semantic colors) with tone-content text —
  the Win8 colored-tile identity. Starred is now a ★ badge (a tile keeps
  its own color), not a gray-tint override.
- The tile face is the Win8 layout: small uppercase slug caption at the top,
  a bold span-aware title (lg → 3xl across 1×1 → 4×2), and a single-line
  stat row pinned to the bottom (count compacts to 'conv.' on 1×1 tiles,
  truncation-safe so narrow tiles never clip).
- Selection is a high-contrast offset ring (visible on any tile color);
  tiles lift on hover; the pan arrow is a solid elevated circle.
- Header gains a 'WORKSPACES' kicker; empty/loading states are centered
  and styled for the Start-screen canvas.

Persisted data (order + spans only) and all interaction semantics
(drag/FLIP, long-press, action bar, resize picker, create popover) are
untouched. Tests: geometry derivation/clamping, tileTone determinism,
wide-vs-compact count label — 1664 green.
---
 src/features/workspaces/ui/WorkspacesHome.svelte | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

(limited to 'src/features/workspaces/ui/WorkspacesHome.svelte')

diff --git a/src/features/workspaces/ui/WorkspacesHome.svelte b/src/features/workspaces/ui/WorkspacesHome.svelte
index 276a811..cbf762f 100644
--- a/src/features/workspaces/ui/WorkspacesHome.svelte
+++ b/src/features/workspaces/ui/WorkspacesHome.svelte
@@ -248,14 +248,18 @@
 
   <div bind:this={regionEl} class="min-h-0 w-full flex-1">
     {#if store.loading && store.list.length === 0}
-      <div class="flex h-32 items-center justify-center">
-        <span class="loading loading-spinner loading-sm opacity-60"></span>
+      <div class="flex h-full items-center justify-center">
+        <span class="loading loading-spinner loading-lg opacity-60"></span>
       </div>
     {:else if store.list.length === 0}
-      <p class="py-8 text-center text-sm opacity-60">
-        No workspaces yet. Create one with <strong>New workspace</strong> above, or visit
-        <code>/your-name</code> in the URL.
-      </p>
+      <div class="flex h-full flex-col items-center justify-center gap-3 px-6 text-center">
+        <p class="text-2xl font-black tracking-tight opacity-80">No workspaces yet</p>
+        <p class="max-w-md text-sm opacity-60">
+          Create one with <strong>New workspace</strong> above, or visit
+          <code class="rounded bg-base-200 px-1.5 py-0.5">/your-name</code> in the URL — the first
+          tile drops onto the canvas ready to rename.
+        </p>
+      </div>
     {:else}
       <HomeTileGrid
         {geometry}
-- 
cgit v1.2.3