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

// 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 = {
	compact?: boolean;
	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
			classList={{
				[styles.root]: true,
				[styles.rootCompact]: !!props.compact,
			}}
			style={{
				"--project-drawer-top": `${drawerTop()}px`,
			}}
		>
			{/* Project trigger */}
			<button
				type="button"
				ref={triggerRef}
				classList={{
					[styles.trigger]: true,
					[styles.triggerCompact]: !!props.compact,
					[styles.triggerOpen]: props.isOpen,
				}}
				aria-label={`Open left workspace sidebar menu for ${selectedProject().name}`}
				aria-expanded={props.isOpen}
				title={selectedProject().name}
				onClick={toggleOpen}
			>
				<span class={styles.triggerLead} aria-hidden="true">
					<Folder size={18} strokeWidth={2} />
				</span>
				{!props.compact ? (
					<span class={styles.triggerCopy}>
						<span class={styles.eyebrow}>Projects</span>
						<span class={styles.value}>{selectedProject().name}</span>
					</span>
				) : null}
				<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>
	);
};