Deployment Script, Postgres migration, UX improvements
This commit is contained in:
@@ -0,0 +1,129 @@
|
||||
<script lang="ts">
|
||||
import type { ComponentType } from 'svelte';
|
||||
|
||||
export type AppNavSectionItem = {
|
||||
label: string;
|
||||
href?: string;
|
||||
icon?: ComponentType;
|
||||
active?: boolean;
|
||||
onSelect?: () => void;
|
||||
type?: 'button' | 'link';
|
||||
};
|
||||
|
||||
let {
|
||||
label = '',
|
||||
ariaLabel = 'Navigation section',
|
||||
items
|
||||
}: {
|
||||
label?: string;
|
||||
ariaLabel?: string;
|
||||
items: AppNavSectionItem[];
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if label}
|
||||
<p class="nav-section-label">{label}</p>
|
||||
{/if}
|
||||
|
||||
<nav class="nav-list" aria-label={ariaLabel}>
|
||||
{#each items as item}
|
||||
{@const Icon = item.icon}
|
||||
{#if item.href && item.type !== 'button'}
|
||||
<a class:active={item.active} href={item.href}>
|
||||
{#if Icon}
|
||||
<span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
|
||||
{/if}
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
{:else}
|
||||
<button type="button" class="nav-button" class:active={item.active} onclick={item.onSelect}>
|
||||
{#if Icon}
|
||||
<span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
|
||||
{/if}
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.nav-section-label {
|
||||
margin: 0.85rem 0.55rem 0.3rem;
|
||||
color: var(--nav-section-label-color, var(--muted));
|
||||
font-size: var(--nav-section-label-size, 0.7rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: var(--nav-section-label-spacing, 0.1em);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: grid;
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
.nav-list a,
|
||||
.nav-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
width: 100%;
|
||||
padding: 0.6rem 0.6rem;
|
||||
border: none;
|
||||
border-radius: 0.7rem;
|
||||
background: transparent;
|
||||
color: var(--nav-item-color, #3a4a41);
|
||||
font-size: var(--nav-item-size, 0.93rem);
|
||||
font-weight: var(--nav-item-weight, 500);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background-color 140ms ease, color 140ms ease;
|
||||
}
|
||||
|
||||
.nav-list a:hover,
|
||||
.nav-button:hover {
|
||||
background: var(--nav-item-hover-bg, var(--panel-soft));
|
||||
color: var(--nav-item-hover-color, #304038);
|
||||
}
|
||||
|
||||
.nav-list a.active,
|
||||
.nav-button.active {
|
||||
background: var(--nav-item-active-bg, var(--color-brand));
|
||||
color: var(--nav-item-active-color, #fff);
|
||||
font-weight: var(--nav-item-active-weight, 600);
|
||||
}
|
||||
|
||||
.nav-list a.active::before,
|
||||
.nav-button.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.85rem;
|
||||
top: 0.45rem;
|
||||
bottom: 0.45rem;
|
||||
width: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--nav-item-active-marker, var(--color-brand));
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
color: var(--nav-icon-color, #6d7d74);
|
||||
border-radius: 0.55rem;
|
||||
transition: color 140ms ease;
|
||||
}
|
||||
|
||||
.nav-list a:hover .nav-icon,
|
||||
.nav-button:hover .nav-icon {
|
||||
color: var(--nav-icon-hover-color, #304038);
|
||||
}
|
||||
|
||||
.nav-list a.active .nav-icon,
|
||||
.nav-button.active .nav-icon {
|
||||
color: var(--nav-icon-active-color, #fff);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,200 @@
|
||||
<script lang="ts">
|
||||
import type { ComponentType } from 'svelte';
|
||||
import AppNavSection, { type AppNavSectionItem } from '$lib/components/navigation/AppNavSection.svelte';
|
||||
|
||||
export type AppSecondaryRailItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon?: ComponentType;
|
||||
group?: string;
|
||||
};
|
||||
|
||||
let {
|
||||
sectionLabel,
|
||||
identityTitle,
|
||||
identitySubtitle,
|
||||
identityAvatarText = '',
|
||||
identityIcon,
|
||||
groups,
|
||||
activeId,
|
||||
onSelect
|
||||
}: {
|
||||
sectionLabel: string;
|
||||
identityTitle: string;
|
||||
identitySubtitle: string;
|
||||
identityAvatarText?: string;
|
||||
identityIcon?: ComponentType;
|
||||
groups: { label?: string; items: AppSecondaryRailItem[] }[];
|
||||
activeId: string;
|
||||
onSelect: (id: string) => void;
|
||||
} = $props();
|
||||
|
||||
function toSectionItems(items: AppSecondaryRailItem[]): AppNavSectionItem[] {
|
||||
return items.map((item) => ({
|
||||
label: item.label,
|
||||
icon: item.icon,
|
||||
active: item.id === activeId,
|
||||
onSelect: () => onSelect(item.id),
|
||||
type: 'button'
|
||||
}));
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="secondary-rail" aria-label={`${sectionLabel} navigation`}>
|
||||
<p class="rail-label">{sectionLabel}</p>
|
||||
|
||||
<div class="rail-identity">
|
||||
<div class="rail-avatar" aria-hidden="true">
|
||||
{#if identityIcon}
|
||||
{@const IdentityIcon = identityIcon}
|
||||
<IdentityIcon size={16} strokeWidth={1.75} />
|
||||
{:else}
|
||||
{identityAvatarText}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="rail-identity-text">
|
||||
<p class="identity-name">{identityTitle}</p>
|
||||
<p class="identity-role">{identitySubtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#each groups as group}
|
||||
<div class="rail-group">
|
||||
<AppNavSection label={group.label ?? ''} ariaLabel={group.label ?? `${sectionLabel} section`} items={toSectionItems(group.items)} />
|
||||
</div>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.secondary-rail {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
height: 100%;
|
||||
min-height: calc(100vh - 8.5rem);
|
||||
padding: 0;
|
||||
background: color-mix(in srgb, var(--panel-soft) 72%, white);
|
||||
border-right: 1px solid var(--line);
|
||||
overflow-y: auto;
|
||||
--nav-section-label-color: color-mix(in srgb, var(--muted) 88%, #a3aea7);
|
||||
--nav-section-label-size: 0.66rem;
|
||||
--nav-section-label-spacing: 0.14em;
|
||||
--nav-item-color: #66756d;
|
||||
--nav-item-size: 0.88rem;
|
||||
--nav-item-weight: 450;
|
||||
--nav-item-hover-bg: color-mix(in srgb, var(--panel) 72%, transparent);
|
||||
--nav-item-hover-color: #425148;
|
||||
--nav-item-active-bg: color-mix(in srgb, var(--color-brand) 7%, transparent);
|
||||
--nav-item-active-color: #22352d;
|
||||
--nav-item-active-weight: 560;
|
||||
--nav-item-active-marker: color-mix(in srgb, var(--color-brand) 28%, transparent);
|
||||
--nav-icon-color: #8a9790;
|
||||
--nav-icon-hover-color: #607067;
|
||||
--nav-icon-active-color: var(--color-brand);
|
||||
}
|
||||
|
||||
.rail-label {
|
||||
margin: 0;
|
||||
padding: 1rem 1rem 0.15rem;
|
||||
color: color-mix(in srgb, var(--muted) 88%, #a3aea7);
|
||||
font-size: 0.64rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.rail-identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0 1rem 1.15rem;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
|
||||
}
|
||||
|
||||
.rail-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 2.15rem;
|
||||
height: 2.15rem;
|
||||
border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--panel) 80%, #edf2ee);
|
||||
color: #6b786f;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
|
||||
}
|
||||
|
||||
.rail-identity-text {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.identity-name {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #526059;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.identity-role {
|
||||
margin: 0;
|
||||
font-size: 0.72rem;
|
||||
color: #8a9790;
|
||||
}
|
||||
|
||||
.rail-group {
|
||||
display: grid;
|
||||
gap: 0.08rem;
|
||||
padding: 0.1rem 0.7rem 0;
|
||||
}
|
||||
|
||||
.rail-group + .rail-group {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.rail-group :global(.nav-section-label) {
|
||||
margin-top: 0;
|
||||
margin-left: 0.3rem;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.secondary-rail {
|
||||
position: static;
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.rail-group {
|
||||
gap: 0.3rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.rail-group :global(.nav-section-label) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.rail-group :global(.nav-list) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.rail-group :global(.nav-list a),
|
||||
.rail-group :global(.nav-button) {
|
||||
width: auto;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
rail,
|
||||
children
|
||||
}: {
|
||||
rail: () => unknown;
|
||||
children: () => unknown;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div class="secondary-rail-layout">
|
||||
<aside class="secondary-rail-layout-nav">
|
||||
{@render rail()}
|
||||
</aside>
|
||||
|
||||
<div class="secondary-rail-layout-panel">
|
||||
<div class="secondary-rail-layout-content">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.secondary-rail-layout {
|
||||
margin: calc(var(--content-padding, 0rem) * -1);
|
||||
display: grid;
|
||||
grid-template-columns: 15rem minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
flex: 1;
|
||||
height: calc(100% + (var(--content-padding, 0rem) * 2));
|
||||
min-height: calc(100% + (var(--content-padding, 0rem) * 2));
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.secondary-rail-layout-nav,
|
||||
.secondary-rail-layout-panel {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.secondary-rail-layout-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.secondary-rail-layout-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.secondary-rail-layout-content > :global(*) {
|
||||
flex: 1 0 auto;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.secondary-rail-layout {
|
||||
grid-template-columns: 1fr;
|
||||
flex: none;
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.secondary-rail-layout-nav {
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.secondary-rail-layout-content {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,251 @@
|
||||
<script lang="ts">
|
||||
import { LogOut, Settings } from 'lucide-svelte';
|
||||
|
||||
import AppNavSection from '$lib/components/navigation/AppNavSection.svelte';
|
||||
import { matchesRoute, type FooterLink, type NavItem } from '$lib/navigation/client-navigation';
|
||||
|
||||
let {
|
||||
currentPath,
|
||||
primaryItems,
|
||||
workingDocumentItems,
|
||||
footerItems,
|
||||
appVersion,
|
||||
releaseStage,
|
||||
currentYear,
|
||||
onOpenSettings,
|
||||
onSignOut
|
||||
}: {
|
||||
currentPath: string;
|
||||
primaryItems: NavItem[];
|
||||
workingDocumentItems: NavItem[];
|
||||
footerItems: FooterLink[];
|
||||
appVersion: string;
|
||||
releaseStage: string;
|
||||
currentYear: number;
|
||||
onOpenSettings: () => void;
|
||||
onSignOut: () => void;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="brand-row">
|
||||
<a class="brand" href="/">
|
||||
<img class="sidebar-logo" src="/logo-hsf.png" alt="Hunter Premium Produce" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-body">
|
||||
<AppNavSection
|
||||
label="Modules"
|
||||
ariaLabel="Client navigation"
|
||||
items={primaryItems.map((item) => ({
|
||||
label: item.label,
|
||||
href: item.href,
|
||||
icon: item.icon,
|
||||
active: matchesRoute(item.href, currentPath)
|
||||
}))}
|
||||
/>
|
||||
|
||||
{#if workingDocumentItems.length}
|
||||
<AppNavSection
|
||||
label="Working Docs"
|
||||
ariaLabel="Working document pages"
|
||||
items={workingDocumentItems.map((item) => ({
|
||||
label: item.label,
|
||||
href: item.href,
|
||||
icon: item.icon,
|
||||
active: matchesRoute(item.href, currentPath)
|
||||
}))}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if footerItems.length}
|
||||
<AppNavSection
|
||||
label="More"
|
||||
ariaLabel="Workspace shortcuts"
|
||||
items={footerItems.map((item) => ({
|
||||
label: item.label,
|
||||
href: item.href,
|
||||
icon: item.icon
|
||||
}))}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="sidebar-meta">
|
||||
<AppNavSection
|
||||
ariaLabel="Account actions"
|
||||
items={[
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: Settings,
|
||||
active: currentPath.startsWith('/settings'),
|
||||
onSelect: onOpenSettings,
|
||||
type: 'button'
|
||||
},
|
||||
{
|
||||
label: 'Sign out',
|
||||
icon: LogOut,
|
||||
onSelect: onSignOut,
|
||||
type: 'button'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<div class="sidebar-meta-foot">
|
||||
<div class="sidebar-meta-top">
|
||||
<span class="version-pill">
|
||||
<span class="meta-label">Build</span>
|
||||
<span>{appVersion}</span>
|
||||
</span>
|
||||
<span class="release-pill">{releaseStage}</span>
|
||||
</div>
|
||||
<div class="sidebar-meta-bottom">
|
||||
<small>© {currentYear} Hunter Premium Produce</small>
|
||||
<div class="powered-by">
|
||||
<span>Powered by</span>
|
||||
<img src="/lean101-isotipo.png" alt="Lean 101" class="lean101-logo" />
|
||||
<strong>Lean 101</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.55rem;
|
||||
padding: 1.1rem 0.85rem 0.85rem;
|
||||
background: var(--panel);
|
||||
border-right: 1px solid var(--line);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.sidebar-body {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.brand-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.68rem;
|
||||
padding: 0.2rem 0.35rem 0.95rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
width: min(100%, 15.5rem);
|
||||
max-width: none;
|
||||
height: auto;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.sidebar-meta {
|
||||
margin-top: auto;
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
padding-top: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-meta-foot {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
padding: 0.8rem 0.55rem 0;
|
||||
border-top: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.sidebar-meta-top,
|
||||
.sidebar-meta-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.sidebar-meta-foot small {
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.powered-by {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.powered-by span {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.powered-by strong {
|
||||
font-size: 0.76rem;
|
||||
font-weight: 600;
|
||||
color: #5e6c64;
|
||||
}
|
||||
|
||||
.lean101-logo {
|
||||
width: 1.45rem;
|
||||
height: 1.45rem;
|
||||
object-fit: contain;
|
||||
opacity: 0.8;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.version-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.24rem 0.56rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: var(--panel-soft);
|
||||
color: #5e6c64;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.release-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.2rem 0.52rem;
|
||||
border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--color-brand) 8%, white);
|
||||
color: var(--color-brand);
|
||||
font-size: 0.64rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,395 @@
|
||||
<script lang="ts">
|
||||
import { Settings } from 'lucide-svelte';
|
||||
|
||||
import WorkspaceSearchTrigger from '$lib/components/navigation/WorkspaceSearchTrigger.svelte';
|
||||
import type { AppSession } from '$lib/session';
|
||||
import type { Crumb } from '$lib/navigation/client-navigation';
|
||||
|
||||
let {
|
||||
breadcrumbs,
|
||||
title,
|
||||
sessionHydrated,
|
||||
session,
|
||||
userInitials,
|
||||
userMenuOpen,
|
||||
onOpenPalette,
|
||||
onToggleUserMenu,
|
||||
onOpenSettings,
|
||||
onSignOut
|
||||
}: {
|
||||
breadcrumbs: Crumb[];
|
||||
title: string;
|
||||
sessionHydrated: boolean;
|
||||
session: AppSession | null;
|
||||
userInitials: string;
|
||||
userMenuOpen: boolean;
|
||||
onOpenPalette: () => void;
|
||||
onToggleUserMenu: () => void;
|
||||
onOpenSettings: () => void;
|
||||
onSignOut: () => void;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<header class="topbar">
|
||||
<div class="topbar-start">
|
||||
<div class="topbar-copy">
|
||||
<nav class="breadcrumbs" aria-label="Breadcrumb">
|
||||
{#each breadcrumbs as crumb, index}
|
||||
{#if index > 0}<span class="breadcrumb-sep" aria-hidden="true">/</span>{/if}
|
||||
{#if crumb.href && index < breadcrumbs.length - 1}
|
||||
<a href={crumb.href}>{crumb.label}</a>
|
||||
{:else}
|
||||
<span aria-current={index === breadcrumbs.length - 1 ? 'page' : undefined}>{crumb.label}</span>
|
||||
{/if}
|
||||
{/each}
|
||||
</nav>
|
||||
<h1>{title}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topbar-middle">
|
||||
<WorkspaceSearchTrigger className="topbar-search" onClick={onOpenPalette} />
|
||||
</div>
|
||||
|
||||
<div class="topbar-actions">
|
||||
<div class="menu-wrap user-menu-wrap">
|
||||
<button aria-expanded={userMenuOpen} class="user-trigger" type="button" onclick={onToggleUserMenu}>
|
||||
<span class="user-avatar-wrap">
|
||||
<span class="user-avatar">{session ? userInitials : '?'}</span>
|
||||
<span class={`user-status-dot ${session ? 'live' : 'idle'}`}></span>
|
||||
</span>
|
||||
<span class="user-trigger-copy">
|
||||
<span class="workspace-label">{sessionHydrated ? (session ? 'Signed in' : 'Signed out') : 'Checking session'}</span>
|
||||
<strong>{sessionHydrated ? (session ? session.name || 'Client account' : 'Sign in required') : 'Restoring workspace access'}</strong>
|
||||
</span>
|
||||
<span class:open={userMenuOpen} class="chevron"></span>
|
||||
</button>
|
||||
|
||||
{#if userMenuOpen}
|
||||
<div class="menu-panel user-menu-panel">
|
||||
<div class="user-menu-summary">
|
||||
<span class="user-menu-avatar">{session ? userInitials : '?'}</span>
|
||||
<div class="user-menu-summary-text">
|
||||
<strong>
|
||||
{sessionHydrated
|
||||
? session
|
||||
? session.name || 'Client account'
|
||||
: 'Client session inactive'
|
||||
: 'Checking saved client session'}
|
||||
</strong>
|
||||
<span>
|
||||
{sessionHydrated
|
||||
? session
|
||||
? session.email
|
||||
: 'Return to the dashboard page to sign in.'
|
||||
: 'Waiting for the browser session check to complete.'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="menu-settings-btn" onclick={onOpenSettings}>
|
||||
<Settings size={15} strokeWidth={1.75} />
|
||||
Settings
|
||||
</button>
|
||||
{#if session}
|
||||
<button type="button" onclick={onSignOut}>Log out</button>
|
||||
{:else if !sessionHydrated}
|
||||
<button type="button" disabled>Checking session...</button>
|
||||
{:else}
|
||||
<a href="/">Go to sign-in</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.topbar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(20rem, 36rem) 1fr;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.72rem 1.2rem;
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.topbar-start {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.82rem;
|
||||
}
|
||||
|
||||
.topbar-copy h1 {
|
||||
margin: 0.12rem 0 0;
|
||||
font-size: 1.34rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.32rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.74rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.breadcrumbs a {
|
||||
color: var(--muted);
|
||||
transition: color 140ms ease;
|
||||
}
|
||||
|
||||
.breadcrumbs a:hover {
|
||||
color: var(--green-deep);
|
||||
}
|
||||
|
||||
.breadcrumbs span[aria-current='page'] {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.breadcrumb-sep {
|
||||
color: #b9c5be;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.topbar-middle {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:global(.topbar-search) {
|
||||
width: 100%;
|
||||
min-height: 2.75rem;
|
||||
background: color-mix(in srgb, var(--panel-soft) 68%, white);
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.68rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.workspace-label {
|
||||
color: var(--muted);
|
||||
font-size: 0.76rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.menu-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-trigger {
|
||||
min-width: 14rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.72rem;
|
||||
padding: 0.56rem 0.76rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.96rem;
|
||||
background: var(--panel-soft);
|
||||
color: #304038;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-avatar-wrap {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
background: var(--green-deep);
|
||||
color: #fff;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.user-status-dot {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
border-radius: 999px;
|
||||
border: 1.5px solid var(--panel-soft);
|
||||
background: #b4c0ba;
|
||||
}
|
||||
|
||||
.user-status-dot.live {
|
||||
background: #4ade80;
|
||||
}
|
||||
|
||||
.user-status-dot.idle {
|
||||
background: #c08b3d;
|
||||
}
|
||||
|
||||
.user-menu-avatar {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--green-deep);
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.user-menu-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.72rem 0.78rem;
|
||||
border-radius: 0.82rem;
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.user-menu-summary-text {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-menu-summary-text strong {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-menu-summary-text span {
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-trigger-copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-trigger-copy strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.user-menu-wrap {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-menu-panel {
|
||||
min-width: 16rem;
|
||||
}
|
||||
|
||||
.menu-settings-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
width: 0.54rem;
|
||||
height: 0.54rem;
|
||||
border-right: 2px solid #7a8c82;
|
||||
border-bottom: 2px solid #7a8c82;
|
||||
transform: rotate(45deg);
|
||||
transition: transform 140ms ease;
|
||||
}
|
||||
|
||||
.chevron.open {
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
.menu-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.45rem);
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
min-width: 13rem;
|
||||
display: grid;
|
||||
gap: 0.18rem;
|
||||
padding: 0.4rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.96rem;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.menu-panel a,
|
||||
.menu-panel button {
|
||||
padding: 0.72rem 0.78rem;
|
||||
border-radius: 0.78rem;
|
||||
color: #304038;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-panel a:hover,
|
||||
.menu-panel button:hover {
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.topbar {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-areas:
|
||||
'start actions'
|
||||
'middle middle';
|
||||
}
|
||||
|
||||
.topbar-start {
|
||||
grid-area: start;
|
||||
}
|
||||
|
||||
.topbar-middle {
|
||||
grid-area: middle;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
grid-area: actions;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.topbar {
|
||||
padding: 0.72rem 1rem;
|
||||
}
|
||||
|
||||
.user-trigger {
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
label = 'Search the workspace',
|
||||
placeholder = 'Search products, mixes, sessions, and pages...',
|
||||
className = '',
|
||||
onClick
|
||||
}: {
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
onClick: () => void;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<button class={`search-box ${className}`.trim()} type="button" aria-label={label} onclick={onClick}>
|
||||
<span class="search-icon"></span>
|
||||
<span class="search-placeholder">{placeholder}</span>
|
||||
<kbd>/</kbd>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.search-box {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 0.64rem;
|
||||
width: 100%;
|
||||
padding: 0.72rem 0.82rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.82rem;
|
||||
background: var(--panel-soft);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
|
||||
}
|
||||
|
||||
.search-box:hover {
|
||||
border-color: color-mix(in srgb, var(--color-brand) 22%, var(--line));
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.search-box:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--color-brand);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 16%, transparent);
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
color: #93a098;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 0.82rem;
|
||||
height: 0.82rem;
|
||||
border: 2px solid #98a59d;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.search-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -0.28rem;
|
||||
bottom: -0.18rem;
|
||||
width: 0.42rem;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: #98a59d;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1rem 0.42rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 0.42rem;
|
||||
color: var(--muted);
|
||||
background: #fff;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user