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,134 @@
+import { useEffect, useRef } from "react";
+import { useNotifications } from "../hooks/use-notifications";
+import { NotificationItem } from "./notification-item";
+import { Icon } from "./icon";
+
+interface NotificationCenterProps {
+	isMobileTerminal?: boolean;
+}
+
+export function NotificationCenter({
+	isMobileTerminal = false,
+}: NotificationCenterProps) {
+	const {
+		notifications,
+		unreadCount,
+		markRead,
+		markAllRead,
+		clearAll,
+		dismiss,
+		refreshList,
+		isDropdownOpen,
+		setIsDropdownOpen,
+	} = useNotifications();
+
+	const dropdownRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!isDropdownOpen) return;
+
+		const handleMouseDown = (e: MouseEvent) => {
+			if (
+				dropdownRef.current &&
+				!dropdownRef.current.contains(e.target as Node)
+			) {
+				setIsDropdownOpen(false);
+			}
+		};
+
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				setIsDropdownOpen(false);
+			}
+		};
+
+		document.addEventListener("mousedown", handleMouseDown);
+		document.addEventListener("keydown", handleKeyDown);
+
+		return () => {
+			document.removeEventListener("mousedown", handleMouseDown);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [isDropdownOpen, setIsDropdownOpen]);
+
+	useEffect(() => {
+		if (isDropdownOpen) {
+			void refreshList();
+		}
+	}, [isDropdownOpen, refreshList]);
+
+	if (isMobileTerminal) {
+		return null;
+	}
+
+	const badgeText = unreadCount > 99 ? "99+" : String(unreadCount);
+
+	return (
+		<div className="notification-center">
+			<button
+				type="button"
+				className="notification-bell"
+				onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+				aria-label="Notifications"
+				aria-haspopup="dialog"
+				aria-expanded={isDropdownOpen}
+			>
+				<Icon name="bell" size="md" />
+				{unreadCount > 0 && (
+					<span className="nav-badge notification-badge">{badgeText}</span>
+				)}
+			</button>
+
+			{isDropdownOpen && (
+				<div
+					ref={dropdownRef}
+					role="dialog"
+					aria-label="Notifications"
+					className="notification-dropdown"
+				>
+					<div className="notification-dropdown-header">
+						<span>Notifications</span>
+					</div>
+
+					<ul className="notification-list">
+						{notifications.length === 0 ? (
+							<li className="notification-empty">No notifications</li>
+						) : (
+							notifications.map((n) => (
+								<NotificationItem
+									key={n.id}
+									notification={n}
+									onMarkRead={markRead}
+									onDismiss={dismiss}
+								/>
+							))
+						)}
+					</ul>
+
+					{notifications.length > 0 && (
+						<div className="notification-dropdown-footer">
+							<button
+								type="button"
+								className="notification-mark-all"
+								onClick={() => {
+									void markAllRead();
+								}}
+							>
+								Mark all as read
+							</button>
+							<button
+								type="button"
+								className="notification-clear-all"
+								onClick={() => {
+									void clearAll();
+								}}
+							>
+								Clear all
+							</button>
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}