Fix: Polish projects menu
This commit is contained in:
MangoPig
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user