Fix: Polish projects menu

Frontend/src/components/shell/ProjectSelector/ProjectSelector.module.scss

@@ -38,9 +38,9 @@
 }
 
 .triggerOpen {
-  border-color: color-mix(in srgb, var(--color-border-strong) 22%, transparent);
-  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
-  box-shadow: var(--shadow-soft);
+  border-color: color-mix(in srgb, var(--color-accent-strong) 22%, var(--color-border-strong));
+  background: color-mix(in srgb, var(--color-accent-soft) 26%, var(--color-surface));
+  box-shadow: 0 10px 28px color-mix(in srgb, black 8%, transparent);
 }
 
 .triggerCompact {
@@ -83,19 +83,14 @@
   gap: 0.12rem;
 }
 
-.eyebrow,
-.projectItemDescription {
+.eyebrow {
   @include text-caption;
   color: var(--color-text-muted);
-}
-
-.eyebrow {
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
 
-.value,
-.projectItemName {
+.value {
   @include text-label;
 }
 
@@ -175,7 +170,7 @@
   min-height: 0;
   display: grid;
   align-content: start;
-  gap: var(--space-3);
+  gap: var(--space-2);
   padding: var(--space-4);
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -186,20 +181,34 @@
 	width: 0;
 }
 
-.projectList {
+.treeSectionLabel {
+  @include text-caption;
+  margin: 0 0 var(--space-2);
+  padding: 0 var(--space-3);
+  color: var(--color-text-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.treeList {
   list-style: none;
   display: grid;
-  gap: 0.2rem;
+  gap: var(--space-1);
   padding: 0;
 }
 
-.projectItem {
+.treeItem {
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--control-size-md) + var(--space-2));
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: calc(var(--control-size-lg) - var(--space-2));
   padding: var(--space-2) var(--space-3);
+  padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
   border: 1px solid transparent;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-lg);
   background: transparent;
   color: var(--color-text-muted);
   transition:
@@ -210,25 +219,50 @@
   text-align: left;
 }
 
-.projectItem:hover {
-  background: color-mix(in srgb, var(--color-surface-hover) 82%, transparent);
+.treeItem:hover,
+.treeItem:focus-visible {
+  background: var(--color-surface-hover);
   color: var(--color-text);
-  border-color: color-mix(in srgb, var(--color-border) 22%, transparent);
 }
 
-.projectItemActive {
-  border-color: color-mix(in srgb, var(--color-border) 28%, transparent);
-  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
+.treeItemFolder {
   color: var(--color-text);
-  box-shadow: none;
 }
 
-.projectItemCopy {
+.folderChevron {
+  color: var(--color-text-muted);
+  transition: transform 160ms var(--easing-standard);
+}
+
+.folderChevronOpen {
+  transform: rotate(90deg);
+}
+
+.treeItemActive {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+}
+
+.icon {
+  color: inherit;
+  opacity: 0.85;
+}
+
+.label {
+  @include text-label;
   min-width: 0;
-  display: grid;
-  gap: 0.05rem;
 }
 
-.projectItemDescription {
-  color: color-mix(in srgb, var(--color-text-muted) 84%, transparent);
+.itemMeta {
+  @include text-caption;
+  color: var(--color-text-muted);
+}
+
+@media (max-width: 720px) {
+  .rootCompact .scrim,
+  .rootCompact .drawer {
+    width: min(18rem, calc(100vw - 5rem));
+  }
 }

Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx

@@ -1,8 +1,17 @@
 // Path: Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx
 
-import { For, createEffect, createSignal, onCleanup, onMount, type JSX } from "solid-js";
-import { ChevronDown, Folder } from "../../../lib/icons";
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, onMount, type JSX } from "solid-js";
+import { ChevronDown, ChevronRight, Folder, LayoutGrid } from "../../../lib/icons";
+import { ProjectContextMenu } from "../ProjectContextMenu/ProjectContextMenu";
 import { useAppShellData } from "../data/app-shell.context";
+import {
+	createProjectFolderTarget,
+	createProjectSurfaceTarget,
+	createProjectTarget,
+	type ProjectItem,
+	type ProjectMenuTarget,
+} from "../data/shell.data";
+import { createProjectContextMenuController } from "../ProjectContextMenu/createProjectContextMenuController";
 import styles from "./ProjectSelector.module.scss";
 
 type ProjectSelectorProps = {
@@ -16,37 +25,105 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 	const appShellData = useAppShellData();
 	const [selectedProject, setSelectedProject] = createSignal(appShellData.activeProject());
 	const [drawerTop, setDrawerTop] = createSignal<number>(0);
+	const [collapsedFolderIds, setCollapsedFolderIds] = createSignal<readonly string[]>([]);
+	let rootRef: HTMLDivElement | undefined;
 	let triggerRef: HTMLButtonElement | undefined;
+	let contextMenuRef: HTMLDivElement | undefined;
+	const contextMenu = createProjectContextMenuController();
+
+	const projectFolders = createMemo(() => {
+		const sections = new Map<string, ProjectItem[]>();
+
+		for (const item of appShellData.projectItems()) {
+			const key = item.parentLabel || item.groupLabel || "Projects";
+			const existing = sections.get(key);
+
+			if (existing) {
+				existing.push(item);
+				continue;
+			}
+
+			sections.set(key, [item]);
+		}
+
+		return Array.from(sections.entries()).map(([label, items]) => ({
+			id: label.toLowerCase().replace(/\s+/g, "-"),
+			label,
+			meta: items[0]?.groupLabel && items[0].groupLabel !== label ? items[0].groupLabel : undefined,
+			items,
+		}));
+	});
+
+	const isFolderCollapsed = (folderId: string): boolean => collapsedFolderIds().includes(folderId);
+
+	const toggleFolder = (folderId: string): void => {
+		setCollapsedFolderIds((current) =>
+			current.includes(folderId) ? current.filter((id) => id !== folderId) : [...current, folderId],
+		);
+	};
 
 	createEffect(() => {
 		setSelectedProject(appShellData.activeProject());
 	});
 
 	onMount(() => {
-		if (!triggerRef) {
-			return;
+		if (triggerRef) {
+			const updateDrawerTop = (): void => {
+				if (!triggerRef) {
+					return;
+				}
+
+				setDrawerTop(triggerRef.offsetTop + triggerRef.offsetHeight + 8);
+			};
+
+			updateDrawerTop();
+
+			const observer = new ResizeObserver(() => {
+				updateDrawerTop();
+			});
+
+			observer.observe(triggerRef);
+			window.addEventListener("resize", updateDrawerTop);
+
+			onCleanup(() => {
+				observer.disconnect();
+				window.removeEventListener("resize", updateDrawerTop);
+			});
 		}
 
-		const updateDrawerTop = (): void => {
-			if (!triggerRef) {
+		const handlePointerDown = (event: PointerEvent): void => {
+			if (!props.isOpen || !rootRef) {
 				return;
 			}
 
-			setDrawerTop(triggerRef.offsetTop + triggerRef.offsetHeight);
+			const target = event.target;
+
+			if (target instanceof Node && rootRef.contains(target)) {
+				return;
+			}
+
+			if (target instanceof Node && contextMenuRef?.contains(target)) {
+				return;
+			}
+
+			props.onClose();
 		};
 
-		updateDrawerTop();
+		const handleEscape = (event: KeyboardEvent): void => {
+			if (event.key !== "Escape" || !props.isOpen) {
+				return;
+			}
 
-		const observer = new ResizeObserver(() => {
-			updateDrawerTop();
-		});
+			props.onClose();
+			triggerRef?.focus();
+		};
 
-		observer.observe(triggerRef);
-		window.addEventListener("resize", updateDrawerTop);
+		document.addEventListener("pointerdown", handlePointerDown);
+		window.addEventListener("keydown", handleEscape);
 
 		onCleanup(() => {
-			observer.disconnect();
-			window.removeEventListener("resize", updateDrawerTop);
+			document.removeEventListener("pointerdown", handlePointerDown);
+			window.removeEventListener("keydown", handleEscape);
 		});
 	});
 
@@ -70,8 +147,18 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 		props.onClose();
 	};
 
+	const handleContextActionSelect = (_action: { id: string; label: string }, _target: ProjectMenuTarget): void => {
+		// Initial implementation keeps the project menu aligned with workspace-menu IA.
+	};
+
+	const handleSurfaceContextMenu = (event: MouseEvent): void => {
+		event.stopPropagation();
+		contextMenu.openMenu(event, createProjectSurfaceTarget("Projects"));
+	};
+
 	return (
 		<div
+			ref={rootRef}
 			classList={{
 				[styles.root]: true,
 				[styles.rootCompact]: !!props.compact,
@@ -80,7 +167,6 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 				"--project-drawer-top": `${drawerTop()}px`,
 			}}
 		>
-			{/* Project trigger */}
 			<button
 				type="button"
 				ref={triggerRef}
@@ -89,8 +175,9 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 					[styles.triggerCompact]: !!props.compact,
 					[styles.triggerOpen]: props.isOpen,
 				}}
-				aria-label={`Open left workspace sidebar menu for ${selectedProject().name}`}
+				aria-label={`Open project menu for ${selectedProject().name}`}
 				aria-expanded={props.isOpen}
+				aria-haspopup="menu"
 				title={selectedProject().name}
 				onClick={toggleOpen}
 			>
@@ -113,54 +200,123 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 				/>
 			</button>
 
-			{/* Outside-click scrim */}
-			<button
-				type="button"
-				classList={{
-					[styles.scrim]: true,
-					[styles.scrimOpen]: props.isOpen,
+			<Show when={props.isOpen}>
+				<>
+					<button
+						type="button"
+						classList={{
+							[styles.scrim]: true,
+							[styles.scrimOpen]: props.isOpen,
+						}}
+						aria-hidden={!props.isOpen}
+						tabIndex={props.isOpen ? 0 : -1}
+						onClick={props.onClose}
+					/>
+
+					<div
+						classList={{
+							[styles.drawer]: true,
+							[styles.drawerOpen]: props.isOpen,
+						}}
+						aria-hidden={!props.isOpen}
+						onContextMenu={handleSurfaceContextMenu}
+					>
+						<div class={styles.drawerBody}>
+							<Show when={!props.compact}>
+								<div class={styles.treeSectionLabel}>Projects</div>
+							</Show>
+
+							<ul class={styles.treeList} role="list">
+								<For each={projectFolders()}>
+									{(folder): JSX.Element => {
+										const isCollapsed = (): boolean => isFolderCollapsed(folder.id);
+
+										return (
+										<li>
+											<button
+												type="button"
+												classList={{
+													[styles.treeItem]: true,
+													[styles.treeItemFolder]: true,
+												}}
+												aria-expanded={!isCollapsed()}
+												onClick={() => toggleFolder(folder.id)}
+												onContextMenu={(event): void => {
+													event.stopPropagation();
+													contextMenu.openMenu(event, createProjectFolderTarget(folder.id, folder.label));
+												}}
+											>
+												<ChevronRight
+													classList={{
+														[styles.folderChevron]: true,
+														[styles.folderChevronOpen]: !isCollapsed(),
+													}}
+													size={16}
+													strokeWidth={2}
+												/>
+												<Folder class={styles.icon} size={18} strokeWidth={2} />
+												<span class={styles.label}>{folder.label}</span>
+												<Show when={folder.meta}>
+													<span class={styles.itemMeta}>{folder.meta}</span>
+												</Show>
+											</button>
+
+											<Show when={!isCollapsed()}>
+												<ul class={styles.treeList} role="list">
+													<For each={folder.items}>
+														{(item): JSX.Element => {
+															const isSelected = (): boolean => selectedProject().id === item.id;
+
+															return (
+																<li>
+																	<button
+																		type="button"
+																		classList={{
+																			[styles.treeItem]: true,
+																			[styles.treeItemActive]: isSelected(),
+																		}}
+																		style={{ "--tree-depth": "1" }}
+																		onClick={(): void => selectProject(item.id)}
+																		onContextMenu={(event): void => {
+																			event.stopPropagation();
+																			contextMenu.openMenu(event, createProjectTarget(item));
+																		}}
+																	>
+																		<LayoutGrid class={styles.icon} size={18} strokeWidth={2} />
+																		<span class={styles.label}>{item.name}</span>
+																		<Show when={item.meta}>
+																			<span class={styles.itemMeta}>{item.meta}</span>
+																		</Show>
+																	</button>
+																</li>
+															);
+														}}
+													</For>
+												</ul>
+											</Show>
+										</li>
+										);
+									}}
+								</For>
+							</ul>
+						</div>
+					</div>
+				</>
+			</Show>
+
+			<ProjectContextMenu
+				target={contextMenu.menuState()?.target ?? null}
+				position={(() => {
+					const state = contextMenu.menuState();
+					return state ? { x: state.x, y: state.y } : null;
+				})()}
+				menuRef={(element) => {
+					contextMenuRef = element;
+					contextMenu.setMenuRef(element);
 				}}
-				aria-hidden={!props.isOpen}
-				tabIndex={props.isOpen ? 0 : -1}
-				onClick={props.onClose}
+				onClose={contextMenu.closeMenu}
+				onSelect={handleContextActionSelect}
 			/>
-
-			{/* Slide-out project list */}
-			<div
-				classList={{
-					[styles.drawer]: true,
-					[styles.drawerOpen]: props.isOpen,
-				}}
-				aria-hidden={!props.isOpen}
-			>
-				<div class={styles.drawerBody}>
-					<ul class={styles.projectList} role="list">
-					<For each={appShellData.projectItems()}>
-							{(item): JSX.Element => {
-								const isSelected = (): boolean => selectedProject().id === item.id;
-
-								return (
-									<li>
-										<button
-											type="button"
-											classList={{
-												[styles.projectItem]: true,
-												[styles.projectItemActive]: isSelected(),
-											}}
-											onClick={(): void => selectProject(item.id)}
-										>
-											<span class={styles.projectItemCopy}>
-												<span class={styles.projectItemName}>{item.name}</span>
-												<span class={styles.projectItemDescription}>{item.description}</span>
-											</span>
-										</button>
-									</li>
-								);
-							}}
-						</For>
-					</ul>
-				</div>
-			</div>
 		</div>
 	);
 };