feat(navigation): add NavSection Holocene component by KATIETOLER · Pull Request #3263 · temporalio/ui

KATIETOLER · 2026-04-01T15:21:00Z

Adds a NavGroup component to the Holocene design system so the cloud nav can compose independent groups of
nav items — enabling other elements to be placed between groups without modifying the OSS nav.

Add NavSection Holocene component to replace ad-hoc nav group rendering in SideNavigation
Split getLinkList into linkList (primary) and linkListForSecondGroup (secondary) in the OSS app layout
Tighten NavLinkItem types and clean up global.ts
Add secondaryLinkList prop to BottomNavigation/BottomNavLinks so secondary links render in the mobile
menu
Add navContent?: Snippet prop to side-nav.svelte — when isCloud && navContent, renders the snippet
instead of the inline {#each} loop; OSS path is completely unchanged
Wire NavGroup into the cloud nav path in +layout.svelte via {#snippet navContent()}
Refactor BottomNavigation and BottomNavLinks to accept a sections: NavLinkItem[][] API matching
SideNavigation, replacing separate linkList/secondaryLinkList props; migrate both components to Svelte 5
and render sections via NavSection with auto-inserted dividers

Add nav-group.svelte to the Holocene design system. It accepts a NavLinkListItem[] and renders NavigationItems with no wrapper element, keeping items directly inside the parent role="list" container. Wire it into the cloud nav path via a navContent snippet prop on side-nav.svelte. When isCloud && navContent, the snippet renders instead of the inline {#each} loop. The OSS nav path is unchanged — it falls through to the existing loop as before. This enables the cloud nav to compose multiple NavGroup instances with other elements interleaved between them, which was not possible with the single {#each} loop approach.

vercel · 2026-04-01T15:21:06Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	Apr 2, 2026 7:38pm

temporal-cicd · 2026-04-01T15:22:13Z

	Warnings
⚠️	📊 Strict Mode: 1 error in 1 file (0.1% of 1085 total) src/routes/(app)/+layout.svelte (1) L62:23: Argument of type '(namespace: string) => { namespace: string; onClick: (namespace: string) => void; }' is not assignable to parameter of type '(value: string \| null \| undefined, index: number, array: (string \| null \| undefined)[]) => { namespace: string; onClick: (namespace: string) => void; }'.

Generated by 🚫 dangerJS against ca80cf4

src/routes/(app)/+layout.svelte

src/lib/components/side-nav.svelte

src/lib/holocene/navigation/nav-group.svelte

Remove the isCloud guard in side-nav.svelte so both OSS and cloud nav use the navContent snippet path. Split linkList at its divider into two derived arrays and render them as separate NavGroups with an explicit <hr> between them. This gives callers independent control over each section without needing divider sentinels in the item arrays.

NavGroup only renders link items, not dividers, so typing navItems as NavLinkListItem[] was too broad and required an isNavLinkItem guard inside the template. - Export NavLinkItem from global.ts - Update NavGroup prop to NavLinkItem[], drop the type guard - Filter linkListForFirstGroup/Second with isNavLinkItem so the derived slices satisfy the narrower type

src/lib/types/global.ts

src/routes/(app)/+layout.svelte

Replace the single getLinkList function (which used a divider sentinel to communicate group boundaries) with two explicit functions: getNavPrimaryLinks and getNavSecondaryLinks. - Remove NavDividerItem type and the divider sentinel item - NavLinkListItem is now just an alias for NavLinkItem - Divider rendering moves to the navContent snippet in the layout, where it belongs as a presentational concern - Drop isNavLinkItem filter from derived values — no longer needed since both functions return NavLinkItem[] directly

Replace the flat linkList + navContent snippet pattern with a typed sections array. SideNavigation now owns divider logic. - Rename nav-group.svelte -> nav-section.svelte - SideNavigation accepts sections: NavLinkItem[][] instead of linkList + navContent snippet - Dividers rendered between sections, never after the last one - Remove duplicate linkListForFirstGroup derived in layout - Layout passes sections={[linkList, linkListForSecondGroup]}

…BottomNavLinks

…ile visibility

src/routes/(app)/+layout.svelte

src/lib/components/bottom-nav.svelte

…irectly

KATIETOLER requested review from a team and rossedfort as code owners April 1, 2026 15:21

vercel bot deployed to Preview April 1, 2026 15:21 View deployment