Feat: Prepare frontend future model

This commit is contained in:
MangoPig
2026-06-18 16:58:31 +01:00
parent fcf96590bb
commit 25c6934801
13 changed files with 342 additions and 146 deletions

View File

@@ -79,7 +79,7 @@ export const AppShell = (): JSX.Element => {
};
return (
<div class={styles.shell}>
<div class={styles.shell} data-ui="app-shell">
<TopBar
theme={themeState()}
onToggleTheme={toggleTheme}
@@ -96,15 +96,18 @@ export const AppShell = (): JSX.Element => {
[styles.bodyRailCollapsed]: isRailCollapsed(),
[styles.bodySidebarCollapsed]: isSidebarCollapsed(),
}}
data-slot="shell-body"
data-rail-collapsed={isRailCollapsed() ? "true" : "false"}
data-sidebar-collapsed={isSidebarCollapsed() ? "true" : "false"}
>
{/* Left server rail */}
<div class={styles.railColumn}>
<div class={styles.railColumn} data-slot="rail-column">
<LeftRail collapsed={isRailCollapsed()} />
</div>
{/* Sidebar + main workspace frame */}
<div class={styles.workspaceRegion}>
<div class={styles.sidebarColumn}>
<div class={styles.workspaceRegion} data-slot="workspace-region">
<div class={styles.sidebarColumn} data-slot="sidebar-column">
<WorkspaceSidebar
collapsed={isSidebarCollapsed()}
railCollapsed={isRailCollapsed()}
@@ -114,7 +117,7 @@ export const AppShell = (): JSX.Element => {
/>
</div>
<div class={styles.workspaceMain}>
<div class={styles.workspaceMain} data-slot="workspace-main">
{/* On mobile, top-bar menus become full workspace views instead of popovers. */}
<Show
when={isMobileViewport() && activeMobileWorkspaceView() !== null}
@@ -127,7 +130,7 @@ export const AppShell = (): JSX.Element => {
/>
}
>
<div class={styles.mobileWorkspaceView}>
<div class={styles.mobileWorkspaceView} data-slot="mobile-workspace-view" data-view={activeMobileWorkspaceView() ?? undefined}>
<Show when={activeMobileWorkspaceView() === "notifications"}>
<NotificationsMenu id="mobile-workspace-notifications" onSelect={closeMobileWorkspaceView} variant="workspace" />
</Show>
@@ -140,7 +143,7 @@ export const AppShell = (): JSX.Element => {
</div>
{/* Floating server dock overlay */}
<div class={styles.sidebarDock}>
<div class={styles.sidebarDock} data-slot="sidebar-dock">
<ServerDock />
</div>
</div>