Feat: Build out server shell

Frontend/src/components/shell/LeftRail/LeftRail.tsx

@@ -2,38 +2,66 @@
 
 import { For, type JSX } from "solid-js";
 import { Plus } from "../../../lib/icons";
-import { railItems } from "../data/shell.data";
+import { railItems, type RailItem } from "../data/shell.data";
 import styles from "./LeftRail.module.scss";
 
-export const LeftRail = (): JSX.Element => {
+type RailEntryProps = {
+	item: RailItem;
+	label: string;
+	abbreviation: string;
+	personal?: boolean;
+};
+
+const RailEntry = (props: RailEntryProps): JSX.Element => {
 	return (
-		<aside class={styles.rail} aria-label="Workspace rail">
+		<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>
+	);
+};
+
+export const LeftRail = (): JSX.Element => {
+	const personalItem = railItems.find((item) => item.kind === "personal");
+	const organizationItems = railItems.filter((item) => item.kind === "organization");
+
+	return (
+		<aside class={styles.rail} aria-label="Server rail">
 			<div class={styles.topCluster}>
-				<div class={styles.logo} aria-hidden="true">
-					M
-				</div>
+				{personalItem ? <RailEntry item={personalItem} label={personalItem.label} abbreviation="M" personal /> : null}
+
+				<div class={styles.sectionDivider} aria-hidden="true" />
 			</div>
 
 			<div class={styles.items}>
-				<For each={railItems}>
-					{(item): JSX.Element => (
-						<button
-							type="button"
-							classList={{
-								[styles.workspaceButton]: true,
-								[styles.workspaceButtonActive]: !!item.active,
-							}}
-							title={item.label}
-							aria-label={item.label}
-						>
-							{item.abbreviation}
-						</button>
-					)}
+				<For each={organizationItems}>
+					{(item): JSX.Element => <RailEntry item={item} label={item.label} abbreviation={item.abbreviation} />}
 				</For>
 			</div>
 
 			<div class={styles.bottomCluster}>
-				<button type="button" class={styles.addButton} aria-label="Create workspace" title="Create workspace">
+				<button type="button" class={styles.addButton} aria-label="Create server" title="Create server">
 					<Plus size={16} strokeWidth={2} />
 				</button>
 			</div>