old4ever/local-cal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(layout): promote AI capture above timeline on desktop

Browse Source 
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.
This commit is contained in:
Dmytro Stanchiev
2026-04-22 11:34:37 -04:00
parent 88265678db
commit 7df8419368
3 changed files with 55 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/app/page.tsx
View File

@@ -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>