Mark Henderson
e08fcf674b
- Build page: full file tree (lazy-load dirs) + code preview panel with line numbers and token-level syntax colouring (VS Code dark theme) - New API route /api/projects/[id]/file proxies Gitea contents API returning directory listings or decoded file content - Sidebar Apps section now links to /build instead of raw Gitea URL - Status indicator replaced with a proper coloured dot (amber/blue/green) alongside the status label text Made-with: Cursor
417 lines
15 KiB
TypeScript
417 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { useParams } from "next/navigation";
|
|
import { useSession } from "next-auth/react";
|
|
|
|
// ── Types ─────────────────────────────────────────────────────────────────────
|
|
|
|
interface FileItem {
|
|
name: string;
|
|
path: string;
|
|
type: "file" | "dir" | "symlink";
|
|
size?: number;
|
|
}
|
|
|
|
interface TreeNode {
|
|
name: string;
|
|
path: string;
|
|
type: "file" | "dir";
|
|
children?: TreeNode[];
|
|
expanded?: boolean;
|
|
loaded?: boolean;
|
|
}
|
|
|
|
// ── Language detection for syntax colouring hint ─────────────────────────────
|
|
|
|
function langFromName(name: string): string {
|
|
const ext = name.split(".").pop()?.toLowerCase() ?? "";
|
|
const map: Record<string, string> = {
|
|
ts: "typescript", tsx: "typescript", js: "javascript", jsx: "javascript",
|
|
json: "json", md: "markdown", mdx: "markdown",
|
|
css: "css", scss: "css", html: "html",
|
|
py: "python", sh: "shell", yaml: "yaml", yml: "yaml",
|
|
toml: "toml", prisma: "prisma", sql: "sql",
|
|
env: "dotenv", gitignore: "shell", dockerfile: "dockerfile",
|
|
};
|
|
return map[ext] ?? "text";
|
|
}
|
|
|
|
// ── Icons ─────────────────────────────────────────────────────────────────────
|
|
|
|
function FileIcon({ name, type }: { name: string; type: "file" | "dir" }) {
|
|
if (type === "dir") return <span style={{ color: "#d4a04a", fontSize: "0.78rem" }}>▶</span>;
|
|
const ext = name.split(".").pop()?.toLowerCase() ?? "";
|
|
const color =
|
|
ext === "tsx" || ext === "ts" ? "#3178c6"
|
|
: ext === "jsx" || ext === "js" ? "#f0db4f"
|
|
: ext === "json" ? "#a09a90"
|
|
: ext === "css" || ext === "scss" ? "#e879f9"
|
|
: ext === "md" || ext === "mdx" ? "#6b6560"
|
|
: ext === "prisma" ? "#5a67d8"
|
|
: "#b5b0a6";
|
|
return <span style={{ color, fontSize: "0.7rem" }}>◌</span>;
|
|
}
|
|
|
|
// ── Simple token-based highlighter ────────────────────────────────────────────
|
|
|
|
function highlightCode(code: string, lang: string): React.ReactNode[] {
|
|
if (lang === "text" || lang === "dotenv" || lang === "dockerfile") {
|
|
return code.split("\n").map((line, i) => (
|
|
<div key={i}>{line || " "}</div>
|
|
));
|
|
}
|
|
|
|
// Split into lines and apply simple token colouring per line
|
|
return code.split("\n").map((line, i) => {
|
|
const tokens: React.ReactNode[] = [];
|
|
let remaining = line;
|
|
let ki = 0;
|
|
|
|
// Comment
|
|
const commentPrefixes = ["//", "#", "--"];
|
|
for (const p of commentPrefixes) {
|
|
if (remaining.trimStart().startsWith(p)) {
|
|
tokens.push(<span key={ki++} style={{ color: "#6a9955" }}>{remaining}</span>);
|
|
remaining = "";
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (remaining) {
|
|
// Keywords
|
|
const kwRe = /\b(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|implements|new|default|null|undefined|true|false|void|string|number|boolean|object|Promise|React)\b/g;
|
|
const parts = remaining.split(kwRe);
|
|
for (let j = 0; j < parts.length; j++) {
|
|
const part = parts[j];
|
|
if (!part) continue;
|
|
if (kwRe.test(part) || /^(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|implements|new|default|null|undefined|true|false|void|string|number|boolean|object|Promise|React)$/.test(part)) {
|
|
tokens.push(<span key={ki++} style={{ color: "#569cd6" }}>{part}</span>);
|
|
} else if (/^(['"`]).*\1$/.test(part.trim())) {
|
|
tokens.push(<span key={ki++} style={{ color: "#ce9178" }}>{part}</span>);
|
|
} else {
|
|
tokens.push(<span key={ki++}>{part}</span>);
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div key={i} style={{ minHeight: "1.4em" }}>
|
|
{tokens.length > 0 ? tokens : " "}
|
|
</div>
|
|
);
|
|
});
|
|
}
|
|
|
|
// ── File tree node ────────────────────────────────────────────────────────────
|
|
|
|
function TreeNodeRow({
|
|
node,
|
|
depth,
|
|
selectedPath,
|
|
onSelect,
|
|
onToggle,
|
|
projectId,
|
|
}: {
|
|
node: TreeNode;
|
|
depth: number;
|
|
selectedPath: string | null;
|
|
onSelect: (path: string, type: "file" | "dir") => void;
|
|
onToggle: (path: string) => void;
|
|
projectId: string;
|
|
}) {
|
|
const isSelected = selectedPath === node.path;
|
|
const isDir = node.type === "dir";
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
onClick={() => isDir ? onToggle(node.path) : onSelect(node.path, "file")}
|
|
style={{
|
|
display: "flex", alignItems: "center",
|
|
gap: 6, width: "100%", textAlign: "left",
|
|
background: isSelected ? "#f0ece4" : "transparent",
|
|
border: "none", cursor: "pointer",
|
|
padding: `5px 10px 5px ${14 + depth * 14}px`,
|
|
borderRadius: 4,
|
|
transition: "background 0.1s",
|
|
fontFamily: "IBM Plex Mono, monospace",
|
|
fontSize: "0.75rem",
|
|
color: isSelected ? "#1a1a1a" : "#4a4640",
|
|
}}
|
|
onMouseEnter={e => { if (!isSelected) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
|
|
onMouseLeave={e => { if (!isSelected) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
|
|
>
|
|
{isDir ? (
|
|
<span style={{ fontSize: "0.55rem", color: "#a09a90", transform: node.expanded ? "rotate(90deg)" : "none", display: "inline-block", transition: "transform 0.12s", flexShrink: 0 }}>▶</span>
|
|
) : (
|
|
<FileIcon name={node.name} type="file" />
|
|
)}
|
|
<span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
|
{node.name}
|
|
</span>
|
|
</button>
|
|
{isDir && node.expanded && node.children && (
|
|
node.children.map(child => (
|
|
<TreeNodeRow
|
|
key={child.path}
|
|
node={child}
|
|
depth={depth + 1}
|
|
selectedPath={selectedPath}
|
|
onSelect={onSelect}
|
|
onToggle={onToggle}
|
|
projectId={projectId}
|
|
/>
|
|
))
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ── Main page ─────────────────────────────────────────────────────────────────
|
|
|
|
export default function BuildPage() {
|
|
const params = useParams();
|
|
const projectId = params.projectId as string;
|
|
const { status: authStatus } = useSession();
|
|
|
|
// File tree state
|
|
const [tree, setTree] = useState<TreeNode[]>([]);
|
|
const [treeLoading, setTreeLoading] = useState(true);
|
|
const [treeError, setTreeError] = useState<string | null>(null);
|
|
|
|
// File content state
|
|
const [selectedPath, setSelectedPath] = useState<string | null>(null);
|
|
const [fileContent, setFileContent] = useState<string | null>(null);
|
|
const [fileLoading, setFileLoading] = useState(false);
|
|
const [fileName, setFileName] = useState<string | null>(null);
|
|
|
|
// Fetch a directory listing and return items
|
|
const fetchDir = useCallback(async (path: string): Promise<TreeNode[]> => {
|
|
const res = await fetch(`/api/projects/${projectId}/file?path=${encodeURIComponent(path)}`);
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.error ?? "Failed to load");
|
|
const items: FileItem[] = data.items ?? [];
|
|
return items.map(item => ({
|
|
name: item.name,
|
|
path: item.path,
|
|
type: item.type === "dir" ? "dir" : "file",
|
|
expanded: false,
|
|
loaded: item.type !== "dir",
|
|
children: item.type === "dir" ? [] : undefined,
|
|
}));
|
|
}, [projectId]);
|
|
|
|
// Load root tree on mount
|
|
useEffect(() => {
|
|
if (authStatus !== "authenticated") return;
|
|
setTreeLoading(true);
|
|
fetchDir("")
|
|
.then(nodes => { setTree(nodes); setTreeLoading(false); })
|
|
.catch(e => { setTreeError(e.message); setTreeLoading(false); });
|
|
}, [authStatus, fetchDir]);
|
|
|
|
// Toggle dir expand/collapse
|
|
const handleToggle = useCallback(async (path: string) => {
|
|
setTree(prev => {
|
|
const toggle = (nodes: TreeNode[]): TreeNode[] =>
|
|
nodes.map(n => {
|
|
if (n.path === path) {
|
|
return { ...n, expanded: !n.expanded };
|
|
}
|
|
if (n.children) return { ...n, children: toggle(n.children) };
|
|
return n;
|
|
});
|
|
return toggle(prev);
|
|
});
|
|
|
|
// Lazy-load children if not yet fetched
|
|
const findNode = (nodes: TreeNode[], p: string): TreeNode | null => {
|
|
for (const n of nodes) {
|
|
if (n.path === p) return n;
|
|
if (n.children) { const found = findNode(n.children, p); if (found) return found; }
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const node = findNode(tree, path);
|
|
if (node && !node.loaded) {
|
|
try {
|
|
const children = await fetchDir(path);
|
|
setTree(prev => {
|
|
const update = (nodes: TreeNode[]): TreeNode[] =>
|
|
nodes.map(n => {
|
|
if (n.path === path) return { ...n, children, loaded: true };
|
|
if (n.children) return { ...n, children: update(n.children) };
|
|
return n;
|
|
});
|
|
return update(prev);
|
|
});
|
|
} catch { /* silently fail */ }
|
|
}
|
|
}, [tree, fetchDir]);
|
|
|
|
// Select file and load content
|
|
const handleSelectFile = useCallback(async (path: string) => {
|
|
setSelectedPath(path);
|
|
setFileContent(null);
|
|
setFileName(path.split("/").pop() ?? null);
|
|
setFileLoading(true);
|
|
try {
|
|
const res = await fetch(`/api/projects/${projectId}/file?path=${encodeURIComponent(path)}`);
|
|
const data = await res.json();
|
|
setFileContent(data.content ?? "");
|
|
} catch {
|
|
setFileContent("// Failed to load file content");
|
|
} finally {
|
|
setFileLoading(false);
|
|
}
|
|
}, [projectId]);
|
|
|
|
const lang = fileName ? langFromName(fileName) : "text";
|
|
const lines = (fileContent ?? "").split("\n");
|
|
|
|
return (
|
|
<div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
|
|
|
|
{/* ── File tree panel ── */}
|
|
<div style={{
|
|
width: 240, flexShrink: 0,
|
|
borderRight: "1px solid #e8e4dc",
|
|
background: "#faf8f5",
|
|
display: "flex", flexDirection: "column",
|
|
overflow: "hidden",
|
|
}}>
|
|
{/* Tree header */}
|
|
<div style={{
|
|
padding: "12px 14px 10px",
|
|
borderBottom: "1px solid #e8e4dc",
|
|
fontSize: "0.65rem", fontWeight: 700,
|
|
color: "#a09a90", letterSpacing: "0.08em",
|
|
textTransform: "uppercase", flexShrink: 0,
|
|
}}>
|
|
Files
|
|
</div>
|
|
|
|
{/* Tree content */}
|
|
<div style={{ flex: 1, overflow: "auto", padding: "6px 4px" }}>
|
|
{treeLoading && (
|
|
<div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6" }}>
|
|
Loading…
|
|
</div>
|
|
)}
|
|
{treeError && (
|
|
<div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#e53e3e" }}>
|
|
{treeError === "No Gitea repo connected"
|
|
? "No repository connected yet. Create a project to get started."
|
|
: treeError}
|
|
</div>
|
|
)}
|
|
{!treeLoading && !treeError && tree.length === 0 && (
|
|
<div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6" }}>
|
|
Repository is empty.
|
|
</div>
|
|
)}
|
|
{tree.map(node => (
|
|
<TreeNodeRow
|
|
key={node.path}
|
|
node={node}
|
|
depth={0}
|
|
selectedPath={selectedPath}
|
|
onSelect={handleSelectFile}
|
|
onToggle={handleToggle}
|
|
projectId={projectId}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Code preview panel ── */}
|
|
<div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, background: "#1e1e1e", overflow: "hidden" }}>
|
|
|
|
{/* File path breadcrumb */}
|
|
<div style={{
|
|
padding: "10px 20px",
|
|
borderBottom: "1px solid #333",
|
|
background: "#252526",
|
|
display: "flex", alignItems: "center", gap: 8,
|
|
flexShrink: 0,
|
|
}}>
|
|
{selectedPath ? (
|
|
<span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#a09a90" }}>
|
|
{selectedPath.split("/").map((seg, i, arr) => (
|
|
<span key={i}>
|
|
{i > 0 && <span style={{ color: "#555", margin: "0 4px" }}>/</span>}
|
|
<span style={{ color: i === arr.length - 1 ? "#d4d4d4" : "#a09a90" }}>{seg}</span>
|
|
</span>
|
|
))}
|
|
</span>
|
|
) : (
|
|
<span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#555" }}>
|
|
Select a file to view
|
|
</span>
|
|
)}
|
|
{selectedPath && (
|
|
<span style={{ marginLeft: "auto", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.65rem", color: "#555", textTransform: "uppercase" }}>
|
|
{lang}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Code area */}
|
|
<div style={{ flex: 1, overflow: "auto", display: "flex" }}>
|
|
{!selectedPath && !fileLoading && (
|
|
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.82rem", fontFamily: "IBM Plex Mono, monospace" }}>
|
|
Select a file from the tree
|
|
</div>
|
|
)}
|
|
{fileLoading && (
|
|
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.82rem", fontFamily: "IBM Plex Mono, monospace" }}>
|
|
Loading…
|
|
</div>
|
|
)}
|
|
{!fileLoading && fileContent !== null && (
|
|
<div style={{ display: "flex", width: "100%", overflow: "auto" }}>
|
|
{/* Line numbers */}
|
|
<div style={{
|
|
padding: "16px 0",
|
|
background: "#1e1e1e",
|
|
borderRight: "1px solid #2d2d2d",
|
|
textAlign: "right",
|
|
userSelect: "none",
|
|
flexShrink: 0,
|
|
minWidth: 44,
|
|
}}>
|
|
{lines.map((_, i) => (
|
|
<div key={i} style={{
|
|
fontFamily: "IBM Plex Mono, monospace",
|
|
fontSize: "0.73rem",
|
|
lineHeight: "1.4em",
|
|
color: "#555",
|
|
padding: "0 12px 0 8px",
|
|
}}>
|
|
{i + 1}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* Code content */}
|
|
<div style={{
|
|
padding: "16px 24px",
|
|
fontFamily: "IBM Plex Mono, monospace",
|
|
fontSize: "0.73rem",
|
|
lineHeight: "1.4em",
|
|
color: "#d4d4d4",
|
|
flex: 1,
|
|
whiteSpace: "pre",
|
|
overflow: "auto",
|
|
}}>
|
|
{highlightCode(fileContent, lang)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|