@anchrd/intel-ui 0.13.0 → 0.15.0

package/src/timezone/timezone.ts

@@ -39,16 +39,31 @@ export function isKnownTimezone(zone: string): boolean {
   }
 }
 
-// A stored zone the engine no longer knows is discarded rather than kept: IANA renames zones, and a
-// name that stopped resolving would otherwise throw on every date the calendar draws.
-export function readTimezone(store?: Pick<Storage, "getItem">): string {
+/**
+ * The zone the reader actually CHOSE, or `null` when they never did.
+ *
+ * ⚠️ The difference from `readTimezone` is the whole reason this exists (#256). A screen that wants
+ * to add "…and this is what it says on your clock" may only do so for a zone somebody set: falling
+ * back to the browser would put a guess on screen dressed as a preference, and the agent's calendar
+ * would start annotating every schedule for a reader who never asked for it.
+ *
+ * A stored zone the engine no longer knows counts as "never chose": IANA renames zones, and a name
+ * that stopped resolving would otherwise throw on every date the calendar draws.
+ */
+export function readChosenTimezone(store?: Pick<Storage, "getItem">): string | null {
   let stored: string | null = null;
   try {
     stored = store?.getItem(STORE_KEY) ?? null;
   } catch {
-    return browserTimezone();
+    return null;
   }
-  return stored !== null && isKnownTimezone(stored) ? stored : browserTimezone();
+  return stored !== null && isKnownTimezone(stored) ? stored : null;
+}
+
+// The zone to read times in — the choice, and the browser's own where there is none. Never null: a
+// component that has to format a date needs an answer, and the browser's is the honest one.
+export function readTimezone(store?: Pick<Storage, "getItem">): string {
+  return readChosenTimezone(store) ?? browserTimezone();
 }
 
 export function rememberTimezone(zone: string, store?: Pick<Storage, "setItem">): void {
@@ -58,3 +73,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,
+    );
+}

package/src/title-row/title-row.tsx

@@ -11,10 +11,11 @@ import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu
  * the rule could be forgotten. That is the whole point: the menu holds rename, move, share and
  * archive, and a position one has to look for is a position one stops using.
  *
- * The two slots are for what belongs to this thing but lives further down the tree, where its state
- * is. `title-meta` is a quiet word beside the name (a table's row count); `title-actions` is a
- * button in the group (saving a document, exporting a table). Both are filled through `ActionSlot`
- * and both sit before the menu for the same reason `children` do.
+ * The three slots are for what belongs to this thing but lives further down the tree, where its
+ * state is. `title-meta` is a quiet word beside the name (a table's row count); `title-byline` is a
+ * quiet line under it (who made an agent, #258); `title-actions` is a button in the group (saving a
+ * document, exporting a table). All are filled through `ActionSlot`, and the two in the group sit
+ * before the menu for the same reason `children` do.
  */
 export function TitleRow({
   title,
@@ -47,6 +48,10 @@ export function TitleRow({
             <h2 className="truncate text-lg font-semibold">{title}</h2>
             <span data-slot="title-meta" className="text-sm text-muted-foreground" />
           </div>
+          {/* ⚠️ `empty:hidden` is the whole rule for "no line rather than an empty one": nothing is
+              portalled in here for most kinds, and a slot that kept its margin would make every
+              head a few pixels taller for a line nobody wrote (#258). */}
+          <span data-slot="title-byline" className="mt-0.5 block min-w-0 empty:hidden" />
           {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
         </div>
       </div>

package/src/user-name/user-name.ts

@@ -0,0 +1,41 @@
+import type { SessionUser } from "@anchrd/intel-contract";
+import { useQuery } from "@tanstack/react-query";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * The signed-in person, from the one query the shell already makes.
+ *
+ * ⚠️ The same query key the user footer uses, so asking here costs no second request — and the two
+ * can never disagree about who is signed in.
+ */
+export function useSessionUser(): SessionUser | null {
+  const { data } = useIntelRouterContext();
+  const session = useQuery({ queryKey: ["session"], queryFn: () => data.getSession() });
+  return session.data ?? null;
+}
+
+/** What a person is CALLED, by the same rule the user footer follows: the name, or the address. */
+export function displayNameOf(user: SessionUser): string {
+  return user.name ?? user.email;
+}
+
+/**
+ * The display name behind a user id — or `null` where this browser cannot say.
+ *
+ * ⚠️ Today it can say for exactly one id: the signed-in person's. Intel has no user directory —
+ * `/session` answers from the token's own subject and deliberately carries nothing else, and the
+ * Gate SDK Intel holds (`authorize`, `interfaces`) has no lookup either. So a foreign id is not
+ * "probably a person whose name we could guess": it is unresolvable, and every caller here has to
+ * treat it as such.
+ *
+ * ⚠️ Never fall back to the id. An id under a name is not an answer to "who made this", it is the
+ * question again in smaller type — and it would leak an identifier onto a screen that has no reason
+ * to carry one. Callers show nothing instead (#258).
+ *
+ * This is the ONE place that changes when Intel gains a way to resolve a name (#261).
+ */
+export function useUserName(userId: string | null): string | null {
+  const me = useSessionUser();
+  if (userId === null || me === null || me.id !== userId) return null;
+  return displayNameOf(me);
+}

package/tsconfig.json

@@ -7,5 +7,11 @@
     "paths": { "@/*": ["src/*"] },
     "types": ["vite/client"]
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "vite.config.ts",
+    "vitest.config.ts",
+    "vitest.setup.ts"
+  ]
 }