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
@@ -1,7 +1,8 @@
// Path: Frontend/src/components/shell/LeftRail/LeftRail.tsx
import { For, Show, type JSX } from "solid-js";
import { railItems, type RailItem } from "../data/shell.data";
import { useAppShellData } from "../data/app-shell.context";
import { type RailItem } from "../data/shell.data";
import styles from "./LeftRail.module.scss";
type RailEntryProps = {
@@ -46,8 +47,9 @@ type LeftRailProps = {
};
export const LeftRail = (props: LeftRailProps): JSX.Element => {
const personalItem = railItems.find((item) => item.kind === "personal");
const organizationItems = railItems.filter((item) => item.kind === "organization");
const appShellData = useAppShellData();
const personalItem = () => appShellData.railItems().find((item) => item.kind === "personal");
const organizationItems = () => appShellData.railItems().filter((item) => item.kind === "organization");
return (
<aside
@@ -58,7 +60,7 @@ export const LeftRail = (props: LeftRailProps): JSX.Element => {
aria-label="Server rail"
>
<div class={styles.topCluster}>
<Show when={!props.collapsed && personalItem}>
<Show when={!props.collapsed && personalItem()}>
{(item): JSX.Element => (
<RailEntry item={item()} label={item().label} abbreviation={item().abbreviation} personal />
)}
@@ -71,7 +73,7 @@ export const LeftRail = (props: LeftRailProps): JSX.Element => {
<Show when={!props.collapsed}>
<div class={styles.items}>
<For each={organizationItems}>
<For each={organizationItems()}>
{(item): JSX.Element => <RailEntry item={item} label={item.label} abbreviation={item.abbreviation} />}
</For>
</div>