Moku/Work
1
0
Fork 0
Code Issues Pull Requests Activity

Feat: add route-backed settings pages

Browse Source
This commit is contained in:
MangoPig
2026-07-06 16:59:50 +01:00
parent d421a10189
commit 715661a4d2
36 changed files with 881 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/components/app-shell/AppShell/AppShell.module.scss
+10
View File
@@ -95,6 +95,8 @@
min-width: 0;
min-height: 0;
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
z-index: 1;
border-top: 1px solid var(--shell-frame-border);
@@ -103,6 +105,14 @@
border-top-right-radius: 0;
}
.workspaceContent {
min-width: 0;
min-height: 0;
height: 100%;
overflow: auto;
scrollbar-gutter: stable;
}
.mobileWorkspaceView {
min-width: 0;
min-height: 0;
Frontend/src/components/app-shell/AppShell/AppShell.tsx
+18 -6
View File
@@ -1,10 +1,11 @@
// Path: Frontend/src/components/app-shell/AppShell/AppShell.tsx
import { useLocation } from "@solidjs/router";
import { createSignal, onCleanup, onMount, Show, type JSX } from "solid-js";
import { getDocumentTheme, setTheme, type Theme } from "../../../helper/themeRuntime";
import { BootstrapWizard } from "../../bootstrap/BootstrapWizard/BootstrapWizard";
import { WorkspaceHome } from "../../workspace-home/WorkspaceHome";
import { AppShellDataProvider, useAppShellData } from "../data/app-shell.context";
import { getWorkspaceBreadcrumbSegments } from "../data/workspace-routes";
import { LeftRail } from "../../workspace-navigation/LeftRail/LeftRail";
import { MobileBottomNav } from "../MobileBottomNav/MobileBottomNav";
import { MobileWorkspaceBrowser } from "../../workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser";
@@ -19,7 +20,7 @@ import styles from "./AppShell.module.scss";
type MobileWorkspaceView = "notifications" | "profile" | null;
const MOBILE_VIEWPORT_QUERY = "(max-width: 48rem)";
const AppShellContent = (): JSX.Element => {
const AppShellContent = (props: { children: JSX.Element }): JSX.Element => {
const [themeState, setThemeState] = createSignal<Theme>("light");
const [isRailCollapsed, setIsRailCollapsed] = createSignal(false);
const [isSidebarCollapsed, setIsSidebarCollapsed] = createSignal(false);
@@ -27,6 +28,7 @@ const AppShellContent = (): JSX.Element => {
const [isMobileWorkspaceBrowserOpen, setIsMobileWorkspaceBrowserOpen] = createSignal(false);
const [activeMobileWorkspaceView, setActiveMobileWorkspaceView] = createSignal<MobileWorkspaceView>(null);
const appShellData = useAppShellData();
const location = useLocation();
onMount((): void => {
setThemeState(getDocumentTheme());
@@ -82,7 +84,15 @@ const AppShellContent = (): JSX.Element => {
setActiveMobileWorkspaceView(null);
};
const workspaceBreadcrumb = (): string => `${appShellData.activeServer().name} / ${appShellData.activeProject().name} / Home`;
const workspaceBreadcrumb = (): string =>
[
appShellData.activeServer().name,
...getWorkspaceBreadcrumbSegments(location.pathname, {
activeProjectName: appShellData.activeProject().name,
activeDepartmentName: appShellData.activeDepartment().name,
activeTeamName: appShellData.activeDepartment().teamName,
}),
].join(" / ");
return (
<div class={styles.shell} data-ui="app-shell" data-app-shell-status={appShellData.status()}>
@@ -136,7 +146,9 @@ const AppShellContent = (): JSX.Element => {
setIsSidebarCollapsed((collapsed) => !collapsed);
}}
/>
<WorkspaceHome />
<div class={styles.workspaceContent} data-slot="workspace-content">
{props.children}
</div>
</>
}
>
@@ -175,10 +187,10 @@ const AppShellContent = (): JSX.Element => {
);
};
export const AppShell = (): JSX.Element => {
export const AppShell = (props: { children: JSX.Element }): JSX.Element => {
return (
<AppShellDataProvider>
<AppShellContent />
<AppShellContent>{props.children}</AppShellContent>
</AppShellDataProvider>
);
};
Frontend/src/components/app-shell/ServerDock/ServerDock.tsx
+18 -1
View File
@@ -1,13 +1,22 @@
// Path: Frontend/src/components/app-shell/ServerDock/ServerDock.tsx
import { For, Show, type JSX } from "solid-js";
import { useNavigate } from "@solidjs/router";
import { useAppShellData } from "../data/app-shell.context";
import { getWorkspaceSurfaceRoute } from "../data/workspace-routes";
import styles from "./ServerDock.module.scss";
export const ServerDock = (): JSX.Element => {
const appShellData = useAppShellData();
const navigate = useNavigate();
const activeServer = () => appShellData.activeServer();
const handleAction = (actionId: string): void => {
if (actionId === "settings" || actionId === "server") {
navigate(getWorkspaceSurfaceRoute("settings"));
}
};
return (
<section class={styles.panel} aria-label="Server dock" data-ui="server-dock" data-server-kind={activeServer().kind}>
<div class={styles.identity} data-slot="server-dock-identity">
@@ -35,7 +44,15 @@ export const ServerDock = (): JSX.Element => {
const Icon = item.icon;
return (
<button type="button" class={styles.action} aria-label={item.label} title={item.label} data-slot="server-dock-action" data-action-id={item.id}>
<button
type="button"
class={styles.action}
aria-label={item.label}
title={item.label}
data-slot="server-dock-action"
data-action-id={item.id}
onClick={() => handleAction(item.id)}
>
<Icon size={16} strokeWidth={2} />
<span class={styles.actionLabel}>{item.label}</span>
</button>
Frontend/src/components/app-shell/data/shell.types.ts
+3 -1
View File
@@ -103,10 +103,12 @@ export type SidebarItem = {
export type WorkspaceStaticKind = "workspace" | "home" | "settings";
export type WorkspaceStaticSurfaceKind = Exclude<WorkspaceStaticKind, "workspace">;
export type WorkspaceItemTypeId = string;
export type WorkspaceStaticItem = SidebarItem & {
contextKind: WorkspaceStaticKind;
contextKind: WorkspaceStaticSurfaceKind;
};
export type WorkspaceFolderNode = {
Frontend/src/components/app-shell/data/workspace-routes.ts
+79
View File
@@ -0,0 +1,79 @@
// Path: Frontend/src/components/app-shell/data/workspace-routes.ts
import type { WorkspaceStaticKind } from "./shell.types";
export type WorkspaceSurfaceKind = Exclude<WorkspaceStaticKind, "workspace">;
export type SettingsSectionKind = "account" | "workspace" | "server" | "theme" | "security" | "members";
export type WorkspaceBreadcrumbContext = {
activeProjectName: string;
activeDepartmentName: string;
activeTeamName?: string;
};
const workspaceSurfaceRoutes: Record<WorkspaceSurfaceKind, string> = {
home: "/workspace/home",
settings: "/settings",
};
export const getWorkspaceSurfaceRoute = (surface: WorkspaceSurfaceKind): string => workspaceSurfaceRoutes[surface];
const settingsSectionRoutes: Record<SettingsSectionKind, string> = {
account: "/settings/account",
workspace: "/settings/workspace",
server: "/settings/server",
theme: "/settings/theme",
security: "/settings/security",
members: "/settings/members",
};
export const getSettingsSectionRoute = (section: SettingsSectionKind): string => settingsSectionRoutes[section];
export const getWorkspaceSurfaceFromPathname = (pathname: string): WorkspaceSurfaceKind => {
if (pathname.startsWith(workspaceSurfaceRoutes.settings) || pathname.startsWith("/workspace/settings")) {
return "settings";
}
return "home";
};
export const getWorkspaceSurfaceBreadcrumbLabel = (pathname: string): string => {
const surface = getWorkspaceSurfaceFromPathname(pathname);
return surface === "settings" ? "Settings" : "Home";
};
const getSettingsSectionFromPathname = (pathname: string): SettingsSectionKind | null => {
const matchedEntry = (Object.entries(settingsSectionRoutes) as Array<[SettingsSectionKind, string]>).find(([, route]) => pathname.startsWith(route));
return matchedEntry?.[0] ?? null;
};
export const getWorkspaceBreadcrumbSegments = (
pathname: string,
context: WorkspaceBreadcrumbContext,
): string[] => {
const settingsSection = getSettingsSectionFromPathname(pathname);
if (pathname === workspaceSurfaceRoutes.settings || pathname === "/workspace/settings") {
return ["Settings"];
}
if (settingsSection) {
switch (settingsSection) {
case "account":
return ["Users", "Settings"];
case "workspace":
return [context.activeProjectName, "Settings"];
case "server":
return ["Settings"];
case "theme":
return ["Personal", "Settings"];
case "security":
return ["Users", "Settings"];
case "members":
return [context.activeTeamName || context.activeDepartmentName || "Members", "Users"];
}
}
return [context.activeProjectName, getWorkspaceSurfaceBreadcrumbLabel(pathname)];
};