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.
2026-06-04 12:37:24 +02:00
parent 7224afafd1
commit 1021d61be3
54 changed files with 31 additions and 31 deletions
@@ -0,0 +1,167 @@
+import React, { useState, useRef, useCallback } from "react";
+
+export interface TerminalSessionInfo {
+	id: string;
+	name: string;
+	status: "connecting" | "connected" | "disconnected" | "error" | "resetting";
+}
+
+export interface TerminalSessionTabsProps {
+	sessions: TerminalSessionInfo[];
+	activeSessionId: string;
+	onSelect: (sessionId: string) => void;
+	onClose: (sessionId: string) => void;
+	onCreate: () => void;
+	onRename: (sessionId: string, newName: string) => void;
+	isMobile?: boolean;
+}
+
+export const TerminalSessionTabs: React.FC<TerminalSessionTabsProps> = ({
+	sessions,
+	activeSessionId,
+	onSelect,
+	onClose,
+	onCreate,
+	onRename,
+	isMobile = false,
+}) => {
+	const [renamingId, setRenamingId] = useState<string | null>(null);
+	const [renameValue, setRenameValue] = useState("");
+	const [confirmCloseId, setConfirmCloseId] = useState<string | null>(null);
+	const renameInputRef = useRef<HTMLInputElement>(null);
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	const handleDoubleClick = useCallback((session: TerminalSessionInfo) => {
+		setRenamingId(session.id);
+		setRenameValue(session.name);
+		requestAnimationFrame(() => {
+			renameInputRef.current?.focus();
+			renameInputRef.current?.select();
+		});
+	}, []);
+
+	const commitRename = useCallback(() => {
+		if (renamingId && renameValue.trim()) {
+			onRename(renamingId, renameValue.trim());
+		}
+		setRenamingId(null);
+		setRenameValue("");
+	}, [renamingId, renameValue, onRename]);
+
+	const cancelRename = useCallback(() => {
+		setRenamingId(null);
+		setRenameValue("");
+	}, []);
+
+	const handleRenameKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLInputElement>) => {
+			if (e.key === "Enter") {
+				commitRename();
+			} else if (e.key === "Escape") {
+				cancelRename();
+			}
+		},
+		[commitRename, cancelRename],
+	);
+
+	const handleCloseClick = useCallback(
+		(e: React.MouseEvent, sessionId: string) => {
+			e.stopPropagation();
+			if (confirmCloseId === sessionId) {
+				setConfirmCloseId(null);
+				onClose(sessionId);
+			} else {
+				setConfirmCloseId(sessionId);
+				// Auto-dismiss confirm after 3s
+				setTimeout(() => {
+					setConfirmCloseId((prev) => (prev === sessionId ? null : prev));
+				}, 3000);
+			}
+		},
+		[confirmCloseId, onClose],
+	);
+
+	const isMaxSessions = sessions.length >= 5;
+
+	return (
+		<div
+			className={`terminal-session-tabs ${isMobile ? "mobile" : ""}`}
+			role="tablist"
+			aria-label="Terminal sessions"
+		>
+			<div className="terminal-session-tabs-scroll" ref={scrollRef}>
+				{sessions.map((session) => {
+					const isActive = session.id === activeSessionId;
+					const isRenaming = renamingId === session.id;
+					const isConfirmingClose = confirmCloseId === session.id;
+
+					return (
+						<div
+							key={session.id}
+							className={`terminal-session-tab ${isActive ? "active" : ""}`}
+							role="tab"
+							aria-selected={isActive}
+							onClick={() => onSelect(session.id)}
+							onDoubleClick={() => handleDoubleClick(session)}
+							title={isRenaming ? "" : `${session.name} (${session.status})`}
+						>
+							<span
+								className={`terminal-session-tab-status ${session.status}`}
+								aria-hidden="true"
+							/>
+							{isRenaming ? (
+								<input
+									ref={renameInputRef}
+									className="terminal-session-tab-input"
+									value={renameValue}
+									onChange={(e) => setRenameValue(e.target.value)}
+									onKeyDown={handleRenameKeyDown}
+									onBlur={commitRename}
+									onClick={(e) => e.stopPropagation()}
+									aria-label="Rename session"
+								/>
+							) : (
+								<span className="terminal-session-tab-name">
+									{session.name}
+								</span>
+							)}
+						{isConfirmingClose ? (
+							<button
+								className="terminal-session-tab-confirm"
+								onClick={(e) => {
+									e.stopPropagation();
+									setConfirmCloseId(null);
+									onClose(session.id);
+								}}
+								type="button"
+							>
+								Close?
+							</button>
+						) : (
+							<button
+								className="terminal-session-tab-close"
+								onClick={(e) => handleCloseClick(e, session.id)}
+								type="button"
+								aria-label={`Close session ${session.name}`}
+								tabIndex={-1}
+							>
+								×
+							</button>
+						)}
+						</div>
+					);
+				})}
+				<button
+					className="terminal-session-tab new-session"
+					onClick={onCreate}
+					disabled={isMaxSessions}
+					type="button"
+					aria-label="New session"
+					title={isMaxSessions ? "Maximum 5 sessions reached" : "New session"}
+				>
+					+
+				</button>
+			</div>
+		</div>
+	);
+};