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/features/library/photos.js

@@ -181,6 +181,7 @@ const photosView = {
         html += '<div class="photos-sentinel"></div>';
         this._container.innerHTML = html;
         this._container.onclick = (e) => this._handleClick(e);
+        this._fadeInTiles();
         this._renderedCount = this.items.length;
         this._observeSentinel();
         this._setupVideoThumbnails();
@@ -237,6 +238,7 @@ const photosView = {
         this._renderedCount = this.items.length;
         this._observeSentinel();
         this._setupVideoThumbnails(startIndex);
+        this._fadeInTiles();
     },
 
     /**
@@ -250,12 +252,32 @@ const photosView = {
         const thumbUrl = cachedThumb || `/api/files/${file.id}/thumbnail/preview`;
         let h = `<div class="photo-tile${selected}" data-id="${this._escAttr(file.id)}" data-mime="${this._escAttr(file.mime_type)}" data-name="${this._escAttr(file.name)}">`;
         h += `<div class="photo-check"><i class="fas fa-check"></i></div>`;
-        h += `<img src="${thumbUrl}" loading="lazy" alt="${this._escAttr(file.name)}">`;
+        const srcset = cachedThumb
+            ? ''
+            : ` srcset="/api/files/${file.id}/thumbnail/icon 150w, /api/files/${file.id}/thumbnail/preview 400w, /api/files/${file.id}/thumbnail/large 800w" sizes="(max-width: 768px) 33vw, 200px"`;
+        h += `<img src="${thumbUrl}"${srcset} loading="lazy" decoding="async" alt="${this._escAttr(file.name)}">`;
         if (isVideo) h += `<div class="video-badge"><i class="fas fa-play"></i></div>`;
         h += `</div>`;
         return h;
     },
 
+    /**
+     * Fade tiles in as their thumbnails finish loading (kills the pop-in).
+     * Idempotent — only wires images not already marked loaded.
+     */
+    _fadeInTiles() {
+        this._container?.querySelectorAll('.photo-tile img:not(.is-loaded)').forEach((el) => {
+            const img = /** @type {HTMLImageElement} */ (el);
+            if (img.complete) {
+                img.classList.add('is-loaded');
+            } else {
+                const done = () => img.classList.add('is-loaded');
+                img.addEventListener('load', done, { once: true });
+                img.addEventListener('error', done, { once: true });
+            }
+        });
+    },
+
     /** (Re-)observe the sentinel element for infinite scroll */
     _observeSentinel() {
         this._destroyObserver();

static/js/features/library/photosLightbox.js

@@ -157,6 +157,17 @@ export const photosLightbox = {
         requestAnimationFrame(() => el.classList.add('active'));
     },
 
+    /** Preload the immediate prev/next thumbnails so navigation is instant. */
+    _preloadNeighbors() {
+        [this.index - 1, this.index + 1].forEach((i) => {
+            const it = this.items[i];
+            if (it && !it.mime_type?.startsWith('video/')) {
+                const pre = new Image();
+                pre.src = this._thumbUrl(it);
+            }
+        });
+    },
+
     /** Display the current item */
     _show() {
         if (!this._overlay || this.index < 0) return;
@@ -193,6 +204,9 @@ export const photosLightbox = {
         const fullResIcon = fullResBtn.querySelector('i');
         if (fullResIcon) fullResIcon.className = 'fas fa-expand';
 
+        // Preload neighbours so prev/next is instant.
+        this._preloadNeighbors();
+
         // Load content
         content.innerHTML = '<div class="photos-loading"><i class="fas fa-spinner"></i></div>';