Feat: Build out server shell

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

@@ -0,0 +1,156 @@
+// Path: Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx
+
+import { For, createSignal, onCleanup, onMount, type JSX } from "solid-js";
+import { ChevronDown, Folder } from "../../../lib/icons";
+import { activeProject, projectItems } from "../data/shell.data";
+import styles from "./ProjectSelector.module.scss";
+
+type ProjectSelectorProps = {
+	isOpen: boolean;
+	onToggle: () => void;
+	onClose: () => void;
+};
+
+const defaultProject = projectItems.find((item) => item.id === activeProject.id) ?? projectItems[0];
+
+export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
+	const [selectedProject, setSelectedProject] = createSignal({ id: defaultProject.id, name: defaultProject.name });
+	const [drawerTop, setDrawerTop] = createSignal<number>(0);
+	let triggerRef: HTMLButtonElement | undefined;
+
+	onMount(() => {
+		if (!triggerRef) {
+			return;
+		}
+
+		const updateDrawerTop = (): void => {
+			if (!triggerRef) {
+				return;
+			}
+
+			setDrawerTop(triggerRef.offsetTop + triggerRef.offsetHeight);
+		};
+
+		updateDrawerTop();
+
+		const observer = new ResizeObserver(() => {
+			updateDrawerTop();
+		});
+
+		observer.observe(triggerRef);
+		window.addEventListener("resize", updateDrawerTop);
+
+		onCleanup(() => {
+			observer.disconnect();
+			window.removeEventListener("resize", updateDrawerTop);
+		});
+	});
+
+	const toggleOpen = (): void => {
+		if (!props.isOpen) {
+			props.onToggle();
+			return;
+		}
+
+		props.onClose();
+	};
+
+	const selectProject = (projectId: string): void => {
+		const nextProject = projectItems.find((item): boolean => item.id === projectId);
+
+		if (!nextProject) {
+			return;
+		}
+
+		setSelectedProject({ id: nextProject.id, name: nextProject.name });
+		props.onClose();
+	};
+
+	return (
+		<div
+			class={styles.root}
+			style={{
+				"--project-drawer-top": `${drawerTop()}px`,
+			}}
+		>
+			{/* Project trigger */}
+			<button
+				type="button"
+				ref={triggerRef}
+				classList={{
+					[styles.trigger]: true,
+					[styles.triggerOpen]: props.isOpen,
+				}}
+				aria-label="Open project drawer"
+				aria-expanded={props.isOpen}
+				title="Open project drawer"
+				onClick={toggleOpen}
+			>
+				<span class={styles.triggerLead} aria-hidden="true">
+					<Folder size={18} strokeWidth={2} />
+				</span>
+				<span class={styles.triggerCopy}>
+					<span class={styles.eyebrow}>Projects</span>
+					<span class={styles.value}>{selectedProject().name}</span>
+				</span>
+				<ChevronDown
+					classList={{
+						[styles.triggerIcon]: true,
+						[styles.triggerIconOpen]: props.isOpen,
+					}}
+					size={16}
+					strokeWidth={2}
+				/>
+			</button>
+
+			{/* Outside-click scrim */}
+			<button
+				type="button"
+				classList={{
+					[styles.scrim]: true,
+					[styles.scrimOpen]: props.isOpen,
+				}}
+				aria-hidden={!props.isOpen}
+				tabIndex={props.isOpen ? 0 : -1}
+				onClick={props.onClose}
+			/>
+
+			{/* 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={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>
+	);
+};