refactor: organize frontend components into features/ directories

Moved 43 component files into 9 feature domains:
- features/git/ — commit-dialog, commit-panel, file-editor, git-mount-editor,
  git-toolbar, merge-dialog
- features/project/ — repositories-settings-tab, repository-create-dialog
- features/terminal/ — special-keys-panel, special-keys-strip,
  terminal-session-tabs, terminal
- features/workspace/ — workspace-card, workspace-create-form,
  workspace-header, workspace-instance-chips
- features/session/ — create-session-form, session-card, session-list
- features/tool/ — instance-list, manifest-editor, start-tool-fab,
  start-tool-modal, tool-starter, tools-bottom-sheet
- features/notification/ — event-toast-bridge, notification-center,
  notification-item
- features/settings/ — settings-tab-layout
- features/mobile/ — mobile-action-sheet, mobile-detail-view, mobile-edit-view,
  mobile-fab, mobile-list-view, mobile-nav, mobile-page-header,
  mobile-terminal-header, mobile-terminal-wrapper

Updated all imports across pages and components.
Root components/ now only contains generic UI pieces:
app-shell, code-editor, data-states, icon, protected-route, syntax-highlighter.

Quality gates: verified no remaining old imports.
This commit is contained in:
2026-06-04 12:37:24 +02:00
parent 7224afafd1
commit 1021d61be3
54 changed files with 31 additions and 31 deletions
@@ -0,0 +1,118 @@
/** Floating action button to start a tool from any page. */
import { useState } from "react";
import { Icon } from "./icon";
import { ToolStarter } from "./tool-starter";
import type { Workspace } from "../types/workspace";
import { listAllWorkspaces } from "../api/workspaces";
export function StartToolFAB() {
const [open, setOpen] = useState(false);
const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
const [workspacesLoading, setWorkspacesLoading] = useState(false);
const [selectedWorkspace, setSelectedWorkspace] = useState<Workspace | null>(
null,
);
const handleOpen = async () => {
setOpen(true);
setWorkspacesLoading(true);
try {
const data = await listAllWorkspaces();
setWorkspaces(data);
} catch {
// ignore
} finally {
setWorkspacesLoading(false);
}
};
const handleClose = () => {
setOpen(false);
setSelectedWorkspace(null);
};
return (
<>
<button
className="start-tool-fab"
onClick={handleOpen}
title="Start a new tool"
type="button"
aria-label="Start a new tool"
>
<Icon name="play" size="md" />
</button>
{open && (
<div className="modal-overlay" onClick={handleClose}>
<div
className="modal-content start-tool-modal"
onClick={(e) => e.stopPropagation()}
>
<div className="modal-header">
<h3>Start Tool</h3>
<button
className="ghost-button small"
onClick={handleClose}
type="button"
aria-label="Close"
>
<Icon name="close" size="sm" />
</button>
</div>
{workspacesLoading ? (
<p className="muted">Loading workspaces...</p>
) : workspaces.length === 0 ? (
<p className="muted">
No workspaces yet.{" "}
<a href="/workspaces">Create a workspace first</a>.
</p>
) : !selectedWorkspace ? (
<div className="form-group">
<label htmlFor="fab-workspace-select">Select a workspace</label>
<select
id="fab-workspace-select"
value=""
onChange={(e) => {
const ws = workspaces.find((w) => w.id === e.target.value);
if (ws) setSelectedWorkspace(ws);
}}
>
<option value="">Choose a workspace...</option>
{workspaces.map((ws) => (
<option key={ws.id} value={ws.id}>
{ws.project_name} / {ws.repo_name} / {ws.name}
</option>
))}
</select>
</div>
) : (
<>
<div className="tool-starter-header">
<h4>
{selectedWorkspace.project_name} /{" "}
{selectedWorkspace.repo_name} / {selectedWorkspace.name}
</h4>
<button
className="ghost-button small"
onClick={() => setSelectedWorkspace(null)}
type="button"
>
Change
</button>
</div>
<ToolStarter
workspace={selectedWorkspace}
onStarted={handleClose}
onCancel={() => setSelectedWorkspace(null)}
/>
</>
)}
</div>
</div>
)}
</>
);
}