refactor: extract FileBrowser and shared UI primitives (Task 1.2)

- Extract FileBrowser from inline definition in repo-workspace.tsx - Create components/features/git/FileBrowser.tsx with module CSS - Create reusable UI primitives: LoadingState, ErrorState, StatusBadge - Create barrel exports for components/ui/ and components/features/git/ - Replace inline loading/error patterns in dashboard, sessions, repo-workspace Quality gates: tsc (pass), eslint (pass) Refs: repo-restructure Task 1.2
2026-06-02 19:10:33 +00:00
parent 985ca538e3
commit aee3987c24
15 changed files with 1845 additions and 254 deletions
@@ -0,0 +1,63 @@
+.fileTree {
+  flex: 1;
+  overflow: auto;
+  padding: 0.5rem;
+}
+
+.treeEntry {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  background: none;
+  color: var(--ink);
+  text-align: left;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.treeEntry:hover {
+  background: var(--bg);
+}
+
+.treeDirectory {
+  font-weight: 500;
+}
+
+.treeUp {
+  color: var(--muted);
+  font-style: italic;
+}
+
+.fileStatusIndicator {
+  float: right;
+  font-size: 0.75rem;
+  font-weight: bold;
+  padding: 0 0.375rem;
+  border-radius: 3px;
+  margin-left: 0.5rem;
+}
+
+.fileStatusIndicator.modified {
+  color: #f59e0b;
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.fileStatusIndicator.added {
+  color: #10b981;
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.fileStatusIndicator.deleted {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.fileStatusIndicator.untracked {
+  color: #6b7280;
+  background: rgba(107, 114, 128, 0.1);
+}
@@ -0,0 +1,150 @@
+import { useCallback, useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { Icon } from "../../icon";
+import { apiClient } from "../../../api/client";
+import type { GitStatus } from "../../../types/git-repository";
+
+interface FileTreeEntry {
+	name: string;
+	type: "file" | "directory";
+	path: string;
+	size?: number;
+	mode?: string;
+	last_commit?: {
+		hash: string;
+		message: string;
+		author: string;
+		date: string;
+	} | null;
+}
+
+interface FileBrowserProps {
+	projectId: string;
+	repoId: string;
+	gitStatus: GitStatus | null;
+}
+
+export const FileBrowser: React.FC<FileBrowserProps> = ({
+	projectId,
+	repoId,
+	gitStatus,
+}) => {
+	const [searchParams, setSearchParams] = useSearchParams();
+	const [entries, setEntries] = useState<FileTreeEntry[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	const branch = searchParams.get("branch") || "main";
+	const path = searchParams.get("path") || "";
+
+	const loadFiles = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const response = await apiClient.get(
+				`/projects/${projectId}/repositories/${repoId}/files`,
+				{
+					params: {
+						branch,
+						path,
+					},
+				},
+			);
+			setEntries(response.data.entries || []);
+		} catch {
+			setError("Failed to load files");
+		} finally {
+			setLoading(false);
+		}
+	}, [projectId, repoId, branch, path]);
+
+	useEffect(() => {
+		void loadFiles();
+	}, [loadFiles]);
+
+	// Listen for refresh events
+	useEffect(() => {
+		const handleRefresh = () => void loadFiles();
+		window.addEventListener("refresh-file-tree", handleRefresh);
+		return () => window.removeEventListener("refresh-file-tree", handleRefresh);
+	}, [loadFiles]);
+
+	const handleEntryClick = (entry: FileTreeEntry) => {
+		if (entry.type === "directory") {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set("path", entry.path);
+			setSearchParams(newParams);
+		} else {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set("file", entry.path);
+			setSearchParams(newParams);
+		}
+	};
+
+	const navigateUp = () => {
+		if (!path) return;
+		const parentPath = path.split("/").slice(0, -1).join("/");
+		const newParams = new URLSearchParams(searchParams);
+		if (parentPath) {
+			newParams.set("path", parentPath);
+		} else {
+			newParams.delete("path");
+		}
+		setSearchParams(newParams);
+	};
+
+	const getFileStatus = (filePath: string): string | null => {
+		if (!gitStatus) return null;
+		if (gitStatus.modified.includes(filePath)) return "modified";
+		if (gitStatus.added.includes(filePath)) return "added";
+		if (gitStatus.deleted.includes(filePath)) return "deleted";
+		if (gitStatus.untracked.includes(filePath)) return "untracked";
+		return null;
+	};
+
+	if (loading) return <p className="muted">Loading files...</p>;
+	if (error) return <p className="error-text">{error}</p>;
+
+	return (
+		<div className="file-tree">
+			{path && (
+				<button
+					className="tree-entry tree-up"
+					onClick={navigateUp}
+					type="button"
+				>
+					<Icon name="folder" size="sm" /> ..
+				</button>
+			)}
+			{entries.length === 0 && (
+				<p className="muted">No files in this repository yet.</p>
+			)}
+			{entries.map((entry) => {
+				const fileStatus =
+					entry.type === "file" ? getFileStatus(entry.path) : null;
+				return (
+					<button
+						key={entry.path}
+						className={`tree-entry ${entry.type === "directory" ? "tree-directory" : "tree-file"} ${fileStatus || ""}`}
+						onClick={() => handleEntryClick(entry)}
+						type="button"
+					>
+						<Icon
+							name={entry.type === "directory" ? "folder" : "file"}
+							size="sm"
+						/>{" "}
+						{entry.name}
+						{fileStatus && (
+							<span className={`file-status-indicator ${fileStatus}`}>
+								{fileStatus === "modified" && "M"}
+								{fileStatus === "added" && "A"}
+								{fileStatus === "deleted" && "D"}
+								{fileStatus === "untracked" && "?"}
+							</span>
+						)}
+					</button>
+				);
+			})}
+		</div>
+	);
+};
@@ -0,0 +1 @@
+export { FileBrowser } from "./FileBrowser";
				`@@ -0,0 +1 @@`
				`export { FileBrowser } from "./FileBrowser";`