From 83fb6e3ce7f80a9c287764df26b6245e0945a941 Mon Sep 17 00:00:00 2001 From: Adam Malczewski 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/logic/tile-layout.test.ts | 53 ++++++++++++++-- src/features/workspaces/logic/tile-layout.ts | 55 +++++++++++++++-- src/features/workspaces/logic/view-model.test.ts | 28 ++++++++- src/features/workspaces/logic/view-model.ts | 34 +++++++++++ src/features/workspaces/ui/HomeHeader.svelte | 9 ++- src/features/workspaces/ui/HomeTileGrid.svelte | 41 ++++++++++--- src/features/workspaces/ui/WorkspaceTile.svelte | 74 +++++++++++++++++------ src/features/workspaces/ui/WorkspaceTile.test.ts | 15 ++++- src/features/workspaces/ui/WorkspacesHome.svelte | 16 +++-- 9 files changed, 276 insertions(+), 49 deletions(-) (limited to 'src/features') diff --git a/src/features/workspaces/logic/tile-layout.test.ts b/src/features/workspaces/logic/tile-layout.test.ts index f2fbc5b..be61da4 100644 --- a/src/features/workspaces/logic/tile-layout.test.ts +++ b/src/features/workspaces/logic/tile-layout.test.ts @@ -52,6 +52,44 @@ describe("geometryFor", () => { it("resolves degenerate (unmeasured) sizes to wide", () => { expect(geometryFor(0, 0).mode).toBe("wide"); }); + + it("derives the wide unit from the canvas height so the 4 rows fill it", () => { + // 4·unit + 3·gap + 2·margin ≈ height: an 800px canvas gets ~160px tiles, + // NOT the old fixed 120px (the "squares are so small" complaint). + const geometry = geometryFor(1440, 800); + const filled = 4 * geometry.unit.height + 3 * geometry.unit.gap + 2 * geometry.margin; + expect(geometry.unit.height).toBeGreaterThanOrEqual(140); + expect(Math.abs(filled - 800)).toBeLessThanOrEqual(8); + expect(geometry.unit.width).toBe(geometry.unit.height); + }); + + it("clamps the wide unit to its band on very short and very tall canvases", () => { + const short = geometryFor(1200, 300); + const huge = geometryFor(5000, 4000); // wide (width ≥ height) with a huge height + expect(short.unit.height).toBe(112); + expect(huge.unit.height).toBe(184); + // The margin never collapses (the "no margins" complaint) nor dominates. + expect(short.margin).toBeGreaterThanOrEqual(24); + expect(huge.margin).toBeLessThanOrEqual(64); + }); + + it("always carries a positive margin (the tile field never hugs the edge)", () => { + const sizes: [number, number][] = [ + [1920, 1080], + [390, 844], + [0, 0], + [1200, 300], + ]; + for (const [w, h] of sizes) { + expect(geometryFor(w, h).margin).toBeGreaterThan(0); + } + }); + + it("keeps the tall unit fixed with a gap (its columns are fluid)", () => { + expect(TALL.unit.width).toBe(0); + expect(TALL.unit.height).toBeGreaterThanOrEqual(120); + expect(TALL.unit.gap).toBeGreaterThan(8); + }); }); describe("clampSpan", () => { @@ -429,12 +467,15 @@ describe("geometry-agnostic persistence", () => { describe("type surface", () => { it("exposes the geometry fields the picker and grid need", () => { + // A 500px-tall canvas: the raw unit (100) clamps UP to the 112px minimum, + // so the gap is 12px and the margin 37px (never the old fixed 8px gap). const geometry: GridGeometry = geometryFor(1000, 500); - expect([geometry.mode, geometry.flowRows, geometry.flowCols, geometry.unit.gap]).toEqual([ - "wide", - 4, - 0, - 8, - ]); + expect([ + geometry.mode, + geometry.flowRows, + geometry.flowCols, + geometry.unit.gap, + geometry.margin, + ]).toEqual(["wide", 4, 0, 12, 37]); }); }); diff --git a/src/features/workspaces/logic/tile-layout.ts b/src/features/workspaces/logic/tile-layout.ts index 17923c0..4d81a0c 100644 --- a/src/features/workspaces/logic/tile-layout.ts +++ b/src/features/workspaces/logic/tile-layout.ts @@ -46,6 +46,13 @@ export interface GridGeometry { /** Maximum vertical span a tile may occupy in this geometry. */ readonly maxRowSpan: number; readonly unit: TileUnitSize; + /** + * The breathing room around the whole tile field — the grid never renders + * flush against the canvas edge. In wide mode the scroller pads all four + * sides by this amount (the pan arrow/scroll indicator offset inward by it + * too); in tall mode it insets the two fluid columns horizontally. + */ + readonly margin: number; } /** One persisted tile: which workspace it pins, how big it wants to be, and its manual position in the order. */ @@ -82,14 +89,41 @@ export interface Span { /** The viewport assumed before the canvas has been measured (a landscape desktop). */ export const DEFAULT_VIEWPORT = { width: 1280, height: 800 } as const; -const WIDE_UNIT: TileUnitSize = { width: 128, height: 120, gap: 8 }; -const TALL_UNIT: TileUnitSize = { width: 0, height: 120, gap: 8 }; +/** + * The wide unit's clamp band (px). Tiles FILL the canvas' height across the 4 + * fixed rows (the Start-screen feel), but never shrink below a legible small + * tile nor grow past a comfortable large one. + */ +const WIDE_UNIT_MIN = 112; +const WIDE_UNIT_MAX = 184; + +/** The wide canvas' outer margin band (px) — proportional to the unit size. */ +const WIDE_MARGIN_MIN = 24; +const WIDE_MARGIN_MAX = 64; + +/** The tall unit: the two fluid columns size in `1fr` (width `0` = fluid). */ +const TALL_UNIT: TileUnitSize = { width: 0, height: 148, gap: 12 }; +const TALL_MARGIN = 16; + +/** Round to whole pixels (fractional track sizes blur tile edges). */ +function px(value: number): number { + return Math.round(value); +} + +function clampNumber(value: number, min: number, max: number): number { + return Math.max(min, Math.min(max, value)); +} /** * Resolve the grid geometry from the tile canvas' size. Landscape/desktop → - * WIDE (4 fixed ~120px rows, column-wise flow, 4×2 span cap); portrait/mobile - * → TALL (2 fixed columns, row-wise flow, 2×2 span cap). Degenerate sizes - * (not yet measured) resolve to wide. Pure: numbers in, geometry out. + * WIDE (4 fixed rows, column-wise flow, 4×2 span cap); portrait/mobile → TALL + * (2 fixed columns, row-wise flow, 2×2 span cap). Degenerate sizes (not yet + * measured) resolve to wide. + * + * The wide unit is DERIVED from the canvas height so the 4 rows exactly fill + * it (unit + margin + gap all proportional, clamped to their bands); the tall + * unit is fixed (its columns are fluid instead). Pure: numbers in, geometry + * out. */ export function geometryFor(width: number, height: number): GridGeometry { const tall = width > 0 && height > 0 && height > width; @@ -101,15 +135,24 @@ export function geometryFor(width: number, height: number): GridGeometry { maxColSpan: 2, maxRowSpan: 2, unit: TALL_UNIT, + margin: TALL_MARGIN, }; } + // Solve 4·unit + 3·gap + 2·margin = height with gap = unit/9 and margin = + // unit/3: 4u + u/3 + 2u/3 = 5u → u = height/5. Unmeasured (height ≤ 0) → + // the band's middle, not a tiny tile. + const raw = height > 0 ? height / 5 : (WIDE_UNIT_MIN + WIDE_UNIT_MAX) / 2; + const unit = px(clampNumber(raw, WIDE_UNIT_MIN, WIDE_UNIT_MAX)); + const gap = Math.max(10, px(unit / 9)); + const margin = px(clampNumber(unit / 3, WIDE_MARGIN_MIN, WIDE_MARGIN_MAX)); return { mode: "wide", flowRows: 4, flowCols: 0, maxColSpan: 4, maxRowSpan: 2, - unit: WIDE_UNIT, + unit: { width: unit, height: unit, gap }, + margin, }; } diff --git a/src/features/workspaces/logic/view-model.test.ts b/src/features/workspaces/logic/view-model.test.ts index 44d2f31..d283481 100644 --- a/src/features/workspaces/logic/view-model.test.ts +++ b/src/features/workspaces/logic/view-model.test.ts @@ -1,6 +1,32 @@ import type { WorkspaceEntry } from "@dispatch/wire"; import { describe, expect, it } from "vitest"; -import { applyStarred, pageTitle, relativeTime, sortWorkspaces } from "./view-model"; +import { applyStarred, pageTitle, relativeTime, sortWorkspaces, tileTone } from "./view-model"; + +describe("tileTone", () => { + const TONES = ["primary", "secondary", "accent", "info", "success", "warning"]; + + it("is deterministic — the same id always gets the same tone", () => { + expect(tileTone("my-workspace")).toBe(tileTone("my-workspace")); + }); + + it("only returns known tones", () => { + for (const id of ["default", "a", "my-workspace", "x-1", "project-phoenix", "zzz"]) { + expect(TONES).toContain(tileTone(id)); + } + }); + + it("spreads distinct ids across more than one tone", () => { + const tones = new Set( + ["default", "alpha", "beta", "gamma", "delta", "epsilon", "zeta", "eta"].map(tileTone), + ); + expect(tones.size).toBeGreaterThan(1); + }); + + it("is case-sensitive (ids are slugs, but the hash makes no normalization promise)", () => { + // Not a correctness requirement — just documents the hash reads raw chars. + expect(typeof tileTone("ABC")).toBe("string"); + }); +}); describe("relativeTime", () => { const now = 1_000_000_000_000; // 2001-09-09 diff --git a/src/features/workspaces/logic/view-model.ts b/src/features/workspaces/logic/view-model.ts index b994b7c..0b9f239 100644 --- a/src/features/workspaces/logic/view-model.ts +++ b/src/features/workspaces/logic/view-model.ts @@ -5,6 +5,40 @@ import type { WorkspaceEntry } from "@dispatch/wire"; import type { Route } from "./route"; +/** + * A home tile's color tone. Windows 8's Start screen gave every tile its own + * saturated color; here the tile's workspace id DETERMINISTICALLY picks one of + * the theme's six semantic tones, so the same workspace keeps its color across + * sessions and themes (the tone name maps to a DaisyUI color, which adapts to + * the active theme). Starred stays a separate visual concern (a badge), NOT a + * tone — any tile may be starred regardless of its color. + */ +export type TileTone = "primary" | "secondary" | "accent" | "info" | "success" | "warning"; + +/** The tones a tile may take, in hash order. */ +const TILE_TONES: readonly TileTone[] = [ + "primary", + "secondary", + "accent", + "info", + "success", + "warning", +]; + +/** + * Map a workspace id to its tile tone. Deterministic (FNV-1a hash of the id) + * and uniformly distributed across the six tones — pure: id in, tone out. + */ +export function tileTone(id: string): TileTone { + let hash = 0x811c9dc5; + for (let index = 0; index < id.length; index++) { + hash ^= id.charCodeAt(index); + // FNV prime (16777619), kept in 32-bit unsigned range. + hash = Math.imul(hash, 0x01000193) >>> 0; + } + return TILE_TONES[hash % TILE_TONES.length] ?? "primary"; +} + /** * The browser tab / page (`document.title`) text for a route. The home route * (`/`) is "Dispatch"; a workspace route (`/`) is "Dispatch: {title}", diff --git a/src/features/workspaces/ui/HomeHeader.svelte b/src/features/workspaces/ui/HomeHeader.svelte index 01ac63f..be630d2 100644 --- a/src/features/workspaces/ui/HomeHeader.svelte +++ b/src/features/workspaces/ui/HomeHeader.svelte @@ -65,8 +65,13 @@ } -
-

Dispatch

+
+
+

Dispatch

+ +
diff --git a/src/features/workspaces/ui/HomeTileGrid.svelte b/src/features/workspaces/ui/HomeTileGrid.svelte index e29b9b1..ceae133 100644 --- a/src/features/workspaces/ui/HomeTileGrid.svelte +++ b/src/features/workspaces/ui/HomeTileGrid.svelte @@ -2,9 +2,25 @@ import type { WorkspaceEntry } from "@dispatch/wire"; import { nextDragPhase, type DragEvent, type DragPhase } from "../logic/drag-controller"; import type { GridGeometry, Placement, Span } from "../logic/tile-layout"; + import { tileTone, type TileTone } from "../logic/view-model"; import type { WorkspaceStore } from "../store.svelte"; import WorkspaceTile from "./WorkspaceTile.svelte"; + /** + * The Start-screen tile tones (static classes — Tailwind/DaisyUI must see + * the literal `bg-*`/`text-*-content` names to emit them). A tile is its + * tone's SATURATED color with the tone's `-content` text, like Win8's + * colored tiles on the dark Start canvas. + */ + const TONE_CLASSES: Record = { + primary: "bg-primary text-primary-content border-primary", + secondary: "bg-secondary text-secondary-content border-secondary", + accent: "bg-accent text-accent-content border-accent", + info: "bg-info text-info-content border-info", + success: "bg-success text-success-content border-success", + warning: "bg-warning text-warning-content border-warning", + }; + let { geometry, placements, @@ -222,7 +238,7 @@ class="h-full overscroll-contain" class:overflow-x-auto={geometry.mode === "wide"} class:overflow-y-auto={geometry.mode === "tall"} - style={`scroll-snap-type: ${geometry.mode === "wide" ? "x" : "y"} proximity;`} + style={`padding: ${geometry.margin}px; scroll-snap-type: ${geometry.mode === "wide" ? "x" : "y"} proximity;`} onscroll={updateScroll} onwheel={handleWheel} > @@ -233,12 +249,12 @@
{#if canPan} - + -
+
{workspacesById.get(phase.id)?.title ?? phase.id} diff --git a/src/features/workspaces/ui/WorkspaceTile.svelte b/src/features/workspaces/ui/WorkspaceTile.svelte index 4059690..3894b26 100644 --- a/src/features/workspaces/ui/WorkspaceTile.svelte +++ b/src/features/workspaces/ui/WorkspaceTile.svelte @@ -63,14 +63,53 @@ // The face's semantic key (tests read it). const faceKey = $derived(`tile-${placement.id}`); + + // Span-aware face: bigger footprints get more air + bigger type (all styles + // static so Tailwind sees them). + const wide = $derived(placement.colSpan > 1); + const tall = $derived(placement.rowSpan > 1); + const facePadding = $derived(wide || tall ? "p-5" : "p-4"); + const titleClass = $derived( + wide && tall + ? "text-3xl leading-tight line-clamp-3" + : wide + ? "text-2xl leading-snug line-clamp-2" + : tall + ? "text-xl leading-snug line-clamp-4" + : "text-lg leading-snug line-clamp-3", + ); + /** 1×1 tiles are tight: "20 conv." — wider tiles spell "conversations" out. */ + const countLabel = $derived( + ws.conversationCount === 1 ? (wide ? "conversation" : "conv.") : wide ? "conversations" : "conv.", + ); -
+
+ +
+ /{ws.id} + {#if active} + + {/if} +
+ + {#if ws.starred} + + ★ + {/if} + {#if editing} { if (e.key === "Enter") void saveTitle(); @@ -81,29 +120,30 @@ {:else} {ws.title} {/if} - /{ws.id} - {#if titleError} -

{titleError}

+

{titleError}

{/if} -
- {#if active} - - {/if} - - {ws.conversationCount} - {ws.conversationCount === 1 ? "conversation" : "conversations"} + +
+ + + + {ws.conversationCount} + {countLabel} + + + + {relativeTime(ws.lastActivityAt, Date.now())} - {relativeTime(ws.lastActivityAt, Date.now())}
diff --git a/src/features/workspaces/ui/WorkspaceTile.test.ts b/src/features/workspaces/ui/WorkspaceTile.test.ts index 918aa1c..b76f709 100644 --- a/src/features/workspaces/ui/WorkspaceTile.test.ts +++ b/src/features/workspaces/ui/WorkspaceTile.test.ts @@ -48,10 +48,23 @@ describe("WorkspaceTile", () => { }); expect(screen.getByText("My Workspace")).toBeInTheDocument(); expect(screen.getByText("/my-ws")).toBeInTheDocument(); - expect(screen.getByText(/3 conversations/)).toBeInTheDocument(); + // A 1×1 tile is tight: the count compacts to "conv." (wide tiles spell it out). + expect(screen.getByText(/3 conv\./)).toBeInTheDocument(); expect(screen.getByText("1m")).toBeInTheDocument(); }); + it("spells out 'conversations' on a wide tile", () => { + render(WorkspaceTile, { + props: { + ws: fakeEntry(), + store: fakeStore(), + placement: fakePlacement({ colSpan: 2, rowSpan: 1 }), + onRenameEnd: () => {}, + }, + }); + expect(screen.getByText(/3 conversations/)).toBeInTheDocument(); + }); + it("shows the active indicator only when the active port says so", async () => { const { container, rerender } = render(WorkspaceTile, { props: { 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 @@
{#if store.loading && store.list.length === 0} -
- +
+
{:else if store.list.length === 0} -

- No workspaces yet. Create one with New workspace above, or visit - /your-name in the URL. -

+
+

No workspaces yet

+

+ Create one with New workspace above, or visit + /your-name in the URL — the first + tile drops onto the canvas ready to rename. +

+
{:else}