Refactor: improve code modularity

2026-06-29 03:06:18 +01:00
parent c47eae1381
commit fc5ef23af8
87 changed files with 5442 additions and 4769 deletions
@@ -0,0 +1,83 @@
+// Path: Frontend/src/components/workspace-navigation/LeftRail/LeftRail.tsx
+
+import { For, Show, type JSX } from "solid-js";
+import { useAppShellData } from "../../app-shell/data/app-shell.context";
+import { type RailItem } from "../../app-shell/data/shell.data";
+import styles from "./LeftRail.module.scss";
+
+type RailEntryProps = {
+	item: RailItem;
+	label: string;
+	abbreviation: string;
+	personal?: boolean;
+};
+
+const RailEntry = (props: RailEntryProps): JSX.Element => {
+	return (
+		<div
+			classList={{
+				[styles.itemSlot]: true,
+				[styles.itemSlotActive]: !!props.item.active,
+			}}
+		>
+			<span class={styles.activeIndicator} aria-hidden="true" />
+
+			<button
+				type="button"
+				classList={{
+					[styles.workspaceButton]: true,
+					[styles.workspaceButtonActive]: !!props.item.active,
+					[styles.personalButton]: !!props.personal,
+				}}
+				aria-label={props.label}
+				title={props.label}
+			>
+				{props.abbreviation}
+			</button>
+
+			<span class={styles.hoverLabel} role="presentation">
+				{props.label}
+			</span>
+		</div>
+	);
+};
+
+type LeftRailProps = {
+	collapsed: boolean;
+};
+
+export const LeftRail = (props: LeftRailProps): JSX.Element => {
+	const appShellData = useAppShellData();
+	const personalItem = () => appShellData.railItems().find((item) => item.kind === "personal");
+	const organizationItems = () => appShellData.railItems().filter((item) => item.kind === "organization");
+
+	return (
+		<aside
+			classList={{
+				[styles.rail]: true,
+				[styles.railCollapsed]: props.collapsed,
+			}}
+			aria-label="Server rail"
+		>
+			<div class={styles.topCluster}>
+				<Show when={!props.collapsed && personalItem()}>
+					{(item): JSX.Element => (
+						<RailEntry item={item()} label={item().label} abbreviation={item().abbreviation} personal />
+					)}
+				</Show>
+
+				<Show when={!props.collapsed}>
+					<div class={styles.sectionDivider} aria-hidden="true" />
+				</Show>
+			</div>
+
+			<Show when={!props.collapsed}>
+				<div class={styles.items}>
+					<For each={organizationItems()}>
+						{(item): JSX.Element => <RailEntry item={item} label={item.label} abbreviation={item.abbreviation} />}
+					</For>
+				</div>
+			</Show>
+		</aside>
+	);
+};