Feat: Frontend app shell

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

@@ -0,0 +1,42 @@
+// Path: Frontend/src/components/shell/LeftRail/LeftRail.tsx
+
+import { For, type JSX } from "solid-js";
+import { Plus } from "../../../lib/icons";
+import { railItems } from "../data/shell.data";
+import styles from "./LeftRail.module.scss";
+
+export const LeftRail = (): JSX.Element => {
+	return (
+		<aside class={styles.rail} aria-label="Workspace rail">
+			<div class={styles.topCluster}>
+				<div class={styles.logo} aria-hidden="true">
+					M
+				</div>
+			</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>
+			</div>
+
+			<div class={styles.bottomCluster}>
+				<button type="button" class={styles.addButton} aria-label="Create workspace" title="Create workspace">
+					<Plus size={16} strokeWidth={2} />
+				</button>
+			</div>
+		</aside>
+	);
+};