Feat: Add responsive workspace shell
This commit is contained in:
MangoPig
@@ -8,8 +8,10 @@
|
||||
}
|
||||
|
||||
.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);
|
||||
@@ -101,6 +103,16 @@
|
||||
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);
|
||||
@@ -191,17 +203,46 @@
|
||||
|
||||
@include respond-down(mobile) {
|
||||
.body {
|
||||
grid-template-columns: 4.5rem minmax(0, 1fr);
|
||||
--rail-width: 4.5rem;
|
||||
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 {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspaceRegion,
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,52 @@
|
||||
// Path: Frontend/src/components/shell/AppShell/AppShell.tsx
|
||||
|
||||
import { createSignal, onMount, type JSX } from "solid-js";
|
||||
import { createSignal, onCleanup, onMount, Show, type JSX } from "solid-js";
|
||||
import { getDocumentTheme, setTheme, type Theme } from "../../../theme/runtime";
|
||||
import { WorkspaceHome } from "../../workspace-home/WorkspaceHome/WorkspaceHome";
|
||||
import { LeftRail } from "../LeftRail/LeftRail";
|
||||
import { MobileBottomNav } from "../MobileBottomNav/MobileBottomNav";
|
||||
import { MobileWorkspaceBrowser } from "../MobileWorkspaceBrowser/MobileWorkspaceBrowser";
|
||||
import { ServerDock } from "../ServerDock/ServerDock";
|
||||
import { NotificationsMenu } from "../TopBar/NotificationsMenu";
|
||||
import { ProfileMenu } from "../TopBar/ProfileMenu";
|
||||
import { TopBar } from "../TopBar/TopBar";
|
||||
import { WorkspaceSidebar } from "../WorkspaceSidebar/WorkspaceSidebar";
|
||||
import styles from "./AppShell.module.scss";
|
||||
|
||||
type MobileWorkspaceView = "notifications" | "profile" | null;
|
||||
const MOBILE_VIEWPORT_QUERY = "(max-width: 48rem)";
|
||||
|
||||
export const AppShell = (): 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);
|
||||
|
||||
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 => {
|
||||
@@ -25,9 +56,39 @@ export const AppShell = (): JSX.Element => {
|
||||
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);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={styles.shell}>
|
||||
<TopBar theme={themeState()} onToggleTheme={toggleTheme} />
|
||||
<TopBar
|
||||
theme={themeState()}
|
||||
onToggleTheme={toggleTheme}
|
||||
isMobileViewport={isMobileViewport()}
|
||||
isNotificationsOpen={activeMobileWorkspaceView() === "notifications"}
|
||||
isProfileOpen={activeMobileWorkspaceView() === "profile"}
|
||||
onToggleNotifications={toggleMobileNotifications}
|
||||
onToggleProfile={toggleMobileProfile}
|
||||
/>
|
||||
|
||||
<div
|
||||
classList={{
|
||||
@@ -54,12 +115,27 @@ export const AppShell = (): JSX.Element => {
|
||||
</div>
|
||||
|
||||
<div class={styles.workspaceMain}>
|
||||
<WorkspaceHome
|
||||
sidebarCollapsed={isSidebarCollapsed()}
|
||||
onToggleSidebarCollapse={(): void => {
|
||||
setIsSidebarCollapsed((collapsed) => !collapsed);
|
||||
}}
|
||||
/>
|
||||
{/* On mobile, top-bar menus become full workspace views instead of popovers. */}
|
||||
<Show
|
||||
when={isMobileViewport() && activeMobileWorkspaceView() !== null}
|
||||
fallback={
|
||||
<WorkspaceHome
|
||||
sidebarCollapsed={isSidebarCollapsed()}
|
||||
onToggleSidebarCollapse={(): void => {
|
||||
setIsSidebarCollapsed((collapsed) => !collapsed);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div class={styles.mobileWorkspaceView}>
|
||||
<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>
|
||||
|
||||
@@ -68,6 +144,19 @@ export const AppShell = (): JSX.Element => {
|
||||
<ServerDock />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MobileBottomNav
|
||||
isBrowseOpen={isMobileWorkspaceBrowserOpen()}
|
||||
onBrowseToggle={(): void => {
|
||||
toggleMobileWorkspaceBrowser();
|
||||
}}
|
||||
/>
|
||||
<MobileWorkspaceBrowser
|
||||
open={isMobileWorkspaceBrowserOpen()}
|
||||
onClose={(): void => {
|
||||
setIsMobileWorkspaceBrowserOpen(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
gap: var(--space-2);
|
||||
border: 0;
|
||||
@@ -43,14 +43,25 @@
|
||||
box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-soft) 14%, transparent);
|
||||
}
|
||||
|
||||
.copy {
|
||||
min-width: 0;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.value {
|
||||
@include text-title;
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-weight-title);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.meta {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1;
|
||||
padding-left: var(--space-1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -80,7 +91,7 @@
|
||||
|
||||
.menuSection {
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
gap: calc(var(--space-1) / 2);
|
||||
}
|
||||
|
||||
.menuSectionLabel {
|
||||
@@ -171,14 +182,39 @@
|
||||
}
|
||||
|
||||
.submenuIndicator {
|
||||
width: 0.35rem;
|
||||
height: 0.35rem;
|
||||
width: calc(var(--space-1) + (var(--space-1) / 2));
|
||||
height: calc(var(--space-1) + (var(--space-1) / 2));
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
background: var(--color-accent-soft);
|
||||
}
|
||||
|
||||
@include respond-down(mobile) {
|
||||
.selector {
|
||||
align-items: flex-end;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.copy {
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.value {
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 0.68rem;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.01em;
|
||||
padding-bottom: calc(var(--space-1) / 2);
|
||||
}
|
||||
|
||||
.icon {
|
||||
align-self: flex-end;
|
||||
margin-bottom: calc(var(--space-1) / 2);
|
||||
}
|
||||
|
||||
.menu {
|
||||
min-width: min(16rem, calc(100vw - (var(--space-4) * 2)));
|
||||
}
|
||||
|
||||
@@ -53,8 +53,10 @@ export const DepartmentSelector = (): JSX.Element => {
|
||||
aria-expanded={isOpen()}
|
||||
onClick={() => setIsOpen((open) => !open)}
|
||||
>
|
||||
<strong class={styles.value}>{selectedDepartment().name}</strong>
|
||||
<span class={styles.meta}>{selectedTeamName()} team</span>
|
||||
<span class={styles.copy}>
|
||||
<strong class={styles.value}>{selectedDepartment().name}</strong>
|
||||
<span class={styles.meta}>{selectedTeamName()}</span>
|
||||
</span>
|
||||
|
||||
<ChevronDown classList={{ [styles.icon]: true, [styles.iconOpen]: isOpen() }} size={16} strokeWidth={2} />
|
||||
</button>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
.rail {
|
||||
--rail-workspace-size: var(--control-size-lg);
|
||||
--rail-action-size: var(--control-size-md);
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
flex: 1;
|
||||
@@ -9,21 +8,19 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-2) calc(var(--space-3) + var(--rail-dock-clearance, 8rem));
|
||||
padding: var(--space-3) var(--space-2) calc(var(--space-3) + var(--rail-dock-clearance, var(--shell-dock-clearance)));
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.railCollapsed {
|
||||
--rail-workspace-size: calc(var(--control-size-md) + 0.1rem);
|
||||
--rail-action-size: calc(var(--control-size-md) + 0.1rem);
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
padding-top: var(--space-4);
|
||||
padding-inline: var(--space-1);
|
||||
}
|
||||
|
||||
.topCluster,
|
||||
.bottomCluster {
|
||||
.topCluster {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -31,11 +28,6 @@
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.bottomCluster {
|
||||
margin-top: auto;
|
||||
margin-bottom: var(--rail-bottom-offset, 0rem);
|
||||
}
|
||||
|
||||
.topCluster {
|
||||
gap: var(--space-3);
|
||||
}
|
||||
@@ -44,8 +36,7 @@
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.railCollapsed .topCluster,
|
||||
.railCollapsed .bottomCluster {
|
||||
.railCollapsed .topCluster {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -191,20 +182,3 @@
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.addButton {
|
||||
width: var(--rail-action-size);
|
||||
height: var(--rail-action-size);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px dashed var(--color-border-strong);
|
||||
border-radius: var(--radius-pill);
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-surface-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
// Path: Frontend/src/components/shell/LeftRail/LeftRail.tsx
|
||||
|
||||
import { For, Show, type JSX } from "solid-js";
|
||||
import { Plus } from "../../../lib/icons";
|
||||
import { railItems, type RailItem } from "../data/shell.data";
|
||||
import styles from "./LeftRail.module.scss";
|
||||
|
||||
@@ -77,14 +76,6 @@ export const LeftRail = (props: LeftRailProps): JSX.Element => {
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.collapsed}>
|
||||
<div class={styles.bottomCluster}>
|
||||
<button type="button" class={styles.addButton} aria-label="Create server" title="Create server">
|
||||
<Plus size={16} strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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,63 @@
|
||||
// Path: Frontend/src/components/shell/MobileBottomNav/MobileBottomNav.tsx
|
||||
|
||||
import { For, type JSX } from "solid-js";
|
||||
import { activeProject, activeServer, 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 => {
|
||||
return (
|
||||
<nav class={styles.mobileNav} aria-label="Mobile workspace navigation">
|
||||
<div class={styles.contextBar}>
|
||||
<span class={styles.contextServer}>{activeServer.name}</span>
|
||||
<span class={styles.contextDivider}>/</span>
|
||||
<span class={styles.contextProject}>{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,168 @@
|
||||
.browserLayer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include respond-down(mobile) {
|
||||
.browserLayer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
z-index: calc(var(--z-popover, 20) + 2);
|
||||
background: color-mix(in srgb, var(--color-canvas) 96%, black 4%);
|
||||
}
|
||||
|
||||
.sheet {
|
||||
min-height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
background:
|
||||
linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 84%, transparent) 0%, transparent 8rem),
|
||||
color-mix(in srgb, var(--color-canvas) 97%, black 3%);
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.sheetHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-4);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
|
||||
}
|
||||
|
||||
.brandBlock {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.sectionLabel {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.brandEyebrow {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.brandTitle {
|
||||
@include text-title;
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.brandContext {
|
||||
@include text-caption;
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--control-size-md);
|
||||
height: var(--control-size-md);
|
||||
padding: 0;
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.sheetBody {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-5) var(--space-5) calc(var(--space-12) + var(--space-10) + env(safe-area-inset-bottom, 0px));
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sectionBlock {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.treeList,
|
||||
.treeListItem {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.treeList {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
border-top: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
|
||||
}
|
||||
|
||||
.treeListNested {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.treeRow {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
min-height: calc(var(--control-size-lg) + var(--space-3));
|
||||
padding: var(--space-4) var(--space-2) var(--space-4) calc(var(--space-2) + (var(--tree-depth, 0) * var(--space-4)));
|
||||
border: 0;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.treeRowActive {
|
||||
color: var(--color-text);
|
||||
background: color-mix(in srgb, var(--color-surface) 72%, transparent);
|
||||
}
|
||||
|
||||
.treeRowBranch {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.treeRowLead,
|
||||
.treeRowTrail {
|
||||
min-width: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.treeRowTrail {
|
||||
flex: 0 0 auto;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.treeLabel {
|
||||
@include text-label;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.treeMeta {
|
||||
@include text-caption;
|
||||
min-width: 1rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.treeChevron {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.treeListNested > .treeListItem > .treeRow {
|
||||
min-height: calc(var(--control-size-lg) + var(--space-1));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import { For, Show, type JSX } from "solid-js";
|
||||
import { ChevronRight, X } from "../../../lib/icons";
|
||||
import { activeProject, activeServer, workspaceStaticItems, workspaceTree, type SidebarItem, type WorkspaceTreeNode } from "../data/shell.data";
|
||||
import styles from "./MobileWorkspaceBrowser.module.scss";
|
||||
|
||||
type MobileWorkspaceBrowserProps = {
|
||||
open: boolean;
|
||||
onClose: VoidFunction;
|
||||
};
|
||||
|
||||
const TreeRow = (props: { node: WorkspaceTreeNode; depth?: number }): JSX.Element => {
|
||||
const depth = props.depth ?? 0;
|
||||
const Icon = props.node.icon;
|
||||
const hasChildren = (props.node.children?.length ?? 0) > 0;
|
||||
|
||||
return (
|
||||
<li class={styles.treeListItem}>
|
||||
<button classList={{ [styles.treeRow]: true, [styles.treeRowActive]: props.node.active ?? false, [styles.treeRowBranch]: hasChildren }} type="button" style={{ "--tree-depth": `${depth}` }}>
|
||||
<span class={styles.treeRowLead}>
|
||||
<Icon size={16} strokeWidth={2} />
|
||||
<span class={styles.treeLabel}>{props.node.label}</span>
|
||||
</span>
|
||||
|
||||
<span class={styles.treeRowTrail}>
|
||||
<Show when={props.node.meta}>
|
||||
<span class={styles.treeMeta}>{props.node.meta}</span>
|
||||
</Show>
|
||||
<Show when={hasChildren}>
|
||||
<ChevronRight size={14} strokeWidth={2} class={styles.treeChevron} />
|
||||
</Show>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<Show when={hasChildren}>
|
||||
<ul class={styles.treeListNested}>
|
||||
<For each={props.node.children}>{(child): JSX.Element => <TreeRow node={child} depth={depth + 1} />}</For>
|
||||
</ul>
|
||||
</Show>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const StaticRow = (props: { item: SidebarItem }): JSX.Element => {
|
||||
const Icon = props.item.icon;
|
||||
|
||||
return (
|
||||
<li class={styles.treeListItem}>
|
||||
<button classList={{ [styles.treeRow]: true, [styles.treeRowActive]: props.item.active ?? false }} type="button" style={{ "--tree-depth": "0" }}>
|
||||
<span class={styles.treeRowLead}>
|
||||
<Icon size={16} strokeWidth={2} />
|
||||
<span class={styles.treeLabel}>{props.item.label}</span>
|
||||
</span>
|
||||
<span class={styles.treeRowTrail}>
|
||||
<Show when={props.item.meta}>
|
||||
<span class={styles.treeMeta}>{props.item.meta}</span>
|
||||
</Show>
|
||||
<ChevronRight size={14} strokeWidth={2} class={styles.treeChevron} />
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export const MobileWorkspaceBrowser = (props: MobileWorkspaceBrowserProps): JSX.Element => {
|
||||
const sectionNodes = workspaceTree.filter((node) => (node.children?.length ?? 0) > 0);
|
||||
const looseNodes = workspaceTree.filter((node) => (node.children?.length ?? 0) === 0);
|
||||
|
||||
return (
|
||||
<Show when={props.open}>
|
||||
<div class={styles.browserLayer}>
|
||||
<section class={styles.sheet} aria-label="Mobile workspace browser">
|
||||
<header class={styles.sheetHeader}>
|
||||
<div class={styles.brandBlock}>
|
||||
<span class={styles.brandEyebrow}>Moku Work</span>
|
||||
<strong class={styles.brandTitle}>{activeProject.name}</strong>
|
||||
<span class={styles.brandContext}>{activeServer.name}</span>
|
||||
</div>
|
||||
|
||||
<button class={styles.closeButton} type="button" aria-label="Close workspace browser" onClick={props.onClose}>
|
||||
<X size={18} strokeWidth={2} />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class={styles.sheetBody}>
|
||||
<section class={styles.sectionBlock}>
|
||||
<span class={styles.sectionLabel}>Workspace</span>
|
||||
<ul class={styles.treeList}>
|
||||
<For each={workspaceStaticItems}>{(item): JSX.Element => <StaticRow item={item} />}</For>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class={styles.sectionBlock}>
|
||||
<span class={styles.sectionLabel}>Items</span>
|
||||
<ul class={styles.treeList}>
|
||||
<For each={sectionNodes}>{(node): JSX.Element => <TreeRow node={node} />}</For>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<Show when={looseNodes.length > 0}>
|
||||
<section class={styles.sectionBlock}>
|
||||
<span class={styles.sectionLabel}>More</span>
|
||||
<ul class={styles.treeList}>
|
||||
<For each={looseNodes}>{(node): JSX.Element => <TreeRow node={node} />}</For>
|
||||
</ul>
|
||||
</section>
|
||||
</Show>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
@@ -2,7 +2,7 @@
|
||||
display: grid;
|
||||
--project-drawer-gap: var(--space-3);
|
||||
--project-drawer-top: calc(var(--space-4) + var(--control-size-lg));
|
||||
--project-drawer-bottom: calc(var(--sidebar-dock-clearance) + var(--project-drawer-gap));
|
||||
--project-drawer-bottom: calc(var(--sidebar-dock-clearance, var(--shell-dock-clearance)) + var(--project-drawer-gap));
|
||||
}
|
||||
|
||||
.rootCompact {
|
||||
|
||||
@@ -7,11 +7,34 @@
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: calc(var(--radius-lg) + 0.1rem);
|
||||
border-radius: calc(var(--radius-lg) + (var(--space-1) / 2));
|
||||
background: color-mix(in srgb, var(--color-surface-muted) 96%, transparent);
|
||||
box-shadow: 0 18px 36px color-mix(in srgb, black 16%, transparent);
|
||||
backdrop-filter: blur(18px);
|
||||
z-index: 30;
|
||||
box-shadow: var(--shadow-strong);
|
||||
backdrop-filter: blur(var(--blur-overlay));
|
||||
z-index: var(--z-dropdown);
|
||||
}
|
||||
|
||||
.menu.menuWorkspace {
|
||||
position: static;
|
||||
top: auto;
|
||||
right: auto;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
z-index: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header,
|
||||
@@ -30,7 +53,7 @@
|
||||
.headerCopy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0.08rem;
|
||||
gap: calc(var(--space-1) / 2);
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -125,7 +148,7 @@
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.item {
|
||||
@@ -181,7 +204,7 @@
|
||||
.itemBody {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0.12rem;
|
||||
gap: calc(var(--space-1) / 2);
|
||||
}
|
||||
|
||||
.itemTitle {
|
||||
@@ -190,7 +213,7 @@
|
||||
}
|
||||
|
||||
.itemTime {
|
||||
padding-top: 0.05rem;
|
||||
padding-top: calc(var(--space-1) / 4);
|
||||
white-space: nowrap;
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
@@ -202,26 +225,47 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.menu.menuWorkspace .listWrap {
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
height: 100%;
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.menu.menuWorkspace .header,
|
||||
.menu.menuWorkspace .footer {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@include respond-down(mobile) {
|
||||
.menu {
|
||||
width: min(22rem, calc(100vw - (var(--space-3) * 2)));
|
||||
.menu.menuWorkspace {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.item {
|
||||
.menu.menuWorkspace .listWrap {
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.menu.menuWorkspace .item {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.itemTime {
|
||||
.menu.menuWorkspace .itemTime {
|
||||
grid-column: 2;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
.menu.menuWorkspace .footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footerAction {
|
||||
.menu.menuWorkspace .footerAction {
|
||||
padding: var(--space-1) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,8 +5,9 @@ import styles from "./NotificationsMenu.module.scss";
|
||||
|
||||
type NotificationsMenuProps = {
|
||||
id: string;
|
||||
menuRef: (element: HTMLDivElement) => void;
|
||||
menuRef?: (element: HTMLDivElement) => void;
|
||||
onSelect: () => void;
|
||||
variant?: "popover" | "workspace";
|
||||
};
|
||||
|
||||
export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element => {
|
||||
@@ -14,9 +15,19 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
|
||||
const earlierItems = notificationItems.filter((item) => !item.unread);
|
||||
const hasNotifications = notificationItems.length > 0;
|
||||
const isCaughtUp = unreadItems.length === 0 && hasNotifications;
|
||||
const variant = props.variant ?? "popover";
|
||||
|
||||
return (
|
||||
<div id={props.id} class={styles.menu} role="menu" aria-label="Notifications" ref={props.menuRef}>
|
||||
<div
|
||||
id={props.id}
|
||||
classList={{
|
||||
[styles.menu]: true,
|
||||
[styles.menuWorkspace]: variant === "workspace",
|
||||
}}
|
||||
role="menu"
|
||||
aria-label="Notifications"
|
||||
ref={props.menuRef}
|
||||
>
|
||||
<div class={styles.header}>
|
||||
<div class={styles.headerCopy}>
|
||||
<strong class={styles.title}>Notifications</strong>
|
||||
|
||||
@@ -1,56 +1,38 @@
|
||||
import { createEffect, createSignal, createUniqueId, onCleanup, type JSX } from "solid-js";
|
||||
import { createUniqueId, Show, type JSX } from "solid-js";
|
||||
import { NotificationsButton } from "./NotificationsButton";
|
||||
import { NotificationsMenu } from "./NotificationsMenu";
|
||||
import { createDesktopMenuController } from "./createDesktopMenuController";
|
||||
import styles from "./NotificationsNav.module.scss";
|
||||
|
||||
export const NotificationsNav = (): JSX.Element => {
|
||||
const [isOpen, setIsOpen] = createSignal(false);
|
||||
type NotificationsNavProps = {
|
||||
isMobileViewport: boolean;
|
||||
isMobileWorkspaceOpen: boolean;
|
||||
onToggleMobileWorkspace: VoidFunction;
|
||||
};
|
||||
|
||||
export const NotificationsNav = (props: NotificationsNavProps): JSX.Element => {
|
||||
const menuId = createUniqueId();
|
||||
let rootRef: HTMLDivElement | undefined;
|
||||
let menuRef: HTMLDivElement | undefined;
|
||||
|
||||
const closeMenu = (): void => {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const toggleMenu = (): void => {
|
||||
setIsOpen((open) => !open);
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
if (!isOpen()) return;
|
||||
|
||||
const handlePointerDown = (event: PointerEvent): void => {
|
||||
if (!rootRef) return;
|
||||
|
||||
const target = event.target;
|
||||
if (target instanceof Node && !rootRef.contains(target)) {
|
||||
closeMenu();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent): void => {
|
||||
if (event.key === "Escape") {
|
||||
closeMenu();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("pointerdown", handlePointerDown);
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
menuRef?.querySelector<HTMLButtonElement>("[role='menuitem']")?.focus();
|
||||
|
||||
onCleanup(() => {
|
||||
document.removeEventListener("pointerdown", handlePointerDown);
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<div class={styles.root} ref={rootRef}>
|
||||
<NotificationsButton isOpen={isOpen()} menuId={menuId} onToggle={toggleMenu} />
|
||||
{isOpen() ? (
|
||||
<NotificationsMenu id={menuId} menuRef={(element) => (menuRef = element)} onSelect={closeMenu} />
|
||||
) : null}
|
||||
<Show
|
||||
when={props.isMobileViewport}
|
||||
fallback={<DesktopNotificationsNav />}
|
||||
>
|
||||
<div class={styles.root}>
|
||||
<NotificationsButton isOpen={props.isMobileWorkspaceOpen} menuId={menuId} onToggle={props.onToggleMobileWorkspace} />
|
||||
</div>
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
|
||||
const DesktopNotificationsNav = (): JSX.Element => {
|
||||
const controller = createDesktopMenuController();
|
||||
const menuId = createUniqueId();
|
||||
|
||||
return (
|
||||
<div class={styles.root} ref={controller.setRootRef}>
|
||||
<NotificationsButton isOpen={controller.isOpen()} menuId={menuId} onToggle={controller.toggleMenu} />
|
||||
{controller.isOpen() ? <NotificationsMenu id={menuId} menuRef={controller.setMenuRef} onSelect={controller.closeMenu} /> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,11 +7,39 @@
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: calc(var(--radius-lg) + 0.1rem);
|
||||
border-radius: calc(var(--radius-lg) + (var(--space-1) / 2));
|
||||
background: color-mix(in srgb, var(--color-surface-muted) 96%, transparent);
|
||||
box-shadow: 0 18px 36px color-mix(in srgb, black 16%, transparent);
|
||||
backdrop-filter: blur(18px);
|
||||
z-index: 30;
|
||||
box-shadow: var(--shadow-strong);
|
||||
backdrop-filter: blur(var(--blur-overlay));
|
||||
z-index: var(--z-dropdown);
|
||||
}
|
||||
|
||||
.menu.menuWorkspace {
|
||||
position: static;
|
||||
top: auto;
|
||||
right: auto;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
z-index: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sections {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.summary {
|
||||
@@ -71,7 +99,7 @@
|
||||
.summaryCopy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0.08rem;
|
||||
gap: calc(var(--space-1) / 2);
|
||||
}
|
||||
|
||||
.name,
|
||||
@@ -97,7 +125,7 @@
|
||||
|
||||
.section {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.section + .section {
|
||||
@@ -108,7 +136,7 @@
|
||||
.item {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 2.65rem;
|
||||
min-height: calc(var(--control-size-lg) + (var(--space-1) / 2));
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: center;
|
||||
@@ -148,8 +176,8 @@
|
||||
}
|
||||
|
||||
.itemIcon {
|
||||
width: 1.9rem;
|
||||
height: 1.9rem;
|
||||
width: calc(var(--control-size-lg) - var(--space-2));
|
||||
height: calc(var(--control-size-lg) - var(--space-2));
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -158,8 +186,15 @@
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
@include respond-down(mobile) {
|
||||
.menu {
|
||||
width: min(20rem, calc(100vw - (var(--space-3) * 2)));
|
||||
}
|
||||
.menu.menuWorkspace .sections {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
align-content: start;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu.menuWorkspace .summary,
|
||||
.menu.menuWorkspace .sections {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@@ -5,13 +5,25 @@ import styles from "./ProfileMenu.module.scss";
|
||||
|
||||
type ProfileMenuProps = {
|
||||
id: string;
|
||||
menuRef: (element: HTMLDivElement) => void;
|
||||
menuRef?: (element: HTMLDivElement) => void;
|
||||
onSelect: () => void;
|
||||
variant?: "popover" | "workspace";
|
||||
};
|
||||
|
||||
export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
|
||||
const variant = props.variant ?? "popover";
|
||||
|
||||
return (
|
||||
<div id={props.id} class={styles.menu} role="menu" aria-label="Profile menu" ref={props.menuRef}>
|
||||
<div
|
||||
id={props.id}
|
||||
classList={{
|
||||
[styles.menu]: true,
|
||||
[styles.menuWorkspace]: variant === "workspace",
|
||||
}}
|
||||
role="menu"
|
||||
aria-label="Profile menu"
|
||||
ref={props.menuRef}
|
||||
>
|
||||
<div class={styles.summary}>
|
||||
<div class={styles.avatar} aria-hidden="true">
|
||||
<span class={styles.avatarRing} />
|
||||
@@ -28,34 +40,36 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<For each={profileMenuSections}>
|
||||
{(section): JSX.Element => (
|
||||
<div class={styles.section}>
|
||||
<For each={section.items}>
|
||||
{(item): JSX.Element => {
|
||||
const Icon = item.icon;
|
||||
<div class={styles.sections}>
|
||||
<For each={profileMenuSections}>
|
||||
{(section): JSX.Element => (
|
||||
<div class={styles.section}>
|
||||
<For each={section.items}>
|
||||
{(item): JSX.Element => {
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
classList={{
|
||||
[styles.item]: true,
|
||||
[styles.itemDanger]: item.tone === "danger",
|
||||
}}
|
||||
onClick={props.onSelect}
|
||||
>
|
||||
<span class={styles.itemIcon} aria-hidden="true">
|
||||
<Icon size={16} strokeWidth={2} />
|
||||
</span>
|
||||
<span class={styles.itemLabel}>{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
classList={{
|
||||
[styles.item]: true,
|
||||
[styles.itemDanger]: item.tone === "danger",
|
||||
}}
|
||||
onClick={props.onSelect}
|
||||
>
|
||||
<span class={styles.itemIcon} aria-hidden="true">
|
||||
<Icon size={16} strokeWidth={2} />
|
||||
</span>
|
||||
<span class={styles.itemLabel}>{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -12,6 +12,11 @@ import styles from "./TopBar.module.scss";
|
||||
type TopBarProps = {
|
||||
theme: Theme;
|
||||
onToggleTheme: VoidFunction;
|
||||
isMobileViewport: boolean;
|
||||
isNotificationsOpen: boolean;
|
||||
isProfileOpen: boolean;
|
||||
onToggleNotifications: VoidFunction;
|
||||
onToggleProfile: VoidFunction;
|
||||
};
|
||||
|
||||
export const TopBar = (props: TopBarProps): JSX.Element => {
|
||||
@@ -37,9 +42,17 @@ export const TopBar = (props: TopBarProps): JSX.Element => {
|
||||
</For>
|
||||
</div>
|
||||
|
||||
<NotificationsNav />
|
||||
<NotificationsNav
|
||||
isMobileViewport={props.isMobileViewport}
|
||||
isMobileWorkspaceOpen={props.isNotificationsOpen}
|
||||
onToggleMobileWorkspace={props.onToggleNotifications}
|
||||
/>
|
||||
<ThemeToggle theme={props.theme} onToggle={props.onToggleTheme} />
|
||||
<UserNav />
|
||||
<UserNav
|
||||
isMobileViewport={props.isMobileViewport}
|
||||
isMobileWorkspaceOpen={props.isProfileOpen}
|
||||
onToggleMobileWorkspace={props.onToggleProfile}
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
@@ -1,54 +1,38 @@
|
||||
import { createEffect, createSignal, createUniqueId, onCleanup, type JSX } from "solid-js";
|
||||
import { createUniqueId, Show, type JSX } from "solid-js";
|
||||
import { ProfileMenu } from "./ProfileMenu";
|
||||
import { UserNavButton } from "./UserNavButton";
|
||||
import { createDesktopMenuController } from "./createDesktopMenuController";
|
||||
import styles from "./UserNav.module.scss";
|
||||
|
||||
export const UserNav = (): JSX.Element => {
|
||||
const [isOpen, setIsOpen] = createSignal(false);
|
||||
type UserNavProps = {
|
||||
isMobileViewport: boolean;
|
||||
isMobileWorkspaceOpen: boolean;
|
||||
onToggleMobileWorkspace: VoidFunction;
|
||||
};
|
||||
|
||||
export const UserNav = (props: UserNavProps): JSX.Element => {
|
||||
const menuId = createUniqueId();
|
||||
let rootRef: HTMLDivElement | undefined;
|
||||
let menuRef: HTMLDivElement | undefined;
|
||||
|
||||
const closeMenu = (): void => {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const toggleMenu = (): void => {
|
||||
setIsOpen((open) => !open);
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
if (!isOpen()) return;
|
||||
|
||||
const handlePointerDown = (event: PointerEvent): void => {
|
||||
if (!rootRef) return;
|
||||
|
||||
const target = event.target;
|
||||
if (target instanceof Node && !rootRef.contains(target)) {
|
||||
closeMenu();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent): void => {
|
||||
if (event.key === "Escape") {
|
||||
closeMenu();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("pointerdown", handlePointerDown);
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
menuRef?.querySelector<HTMLButtonElement>("[role='menuitem']")?.focus();
|
||||
|
||||
onCleanup(() => {
|
||||
document.removeEventListener("pointerdown", handlePointerDown);
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<div class={styles.root} ref={rootRef}>
|
||||
<UserNavButton isOpen={isOpen()} menuId={menuId} onToggle={toggleMenu} />
|
||||
{isOpen() ? <ProfileMenu id={menuId} menuRef={(element) => (menuRef = element)} onSelect={closeMenu} /> : null}
|
||||
<Show
|
||||
when={props.isMobileViewport}
|
||||
fallback={<DesktopUserNav />}
|
||||
>
|
||||
<div class={styles.root}>
|
||||
<UserNavButton isOpen={props.isMobileWorkspaceOpen} menuId={menuId} onToggle={props.onToggleMobileWorkspace} />
|
||||
</div>
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
|
||||
const DesktopUserNav = (): JSX.Element => {
|
||||
const controller = createDesktopMenuController();
|
||||
const menuId = createUniqueId();
|
||||
|
||||
return (
|
||||
<div class={styles.root} ref={controller.setRootRef}>
|
||||
<UserNavButton isOpen={controller.isOpen()} menuId={menuId} onToggle={controller.toggleMenu} />
|
||||
{controller.isOpen() ? <ProfileMenu id={menuId} menuRef={controller.setMenuRef} onSelect={controller.closeMenu} /> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import { createEffect, createSignal, onCleanup } from "solid-js";
|
||||
|
||||
type DesktopMenuController = {
|
||||
isOpen: () => boolean;
|
||||
rootRef: HTMLDivElement | undefined;
|
||||
menuRef: HTMLDivElement | undefined;
|
||||
setRootRef: (element: HTMLDivElement) => void;
|
||||
setMenuRef: (element: HTMLDivElement) => void;
|
||||
closeMenu: VoidFunction;
|
||||
toggleMenu: VoidFunction;
|
||||
};
|
||||
|
||||
// Shared desktop popover behavior for top-bar menus.
|
||||
export const createDesktopMenuController = (): DesktopMenuController => {
|
||||
const [isOpen, setIsOpen] = createSignal(false);
|
||||
let rootRef: HTMLDivElement | undefined;
|
||||
let menuRef: HTMLDivElement | undefined;
|
||||
|
||||
const closeMenu = (): void => {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const toggleMenu = (): void => {
|
||||
setIsOpen((open) => !open);
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
if (!isOpen()) return;
|
||||
|
||||
const handlePointerDown = (event: PointerEvent): void => {
|
||||
if (!rootRef) return;
|
||||
|
||||
const target = event.target;
|
||||
if (target instanceof Node && !rootRef.contains(target)) {
|
||||
closeMenu();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent): void => {
|
||||
if (event.key === "Escape") {
|
||||
closeMenu();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("pointerdown", handlePointerDown);
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
menuRef?.querySelector<HTMLButtonElement>("[role='menuitem']")?.focus();
|
||||
|
||||
onCleanup(() => {
|
||||
document.removeEventListener("pointerdown", handlePointerDown);
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
isOpen,
|
||||
get rootRef() {
|
||||
return rootRef;
|
||||
},
|
||||
get menuRef() {
|
||||
return menuRef;
|
||||
},
|
||||
setRootRef: (element: HTMLDivElement): void => {
|
||||
rootRef = element;
|
||||
},
|
||||
setMenuRef: (element: HTMLDivElement): void => {
|
||||
menuRef = element;
|
||||
},
|
||||
closeMenu,
|
||||
toggleMenu,
|
||||
};
|
||||
};
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
.headerActions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: var(--space-2);
|
||||
justify-items: stretch;
|
||||
}
|
||||
@@ -91,7 +91,7 @@
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding-right: var(--space-1);
|
||||
padding-bottom: calc(var(--space-4) + var(--sidebar-dock-clearance, 8rem));
|
||||
padding-bottom: calc(var(--space-4) + var(--sidebar-dock-clearance, var(--shell-dock-clearance)));
|
||||
margin-right: calc(var(--space-1) * -1);
|
||||
}
|
||||
|
||||
@@ -107,6 +107,22 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.treeSectionLabel {
|
||||
@include text-caption;
|
||||
margin: var(--space-3) 0 var(--space-2);
|
||||
padding: 0 var(--space-3);
|
||||
color: var(--color-text-subtle);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.treeList {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navItem {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
@@ -121,6 +137,45 @@
|
||||
@include interactive-frame-hover(var(--color-surface-hover), transparent, var(--color-text));
|
||||
}
|
||||
|
||||
.treeItem {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-height: calc(var(--control-size-lg) - var(--space-2));
|
||||
padding: var(--space-2) var(--space-3);
|
||||
padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
text-align: left;
|
||||
transition:
|
||||
background 160ms var(--easing-standard),
|
||||
color 160ms var(--easing-standard),
|
||||
border-color 160ms var(--easing-standard),
|
||||
transform 180ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.treeItem:hover,
|
||||
.treeItem:focus-visible {
|
||||
background: var(--color-surface-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.treeItemFolder {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.treeItemActive {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
|
||||
}
|
||||
|
||||
.navItemActive {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-surface);
|
||||
@@ -149,7 +204,7 @@
|
||||
}
|
||||
|
||||
.sidebarCollapsed .headerActions {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.sidebarCollapsed .headerControls {
|
||||
@@ -175,7 +230,9 @@
|
||||
}
|
||||
|
||||
.sidebarCollapsed .label,
|
||||
.sidebarCollapsed .itemMeta {
|
||||
.sidebarCollapsed .itemMeta,
|
||||
.sidebarCollapsed .treeSectionLabel,
|
||||
.sidebarCollapsed .treeList {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { For, Show, createSignal, type JSX } from "solid-js";
|
||||
import { ChevronLeft, ChevronRight } from "../../../lib/icons";
|
||||
import { ProjectSelector } from "../ProjectSelector/ProjectSelector";
|
||||
import { serverSidebarItems, workspaceSidebarHeaderActions } from "../data/shell.data";
|
||||
import { workspaceSidebarHeaderActions, workspaceStaticItems, workspaceTree, type SidebarItem, type WorkspaceTreeNode } from "../data/shell.data";
|
||||
import styles from "./WorkspaceSidebar.module.scss";
|
||||
|
||||
type WorkspaceSidebarProps = {
|
||||
@@ -12,6 +12,72 @@ type WorkspaceSidebarProps = {
|
||||
onToggleRailCollapse: () => void;
|
||||
};
|
||||
|
||||
const WorkspaceHomeEntry = (props: { item: SidebarItem }): JSX.Element => {
|
||||
const Icon = props.item.icon;
|
||||
|
||||
return (
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
classList={{
|
||||
[styles.navItem]: true,
|
||||
[styles.navItemActive]: !!props.item.active,
|
||||
}}
|
||||
aria-current={props.item.active ? "page" : undefined}
|
||||
aria-label={props.item.label}
|
||||
title={props.item.label}
|
||||
>
|
||||
<Icon class={styles.icon} size={18} strokeWidth={2} />
|
||||
<span class={styles.label}>{props.item.label}</span>
|
||||
<Show when={props.item.meta}>
|
||||
<span class={styles.itemMeta}>{props.item.meta}</span>
|
||||
</Show>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const WorkspaceTreeBranch = (props: { nodes: readonly WorkspaceTreeNode[]; depth?: number }): JSX.Element => {
|
||||
const depth = () => props.depth ?? 0;
|
||||
|
||||
return (
|
||||
<ul class={styles.treeList} role="list">
|
||||
<For each={props.nodes}>
|
||||
{(node): JSX.Element => {
|
||||
const Icon = node.icon;
|
||||
|
||||
return (
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
classList={{
|
||||
[styles.treeItem]: true,
|
||||
[styles.treeItemActive]: !!node.active,
|
||||
[styles.treeItemFolder]: node.kind === "folder",
|
||||
}}
|
||||
style={{ "--tree-depth": String(depth()) }}
|
||||
aria-current={node.active ? "page" : undefined}
|
||||
aria-label={node.label}
|
||||
title={node.label}
|
||||
>
|
||||
<Icon class={styles.icon} size={18} strokeWidth={2} />
|
||||
<span class={styles.label}>{node.label}</span>
|
||||
<Show when={node.meta}>
|
||||
<span class={styles.itemMeta}>{node.meta}</span>
|
||||
</Show>
|
||||
</button>
|
||||
|
||||
<Show when={node.children?.length}>
|
||||
<WorkspaceTreeBranch nodes={node.children ?? []} depth={depth() + 1} />
|
||||
</Show>
|
||||
</li>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
|
||||
const [isProjectDrawerOpen, setIsProjectDrawerOpen] = createSignal(false);
|
||||
const railToggleLabel = (): string => (props.railCollapsed ? "Expand server rail" : "Collapse server rail");
|
||||
@@ -78,36 +144,18 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
|
||||
}}
|
||||
>
|
||||
<Show when={!props.collapsed}>
|
||||
<span class={styles.sectionLabel}>Navigation</span>
|
||||
<span class={styles.sectionLabel}>Workspace</span>
|
||||
</Show>
|
||||
<div class={styles.navScroller}>
|
||||
<ul class={styles.navList} role="list">
|
||||
<For each={serverSidebarItems}>
|
||||
{(item): JSX.Element => {
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
classList={{
|
||||
[styles.navItem]: true,
|
||||
[styles.navItemActive]: !!item.active,
|
||||
}}
|
||||
aria-label={item.label}
|
||||
title={item.label}
|
||||
>
|
||||
<Icon class={styles.icon} size={18} strokeWidth={2} />
|
||||
<span class={styles.label}>{item.label}</span>
|
||||
<Show when={item.meta}>
|
||||
<span class={styles.itemMeta}>{item.meta}</span>
|
||||
</Show>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
<For each={workspaceStaticItems}>{(item): JSX.Element => <WorkspaceHomeEntry item={item} />}</For>
|
||||
</ul>
|
||||
|
||||
<Show when={!props.collapsed}>
|
||||
<div class={styles.treeSectionLabel}>Items</div>
|
||||
</Show>
|
||||
|
||||
<WorkspaceTreeBranch nodes={workspaceTree} />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -4,12 +4,12 @@ import type { Component } from "solid-js";
|
||||
import {
|
||||
Bell,
|
||||
CircleHelp,
|
||||
FileText,
|
||||
Folder,
|
||||
Home,
|
||||
Keyboard,
|
||||
LayoutGrid,
|
||||
LogOut,
|
||||
Plus,
|
||||
Repeat,
|
||||
Search,
|
||||
Settings,
|
||||
@@ -82,6 +82,16 @@ export type SidebarItem = {
|
||||
meta?: string;
|
||||
};
|
||||
|
||||
export type WorkspaceTreeNode = {
|
||||
id: string;
|
||||
label: string;
|
||||
kind: "folder" | "board" | "doc";
|
||||
icon: ShellIcon;
|
||||
active?: boolean;
|
||||
meta?: string;
|
||||
children?: readonly WorkspaceTreeNode[];
|
||||
};
|
||||
|
||||
export type SidebarHeaderAction = {
|
||||
id: string;
|
||||
label: string;
|
||||
@@ -94,6 +104,13 @@ export type TopBarAction = {
|
||||
icon: ShellIcon;
|
||||
};
|
||||
|
||||
export type MobileBottomNavItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: ShellIcon;
|
||||
active?: boolean;
|
||||
};
|
||||
|
||||
export type NotificationItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
@@ -172,17 +189,55 @@ export const departmentItems: readonly DepartmentItem[] = [
|
||||
] as const;
|
||||
|
||||
// Sidebar and topbar scaffold data
|
||||
export const serverSidebarItems: readonly SidebarItem[] = [
|
||||
// These static entries stay pinned in both desktop and mobile workspace navigation.
|
||||
export const workspaceStaticItems: readonly SidebarItem[] = [
|
||||
{ id: "home", label: "Home", icon: Home, active: true },
|
||||
{ id: "boards", label: "Boards", icon: LayoutGrid, meta: "0" },
|
||||
{ id: "docs", label: "Docs", icon: Folder, meta: "0" },
|
||||
{ id: "settings", label: "Settings", icon: Settings },
|
||||
{ id: "workspace-settings", label: "Settings", icon: Settings },
|
||||
] as const;
|
||||
|
||||
// Freeform workspace tree scaffold: folders, boards, and docs are first-class siblings.
|
||||
export const workspaceTree: readonly WorkspaceTreeNode[] = [
|
||||
{
|
||||
id: "product-workspace",
|
||||
label: "Product",
|
||||
kind: "folder",
|
||||
icon: Folder,
|
||||
children: [
|
||||
{ id: "roadmap-board", label: "Roadmap", kind: "board", icon: LayoutGrid, active: true },
|
||||
{ id: "launch-brief", label: "Launch Brief", kind: "doc", icon: FileText },
|
||||
{
|
||||
id: "research-folder",
|
||||
label: "Research",
|
||||
kind: "folder",
|
||||
icon: Folder,
|
||||
children: [
|
||||
{ id: "interviews-doc", label: "Interviews", kind: "doc", icon: FileText },
|
||||
{ id: "signals-board", label: "Signals", kind: "board", icon: LayoutGrid, meta: "2" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "design-folder",
|
||||
label: "Design",
|
||||
kind: "folder",
|
||||
icon: Folder,
|
||||
children: [
|
||||
{ id: "system-doc", label: "Design System", kind: "doc", icon: FileText },
|
||||
{ id: "review-board", label: "Review Queue", kind: "board", icon: LayoutGrid },
|
||||
],
|
||||
},
|
||||
{ id: "general-notes", label: "General Notes", kind: "doc", icon: FileText },
|
||||
] as const;
|
||||
|
||||
export const workspaceSidebarHeaderActions: readonly SidebarHeaderAction[] = [
|
||||
{ id: "workspace-settings", label: "Workspace settings", icon: Settings },
|
||||
{ id: "search-workspace", label: "Search workspace", icon: Search },
|
||||
{ id: "create-board", label: "Create board", icon: Plus },
|
||||
] 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[] = [
|
||||
|
||||
@@ -139,23 +139,20 @@
|
||||
@include respond-down(mobile) {
|
||||
.viewport {
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.workspaceTopBar {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.workspaceTopBarEnd {
|
||||
.workspaceTopBarStart,
|
||||
.workspaceTopBarEnd,
|
||||
.workspaceCollapseButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspaceTopBarCenter {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.workspaceCollapseButton {
|
||||
width: calc(var(--control-size-md) - 0.5rem);
|
||||
height: calc(var(--control-size-md) - 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ export { default as CircleHelp } from "lucide-solid/icons/circle-help";
|
||||
export { default as ChevronDown } from "lucide-solid/icons/chevron-down";
|
||||
export { default as ChevronLeft } from "lucide-solid/icons/chevron-left";
|
||||
export { default as ChevronRight } from "lucide-solid/icons/chevron-right";
|
||||
export { default as FileText } from "lucide-solid/icons/file-text";
|
||||
export { default as Folder } from "lucide-solid/icons/folder";
|
||||
export { default as Home } from "lucide-solid/icons/house";
|
||||
export { default as Keyboard } from "lucide-solid/icons/keyboard";
|
||||
@@ -18,3 +19,4 @@ export { default as Settings } from "lucide-solid/icons/settings";
|
||||
export { default as Shield } from "lucide-solid/icons/shield";
|
||||
export { default as Sun } from "lucide-solid/icons/sun";
|
||||
export { default as User } from "lucide-solid/icons/user";
|
||||
export { default as X } from "lucide-solid/icons/x";
|
||||
|
||||
Reference in New Issue
Block a user