@anchrd/intel-ui 0.12.0 → 0.14.0

package/src/i18n/i18n.types.ts

@@ -1,6 +1,49 @@
+// A catalog is a flat file of dotted keys → text. Flat, because the lookup is then a map read and
+// the completeness test compares two key sets instead of walking two trees. The reserved `$locale`
+// key carries the file's BCP-47 locale (the sigil keeps it out of the UI key namespace), so every
+// language file is self-describing and date/number formats need no second configuration.
 export type Catalog = Record<string, string>;
 
+// What `intel build` writes into src/i18n/custom.json: the starting language plus every language
+// file listed in the customer's intel.json. The runtime loads nothing on demand — WHICH languages
+// exist is decided at build time; only which one runs is the reader's choice.
+export interface CatalogBundle {
+  defaultLanguage: string;
+  catalogs: Record<string, Catalog>;
+}
+
+export interface I18nDeps {
+  // The active language file. Without one the UI runs on the English catalog (the default).
+  catalog?: Catalog;
+}
+
 export interface I18n {
   locale: string;
   t(key: string, variables?: Record<string, string | number>): string;
 }
+
+// The slice of the Web Storage API the preferences need — as a port, not a global, so a choice is
+// testable without a DOM and localStorage is touched in exactly one place per preference.
+export interface PreferenceStore {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+export interface LanguagesDeps {
+  store?: PreferenceStore;
+}
+
+export interface Languages {
+  // Every selectable code: the built-in ones first, then whatever the customer added.
+  codes: string[];
+  // The language the app starts in: the remembered choice, otherwise the bundle's default.
+  initial: string;
+  i18n(code: string): I18n;
+  remember(code: string): void;
+}
+
+export interface LanguageChoice {
+  codes: string[];
+  current: string;
+  select(code: string): void;
+}

package/src/main.tsx

@@ -7,18 +7,30 @@ import {
   loginPath,
 } from "@/data/intel-data-provider/intel-data-provider.ts";
 import { createBrowserSignIn, createSignInGuard } from "@/data/sign-in/sign-in.ts";
-import { createI18n } from "@/i18n/i18n.ts";
+import { I18nProvider } from "@/i18n/i18n-context.tsx";
+import { createLanguages } from "@/i18n/i18n-languages/i18n-languages.ts";
 import { createIntelRouter } from "@/router/router.tsx";
 import { SignInRefused } from "@/sign-in-refused/sign-in-refused.tsx";
-import { SystemThemeQuery, watchSystemTheme } from "@/theme/theme.ts";
+import { applyTheme, readThemeChoice, SystemThemeQuery, themeFor } from "@/theme/theme.ts";
+import { ThemeProvider } from "@/theme/theme-context.tsx";
+import { TimezoneProvider } from "@/timezone/timezone-context.tsx";
 import "./styles.css";
 import "./theme/custom.css";
 
-watchSystemTheme(document.documentElement, window.matchMedia(SystemThemeQuery));
+// The first paint, BEFORE React — otherwise the light shell flashes until the provider mounts. Only
+// applied here and deliberately NOT subscribed: the subscription belongs to the ThemeProvider, and
+// two of them would overwrite one another.
+applyTheme(
+  document.documentElement,
+  themeFor(readThemeChoice(window.localStorage), window.matchMedia(SystemThemeQuery).matches),
+);
 
 const root = document.getElementById("root");
 if (!root) throw new Error("Missing #root element");
-const i18n = createI18n();
+
+// Which languages exist is decided at build time and lies ready in the bundle; only which one runs
+// is the reader's choice, and that choice is remembered in localStorage.
+const languages = createLanguages({ store: window.localStorage });
 const signIn = createBrowserSignIn(loginPath);
 const mounted = createRoot(root);
 const queryClient = new QueryClient();
@@ -33,18 +45,27 @@ const data = createIntelDataProvider({
     paint();
   }),
 });
-const router = createIntelRouter({ data, i18n });
+const router = createIntelRouter({ data });
 
 function paint(): void {
   mounted.render(
     <StrictMode>
-      {refused ? (
-        <SignInRefused i18n={i18n} />
-      ) : (
-        <QueryClientProvider client={queryClient}>
-          <RouterProvider router={router} />
-        </QueryClientProvider>
-      )}
+      {/* The refusal screen sits INSIDE the providers too: it is text like any other, and it is the
+          one screen a reader sees when nothing else works — English-only there would be the worst
+          place for it. */}
+      <I18nProvider languages={languages}>
+        <ThemeProvider store={window.localStorage}>
+          <TimezoneProvider store={window.localStorage}>
+            {refused ? (
+              <SignInRefused />
+            ) : (
+              <QueryClientProvider client={queryClient}>
+                <RouterProvider router={router} />
+              </QueryClientProvider>
+            )}
+          </TimezoneProvider>
+        </ThemeProvider>
+      </I18nProvider>
     </StrictMode>,
   );
 }

package/src/modal/modal.tsx

@@ -1,7 +1,7 @@
 import { useId } from "react";
 import { Modal as AriaModal, Dialog, ModalOverlay } from "react-aria-components";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { cn } from "@/lib/utils.ts";
-import { useIntelRouterContext } from "@/router/router-context.ts";
 
 export function Modal({
   title,
@@ -14,7 +14,7 @@ export function Modal({
   children: React.ReactNode;
   className?: string;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const titleId = useId();
   return (
     <ModalOverlay

package/src/node-table/node-table.tsx

@@ -2,6 +2,7 @@ import type { Node } from "@anchrd/intel-contract";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Download } from "lucide-react";
 import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
 /**
@@ -16,7 +17,8 @@ import { useIntelRouterContext } from "@/router/router-context.ts";
  * the export does not contain.
  */
 export function NodeTablePanel({ node }: { node: Node }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const table = useQuery({
     queryKey: ["node-table", node.id],
     queryFn: () => data.getNodeTable(node.id),

package/src/nodes/nodes.tsx

@@ -9,6 +9,7 @@ import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { FolderContents } from "@/folder-contents/folder-contents.tsx";
 import { GraphPane } from "@/graph-pane/graph-pane.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { NodeTablePanel } from "@/node-table/node-table.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { graphViewFrom, selectedFrom } from "@/router/selection-search.ts";
@@ -24,7 +25,8 @@ const AgentPanel = lazy(async () => ({
 }));
 
 export function Nodes() {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   // The tree in the sidebar and the header search both name what to open through `?select=`, so this
@@ -187,7 +189,8 @@ export function Nodes() {
 }
 
 function AttachmentPanel({ node }: { node: Node }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const download = useMutation({
     mutationFn: () => data.getNodeAttachment(node.id),
     onSuccess: (blob) => {
@@ -227,7 +230,8 @@ function AttachmentPanel({ node }: { node: Node }) {
 }
 
 function VersionHistory({ nodeId, close }: { nodeId: string; close(): void }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const versions = useQuery({
     queryKey: ["node-versions", nodeId],
     queryFn: () => data.listNodeVersions(nodeId),

package/src/resource-menu/resource-menu.tsx

@@ -31,6 +31,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { flowEntry } from "@/data/intel-data-provider/intel-data-provider.ts";
 import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
@@ -133,7 +134,8 @@ export function ResourceMenu({
   target: ResourceTarget;
   variant: "row" | "title";
 }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const [renaming, setRenaming] = useState(false);
@@ -417,7 +419,7 @@ function RenameDialog({
   close(): void;
   submit(title: string): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const [next, setNext] = useState(title);
   const trimmed = next.trim();
   return (
@@ -469,7 +471,8 @@ function RenameDialog({
  * not enter is absent rather than shown without a name.
  */
 function NodeLinksPanel({ node, close }: { node: Node; close(): void }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const navigate = useNavigate();
   const links = useQuery({
     queryKey: ["node-links", node.id],
@@ -528,7 +531,8 @@ function NodeLinksPanel({ node, close }: { node: Node; close(): void }) {
 // server's answer, not this component's: `execute` never appears on a document, because a document
 // has nothing to run.
 function SharePanel({ node, close }: { node: Node; close(): void }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const queryClient = useQueryClient();
   const [email, setEmail] = useState("");
   const [verbs, setVerbs] = useState<ResourceVerb[]>(["read"]);

package/src/router/router.types.ts

@@ -1,7 +1,8 @@
 import type { IntelDataProvider } from "@/data/intel-data-provider/intel-data-provider.types.ts";
-import type { I18n } from "@/i18n/i18n.types.ts";
 
+// ⚠️ No `i18n` here, and it must not come back (#227). The router context is static: an instance
+// travelling in it can never change, which is why the language was unswitchable before. Text comes
+// from `useI18n()` and from nowhere else — two ways to the same string are two states that drift.
 export interface RouterContext {
   data: IntelDataProvider;
-  i18n: I18n;
 }

package/src/save-button/save-button.tsx

@@ -1,8 +1,8 @@
 import { useBlocker } from "@tanstack/react-router";
 import { Save } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { Modal } from "@/modal/modal.tsx";
-import { useIntelRouterContext } from "@/router/router-context.ts";
 
 /**
  * Saving, in the title line beside the name of the thing being saved (#24).
@@ -24,7 +24,7 @@ export function SaveButton({
   saving: boolean;
   onSave(): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const label = i18n.t(dirty ? "common.saveDirty" : "common.saved");
   return (
     <TooltipProvider delayDuration={300}>
@@ -71,7 +71,7 @@ export function SaveButton({
  * the other exit, the one the router never sees: closing the tab or reloading.
  */
 export function UnsavedChangesGuard({ dirty }: { dirty: boolean }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const blocker = useBlocker({
     shouldBlockFn: () => true,
     disabled: !dirty,

package/src/sign-in-refused/sign-in-refused.tsx

@@ -1,5 +1,5 @@
 import { ShieldAlert } from "lucide-react";
-import type { I18n } from "@/i18n/i18n.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 
 /**
  * What stands on the screen when signing in worked and the surface still says no (#118).
@@ -13,7 +13,8 @@ import type { I18n } from "@/i18n/i18n.types.ts";
  * the credential a second ago will refuse it again, and a page that keeps trying by itself is the
  * behaviour being fixed. Retrying is the reader's decision, and it costs them one click.
  */
-export function SignInRefused({ i18n }: { i18n: I18n }) {
+export function SignInRefused() {
+  const i18n = useI18n();
   return (
     <div role="alert" className="grid min-h-dvh place-items-center bg-background p-8">
       <div className="max-w-prose text-center">

package/src/theme/theme-context.tsx

@@ -0,0 +1,89 @@
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import {
+  applyTheme,
+  readThemeChoice,
+  rememberThemeChoice,
+  SystemThemeQuery,
+  type Theme,
+  type ThemeChoice,
+  themeFor,
+} from "./theme.ts";
+
+// The React seam of the theme, the same shape as i18n-context: the choice is client state (a
+// preference), so it lives locally and is remembered in the store.
+
+export interface ThemeSelection {
+  // What the reader chose — including "system", which is not a colour.
+  current: ThemeChoice;
+  // What is painted right now. The one consumer a CSS class cannot serve is a foreign library that
+  // paints from a prop instead of from our tokens (React Flow in flows.tsx), and it needs this
+  // resolved value rather than the choice.
+  resolved: Theme;
+  select(choice: ThemeChoice): void;
+}
+
+const ThemeContext = createContext<ThemeSelection | null>(null);
+
+function subscribeSystemTheme(onChange: () => void): () => void {
+  const media = window.matchMedia(SystemThemeQuery);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
+function systemPrefersDark(): boolean {
+  return window.matchMedia(SystemThemeQuery).matches;
+}
+
+interface ThemeProviderProps {
+  store?: Pick<Storage, "getItem" | "setItem">;
+  children: ReactNode;
+}
+
+export function ThemeProvider({ store, children }: ThemeProviderProps) {
+  const [choice, setChoice] = useState<ThemeChoice>(() => readThemeChoice(store));
+  // A subscription rather than a read, so a system switch mid-session moves the class AND the
+  // resolved value at once, without a reload.
+  const prefersDark = useSyncExternalStore(subscribeSystemTheme, systemPrefersDark, () => false);
+  const resolved = themeFor(choice, prefersDark);
+
+  // ⚠️ The class is written from the resolved value, so a fixed choice simply ignores `prefersDark`
+  // changing. That is why there is no second effect subscribing to the media query here: one source,
+  // one writer.
+  useEffect(() => {
+    applyTheme(document.documentElement, resolved);
+  }, [resolved]);
+
+  const selection = useMemo<ThemeSelection>(
+    () => ({
+      current: choice,
+      resolved,
+      select: (next) => {
+        rememberThemeChoice(next, store);
+        setChoice(next);
+      },
+    }),
+    [choice, resolved, store],
+  );
+
+  return <ThemeContext value={selection}>{children}</ThemeContext>;
+}
+
+// `null` without a provider — not a substitute value: the settings dialog asks precisely whether
+// there is anything to choose.
+export function useTheme(): ThemeSelection | null {
+  return useContext(ThemeContext);
+}
+
+// The painted theme as a value, for a library that takes it as a prop. Never null: a component tree
+// without a provider still has to draw something, and "light" is what an unstyled page is.
+export function useResolvedTheme(): Theme {
+  return useContext(ThemeContext)?.resolved ?? "light";
+}

package/src/theme/theme.ts

@@ -1,40 +1,70 @@
-import { useSyncExternalStore } from "react";
-
 export type Theme = "dark" | "light";
 
+// What a reader chooses is one level above what gets painted: "system" is not a colour, it is the
+// instruction to keep following the media query. That distinction is the reason for two types —
+// storing only `Theme` would make "light" and "light because the system is light" the same value,
+// with no way back.
+export type ThemeChoice = Theme | "system";
+
+// The order in the switcher. "system" first, because it is the shipped state.
+export const ThemeChoices: readonly ThemeChoice[] = ["system", "light", "dark"];
+
 // The one query the whole theme hangs off. Exported so that the `.dark` class and everything that
 // has to agree with it read the same string rather than two copies of it.
 export const SystemThemeQuery = "(prefers-color-scheme: dark)";
 
+// Next to `intel.language`: the same kind of preference, the same place.
+const STORE_KEY = "intel.theme";
+
 export function resolveTheme(prefersDark: boolean): Theme {
   return prefersDark ? "dark" : "light";
 }
 
-export function applyTheme(root: HTMLElement, theme: Theme): void {
-  root.classList.toggle("dark", theme === "dark");
+// What a choice means right now. The only place that resolves "system" — main.tsx and the provider
+// both ask here, so the first paint and every later one cannot drift apart.
+export function themeFor(choice: ThemeChoice, prefersDark: boolean): Theme {
+  return choice === "system" ? resolveTheme(prefersDark) : choice;
 }
 
-export function watchSystemTheme(root: HTMLElement, media: MediaQueryList): () => void {
-  applyTheme(root, resolveTheme(media.matches));
-  const onChange = (event: MediaQueryListEvent) => applyTheme(root, resolveTheme(event.matches));
-  media.addEventListener("change", onChange);
-  return () => media.removeEventListener("change", onChange);
+export function applyTheme(root: HTMLElement, theme: Theme): void {
+  root.classList.toggle("dark", theme === "dark");
 }
 
-function subscribeSystemTheme(onChange: () => void): () => void {
-  const media = window.matchMedia(SystemThemeQuery);
-  media.addEventListener("change", onChange);
-  return () => media.removeEventListener("change", onChange);
+// Read tolerantly: anything that is not one of the three choices is "system". A hand-edited value,
+// or one left behind by an older version, must not leave the UI without a theme — and "system" is
+// the answer that would apply with no stored choice at all.
+export function readThemeChoice(store?: Pick<Storage, "getItem">): ThemeChoice {
+  let stored: string | null = null;
+  // Reading `localStorage` throws outright in a few privacy modes, so the guard is a try, not a
+  // typeof check. Losing the preference is acceptable; losing the shell is not.
+  try {
+    stored = store?.getItem(STORE_KEY) ?? null;
+  } catch {
+    return "system";
+  }
+  const choices: readonly string[] = ThemeChoices;
+  return stored !== null && choices.includes(stored) ? (stored as ThemeChoice) : "system";
 }
 
-function systemTheme(): Theme {
-  return resolveTheme(window.matchMedia(SystemThemeQuery).matches);
+export function rememberThemeChoice(choice: ThemeChoice, store?: Pick<Storage, "setItem">): void {
+  try {
+    store?.setItem(STORE_KEY, choice);
+  } catch {
+    // A preference that cannot be written is still a preference for this session.
+  }
 }
 
-// The theme as a value, for the one consumer a CSS class cannot serve: a foreign library that
-// paints from a prop instead of from our tokens. It reads the same media query `watchSystemTheme`
-// puts the `.dark` class on the root from, so the two cannot drift apart — and because it is a
-// subscription rather than a read, a switch mid-session moves both at once, without a reload.
-export function useSystemTheme(): Theme {
-  return useSyncExternalStore(subscribeSystemTheme, systemTheme);
+// Wiring: apply the choice and — only for "system" — react to every system change. A fixed choice
+// deliberately does NOT subscribe: a listener that overrides the chosen theme the moment the
+// operating system switches is exactly the bug the choice removes.
+export function watchTheme(
+  root: HTMLElement,
+  media: MediaQueryList,
+  choice: ThemeChoice,
+): () => void {
+  applyTheme(root, themeFor(choice, media.matches));
+  if (choice !== "system") return () => {};
+  const onChange = (event: MediaQueryListEvent) => applyTheme(root, resolveTheme(event.matches));
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
 }

package/src/timezone/timezone-combobox/timezone-combobox.tsx

@@ -0,0 +1,149 @@
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useMemo, useState } from "react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils";
+import {
+  browserTimezone,
+  type TimezoneOption,
+  timezoneOption,
+  timezoneOptions,
+} from "../timezone.ts";
+
+/**
+ * Picking one of 418 timezones.
+ *
+ * ⚠️ A `Select` was the wrong shape and this replaces it (#243). Four hundred entries cannot be
+ * scrolled to, and a bare zone name does not say whether you got the right one — `Europe/Berlin`
+ * and `Europe/Madrid` are the same clock, `America/New_York` is not. So: type to search, and the
+ * current offset stands in front of every name.
+ *
+ * ⚠️ The label is computed here, at render time, and never stored. A zone's offset AND its
+ * abbreviation move with daylight saving, so a written-down label is wrong for half of every year.
+ */
+interface TimezoneComboboxProps {
+  id: string;
+  value: string;
+  onChange(zone: string): void;
+  /** Handed in rather than read from the clock, so a test does not have to travel in time. */
+  now?: Date;
+  describedBy?: string;
+}
+
+function OptionLabel({ option }: { option: TimezoneOption }) {
+  return (
+    <>
+      {/* Fixed width, so the zone names line up into a column instead of stepping left and right
+          with every offset. Tabular figures keep "GMT+05:30" and "GMT-04:00" the same width, and
+          ⚠️ `whitespace-nowrap` is not decoration: the longest label ("GMT-09:00 · HADT") wrapped
+          onto a second line and pushed its own row out of the column. */}
+      <span className="w-36 shrink-0 whitespace-nowrap text-xs tabular-nums text-muted-foreground">
+        {option.offsetLabel}
+        {option.abbreviation ? ` · ${option.abbreviation}` : ""}
+      </span>
+      <span className="truncate">{option.zone.replace(/_/g, " ")}</span>
+    </>
+  );
+}
+
+export function TimezoneCombobox({ id, value, onChange, now, describedBy }: TimezoneComboboxProps) {
+  const i18n = useI18n();
+  const [open, setOpen] = useState(false);
+  const at = now ?? new Date();
+  // The clock is a dependency on purpose: without it in the key, a session that crossed a DST
+  // boundary would keep showing yesterday's offsets.
+  const at_ = at.getTime();
+
+  const options = useMemo(
+    () => timezoneOptions(value, new Date(at_), i18n.locale),
+    [value, at_, i18n.locale],
+  );
+  const selected = useMemo(
+    () => timezoneOption(value, new Date(at_), i18n.locale),
+    [value, at_, i18n.locale],
+  );
+  // The reader's own zone, pinned above the list: it is the answer in the overwhelming majority of
+  // cases, and finding it in a sorted list of 418 is the work this saves.
+  const own = useMemo(
+    () => timezoneOption(browserTimezone(), new Date(at_), i18n.locale),
+    [at_, i18n.locale],
+  );
+
+  const choose = (zone: string) => {
+    onChange(zone);
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          id={id}
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          aria-describedby={describedBy}
+          className="flex w-full items-center gap-2 rounded-md border bg-background px-3 py-2 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <OptionLabel option={selected} />
+          <ChevronsUpDown aria-hidden="true" className="ml-auto size-4 shrink-0 opacity-50" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+        {/* ⚠️ A substring filter, not cmdk's default fuzzy one. Fuzzy matches a scattered
+            subsequence, so over 418 zones "berlin" also surfaced Brisbane, Dublin and Lisbon —
+            technically a match, useless as an answer. Prefix beats contains, so typing a city puts
+            that city first. An empty search returns 1 for everything, which leaves the list in DOM
+            order: sorted west to east. */}
+        <Command
+          filter={(value, search, keywords) => {
+            const needle = search.trim().toLowerCase();
+            if (!needle) return 1;
+            const haystack = [value.toLowerCase(), ...(keywords ?? [])];
+            if (haystack.some((word) => word.startsWith(needle))) return 2;
+            return haystack.some((word) => word.includes(needle)) ? 1 : 0;
+          }}
+        >
+          <CommandInput placeholder={i18n.t("settings.timezoneSearch")} />
+          <CommandList>
+            <CommandEmpty>{i18n.t("settings.timezoneNoMatch")}</CommandEmpty>
+            {own.zone !== value ? (
+              <CommandGroup heading={i18n.t("settings.timezoneOwn")}>
+                <CommandItem value={own.zone} keywords={own.keywords} onSelect={choose}>
+                  <OptionLabel option={own} />
+                </CommandItem>
+              </CommandGroup>
+            ) : null}
+            <CommandGroup heading={i18n.t("settings.timezoneAll")}>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.zone}
+                  value={option.zone}
+                  keywords={option.keywords}
+                  onSelect={choose}
+                >
+                  <OptionLabel option={option} />
+                  <Check
+                    aria-hidden="true"
+                    className={cn(
+                      "ml-auto size-4 shrink-0",
+                      option.zone === value ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}