fix(codebase): connect the code tree container and preview container like in reference image
This commit is contained in:
@@ -58,142 +58,170 @@ export default function CodeTab() {
|
||||
>
|
||||
<div style={{ maxWidth: 1400, margin: "0 auto" }}>
|
||||
<PageHeader title="Codebase" />
|
||||
<div style={grid}>
|
||||
{/* ── Left rail ── */}
|
||||
<section style={leftCol}>
|
||||
{showLoading && (
|
||||
<Card>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
color: THEME.mid,
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<Loader2 size={15} className="animate-spin" /> Loading…
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{error && !showLoading && (
|
||||
<Card>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
color: THEME.danger,
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<AlertCircle size={15} /> {error}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
<Card
|
||||
padding={0}
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
minHeight: "calc(100vh - 150px)",
|
||||
}}
|
||||
>
|
||||
<div style={grid}>
|
||||
{/* ── Left rail ── */}
|
||||
<section style={leftCol}>
|
||||
{showLoading && (
|
||||
<Card>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
color: THEME.mid,
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<Loader2 size={15} className="animate-spin" /> Loading…
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{error && !showLoading && (
|
||||
<Card>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
color: THEME.danger,
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<AlertCircle size={15} /> {error}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{anatomy && (
|
||||
<>
|
||||
{/* Code Files */}
|
||||
<RailGroup title="Code files" count={codebases?.length ?? 0}>
|
||||
{codebases && codebases.length === 0 && (
|
||||
<RailEmpty>
|
||||
{reason === "no_repo" ? (
|
||||
<>
|
||||
No codebase yet.{" "}
|
||||
<span style={nudge}>
|
||||
Try: "Start building my app"
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Repo is empty — push a first commit.{" "}
|
||||
<span style={nudge}>
|
||||
Try: "Scaffold a Next.js app"
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</RailEmpty>
|
||||
)}
|
||||
{codebases?.map((cb) => {
|
||||
return (
|
||||
<article key={cb.id} style={codebaseTile}>
|
||||
<div style={tileHeader}>
|
||||
<span style={chevronCell}>
|
||||
<ChevronDown
|
||||
size={13}
|
||||
style={{ color: THEME.mid }}
|
||||
{anatomy && (
|
||||
<>
|
||||
{/* Code Files */}
|
||||
<RailGroup title="Code files" count={codebases?.length ?? 0}>
|
||||
{codebases && codebases.length === 0 && (
|
||||
<RailEmpty>
|
||||
{reason === "no_repo" ? (
|
||||
<>
|
||||
No codebase yet.{" "}
|
||||
<span style={nudge}>
|
||||
Try: "Start building my app"
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Repo is empty — push a first commit.{" "}
|
||||
<span style={nudge}>
|
||||
Try: "Scaffold a Next.js app"
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</RailEmpty>
|
||||
)}
|
||||
{codebases?.map((cb) => {
|
||||
return (
|
||||
<article
|
||||
key={cb.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ ...tileHeader, padding: "20px 24px 12px" }}
|
||||
>
|
||||
<span style={chevronCell}>
|
||||
<ChevronDown
|
||||
size={13}
|
||||
style={{ color: THEME.mid }}
|
||||
/>
|
||||
</span>
|
||||
<Box
|
||||
size={14}
|
||||
style={{ color: THEME.mid, flexShrink: 0 }}
|
||||
/>
|
||||
</span>
|
||||
<Box
|
||||
size={13}
|
||||
style={{ color: THEME.mid, flexShrink: 0 }}
|
||||
/>
|
||||
<div style={{ minWidth: 0, textAlign: "left" }}>
|
||||
<div style={tileLabel}>{cb.label}</div>
|
||||
{cb.hint && <div style={tileHint}>{cb.hint}</div>}
|
||||
<div style={{ minWidth: 0, textAlign: "left" }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.95rem",
|
||||
fontWeight: 600,
|
||||
color: THEME.ink,
|
||||
}}
|
||||
>
|
||||
{cb.label}
|
||||
</div>
|
||||
{cb.hint && <div style={tileHint}>{cb.hint}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={tileBody}>
|
||||
<GiteaFileTree
|
||||
projectId={projectId}
|
||||
rootPath={cb.path}
|
||||
selectedPath={
|
||||
selection?.type === "file" &&
|
||||
selection.codebaseId === cb.id
|
||||
? selection.path
|
||||
: undefined
|
||||
}
|
||||
onSelectFile={(p) =>
|
||||
setSelection({
|
||||
type: "file",
|
||||
codebaseId: cb.id,
|
||||
path: p,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</RailGroup>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
<div style={{ padding: "0 10px 24px 10px" }}>
|
||||
<GiteaFileTree
|
||||
projectId={projectId}
|
||||
rootPath={cb.path}
|
||||
selectedPath={
|
||||
selection?.type === "file" &&
|
||||
selection.codebaseId === cb.id
|
||||
? selection.path
|
||||
: undefined
|
||||
}
|
||||
onSelectFile={(p) =>
|
||||
setSelection({
|
||||
type: "file",
|
||||
codebaseId: cb.id,
|
||||
path: p,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</RailGroup>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── Right pane ── */}
|
||||
<aside style={rightCol}>
|
||||
<Card
|
||||
padding={0}
|
||||
style={{
|
||||
flex: 1,
|
||||
minHeight: "calc(100vh - 150px)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{selection?.type === "file" && (
|
||||
<GiteaFileViewer projectId={projectId} path={selection.path} />
|
||||
)}
|
||||
{!selection && (
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: THEME.muted,
|
||||
fontSize: "0.85rem",
|
||||
padding: "32px 16px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Pick a codebase file on the left.
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</aside>
|
||||
</div>
|
||||
{/* ── Right pane ── */}
|
||||
<aside style={rightCol}>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{selection?.type === "file" && (
|
||||
<GiteaFileViewer
|
||||
projectId={projectId}
|
||||
path={selection.path}
|
||||
/>
|
||||
)}
|
||||
{!selection && (
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: THEME.muted,
|
||||
fontSize: "0.85rem",
|
||||
padding: "32px 16px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Pick a codebase file on the left.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -326,18 +354,19 @@ const pageWrap: React.CSSProperties = {
|
||||
};
|
||||
const grid: React.CSSProperties = {
|
||||
display: "grid",
|
||||
gridTemplateColumns: "minmax(280px, 360px) minmax(0, 1fr)",
|
||||
gap: 28,
|
||||
maxWidth: 1400,
|
||||
margin: "0 auto",
|
||||
gridTemplateColumns: "300px minmax(0, 1fr)",
|
||||
alignItems: "stretch",
|
||||
};
|
||||
|
||||
const leftCol: React.CSSProperties = {
|
||||
minWidth: 0,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 18,
|
||||
gap: 24,
|
||||
borderRight: `1px solid ${THEME.borderSoft}`,
|
||||
paddingRight: 24,
|
||||
};
|
||||
|
||||
const rightCol: React.CSSProperties = {
|
||||
minWidth: 0,
|
||||
display: "flex",
|
||||
|
||||
Reference in New Issue
Block a user