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 (
|
return (
|
||||||
<div className="flex h-full">
|
<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 */}
|
{/* Content panel */}
|
||||||
<div className="flex-1 min-w-0 overflow-y-auto p-4">
|
<div className="flex-1 min-w-0 overflow-y-auto p-4">
|
||||||
{view === "files" ? (
|
{view === "files" ? (
|
||||||
@@ -58,23 +75,6 @@ export function ReviewSidebar({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -102,7 +102,7 @@ function IconTab({
|
|||||||
relative flex items-center justify-center w-8 h-8 rounded-md
|
relative flex items-center justify-center w-8 h-8 rounded-md
|
||||||
transition-all duration-150
|
transition-all duration-150
|
||||||
${active
|
${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"
|
: "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 */}
|
{/* Main content area — sidebar always rendered to preserve state */}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_260px]">
|
<div className="grid grid-cols-1 lg:grid-cols-[260px_1fr]">
|
||||||
{/* Left: Diff */}
|
{/* 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">
|
<div className="min-w-0 p-4">
|
||||||
{isDiffLoading ? (
|
{isDiffLoading ? (
|
||||||
<div className="flex h-64 items-center justify-center text-muted-foreground gap-2">
|
<div className="flex h-64 items-center justify-center text-muted-foreground gap-2">
|
||||||
@@ -325,22 +341,6 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user