diff --git a/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts b/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts index 7d185e00..bab62711 100644 --- a/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts +++ b/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts @@ -159,6 +159,9 @@ Deno.test("workspace Tickets surface provides Kanban and lifecycle controls", as const ticketsNav = await Deno.readTextFile( new URL("../sidebar/TicketsNavSection.svelte", import.meta.url), ); + const objectivesNav = await Deno.readTextFile( + new URL("../sidebar/ObjectivesNavSection.svelte", import.meta.url), + ); const ticketsLoad = await Deno.readTextFile( new URL( "./../../../routes/w/[workspaceId]/tickets/+page.ts", @@ -204,8 +207,15 @@ Deno.test("workspace Tickets surface provides Kanban and lifecycle controls", as assert( ticketsNav.includes("workspaceRoute(workspaceId, '/tickets')") && - ticketsNav.includes("Open Tickets"), - "Tickets sidebar section should link to the workspace Tickets surface", + ticketsNav.includes('class="primary-nav-link"') && + ticketsNav.includes(">Tickets") && + !ticketsNav.includes("Open Tickets") && + !ticketsNav.includes("workspace tickets") && + objectivesNav.includes('class="primary-nav-link"') && + objectivesNav.includes(">Objectives") && + !objectivesNav.includes("Open Objectives") && + !objectivesNav.includes("workspace objectives"), + "Tickets and Objectives should each be a single sidebar link", ); assert( ticketsLoad.includes("?limit=1000") && diff --git a/web/workspace/src/lib/workspace/header/WorkspaceBreadcrumbs.svelte b/web/workspace/src/lib/workspace/header/WorkspaceBreadcrumbs.svelte index ed8bb60c..22946e27 100644 --- a/web/workspace/src/lib/workspace/header/WorkspaceBreadcrumbs.svelte +++ b/web/workspace/src/lib/workspace/header/WorkspaceBreadcrumbs.svelte @@ -33,8 +33,8 @@ min-width: 0; align-items: center; gap: 0.55rem; - color: var(--workspace-muted, #53606e); - font-family: var(--workspace-font-mono, monospace); + color: var(--text-muted); + font-family: var(--font-mono); font-size: 0.84rem; line-height: 1; } @@ -53,7 +53,7 @@ } .workspace-breadcrumbs a:hover { - color: var(--workspace-ink, #151b23); + color: var(--text-strong); text-decoration: underline; text-underline-offset: 0.22rem; } @@ -68,7 +68,7 @@ } .workspace-breadcrumbs span[aria-current='page'] { - color: var(--workspace-ink, #151b23); + color: var(--text-strong); font-weight: 600; } diff --git a/web/workspace/src/lib/workspace/sidebar/ObjectivesNavSection.svelte b/web/workspace/src/lib/workspace/sidebar/ObjectivesNavSection.svelte index bd3b364a..aba37048 100644 --- a/web/workspace/src/lib/workspace/sidebar/ObjectivesNavSection.svelte +++ b/web/workspace/src/lib/workspace/sidebar/ObjectivesNavSection.svelte @@ -11,12 +11,10 @@ diff --git a/web/workspace/src/lib/workspace/sidebar/SidebarFrame.svelte b/web/workspace/src/lib/workspace/sidebar/SidebarFrame.svelte index 9eb3796a..5097eed5 100644 --- a/web/workspace/src/lib/workspace/sidebar/SidebarFrame.svelte +++ b/web/workspace/src/lib/workspace/sidebar/SidebarFrame.svelte @@ -15,6 +15,12 @@ diff --git a/web/workspace/src/lib/workspace/sidebar/TicketsNavSection.svelte b/web/workspace/src/lib/workspace/sidebar/TicketsNavSection.svelte index f93249d3..653511db 100644 --- a/web/workspace/src/lib/workspace/sidebar/TicketsNavSection.svelte +++ b/web/workspace/src/lib/workspace/sidebar/TicketsNavSection.svelte @@ -11,12 +11,10 @@ diff --git a/web/workspace/src/lib/workspace/sidebar/WorkspaceSidebar.svelte b/web/workspace/src/lib/workspace/sidebar/WorkspaceSidebar.svelte index b808a781..6d18e81d 100644 --- a/web/workspace/src/lib/workspace/sidebar/WorkspaceSidebar.svelte +++ b/web/workspace/src/lib/workspace/sidebar/WorkspaceSidebar.svelte @@ -78,9 +78,9 @@ diff --git a/web/workspace/src/lib/workspace/sidebar/sidebar.css b/web/workspace/src/lib/workspace/sidebar/sidebar.css index b28f020a..17a8b49e 100644 --- a/web/workspace/src/lib/workspace/sidebar/sidebar.css +++ b/web/workspace/src/lib/workspace/sidebar/sidebar.css @@ -4,17 +4,26 @@ .sidebar-frame { grid-column: 1; grid-row: 1 / 3; + display: flex; + flex-direction: column; width: clamp(220px, 20vw, 280px); min-width: 0; min-height: 0; - overflow-y: auto; - padding: var(--space-4) var(--space-3); + overflow: hidden; + padding-block: var(--space-4); border-right: 1px solid var(--line); } .sidebar-frame.folded { width: max-content; overflow: hidden; - padding-inline: var(--space-2); + padding-inline: 0; + } + .sidebar-frame-content { + flex: 1 1 auto; + min-width: 0; + min-height: 0; + overflow-y: auto; + padding-inline: var(--space-3); } .sidebar-frame-content, .global-sidebar, @@ -40,11 +49,13 @@ gap: var(--space-1); } .sidebar-control-row { - margin-bottom: var(--space-2); + margin-top: auto; + padding: var(--space-4) var(--space-3) 0; } .sidebar-frame.folded .sidebar-control-row { justify-content: center; - margin-bottom: 0; + padding-inline: var(--space-2); + padding-top: 0; } .sidebar-title-row { display: flex; @@ -116,7 +127,7 @@ } .sidebar-sections { display: grid; - gap: var(--space-5); + gap: var(--space-3); min-width: 0; } .nav-section { @@ -165,6 +176,7 @@ padding: 0; list-style: none; } + .primary-nav-link, .nav-item, .objective-link, .sidebar-link { @@ -179,6 +191,13 @@ text-decoration: none; transition: background-color 140ms ease, color 140ms ease; } + .primary-nav-link { + color: var(--text-strong); + font-size: 0.9rem; + font-weight: 700; + } + a.primary-nav-link:hover, + a.primary-nav-link:focus-visible, a.nav-item:hover, a.nav-item:focus-visible, a.objective-link:hover, @@ -187,11 +206,13 @@ a.sidebar-link:focus-visible { background: var(--interactive-hover); } + a.primary-nav-link.active, a.nav-item.active, a.objective-link.active, a.sidebar-link.active { background: var(--interactive-selected); } + a.primary-nav-link.active, a.nav-item.active .item-title, a.objective-link.active .item-title, a.sidebar-link.active {