From 7b345f132763fa6405ae858b74e46229629c19d9 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Wed, 10 Jun 2026 11:40:16 +0900
Subject: feat(tabs,app): tab id handles, fixed-width tabs-lift, slim shell +
 full-height sidebar

Tabs:
- short-handle ID badge per tab (shortest unique conversationId prefix, min 4)
- fixed-width (w-48) tabs with tabs-lift folder borders

Shell (composition root):
- drop the Dispatch title bar; tabs sit at the very top with a 5px gap
- big faded "Dispatch" watermark centered on an empty chat
- collapsible right sidebar (empty shell) spanning full window height: a
  permanently right-pinned hamburger in the tab row toggles it; in-flow push
  that shrinks the whole left column (tabs included) at >=lg, overlay + backdrop
  below lg; open-by-default on wide / closed on narrow
- main is overflow-hidden with a min-w-0 shrink chain; app.css pins
  html/body/#app height + body overflow hidden so the page never overflows
---
 src/features/tabs/ui.test.ts | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

(limited to 'src/features/tabs/ui.test.ts')

diff --git a/src/features/tabs/ui.test.ts b/src/features/tabs/ui.test.ts
index 1ae18c8..6cd66bd 100644
--- a/src/features/tabs/ui.test.ts
+++ b/src/features/tabs/ui.test.ts
@@ -175,4 +175,39 @@ describe("TabBar", () => {
 		const newChat = screen.getByRole("button", { name: "New chat" });
 		expect(newChat).not.toHaveTextContent("New Chat");
 	});
+
+	it("renders a short-handle tab ID badge (shortest unique prefix) per tab", () => {
+		const tabs: readonly Tab[] = [
+			{ conversationId: "3f9a1b2c-1111", model: "m", title: "Alpha" },
+			{ conversationId: "7c2db4e5-2222", model: "m", title: "Beta" },
+		];
+		render(TabBar, {
+			props: {
+				tabs,
+				activeConversationId: "3f9a1b2c-1111",
+				onSelect: vi.fn(),
+				onClose: vi.fn(),
+				onNewDraft: vi.fn(),
+			},
+		});
+
+		expect(screen.getByText("3f9a")).toBeInTheDocument();
+		expect(screen.getByText("7c2d")).toBeInTheDocument();
+	});
+
+	it("renders fixed-width tabs", () => {
+		render(TabBar, {
+			props: {
+				tabs: sampleTabs,
+				activeConversationId: "c1",
+				onSelect: vi.fn(),
+				onClose: vi.fn(),
+				onNewDraft: vi.fn(),
+			},
+		});
+
+		for (const t of screen.getAllByRole("tab")) {
+			expect(t).toHaveClass("w-48");
+		}
+	});
 });
-- 
cgit v1.2.3