Refactor: improve code modularity
This commit is contained in:
MangoPig
@@ -0,0 +1,248 @@
|
||||
.shell {
|
||||
height: 100dvh;
|
||||
min-height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
background: var(--color-canvas);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.body {
|
||||
--shell-dock-clearance: calc(var(--space-12) + var(--space-12) + var(--space-8));
|
||||
--rail-width: 4.75rem;
|
||||
--sidebar-width: 16.75rem;
|
||||
--mobile-bottom-nav-clearance: 0rem;
|
||||
--shell-top-left-radius: calc(var(--radius-xl) + var(--space-1));
|
||||
--shell-frame-border: color-mix(in srgb, var(--color-border-strong) 44%, transparent);
|
||||
--shell-divider-border: color-mix(in srgb, var(--color-border-strong) 34%, transparent);
|
||||
--sidebar-panel-surface: color-mix(in srgb, var(--color-surface-muted) 92%, transparent);
|
||||
--workspace-panel-surface: color-mix(in srgb, var(--color-canvas) 94%, var(--color-surface));
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: var(--rail-width) minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.bodyRailCollapsed {
|
||||
--rail-width: 0rem;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed {
|
||||
--sidebar-width: 0rem;
|
||||
}
|
||||
|
||||
.railColumn {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 6;
|
||||
isolation: isolate;
|
||||
overflow: visible;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.workspaceRegion {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
|
||||
overflow: visible;
|
||||
z-index: 1;
|
||||
isolation: isolate;
|
||||
border-top-left-radius: var(--shell-top-left-radius);
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.workspaceRegion::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(
|
||||
to right,
|
||||
var(--sidebar-panel-surface) 0,
|
||||
var(--sidebar-panel-surface) calc(var(--sidebar-width) - 0.5px),
|
||||
var(--workspace-panel-surface) calc(var(--sidebar-width) - 0.5px),
|
||||
var(--workspace-panel-surface) 100%
|
||||
);
|
||||
border: 1px solid var(--shell-frame-border);
|
||||
border-top: 0;
|
||||
border-top-left-radius: var(--shell-top-left-radius);
|
||||
border-top-right-radius: 0;
|
||||
box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sidebarColumn {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
overflow: visible;
|
||||
z-index: 1;
|
||||
background: var(--sidebar-panel-surface);
|
||||
border-top: 1px solid var(--shell-frame-border);
|
||||
border-left: 1px solid var(--shell-frame-border);
|
||||
border-top-left-radius: var(--shell-top-left-radius);
|
||||
}
|
||||
|
||||
.workspaceMain {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
border-top: 1px solid var(--shell-frame-border);
|
||||
border-left: 1px solid var(--shell-divider-border);
|
||||
background: var(--workspace-panel-surface);
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.mobileWorkspaceView {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: var(--workspace-panel-surface);
|
||||
}
|
||||
|
||||
.sidebarDock {
|
||||
position: absolute;
|
||||
bottom: var(--space-3);
|
||||
left: calc(var(--space-1) + (var(--rail-width) * 0.1));
|
||||
width: max(12rem, calc(var(--sidebar-width) + (var(--rail-width) * 0.9) - var(--space-2)));
|
||||
right: auto;
|
||||
z-index: calc(var(--z-modal) + 1);
|
||||
pointer-events: none;
|
||||
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-up(mobile) {
|
||||
.body {
|
||||
--rail-width: 5rem;
|
||||
--sidebar-width: 17.25rem;
|
||||
}
|
||||
|
||||
.bodyRailCollapsed {
|
||||
--rail-width: 0rem;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed {
|
||||
--sidebar-width: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-down(tablet) {
|
||||
.body {
|
||||
--rail-width: 4.5rem;
|
||||
--sidebar-width: 13.25rem;
|
||||
}
|
||||
|
||||
.bodyRailCollapsed {
|
||||
--rail-width: 0rem;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed {
|
||||
--sidebar-width: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bodyRailCollapsed .railColumn {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed .railColumn {
|
||||
--rail-dock-clearance: 0rem;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed:not(.bodyRailCollapsed) .railColumn {
|
||||
--rail-bottom-offset: var(--space-3);
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed .sidebarColumn {
|
||||
--sidebar-dock-clearance: 0rem;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed .workspaceRegion {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed .workspaceMain {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed:not(.bodyRailCollapsed) .workspaceMain {
|
||||
border-top-width: 1px;
|
||||
border-top-color: var(--shell-frame-border);
|
||||
border-left-color: var(--shell-frame-border);
|
||||
border-top-left-radius: var(--shell-top-left-radius);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed:not(.bodyRailCollapsed) .workspaceRegion::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed .sidebarDock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include respond-down(mobile) {
|
||||
.body {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
--rail-width: 0rem;
|
||||
--sidebar-width: 0rem;
|
||||
--mobile-bottom-nav-clearance: calc(var(--space-12) + var(--space-10) + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.railColumn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspaceRegion {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.workspaceRegion::before {
|
||||
background: var(--workspace-panel-surface);
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.sidebarColumn,
|
||||
.sidebarDock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspaceMain {
|
||||
border-left-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: var(--mobile-bottom-nav-clearance);
|
||||
}
|
||||
|
||||
.mobileWorkspaceView {
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
padding-bottom: 0;
|
||||
background: var(--workspace-panel-surface);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
// Path: Frontend/src/components/app-shell/AppShell/AppShell.tsx
|
||||
|
||||
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 { LeftRail } from "../../workspace-navigation/LeftRail/LeftRail";
|
||||
import { MobileBottomNav } from "../MobileBottomNav/MobileBottomNav";
|
||||
import { MobileWorkspaceBrowser } from "../../workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser";
|
||||
import { ServerDock } from "../ServerDock/ServerDock";
|
||||
import { NotificationsMenu } from "../../top-bar/TopBar/NotificationsMenu";
|
||||
import { ProfileMenu } from "../../top-bar/TopBar/ProfileMenu";
|
||||
import { TopBar } from "../../top-bar/TopBar/TopBar";
|
||||
import { WorkspaceTopBar } from "../../workspace-navigation/WorkspaceTopBar/WorkspaceTopBar";
|
||||
import { WorkspaceSidebar } from "../../workspace-navigation/WorkspaceSidebar/WorkspaceSidebar";
|
||||
import styles from "./AppShell.module.scss";
|
||||
|
||||
type MobileWorkspaceView = "notifications" | "profile" | null;
|
||||
const MOBILE_VIEWPORT_QUERY = "(max-width: 48rem)";
|
||||
|
||||
const AppShellContent = (): JSX.Element => {
|
||||
const [themeState, setThemeState] = createSignal<Theme>("light");
|
||||
const [isRailCollapsed, setIsRailCollapsed] = createSignal(false);
|
||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = createSignal(false);
|
||||
const [isMobileViewport, setIsMobileViewport] = createSignal(false);
|
||||
const [isMobileWorkspaceBrowserOpen, setIsMobileWorkspaceBrowserOpen] = createSignal(false);
|
||||
const [activeMobileWorkspaceView, setActiveMobileWorkspaceView] = createSignal<MobileWorkspaceView>(null);
|
||||
const appShellData = useAppShellData();
|
||||
|
||||
onMount((): void => {
|
||||
setThemeState(getDocumentTheme());
|
||||
|
||||
if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
|
||||
return;
|
||||
}
|
||||
|
||||
const mediaQuery = window.matchMedia(MOBILE_VIEWPORT_QUERY);
|
||||
const syncMobileViewport = (): void => {
|
||||
setIsMobileViewport(mediaQuery.matches);
|
||||
|
||||
if (!mediaQuery.matches) {
|
||||
setIsMobileWorkspaceBrowserOpen(false);
|
||||
setActiveMobileWorkspaceView(null);
|
||||
}
|
||||
};
|
||||
|
||||
syncMobileViewport();
|
||||
mediaQuery.addEventListener("change", syncMobileViewport);
|
||||
|
||||
onCleanup(() => {
|
||||
mediaQuery.removeEventListener("change", syncMobileViewport);
|
||||
});
|
||||
});
|
||||
|
||||
const toggleTheme = (): void => {
|
||||
const next: Theme = themeState() === "dark" ? "light" : "dark";
|
||||
|
||||
setTheme(next);
|
||||
setThemeState(next);
|
||||
};
|
||||
|
||||
const openMobileWorkspaceView = (view: Exclude<MobileWorkspaceView, null>): void => {
|
||||
setIsMobileWorkspaceBrowserOpen(false);
|
||||
setActiveMobileWorkspaceView((current) => (current === view ? null : view));
|
||||
};
|
||||
|
||||
const toggleMobileWorkspaceBrowser = (): void => {
|
||||
setActiveMobileWorkspaceView(null);
|
||||
setIsMobileWorkspaceBrowserOpen((open) => !open);
|
||||
};
|
||||
|
||||
const toggleMobileNotifications = (): void => {
|
||||
openMobileWorkspaceView("notifications");
|
||||
};
|
||||
|
||||
const toggleMobileProfile = (): void => {
|
||||
openMobileWorkspaceView("profile");
|
||||
};
|
||||
|
||||
const closeMobileWorkspaceView = (): void => {
|
||||
setActiveMobileWorkspaceView(null);
|
||||
};
|
||||
|
||||
const workspaceBreadcrumb = (): string => `${appShellData.activeServer().name} / ${appShellData.activeProject().name} / Home`;
|
||||
|
||||
return (
|
||||
<div class={styles.shell} data-ui="app-shell" data-app-shell-status={appShellData.status()}>
|
||||
<TopBar
|
||||
theme={themeState()}
|
||||
onToggleTheme={toggleTheme}
|
||||
isMobileViewport={isMobileViewport()}
|
||||
isNotificationsOpen={activeMobileWorkspaceView() === "notifications"}
|
||||
isProfileOpen={activeMobileWorkspaceView() === "profile"}
|
||||
onToggleNotifications={toggleMobileNotifications}
|
||||
onToggleProfile={toggleMobileProfile}
|
||||
/>
|
||||
|
||||
<div
|
||||
classList={{
|
||||
[styles.body]: true,
|
||||
[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} data-slot="rail-column">
|
||||
<LeftRail collapsed={isRailCollapsed()} />
|
||||
</div>
|
||||
|
||||
{/* Sidebar + main workspace frame */}
|
||||
<div class={styles.workspaceRegion} data-slot="workspace-region">
|
||||
<div class={styles.sidebarColumn} data-slot="sidebar-column">
|
||||
<WorkspaceSidebar
|
||||
collapsed={isSidebarCollapsed()}
|
||||
railCollapsed={isRailCollapsed()}
|
||||
onToggleRailCollapse={(): void => {
|
||||
setIsRailCollapsed((collapsed) => !collapsed);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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}
|
||||
fallback={
|
||||
<>
|
||||
<WorkspaceTopBar
|
||||
sidebarCollapsed={isSidebarCollapsed()}
|
||||
breadcrumb={workspaceBreadcrumb()}
|
||||
onToggleSidebarCollapse={(): void => {
|
||||
setIsSidebarCollapsed((collapsed) => !collapsed);
|
||||
}}
|
||||
/>
|
||||
<WorkspaceHome />
|
||||
</>
|
||||
}
|
||||
>
|
||||
<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>
|
||||
<Show when={activeMobileWorkspaceView() === "profile"}>
|
||||
<ProfileMenu id="mobile-workspace-profile" onSelect={closeMobileWorkspaceView} variant="workspace" />
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating server dock overlay */}
|
||||
<div class={styles.sidebarDock} data-slot="sidebar-dock">
|
||||
<ServerDock />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MobileBottomNav
|
||||
isBrowseOpen={isMobileWorkspaceBrowserOpen()}
|
||||
onBrowseToggle={(): void => {
|
||||
toggleMobileWorkspaceBrowser();
|
||||
}}
|
||||
/>
|
||||
<MobileWorkspaceBrowser
|
||||
open={isMobileWorkspaceBrowserOpen()}
|
||||
onClose={(): void => {
|
||||
setIsMobileWorkspaceBrowserOpen(false);
|
||||
}}
|
||||
/>
|
||||
<BootstrapWizard />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const AppShell = (): JSX.Element => {
|
||||
return (
|
||||
<AppShellDataProvider>
|
||||
<AppShellContent />
|
||||
</AppShellDataProvider>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,108 @@
|
||||
.mobileNav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include respond-down(mobile) {
|
||||
.mobileNav {
|
||||
--mobile-nav-button-gap: var(--space-1);
|
||||
--mobile-nav-button-padding-inline: var(--space-2);
|
||||
--mobile-nav-button-padding-top: calc(var(--space-2) + (var(--space-1) / 2));
|
||||
--mobile-nav-button-padding-bottom: var(--space-2);
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
|
||||
background:
|
||||
linear-gradient(to top, color-mix(in srgb, var(--color-canvas) 98%, transparent), color-mix(in srgb, var(--color-canvas) 92%, transparent));
|
||||
border-top: 1px solid color-mix(in srgb, var(--color-border-strong) 40%, transparent);
|
||||
backdrop-filter: blur(var(--blur-overlay));
|
||||
z-index: var(--z-sticky);
|
||||
}
|
||||
|
||||
.contextBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.contextServer,
|
||||
.contextProject {
|
||||
@include text-caption;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.contextServer {
|
||||
max-width: 45vw;
|
||||
}
|
||||
|
||||
.contextProject {
|
||||
max-width: 30vw;
|
||||
}
|
||||
|
||||
.contextDivider {
|
||||
@include text-caption;
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.navGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.navButton {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: var(--mobile-nav-button-gap);
|
||||
padding: var(--mobile-nav-button-padding-top) var(--mobile-nav-button-padding-inline) var(--mobile-nav-button-padding-bottom);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-xl);
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
transition:
|
||||
background 160ms var(--easing-standard),
|
||||
color 160ms var(--easing-standard),
|
||||
border-color 160ms var(--easing-standard),
|
||||
transform 180ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.navButton:hover,
|
||||
.navButton:focus-visible {
|
||||
color: var(--color-text);
|
||||
background: color-mix(in srgb, var(--color-surface) 82%, transparent);
|
||||
border-color: color-mix(in srgb, var(--color-border-strong) 28%, transparent);
|
||||
}
|
||||
|
||||
.navButton:active {
|
||||
transform: translateY(calc(var(--space-1) / 2));
|
||||
}
|
||||
|
||||
.navButtonActive {
|
||||
color: var(--color-text);
|
||||
background: color-mix(in srgb, var(--color-surface) 90%, transparent);
|
||||
border-color: color-mix(in srgb, var(--color-border-strong) 34%, transparent);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.iconWrap {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
@include text-caption;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// Path: Frontend/src/components/app-shell/MobileBottomNav/MobileBottomNav.tsx
|
||||
|
||||
import { For, type JSX } from "solid-js";
|
||||
import { useAppShellData } from "../data/app-shell.context";
|
||||
import { mobileBottomNavItems, type MobileBottomNavItem } from "../data/shell.data";
|
||||
import styles from "./MobileBottomNav.module.scss";
|
||||
|
||||
type MobileBottomNavProps = {
|
||||
isBrowseOpen: boolean;
|
||||
onBrowseToggle: VoidFunction;
|
||||
};
|
||||
|
||||
const MobileNavEntry = (props: {
|
||||
item: MobileBottomNavItem;
|
||||
isActive: boolean;
|
||||
onSelect?: VoidFunction;
|
||||
}): JSX.Element => {
|
||||
const Icon = props.item.icon;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => props.onSelect?.()}
|
||||
classList={{
|
||||
[styles.navButton]: true,
|
||||
[styles.navButtonActive]: props.isActive,
|
||||
}}
|
||||
aria-current={props.isActive ? "page" : undefined}
|
||||
aria-expanded={props.item.id === "browse" ? props.isActive : undefined}
|
||||
aria-label={props.item.label}
|
||||
title={props.item.label}
|
||||
>
|
||||
<span class={styles.iconWrap} aria-hidden="true">
|
||||
<Icon size={18} strokeWidth={2} />
|
||||
</span>
|
||||
|
||||
<span class={styles.label}>{props.item.label}</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export const MobileBottomNav = (props: MobileBottomNavProps): JSX.Element => {
|
||||
const appShellData = useAppShellData();
|
||||
|
||||
return (
|
||||
<nav class={styles.mobileNav} aria-label="Mobile workspace navigation">
|
||||
<div class={styles.contextBar}>
|
||||
<span class={styles.contextServer}>{appShellData.activeServer().name}</span>
|
||||
<span class={styles.contextDivider}>/</span>
|
||||
<span class={styles.contextProject}>{appShellData.activeProject().name}</span>
|
||||
</div>
|
||||
|
||||
<div class={styles.navGrid}>
|
||||
<For each={mobileBottomNavItems}>
|
||||
{(item): JSX.Element => (
|
||||
<MobileNavEntry
|
||||
item={item}
|
||||
isActive={item.id === "browse" ? props.isBrowseOpen : (item.active ?? false) && !props.isBrowseOpen}
|
||||
onSelect={item.id === "browse" ? props.onBrowseToggle : undefined}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,89 @@
|
||||
.panel {
|
||||
--server-dock-glyph-size: var(--control-size-md);
|
||||
--server-dock-action-min-height: var(--space-8);
|
||||
--server-dock-border: color-mix(in srgb, var(--color-border-strong) 75%, transparent);
|
||||
--server-dock-surface: color-mix(in srgb, var(--color-surface) 94%, transparent);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-3) var(--space-2);
|
||||
border: 1px solid var(--server-dock-border);
|
||||
border-radius: calc(var(--radius-xl) + var(--space-1));
|
||||
background: var(--server-dock-surface);
|
||||
box-shadow:
|
||||
0 20px 48px color-mix(in srgb, black 16%, transparent),
|
||||
var(--shadow-strong);
|
||||
backdrop-filter: blur(var(--blur-overlay));
|
||||
}
|
||||
|
||||
.identity {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.glyph {
|
||||
width: var(--server-dock-glyph-size);
|
||||
height: var(--server-dock-glyph-size);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-lg);
|
||||
background: color-mix(in srgb, var(--color-accent-soft) 84%, transparent);
|
||||
color: var(--color-accent-strong);
|
||||
@include text-label;
|
||||
}
|
||||
|
||||
.copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
@include text-label;
|
||||
}
|
||||
|
||||
.status,
|
||||
.subtitle {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.statusDot {
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
background: var(--color-success);
|
||||
box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--color-success) 18%, transparent);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.action {
|
||||
min-height: var(--server-dock-action-min-height);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-1);
|
||||
@include interactive-frame(var(--color-surface-muted));
|
||||
@include interactive-frame-hover();
|
||||
}
|
||||
|
||||
.actionLabel {
|
||||
@include text-caption;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
// Path: Frontend/src/components/app-shell/ServerDock/ServerDock.tsx
|
||||
|
||||
import { For, Show, type JSX } from "solid-js";
|
||||
import { useAppShellData } from "../data/app-shell.context";
|
||||
import styles from "./ServerDock.module.scss";
|
||||
|
||||
export const ServerDock = (): JSX.Element => {
|
||||
const appShellData = useAppShellData();
|
||||
const activeServer = () => appShellData.activeServer();
|
||||
|
||||
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">
|
||||
<div class={styles.glyph} aria-hidden="true">
|
||||
{activeServer().abbreviation}
|
||||
</div>
|
||||
<div class={styles.copy} data-slot="server-dock-copy">
|
||||
<span class={styles.name}>{activeServer().name}</span>
|
||||
<Show
|
||||
when={activeServer().kind === "organization"}
|
||||
fallback={<span class={styles.subtitle}>{activeServer().subtitle}</span>}
|
||||
>
|
||||
<span class={styles.status}>
|
||||
<span class={styles.statusDot} aria-hidden="true" />
|
||||
<span>{activeServer().connectedLabel}</span>
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={activeServer().dockActions.length > 0}>
|
||||
<div class={styles.actions} data-slot="server-dock-actions">
|
||||
<For each={activeServer().dockActions}>
|
||||
{(item): 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}>
|
||||
<Icon size={16} strokeWidth={2} />
|
||||
<span class={styles.actionLabel}>{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,169 @@
|
||||
// Path: Frontend/src/components/app-shell/data/app-shell.builders.ts
|
||||
|
||||
import {
|
||||
activeDepartment as fallbackActiveDepartment,
|
||||
activeProject as fallbackActiveProject,
|
||||
activeServer as fallbackActiveServer,
|
||||
activeUserProfile as fallbackActiveUserProfile,
|
||||
departmentItems as fallbackDepartmentItems,
|
||||
organizationAdminDockActions,
|
||||
personalDockActions,
|
||||
projectItems as fallbackProjectItems,
|
||||
railItems as fallbackRailItems,
|
||||
workspaceTree as fallbackWorkspaceTree,
|
||||
type ActiveDepartment,
|
||||
type ActiveProject,
|
||||
type ActiveServer,
|
||||
type ActiveUserProfile,
|
||||
type DepartmentItem,
|
||||
type ProjectItem,
|
||||
type RailItem,
|
||||
type WorkspaceTreeNode,
|
||||
} from "./shell.data";
|
||||
import type { AppShellPayload } from "./app-shell.types";
|
||||
|
||||
const buildAbbreviation = (name: string, fallback: string): string => {
|
||||
const parts = name
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.filter(Boolean);
|
||||
|
||||
if (parts.length === 0) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
const abbreviation = parts
|
||||
.slice(0, 2)
|
||||
.map((part) => part[0]?.toUpperCase() ?? "")
|
||||
.join("");
|
||||
|
||||
return abbreviation || fallback;
|
||||
};
|
||||
|
||||
export const buildRailItems = (payload: AppShellPayload | null): readonly RailItem[] => {
|
||||
if (!payload?.installation || payload.organizations.length === 0) {
|
||||
return fallbackRailItems;
|
||||
}
|
||||
|
||||
const kind = payload.installation.mode === "personal" ? "personal" : "organization";
|
||||
const serverName = payload.installation.name || payload.organizations[0]?.name || payload.installation.host;
|
||||
|
||||
return payload.organizations.map((organization, index) => ({
|
||||
id: organization.id,
|
||||
label: serverName || organization.name,
|
||||
abbreviation: buildAbbreviation(serverName || organization.name, kind === "personal" ? "P" : "O"),
|
||||
kind,
|
||||
active: index === 0,
|
||||
}));
|
||||
};
|
||||
|
||||
export const buildActiveServer = (payload: AppShellPayload | null): ActiveServer => {
|
||||
const installation = payload?.installation;
|
||||
const organization = payload?.organizations[0];
|
||||
|
||||
if (!installation || !organization) {
|
||||
return fallbackActiveServer;
|
||||
}
|
||||
|
||||
const kind = installation.mode === "personal" ? "personal" : "organization";
|
||||
const serverName = installation.name || organization.name || installation.host;
|
||||
|
||||
return {
|
||||
id: installation.id,
|
||||
name: serverName || fallbackActiveServer.name,
|
||||
abbreviation: buildAbbreviation(serverName, kind === "personal" ? "P" : "O"),
|
||||
kind,
|
||||
connectedLabel: kind === "organization" ? `${payload?.teams.length ?? 0} connected` : undefined,
|
||||
subtitle: kind === "personal" ? installation.host || payload?.admin?.homeTitle || "Personal home" : undefined,
|
||||
dockActions: kind === "personal" ? personalDockActions : organizationAdminDockActions,
|
||||
};
|
||||
};
|
||||
|
||||
export const buildProjectItems = (payload: AppShellPayload | null): readonly ProjectItem[] => {
|
||||
if (!payload?.projects.length) {
|
||||
return fallbackProjectItems;
|
||||
}
|
||||
|
||||
return payload.projects.map((project, index) => ({
|
||||
id: project.id,
|
||||
name: project.name,
|
||||
description: project.slug || "Persisted project workspace",
|
||||
groupLabel: payload.departments.find((department) => department.id === project.departmentId)?.name || "Projects",
|
||||
parentLabel:
|
||||
payload.teams.find((team) => team.id === project.teamId)?.name ||
|
||||
payload.departments.find((department) => department.id === project.departmentId)?.name ||
|
||||
"Shared project",
|
||||
meta: (() => {
|
||||
const workspaceCount = payload.workspaces.filter((workspace) => workspace.projectId === project.id).length;
|
||||
|
||||
return workspaceCount > 0 ? `${workspaceCount} workspace${workspaceCount === 1 ? "" : "s"}` : undefined;
|
||||
})(),
|
||||
active: index === 0,
|
||||
}));
|
||||
};
|
||||
|
||||
export const buildActiveProject = (payload: AppShellPayload | null): ActiveProject => {
|
||||
const firstProject = payload?.projects[0];
|
||||
|
||||
if (!firstProject) {
|
||||
return fallbackActiveProject;
|
||||
}
|
||||
|
||||
return {
|
||||
id: firstProject.id,
|
||||
name: firstProject.name,
|
||||
};
|
||||
};
|
||||
|
||||
export const buildDepartmentItems = (payload: AppShellPayload | null): readonly DepartmentItem[] => {
|
||||
if (!payload?.departments.length) {
|
||||
return fallbackDepartmentItems;
|
||||
}
|
||||
|
||||
return payload.departments.map((department, index) => ({
|
||||
id: department.id,
|
||||
name: department.name,
|
||||
teams: payload.teams.filter((team) => team.departmentId === department.id).map((team) => team.name),
|
||||
active: index === 0,
|
||||
}));
|
||||
};
|
||||
|
||||
export const buildActiveDepartment = (payload: AppShellPayload | null): ActiveDepartment => {
|
||||
const firstDepartment = payload?.departments[0];
|
||||
|
||||
if (!firstDepartment) {
|
||||
return fallbackActiveDepartment;
|
||||
}
|
||||
|
||||
const firstTeamName = payload?.teams.find((team) => team.departmentId === firstDepartment.id)?.name ?? "";
|
||||
|
||||
return {
|
||||
id: firstDepartment.id,
|
||||
name: firstDepartment.name,
|
||||
teamName: firstTeamName,
|
||||
};
|
||||
};
|
||||
|
||||
export const buildWorkspaceTree = (payload: AppShellPayload | null): readonly WorkspaceTreeNode[] => {
|
||||
if (!payload?.projects.length) {
|
||||
return fallbackWorkspaceTree;
|
||||
}
|
||||
|
||||
return [];
|
||||
};
|
||||
|
||||
export const buildActiveUserProfile = (payload: AppShellPayload | null): ActiveUserProfile => {
|
||||
if (!payload?.admin) {
|
||||
return fallbackActiveUserProfile;
|
||||
}
|
||||
|
||||
const organizationName = payload.installation?.name || payload.organizations[0]?.name || fallbackActiveServer.name;
|
||||
const departmentName = payload.departments[0]?.name;
|
||||
|
||||
return {
|
||||
name: payload.admin.displayName,
|
||||
email: payload.admin.email,
|
||||
roleLabel: payload.admin.isInstanceAdmin ? "Instance admin" : "Member",
|
||||
contextLabel: departmentName ? `${organizationName} • ${departmentName}` : organizationName,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,97 @@
|
||||
// Path: Frontend/src/components/app-shell/data/app-shell.context.tsx
|
||||
|
||||
import {
|
||||
createContext,
|
||||
createMemo,
|
||||
createSignal,
|
||||
onMount,
|
||||
useContext,
|
||||
type JSX,
|
||||
} from "solid-js";
|
||||
import { resolveAPIBase } from "../../../lib/api";
|
||||
import {
|
||||
buildActiveDepartment,
|
||||
buildActiveProject,
|
||||
buildActiveServer,
|
||||
buildActiveUserProfile,
|
||||
buildDepartmentItems,
|
||||
buildProjectItems,
|
||||
buildRailItems,
|
||||
buildWorkspaceTree,
|
||||
} from "./app-shell.builders";
|
||||
import type { AppShellContextValue, AppShellPayload } from "./app-shell.types";
|
||||
import { normalizeAppShellPayload } from "./app-shell.types";
|
||||
|
||||
const AppShellContext = createContext<AppShellContextValue>();
|
||||
|
||||
export const AppShellDataProvider = (props: { children: JSX.Element }): JSX.Element => {
|
||||
const [status, setStatus] = createSignal<"idle" | "loading" | "success" | "error">("idle");
|
||||
const [error, setError] = createSignal("");
|
||||
const [payload, setPayload] = createSignal<AppShellPayload | null>(null);
|
||||
|
||||
const load = async (): Promise<void> => {
|
||||
setStatus("loading");
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const response = await fetch(`${resolveAPIBase()}/app-shell`, {
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
const body = (await response.json()) as {
|
||||
data?: AppShellPayload;
|
||||
error?: { message?: string } | string;
|
||||
message?: string;
|
||||
};
|
||||
const errorMessage =
|
||||
typeof body.message === "string"
|
||||
? body.message
|
||||
: typeof body.error === "string"
|
||||
? body.error
|
||||
: body.error?.message;
|
||||
|
||||
if (!response.ok || !body.data) {
|
||||
throw new Error(errorMessage || "Failed to load app shell state.");
|
||||
}
|
||||
|
||||
setPayload(normalizeAppShellPayload(body.data));
|
||||
setStatus("success");
|
||||
} catch (loadError) {
|
||||
setStatus("error");
|
||||
setError(loadError instanceof Error ? loadError.message : "Failed to load app shell state.");
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
void load();
|
||||
});
|
||||
|
||||
const value: AppShellContextValue = {
|
||||
status,
|
||||
error,
|
||||
installation: createMemo(() => payload()?.installation),
|
||||
railItems: createMemo(() => buildRailItems(payload())),
|
||||
activeServer: createMemo(() => buildActiveServer(payload())),
|
||||
activeProject: createMemo(() => buildActiveProject(payload())),
|
||||
activeDepartment: createMemo(() => buildActiveDepartment(payload())),
|
||||
projectItems: createMemo(() => buildProjectItems(payload())),
|
||||
departmentItems: createMemo(() => buildDepartmentItems(payload())),
|
||||
workspaceTree: createMemo(() => buildWorkspaceTree(payload())),
|
||||
activeUserProfile: createMemo(() => buildActiveUserProfile(payload())),
|
||||
reload: load,
|
||||
};
|
||||
|
||||
return <AppShellContext.Provider value={value}>{props.children}</AppShellContext.Provider>;
|
||||
};
|
||||
|
||||
export const useAppShellData = (): AppShellContextValue => {
|
||||
const context = useContext(AppShellContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useAppShellData must be used within AppShellDataProvider");
|
||||
}
|
||||
|
||||
return context;
|
||||
};
|
||||
@@ -0,0 +1,130 @@
|
||||
// Path: Frontend/src/components/app-shell/data/app-shell.types.ts
|
||||
|
||||
import type { Accessor } from "solid-js";
|
||||
import type {
|
||||
ActiveDepartment,
|
||||
ActiveProject,
|
||||
ActiveServer,
|
||||
ActiveUserProfile,
|
||||
DepartmentItem,
|
||||
ProjectItem,
|
||||
RailItem,
|
||||
WorkspaceTreeNode,
|
||||
} from "./shell.data";
|
||||
|
||||
export type AppShellInstallation = {
|
||||
id: string;
|
||||
name: string;
|
||||
mode: "personal" | "organizational" | string;
|
||||
access: string;
|
||||
protocol: string;
|
||||
host: string;
|
||||
isBootstrapped: boolean;
|
||||
materializationStatus: "not_started" | "pending" | "running" | "succeeded" | "failed" | string;
|
||||
materializationError?: string;
|
||||
};
|
||||
|
||||
export type AppShellAdmin = {
|
||||
id: string;
|
||||
email: string;
|
||||
displayName: string;
|
||||
isInstanceAdmin: boolean;
|
||||
homeTitle: string;
|
||||
};
|
||||
|
||||
export type AppShellOrganization = {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
};
|
||||
|
||||
export type AppShellDepartment = {
|
||||
id: string;
|
||||
organizationId: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
};
|
||||
|
||||
export type AppShellTeam = {
|
||||
id: string;
|
||||
organizationId: string;
|
||||
departmentId?: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
};
|
||||
|
||||
export type AppShellProject = {
|
||||
id: string;
|
||||
organizationId: string;
|
||||
departmentId?: string;
|
||||
teamId?: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
};
|
||||
|
||||
export type AppShellWorkspace = {
|
||||
id: string;
|
||||
organizationId: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
kind: "organization" | "department" | "team" | "project" | string;
|
||||
departmentId?: string;
|
||||
teamId?: string;
|
||||
projectId?: string;
|
||||
};
|
||||
|
||||
export type AppShellPayload = {
|
||||
installation?: AppShellInstallation;
|
||||
admin?: AppShellAdmin;
|
||||
organizations: AppShellOrganization[];
|
||||
departments: AppShellDepartment[];
|
||||
teams: AppShellTeam[];
|
||||
projects: AppShellProject[];
|
||||
workspaces: AppShellWorkspace[];
|
||||
};
|
||||
|
||||
export type AppShellContextValue = {
|
||||
status: Accessor<"idle" | "loading" | "success" | "error">;
|
||||
error: Accessor<string>;
|
||||
installation: Accessor<AppShellInstallation | undefined>;
|
||||
railItems: Accessor<readonly RailItem[]>;
|
||||
activeServer: Accessor<ActiveServer>;
|
||||
activeProject: Accessor<ActiveProject>;
|
||||
activeDepartment: Accessor<ActiveDepartment>;
|
||||
projectItems: Accessor<readonly ProjectItem[]>;
|
||||
departmentItems: Accessor<readonly DepartmentItem[]>;
|
||||
workspaceTree: Accessor<readonly WorkspaceTreeNode[]>;
|
||||
activeUserProfile: Accessor<ActiveUserProfile>;
|
||||
reload: () => Promise<void>;
|
||||
};
|
||||
|
||||
export const normalizeInstallation = (
|
||||
installation: AppShellInstallation | null | undefined,
|
||||
): AppShellInstallation | undefined => {
|
||||
if (!installation) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const materializationStatus = installation.materializationStatus?.trim()
|
||||
? installation.materializationStatus
|
||||
: installation.isBootstrapped
|
||||
? "succeeded"
|
||||
: "not_started";
|
||||
const materializationError = installation.materializationError?.trim() || undefined;
|
||||
|
||||
return {
|
||||
...installation,
|
||||
materializationStatus,
|
||||
materializationError,
|
||||
};
|
||||
};
|
||||
|
||||
export const normalizeAppShellPayload = (payload: AppShellPayload | null | undefined): AppShellPayload => ({
|
||||
installation: normalizeInstallation(payload?.installation),
|
||||
admin: payload?.admin,
|
||||
organizations: Array.isArray(payload?.organizations) ? payload.organizations : [],
|
||||
departments: Array.isArray(payload?.departments) ? payload.departments : [],
|
||||
teams: Array.isArray(payload?.teams) ? payload.teams : [],
|
||||
projects: Array.isArray(payload?.projects) ? payload.projects : [],
|
||||
workspaces: Array.isArray(payload?.workspaces) ? payload.workspaces : [],
|
||||
});
|
||||
@@ -0,0 +1,174 @@
|
||||
// Path: Frontend/src/components/app-shell/data/shell.context-menu.ts
|
||||
|
||||
import { getWorkspaceCreateActions, getWorkspaceItemTypeDefinition } from "./shell.registry";
|
||||
import type {
|
||||
ActiveProject,
|
||||
ProjectContextMenuAction,
|
||||
ProjectContextMenuSection,
|
||||
ProjectItem,
|
||||
ProjectMenuTarget,
|
||||
WorkspaceContextMenuSection,
|
||||
WorkspaceContextMenuTarget,
|
||||
WorkspaceStaticItem,
|
||||
WorkspaceTreeNode,
|
||||
} from "./shell.types";
|
||||
|
||||
export { getWorkspaceContextMenuEyebrow } from "./shell.registry";
|
||||
|
||||
export const createWorkspaceSurfaceTarget = (workspace: ActiveProject): WorkspaceContextMenuTarget => ({
|
||||
id: `workspace-${workspace.id}`,
|
||||
label: workspace.name,
|
||||
kind: "workspace",
|
||||
});
|
||||
|
||||
export const createWorkspaceStaticTarget = (item: WorkspaceStaticItem): WorkspaceContextMenuTarget => ({
|
||||
id: item.id,
|
||||
label: item.label,
|
||||
kind: item.contextKind,
|
||||
});
|
||||
|
||||
export const createWorkspaceTreeTarget = (node: WorkspaceTreeNode): WorkspaceContextMenuTarget => ({
|
||||
id: node.id,
|
||||
label: node.label,
|
||||
...(node.kind === "folder"
|
||||
? { kind: "folder" as const }
|
||||
: {
|
||||
kind: "item" as const,
|
||||
itemType: node.itemType,
|
||||
}),
|
||||
});
|
||||
|
||||
export const getWorkspaceContextMenuSections = (
|
||||
target: WorkspaceContextMenuTarget,
|
||||
): readonly WorkspaceContextMenuSection[] => {
|
||||
const createActions = getWorkspaceCreateActions();
|
||||
const createSubmenuAction = {
|
||||
id: "create",
|
||||
label: "Create",
|
||||
children: createActions,
|
||||
} as const;
|
||||
|
||||
switch (target.kind) {
|
||||
case "workspace":
|
||||
return [
|
||||
{ id: "create", label: undefined, items: [createSubmenuAction] },
|
||||
{
|
||||
id: "workspace",
|
||||
label: undefined,
|
||||
items: [
|
||||
{ id: "rename-workspace", label: "Rename workspace", shortcut: { key: "enter" } },
|
||||
{ id: "copy-workspace-link", label: "Copy link", shortcut: { modifiers: ["meta"], key: "c" } },
|
||||
],
|
||||
},
|
||||
] as const;
|
||||
case "home":
|
||||
return [
|
||||
{ id: "create", label: undefined, items: [createSubmenuAction] },
|
||||
{ id: "workspace", label: undefined, items: [{ id: "open-home", label: "Open home", shortcut: { key: "enter" } }] },
|
||||
] as const;
|
||||
case "settings":
|
||||
return [
|
||||
{
|
||||
id: "settings",
|
||||
label: undefined,
|
||||
items: [
|
||||
{ id: "open-settings", label: "Open settings", shortcut: { key: "enter" } },
|
||||
{ id: "copy-settings-link", label: "Copy link", shortcut: { modifiers: ["meta"], key: "c" } },
|
||||
],
|
||||
},
|
||||
] as const;
|
||||
case "folder":
|
||||
return [
|
||||
{ id: "open", items: [{ id: "open-folder", label: "Open folder", shortcut: { key: "enter" } }, { id: "rename-folder", label: "Rename", shortcut: { modifiers: ["meta"], key: "r" } }] },
|
||||
{ id: "create", label: undefined, items: [createSubmenuAction] },
|
||||
{
|
||||
id: "organize",
|
||||
label: undefined,
|
||||
items: [
|
||||
{ id: "move-folder", label: "Move…", shortcut: { modifiers: ["meta"], key: "m" } },
|
||||
{ id: "delete-folder", label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
|
||||
],
|
||||
},
|
||||
] as const;
|
||||
case "item": {
|
||||
const definition = getWorkspaceItemTypeDefinition(target.itemType);
|
||||
const actionPrefix = definition.actionPrefix;
|
||||
const nounLabel = definition.noun;
|
||||
|
||||
return [
|
||||
{
|
||||
id: `${actionPrefix}-primary`,
|
||||
items: [
|
||||
{ id: `open-${actionPrefix}`, label: `Open ${nounLabel}`, shortcut: { key: "enter" } },
|
||||
{ id: `rename-${actionPrefix}`, label: "Rename", shortcut: { modifiers: ["meta"], key: "r" } },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "organize",
|
||||
label: undefined,
|
||||
items: [
|
||||
{ id: `move-${actionPrefix}`, label: "Move…", shortcut: { modifiers: ["meta"], key: "m" } },
|
||||
{ id: `delete-${actionPrefix}`, label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
|
||||
],
|
||||
},
|
||||
] as const;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getProjectCreateActions = (): readonly ProjectContextMenuAction[] =>
|
||||
[
|
||||
{ id: "new-project", label: "New project" },
|
||||
{ id: "new-folder", label: "New folder" },
|
||||
] as const;
|
||||
|
||||
const getProjectFolderDangerActions = (): readonly ProjectContextMenuAction[] =>
|
||||
[
|
||||
{ id: "rename-folder", label: "Rename", shortcut: { modifiers: ["meta"], key: "r" } },
|
||||
{ id: "delete-folder", label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
|
||||
] as const;
|
||||
|
||||
export const createProjectSurfaceTarget = (label = "Projects"): ProjectMenuTarget => ({
|
||||
id: "project-surface",
|
||||
label,
|
||||
kind: "surface",
|
||||
});
|
||||
|
||||
export const createProjectFolderTarget = (id: string, label: string): ProjectMenuTarget => ({
|
||||
id,
|
||||
label,
|
||||
kind: "folder",
|
||||
});
|
||||
|
||||
export const createProjectTarget = (project: ProjectItem): ProjectMenuTarget => ({
|
||||
id: project.id,
|
||||
label: project.name,
|
||||
kind: "project",
|
||||
});
|
||||
|
||||
export const getProjectContextMenuEyebrow = (target: ProjectMenuTarget): string => {
|
||||
switch (target.kind) {
|
||||
case "surface":
|
||||
return "Projects";
|
||||
case "folder":
|
||||
return "Folder";
|
||||
case "project":
|
||||
return "Project";
|
||||
}
|
||||
};
|
||||
|
||||
export const getProjectContextMenuSections = (target: ProjectMenuTarget): readonly ProjectContextMenuSection[] => {
|
||||
const createActions = getProjectCreateActions();
|
||||
|
||||
switch (target.kind) {
|
||||
case "surface":
|
||||
return [{ id: "create", items: createActions }] as const;
|
||||
case "folder":
|
||||
return [
|
||||
{ id: "create", items: createActions },
|
||||
{ id: "organize", items: getProjectFolderDangerActions() },
|
||||
] as const;
|
||||
case "project":
|
||||
return [{ id: "create", items: createActions }] as const;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
// Path: Frontend/src/components/app-shell/data/shell.data.ts
|
||||
|
||||
export * from "./shell.types";
|
||||
export * from "./shell.registry";
|
||||
export * from "./shell.scaffold";
|
||||
export * from "./shell.context-menu";
|
||||
@@ -0,0 +1,100 @@
|
||||
// Path: Frontend/src/components/app-shell/data/shell.registry.ts
|
||||
|
||||
import { FileText, LayoutGrid } from "../../../lib/icons";
|
||||
import type {
|
||||
ShellIcon,
|
||||
WorkspaceContextMenuAction,
|
||||
WorkspaceContextMenuTarget,
|
||||
WorkspaceItemTypeDefinition,
|
||||
WorkspaceItemTypeId,
|
||||
WorkspaceTreeNode,
|
||||
} from "./shell.types";
|
||||
|
||||
export const firstPartyWorkspaceItemTypes: readonly WorkspaceItemTypeDefinition[] = [
|
||||
{
|
||||
id: "core.doc",
|
||||
label: "Doc",
|
||||
shortLabel: "Doc",
|
||||
icon: FileText,
|
||||
noun: "doc",
|
||||
actionPrefix: "doc",
|
||||
defaultCreateLabel: "New doc",
|
||||
includeInWorkspaceCreate: true,
|
||||
description: "Rich text documents and notes.",
|
||||
},
|
||||
{
|
||||
id: "core.board.kanban",
|
||||
label: "Kanban board",
|
||||
shortLabel: "Board",
|
||||
icon: LayoutGrid,
|
||||
noun: "board",
|
||||
actionPrefix: "board",
|
||||
defaultCreateLabel: "New board",
|
||||
includeInWorkspaceCreate: true,
|
||||
description: "Default board-style workspace item.",
|
||||
},
|
||||
{
|
||||
id: "core.board.list",
|
||||
label: "List board",
|
||||
shortLabel: "Board",
|
||||
icon: LayoutGrid,
|
||||
noun: "board",
|
||||
actionPrefix: "list-board",
|
||||
defaultCreateLabel: "New list board",
|
||||
description: "Alternate first-party board view prepared for the future registry.",
|
||||
},
|
||||
] as const;
|
||||
|
||||
const workspaceItemTypeMap = new Map<WorkspaceItemTypeId, WorkspaceItemTypeDefinition>(
|
||||
firstPartyWorkspaceItemTypes.map((definition) => [definition.id, definition]),
|
||||
);
|
||||
|
||||
const createUnknownWorkspaceItemTypeDefinition = (
|
||||
itemType: WorkspaceItemTypeId,
|
||||
): WorkspaceItemTypeDefinition => ({
|
||||
id: itemType,
|
||||
label: "Item",
|
||||
shortLabel: "Item",
|
||||
icon: FileText,
|
||||
noun: "item",
|
||||
actionPrefix: "item",
|
||||
defaultCreateLabel: "New item",
|
||||
description: "Fallback definition for unknown or future workspace item types.",
|
||||
});
|
||||
|
||||
export const getWorkspaceItemTypeDefinition = (itemType: WorkspaceItemTypeId): WorkspaceItemTypeDefinition => {
|
||||
return workspaceItemTypeMap.get(itemType) ?? createUnknownWorkspaceItemTypeDefinition(itemType);
|
||||
};
|
||||
|
||||
export const getWorkspaceNodeIcon = (node: WorkspaceTreeNode): ShellIcon =>
|
||||
node.kind === "folder" ? node.icon : getWorkspaceItemTypeDefinition(node.itemType).icon;
|
||||
|
||||
export const getWorkspaceCreateActions = (): readonly WorkspaceContextMenuAction[] => [
|
||||
{ id: "new-folder", label: "New folder", shortcut: { modifiers: ["alt"], key: "f" } },
|
||||
...firstPartyWorkspaceItemTypes
|
||||
.filter((definition) => definition.includeInWorkspaceCreate)
|
||||
.map((definition) => ({
|
||||
id: `create-${definition.actionPrefix}`,
|
||||
label: definition.defaultCreateLabel,
|
||||
shortcut:
|
||||
definition.id === "core.board.kanban"
|
||||
? ({ modifiers: ["alt"], key: "b" } as const)
|
||||
: definition.id === "core.doc"
|
||||
? ({ modifiers: ["alt"], key: "d" } as const)
|
||||
: undefined,
|
||||
})),
|
||||
];
|
||||
|
||||
export const getWorkspaceContextMenuEyebrow = (target: WorkspaceContextMenuTarget): string => {
|
||||
switch (target.kind) {
|
||||
case "workspace":
|
||||
case "home":
|
||||
return "Workspace";
|
||||
case "settings":
|
||||
return "Configuration";
|
||||
case "folder":
|
||||
return "Folder";
|
||||
case "item":
|
||||
return getWorkspaceItemTypeDefinition(target.itemType).shortLabel;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,222 @@
|
||||
// Path: Frontend/src/components/app-shell/data/shell.scaffold.ts
|
||||
|
||||
import {
|
||||
Bell,
|
||||
CircleHelp,
|
||||
FileText,
|
||||
Folder,
|
||||
Home,
|
||||
Keyboard,
|
||||
LayoutGrid,
|
||||
ListCollapse,
|
||||
LogOut,
|
||||
Repeat,
|
||||
Search,
|
||||
Settings,
|
||||
Shield,
|
||||
User,
|
||||
} from "../../../lib/icons";
|
||||
import type {
|
||||
ActiveDepartment,
|
||||
ActiveProject,
|
||||
ActiveServer,
|
||||
ActiveUserProfile,
|
||||
DepartmentItem,
|
||||
MobileBottomNavItem,
|
||||
NotificationItem,
|
||||
ProfileMenuSection,
|
||||
ProjectItem,
|
||||
RailItem,
|
||||
ServerDockAction,
|
||||
SidebarHeaderAction,
|
||||
TopBarAction,
|
||||
WorkspaceStaticItem,
|
||||
WorkspaceTreeNode,
|
||||
} from "./shell.types";
|
||||
|
||||
export const personalDockActions: readonly ServerDockAction[] = [
|
||||
{ id: "account", label: "Account", icon: User },
|
||||
{ id: "settings", label: "Settings", icon: Settings },
|
||||
] as const;
|
||||
|
||||
export const organizationAdminDockActions: readonly ServerDockAction[] = [
|
||||
{ id: "members", label: "Members", icon: User },
|
||||
{ id: "server", label: "Server", icon: Settings },
|
||||
] as const;
|
||||
|
||||
export const railItems: readonly RailItem[] = [
|
||||
{ id: "personal-server", label: "Personal Server Name", abbreviation: "P", kind: "personal" },
|
||||
{ id: "organization-server", label: "Organization Name", abbreviation: "O", kind: "organization", active: true },
|
||||
{ id: "design-review", label: "Design Review", abbreviation: "D", kind: "organization" },
|
||||
] as const;
|
||||
|
||||
export const activeServer: ActiveServer = {
|
||||
id: "organization-server",
|
||||
name: "Organization Name",
|
||||
abbreviation: "O",
|
||||
kind: "organization",
|
||||
connectedLabel: "12 connected",
|
||||
dockActions: organizationAdminDockActions,
|
||||
};
|
||||
|
||||
export const activeProject: ActiveProject = {
|
||||
id: "general",
|
||||
name: "General",
|
||||
};
|
||||
|
||||
export const activeDepartment: ActiveDepartment = {
|
||||
id: "product",
|
||||
name: "Product",
|
||||
teamName: "Design Systems",
|
||||
};
|
||||
|
||||
export const projectItems: readonly ProjectItem[] = [
|
||||
{
|
||||
id: "general",
|
||||
name: "General",
|
||||
description: "Default shared project",
|
||||
groupLabel: "Shared space",
|
||||
parentLabel: "Workspace home",
|
||||
meta: "1 workspace",
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: "operations",
|
||||
name: "Operations",
|
||||
description: "Cross-team planning and delivery",
|
||||
groupLabel: "Team folders",
|
||||
parentLabel: "Shared Services",
|
||||
meta: "2 workspaces",
|
||||
},
|
||||
{
|
||||
id: "hiring",
|
||||
name: "Hiring",
|
||||
description: "Candidate pipeline and interview loops",
|
||||
groupLabel: "Team folders",
|
||||
parentLabel: "People Ops",
|
||||
meta: "1 workspace",
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const departmentItems: readonly DepartmentItem[] = [
|
||||
{ id: "product", name: "Product", teams: ["Design Systems", "Research Ops"], active: true },
|
||||
{ id: "engineering", name: "Engineering", teams: ["Platform", "Realtime Collaboration"] },
|
||||
{ id: "operations", name: "Operations", teams: ["Shared Services", "People Ops"] },
|
||||
] as const;
|
||||
|
||||
export const workspaceStaticItems: readonly WorkspaceStaticItem[] = [
|
||||
{ id: "home", label: "Home", icon: Home, active: true, contextKind: "home" },
|
||||
{ id: "workspace-settings", label: "Settings", icon: Settings, contextKind: "settings" },
|
||||
] as const;
|
||||
|
||||
export const workspaceTree: readonly WorkspaceTreeNode[] = [
|
||||
{
|
||||
id: "product-workspace",
|
||||
label: "Product",
|
||||
kind: "folder",
|
||||
icon: Folder,
|
||||
children: [
|
||||
{ id: "roadmap-board", label: "Roadmap", kind: "item", itemType: "core.board.kanban", active: true },
|
||||
{ id: "launch-brief", label: "Launch Brief", kind: "item", itemType: "core.doc" },
|
||||
{
|
||||
id: "research-folder",
|
||||
label: "Research",
|
||||
kind: "folder",
|
||||
icon: Folder,
|
||||
children: [
|
||||
{ id: "interviews-doc", label: "Interviews", kind: "item", itemType: "core.doc" },
|
||||
{ id: "signals-board", label: "Signals", kind: "item", itemType: "core.board.kanban", meta: "2" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "design-folder",
|
||||
label: "Design",
|
||||
kind: "folder",
|
||||
icon: Folder,
|
||||
children: [
|
||||
{ id: "system-doc", label: "Design System", kind: "item", itemType: "core.doc" },
|
||||
{ id: "review-board", label: "Review Queue", kind: "item", itemType: "core.board.kanban" },
|
||||
],
|
||||
},
|
||||
{ id: "general-notes", label: "General Notes", kind: "item", itemType: "core.doc" },
|
||||
] as const;
|
||||
|
||||
export const workspaceSidebarHeaderActions: readonly SidebarHeaderAction[] = [
|
||||
{ id: "search-workspace", label: "Search workspace", icon: Search },
|
||||
{ id: "toggle-workspace-folders", label: "Collapse all folders", icon: ListCollapse },
|
||||
] as const;
|
||||
|
||||
export const mobileBottomNavItems: readonly MobileBottomNavItem[] = [
|
||||
{ id: "home", label: "Home", icon: Home, active: true },
|
||||
{ id: "search", label: "Search", icon: Search },
|
||||
{ id: "browse", label: "Browse", icon: Folder },
|
||||
] as const;
|
||||
|
||||
export const topBarActions: readonly TopBarAction[] = [{ id: "search", label: "Search", icon: Search }] as const;
|
||||
|
||||
export const notificationItems: readonly NotificationItem[] = [
|
||||
{
|
||||
id: "comment-design-systems",
|
||||
title: "New comment on Design Systems",
|
||||
contextLabel: "Product • Review thread updated",
|
||||
timeLabel: "2m ago",
|
||||
unread: true,
|
||||
},
|
||||
{
|
||||
id: "sprint-platform",
|
||||
title: "Sprint updated in Platform",
|
||||
contextLabel: "Engineering • Scope changed",
|
||||
timeLabel: "15m ago",
|
||||
unread: true,
|
||||
},
|
||||
{
|
||||
id: "member-joined",
|
||||
title: "New member joined Operations",
|
||||
contextLabel: "Organization Name • Access granted",
|
||||
timeLabel: "1h ago",
|
||||
},
|
||||
{
|
||||
id: "daily-summary",
|
||||
title: "Daily summary is ready",
|
||||
contextLabel: "General • 8 updates across boards",
|
||||
timeLabel: "Today, 8:00 AM",
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const unreadNotificationCount = notificationItems.filter((item) => item.unread).length;
|
||||
|
||||
export const activeUserProfile: ActiveUserProfile = {
|
||||
name: "Demo Account",
|
||||
email: "demo@moku.work",
|
||||
roleLabel: "Founder · Product",
|
||||
contextLabel: "Organization Name • Design Systems",
|
||||
};
|
||||
|
||||
export const profileMenuSections: readonly ProfileMenuSection[] = [
|
||||
{
|
||||
id: "account",
|
||||
items: [
|
||||
{ id: "profile", label: "Profile", icon: User },
|
||||
{ id: "account-settings", label: "Account Settings", icon: Settings },
|
||||
{ id: "notifications", label: "Notifications", icon: Bell },
|
||||
{ id: "security", label: "Security", icon: Shield },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "preferences",
|
||||
items: [
|
||||
{ id: "keyboard-shortcuts", label: "Keyboard Shortcuts", icon: Keyboard },
|
||||
{ id: "theme-preferences", label: "Theme Preferences", icon: Settings },
|
||||
{ id: "help-support", label: "Help & Support", icon: CircleHelp },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "session",
|
||||
items: [
|
||||
{ id: "switch-account", label: "Switch Account", icon: Repeat },
|
||||
{ id: "sign-out", label: "Sign Out", icon: LogOut, tone: "danger" },
|
||||
],
|
||||
},
|
||||
] as const;
|
||||
@@ -0,0 +1,233 @@
|
||||
// Path: Frontend/src/components/app-shell/data/shell.types.ts
|
||||
|
||||
import type { Component } from "solid-js";
|
||||
|
||||
export type ShellIconProps = {
|
||||
class?: string;
|
||||
size?: number;
|
||||
strokeWidth?: number;
|
||||
};
|
||||
|
||||
export type ShellIcon = Component<ShellIconProps>;
|
||||
|
||||
export type RailItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
abbreviation: string;
|
||||
kind: "personal" | "organization";
|
||||
active?: boolean;
|
||||
};
|
||||
|
||||
export type ServerDockAction = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: ShellIcon;
|
||||
};
|
||||
|
||||
export type ActiveServer = {
|
||||
id: string;
|
||||
name: string;
|
||||
abbreviation: string;
|
||||
kind: "personal" | "organization";
|
||||
connectedLabel?: string;
|
||||
subtitle?: string;
|
||||
dockActions: readonly ServerDockAction[];
|
||||
};
|
||||
|
||||
export type ActiveProject = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type ActiveDepartment = {
|
||||
id: string;
|
||||
name: string;
|
||||
teamName: string;
|
||||
};
|
||||
|
||||
export type DepartmentItem = {
|
||||
id: string;
|
||||
name: string;
|
||||
teams: readonly string[];
|
||||
active?: boolean;
|
||||
};
|
||||
|
||||
export type ProjectItem = {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
groupLabel?: string;
|
||||
parentLabel?: string;
|
||||
meta?: string;
|
||||
active?: boolean;
|
||||
};
|
||||
|
||||
export type ProjectMenuTarget =
|
||||
| {
|
||||
id: string;
|
||||
label: string;
|
||||
kind: "surface";
|
||||
}
|
||||
| {
|
||||
id: string;
|
||||
label: string;
|
||||
kind: "folder";
|
||||
}
|
||||
| {
|
||||
id: string;
|
||||
label: string;
|
||||
kind: "project";
|
||||
};
|
||||
|
||||
export type ProjectContextMenuAction = {
|
||||
id: string;
|
||||
label: string;
|
||||
tone?: "default" | "danger";
|
||||
shortcut?: WorkspaceContextMenuShortcut;
|
||||
children?: readonly ProjectContextMenuAction[];
|
||||
};
|
||||
|
||||
export type ProjectContextMenuSection = {
|
||||
id: string;
|
||||
label?: string;
|
||||
items: readonly ProjectContextMenuAction[];
|
||||
};
|
||||
|
||||
export type SidebarItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: ShellIcon;
|
||||
active?: boolean;
|
||||
meta?: string;
|
||||
};
|
||||
|
||||
export type WorkspaceStaticKind = "workspace" | "home" | "settings";
|
||||
|
||||
export type WorkspaceItemTypeId = string;
|
||||
|
||||
export type WorkspaceStaticItem = SidebarItem & {
|
||||
contextKind: WorkspaceStaticKind;
|
||||
};
|
||||
|
||||
export type WorkspaceFolderNode = {
|
||||
id: string;
|
||||
path?: string;
|
||||
label: string;
|
||||
kind: "folder";
|
||||
icon: ShellIcon;
|
||||
active?: boolean;
|
||||
meta?: string;
|
||||
children?: readonly WorkspaceTreeNode[];
|
||||
};
|
||||
|
||||
export type WorkspaceItemNode = {
|
||||
id: string;
|
||||
path?: string;
|
||||
label: string;
|
||||
kind: "item";
|
||||
itemType: WorkspaceItemTypeId;
|
||||
active?: boolean;
|
||||
meta?: string;
|
||||
children?: undefined;
|
||||
};
|
||||
|
||||
export type WorkspaceTreeNode = WorkspaceFolderNode | WorkspaceItemNode;
|
||||
|
||||
export type WorkspaceItemTypeDefinition = {
|
||||
id: WorkspaceItemTypeId;
|
||||
label: string;
|
||||
shortLabel: string;
|
||||
icon: ShellIcon;
|
||||
noun: string;
|
||||
actionPrefix: string;
|
||||
defaultCreateLabel: string;
|
||||
includeInWorkspaceCreate?: boolean;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
export type SidebarHeaderAction = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: ShellIcon;
|
||||
};
|
||||
|
||||
export type TopBarAction = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: ShellIcon;
|
||||
};
|
||||
|
||||
export type MobileBottomNavItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: ShellIcon;
|
||||
active?: boolean;
|
||||
};
|
||||
|
||||
export type WorkspaceContextMenuTarget =
|
||||
| {
|
||||
id: string;
|
||||
label: string;
|
||||
kind: WorkspaceStaticKind;
|
||||
}
|
||||
| {
|
||||
id: string;
|
||||
label: string;
|
||||
kind: "folder";
|
||||
}
|
||||
| {
|
||||
id: string;
|
||||
label: string;
|
||||
kind: "item";
|
||||
itemType: WorkspaceItemTypeId;
|
||||
};
|
||||
|
||||
export type WorkspaceContextMenuAction = {
|
||||
id: string;
|
||||
label: string;
|
||||
tone?: "default" | "danger";
|
||||
shortcut?: WorkspaceContextMenuShortcut;
|
||||
children?: readonly WorkspaceContextMenuAction[];
|
||||
};
|
||||
|
||||
export type WorkspaceContextMenuShortcutModifier = "meta" | "alt" | "shift";
|
||||
|
||||
export type WorkspaceContextMenuShortcutKey = "b" | "c" | "d" | "delete" | "enter" | "f" | "m" | "r";
|
||||
|
||||
export type WorkspaceContextMenuShortcut = {
|
||||
modifiers?: readonly WorkspaceContextMenuShortcutModifier[];
|
||||
key: WorkspaceContextMenuShortcutKey;
|
||||
};
|
||||
|
||||
export type WorkspaceContextMenuSection = {
|
||||
id: string;
|
||||
label?: string;
|
||||
items: readonly WorkspaceContextMenuAction[];
|
||||
};
|
||||
|
||||
export type NotificationItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
contextLabel: string;
|
||||
timeLabel: string;
|
||||
unread?: boolean;
|
||||
};
|
||||
|
||||
export type ProfileMenuAction = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: ShellIcon;
|
||||
tone?: "default" | "danger";
|
||||
};
|
||||
|
||||
export type ProfileMenuSection = {
|
||||
id: string;
|
||||
items: readonly ProfileMenuAction[];
|
||||
};
|
||||
|
||||
export type ActiveUserProfile = {
|
||||
name: string;
|
||||
email: string;
|
||||
roleLabel: string;
|
||||
contextLabel: string;
|
||||
};
|
||||
Reference in New Issue
Block a user