fix(codebase): optimize layout paddings for code editor feel
This commit is contained in:
@@ -50,205 +50,192 @@ export default function CodeTab() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
height: "100vh",
|
||||
background: THEME.canvasGradient,
|
||||
fontFamily: THEME.font,
|
||||
padding: "24px",
|
||||
padding: "16px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
<Card
|
||||
padding={0}
|
||||
style={{
|
||||
maxWidth: "100%",
|
||||
margin: "0 auto",
|
||||
height: "calc(100vh - 48px)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
padding={0}
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
<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={
|
||||
codebases?.length === 1
|
||||
? codebases[0].label
|
||||
: "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,
|
||||
}}
|
||||
>
|
||||
{codebases.length > 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 }}
|
||||
/>
|
||||
<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>
|
||||
)}
|
||||
{anatomy && (
|
||||
<>
|
||||
{/* Code Files */}
|
||||
<RailGroup
|
||||
title={
|
||||
codebases?.length === 1 ? codebases[0].label : "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,
|
||||
}}
|
||||
>
|
||||
{codebases.length > 1 && (
|
||||
<div
|
||||
style={{
|
||||
padding:
|
||||
codebases.length > 1
|
||||
? "0 10px 24px 10px"
|
||||
: "10px 10px 24px 10px",
|
||||
...tileHeader,
|
||||
padding: "16px 20px 8px",
|
||||
}}
|
||||
>
|
||||
<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,
|
||||
})
|
||||
}
|
||||
<span style={chevronCell}>
|
||||
<ChevronDown
|
||||
size={13}
|
||||
style={{ color: THEME.mid }}
|
||||
/>
|
||||
</span>
|
||||
<Box
|
||||
size={14}
|
||||
style={{ color: THEME.mid, flexShrink: 0 }}
|
||||
/>
|
||||
<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>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</RailGroup>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
padding:
|
||||
codebases.length > 1
|
||||
? "0 8px 16px 8px"
|
||||
: "12px 8px 16px 8px",
|
||||
}}
|
||||
>
|
||||
<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}>
|
||||
<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>
|
||||
{/* ── 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>
|
||||
);
|
||||
}
|
||||
@@ -390,9 +377,7 @@ const leftCol: React.CSSProperties = {
|
||||
minWidth: 0,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 24,
|
||||
borderRight: `1px solid ${THEME.borderSoft}`,
|
||||
padding: "20px",
|
||||
overflowY: "auto",
|
||||
};
|
||||
|
||||
|
||||
@@ -144,10 +144,6 @@ export function GiteaFileViewer({ projectId, path }: GiteaFileViewerProps) {
|
||||
minHeight: 0,
|
||||
position: "relative",
|
||||
background: THEME.cardBg,
|
||||
border: `1px solid ${THEME.border}`,
|
||||
borderRadius: THEME.radiusSm,
|
||||
boxShadow: THEME.shadow,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@@ -155,20 +151,19 @@ export function GiteaFileViewer({ projectId, path }: GiteaFileViewerProps) {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: "8px 12px",
|
||||
padding: "10px 16px",
|
||||
background: THEME.subtleBg,
|
||||
borderBottom: `1px solid ${THEME.borderSoft}`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.8rem",
|
||||
fontSize: "0.85rem",
|
||||
color: THEME.mid,
|
||||
fontFamily: "ui-monospace, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{basename(path)}
|
||||
{path}
|
||||
</div>
|
||||
{!isImage && (
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user