@crvouga/atlas 0.10.2 → 0.11.0

package/packages/visualizer/src/components/Header.tsx

@@ -1,105 +1,112 @@
+import { SpecLogo } from './SpecLogo';
+import { IconDots } from '@tabler/icons-react';
+import { isStatechartFile } from '@crvouga/atlas/schema';
+import { ActionIcon, Anchor, Badge, Box, Button, Group, Menu, NativeSelect, Popover, Stack, Tooltip } from '@mantine/core';
 import { Link, useLocation, useNavigate, useSearch } from '@tanstack/react-router';
-import { useEffect, useMemo, useRef, type ReactNode } from 'react';
-
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useAtlas } from '../app/atlas-context';
-import { setFinderOpen } from '../find/open';
 import type { AtlasView } from '../data/model';
 import { LATEST } from '../data/queries';
 import { useEvidence } from '../evidence/evidence-context';
 import { plural } from '../evidence/format';
 import { excludedCount } from '../evidence/sources-panel';
+import { setFinderOpen } from '../find/open';
 import { useLiveStatus } from '../live/live-stream';
+import { currentProject, runtimeConfig } from '../runtime';
 import { kindOfAddress, outlinePath, SPEC_KINDS } from '../spec-kind';
-import { runtimeConfig } from '../runtime';
 import { useUiStore } from '../state/ui-store';
-import { DataIssues } from './DataIssues';
 import { ActivityIndicator } from './ActivityIndicator';
-import styles from './Header.module.css';
-import { ProjectPicker, ProjectNotice } from './ProjectPicker';
-import { isStatechartFile } from '@crvouga/atlas/schema';
-import { SearchIcon, ChevronDownIcon } from './icons';
-
+import { DataIssues } from './DataIssues';
+import { IconChevronDown as ChevronDownIcon, IconSearch as SearchIcon } from '@tabler/icons-react';
+import { ProjectNotice, ProjectPicker } from './ProjectPicker';
 const dateTime = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
-
 export function formatRunTime(iso: string) {
   const d = new Date(iso);
   return Number.isNaN(d.getTime()) ? 'Unknown time' : dateTime.format(d);
 }
-
-/** The product's own name, without the subtitle a spec title may carry: "Gamezilla — the whole product" is Gamezilla. */
+/** The product's own name, without the subtitle a spec title may carry. */
 export function productName(title: string | undefined) {
-  const name = title?.split(/\s+[—–|-]\s+|:\s+/)[0]?.trim();
-  return name || 'Atlas';
+  return title?.split(/\s+[—–|-]\s+|:\s+/)[0]?.trim() || 'Atlas';
 }
-
 function RunPicker({ view }: { view: AtlasView }) {
   const search = useSearch({ strict: false });
   const navigate = useNavigate();
   const { latestRunId } = useAtlas();
-  if (view.runs.length === 0) return null;
+  if (!view.runs.length) return null;
   const latest = view.runs.find((run) => run.id === latestRunId);
   return (
-    <label className={styles.picker}>
-      <span className="sr-only">Run</span>
-      <select
-        className={styles.select}
-        value={search.run ?? LATEST}
-        onChange={(event) => void navigate({ to: '.', search: (prev) => ({ ...prev, run: event.target.value === LATEST ? undefined : event.target.value }) })}
-      >
-        <option value={LATEST}>Latest{latest ? ` · ${formatRunTime(latest.startedAt)}` : ''}</option>
-        {view.runs.map((run) => (
-          <option key={run.id} value={run.id} disabled={run.progress === 'running'}>
-            {formatRunTime(run.startedAt)} · {run.progress === 'running' ? 'still running' : run.mode === 'showcase' ? 'with videos' : 'quick check'}
-          </option>
-        ))}
-      </select>
-    </label>
+    <NativeSelect
+      label="Run"
+      value={search.run ?? LATEST}
+      onChange={(event) =>
+        void navigate({ to: '.', search: (prev) => ({ ...prev, run: event.target.value === LATEST ? undefined : event.target.value }) })
+      }
+    >
+      <option value={LATEST}>Latest{latest ? ` · ${formatRunTime(latest.startedAt)}` : ''}</option>
+      {view.runs.map((run) => (
+        <option key={run.id} value={run.id} disabled={run.progress === 'running'}>
+          {formatRunTime(run.startedAt)} ·{' '}
+          {run.progress === 'running' ? 'still running' : run.mode === 'showcase' ? 'with videos' : 'quick check'}
+        </option>
+      ))}
+    </NativeSelect>
   );
 }
-
 function runOnly(prev: { run?: unknown }) {
   return typeof prev.run === 'string' ? { run: prev.run } : {};
 }
-
-/** Spec runs writing results right now. Their results are already in the lists below. */
 function LiveRuns() {
   const { active } = useEvidence();
   if (!active.length) return null;
-  const results = active.reduce((sum, run) => sum + run.completed, 0);
   return (
-    <span className={styles.live} role="status" title={active.map((run) => run.packageDir).join(', ')}>
-      <span className={styles.liveDot} aria-hidden="true" />
-      Running {active.length === 1 ? active[0]!.packageDir.split('/').at(-1) : plural(active.length, 'suite', 'suites')} · {plural(results, 'result', 'results')}
-    </span>
+    <Badge color="blue" variant="light" role="status">
+      Running {active.length === 1 ? active[0]!.packageDir.split('/').at(-1) : plural(active.length, 'suite', 'suites')} ·{' '}
+      {plural(
+        active.reduce((n, run) => n + run.completed, 0),
+        'result',
+        'results'
+      )}
+    </Badge>
   );
 }
-
-/** A fixed-size connection indicator; incoming results never change the header's width. */
 function ServerConnection() {
   const status = useLiveStatus();
   if (status === 'off') return null;
-  const label = status === 'live' ? 'Live updates connected' : status === 'connecting' ? 'Connecting to live updates' : 'Live updates disconnected; reconnecting';
+  const label =
+    status === 'live'
+      ? 'Live updates connected'
+      : status === 'connecting'
+        ? 'Connecting to live updates'
+        : 'Live updates disconnected; reconnecting';
   return (
-    <span className={styles.connection} data-status={status} role="status" aria-label={label} title={label}>
-      <span className={styles.connectionDot} aria-hidden="true" />
-      <span className="sr-only">{label}</span>
-    </span>
+    <Tooltip label={label}>
+      <Badge size="sm" color={status === 'live' ? 'green' : 'gray'} role="status" aria-label={label}>
+        {status === 'live' ? 'Live' : 'Connecting'}
+      </Badge>
+    </Tooltip>
   );
 }
-
-function SourcesButton() {
+function SourcesButton({ onOpen }: { onOpen: () => void }) {
   const { layers, ready, unavailable, excluded } = useEvidence();
   const setOpen = useUiStore((s) => s.setSourcesOpen);
   if (!ready && !unavailable) return null;
   const off = excludedCount(excluded);
   return (
-    <button type="button" className={styles.sources} data-filtered={off > 0 || undefined} onClick={() => setOpen(true)}>
+    <Button
+      onClick={() => {
+        onOpen();
+        setOpen(true);
+      }}
+      rightSection={
+        <Badge color={off ? 'orange' : 'gray'}>
+          {unavailable ? 'unavailable' : off ? `${off} off` : plural(layers.length, 'layer', 'layers')}
+        </Badge>
+      }
+    >
       Sources
-      <span>{unavailable ? 'unavailable' : off > 0 ? `${off} off` : plural(layers.length, 'layer', 'layers')}</span>
-    </button>
+    </Button>
   );
 }
-
 export function Header() {
   const { view } = useAtlas();
   const evidence = useEvidence();
@@ -107,6 +114,12 @@ export function Header() {
   const kind = kindOfAddress(pathname);
   const product = productName(view?.title);
   const hasCharts = evidence.files.some(isStatechartFile);
+  const sourcesOpen = useUiStore((s) => s.sourcesOpen);
+  const [optionsOpen, setOptionsOpen] = useState(false);
+  const optionsTarget = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (sourcesOpen) setOptionsOpen(false);
+  }, [sourcesOpen]);
   useEffect(() => {
     document.title = product;
   }, [product]);
@@ -114,73 +127,110 @@ export function Header() {
     () =>
       SPEC_KINDS.map((entry) => {
         const files = evidence.files.filter(entry.accepts);
-        return { kind: entry, files: files.length, running: files.some(file => (evidence.view.specs.get(outlinePath(file))?.summary.counts.running ?? 0) > 0), failing: files.filter((file) => (evidence.view.specs.get(outlinePath(file))?.summary.counts.failed ?? 0) > 0).length };
+        return {
+          kind: entry,
+          files: files.length,
+          running: files.some((file) => (evidence.view.specs.get(outlinePath(file))?.summary.counts.running ?? 0) > 0),
+          failing: files.filter((file) => (evidence.view.specs.get(outlinePath(file))?.summary.counts.failed ?? 0) > 0).length
+        };
       }).filter((tab) => tab.files > 0 || tab.kind === kind),
     [evidence.files, evidence.view, kind]
   );
+  const project = currentProject();
   return (
-    <header className={styles.header}>
-      <Link to="/" search={(prev) => runOnly(prev)} className={styles.home}>
-        Atlas
-      </Link>
-      <div className={styles.breadcrumbs}>
-      <HeaderMenu label="Spec type" working={tabs.some(tab => tab.running)} caption={kind?.label ?? (hasCharts ? 'Statecharts' : evidence.ready && !tabs.length ? 'Tests' : 'Specs')}>
-      <nav className={styles.tabs} aria-label="Spec type" onClick={event => event.currentTarget.closest('details')?.removeAttribute('open')}>
-        <Link to="/" search={(prev) => runOnly(prev)} aria-current={pathname.startsWith('/specs/') ? undefined : 'page'}>
-          {hasCharts || !evidence.ready ? 'Statecharts' : 'Tests'}
-        </Link>
-        {tabs.map((tab) => (
-          <Link key={tab.kind.id} to="/specs/$kind" params={{ kind: tab.kind.id }} search={{}} aria-current={tab.kind === kind ? 'page' : undefined}>
-            {tab.kind.label}
-            {tab.running && <ActivityIndicator label={`${tab.kind.label} tests running`} />}
-            {tab.failing > 0 && <span className={styles.failing} aria-label={`${plural(tab.failing, tab.kind.one, tab.kind.many)} failing`}>{tab.failing}</span>}
-          </Link>
-        ))}
-      </nav>
-      </HeaderMenu>
-      <SpecBreadcrumb />
-      </div>
-      <div className={styles.tools}>
-        <ServerConnection />
-        <button type="button" className={styles.search} aria-label="Find a flow" title="Search (⌘K / Ctrl+K)" aria-keyshortcuts="Meta+K Control+K" onClick={() => setFinderOpen(true)}>
-          <SearchIcon size={16} />
-        </button>
-        <HeaderMenu label="View options" caption="•••" tools>
-          <div className={styles.options}>
-            {!kind && view && <div className={styles.optionGroup}><span className={styles.optionLabel}>Run</span><RunPicker view={view} /></div>}
-            <LiveRuns />
-            <SourcesButton />
-            {!kind && view && <DataIssues issues={view.issues} />}
-            {runtimeConfig()?.api && <a href="/admin" className={styles.sources}>Settings</a>}
-            <ProjectNotice />
-          </div>
-        </HeaderMenu>
+    <Group flex={1} miw={0} justify="space-between" wrap="nowrap" gap="xs">
+      <Group gap="xs" wrap="nowrap" miw={0}>
+        <Anchor fw={800} size="lg" underline="never" renderRoot={(props) => <Link {...props} to="/" search={(prev) => runOnly(prev)} />}>
+          Atlas
+        </Anchor>
+        <Menu keepMounted position="bottom-start">
+          <Menu.Target>
+            <Button
+              variant="subtle"
+              aria-label="Spec type"
+              leftSection={kind ? <SpecLogo kind={kind} /> : undefined}
+              rightSection={<ChevronDownIcon aria-hidden="true" size={12} />}
+            >
+              {kind?.label ?? (hasCharts ? 'Statecharts' : evidence.ready && !tabs.length ? 'Tests' : 'Specs')}
+            </Button>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Box component="nav" aria-label="Spec type">
+              <Menu.Item
+                aria-current={pathname.startsWith('/specs/') ? undefined : 'page'}
+                renderRoot={(props) => <Link {...props} to="/" search={(prev) => runOnly(prev)} />}
+              >
+                {hasCharts || !evidence.ready ? 'Statecharts' : 'Tests'}
+              </Menu.Item>
+              {tabs.map((tab) => (
+                <Menu.Item
+                  key={tab.kind.id}
+                  leftSection={<SpecLogo kind={tab.kind} />}
+                  aria-current={tab.kind === kind ? 'page' : undefined}
+                  rightSection={
+                    tab.failing ? (
+                      <Badge color="red">{tab.failing}</Badge>
+                    ) : tab.running ? (
+                      <ActivityIndicator label={`${tab.kind.label} tests running`} />
+                    ) : undefined
+                  }
+                  renderRoot={(props) => <Link {...props} to="/specs/$kind" params={{ kind: tab.kind.id }} search={{}} />}
+                >
+                  {tab.kind.label}
+                </Menu.Item>
+              ))}
+            </Box>
+          </Menu.Dropdown>
+        </Menu>
+        <Box visibleFrom="sm" miw={0}>
+          <SpecBreadcrumb />
+        </Box>
+      </Group>
+      <Group gap="xs" wrap="nowrap">
+        <Box visibleFrom="sm">
+          <ServerConnection />
+        </Box>
+        <Tooltip label="Search (⌘K / Ctrl+K)">
+          <ActionIcon aria-label="Find a flow" aria-keyshortcuts="Meta+K Control+K" onClick={() => setFinderOpen(true)}>
+            <SearchIcon aria-hidden="true" size={18} />
+          </ActionIcon>
+        </Tooltip>
+        <Popover
+          opened={optionsOpen && !sourcesOpen}
+          onChange={setOptionsOpen}
+          disabled={sourcesOpen}
+          keepMounted
+          position="bottom-end"
+          width={320}
+          trapFocus
+        >
+          <Popover.Target>
+            <ActionIcon ref={optionsTarget} aria-label="View options" onClick={() => setOptionsOpen((open) => !open)}>
+              <IconDots size={20} aria-hidden="true" />
+            </ActionIcon>
+          </Popover.Target>
+          <Popover.Dropdown>
+            <Stack gap="sm">
+              {!kind && view && <RunPicker view={view} />}
+              <LiveRuns />
+              <SourcesButton
+                onOpen={() => {
+                  setOptionsOpen(false);
+                  // The drawer returns focus to this persistent trigger, not its disappearing Sources button.
+                  optionsTarget.current?.focus();
+                }}
+              />
+              {!kind && view && <DataIssues issues={view.issues} />}
+              {runtimeConfig()?.api && <Anchor href={`/admin${project ? `?project=${encodeURIComponent(project)}` : ''}`}>Settings</Anchor>}
+              <ProjectNotice />
+            </Stack>
+          </Popover.Dropdown>
+        </Popover>
         <ProjectPicker />
-      </div>
-    </header>
+      </Group>
+    </Group>
   );
 }
-
-function HeaderMenu({ label, caption, tools = false, working = false, children }: { label: string; caption: string; tools?: boolean; working?: boolean; children: ReactNode }) {
-  const ref = useRef<HTMLDetailsElement>(null);
-  useEffect(() => {
-    const close = (event: Event) => {
-      if (event instanceof KeyboardEvent) {
-        if (event.key === 'Escape' && ref.current?.open) { ref.current.open = false; ref.current.querySelector('summary')?.focus(); }
-      } else if (event.target instanceof Node && !ref.current?.contains(event.target) && ref.current) ref.current.open = false;
-    };
-    document.addEventListener('pointerdown', close);
-    document.addEventListener('keydown', close);
-    return () => { document.removeEventListener('pointerdown', close); document.removeEventListener('keydown', close); };
-  }, []);
-  return <details ref={ref} className={styles.menu} data-tools={tools || undefined} onToggle={event => {
-    if (event.currentTarget.open) for (const other of document.querySelectorAll<HTMLDetailsElement>('header details[open]')) if (other !== event.currentTarget) other.open = false;
-  }}>
-    <summary role="button" aria-label={label}>{working && <ActivityIndicator label="Specs running" />}{caption}{!tools && <ChevronDownIcon size={12} />}</summary>
-    <div className={styles.dropdown}>{children}</div>
-  </details>;
-}
-
 function SpecBreadcrumb() {
   const evidence = useEvidence();
   const { view } = useAtlas();
@@ -189,17 +239,39 @@ function SpecBreadcrumb() {
   const navigate = useNavigate();
   const kind = kindOfAddress(pathname);
   const chart = pathname.startsWith('/chart/') ? decodeURIComponent(pathname.split('/')[2] ?? '') : null;
-  const options = kind ? evidence.files.filter(kind.accepts).map(file => ({ id: file, name: evidence.titleOf(file), running: (evidence.view.specs.get(outlinePath(file))?.summary.counts.running ?? 0) > 0 }))
-    : [...(view?.charts.values() ?? [])].map(item => ({ id: item.id, name: item.name, running: (evidence.view.specs.get(outlinePath(item.file))?.summary.counts.running ?? 0) > 0 }));
+  const options = kind
+    ? evidence.files.filter(kind.accepts).map((file) => ({
+        id: file,
+        name: evidence.titleOf(file),
+        running: (evidence.view.specs.get(outlinePath(file))?.summary.counts.running ?? 0) > 0
+      }))
+    : [...(view?.charts.values() ?? [])].map((item) => ({
+        id: item.id,
+        name: item.name,
+        running: (evidence.view.specs.get(outlinePath(item.file))?.summary.counts.running ?? 0) > 0
+      }));
   if (!options.length) return null;
-  const running = options.some(option => option.running);
-  return <><span aria-hidden="true">›</span><label className={styles.picker} data-running={running || undefined}><span className="sr-only">Spec</span>
-    {running && <span className={styles.pickerActivity}><ActivityIndicator label="Specs running" /></span>}
-    <select aria-label="Spec" className={styles.select} value={kind ? search.spec ?? '' : chart ?? ''} onChange={event => {
-      const value = event.target.value;
-      if (kind) void navigate({ to: '/specs/$kind', params: { kind: kind.id }, search: value ? { spec: value } : {} });
-      else if (value) void navigate({ to: '/chart/$chartId', params: { chartId: value }, search: {} });
-      else void navigate({ to: '/', search: {} });
-    }}><option value="">All specs</option>{options.map(option => <option key={option.id} value={option.id}>{option.name}{option.running ? ' · Running' : ''}</option>)}</select>
-  </label></>;
+  return (
+    <NativeSelect
+      data-running={options.some((option) => option.running) || undefined}
+      leftSection={options.some((option) => option.running) ? <ActivityIndicator label="Specs running" /> : undefined}
+      aria-label="Spec"
+      maw="20rem"
+      value={kind ? (search.spec ?? '') : (chart ?? '')}
+      onChange={(event) => {
+        const value = event.target.value;
+        if (kind) void navigate({ to: '/specs/$kind', params: { kind: kind.id }, search: value ? { spec: value } : {} });
+        else if (value) void navigate({ to: '/chart/$chartId', params: { chartId: value }, search: {} });
+        else void navigate({ to: '/', search: {} });
+      }}
+    >
+      <option value="">All specs</option>
+      {options.map((option) => (
+        <option key={option.id} value={option.id}>
+          {option.name}
+          {option.running ? ' · Running' : ''}
+        </option>
+      ))}
+    </NativeSelect>
+  );
 }

package/packages/visualizer/src/components/Legend.tsx

@@ -1,50 +1,22 @@
+import { Badge, Group } from '@mantine/core';
 import { KindIcon } from './labels';
-import styles from './Legend.module.css';
-
 export function Legend({ showTime }: { showTime: boolean }) {
   return (
-    <div className={styles.legend} role="group" aria-label="Legend">
-      <span className={styles.item}>
-        <span className={styles.chip} data-kind="user">
-          <KindIcon kind="user" size={11} />
-        </span>
-        User action
-      </span>
-      <span className={styles.item}>
-        <span className={styles.chip} data-kind="system">
-          <KindIcon kind="system" size={11} />
-        </span>
+    <Group gap="xs" role="group" aria-label="Legend">
+      <Badge leftSection={<KindIcon kind="user" size={12} />}>User action</Badge>
+      <Badge color="gray" leftSection={<KindIcon kind="system" size={12} />}>
         System event
-      </span>
+      </Badge>
       {showTime && (
-        <span className={styles.item}>
-          <span className={styles.chip} data-kind="time">
-            <KindIcon kind="time" size={11} />
-          </span>
+        <Badge color="gray" leftSection={<KindIcon kind="time" size={12} />}>
           Time passes
-        </span>
+        </Badge>
       )}
-      <span className={styles.item}>
-        <span className={styles.chip} data-kind="none" />
-        Not reached or not run
-      </span>
-      <span className={styles.sep} aria-hidden="true" />
-      <span className={styles.item}>
-        <span className={styles.frame} data-status="passed" />
-        Working
-      </span>
-      <span className={styles.item}>
-        <span className={styles.frame} data-status="flaky" />
-        Unreliable
-      </span>
-      <span className={styles.item}>
-        <span className={styles.frame} data-status="failed" />
-        Broken
-      </span>
-      <span className={styles.item}>
-        <span className={styles.frame} data-status="none" />
-        Not checked
-      </span>
-    </div>
+      <Badge color="gray">Not reached or not run</Badge>
+      <Badge color="green">Working</Badge>
+      <Badge color="orange">Unreliable</Badge>
+      <Badge color="red">Broken</Badge>
+      <Badge color="gray">Not checked</Badge>
+    </Group>
   );
 }

package/packages/visualizer/src/components/ProjectPicker.tsx

@@ -1,11 +1,10 @@
-import { useEffect } from 'react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ProjectsSchema, type Project } from '@crvouga/atlas/schema';
-import { currentProject, runtimeConfig, runtimeUrl } from '../runtime';
-import { eventsAddress, listenLive, useLiveStatus } from '../live/live-stream';
+import { Alert, Box, Button, NativeSelect, Text, VisuallyHidden } from '@mantine/core';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import { liveInvalidator } from '../live/live-query';
-import styles from './Header.module.css';
-
+import { eventsAddress, listenLive, useLiveStatus } from '../live/live-stream';
+import { currentProject, runtimeConfig, runtimeUrl } from '../runtime';
 /** Project changes navigate the page so queries, recordings and event streams cannot carry across projects. */
 export function selectProject(slug: string) {
   const url = new URL(window.location.href);
@@ -13,7 +12,6 @@ export function selectProject(slug: string) {
   url.hash = '#/';
   window.location.assign(url.href);
 }
-
 function useProjects() {
   const address = runtimeUrl(runtimeConfig()?.projectsUrl);
   const client = useQueryClient();
@@ -22,43 +20,80 @@ function useProjects() {
     const events = eventsAddress();
     if (!address || !events) return;
     const refresh = liveInvalidator(client, ['projects', address], 250);
-    const stop = listenLive(events, event => { if (event.type === 'open' || event.type === 'projects' || event.type === 'report') refresh(); });
-    return () => { stop(); refresh.cancel(); };
+    const stop = listenLive(events, (event) => {
+      if (event.type === 'open' || event.type === 'projects' || event.type === 'report') refresh();
+    });
+    return () => {
+      stop();
+      refresh.cancel();
+    };
   }, [address, client]);
-  return useQuery<Project[]>({ queryKey: ['projects', address], enabled: !!address, staleTime: 10_000,
-    refetchInterval: query => query.state.error?.message.includes('(404)') ? false : streaming ? 60_000 : 5000, refetchIntervalInBackground: true, retry: false,
+  return useQuery<Project[]>({
+    queryKey: ['projects', address],
+    enabled: !!address,
+    staleTime: 10000,
+    refetchInterval: (query) => (query.state.error?.message.includes('(404)') ? false : streaming ? 60000 : 5000),
+    refetchIntervalInBackground: true,
+    retry: false,
     queryFn: async ({ signal }) => {
       const response = await fetch(address!, { signal, cache: 'no-store' });
       if (!response.ok) throw new Error(`Projects unavailable (${response.status})`);
       return ProjectsSchema.parse(await response.json()).projects;
-    } });
+    }
+  });
 }
-
 export function ProjectPicker() {
   const address = runtimeUrl(runtimeConfig()?.projectsUrl);
   const selected = currentProject();
   const query = useProjects();
   useEffect(() => {
-    if (!selected && query.data?.length && !query.data.some(project => project.slug === 'default')) selectProject(query.data[0]!.slug);
+    if (!selected && query.data?.length && !query.data.some((project) => project.slug === 'default')) selectProject(query.data[0]!.slug);
   }, [selected, query.data]);
   if (!address) return null;
   const projects = query.data ?? [];
   const value = selected ?? 'default';
-  return <label className={styles.picker} data-project="true" title={query.error ? 'Project switching unavailable. Open View options for details.' : 'Switch project'}>
-    <span className="sr-only">Project</span>
-    <select className={styles.select} value={value} disabled={!projects.length} onChange={event => selectProject(event.target.value)} aria-busy={query.isLoading}>
-      {!projects.some(project => project.slug === value) && <option value={value}>{selected ?? (query.isLoading ? 'Loading projects…' : 'Default project')}</option>}
-      {projects.map(project => <option key={project.slug} value={project.slug}>{project.name}</option>)}
-    </select>
-  </label>;
+  return (
+    <Box
+      data-project="true"
+      title={query.error ? 'Project switching unavailable. Open View options for details.' : 'Switch project'}
+      component="label"
+    >
+      <VisuallyHidden>Project</VisuallyHidden>
+      <NativeSelect
+        aria-label="Project"
+        maw={{ base: '8rem', sm: '14rem' }}
+        value={value}
+        disabled={!projects.length}
+        onChange={(event) => selectProject(event.target.value)}
+        aria-busy={query.isLoading}
+      >
+        {!projects.some((project) => project.slug === value) && (
+          <option value={value}>{selected ?? (query.isLoading ? 'Loading projects…' : 'Default project')}</option>
+        )}
+        {projects.map((project) => (
+          <option key={project.slug} value={project.slug}>
+            {project.name}
+          </option>
+        ))}
+      </NativeSelect>
+    </Box>
+  );
 }
-
 /** One actionable error in the options menu, without duplicating alerts across the navigation. */
 export function ProjectNotice() {
   const query = useProjects();
   if (!query.error) return null;
-  return <div className={styles.notice} role="alert">
-    <p>Project switching is unavailable. {query.error.message.includes('(404)') ? 'Restart the Atlas server to load project support.' : 'The last available project list is shown.'}</p>
-    <button type="button" className={styles.sources} onClick={() => void query.refetch()}>Retry projects</button>
-  </div>;
+  return (
+    <Alert role="alert" color={'red'} my="sm">
+      <Text component="div">
+        Project switching is unavailable.{' '}
+        {query.error.message.includes('(404)')
+          ? 'Restart the Atlas server to load project support.'
+          : 'The last available project list is shown.'}
+      </Text>
+      <Button type="button" onClick={() => void query.refetch()} variant="light">
+        Retry projects
+      </Button>
+    </Alert>
+  );
 }