fix: Move review sidebar to left side for standard editor layout

Matches VS Code / GitHub convention where file explorer sits on the left
and the main content area (diff viewer) takes the remaining space on the right.
This commit is contained in:
Lukas May
2026-03-05 11:49:13 +01:00
parent bbaee2acf5
commit e56bc1bc77
2 changed files with 36 additions and 36 deletions

View File

@@ -39,6 +39,23 @@ export function ReviewSidebar({
return (
<div className="flex h-full">
{/* Icon strip — left edge */}
<div className="flex flex-col items-center w-9 shrink-0 border-r border-border/50 py-1.5 gap-0.5">
<IconTab
icon={FileCode}
label="Files"
active={view === "files"}
onClick={() => setView("files")}
/>
<IconTab
icon={GitCommitHorizontal}
label="Commits"
active={view === "commits"}
onClick={() => setView("commits")}
badge={commits.length > 1 ? commits.length : undefined}
/>
</div>
{/* Content panel */}
<div className="flex-1 min-w-0 overflow-y-auto p-4">
{view === "files" ? (
@@ -58,23 +75,6 @@ export function ReviewSidebar({
/>
)}
</div>
{/* Icon strip — right edge */}
<div className="flex flex-col items-center w-9 shrink-0 border-l border-border/50 py-1.5 gap-0.5">
<IconTab
icon={FileCode}
label="Files"
active={view === "files"}
onClick={() => setView("files")}
/>
<IconTab
icon={GitCommitHorizontal}
label="Commits"
active={view === "commits"}
onClick={() => setView("commits")}
badge={commits.length > 1 ? commits.length : undefined}
/>
</div>
</div>
);
}
@@ -102,7 +102,7 @@ function IconTab({
relative flex items-center justify-center w-8 h-8 rounded-md
transition-all duration-150
${active
? "text-primary bg-primary/10 shadow-[inset_2px_0_0_0] shadow-primary"
? "text-primary bg-primary/10 shadow-[inset_-2px_0_0_0] shadow-primary"
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
}
`}

View File

@@ -298,8 +298,24 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
/>
{/* Main content area — sidebar always rendered to preserve state */}
<div className="grid grid-cols-1 lg:grid-cols-[1fr_260px]">
{/* Left: Diff */}
<div className="grid grid-cols-1 lg:grid-cols-[260px_1fr]">
{/* Left: Sidebar — sticky so icon strip stays visible */}
<div className="border-r border-border">
<div className="sticky top-0 h-[calc(100vh-12rem)]">
<ReviewSidebar
files={allFiles}
comments={comments}
onFileClick={handleFileClick}
selectedCommit={selectedCommit}
activeFiles={files}
commits={commits}
onSelectCommit={setSelectedCommit}
viewedFiles={viewedFiles}
/>
</div>
</div>
{/* Right: Diff */}
<div className="min-w-0 p-4">
{isDiffLoading ? (
<div className="flex h-64 items-center justify-center text-muted-foreground gap-2">
@@ -325,22 +341,6 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
/>
)}
</div>
{/* Right: Sidebar — sticky so icon strip stays visible */}
<div className="border-l border-border">
<div className="sticky top-0 h-[calc(100vh-12rem)]">
<ReviewSidebar
files={allFiles}
comments={comments}
onFileClick={handleFileClick}
selectedCommit={selectedCommit}
activeFiles={files}
commits={commits}
onSelectCommit={setSelectedCommit}
viewedFiles={viewedFiles}
/>
</div>
</div>
</div>
</div>
);