Feat: add route-backed settings pages

Frontend/src/components/top-bar/TopBar/ProfileMenu.tsx

@@ -1,6 +1,8 @@
+import { useNavigate } from "@solidjs/router";
 import { For, type JSX } from "solid-js";
 import { User } from "../../../lib/icons";
 import { useAppShellData } from "../../app-shell/data/app-shell.context";
+import { getWorkspaceSurfaceRoute } from "../../app-shell/data/workspace-routes";
 import { profileMenuSections } from "../../app-shell/data/shell.data";
 import styles from "./ProfileMenu.module.scss";
 
@@ -14,8 +16,17 @@ type ProfileMenuProps = {
 export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 	const variant = props.variant ?? "popover";
 	const appShellData = useAppShellData();
+	const navigate = useNavigate();
 	const activeUserProfile = () => appShellData.activeUserProfile();
 
+	const handleSelect = (actionId: string): void => {
+		if (actionId === "account-settings" || actionId === "security" || actionId === "theme-preferences") {
+			navigate(getWorkspaceSurfaceRoute("settings"));
+		}
+
+		props.onSelect();
+	};
+
 	return (
 		<div
 			id={props.id}
@@ -61,11 +72,11 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 											[styles.item]: true,
 											[styles.itemDanger]: item.tone === "danger",
 										}}
-										data-slot="profile-action"
-										data-action-id={item.id}
-										data-tone={item.tone ?? "default"}
-										onClick={props.onSelect}
-										>
+									data-slot="profile-action"
+									data-action-id={item.id}
+									data-tone={item.tone ?? "default"}
+									onClick={() => handleSelect(item.id)}
+									>
 											<span class={styles.itemIcon} aria-hidden="true">
 												<Icon size={16} strokeWidth={2} />
 											</span>