mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-13 04:06:59 +00:00
feat: add a compact icon-only top navigation toggle (#1363)
* feat: add a compact icon-only top navigation toggle Add a browser-local "Top navigation labels" preference under Settings > Appearance. With it off, the desktop top navigation renders icon-only; each destination keeps an aria-label, gains a hover/focus tooltip, and stays reachable from the command palette. The setting defaults on, so current behavior is preserved, and the mobile navigation always keeps its labels. Also left-align the desktop nav (previously centered) and shorten the longest nav label from "Auto-Update" to "Update" so the bar scans faster. * feat: let the icon-only top nav be left or centered Add a "Top navigation alignment" preference under Settings > Appearance that appears only when top navigation labels are off. It places the icon-only bar against the left edge (the default) or centered. With labels on, the nav always stays left so the longer labels read from the edge. The choice is browser-local and persists per device.
This commit is contained in:
Anso
@@ -38,6 +38,8 @@ import { useNextAutoUpdateRun } from '@/components/sidebar/useNextAutoUpdateRun'
|
||||
import { usePanelSessionStartedAt } from '@/components/sidebar/usePanelSessionStartedAt';
|
||||
import type { SidebarActivityAction } from '@/components/sidebar/SidebarActivityTicker';
|
||||
import { useComposeDiffPreviewEnabled } from '@/hooks/use-compose-diff-preview-enabled';
|
||||
import { useTopNavLabels } from '@/hooks/use-top-nav-labels';
|
||||
import { useTopNavAlign } from '@/hooks/use-top-nav-align';
|
||||
import { toast } from '@/components/ui/toast-store';
|
||||
import { useIsMobile } from '@/hooks/use-is-mobile';
|
||||
import { MobileTabBar } from './MobileTabBar';
|
||||
@@ -144,6 +146,8 @@ export default function EditorLayout() {
|
||||
}, [setCreateDialogOpen]);
|
||||
|
||||
const [diffPreviewEnabled] = useComposeDiffPreviewEnabled();
|
||||
const [topNavLabels] = useTopNavLabels();
|
||||
const [topNavAlign] = useTopNavAlign();
|
||||
|
||||
// Use a ref to break the circular dependency:
|
||||
// useViewNavigationState needs onNavigateToDashboard -> resetEditorState
|
||||
@@ -665,6 +669,8 @@ export default function EditorLayout() {
|
||||
themeSwitch={themeSwitchEl}
|
||||
notifications={notificationsEl}
|
||||
userMenu={userMenuEl}
|
||||
showLabels={topNavLabels}
|
||||
navAlign={topNavAlign}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
@@ -217,7 +217,7 @@ describe('useViewNavigationState', () => {
|
||||
expect(result.current.navItems.map(i => i.value)).toContain('global-observability');
|
||||
});
|
||||
|
||||
it('shows Auto-Update and Schedules for a community admin (now free) but hides paid Console and Audit', () => {
|
||||
it('shows Update and Schedules for a community admin (now free) but hides paid Console and Audit', () => {
|
||||
mockCommunityAdmin();
|
||||
const { result } = renderHook(() => useViewNavigationState());
|
||||
const values = result.current.navItems.map(i => i.value);
|
||||
@@ -225,6 +225,8 @@ describe('useViewNavigationState', () => {
|
||||
expect(values).toContain('scheduled-ops');
|
||||
expect(values).not.toContain('host-console');
|
||||
expect(values).not.toContain('audit-log');
|
||||
// The auto-updates nav item surfaces under the short label "Update".
|
||||
expect(result.current.navItems.find(i => i.value === 'auto-updates')?.label).toBe('Update');
|
||||
});
|
||||
|
||||
it('redirects a non-admin off the Logs view when reached via a deep-link event', () => {
|
||||
|
||||
@@ -123,7 +123,7 @@ export function useViewNavigationState(options?: UseViewNavigationStateOptions)
|
||||
// admin-only operator view (the backend gates the same routes on admin).
|
||||
if (isAdmin) items.push({ value: 'global-observability', label: 'Logs', icon: Activity });
|
||||
if (isAdmin) {
|
||||
items.push({ value: 'auto-updates', label: 'Auto-Update', icon: RefreshCw });
|
||||
items.push({ value: 'auto-updates', label: 'Update', icon: RefreshCw });
|
||||
items.push({ value: 'scheduled-ops', label: 'Schedules', icon: Clock });
|
||||
}
|
||||
if (isPaid) {
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { Fragment, type ReactNode } from 'react';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import { Menu } from 'lucide-react';
|
||||
import { Button } from './ui/button';
|
||||
import { Sheet, SheetContent, SheetTrigger } from './ui/sheet';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
|
||||
import type { TopNavAlign } from '@/hooks/use-top-nav-align';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface TopBarNavItem {
|
||||
@@ -21,6 +23,10 @@ interface TopBarProps {
|
||||
themeSwitch?: ReactNode;
|
||||
notifications: ReactNode;
|
||||
userMenu: ReactNode;
|
||||
/** Show text labels beside the desktop nav icons. When false, the bar is icon-only. */
|
||||
showLabels?: boolean;
|
||||
/** Desktop nav placement in icon-only mode. Ignored while labels are shown (always left). */
|
||||
navAlign?: TopNavAlign;
|
||||
}
|
||||
|
||||
export function TopBar({
|
||||
@@ -33,7 +39,12 @@ export function TopBar({
|
||||
themeSwitch,
|
||||
notifications,
|
||||
userMenu,
|
||||
showLabels = true,
|
||||
navAlign = 'left',
|
||||
}: TopBarProps) {
|
||||
// Centering applies only to the icon-only bar; with labels on the nav stays
|
||||
// left so the long labels read from the edge.
|
||||
const centered = !showLabels && navAlign === 'center';
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@@ -42,38 +53,49 @@ export function TopBar({
|
||||
'shadow-chrome-top',
|
||||
)}
|
||||
>
|
||||
{/* LEFT ZONE: reserved spacer (keeps nav visually centered) */}
|
||||
<div className="flex-1 min-w-0" />
|
||||
{/* LEFT SPACER: balances the right utilities so the nav centers. */}
|
||||
{centered && <div className="flex-1 min-w-0" />}
|
||||
|
||||
{/* CENTER ZONE: Navigation (hidden on mobile) */}
|
||||
<nav aria-label="Primary" className="hidden md:flex self-stretch items-stretch">
|
||||
{navItems.map(({ value, label, icon: Icon }) => {
|
||||
const isActive = activeView === value;
|
||||
return (
|
||||
<button
|
||||
key={value}
|
||||
onClick={() => onNavigate(value)}
|
||||
aria-label={label}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
className={cn(
|
||||
'relative inline-flex h-full items-center gap-2 px-4',
|
||||
'font-mono text-[10px] uppercase tracking-[0.18em] transition-colors',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/50',
|
||||
isActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
<Icon className="w-4 h-4 shrink-0" strokeWidth={1.5} />
|
||||
<span className="hidden xl:inline">{label}</span>
|
||||
{isActive && (
|
||||
<span
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-x-0 -bottom-px h-[2px] bg-brand"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
{/* NAV ZONE: Navigation (hidden on mobile) */}
|
||||
<TooltipProvider delayDuration={300} disableHoverableContent>
|
||||
<nav aria-label="Primary" className="hidden md:flex self-stretch items-stretch">
|
||||
{navItems.map(({ value, label, icon: Icon }) => {
|
||||
const isActive = activeView === value;
|
||||
const button = (
|
||||
<button
|
||||
onClick={() => onNavigate(value)}
|
||||
aria-label={label}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
className={cn(
|
||||
'relative inline-flex h-full items-center gap-2 px-4',
|
||||
'font-mono text-[10px] uppercase tracking-[0.18em] transition-colors',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/50',
|
||||
isActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
<Icon className="w-4 h-4 shrink-0" strokeWidth={1.5} />
|
||||
{showLabels && <span className="hidden xl:inline">{label}</span>}
|
||||
{isActive && (
|
||||
<span
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-x-0 -bottom-px h-[2px] bg-brand"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
// Icon-only mode: a tooltip names the destination on hover/focus. With
|
||||
// labels on, the visible text carries it, so the button renders bare.
|
||||
return showLabels ? (
|
||||
<Fragment key={value}>{button}</Fragment>
|
||||
) : (
|
||||
<Tooltip key={value}>
|
||||
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||
<TooltipContent side="bottom">{label}</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</TooltipProvider>
|
||||
|
||||
{/* RIGHT ZONE: Utilities + identity pin */}
|
||||
<div className="flex flex-1 min-w-0 items-center justify-end gap-2">
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
/**
|
||||
* Coverage for the TopBar `showLabels` preference and accessibility contract.
|
||||
*
|
||||
* Locks the compact icon-only mode: when labels are hidden the desktop nav must
|
||||
* drop the visible text yet keep an accessible name on every button, and the
|
||||
* mobile navigation sheet must always show its labels regardless of the setting.
|
||||
*/
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { Home, Radar } from 'lucide-react';
|
||||
import { TopBar, type TopBarNavItem } from '../TopBar';
|
||||
|
||||
const navItems: TopBarNavItem[] = [
|
||||
{ value: 'dashboard', label: 'Home', icon: Home },
|
||||
{ value: 'fleet', label: 'Fleet', icon: Radar },
|
||||
];
|
||||
|
||||
function renderTopBar(overrides: Partial<Parameters<typeof TopBar>[0]> = {}) {
|
||||
return render(
|
||||
<TopBar
|
||||
activeView="dashboard"
|
||||
navItems={navItems}
|
||||
onNavigate={vi.fn()}
|
||||
mobileNavOpen={false}
|
||||
onMobileNavOpenChange={vi.fn()}
|
||||
notifications={null}
|
||||
userMenu={null}
|
||||
{...overrides}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
describe('TopBar showLabels', () => {
|
||||
it('renders visible nav labels by default', () => {
|
||||
renderTopBar();
|
||||
expect(screen.getByText('Home')).toBeInTheDocument();
|
||||
expect(screen.getByText('Fleet')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides the visible label text in icon-only mode but keeps the accessible name', () => {
|
||||
renderTopBar({ showLabels: false });
|
||||
expect(screen.queryByText('Home')).not.toBeInTheDocument();
|
||||
// The button is still reachable by its accessible name (aria-label).
|
||||
expect(screen.getByRole('button', { name: 'Home' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Fleet' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('always shows labels in the mobile navigation sheet, even when desktop labels are off', () => {
|
||||
renderTopBar({ showLabels: false, mobileNavOpen: true });
|
||||
// Desktop label spans are not rendered in icon-only mode, so the only "Home"
|
||||
// text comes from the open sheet.
|
||||
expect(screen.getByText('Home')).toBeInTheDocument();
|
||||
expect(screen.getByText('Fleet')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('wraps nav buttons in a tooltip trigger only in icon-only mode', () => {
|
||||
// Radix TooltipTrigger (asChild) stamps a data-state attribute onto the
|
||||
// button; the labels-on path renders the button bare without one.
|
||||
const { unmount } = renderTopBar({ showLabels: false });
|
||||
expect(screen.getByRole('button', { name: 'Home' })).toHaveAttribute('data-state');
|
||||
unmount();
|
||||
renderTopBar({ showLabels: true });
|
||||
expect(screen.getByRole('button', { name: 'Home' })).not.toHaveAttribute('data-state');
|
||||
});
|
||||
|
||||
it('forwards clicks to onNavigate through the icon-only tooltip trigger', () => {
|
||||
const onNavigate = vi.fn();
|
||||
renderTopBar({ showLabels: false, onNavigate });
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Fleet' }));
|
||||
expect(onNavigate).toHaveBeenCalledWith('fleet');
|
||||
});
|
||||
|
||||
it('adds a leading spacer to center the nav only in icon-only center mode', () => {
|
||||
// Centered: a flex-1 spacer precedes the nav.
|
||||
const { unmount } = renderTopBar({ showLabels: false, navAlign: 'center' });
|
||||
expect(screen.getByRole('navigation', { name: 'Primary' }).previousElementSibling)
|
||||
.toHaveClass('flex-1');
|
||||
unmount();
|
||||
|
||||
// Icon-only but left-aligned: no leading spacer.
|
||||
const second = renderTopBar({ showLabels: false, navAlign: 'left' });
|
||||
expect(screen.getByRole('navigation', { name: 'Primary' }).previousElementSibling).toBeNull();
|
||||
second.unmount();
|
||||
|
||||
// Labels on always stays left, even if center is requested.
|
||||
renderTopBar({ showLabels: true, navAlign: 'center' });
|
||||
expect(screen.getByRole('navigation', { name: 'Primary' }).previousElementSibling).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -2,11 +2,14 @@ import { Combobox } from '@/components/ui/combobox';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
import { SegmentedControl } from '@/components/ui/segmented-control';
|
||||
import { TogglePill } from '@/components/ui/toggle-pill';
|
||||
import { useDensity } from '@/hooks/use-density';
|
||||
import type { Density } from '@/hooks/use-density';
|
||||
import { useDeployFeedbackEnabled } from '@/hooks/use-deploy-feedback-enabled';
|
||||
import { useDeployFeedbackStyle, type DeployFeedbackStyle } from '@/hooks/use-deploy-feedback-style';
|
||||
import { useComposeDiffPreviewEnabled } from '@/hooks/use-compose-diff-preview-enabled';
|
||||
import { useTopNavLabels } from '@/hooks/use-top-nav-labels';
|
||||
import { useTopNavAlign, type TopNavAlign } from '@/hooks/use-top-nav-align';
|
||||
import { useTheme, THEME_MODE_OPTIONS, ACCENTS, CONTRAST, BORDER_BOOST, GLOW, TYPE_SCALE } from '@/hooks/use-theme';
|
||||
import { AccentPicker } from '@/components/theme/AccentPicker';
|
||||
import { ThemePreview } from '@/components/theme/ThemePreview';
|
||||
@@ -31,6 +34,11 @@ const DEPLOY_STYLE_OPTIONS: { value: DeployFeedbackStyle; label: string }[] = [
|
||||
{ value: 'inline', label: 'Inline' },
|
||||
];
|
||||
|
||||
const TOP_NAV_ALIGN_OPTIONS: { value: TopNavAlign; label: string }[] = [
|
||||
{ value: 'left', label: 'Left' },
|
||||
{ value: 'center', label: 'Center' },
|
||||
];
|
||||
|
||||
const fmtSigned = (v: number) => `${v > 0 ? '+' : ''}${v.toFixed(2)}`;
|
||||
|
||||
export function AppearanceSection() {
|
||||
@@ -38,6 +46,8 @@ export function AppearanceSection() {
|
||||
const [isEnabled, setEnabled] = useDeployFeedbackEnabled();
|
||||
const [feedbackStyle, setFeedbackStyle] = useDeployFeedbackStyle();
|
||||
const [diffPreviewEnabled, setDiffPreviewEnabled] = useComposeDiffPreviewEnabled();
|
||||
const [topNavLabels, setTopNavLabels] = useTopNavLabels();
|
||||
const [topNavAlign, setTopNavAlign] = useTopNavAlign();
|
||||
const {
|
||||
theme, accent, borderBoost, glow, contrast, uiFont, monoFont, typeScale,
|
||||
setTheme, setAccent, setBorderBoost, setGlow, setContrast, setUiFont, setMonoFont, setTypeScale,
|
||||
@@ -193,6 +203,27 @@ export function AppearanceSection() {
|
||||
/>
|
||||
</SettingsField>
|
||||
|
||||
<SettingsField
|
||||
label="Top navigation labels"
|
||||
helper="Show text labels beside top navigation icons. Turn off for a more compact navigation bar."
|
||||
>
|
||||
<TogglePill checked={topNavLabels} onChange={setTopNavLabels} />
|
||||
</SettingsField>
|
||||
|
||||
{!topNavLabels && (
|
||||
<SettingsField
|
||||
label="Top navigation alignment"
|
||||
helper="Place the icon-only navigation against the left edge or centered in the bar."
|
||||
>
|
||||
<SegmentedControl
|
||||
value={topNavAlign}
|
||||
options={TOP_NAV_ALIGN_OPTIONS}
|
||||
onChange={setTopNavAlign}
|
||||
ariaLabel="Top navigation alignment"
|
||||
/>
|
||||
</SettingsField>
|
||||
)}
|
||||
|
||||
<SettingsField
|
||||
label="Deploy progress"
|
||||
helper="Stream live output for deploy, restart, update, install, and Git operations, with a warning when an operation goes quiet. On by default; turn it off to run operations without it."
|
||||
|
||||
Reference in New Issue
Block a user