Feat: Hydrate shell from app state

This commit is contained in:
MangoPig
2026-06-19 17:39:39 +01:00
parent 913825f596
commit 6ba04effcf
15 changed files with 1258 additions and 131 deletions

View File

@@ -1,8 +1,8 @@
// Path: Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx
import { For, createSignal, onCleanup, onMount, type JSX } from "solid-js";
import { For, createEffect, createSignal, onCleanup, onMount, type JSX } from "solid-js";
import { ChevronDown, Folder } from "../../../lib/icons";
import { activeProject, projectItems } from "../data/shell.data";
import { useAppShellData } from "../data/app-shell.context";
import styles from "./ProjectSelector.module.scss";
type ProjectSelectorProps = {
@@ -12,13 +12,16 @@ type ProjectSelectorProps = {
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 appShellData = useAppShellData();
const [selectedProject, setSelectedProject] = createSignal(appShellData.activeProject());
const [drawerTop, setDrawerTop] = createSignal<number>(0);
let triggerRef: HTMLButtonElement | undefined;
createEffect(() => {
setSelectedProject(appShellData.activeProject());
});
onMount(() => {
if (!triggerRef) {
return;
@@ -57,7 +60,7 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
};
const selectProject = (projectId: string): void => {
const nextProject = projectItems.find((item): boolean => item.id === projectId);
const nextProject = appShellData.projectItems().find((item): boolean => item.id === projectId);
if (!nextProject) {
return;
@@ -132,7 +135,7 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
>
<div class={styles.drawerBody}>
<ul class={styles.projectList} role="list">
<For each={projectItems}>
<For each={appShellData.projectItems()}>
{(item): JSX.Element => {
const isSelected = (): boolean => selectedProject().id === item.id;