50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T3f76,import * as React from 'react' import { cn } from '@/lib/utils' import { useSlidingIndicator } from '@/hooks/use-sliding-indicator' import { isRTL } from '@/lib/direction' import { useTabBarFade } from '@/hooks/use-tab-bar-fade' import { useRegisterNavReveal } from '@/hooks/use-nav-reset' import { useReducedMotion } from '@/hooks/use-reduced-motion' import { ProgressBar } from '@/components/ui/progress-bar' export interface TabBarItem { id: string label: string /** * Optional leading icon, shown before the label. Fixed-width and * weight-independent, so it does not affect the bold-ghost width reservation. * Used to differentiate tabs at a glance (e.g. per-platform icons). */ icon?: React.ReactNode /** * Optional progress for the active tab's underline: * - a 0..1 number renders a determinate fill bar (progress toward a target); * - 'indeterminate' renders the open-ended indicator: segment accumulation * when `count` is set, else a dotted line; * - omitted keeps the plain solid underline (no progress concept). */ progress?: number | 'indeterminate' /** * The tally behind an 'indeterminate' underline (streak days, check-ins). * Renders segment accumulation: solid dots on a faint dotted track, every 10 * collapsing into a pill (see ProgressBar's `count`). Ignored otherwise. * * Drawn, never written. For a number the user reads -- how many items sit * behind a filter -- use `tally`. */ count?: number /** * A figure shown after the label, dimmed: "Needs review 2,112". * * A string rather than a number because the DS does not know the user's * locale and a thousands separator is not universal. It joins the tab's * accessible name, so a screen reader announces the label and the figure * together. * * Sits outside the bold-ghost width reservation, like `icon`, so the strip * still does not reflow when the active weight changes. */ tally?: string /** * Optional decorative style for the active tab's underline. Purely visual (no * functional meaning) and takes precedence over `progress`: * - 'wave' renders a wavy accent line; * - 'shimmer' renders a dimmed accent line with a slow full-accent sweep (for * occasional "special" tabs; requires the `.wj-tab-shimmer` utility class, * and falls back to a plain line under reduced motion). */ underline?: 'wave' | 'shimmer' } export interface TabBarProps { items: TabBarItem[] activeId: string | null onSelect: (id: string) => void /** * Accessible name for the strip, on the tablist itself. * * Optional here where `SidebarTabs` requires it, because a TabBar sits under * a header that usually names it. * Pass it whenever the strip's subject is not already announced -- filters * over one of several languages, say, where the tabs alone read the same * whichever language is displayed. */ 'aria-label'?: string className?: string /** Inline styles for the root element. */ style?: React.CSSProperties } /** * The "wave" decorative underline: a tiled wavy accent line, purely visual. * Taller than the solid / progress underlines, so it sits at the bottom and * extends upward. The pattern id is per-instance (useId) to avoid collisions. * Themeable via the path's CSS stroke. Drifts gently sideways (one wavelength, * looping seamlessly) via SMIL, gated by prefers-reduced-motion. */ function WaveUnderline() { const patternId = React.useId() const reduced = useReducedMotion() return ( ) } /** * Sticky frosted tab bar for switching between primary entities. * * Combines the sticky outer wrapper (backdrop-blur, --header-bg, border-b) and * the inner horizontally-scrolling strip. Integrates useTabBarFade internally * for the dynamic edge-fade mask. Auto-scrolls the active tab into view on * `activeId` change, and re-centers it when the item set changes around it * (e.g. a search filter clearing re-adds tabs and shifts every position). * * The outer wrapper uses `sticky top-0 z-30 -mx-4 -mt-3` so callers should * place it as a direct child of the page's full-height scroll container (not * wrapped in a sized div) and apply `px-4 pt-3` to the page container. * * The tab bar fade CSS classes (`tab-bar-fade-left`, `tab-bar-fade-right`, * `tab-bar-fade-both`) and the `scrollbar-hide` class must be available in the * app's own CSS. Import `@whiskeyjack/design-system/css/utilities` to get them. */ export const TabBar = React.forwardRef(function TabBar({ items, activeId, onSelect, 'aria-label': ariaLabel, className, style }, ref) { const tabBarRef = React.useRef(null) const fadeClass = useTabBarFade(tabBarRef, items.length) const reduced = useReducedMotion() const handleKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (!items.length) return const currentIndex = activeId ? items.findIndex((t) => t.id === activeId) : -1 let nextIndex: number | null = null if (e.key === 'ArrowRight') { nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0 } else if (e.key === 'ArrowLeft') { nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1 } else if (e.key === 'Home') { nextIndex = 0 } else if (e.key === 'End') { nextIndex = items.length - 1 } if (nextIndex !== null) { e.preventDefault() const next = items[nextIndex] onSelect(next.id) // Move DOM focus to the newly selected tab const btn = tabBarRef.current?.querySelector( `[data-tab-id="${next.id}"]` ) btn?.focus() } }, [activeId, items, onSelect] ) const scrollTabIntoView = React.useCallback( (center = false) => { if (!tabBarRef.current || !activeId) return const activeBtn = tabBarRef.current.querySelector( `[data-tab-id="${activeId}"]` ) as HTMLElement | null if (!activeBtn) return const container = tabBarRef.current // Center the active tab in the strip (scrollTo clamps at the edges). // offsetLeft is physical, giving the LTR scrollLeft target; in modern-RTL // the scroll range is [-(scrollWidth-clientWidth), 0], so shift into it. if (center) { const ltrLeft = activeBtn.offsetLeft - (container.clientWidth - activeBtn.offsetWidth) / 2 const left = isRTL(container) ? ltrLeft - (container.scrollWidth - container.clientWidth) : ltrLeft container.scrollTo({ left, behavior: reduced ? 'auto' : 'smooth' }) return } const containerRect = container.getBoundingClientRect() const btnRect = activeBtn.getBoundingClientRect() const pad = 16 if (btnRect.left < containerRect.left + pad) { container.scrollTo({ left: container.scrollLeft + btnRect.left - containerRect.left - pad, behavior: reduced ? 'auto' : 'smooth', }) } else if (btnRect.right > containerRect.right - pad) { container.scrollTo({ left: container.scrollLeft + btnRect.right - containerRect.right + pad, behavior: reduced ? 'auto' : 'smooth', }) } }, [activeId, reduced] ) // Whether the active tab's button is currently fully within the strip's // visible bounds. Shared by the item-set-change effect below and the // nav-reveal gesture, so a reorder and a double-tap agree on what "already // in view" means. const isActiveTabVisible = React.useCallback(() => { const container = tabBarRef.current if (!container || !activeId || container.clientWidth === 0) return true const activeBtn = container.querySelector(`[data-tab-id="${activeId}"]`) if (!activeBtn) return true const c = container.getBoundingClientRect() const b = activeBtn.getBoundingClientRect() return b.left >= c.left && b.right <= c.right }, [activeId]) // Selecting a neighbouring tab nudges it into view (minimal scroll). When the // ITEM SET changes around a still-selected tab -- e.g. a search filter // clearing re-adds the hidden tabs and shifts every position -- the old // scroll offset is meaningless, so center the active tab instead. But a // reorder that never moved the active tab OUT of view -- e.g. Priority // Ordering reshuffling goal tabs behind an unrelated active one after a // check-in -- must leave the strip alone: recentering it anyway reads as the // tab bar moving on its own. const itemsKey = items.map((i) => i.id).join('\n') const prevItemsKeyRef = React.useRef(itemsKey) React.useEffect(() => { const itemsChanged = prevItemsKeyRef.current !== itemsKey prevItemsKeyRef.current = itemsKey if (itemsChanged && isActiveTabVisible()) return scrollTabIntoView(itemsChanged) }, [itemsKey, scrollTabIntoView, isActiveTabVisible]) // The nav's double-tap asks every strip to bring its active tab back into // view. Declines when the tab is already fully in view, and when the strip is // display:none (the sidebar layout hides it while keeping it mounted), so // the gesture can move on to the page's reset. useRegisterNavReveal(() => { if (!tabBarRef.current || !activeId || tabBarRef.current.clientWidth === 0) return false if (isActiveTabVisible()) return false scrollTabIntoView(true) return true }) // Sliding underline: the shared measurement, so the bar, the segmented // control and the sidebar cannot drift into travelling differently. const indicator = useSlidingIndicator(tabBarRef, activeId, { changeKey: itemsKey }) // The active tab's underline appearance: a decorative `underline` style wins, // else `progress` (a fill bar or dotted line), else the plain solid bar. const activeItem = activeId ? items.find((i) => i.id === activeId) : undefined const activeProgress = activeItem?.progress const activeUnderline = activeItem?.underline return (

{ if (tabBarRef.current && e.deltaY !== 0) { tabBarRef.current.scrollLeft += e.deltaY e.preventDefault() } }} onKeyDown={handleKeyDown} className={cn('relative flex gap-4 overflow-x-auto px-4 py-5 scrollbar-hide', fadeClass)} > {items.map((item) => { const isActive = item.id === activeId return ( ) })} {indicator && (

{activeUnderline === 'shimmer' ? ( // Occasional "special" tab (e.g. an aggregate / About tab): a dimmed // accent line with a slow full-accent sweep. Reduced motion keeps // the plain full-strength line. reduced ? (

) : ( <>

) ) : activeUnderline === 'wave' ? ( ) : activeProgress === 'indeterminate' ? ( // Free / count streaks (no target): segment accumulation when the // item carries its tally, else the plain dotted line. ) : activeProgress == null ? (

) : ( // End goal / completion: the determinate progress bar (track color // from --wj-progress-track, full-accent fill). )}

)}

) }) TabBar.displayName = 'TabBar' 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/direction.json","https://whiskeyjack.net/r/progress-bar.json","https://whiskeyjack.net/r/use-nav-reset.json","https://whiskeyjack.net/r/use-reduced-motion.json","https://whiskeyjack.net/r/use-sliding-indicator.json","https://whiskeyjack.net/r/use-tab-bar-fade.json","https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/tab-bar.tsx","content":"$52","type":"registry:ui","target":"components/ui/tab-bar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]