feat: photo/video capture-date pipeline + premium UI/UX overhaul

Backend — Photos timeline now groups by real capture date instead of upload time. New MediaMetadataService (FileLifecycleHook) extracts EXIF DateTimeOriginal from images and container creation_time from videos (mov/mp4/mkv) via nom-exif, timezone-correct (OffsetTimeOriginal), persisting captured_at so the existing media_sort_date trigger takes over. Adds POST /admin/photos/metadata/reextract to backfill existing media. Falls back to upload date when no embedded date exists.

Frontend — premium grid cards: combined metadata line (relative date · size, owner avatar when shared), custom selection checkbox with a clear checked state, uniform full-width 4:3 thumbnail tiles independent of filename length, centered file-type icons, and a hit-test fix so checkbox/star/kebab clicks reach the controls (the decorative thumbnail no longer captures pointer events). Notification messages internationalised across all 16 locales. Broader polish: design tokens, a11y/focus-visible states, brand + PWA assets.

Chore — bump semver-compatible dependencies (cargo upgrade); add nom-exif 3.6.1.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

static/js/core/errorBoundary.js

@@ -0,0 +1,39 @@
+// Global error boundary.
+//
+// Surfaces uncaught errors and unhandled promise rejections as a terse,
+// throttled toast instead of failing silently — the full detail always goes to
+// the console. Intentionally dependency-free so an error handler can never
+// itself fail to load.
+
+let lastShown = 0;
+
+/** @param {string} message */
+function showToast(message) {
+    const now = Date.now();
+    if (now - lastShown < 4000) return; // throttle bursts of related errors
+    lastShown = now;
+
+    const el = document.createElement('div');
+    el.className = 'error-toast';
+    el.setAttribute('role', 'alert');
+    el.textContent = message;
+    document.body.appendChild(el);
+
+    requestAnimationFrame(() => el.classList.add('is-visible'));
+    setTimeout(() => {
+        el.classList.remove('is-visible');
+        setTimeout(() => el.remove(), 300);
+    }, 5000);
+}
+
+const GENERIC = 'Something went wrong. Please try again.';
+
+window.addEventListener('error', (event) => {
+    console.error('[error-boundary]', event.error || event.message);
+    showToast(GENERIC);
+});
+
+window.addEventListener('unhandledrejection', (event) => {
+    console.error('[error-boundary] unhandled rejection:', event.reason);
+    showToast(GENERIC);
+});

static/js/core/formatters.js

@@ -27,8 +27,11 @@ function formatFileSize(bytes) {
     const k = 1024;
     const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const num = new Intl.NumberFormat(i18n.getCurrentLocale(), { maximumFractionDigits: 2 }).format(
+        bytes / k ** i
+    );
 
-    return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+    return `${num} ${sizes[i]}`;
 }
 
 /// Formats a byte count for quota display. When bytes is 0, returns "∞" (unlimited).
@@ -58,7 +61,8 @@ function formatDateTime(value) {
         dateValue = new Date(value);
     }
     if (Number.isNaN(dateValue.getTime())) return String(value);
-    return `${dateValue.toLocaleDateString()} ${dateValue.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+    const loc = i18n.getCurrentLocale();
+    return `${dateValue.toLocaleDateString(loc)} ${dateValue.toLocaleTimeString(loc, { hour: '2-digit', minute: '2-digit' })}`;
 }
 
 /**
@@ -70,13 +74,44 @@ function formatDateShort(value) {
     if (!value) return 'N/A';
     const dateValue = typeof value === 'number' ? new Date(value * 1000) : new Date(value);
     if (Number.isNaN(dateValue.getTime())) return String(value);
-    return dateValue.toLocaleDateString(undefined, {
+    return dateValue.toLocaleDateString(i18n.getCurrentLocale(), {
         year: 'numeric',
         month: 'short',
         day: 'numeric'
     });
 }
 
+/**
+ * Locale-aware "time ago" via Intl.RelativeTimeFormat (replaces the per-view
+ * hand-rolled timeAgo helpers).
+ * @param {Date | number | string | null} value
+ * @returns {string}
+ */
+function formatRelativeTime(value) {
+    if (!value) return '';
+    const date =
+        value instanceof Date
+            ? value
+            : new Date(typeof value === 'number' && value < 1e12 ? value * 1000 : value);
+    if (Number.isNaN(date.getTime())) return String(value);
+    const diffSec = Math.round((date.getTime() - Date.now()) / 1000);
+    const abs = Math.abs(diffSec);
+    const rtf = new Intl.RelativeTimeFormat(i18n.getCurrentLocale(), { numeric: 'auto' });
+    /** @type {Array<[Intl.RelativeTimeFormatUnit, number]>} */
+    const units = [
+        ['year', 31536000],
+        ['month', 2592000],
+        ['week', 604800],
+        ['day', 86400],
+        ['hour', 3600],
+        ['minute', 60]
+    ];
+    for (const [unit, secs] of units) {
+        if (abs >= secs) return rtf.format(Math.round(diffSec / secs), unit);
+    }
+    return rtf.format(diffSec, 'second');
+}
+
 const TEXT_TYPES = [
     'application/json',
     'application/xml',
@@ -363,6 +398,7 @@ export {
     formatExpiryDate,
     formatFileSize,
     formatQuotaSize,
+    formatRelativeTime,
     isEmailValid,
     isTextViewable,
     normalizeDateBucket,

static/js/core/liveRegion.js

@@ -0,0 +1,61 @@
+/**
+ * Global ARIA live region.
+ *
+ * Announces transient UI messages (toasts, notifications) to assistive
+ * technology without any visual footprint. Screen-reader users otherwise
+ * miss feedback that sighted users see in the notification bell / toasts.
+ *
+ * Dependency-free; the region is created lazily on first use so importing
+ * this module has no DOM side effect until something is actually announced.
+ *
+ * @module core/liveRegion
+ */
+
+/** @type {HTMLElement | null} */
+let politeRegion = null;
+/** @type {HTMLElement | null} */
+let assertiveRegion = null;
+
+/**
+ * Find or create the visually-hidden live region for the given urgency.
+ * @param {boolean} assertive
+ * @returns {HTMLElement | null}
+ */
+function ensureRegion(assertive) {
+    if (!document.body) return null;
+    if (assertive && assertiveRegion) return assertiveRegion;
+    if (!assertive && politeRegion) return politeRegion;
+
+    const el = document.createElement('div');
+    el.className = 'sr-only';
+    el.id = assertive ? 'a11y-live-assertive' : 'a11y-live-polite';
+    el.setAttribute('aria-live', assertive ? 'assertive' : 'polite');
+    el.setAttribute('aria-atomic', 'true');
+    el.setAttribute('role', assertive ? 'alert' : 'status');
+    document.body.appendChild(el);
+
+    if (assertive) assertiveRegion = el;
+    else politeRegion = el;
+    return el;
+}
+
+/**
+ * Announce a message to screen readers.
+ *
+ * @param {string} message - text to announce (empty/whitespace is ignored)
+ * @param {{ assertive?: boolean }} [opts] - `assertive: true` interrupts the
+ *        current speech (use for errors); default is polite.
+ */
+export function announce(message, opts = {}) {
+    const msg = String(message ?? '').trim();
+    if (!msg) return;
+    const region = ensureRegion(Boolean(opts.assertive));
+    if (!region) return;
+
+    // Clear first, then set on the next frame so the DOM mutation is registered
+    // as a change even when the same message is announced twice in a row.
+    region.textContent = '';
+    requestAnimationFrame(() => {
+        region.textContent = msg;
+    });
+}