@data-club/ai-hub 0.0.2 → 0.0.4

package/src/styles/default.css

@@ -664,6 +664,85 @@
   text-decoration: none;
 }
 
+/* ── Language switcher (left of the user menu in the shell header) ────── */
+
+.data-club-ai-hub__language-switcher {
+  position: relative;
+}
+
+.data-club-ai-hub__language-switcher__button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  color: var(--dc-aih-fg);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--dc-aih-radius-md);
+  transition: background-color var(--dc-aih-transition),
+    border-color var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__language-switcher__button:hover {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+}
+
+.data-club-ai-hub__language-switcher__button:focus-visible {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+.data-club-ai-hub__language-switcher__icon {
+  font-size: var(--dc-aih-font-size-md);
+  line-height: 1;
+}
+
+.data-club-ai-hub__language-switcher__code {
+  font-size: var(--dc-aih-font-size-sm);
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
+.data-club-ai-hub__language-switcher__dropdown {
+  position: absolute;
+  right: 0;
+  top: calc(100% + var(--dc-aih-space-xs));
+  min-width: 160px;
+  padding: var(--dc-aih-space-sm) 0;
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  z-index: 30;
+}
+
+.data-club-ai-hub__language-switcher__item {
+  display: block;
+  width: 100%;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  text-align: left;
+  color: var(--dc-aih-fg);
+  background: transparent;
+  border: none;
+}
+
+.data-club-ai-hub__language-switcher__item:hover {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+}
+
+.data-club-ai-hub__language-switcher__item:focus-visible {
+  outline: none;
+  background-color: color-mix(in srgb, var(--dc-aih-accent) 12%, transparent);
+}
+
+.data-club-ai-hub__language-switcher__item--active {
+  font-weight: 600;
+  color: var(--dc-aih-accent);
+}
+
 /* ────────────────────────────────────────────────────────────────────── */
 /*  Admin shell + Users sub-page — Step 11                               */
 /*  ui-sketches/04-admin-overview.md, ui-sketches/05-admin-users.md      */

package/src/types.ts

@@ -16,6 +16,8 @@
  * @see SPECIFICATIONS.md §11 — data model
  */
 
+import type { AIHubLanguage } from "./auth/texts.js";
+
 /* ────────────────────────────────────────────────────────────────────────── */
 /*  Roles + users                                                             */
 /* ────────────────────────────────────────────────────────────────────────── */
@@ -98,6 +100,18 @@ export interface AIHubDeployment {
    * `user.theme_preference`.
    */
   theme_switcher_enabled: boolean;
+  /**
+   * Default UI language for the deployment (`en` | `cs` | `sk`). Seeds a
+   * user's language when they have no per-device choice cached, and is the
+   * only language used when `user_language_locked` is true.
+   */
+  language_default: AIHubLanguage;
+  /**
+   * When `true`, the deployment is single-language — `AIHub.LanguageSwitcher`
+   * is hidden and every user sees `language_default` regardless of any cached
+   * per-device choice.
+   */
+  user_language_locked: boolean;
   /**
    * Browser-facing URL of the self-hosted Letta ADE — only present when the
    * caller's role is `power_user` or higher. Absent for `user`-role callers.

package/src/util/relativeTime.ts

@@ -0,0 +1,90 @@
+/**
+ * Locale-aware relative-time / date helpers.
+ *
+ * These replace the three hand-rolled English `"N min ago"` / `"yesterday"`
+ * formatters (sessions panel, admin sessions overview, admin settings). They
+ * delegate to the platform `Intl.RelativeTimeFormat` / `Intl.DateTimeFormat`,
+ * which know each language's CLDR plural rules for free — important for
+ * Czech / Slovak where the count word changes between 1, 2–4 and 5+ ("1
+ * minúta" / "2 minúty" / "5 minút"), something a flat `"{n} min ago"`
+ * template can't express.
+ *
+ * @see ../auth/texts.ts — `AIHubLanguage`
+ */
+
+import type { AIHubLanguage } from "../auth/texts.js";
+
+/**
+ * Formats an ISO-8601 timestamp as a short relative string in `language`,
+ * e.g. `"now"` / `"5 minutes ago"` / `"yesterday"` / `"3 days ago"` (and the
+ * Czech / Slovak equivalents).
+ *
+ * @param iso - ISO timestamp. Returns `""` for an unparseable value.
+ * @param language - the active UI language.
+ * @param opts.absoluteAfterDays - when set and the timestamp is at least this
+ *   many days old, returns a short absolute date instead (used by the admin
+ *   sessions overview, which falls back to a date after a week).
+ * @returns the localized relative-time string.
+ */
+export function formatRelativeTime(
+  iso: string,
+  language: AIHubLanguage,
+  opts: { absoluteAfterDays?: number } = {},
+): string {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) return "";
+  const diffMs = Date.now() - then;
+  const rtf = new Intl.RelativeTimeFormat(language, { numeric: "auto" });
+  const minutes = Math.round(diffMs / 60_000);
+  if (minutes < 1) return rtf.format(0, "second"); // locale "now"
+  if (minutes < 60) return rtf.format(-minutes, "minute");
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return rtf.format(-hours, "hour");
+  const days = Math.round(hours / 24);
+  if (
+    opts.absoluteAfterDays !== undefined &&
+    days >= opts.absoluteAfterDays
+  ) {
+    return formatAbsoluteDate(iso, language);
+  }
+  return rtf.format(-days, "day");
+}
+
+/**
+ * Formats an ISO timestamp as a short, locale-formatted absolute date
+ * (e.g. `2026-06-08` → `08/06/2026` in en-GB style, `8. 6. 2026` in cs).
+ *
+ * @param iso - ISO timestamp. Returns the raw input for an unparseable value.
+ * @param language - the active UI language.
+ * @returns the localized date string.
+ */
+export function formatAbsoluteDate(
+  iso: string,
+  language: AIHubLanguage,
+): string {
+  const ts = Date.parse(iso);
+  if (Number.isNaN(ts)) return iso;
+  return new Intl.DateTimeFormat(language, { dateStyle: "short" }).format(
+    new Date(ts),
+  );
+}
+
+/**
+ * Day-granular relative label — `"today"` / `"yesterday"` / `"N days ago"`
+ * (localized). Used for the admin settings rotation stamp, which pairs an
+ * absolute date with this parenthetical.
+ *
+ * @param iso - ISO timestamp.
+ * @param language - the active UI language.
+ * @returns the localized day-relative label, or `""` when unparseable.
+ */
+export function formatRelativeDay(
+  iso: string,
+  language: AIHubLanguage,
+): string {
+  const ts = Date.parse(iso);
+  if (Number.isNaN(ts)) return "";
+  const diffDays = Math.floor((Date.now() - ts) / (24 * 60 * 60 * 1000));
+  const rtf = new Intl.RelativeTimeFormat(language, { numeric: "auto" });
+  return rtf.format(-Math.max(0, diffDays), "day");
+}