Feat: Build out server shell
This commit is contained in:
MangoPig
@@ -15,6 +15,7 @@
|
||||
--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);
|
||||
@@ -26,7 +27,9 @@
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 6;
|
||||
isolation: isolate;
|
||||
overflow: visible;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
@@ -92,9 +95,10 @@
|
||||
|
||||
.sidebarDock {
|
||||
position: absolute;
|
||||
right: var(--space-1);
|
||||
bottom: var(--space-3);
|
||||
left: calc(var(--space-1) - (var(--rail-width) * 0.9));
|
||||
left: calc(var(--space-1) + (var(--rail-width) * 0.1));
|
||||
width: calc(var(--sidebar-width) + (var(--rail-width) * 0.9) - var(--space-2));
|
||||
right: auto;
|
||||
z-index: calc(var(--z-modal) + 1);
|
||||
pointer-events: none;
|
||||
|
||||
|
||||
@@ -26,24 +26,28 @@ export const AppShell = (): JSX.Element => {
|
||||
return (
|
||||
<div class={styles.shell}>
|
||||
<TopBar theme={themeState()} onToggleTheme={toggleTheme} />
|
||||
|
||||
<div class={styles.body}>
|
||||
{/* Left server rail */}
|
||||
<div class={styles.railColumn}>
|
||||
<LeftRail />
|
||||
</div>
|
||||
|
||||
{/* Sidebar + main workspace frame */}
|
||||
<div class={styles.workspaceRegion}>
|
||||
<div class={styles.sidebarColumn}>
|
||||
<WorkspaceSidebar />
|
||||
|
||||
<div class={styles.sidebarDock}>
|
||||
<ServerDock />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class={styles.workspaceMain}>
|
||||
<WorkspaceHome />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating server dock overlay */}
|
||||
<div class={styles.sidebarDock}>
|
||||
<ServerDock />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,185 @@
|
||||
.root {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.selector {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--space-2);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
transition:
|
||||
background-color 180ms var(--easing-standard),
|
||||
color 180ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.selectorOpen {
|
||||
.meta,
|
||||
.icon {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
.selector:hover {
|
||||
.value {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.meta,
|
||||
.icon {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
.selector:focus-visible {
|
||||
outline: none;
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-soft) 14%, transparent);
|
||||
}
|
||||
|
||||
.value {
|
||||
@include text-title;
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-weight-title);
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: 0 0 auto;
|
||||
color: var(--color-text-muted);
|
||||
transition: transform 180ms var(--easing-standard), color 180ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.iconOpen {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: calc(100% + var(--space-2));
|
||||
left: 0;
|
||||
min-width: min(18rem, calc(100vw - (var(--space-4) * 2)));
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface-muted);
|
||||
box-shadow: 0 16px 32px color-mix(in srgb, black 18%, transparent);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.menuSection {
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.menuSectionLabel {
|
||||
@include text-caption;
|
||||
display: block;
|
||||
color: var(--color-text-muted);
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
padding-inline: var(--space-1);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.menuDivider {
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
min-width: 0;
|
||||
min-height: 2.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: var(--space-2) var(--space-2);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface-muted);
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
transition:
|
||||
background-color 160ms var(--easing-standard),
|
||||
border-color 160ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.menuItem:hover {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.menuItemActive {
|
||||
border-color: var(--color-accent-soft);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.menuItemCopy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.menuItemValue {
|
||||
@include text-label;
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.menuItemMeta {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.submenuItem {
|
||||
min-width: 0;
|
||||
min-height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface-muted);
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
transition:
|
||||
background-color 160ms var(--easing-standard),
|
||||
border-color 160ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.submenuItem:hover {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.submenuItemActive {
|
||||
border-color: var(--color-accent-soft);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.submenuIndicator {
|
||||
width: 0.35rem;
|
||||
height: 0.35rem;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
background: var(--color-accent-soft);
|
||||
}
|
||||
|
||||
@include respond-down(mobile) {
|
||||
.menu {
|
||||
min-width: min(16rem, calc(100vw - (var(--space-4) * 2)));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
import { For, createSignal, onCleanup, onMount, type JSX } from "solid-js";
|
||||
import { ChevronDown } from "../../../lib/icons";
|
||||
import { activeDepartment, departmentItems, type DepartmentItem } from "../data/shell.data";
|
||||
import styles from "./DepartmentSelector.module.scss";
|
||||
|
||||
const defaultDepartment = departmentItems.find((item) => item.id === activeDepartment.id) ?? departmentItems[0];
|
||||
const defaultTeamName = departmentItems
|
||||
.find((item) => item.id === activeDepartment.id)
|
||||
?.teams.find((teamName) => teamName === activeDepartment.teamName)
|
||||
?? defaultDepartment?.teams[0]
|
||||
?? "";
|
||||
|
||||
export const DepartmentSelector = (): JSX.Element => {
|
||||
const [isOpen, setIsOpen] = createSignal(false);
|
||||
const [selectedDepartment, setSelectedDepartment] = createSignal<DepartmentItem>(defaultDepartment);
|
||||
const [selectedTeamName, setSelectedTeamName] = createSignal(defaultTeamName);
|
||||
|
||||
let rootRef: HTMLDivElement | undefined;
|
||||
|
||||
onMount(() => {
|
||||
const handlePointerDown = (event: PointerEvent): void => {
|
||||
if (!isOpen()) return;
|
||||
if (!rootRef) return;
|
||||
|
||||
const target = event.target;
|
||||
if (target instanceof Node && !rootRef.contains(target)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("pointerdown", handlePointerDown);
|
||||
onCleanup(() => document.removeEventListener("pointerdown", handlePointerDown));
|
||||
});
|
||||
|
||||
const selectDepartment = (item: DepartmentItem): void => {
|
||||
setSelectedDepartment(item);
|
||||
setSelectedTeamName(item.teams[0] ?? "");
|
||||
};
|
||||
|
||||
const selectTeam = (teamName: string): void => {
|
||||
setSelectedTeamName(teamName);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={styles.root} ref={rootRef}>
|
||||
<button
|
||||
classList={{ [styles.selector]: true, [styles.selectorOpen]: isOpen() }}
|
||||
type="button"
|
||||
aria-label="Select department"
|
||||
title="Select department"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={isOpen()}
|
||||
onClick={() => setIsOpen((open) => !open)}
|
||||
>
|
||||
<strong class={styles.value}>{selectedDepartment().name}</strong>
|
||||
<span class={styles.meta}>{selectedTeamName()} team</span>
|
||||
|
||||
<ChevronDown classList={{ [styles.icon]: true, [styles.iconOpen]: isOpen() }} size={16} strokeWidth={2} />
|
||||
</button>
|
||||
|
||||
{isOpen() ? (
|
||||
<div class={styles.menu} role="menu" aria-label="Department selector menu">
|
||||
<div class={styles.menuSection}>
|
||||
<span class={styles.menuSectionLabel}>Departments</span>
|
||||
|
||||
<For each={departmentItems}>
|
||||
{(item): JSX.Element => (
|
||||
<button
|
||||
classList={{ [styles.menuItem]: true, [styles.menuItemActive]: item.id === selectedDepartment().id }}
|
||||
type="button"
|
||||
role="menuitemradio"
|
||||
aria-checked={item.id === selectedDepartment().id}
|
||||
onClick={() => selectDepartment(item)}
|
||||
>
|
||||
<div class={styles.menuItemCopy}>
|
||||
<strong class={styles.menuItemValue}>{item.name}</strong>
|
||||
<span class={styles.menuItemMeta}>{item.teams.length} teams</span>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
<div class={styles.menuDivider} aria-hidden="true" />
|
||||
|
||||
<div class={styles.menuSection}>
|
||||
<span class={styles.menuSectionLabel}>Teams in {selectedDepartment().name}</span>
|
||||
|
||||
<For each={selectedDepartment().teams}>
|
||||
{(teamName): JSX.Element => (
|
||||
<button
|
||||
classList={{ [styles.submenuItem]: true, [styles.submenuItemActive]: teamName === selectedTeamName() }}
|
||||
type="button"
|
||||
role="menuitemradio"
|
||||
aria-checked={teamName === selectedTeamName()}
|
||||
onClick={() => selectTeam(teamName)}
|
||||
>
|
||||
<span class={styles.submenuIndicator} aria-hidden="true" />
|
||||
<div class={styles.menuItemCopy}>
|
||||
<strong class={styles.menuItemValue}>{teamName}</strong>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,14 +1,17 @@
|
||||
.rail {
|
||||
--rail-workspace-size: var(--control-size-lg);
|
||||
--rail-action-size: var(--control-size-md);
|
||||
--rail-dock-clearance: 8rem;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-2);
|
||||
overflow: hidden;
|
||||
padding: var(--space-3) var(--space-2) calc(var(--space-3) + var(--rail-dock-clearance));
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.topCluster,
|
||||
@@ -20,6 +23,14 @@
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.bottomCluster {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.topCluster {
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.items {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
@@ -28,22 +39,101 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
overflow: visible;
|
||||
padding-block: var(--space-1);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: var(--rail-workspace-size);
|
||||
height: var(--rail-workspace-size);
|
||||
.itemSlot {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.itemSlot:hover,
|
||||
.itemSlot:focus-within,
|
||||
.itemSlotActive {
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
.activeIndicator {
|
||||
position: absolute;
|
||||
left: calc(50% - (var(--rail-workspace-size) / 2) - var(--space-2));
|
||||
top: 50%;
|
||||
width: 0.26rem;
|
||||
height: 0.55rem;
|
||||
border-radius: var(--radius-pill);
|
||||
background: hsl(0 0% 100% / 0.94);
|
||||
transform: translateY(-50%) scaleY(0.72);
|
||||
transform-origin: center;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
transition:
|
||||
opacity 140ms var(--easing-standard),
|
||||
height 180ms var(--easing-standard),
|
||||
transform 180ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.itemSlot:hover .activeIndicator {
|
||||
opacity: 1;
|
||||
height: 1.1rem;
|
||||
transform: translateY(-50%) scaleY(1);
|
||||
}
|
||||
|
||||
.itemSlotActive .activeIndicator {
|
||||
opacity: 1;
|
||||
height: 2.1rem;
|
||||
transform: translateY(-50%) scaleY(1);
|
||||
}
|
||||
|
||||
.hoverLabel {
|
||||
position: absolute;
|
||||
left: calc(100% + var(--space-3));
|
||||
top: 50%;
|
||||
z-index: 8;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-accent);
|
||||
color: var(--color-accent-contrast);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
min-height: 2rem;
|
||||
padding: 0 var(--space-3);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border-strong) 52%, transparent);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface-muted);
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 12px 28px color-mix(in srgb, black 16%, transparent);
|
||||
@include text-label;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) translateX(calc(var(--space-2) * -1));
|
||||
transition:
|
||||
opacity 140ms var(--easing-standard),
|
||||
transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.hoverLabel::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(var(--space-2) * -1);
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
border-left: 1px solid color-mix(in srgb, var(--color-border-strong) 52%, transparent);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-border-strong) 52%, transparent);
|
||||
background: var(--color-surface-muted);
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.sectionDivider {
|
||||
width: calc(var(--rail-workspace-size) - var(--space-2));
|
||||
height: 1px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: color-mix(in srgb, var(--color-border-strong) 58%, transparent);
|
||||
}
|
||||
|
||||
.itemSlot:hover .hoverLabel {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(0);
|
||||
}
|
||||
|
||||
.workspaceButton {
|
||||
@@ -55,13 +145,33 @@
|
||||
@include interactive-frame(var(--color-surface-muted), var(--color-border), var(--color-text-muted), var(--radius-lg));
|
||||
@include text-label;
|
||||
@include interactive-frame-hover();
|
||||
transition:
|
||||
border-radius 180ms var(--easing-standard),
|
||||
background 180ms var(--easing-standard),
|
||||
color 180ms var(--easing-standard),
|
||||
transform 180ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.personalButton {
|
||||
background: var(--color-accent);
|
||||
border-color: transparent;
|
||||
color: var(--color-accent-contrast);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.itemSlot:hover .workspaceButton,
|
||||
.itemSlot:focus-within .workspaceButton {
|
||||
border-radius: var(--radius-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.workspaceButtonActive {
|
||||
background: var(--color-accent);
|
||||
border-color: transparent;
|
||||
color: var(--color-accent-contrast);
|
||||
box-shadow: var(--shadow-soft);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.addButton {
|
||||
|
||||
@@ -2,38 +2,66 @@
|
||||
|
||||
import { For, type JSX } from "solid-js";
|
||||
import { Plus } from "../../../lib/icons";
|
||||
import { railItems } from "../data/shell.data";
|
||||
import { railItems, type RailItem } from "../data/shell.data";
|
||||
import styles from "./LeftRail.module.scss";
|
||||
|
||||
export const LeftRail = (): JSX.Element => {
|
||||
type RailEntryProps = {
|
||||
item: RailItem;
|
||||
label: string;
|
||||
abbreviation: string;
|
||||
personal?: boolean;
|
||||
};
|
||||
|
||||
const RailEntry = (props: RailEntryProps): JSX.Element => {
|
||||
return (
|
||||
<aside class={styles.rail} aria-label="Workspace rail">
|
||||
<div
|
||||
classList={{
|
||||
[styles.itemSlot]: true,
|
||||
[styles.itemSlotActive]: !!props.item.active,
|
||||
}}
|
||||
>
|
||||
<span class={styles.activeIndicator} aria-hidden="true" />
|
||||
|
||||
<button
|
||||
type="button"
|
||||
classList={{
|
||||
[styles.workspaceButton]: true,
|
||||
[styles.workspaceButtonActive]: !!props.item.active,
|
||||
[styles.personalButton]: !!props.personal,
|
||||
}}
|
||||
aria-label={props.label}
|
||||
title={props.label}
|
||||
>
|
||||
{props.abbreviation}
|
||||
</button>
|
||||
|
||||
<span class={styles.hoverLabel} role="presentation">
|
||||
{props.label}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const LeftRail = (): JSX.Element => {
|
||||
const personalItem = railItems.find((item) => item.kind === "personal");
|
||||
const organizationItems = railItems.filter((item) => item.kind === "organization");
|
||||
|
||||
return (
|
||||
<aside class={styles.rail} aria-label="Server rail">
|
||||
<div class={styles.topCluster}>
|
||||
<div class={styles.logo} aria-hidden="true">
|
||||
M
|
||||
</div>
|
||||
{personalItem ? <RailEntry item={personalItem} label={personalItem.label} abbreviation="M" personal /> : null}
|
||||
|
||||
<div class={styles.sectionDivider} aria-hidden="true" />
|
||||
</div>
|
||||
|
||||
<div class={styles.items}>
|
||||
<For each={railItems}>
|
||||
{(item): JSX.Element => (
|
||||
<button
|
||||
type="button"
|
||||
classList={{
|
||||
[styles.workspaceButton]: true,
|
||||
[styles.workspaceButtonActive]: !!item.active,
|
||||
}}
|
||||
title={item.label}
|
||||
aria-label={item.label}
|
||||
>
|
||||
{item.abbreviation}
|
||||
</button>
|
||||
)}
|
||||
<For each={organizationItems}>
|
||||
{(item): JSX.Element => <RailEntry item={item} label={item.label} abbreviation={item.abbreviation} />}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
<div class={styles.bottomCluster}>
|
||||
<button type="button" class={styles.addButton} aria-label="Create workspace" title="Create workspace">
|
||||
<button type="button" class={styles.addButton} aria-label="Create server" title="Create server">
|
||||
<Plus size={16} strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,200 @@
|
||||
.root {
|
||||
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));
|
||||
}
|
||||
|
||||
.trigger {
|
||||
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) calc(var(--space-2) + 0.2rem);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border-strong) 44%, transparent);
|
||||
border-radius: calc(var(--radius-lg) + var(--space-1));
|
||||
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
|
||||
box-shadow: var(--shadow-soft);
|
||||
text-align: left;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
transition:
|
||||
border-color var(--duration-fast) var(--easing-standard),
|
||||
background var(--duration-fast) var(--easing-standard),
|
||||
box-shadow var(--duration-fast) var(--easing-standard),
|
||||
transform 180ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.trigger:hover {
|
||||
background: var(--color-surface-hover);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.triggerOpen {
|
||||
border-color: color-mix(in srgb, var(--color-border-strong) 22%, transparent);
|
||||
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.triggerLead {
|
||||
width: var(--control-size-md);
|
||||
height: var(--control-size-md);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-md);
|
||||
background: color-mix(in srgb, var(--color-accent-soft) 82%, transparent);
|
||||
color: var(--color-accent-strong);
|
||||
}
|
||||
|
||||
.triggerCopy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
.projectItemDescription {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.value,
|
||||
.projectItemName {
|
||||
@include text-label;
|
||||
}
|
||||
|
||||
.triggerIcon {
|
||||
color: var(--color-text-muted);
|
||||
transform: rotate(-90deg);
|
||||
transition: transform var(--duration-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
.triggerIconOpen {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.scrim {
|
||||
position: absolute;
|
||||
inset: calc(var(--project-drawer-top) + var(--project-drawer-gap)) var(--space-4)
|
||||
var(--project-drawer-bottom) var(--space-4);
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
background: color-mix(in srgb, black 8%, transparent);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: opacity 260ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.scrimOpen {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
position: absolute;
|
||||
inset: calc(var(--project-drawer-top) + var(--project-drawer-gap)) var(--space-4)
|
||||
var(--project-drawer-bottom) var(--space-4);
|
||||
z-index: 3;
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(calc(-1 * (var(--space-5) + 12%)));
|
||||
will-change: transform, opacity;
|
||||
transition:
|
||||
opacity 240ms var(--easing-standard),
|
||||
transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.drawerOpen {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.drawer::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
border: 1px solid color-mix(in srgb, var(--color-border-strong) 52%, transparent);
|
||||
background: var(--color-surface-muted);
|
||||
box-shadow:
|
||||
14px 0 30px color-mix(in srgb, black 7%, transparent),
|
||||
inset -1px 0 0 color-mix(in srgb, white 4%, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.drawerBody {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.drawerBody::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.projectList {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.projectItem {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: calc(var(--control-size-md) + var(--space-2));
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
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);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.projectItem:hover {
|
||||
background: color-mix(in srgb, var(--color-surface-hover) 82%, transparent);
|
||||
color: var(--color-text);
|
||||
border-color: color-mix(in srgb, var(--color-border) 22%, transparent);
|
||||
}
|
||||
|
||||
.projectItemActive {
|
||||
border-color: color-mix(in srgb, var(--color-border) 28%, transparent);
|
||||
background: color-mix(in srgb, var(--color-surface) 82%, transparent);
|
||||
color: var(--color-text);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.projectItemCopy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0.05rem;
|
||||
}
|
||||
|
||||
.projectItemDescription {
|
||||
color: color-mix(in srgb, var(--color-text-muted) 84%, transparent);
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
// Path: Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx
|
||||
|
||||
import { For, createSignal, onCleanup, onMount, type JSX } from "solid-js";
|
||||
import { ChevronDown, Folder } from "../../../lib/icons";
|
||||
import { activeProject, projectItems } from "../data/shell.data";
|
||||
import styles from "./ProjectSelector.module.scss";
|
||||
|
||||
type ProjectSelectorProps = {
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const defaultProject = projectItems.find((item) => item.id === activeProject.id) ?? projectItems[0];
|
||||
|
||||
export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
|
||||
const [selectedProject, setSelectedProject] = createSignal({ id: defaultProject.id, name: defaultProject.name });
|
||||
const [drawerTop, setDrawerTop] = createSignal<number>(0);
|
||||
let triggerRef: HTMLButtonElement | undefined;
|
||||
|
||||
onMount(() => {
|
||||
if (!triggerRef) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updateDrawerTop = (): void => {
|
||||
if (!triggerRef) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDrawerTop(triggerRef.offsetTop + triggerRef.offsetHeight);
|
||||
};
|
||||
|
||||
updateDrawerTop();
|
||||
|
||||
const observer = new ResizeObserver(() => {
|
||||
updateDrawerTop();
|
||||
});
|
||||
|
||||
observer.observe(triggerRef);
|
||||
window.addEventListener("resize", updateDrawerTop);
|
||||
|
||||
onCleanup(() => {
|
||||
observer.disconnect();
|
||||
window.removeEventListener("resize", updateDrawerTop);
|
||||
});
|
||||
});
|
||||
|
||||
const toggleOpen = (): void => {
|
||||
if (!props.isOpen) {
|
||||
props.onToggle();
|
||||
return;
|
||||
}
|
||||
|
||||
props.onClose();
|
||||
};
|
||||
|
||||
const selectProject = (projectId: string): void => {
|
||||
const nextProject = projectItems.find((item): boolean => item.id === projectId);
|
||||
|
||||
if (!nextProject) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedProject({ id: nextProject.id, name: nextProject.name });
|
||||
props.onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
class={styles.root}
|
||||
style={{
|
||||
"--project-drawer-top": `${drawerTop()}px`,
|
||||
}}
|
||||
>
|
||||
{/* Project trigger */}
|
||||
<button
|
||||
type="button"
|
||||
ref={triggerRef}
|
||||
classList={{
|
||||
[styles.trigger]: true,
|
||||
[styles.triggerOpen]: props.isOpen,
|
||||
}}
|
||||
aria-label="Open project drawer"
|
||||
aria-expanded={props.isOpen}
|
||||
title="Open project drawer"
|
||||
onClick={toggleOpen}
|
||||
>
|
||||
<span class={styles.triggerLead} aria-hidden="true">
|
||||
<Folder size={18} strokeWidth={2} />
|
||||
</span>
|
||||
<span class={styles.triggerCopy}>
|
||||
<span class={styles.eyebrow}>Projects</span>
|
||||
<span class={styles.value}>{selectedProject().name}</span>
|
||||
</span>
|
||||
<ChevronDown
|
||||
classList={{
|
||||
[styles.triggerIcon]: true,
|
||||
[styles.triggerIconOpen]: props.isOpen,
|
||||
}}
|
||||
size={16}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Outside-click scrim */}
|
||||
<button
|
||||
type="button"
|
||||
classList={{
|
||||
[styles.scrim]: true,
|
||||
[styles.scrimOpen]: props.isOpen,
|
||||
}}
|
||||
aria-hidden={!props.isOpen}
|
||||
tabIndex={props.isOpen ? 0 : -1}
|
||||
onClick={props.onClose}
|
||||
/>
|
||||
|
||||
{/* Slide-out project list */}
|
||||
<div
|
||||
classList={{
|
||||
[styles.drawer]: true,
|
||||
[styles.drawerOpen]: props.isOpen,
|
||||
}}
|
||||
aria-hidden={!props.isOpen}
|
||||
>
|
||||
<div class={styles.drawerBody}>
|
||||
<ul class={styles.projectList} role="list">
|
||||
<For each={projectItems}>
|
||||
{(item): JSX.Element => {
|
||||
const isSelected = (): boolean => selectedProject().id === item.id;
|
||||
|
||||
return (
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
classList={{
|
||||
[styles.projectItem]: true,
|
||||
[styles.projectItemActive]: isSelected(),
|
||||
}}
|
||||
onClick={(): void => selectProject(item.id)}
|
||||
>
|
||||
<span class={styles.projectItemCopy}>
|
||||
<span class={styles.projectItemName}>{item.name}</span>
|
||||
<span class={styles.projectItemDescription}>{item.description}</span>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
68
Frontend/src/components/shell/TopBar/ThemeToggle.module.scss
Normal file
68
Frontend/src/components/shell/TopBar/ThemeToggle.module.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
.toggleButton {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
aspect-ratio: 1;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
transition:
|
||||
background-color 500ms ease,
|
||||
color 220ms var(--easing-standard),
|
||||
transform 180ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.toggleButton:hover {
|
||||
background: color-mix(in srgb, var(--color-text) 8%, transparent);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.toggleButton:focus-visible {
|
||||
outline: none;
|
||||
background: color-mix(in srgb, var(--color-accent-strong) 12%, transparent);
|
||||
box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.iconContainer {
|
||||
position: relative;
|
||||
width: 1.375rem;
|
||||
height: 1.375rem;
|
||||
}
|
||||
|
||||
.iconLayer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition:
|
||||
transform 1000ms ease,
|
||||
opacity 500ms ease;
|
||||
}
|
||||
|
||||
.moonLayer {
|
||||
transform: rotate(90deg);
|
||||
opacity: 0;
|
||||
|
||||
:global([data-theme="dark"]) & {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.sunLayer {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
|
||||
:global([data-theme="dark"]) & {
|
||||
transform: rotate(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
32
Frontend/src/components/shell/TopBar/ThemeToggle.tsx
Normal file
32
Frontend/src/components/shell/TopBar/ThemeToggle.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
// Path: Frontend/src/components/shell/TopBar/ThemeToggle.tsx
|
||||
|
||||
import type { JSX } from "solid-js";
|
||||
import type { Theme } from "../../../theme/runtime";
|
||||
import { Moon, Sun } from "../../../lib/icons";
|
||||
import styles from "./ThemeToggle.module.scss";
|
||||
|
||||
type ThemeToggleProps = {
|
||||
theme: Theme;
|
||||
onToggle: VoidFunction;
|
||||
};
|
||||
|
||||
export const ThemeToggle = (props: ThemeToggleProps): JSX.Element => {
|
||||
return (
|
||||
<button
|
||||
class={styles.toggleButton}
|
||||
type="button"
|
||||
onClick={props.onToggle}
|
||||
aria-label={`Switch to ${props.theme === "dark" ? "light" : "dark"} theme`}
|
||||
title={`Switch to ${props.theme === "dark" ? "light" : "dark"} theme`}
|
||||
>
|
||||
<span class={styles.iconContainer} aria-hidden="true">
|
||||
<span class={`${styles.iconLayer} ${styles.moonLayer}`}>
|
||||
<Moon size={18} strokeWidth={2} />
|
||||
</span>
|
||||
<span class={`${styles.iconLayer} ${styles.sunLayer}`}>
|
||||
<Sun size={18} strokeWidth={2} />
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@@ -1,8 +1,8 @@
|
||||
.topBar {
|
||||
--topbar-control-size: var(--control-size-md);
|
||||
--topbar-control-size: 2.5rem;
|
||||
min-height: 4rem;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4) var(--space-3);
|
||||
@@ -12,6 +12,7 @@
|
||||
.identity {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
@@ -22,55 +23,50 @@
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include text-title;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
|
||||
strong {
|
||||
font: inherit;
|
||||
font-weight: var(--font-weight-title);
|
||||
}
|
||||
}
|
||||
|
||||
.context {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.controls,
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.controls {
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.actionButton,
|
||||
.themeButton {
|
||||
height: var(--topbar-control-size);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include interactive-frame();
|
||||
.actions {
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--topbar-control-size);
|
||||
height: var(--topbar-control-size);
|
||||
aspect-ratio: 1;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
transition:
|
||||
background-color 220ms var(--easing-standard),
|
||||
color 220ms var(--easing-standard),
|
||||
transform 180ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.themeButton {
|
||||
width: auto;
|
||||
padding-inline: var(--space-2);
|
||||
gap: var(--space-1);
|
||||
.actionButton:hover {
|
||||
background: color-mix(in srgb, var(--color-text) 8%, transparent);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.actionButton,
|
||||
.themeButton {
|
||||
@include interactive-frame-hover();
|
||||
}
|
||||
|
||||
.themeLabel {
|
||||
@include text-label;
|
||||
.actionButton:focus-visible {
|
||||
outline: none;
|
||||
background: color-mix(in srgb, var(--color-accent-strong) 12%, transparent);
|
||||
box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
@include respond-down(mobile) {
|
||||
@@ -82,4 +78,8 @@
|
||||
.actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.controls {
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
// Path: Frontend/src/components/shell/TopBar/TopBar.tsx
|
||||
|
||||
import { For, type JSX } from "solid-js";
|
||||
import { ChevronDown } from "../../../lib/icons";
|
||||
import type { Theme } from "../../../theme/runtime";
|
||||
import { topBarActions } from "../data/shell.data";
|
||||
import { DepartmentSelector } from "../DepartmentSelector/DepartmentSelector";
|
||||
import { ThemeToggle } from "./ThemeToggle";
|
||||
import { UserNavButton } from "./UserNavButton";
|
||||
import styles from "./TopBar.module.scss";
|
||||
|
||||
type TopBarProps = {
|
||||
@@ -16,29 +18,26 @@ export const TopBar = (props: TopBarProps): JSX.Element => {
|
||||
<header class={styles.topBar}>
|
||||
<div class={styles.identity}>
|
||||
<span class={styles.eyebrow}>Moku Work</span>
|
||||
<div class={styles.title}>
|
||||
<strong>Workspace Shell</strong>
|
||||
<span class={styles.context}>Moku / Product</span>
|
||||
<ChevronDown size={16} strokeWidth={2} />
|
||||
</div>
|
||||
<DepartmentSelector />
|
||||
</div>
|
||||
|
||||
<button class={styles.themeButton} type="button" onClick={props.onToggleTheme}>
|
||||
<span class={styles.themeLabel}>{props.theme === "dark" ? "Dark" : "Light"}</span>
|
||||
</button>
|
||||
<div class={styles.controls}>
|
||||
<div class={styles.actions}>
|
||||
<For each={topBarActions}>
|
||||
{(item): JSX.Element => {
|
||||
const Icon = item.icon;
|
||||
|
||||
<div class={styles.actions}>
|
||||
<For each={topBarActions}>
|
||||
{(item): JSX.Element => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<button class={styles.actionButton} type="button" aria-label={item.label} title={item.label}>
|
||||
<Icon size={18} strokeWidth={2} />
|
||||
</button>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<button class={styles.actionButton} type="button" aria-label={item.label} title={item.label}>
|
||||
<Icon size={18} strokeWidth={2} />
|
||||
</button>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
<ThemeToggle theme={props.theme} onToggle={props.onToggleTheme} />
|
||||
<UserNavButton />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
100
Frontend/src/components/shell/TopBar/UserNavButton.module.scss
Normal file
100
Frontend/src/components/shell/TopBar/UserNavButton.module.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
.userButton {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
margin-left: var(--space-1);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform 180ms var(--easing-standard),
|
||||
color 220ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.userButton:hover {
|
||||
transform: scale(1.05);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.userButton:hover .spinContainer {
|
||||
animation-play-state: running;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.userButton:focus-visible {
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
|
||||
}
|
||||
|
||||
.spinContainer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.72;
|
||||
transition: opacity 220ms var(--easing-standard);
|
||||
animation: spin-reverse 1.5s ease-in-out infinite reverse;
|
||||
animation-play-state: paused;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spinRing {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background:
|
||||
conic-gradient(
|
||||
from 0deg,
|
||||
transparent 0deg 28deg,
|
||||
var(--color-primary-1) 28deg 118deg,
|
||||
transparent 118deg 148deg,
|
||||
var(--color-primary-2) 148deg 238deg,
|
||||
transparent 238deg 268deg,
|
||||
var(--color-primary-3) 268deg 358deg,
|
||||
transparent 358deg 360deg
|
||||
);
|
||||
mask: radial-gradient(circle, transparent 63%, black 66%);
|
||||
-webkit-mask: radial-gradient(circle, transparent 63%, black 66%);
|
||||
animation: spin-forward 14s linear infinite;
|
||||
}
|
||||
|
||||
.userCore {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 78%;
|
||||
height: 78%;
|
||||
border-radius: 999px;
|
||||
background: var(--color-surface-muted);
|
||||
}
|
||||
|
||||
@keyframes spin-forward {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin-reverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
19
Frontend/src/components/shell/TopBar/UserNavButton.tsx
Normal file
19
Frontend/src/components/shell/TopBar/UserNavButton.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
// Path: Frontend/src/components/shell/TopBar/UserNavButton.tsx
|
||||
|
||||
import type { JSX } from "solid-js";
|
||||
import { User } from "../../../lib/icons";
|
||||
import styles from "./UserNavButton.module.scss";
|
||||
|
||||
export const UserNavButton = (): JSX.Element => {
|
||||
return (
|
||||
<button class={styles.userButton} type="button" aria-label="Open profile" title="Open profile">
|
||||
<span class={styles.spinContainer} aria-hidden="true">
|
||||
<span class={styles.spinRing} />
|
||||
</span>
|
||||
|
||||
<span class={styles.userCore} aria-hidden="true">
|
||||
<User size={16} strokeWidth={2.2} />
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +1,7 @@
|
||||
.sidebar {
|
||||
--sidebar-nav-item-min-height: var(--control-size-lg);
|
||||
--sidebar-dock-clearance: 8rem;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
@@ -8,28 +9,17 @@
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
overflow: hidden;
|
||||
border-top-left-radius: inherit;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include text-title;
|
||||
}
|
||||
|
||||
.meta {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
max-width: 28ch;
|
||||
.headerDrawerOpen {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.section {
|
||||
@@ -37,6 +27,17 @@
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: var(--space-2);
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition:
|
||||
opacity 180ms var(--easing-standard),
|
||||
transform 220ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.sectionHidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(var(--space-3));
|
||||
}
|
||||
|
||||
.navScroller {
|
||||
@@ -78,7 +79,7 @@
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
box-shadow: var(--shadow-soft);
|
||||
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@@ -1,23 +1,42 @@
|
||||
// Path: Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx
|
||||
|
||||
import { For, Show, type JSX } from "solid-js";
|
||||
import { workspaceSidebarItems } from "../data/shell.data";
|
||||
import { For, Show, createSignal, type JSX } from "solid-js";
|
||||
import { ProjectSelector } from "../ProjectSelector/ProjectSelector";
|
||||
import { serverSidebarItems } from "../data/shell.data";
|
||||
import styles from "./WorkspaceSidebar.module.scss";
|
||||
|
||||
export const WorkspaceSidebar = (): JSX.Element => {
|
||||
const [isProjectDrawerOpen, setIsProjectDrawerOpen] = createSignal(false);
|
||||
|
||||
return (
|
||||
<aside class={styles.sidebar} aria-label="Workspace navigation">
|
||||
<div class={styles.header}>
|
||||
<span class={styles.eyebrow}>Workspace</span>
|
||||
<h2 class={styles.title}>Product Operations</h2>
|
||||
<p class={styles.meta}>A barebone shell for Moku’s first real workspace layout.</p>
|
||||
<aside class={styles.sidebar} aria-label="Server navigation">
|
||||
<div
|
||||
classList={{
|
||||
[styles.header]: true,
|
||||
[styles.headerDrawerOpen]: isProjectDrawerOpen(),
|
||||
}}
|
||||
>
|
||||
<ProjectSelector
|
||||
isOpen={isProjectDrawerOpen()}
|
||||
onToggle={(): void => {
|
||||
setIsProjectDrawerOpen(true);
|
||||
}}
|
||||
onClose={(): void => {
|
||||
setIsProjectDrawerOpen(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class={styles.section}>
|
||||
<div
|
||||
classList={{
|
||||
[styles.section]: true,
|
||||
[styles.sectionHidden]: isProjectDrawerOpen(),
|
||||
}}
|
||||
>
|
||||
<span class={styles.sectionLabel}>Navigation</span>
|
||||
<div class={styles.navScroller}>
|
||||
<ul class={styles.navList} role="list">
|
||||
<For each={workspaceSidebarItems}>
|
||||
<For each={serverSidebarItems}>
|
||||
{(item): JSX.Element => {
|
||||
const Icon = item.icon;
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Path: Frontend/src/components/shell/data/shell.data.ts
|
||||
|
||||
import type { Component } from "solid-js";
|
||||
import { Bell, Folder, Home, LayoutGrid, Plus, Search, Settings, User } from "../../../lib/icons";
|
||||
import { Bell, Folder, Home, LayoutGrid, Search, Settings, User } from "../../../lib/icons";
|
||||
|
||||
type ShellIconProps = {
|
||||
class?: string;
|
||||
@@ -15,6 +15,7 @@ export type RailItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
abbreviation: string;
|
||||
kind: "personal" | "organization";
|
||||
active?: boolean;
|
||||
};
|
||||
|
||||
@@ -34,6 +35,31 @@ export type ActiveServer = {
|
||||
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;
|
||||
active?: boolean;
|
||||
};
|
||||
|
||||
export type SidebarItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
@@ -48,15 +74,21 @@ export type TopBarAction = {
|
||||
icon: ShellIcon;
|
||||
};
|
||||
|
||||
const organizationServerActions: readonly ServerDockAction[] = [
|
||||
const personalDockActions: readonly ServerDockAction[] = [
|
||||
{ id: "account", label: "Account", icon: User },
|
||||
{ id: "settings", label: "Settings", icon: Settings },
|
||||
] as const;
|
||||
|
||||
const organizationAdminDockActions: readonly ServerDockAction[] = [
|
||||
{ id: "members", label: "Members", icon: User },
|
||||
{ id: "server", label: "Server", icon: Settings },
|
||||
] as const;
|
||||
|
||||
// Server shell scaffold data
|
||||
export const railItems: readonly RailItem[] = [
|
||||
{ id: "personal", label: "Personal", abbreviation: "P" },
|
||||
{ id: "moku", label: "Moku", abbreviation: "M", active: true },
|
||||
{ id: "labs", label: "Labs", abbreviation: "L" },
|
||||
{ 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 = {
|
||||
@@ -65,10 +97,35 @@ export const activeServer: ActiveServer = {
|
||||
abbreviation: "O",
|
||||
kind: "organization",
|
||||
connectedLabel: "12 connected",
|
||||
dockActions: organizationServerActions,
|
||||
dockActions: organizationAdminDockActions,
|
||||
};
|
||||
|
||||
export const workspaceSidebarItems: readonly SidebarItem[] = [
|
||||
// Workspace framing scaffold data
|
||||
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", active: true },
|
||||
{ id: "operations", name: "Operations", description: "Cross-team planning and delivery" },
|
||||
{ id: "hiring", name: "Hiring", description: "Candidate pipeline and interview loops" },
|
||||
] 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;
|
||||
|
||||
// Sidebar and topbar scaffold data
|
||||
export const serverSidebarItems: 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" },
|
||||
@@ -77,7 +134,5 @@ export const workspaceSidebarItems: readonly SidebarItem[] = [
|
||||
|
||||
export const topBarActions: readonly TopBarAction[] = [
|
||||
{ id: "search", label: "Search", icon: Search },
|
||||
{ id: "create", label: "Create", icon: Plus },
|
||||
{ id: "inbox", label: "Inbox", icon: Bell },
|
||||
{ id: "profile", label: "Profile", icon: User },
|
||||
] as const;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// Path: Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.tsx
|
||||
|
||||
import { For, type JSX } from "solid-js";
|
||||
import { activeServer } from "../../shell/data/shell.data";
|
||||
import styles from "./WorkspaceHome.module.scss";
|
||||
|
||||
type ShellCheckpointCard = {
|
||||
@@ -11,18 +12,18 @@ type ShellCheckpointCard = {
|
||||
|
||||
const shellCheckpointCards: readonly ShellCheckpointCard[] = [
|
||||
{
|
||||
title: "App shell",
|
||||
copy: "Top bar, left rail, workspace sidebar, and content viewport are now split into modular components.",
|
||||
title: "Server shell",
|
||||
copy: "Top bar, server rail, sidebar, and content viewport are now split into modular components.",
|
||||
meta: "Layout foundation",
|
||||
},
|
||||
{
|
||||
title: "Workspace context",
|
||||
copy: "The shell already has clear places for org context, workspace switching, and future surface navigation.",
|
||||
meta: "Navigation foundation",
|
||||
title: "Presence foundation",
|
||||
copy: "The dock now distinguishes personal and organization servers, leaving clear space for future presence and server-aware controls.",
|
||||
meta: "Server foundation",
|
||||
},
|
||||
{
|
||||
title: "Next build target",
|
||||
copy: "You can now plug in workspace home content, auth state, and early primitives without redesigning the whole frame.",
|
||||
copy: "You can now plug in auth state, server onboarding, and live presence without redesigning the whole frame.",
|
||||
meta: "Ready for v0.1.0 work",
|
||||
},
|
||||
];
|
||||
@@ -31,10 +32,10 @@ export const WorkspaceHome = (): JSX.Element => {
|
||||
return (
|
||||
<main class={styles.viewport}>
|
||||
<section class={styles.hero}>
|
||||
<span class={styles.eyebrow}>Workspace home</span>
|
||||
<h1 class={styles.title}>Moku is ready for its first real shell.</h1>
|
||||
<span class={styles.eyebrow}>Server home</span>
|
||||
<h1 class={styles.title}>{activeServer.name} is ready for its first real shell.</h1>
|
||||
<p class={styles.description}>
|
||||
This is the barebone app frame for v0.1.0 — enough structure to start building real frontend surfaces on top of a real backend core.
|
||||
This is the barebone app frame for v0.1.0 — enough structure to start building a real self-hosted server experience on top of the backend core.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user