fix: enable folder navigation in workspace file browser

FilesTab in WorkspaceDetailPage was returning early for directories with
no action, making folders unclickable.

Changes:
- use-workspace-files.ts: add currentPath state and navigateTo() function;
  refresh() now passes currentPath to listWorkspaceFiles API
- WorkspaceDetailPage.tsx FilesTab: handleSelect now calls navigateTo()
  for directories; added navigateUp() button using '..' when not at root
- Clear selected file/editor state when changing directories

Quality gates: tsc --noEmit pass, npm run build pass, 82/82 tests pass
This commit is contained in:
Developer
2026-06-10 13:09:42 +00:00
parent 82091e31a8
commit 886be83af5
2 changed files with 37 additions and 5 deletions
+26 -2
View File
@@ -150,7 +150,7 @@ function MobileTabBar({
/* ─── Files Tab ─── */
function FilesTab({ workspaceId }: { workspaceId: string }) {
const { entries, content, loadFile, saveFile, loading, error } =
const { entries, content, currentPath, loadFile, saveFile, loading, error, navigateTo } =
useWorkspaceFiles(workspaceId);
const { status, commit, push, pull, fetch } = useWorkspaceGit(workspaceId);
const [selectedPath, setSelectedPath] = useState<string | null>(null);
@@ -159,13 +159,28 @@ function FilesTab({ workspaceId }: { workspaceId: string }) {
const [commitMessage, setCommitMessage] = useState("");
const handleSelect = (entry: FileEntry) => {
if (entry.type === "directory") return;
if (entry.type === "directory") {
setSelectedPath(null);
setIsEditing(false);
setEditContent(null);
navigateTo(entry.path);
return;
}
setSelectedPath(entry.path);
setIsEditing(false);
setEditContent(null);
loadFile(entry.path);
};
const navigateUp = () => {
if (!currentPath) return;
const parentPath = currentPath.split("/").slice(0, -1).join("/");
navigateTo(parentPath);
setSelectedPath(null);
setIsEditing(false);
setEditContent(null);
};
const handleEdit = () => {
if (content !== null) {
setEditContent(content);
@@ -224,6 +239,15 @@ function FilesTab({ workspaceId }: { workspaceId: string }) {
)}
<div className="files-split">
<div className="file-tree">
{currentPath && (
<button
className="tree-entry tree-up"
onClick={navigateUp}
type="button"
>
<Icon name="folder" size="sm" /> ..
</button>
)}
{loading && <p className="muted">Loading...</p>}
{error && <p className="error-text">{error}</p>}
{entries.map((entry) => (