From 7df8419368a514d5a3166c16bf231f38ad8fc3ee Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Wed, 22 Apr 2026 11:34:37 -0400
Subject: [PATCH] refactor(layout): promote AI capture above timeline on
 desktop

Give the composer full-width desktop space before the event timeline so capture stays prominent and the toolbar can keep its intended two-column composition. Add source-level regression tests to lock the new page hierarchy in place.
---
 src/app/page.tsx               | 78 ++++++++++++++++------------------
 tests/ai-toolbar.test.ts       |  8 ++++
 tests/home-page-layout.test.ts | 11 ++++-
 3 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index a78584c..16d2244 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -436,10 +436,8 @@ export default function HomePage() {
 	);
 	const appSectionSurfaceClasses = getAppSectionSurfaceClasses(isMobile);
 	const appNavSurfaceClasses = getAppNavSurfaceClasses(isMobile);
-	const mainContentClasses = cn(
-		"grid items-start gap-4",
-		isMobile ? "grid-cols-1" : "grid-cols-[minmax(0,0.75fr)_minmax(0,1.25fr)]",
-	);
+	const mainContentClasses = "space-y-4";
+	const timelineContentClasses = "space-y-4";
 	const headerActionsClasses = isMobile
 		? "flex w-full items-center justify-between gap-2"
 		: "flex flex-wrap items-center justify-end gap-2";
@@ -552,44 +550,42 @@ export default function HomePage() {
 						/>
 					) : (
 						<section className={mainContentClasses}>
-							<div className="space-y-4">
-								<section className={appSectionSurfaceClasses}>
-									<div className="mb-4 space-y-1">
-										<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-											AI capture
-										</p>
-										<h2 className="text-xl font-semibold tracking-[-0.04em]">
-											Capture from text or files.
-										</h2>
-										<p className="text-sm leading-6 text-muted-foreground">
-											Start with a prompt, screenshots, or both. Review happens
-											in the timeline rather than a separate flow.
-										</p>
-									</div>
+							<section className={appSectionSurfaceClasses}>
+								<div className="mb-4 space-y-1">
+									<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+										AI capture
+									</p>
+									<h2 className="text-xl font-semibold tracking-[-0.04em]">
+										Capture from text or files.
+									</h2>
+									<p className="text-sm leading-6 text-muted-foreground">
+										Start with a prompt, screenshots, or both. Review happens in
+										the timeline rather than a separate flow.
+									</p>
+								</div>
 
-									<AIToolbar
-										adminAiEnabled={adminAiEnabled}
-										aiEnabled={settings.aiEnabled}
-										isAuthenticated={!!session?.user}
-										isPending={isPending}
-										aiPrompt={aiPrompt}
-										setAiPrompt={setAiPrompt}
-										aiLoading={aiLoading}
-										imagePreviews={imagePreviews}
-										onImagesSelect={handleImagesSelect}
-										onImageRemove={handleImageRemove}
-										onAiCreate={handleAiCreate}
-										onAiTemplateSelect={runAiCreate}
-										onAiSummarize={handleAiSummarize}
-										onSummaryDismiss={() => setSummary(null)}
-										summary={summary}
-										summaryUpdated={summaryUpdated}
-										events={events}
-									/>
-								</section>
-							</div>
+								<AIToolbar
+									adminAiEnabled={adminAiEnabled}
+									aiEnabled={settings.aiEnabled}
+									isAuthenticated={!!session?.user}
+									isPending={isPending}
+									aiPrompt={aiPrompt}
+									setAiPrompt={setAiPrompt}
+									aiLoading={aiLoading}
+									imagePreviews={imagePreviews}
+									onImagesSelect={handleImagesSelect}
+									onImageRemove={handleImageRemove}
+									onAiCreate={handleAiCreate}
+									onAiTemplateSelect={runAiCreate}
+									onAiSummarize={handleAiSummarize}
+									onSummaryDismiss={() => setSummary(null)}
+									summary={summary}
+									summaryUpdated={summaryUpdated}
+									events={events}
+								/>
+							</section>
 
-							<div className="space-y-4">
+							<section className={timelineContentClasses}>
 								<section className={appSectionSurfaceClasses}>
 									<div className="mb-4 flex items-center justify-between gap-3">
 										<div className="space-y-1">
@@ -634,7 +630,7 @@ export default function HomePage() {
 										onDelete={handleDelete}
 									/>
 								</section>
-							</div>
+							</section>
 						</section>
 					)}
 				</main>
diff --git a/tests/ai-toolbar.test.ts b/tests/ai-toolbar.test.ts
index 6da65a6..632f040 100644
--- a/tests/ai-toolbar.test.ts
+++ b/tests/ai-toolbar.test.ts
@@ -166,6 +166,14 @@ describe("AI capture redesign", () => {
 		expect(source).not.toContain("lg:grid-cols-");
 	});
 
+	test("desktop composer uses a two-column row when the page gives it full-width space", () => {
+		const source = readToolbarSource();
+
+		expect(source).toContain("isMobile");
+		expect(source).toContain('? "grid gap-3"');
+		expect(source).toContain(': "grid gap-3 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]"');
+	});
+
 	test("attachments panel is a first-class surfaced region, not an inline footer affordance", () => {
 		const source = readToolbarSource();
 
diff --git a/tests/home-page-layout.test.ts b/tests/home-page-layout.test.ts
index e1fbbed..0f15cee 100644
--- a/tests/home-page-layout.test.ts
+++ b/tests/home-page-layout.test.ts
@@ -6,13 +6,22 @@ describe("home page hierarchy", () => {
 		const source = readFileSync("src/app/page.tsx", "utf8");
 
 		expect(source).toContain("useIsMobile");
-		expect(source).toContain("grid-cols-[minmax(0,0.75fr)_minmax(0,1.25fr)]");
+		expect(source).toContain('const mainContentClasses = "space-y-4"');
+		expect(source).toContain('const timelineContentClasses = "space-y-4"');
 		expect(source).toContain('"items-center justify-between"');
 		expect(source).toContain("desktopUtilityActionsClasses");
 		expect(source).toContain("AI capture");
 		expect(source).toContain("Event timeline");
 	});
 
+	test("desktop layout promotes AI capture to a full-width top row before the timeline grid", () => {
+		const source = readFileSync("src/app/page.tsx", "utf8");
+
+		expect(source).toContain("<section className={appSectionSurfaceClasses}>");
+		expect(source).toContain("<section className={timelineContentClasses}>");
+		expect(source).not.toContain("grid-cols-[minmax(0,0.75fr)_minmax(0,1.25fr)]");
+	});
+
 	test("manual create is routed through a More menu instead of a primary mobile action", () => {
 		const source = readFileSync("src/app/page.tsx", "utf8");