@anchrd/intel-ui 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

package/src/agent/agent-profile/agent-profile.tsx

@@ -32,7 +32,7 @@ import { EntryPicker, type PickerKind } from "@/entry-picker/entry-picker.tsx";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
-import { availableTimezones } from "@/timezone/timezone.ts";
+import { TimezoneCombobox } from "@/timezone/timezone-combobox/timezone-combobox.tsx";
 import { useTimezone } from "@/timezone/timezone-context.tsx";
 
 // No dividers between sections — the space is the separation (#204). The explanation sits behind
@@ -660,8 +660,6 @@ function ScheduleDialog({ close, add }: { close(): void; add(schedule: AgentSche
   // means the same hour to everybody else reading the agent.
   const preferred = useTimezone();
   const [timezone, setTimezone] = useState(preferred);
-  const zones = availableTimezones();
-  const options = zones.includes(timezone) ? zones : [timezone, ...zones];
   const [target, setTarget] = useState<{ id: string; kind: "document" | "flow" } | null>(null);
 
   return (
@@ -692,19 +690,12 @@ function ScheduleDialog({ close, add }: { close(): void; add(schedule: AgentSche
         <label className="block text-sm font-medium" htmlFor="agent-schedule-timezone">
           {i18n.t("agent.scheduleTimezone")}
         </label>
-        <select
+        <TimezoneCombobox
           id="agent-schedule-timezone"
           value={timezone}
-          onChange={(event) => setTimezone(event.target.value)}
-          aria-describedby="agent-timezone-hint"
-          className="-mt-2 w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          {options.map((zone) => (
-            <option key={zone} value={zone}>
-              {zone.replace(/_/g, " ")}
-            </option>
-          ))}
-        </select>
+          onChange={setTimezone}
+          describedBy="agent-timezone-hint"
+        />
         <span id="agent-timezone-hint" className="-mt-2 block text-xs text-muted-foreground">
           {i18n.t("agent.scheduleTimezoneHint")}
         </span>

package/src/app/settings-dialog/settings-dialog.tsx

@@ -16,7 +16,7 @@ import { useI18n, useLanguage } from "@/i18n/i18n-context.tsx";
 import { languageName } from "@/i18n/i18n-languages/i18n-languages.ts";
 import { type ThemeChoice, ThemeChoices } from "@/theme/theme.ts";
 import { useTheme } from "@/theme/theme-context.tsx";
-import { availableTimezones, browserTimezone } from "@/timezone/timezone.ts";
+import { TimezoneCombobox } from "@/timezone/timezone-combobox/timezone-combobox.tsx";
 import { useTimezoneSelection } from "@/timezone/timezone-context.tsx";
 
 // The settings that belong to the person rather than to the installation: language, appearance and
@@ -38,18 +38,6 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
   const theme = useTheme();
   const timezone = useTimezoneSelection();
 
-  // ⚠️ The active zone is put in front of the list unless it is already there, and that is not
-  // belt-and-braces: `Intl.supportedValuesOf("timeZone")` returns only CANONICAL IANA names, and
-  // "UTC" is not among them (it is an alias of Etc/UTC). A reader whose browser reports "UTC" —
-  // every CI machine, plenty of containers and servers — would otherwise get a Select whose value
-  // matches no item, and Radix renders that as an EMPTY field. Found by CI, not by the test.
-  //
-  // The same line covers the engine without `supportedValuesOf` at all: the list is empty and the
-  // reader still has their own zone to look at.
-  const zones = availableTimezones();
-  const current = timezone?.current ?? browserTimezone();
-  const options = zones.includes(current) ? zones : [current, ...zones];
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
@@ -109,21 +97,15 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
               <label className="text-sm font-medium" htmlFor="settings-timezone">
                 {i18n.t("settings.timezone")}
               </label>
-              <Select value={timezone.current} onValueChange={timezone.select}>
-                <SelectTrigger id="settings-timezone" className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                {/* Several hundred zones: the list scrolls, and Radix keeps the selected one in
-                    view when it opens. */}
-                <SelectContent className="max-h-72">
-                  {options.map((zone) => (
-                    <SelectItem key={zone} value={zone}>
-                      {zone.replace(/_/g, " ")}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <p className="text-xs text-muted-foreground">{i18n.t("settings.timezoneHint")}</p>
+              <TimezoneCombobox
+                id="settings-timezone"
+                value={timezone.current}
+                onChange={timezone.select}
+                describedBy="settings-timezone-hint"
+              />
+              <p id="settings-timezone-hint" className="text-xs text-muted-foreground">
+                {i18n.t("settings.timezoneHint")}
+              </p>
             </div>
           ) : null}
         </div>

package/src/components/ui/popover.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Popover as PopoverPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/src/i18n/de.json

@@ -379,6 +379,10 @@
   "settings.appearance.dark": "Dunkel",
   "settings.timezone": "Zeitzone",
   "settings.timezoneHint": "Zum Lesen von Zeiten, und als Vorschlag, wenn du einem Agenten einen Zeitplan gibst. Ein Zeitplan behält die Zeitzone, die er bekommen hat — eine Reise verschiebt also keine Läufe, die du bereits gesetzt hast.",
+  "settings.timezoneSearch": "Stadt, Zone oder Versatz suchen …",
+  "settings.timezoneNoMatch": "Keine Zeitzone passt.",
+  "settings.timezoneOwn": "Dein Gerät",
+  "settings.timezoneAll": "Alle Zeitzonen",
   "auth.signOut": "Abmelden",
   "auth.signOutFailed": "Das Abmelden ist fehlgeschlagen. Prüfe deine Verbindung und versuche es erneut.",
   "signIn.refusedTitle": "Angemeldet, aber nicht angenommen",

package/src/i18n/en.json

@@ -379,6 +379,10 @@
   "settings.appearance.dark": "Dark",
   "settings.timezone": "Timezone",
   "settings.timezoneHint": "Used to read times, and suggested when you give an agent a schedule. A schedule keeps the timezone it was given, so travelling does not move the runs you already set.",
+  "settings.timezoneSearch": "Search city, zone or offset…",
+  "settings.timezoneNoMatch": "No timezone matches.",
+  "settings.timezoneOwn": "Your device",
+  "settings.timezoneAll": "All timezones",
   "auth.signOut": "Sign out",
   "auth.signOutFailed": "Signing out failed. Check your connection and try again.",
   "signIn.refusedTitle": "Signed in, but not accepted",

package/src/i18n/es.json

@@ -379,6 +379,10 @@
   "settings.appearance.dark": "Oscuro",
   "settings.timezone": "Zona horaria",
   "settings.timezoneHint": "Se usa para leer las horas y se propone cuando le das un horario a un agente. Un horario conserva la zona con la que se creó, así que viajar no mueve las ejecuciones que ya has fijado.",
+  "settings.timezoneSearch": "Buscar ciudad, zona o desfase…",
+  "settings.timezoneNoMatch": "Ninguna zona horaria coincide.",
+  "settings.timezoneOwn": "Tu dispositivo",
+  "settings.timezoneAll": "Todas las zonas horarias",
   "auth.signOut": "Cerrar sesión",
   "auth.signOutFailed": "El cierre de sesión ha fallado. Comprueba tu conexión e inténtalo de nuevo.",
   "signIn.refusedTitle": "Sesión iniciada, pero no aceptada",

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>
+  );
+}

package/src/timezone/timezone.ts

@@ -58,3 +58,102 @@ export function rememberTimezone(zone: string, store?: Pick<Storage, "setItem">)
     // A preference that cannot be written is still a preference for this session.
   }
 }
+
+/** One zone as the picker shows it. Everything here is derived, nothing is stored. */
+export interface TimezoneOption {
+  zone: string;
+  /** "GMT+02:00", "GMT-04:00", "GMT" — present for every zone, which is why it carries the column. */
+  offsetLabel: string;
+  /** "MESZ", "JST" … or null where the runtime only repeats the offset. */
+  abbreviation: string | null;
+  /** Minutes east of UTC at `at`, for sorting. */
+  offsetMinutes: number;
+  /** What the search matches on, lowercased. */
+  keywords: string[];
+}
+
+function part(zone: string, style: "short" | "longOffset", at: Date, locale: string): string {
+  try {
+    return (
+      new Intl.DateTimeFormat(locale, { timeZone: zone, timeZoneName: style })
+        .formatToParts(at)
+        .find((piece) => piece.type === "timeZoneName")?.value ?? ""
+    );
+  } catch {
+    return "";
+  }
+}
+
+// "GMT+02:00" → 120, "GMT-04:00" → -240, "GMT" → 0. Read from the same string the label shows, so
+// the sort order and the text can never tell different stories.
+function minutesFrom(offsetLabel: string): number {
+  const match = /^GMT([+-])(\d{2}):(\d{2})$/.exec(offsetLabel);
+  if (!match) return 0;
+  const [, sign, hours, minutes] = match;
+  const total = Number(hours) * 60 + Number(minutes);
+  return sign === "-" ? -total : total;
+}
+
+/**
+ * The label of one zone, at a given moment.
+ *
+ * ⚠️ Computed at display time and never stored. A zone's offset AND its abbreviation move with
+ * daylight saving — Berlin is MEZ/+01:00 in January and MESZ/+02:00 in July — so a label written
+ * into a field would be wrong for half of every year.
+ *
+ * ⚠️ The abbreviation is dropped where `Intl` only echoes the offset — and WHICH zones have one
+ * depends on the READER'S LANGUAGE, not on the zone. CLDR ships short names only where a locale has
+ * its own word for that zone: a German reader gets "MEZ/MESZ" for Berlin and a bare "GMT-4" for New
+ * York; an English reader gets "EST/EDT" for New York and a bare "GMT+2" for Berlin. That is the
+ * useful way round — you get the abbreviation for the zones your language actually names — but it
+ * means this function's output is not the same in two languages, and a test has to say which one it
+ * is asserting. `Asia/Kolkata` has none in either ("GMT+5:30"), which is the common case worldwide.
+ */
+export function timezoneOption(zone: string, at: Date, locale: string): TimezoneOption {
+  const offsetLabel = part(zone, "longOffset", at, locale) || "GMT";
+  const short = part(zone, "short", at, locale);
+  // Dropped when it repeats the offset, and also when it repeats the zone's own name: "UTC" would
+  // otherwise render as "GMT · UTC   UTC", which stutters without adding anything.
+  const abbreviation =
+    short && !short.startsWith("GMT") && short !== offsetLabel && short !== zone ? short : null;
+  const city = zone.split("/").pop()?.replace(/_/g, " ") ?? zone;
+  return {
+    zone,
+    offsetLabel,
+    abbreviation,
+    offsetMinutes: minutesFrom(offsetLabel),
+    // The offset appears twice on purpose: as written ("GMT+02:00") and as typed ("+2"), because
+    // nobody searches for the leading zero.
+    keywords: [zone, city, offsetLabel, abbreviation ?? "", shorthandOffset(offsetLabel)]
+      .filter(Boolean)
+      .map((word) => word.toLowerCase()),
+  };
+}
+
+// "GMT+02:00" → "+2", "GMT+05:30" → "+5:30", "GMT" → "+0". What a person types.
+function shorthandOffset(offsetLabel: string): string {
+  const match = /^GMT([+-])(\d{2}):(\d{2})$/.exec(offsetLabel);
+  if (!match) return "+0";
+  const [, sign, hours, minutes] = match;
+  return `${sign}${Number(hours)}${minutes === "00" ? "" : `:${minutes}`}`;
+}
+
+/**
+ * Every selectable zone, sorted west to east.
+ *
+ * ⚠️ `current` is folded in even when `supportedValuesOf` does not list it. That is not a corner
+ * case: the list holds only CANONICAL names, and "UTC" is not one of them (it is an alias of
+ * Etc/UTC) — so the zone every CI machine and many servers report would otherwise be missing from
+ * the picker that is supposed to be showing it.
+ */
+export function timezoneOptions(current: string, at: Date, locale: string): TimezoneOption[] {
+  const zones = availableTimezones();
+  const all = zones.includes(current) ? zones : [current, ...zones];
+  return all
+    .map((zone) => timezoneOption(zone, at, locale))
+    .sort((left, right) =>
+      left.offsetMinutes === right.offsetMinutes
+        ? left.zone.localeCompare(right.zone)
+        : left.offsetMinutes - right.offsetMinutes,
+    );
+}