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:
@@ -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"
|
||||
}
|
||||
`}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user