feat: scope Build file browser to selected app, rename Apps → Build
- Sidebar "Apps" section renamed to "Build" - Each app now links to /build?app=<name>&root=<path> so the browser opens scoped to that app's subdirectory only - Build page shows an empty-state prompt when no app is selected - File tree header shows the selected app name, breadcrumb shows relative path within the app (strips the root prefix) - Wraps useSearchParams in Suspense for Next.js static rendering Made-with: Cursor
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useEffect, useState, useCallback, Suspense } from "react";
|
||||
import { useParams, useSearchParams } from "next/navigation";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
// ── Types ─────────────────────────────────────────────────────────────────────
|
||||
@@ -22,7 +22,7 @@ interface TreeNode {
|
||||
loaded?: boolean;
|
||||
}
|
||||
|
||||
// ── Language detection for syntax colouring hint ─────────────────────────────
|
||||
// ── Language detection ────────────────────────────────────────────────────────
|
||||
|
||||
function langFromName(name: string): string {
|
||||
const ext = name.split(".").pop()?.toLowerCase() ?? "";
|
||||
@@ -37,162 +37,157 @@ function langFromName(name: string): string {
|
||||
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 ────────────────────────────────────────────
|
||||
// ── Simple token 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
|
||||
if (lang === "text" || lang === "dotenv" || lang === "dockerfile") {
|
||||
return <div key={i}>{line || "\u00a0"}</div>;
|
||||
}
|
||||
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 (commentPrefixes.some(p => line.trimStart().startsWith(p))) {
|
||||
return <div key={i}><span style={{ color: "#6a9955" }}>{line}</span></div>;
|
||||
}
|
||||
}
|
||||
|
||||
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>);
|
||||
const parts = line.split(kwRe);
|
||||
const tokens = parts.map((part, j) => {
|
||||
if (!part) return null;
|
||||
if (/^(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)) {
|
||||
return <span key={j} style={{ color: "#569cd6" }}>{part}</span>;
|
||||
}
|
||||
if (/^(['"`]).*\1$/.test(part.trim())) {
|
||||
return <span key={j} style={{ color: "#ce9178" }}>{part}</span>;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={i} style={{ minHeight: "1.4em" }}>
|
||||
{tokens.length > 0 ? tokens : " "}
|
||||
</div>
|
||||
);
|
||||
return <span key={j}>{part}</span>;
|
||||
});
|
||||
return <div key={i} style={{ minHeight: "1.4em" }}>{tokens.length ? tokens : "\u00a0"}</div>;
|
||||
});
|
||||
}
|
||||
|
||||
// ── File tree node ────────────────────────────────────────────────────────────
|
||||
// ── Tree row ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function TreeNodeRow({
|
||||
node,
|
||||
depth,
|
||||
selectedPath,
|
||||
onSelect,
|
||||
onToggle,
|
||||
projectId,
|
||||
function TreeRow({
|
||||
node, depth, selectedPath, onSelect, onToggle,
|
||||
}: {
|
||||
node: TreeNode;
|
||||
depth: number;
|
||||
selectedPath: string | null;
|
||||
onSelect: (path: string, type: "file" | "dir") => void;
|
||||
onSelect: (path: string) => void;
|
||||
onToggle: (path: string) => void;
|
||||
projectId: string;
|
||||
}) {
|
||||
const isSelected = selectedPath === node.path;
|
||||
const isDir = node.type === "dir";
|
||||
const ext = node.name.split(".").pop()?.toLowerCase() ?? "";
|
||||
const fileColor =
|
||||
ext === "tsx" || ext === "ts" ? "#3178c6"
|
||||
: ext === "jsx" || ext === "js" ? "#f0db4f"
|
||||
: ext === "css" || ext === "scss" ? "#e879f9"
|
||||
: ext === "json" ? "#a09a90"
|
||||
: ext === "md" || ext === "mdx" ? "#6b6560"
|
||||
: "#b5b0a6";
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => isDir ? onToggle(node.path) : onSelect(node.path, "file")}
|
||||
onClick={() => isDir ? onToggle(node.path) : onSelect(node.path)}
|
||||
style={{
|
||||
display: "flex", alignItems: "center",
|
||||
gap: 6, width: "100%", textAlign: "left",
|
||||
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",
|
||||
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>
|
||||
<span style={{
|
||||
fontSize: "0.52rem", color: "#a09a90", flexShrink: 0,
|
||||
display: "inline-block", transition: "transform 0.12s",
|
||||
transform: node.expanded ? "rotate(90deg)" : "none",
|
||||
}}>▶</span>
|
||||
) : (
|
||||
<FileIcon name={node.name} type="file" />
|
||||
<span style={{ color: fileColor, fontSize: "0.7rem", flexShrink: 0 }}>◌</span>
|
||||
)}
|
||||
<span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{node.name}
|
||||
</span>
|
||||
</button>
|
||||
{isDir && node.expanded && node.children && (
|
||||
node.children.map(child => (
|
||||
<TreeNodeRow
|
||||
{isDir && node.expanded && node.children?.map(child => (
|
||||
<TreeRow
|
||||
key={child.path}
|
||||
node={child}
|
||||
depth={depth + 1}
|
||||
selectedPath={selectedPath}
|
||||
onSelect={onSelect}
|
||||
onToggle={onToggle}
|
||||
projectId={projectId}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main page ─────────────────────────────────────────────────────────────────
|
||||
// ── Empty state ───────────────────────────────────────────────────────────────
|
||||
|
||||
export default function BuildPage() {
|
||||
function EmptyState() {
|
||||
return (
|
||||
<div style={{
|
||||
display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
|
||||
height: "100%", gap: 12, padding: 40,
|
||||
}}>
|
||||
<div style={{
|
||||
width: 48, height: 48, borderRadius: 12, background: "#f0ece4",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: "1.4rem", color: "#b5b0a6",
|
||||
}}>▢</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<div style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6 }}>
|
||||
Select an app to browse
|
||||
</div>
|
||||
<div style={{ fontSize: "0.78rem", color: "#a09a90", maxWidth: 260, lineHeight: 1.5 }}>
|
||||
Choose one of your apps from the Build section in the left sidebar to explore its files.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Inner page (needs useSearchParams) ───────────────────────────────────────
|
||||
|
||||
function BuildPageInner() {
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
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);
|
||||
// Which app the user clicked (from sidebar link)
|
||||
const appName = searchParams.get("app") ?? "";
|
||||
const rootPath = searchParams.get("root") ?? "";
|
||||
|
||||
// File content state
|
||||
const [tree, setTree] = useState<TreeNode[]>([]);
|
||||
const [treeLoading, setTreeLoading] = useState(false);
|
||||
const [treeError, setTreeError] = useState<string | null>(null);
|
||||
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 => ({
|
||||
return items
|
||||
.filter(item => item.type !== "symlink")
|
||||
.sort((a, b) => {
|
||||
if (a.type === "dir" && b.type !== "dir") return -1;
|
||||
if (a.type !== "dir" && b.type === "dir") return 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
})
|
||||
.map(item => ({
|
||||
name: item.name,
|
||||
path: item.path,
|
||||
type: item.type === "dir" ? "dir" : "file",
|
||||
@@ -202,34 +197,35 @@ export default function BuildPage() {
|
||||
}));
|
||||
}, [projectId]);
|
||||
|
||||
// Load root tree on mount
|
||||
// Load the app's root dir whenever app changes
|
||||
useEffect(() => {
|
||||
if (authStatus !== "authenticated") return;
|
||||
if (!rootPath || authStatus !== "authenticated") return;
|
||||
setTree([]);
|
||||
setSelectedPath(null);
|
||||
setFileContent(null);
|
||||
setTreeError(null);
|
||||
setTreeLoading(true);
|
||||
fetchDir("")
|
||||
fetchDir(rootPath)
|
||||
.then(nodes => { setTree(nodes); setTreeLoading(false); })
|
||||
.catch(e => { setTreeError(e.message); setTreeLoading(false); });
|
||||
}, [authStatus, fetchDir]);
|
||||
}, [rootPath, authStatus, fetchDir]);
|
||||
|
||||
// Toggle dir expand/collapse
|
||||
// Toggle dir expand/collapse with lazy-load
|
||||
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.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; }
|
||||
if (n.children) { const f = findNode(n.children, p); if (f) return f; }
|
||||
}
|
||||
return null;
|
||||
};
|
||||
@@ -251,7 +247,7 @@ export default function BuildPage() {
|
||||
}
|
||||
}, [tree, fetchDir]);
|
||||
|
||||
// Select file and load content
|
||||
// Select a file and load its content
|
||||
const handleSelectFile = useCallback(async (path: string) => {
|
||||
setSelectedPath(path);
|
||||
setFileContent(null);
|
||||
@@ -271,88 +267,89 @@ export default function BuildPage() {
|
||||
const lang = fileName ? langFromName(fileName) : "text";
|
||||
const lines = (fileContent ?? "").split("\n");
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
|
||||
if (!appName || !rootPath) {
|
||||
return <EmptyState />;
|
||||
}
|
||||
|
||||
{/* ── File tree panel ── */}
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100%", overflow: "hidden" }}>
|
||||
|
||||
{/* ── File tree ── */}
|
||||
<div style={{
|
||||
width: 240, flexShrink: 0,
|
||||
width: 230, flexShrink: 0,
|
||||
borderRight: "1px solid #e8e4dc",
|
||||
background: "#faf8f5",
|
||||
display: "flex", flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
}}>
|
||||
{/* Tree header */}
|
||||
{/* App name header */}
|
||||
<div style={{
|
||||
padding: "12px 14px 10px",
|
||||
padding: "11px 14px 10px",
|
||||
borderBottom: "1px solid #e8e4dc",
|
||||
fontSize: "0.65rem", fontWeight: 700,
|
||||
color: "#a09a90", letterSpacing: "0.08em",
|
||||
textTransform: "uppercase", flexShrink: 0,
|
||||
display: "flex", alignItems: "center", gap: 8, flexShrink: 0,
|
||||
}}>
|
||||
Files
|
||||
<span style={{ fontSize: "0.72rem", color: "#a09a90" }}>▢</span>
|
||||
<span style={{ fontSize: "0.78rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif" }}>
|
||||
{appName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Tree content */}
|
||||
{/* Tree */}
|
||||
<div style={{ flex: 1, overflow: "auto", padding: "6px 4px" }}>
|
||||
{treeLoading && (
|
||||
<div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6" }}>
|
||||
Loading…
|
||||
</div>
|
||||
<div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>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>
|
||||
<div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#e53e3e", fontFamily: "Outfit, sans-serif" }}>{treeError}</div>
|
||||
)}
|
||||
{!treeLoading && !treeError && tree.length === 0 && (
|
||||
<div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6" }}>
|
||||
Repository is empty.
|
||||
</div>
|
||||
<div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Empty folder.</div>
|
||||
)}
|
||||
{tree.map(node => (
|
||||
<TreeNodeRow
|
||||
<TreeRow
|
||||
key={node.path}
|
||||
node={node}
|
||||
depth={0}
|
||||
selectedPath={selectedPath}
|
||||
onSelect={handleSelectFile}
|
||||
onToggle={handleToggle}
|
||||
projectId={projectId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Code preview panel ── */}
|
||||
{/* ── Code preview ── */}
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, background: "#1e1e1e", overflow: "hidden" }}>
|
||||
|
||||
{/* File path breadcrumb */}
|
||||
{/* Breadcrumb bar */}
|
||||
<div style={{
|
||||
padding: "10px 20px",
|
||||
borderBottom: "1px solid #333",
|
||||
borderBottom: "1px solid #2d2d2d",
|
||||
background: "#252526",
|
||||
display: "flex", alignItems: "center", gap: 8,
|
||||
flexShrink: 0,
|
||||
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) => (
|
||||
{/* Show path relative to rootPath */}
|
||||
{(() => {
|
||||
const rel = selectedPath.startsWith(rootPath + "/")
|
||||
? selectedPath.slice(rootPath.length + 1)
|
||||
: selectedPath;
|
||||
return rel.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 style={{ color: i === arr.length - 1 ? "#d4d4d4" : "#888" }}>{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" }}>
|
||||
{fileName && (
|
||||
<span style={{ marginLeft: "auto", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.63rem", color: "#555", textTransform: "uppercase" }}>
|
||||
{lang}
|
||||
</span>
|
||||
)}
|
||||
@@ -361,12 +358,12 @@ export default function BuildPage() {
|
||||
{/* 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" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.8rem", 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" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.8rem", fontFamily: "IBM Plex Mono, monospace" }}>
|
||||
Loading…
|
||||
</div>
|
||||
)}
|
||||
@@ -374,36 +371,25 @@ export default function BuildPage() {
|
||||
<div style={{ display: "flex", width: "100%", overflow: "auto" }}>
|
||||
{/* Line numbers */}
|
||||
<div style={{
|
||||
padding: "16px 0",
|
||||
background: "#1e1e1e",
|
||||
padding: "16px 0", background: "#1e1e1e",
|
||||
borderRight: "1px solid #2d2d2d",
|
||||
textAlign: "right",
|
||||
userSelect: "none",
|
||||
flexShrink: 0,
|
||||
minWidth: 44,
|
||||
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",
|
||||
fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem",
|
||||
lineHeight: "1.4em", color: "#555", padding: "0 12px 0 8px",
|
||||
}}>
|
||||
{i + 1}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Code content */}
|
||||
{/* Code */}
|
||||
<div style={{
|
||||
padding: "16px 24px",
|
||||
fontFamily: "IBM Plex Mono, monospace",
|
||||
fontSize: "0.73rem",
|
||||
lineHeight: "1.4em",
|
||||
color: "#d4d4d4",
|
||||
flex: 1,
|
||||
whiteSpace: "pre",
|
||||
overflow: "auto",
|
||||
fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem",
|
||||
lineHeight: "1.4em", color: "#d4d4d4",
|
||||
flex: 1, whiteSpace: "pre", overflow: "auto",
|
||||
}}>
|
||||
{highlightCode(fileContent, lang)}
|
||||
</div>
|
||||
@@ -414,3 +400,13 @@ export default function BuildPage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Page export (Suspense wraps useSearchParams) ──────────────────────────────
|
||||
|
||||
export default function BuildPage() {
|
||||
return (
|
||||
<Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "Outfit, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
|
||||
<BuildPageInner />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -312,15 +312,15 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Apps ── */}
|
||||
<SectionHeading label="Apps" collapsed={collapsed} />
|
||||
{/* ── Build ── */}
|
||||
<SectionHeading label="Build" collapsed={collapsed} />
|
||||
{apps.length > 0 ? (
|
||||
apps.map(app => (
|
||||
<SectionRow
|
||||
key={app.name}
|
||||
icon="▢"
|
||||
label={app.name}
|
||||
href={`${base}/build`}
|
||||
href={`${base}/build?app=${encodeURIComponent(app.name)}&root=${encodeURIComponent(app.path)}`}
|
||||
collapsed={collapsed}
|
||||
/>
|
||||
))
|
||||
|
||||
Reference in New Issue
Block a user