feat(admin): add asset picker with favorites, drag-and-drop reordering, preview links, and keyboard shortcuts

- Asset Picker: Visual browser for hero images with Favorites tab (shown first) and All Photos tab. Includes infinite scroll and UUID fallback input for assets not easily found in the grid. - Drag & Drop: All lists (hero images, standalone albums, subpage albums, subpage tiles) are now reorderable via drag handles using @dnd-kit. - Preview Links: 'Preview Site' button in save bar, '↗ Site' in header, and per-subpage preview links with URL slug preview shown inline. - Keyboard Shortcuts: ⌘+S / Ctrl+S to save in both Pages and Settings tabs. - Unsaved Changes Guard: beforeunload warning prevents accidental data loss. - New API route /api/admin/assets for browsing Immich assets with pagination and favorites filter via search/metadata endpoint.
2026-05-29 17:59:25 +02:00
parent 2e4cde4b6e
commit e8e65e7172
8 changed files with 1075 additions and 174 deletions
--- a/app/admin/admin.css
+++ b/app/admin/admin.css
@@ -1120,6 +1120,245 @@
  cursor: pointer;
 }

+/* ── Asset Picker (Hero) ───────────────────────────────────── */
+
+.asset-picker-modal {
+  width: 100%;
+  max-width: 720px;
+  max-height: 85vh;
+  background: var(--admin-bg-raised);
+  border: 1px solid var(--admin-border);
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.asset-picker-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.asset-picker-tab {
+  flex: 1;
+  padding: 0.7rem 1rem;
+  background: none;
+  border: none;
+  color: var(--admin-text-muted);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  border-bottom: 2px solid transparent;
+}
+
+.asset-picker-tab:hover {
+  color: var(--admin-text-secondary);
+  background: var(--admin-bg-elevated);
+}
+
+.asset-picker-tab.active {
+  color: var(--admin-text);
+  border-bottom-color: var(--admin-accent);
+}
+
+.asset-picker-grid {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.75rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 0.5rem;
+  align-content: start;
+}
+
+.asset-picker-loading {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+}
+
+.asset-picker-loading-more {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.asset-picker-tile {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  background: var(--admin-bg-elevated);
+  border: 2px solid transparent;
+  transition: border-color 0.15s, transform 0.1s;
+}
+
+.asset-picker-tile:hover:not(.used) {
+  border-color: var(--admin-accent);
+  transform: scale(1.03);
+}
+
+.asset-picker-tile.used {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.asset-picker-tile img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.asset-picker-used-badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--admin-accent);
+  color: #000;
+  font-size: 0.7rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+}
+
+.asset-picker-fav-badge {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  font-size: 0.7rem;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+.asset-picker-uuid-section {
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--admin-border);
+  background: var(--admin-bg);
+}
+
+.asset-picker-uuid-form {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.asset-picker-uuid-input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  background: var(--admin-bg-input);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  color: var(--admin-text);
+  font-size: 0.8rem;
+  font-family: monospace;
+}
+
+.asset-picker-uuid-input:focus {
+  outline: none;
+  border-color: var(--admin-border-focus);
+}
+
+.asset-picker-uuid-error {
+  font-size: 0.7rem;
+  color: var(--admin-error);
+  margin-top: 0.3rem;
+  display: block;
+}
+
+/* ── Drag Handles ──────────────────────────────────────────── */
+
+.hero-tile-drag,
+.album-tile-drag,
+.subpage-tile-drag {
+  position: absolute;
+  z-index: 5;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.8);
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  border-radius: 4px;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.15s;
+  user-select: none;
+  touch-action: none;
+}
+
+.hero-tile-drag:active,
+.album-tile-drag:active,
+.subpage-tile-drag:active {
+  cursor: grabbing;
+}
+
+.hero-tile-drag {
+  top: 6px;
+  left: 6px;
+}
+
+.album-tile-drag {
+  top: 6px;
+  left: 6px;
+}
+
+.subpage-tile-drag {
+  top: 6px;
+  left: 6px;
+}
+
+.hero-tile:hover .hero-tile-drag,
+.album-tile:hover .album-tile-drag,
+.subpage-tile:hover .subpage-tile-drag {
+  opacity: 1;
+}
+
+/* ── Preview & Slug ───────────────────────────────────────────── */
+
+.subpage-slug-preview {
+  font-size: 0.72rem;
+  color: var(--admin-text-muted);
+  font-family: monospace;
+  padding: 0.15rem 0.4rem;
+  background: var(--admin-bg);
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.save-bar-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.admin-btn-preview {
+  font-size: 0.8rem;
+  padding: 0.4rem 0.8rem;
+  text-decoration: none;
+}
+
+.save-hint {
+  font-size: 0.7rem;
+  color: var(--admin-text-muted);
+}
+
+/* ── Danger icon button ───────────────────────────────────────── */
+
+.admin-btn-icon-danger:hover {
+  color: var(--admin-error) !important;
+}
+
 /* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 768px) {
--- a/app/admin/components/AdminDashboard.tsx
+++ b/app/admin/components/AdminDashboard.tsx
@@ -49,6 +49,15 @@ export default function AdminDashboard({ onLogout }: Props) {
          </nav>
        </div>
        <div className="admin-header-right">
+          <a
+            href="/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="admin-btn admin-btn-ghost"
+            title="Open site in new tab"
+          >
+            ↗ Site
+          </a>
          <button
            className="admin-btn admin-btn-ghost"
            onClick={handleReload}
--- a/app/admin/components/AssetPicker.tsx
+++ b/app/admin/components/AssetPicker.tsx
@@ -0,0 +1,192 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+interface AssetInfo {
+  id: string;
+  originalFileName: string;
+  fileCreatedAt: string;
+  isFavorite: boolean;
+}
+
+interface Props {
+  onSelect: (assetId: string) => void;
+  onClose: () => void;
+  currentAssetIds?: string[];
+}
+
+type Tab = 'favorites' | 'all';
+
+export default function AssetPicker({ onSelect, onClose, currentAssetIds = [] }: Props) {
+  const [tab, setTab] = useState<Tab>('favorites');
+  const [assets, setAssets] = useState<AssetInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+  const [uuidInput, setUuidInput] = useState('');
+  const [uuidError, setUuidError] = useState('');
+  const listRef = useRef<HTMLDivElement>(null);
+  const currentIds = new Set(currentAssetIds);
+
+  const loadAssets = useCallback(
+    async (pageNum: number, append: boolean = false) => {
+      if (pageNum === 1) setLoading(true);
+      else setLoadingMore(true);
+
+      try {
+        const params = new URLSearchParams({
+          page: pageNum.toString(),
+          favorites: tab === 'favorites' ? 'true' : 'false',
+        });
+
+        const res = await fetch(`/api/admin/assets?${params}`);
+        if (res.ok) {
+          const data = await res.json();
+          setAssets((prev) => (append ? [...prev, ...data.assets] : data.assets));
+          setHasMore(data.nextPage !== null);
+          setPage(pageNum);
+        }
+      } catch (err) {
+        console.error('Failed to load assets:', err);
+      } finally {
+        setLoading(false);
+        setLoadingMore(false);
+      }
+    },
+    [tab],
+  );
+
+  useEffect(() => {
+    setAssets([]);
+    setPage(1);
+    setHasMore(false);
+    loadAssets(1);
+  }, [tab, loadAssets]);
+
+  // Infinite scroll
+  function handleScroll() {
+    if (!listRef.current || loadingMore || !hasMore) return;
+    const { scrollTop, scrollHeight, clientHeight } = listRef.current;
+    if (scrollHeight - scrollTop - clientHeight < 200) {
+      loadAssets(page + 1, true);
+    }
+  }
+
+  function handleUuidSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const uuid = uuidInput.trim();
+    const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+    if (!uuidRegex.test(uuid)) {
+      setUuidError('Invalid UUID format');
+      return;
+    }
+    setUuidError('');
+    onSelect(uuid);
+  }
+
+  function formatDate(dateStr: string): string {
+    try {
+      return new Date(dateStr).toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      });
+    } catch {
+      return '';
+    }
+  }
+
+  return (
+    <div className="picker-overlay" onClick={onClose}>
+      <div className="asset-picker-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="picker-header">
+          <h3>Select Hero Image</h3>
+          <button className="admin-btn-icon" onClick={onClose}>
+            ×
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="asset-picker-tabs">
+          <button
+            className={`asset-picker-tab ${tab === 'favorites' ? 'active' : ''}`}
+            onClick={() => setTab('favorites')}
+          >
+            ⭐ Favorites
+          </button>
+          <button
+            className={`asset-picker-tab ${tab === 'all' ? 'active' : ''}`}
+            onClick={() => setTab('all')}
+          >
+            🖼️ All Photos
+          </button>
+        </div>
+
+        {/* Asset Grid */}
+        <div className="asset-picker-grid" ref={listRef} onScroll={handleScroll}>
+          {loading ? (
+            <div className="asset-picker-loading">
+              <div className="admin-spinner" />
+            </div>
+          ) : assets.length === 0 ? (
+            <p className="empty-hint">
+              {tab === 'favorites'
+                ? 'No favorite photos found. Star photos in Immich first, or switch to "All Photos".'
+                : 'No photos found.'}
+            </p>
+          ) : (
+            <>
+              {assets.map((asset) => {
+                const isUsed = currentIds.has(asset.id);
+                return (
+                  <div
+                    key={asset.id}
+                    className={`asset-picker-tile ${isUsed ? 'used' : ''}`}
+                    onClick={() => !isUsed && onSelect(asset.id)}
+                    title={`${asset.originalFileName}\n${formatDate(asset.fileCreatedAt)}`}
+                  >
+                    <img
+                      src={`/api/admin/thumbnail/${asset.id}`}
+                      alt={asset.originalFileName}
+                      loading="lazy"
+                    />
+                    {isUsed && <div className="asset-picker-used-badge">✓</div>}
+                    {asset.isFavorite && !isUsed && (
+                      <div className="asset-picker-fav-badge">⭐</div>
+                    )}
+                  </div>
+                );
+              })}
+              {loadingMore && (
+                <div className="asset-picker-loading-more">
+                  <div className="admin-spinner" />
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* UUID Fallback */}
+        <div className="asset-picker-uuid-section">
+          <form onSubmit={handleUuidSubmit} className="asset-picker-uuid-form">
+            <input
+              type="text"
+              value={uuidInput}
+              onChange={(e) => {
+                setUuidInput(e.target.value);
+                setUuidError('');
+              }}
+              placeholder="Or paste asset UUID directly..."
+              className="asset-picker-uuid-input"
+            />
+            <button type="submit" className="admin-btn admin-btn-sm" disabled={!uuidInput.trim()}>
+              Add
+            </button>
+          </form>
+          {uuidError && <span className="asset-picker-uuid-error">{uuidError}</span>}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/admin/components/PageBuilder.tsx
+++ b/app/admin/components/PageBuilder.tsx
@@ -1,7 +1,26 @@
 'use client';

 import { useState, useEffect, useCallback } from 'react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+  horizontalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import AlbumPicker from './AlbumPicker';
+import AssetPicker from './AssetPicker';

 // ── Types ──────────────────────────────────────────────────────
 interface AlbumEntry {
@@ -79,6 +98,145 @@ function serializeAlbumEntries(
  });
 }

+// ── Sortable Hero Tile ─────────────────────────────────────────
+
+function SortableHeroTile({
+  id,
+  index,
+  onRemove,
+}: {
+  id: string;
+  index: number;
+  onRemove: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: `hero-${index}`,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 10 : undefined,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} className="hero-tile" {...attributes}>
+      <div className="hero-tile-drag" {...listeners} title="Drag to reorder">
+        ⠿
+      </div>
+      <img src={`/api/admin/thumbnail/${id}`} alt="" loading="lazy" />
+      <button className="hero-tile-remove" onClick={onRemove} title="Remove">
+        ×
+      </button>
+      <span className="hero-tile-index">{index + 1}</span>
+    </div>
+  );
+}
+
+// ── Sortable Album Card ────────────────────────────────────────
+
+function SortableAlbumCard({
+  album,
+  index,
+  name,
+  count,
+  thumbnailId,
+  onRemove,
+  onUpdate,
+}: {
+  album: AlbumEntry;
+  index: number;
+  name: string;
+  count: number;
+  thumbnailId: string | null;
+  onRemove: () => void;
+  onUpdate: (updates: Partial<AlbumEntry>) => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: `album-${album.id}-${index}`,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 10 : undefined,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes}>
+      <AlbumCard
+        album={album}
+        name={name}
+        count={count}
+        thumbnailId={thumbnailId}
+        onRemove={onRemove}
+        onUpdate={onUpdate}
+        dragListeners={listeners}
+      />
+    </div>
+  );
+}
+
+// ── Sortable Subpage Tile ──────────────────────────────────────
+
+function SortableSubpageTile({
+  sp,
+  spIndex,
+  isActive,
+  onClick,
+  getFirstThumb,
+}: {
+  sp: Subpage;
+  spIndex: number;
+  isActive: boolean;
+  onClick: () => void;
+  getFirstThumb: (sp: Subpage) => string | null;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: `subpage-${spIndex}`,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 10 : undefined,
+  };
+
+  const totalAlbums =
+    sp.albums.length + (sp.sections?.reduce((sum, sec) => sum + sec.albums.length, 0) || 0);
+  const firstThumb = getFirstThumb(sp);
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`subpage-tile ${isActive ? 'active' : ''}`}
+      onClick={onClick}
+      {...attributes}
+    >
+      <div className="subpage-tile-drag" {...listeners} title="Drag to reorder">
+        ⠿
+      </div>
+      <div className="subpage-tile-cover">
+        {firstThumb ? (
+          <img src={`/api/admin/thumbnail/${firstThumb}`} alt="" loading="lazy" />
+        ) : (
+          <div className="subpage-tile-placeholder">📂</div>
+        )}
+      </div>
+      <div className="subpage-tile-info">
+        <span className="subpage-tile-name">{sp.title || sp.name}</span>
+        <span className="subpage-tile-meta">
+          {totalAlbums} album{totalAlbums !== 1 ? 's' : ''}
+        </span>
+      </div>
+    </div>
+  );
+}
+
 // ── Component ──────────────────────────────────────────────────

 export default function PageBuilder() {
@@ -94,6 +252,13 @@ export default function PageBuilder() {
    subpageIndex?: number;
    sectionIndex?: number;
  } | null>(null);
+  const [showHeroPicker, setShowHeroPicker] = useState(false);
+
+  // DnD sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );

  // Load data
  useEffect(() => {
@@ -101,6 +266,33 @@ export default function PageBuilder() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

+  // ── Keyboard shortcut: ⌘+S / Ctrl+S ─────────────────────────
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault();
+        if (dirty && !saving) {
+          handleSave();
+        }
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dirty, saving, gallery]);
+
+  // ── Unsaved changes guard ────────────────────────────────────
+  useEffect(() => {
+    function handleBeforeUnload(e: BeforeUnloadEvent) {
+      if (dirty) {
+        e.preventDefault();
+        e.returnValue = '';
+      }
+    }
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [dirty]);
+
  async function loadData() {
    setLoading(true);
    try {
@@ -181,7 +373,6 @@ export default function PageBuilder() {
    setSaving(true);
    setSaveMessage('');

-    // Serialize back to YAML-compatible format
    const yamlData: Record<string, unknown> = {};

    if (gallery.hero.length > 0) {
@@ -207,7 +398,6 @@ export default function PageBuilder() {
            if (sec.description) s.description = sec.description;
            return s;
          });
-          // Also include top-level albums if they exist alongside sections
          if (sp.albums.length > 0) {
            entry.albums = serializeAlbumEntries(sp.albums);
          }
@@ -242,6 +432,13 @@ export default function PageBuilder() {
    }
  }

+  // ── Hero Picker ──────────────────────────────────────────────
+  function handleHeroSelect(assetId: string) {
+    setGallery((g) => ({ ...g, hero: [...g.hero, assetId] }));
+    setShowHeroPicker(false);
+    markDirty();
+  }
+
  // ── Album Picker Handlers ────────────────────────────────────
  function handlePickAlbum(albumId: string) {
    if (!pickerTarget) return;
@@ -280,6 +477,75 @@ export default function PageBuilder() {
    markDirty();
  }

+  // ── Drag & Drop Handlers ─────────────────────────────────────
+  function handleHeroDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = gallery.hero.findIndex((_, i) => `hero-${i}` === active.id);
+    const newIndex = gallery.hero.findIndex((_, i) => `hero-${i}` === over.id);
+
+    if (oldIndex !== -1 && newIndex !== -1) {
+      setGallery((g) => ({ ...g, hero: arrayMove(g.hero, oldIndex, newIndex) }));
+      markDirty();
+    }
+  }
+
+  function handleAlbumDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = gallery.albums.findIndex((a, i) => `album-${a.id}-${i}` === active.id);
+    const newIndex = gallery.albums.findIndex((a, i) => `album-${a.id}-${i}` === over.id);
+
+    if (oldIndex !== -1 && newIndex !== -1) {
+      setGallery((g) => ({ ...g, albums: arrayMove(g.albums, oldIndex, newIndex) }));
+      markDirty();
+    }
+  }
+
+  function handleSubpageDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = gallery.subpages.findIndex((_, i) => `subpage-${i}` === active.id);
+    const newIndex = gallery.subpages.findIndex((_, i) => `subpage-${i}` === over.id);
+
+    if (oldIndex !== -1 && newIndex !== -1) {
+      setGallery((g) => ({ ...g, subpages: arrayMove(g.subpages, oldIndex, newIndex) }));
+      if (expandedSubpage === oldIndex) setExpandedSubpage(newIndex);
+      else if (expandedSubpage !== null) {
+        if (oldIndex < expandedSubpage && newIndex >= expandedSubpage)
+          setExpandedSubpage(expandedSubpage - 1);
+        else if (oldIndex > expandedSubpage && newIndex <= expandedSubpage)
+          setExpandedSubpage(expandedSubpage + 1);
+      }
+      markDirty();
+    }
+  }
+
+  function handleSubpageAlbumDragEnd(spIndex: number) {
+    return (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+
+      const sp = gallery.subpages[spIndex];
+      const oldIndex = sp.albums.findIndex((a, i) => `album-${a.id}-${i}` === active.id);
+      const newIndex = sp.albums.findIndex((a, i) => `album-${a.id}-${i}` === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        setGallery((g) => {
+          const subpages = [...g.subpages];
+          const sp2 = { ...subpages[spIndex] };
+          sp2.albums = arrayMove(sp2.albums, oldIndex, newIndex);
+          subpages[spIndex] = sp2;
+          return { ...g, subpages };
+        });
+        markDirty();
+      }
+    };
+  }
+
  // ── Subpage Management ────────────────────────────────────────
  function addSubpage() {
    setGallery((g) => ({
@@ -390,26 +656,6 @@ export default function PageBuilder() {
    markDirty();
  }

-  function addHero() {
-    const uuid = prompt('Enter Immich asset UUID for hero image:');
-    if (uuid?.trim()) {
-      setGallery((g) => ({ ...g, hero: [...g.hero, uuid.trim()] }));
-      markDirty();
-    }
-  }
-
-  // ── Move helpers ──────────────────────────────────────────────
-  function moveSubpage(index: number, direction: -1 | 1) {
-    const newIndex = index + direction;
-    if (newIndex < 0 || newIndex >= gallery.subpages.length) return;
-    setGallery((g) => {
-      const subpages = [...g.subpages];
-      [subpages[index], subpages[newIndex]] = [subpages[newIndex], subpages[index]];
-      return { ...g, subpages };
-    });
-    markDirty();
-  }
-
  // ── Helpers ──────────────────────────────────────────────────
  function getAlbumName(id: string): string {
    const found = immichAlbums.find((a) => a.id === id);
@@ -427,12 +673,10 @@ export default function PageBuilder() {
  }

  function getFirstSubpageThumb(sp: Subpage): string | null {
-    // Try albums first
    for (const album of sp.albums) {
      const thumb = getAlbumThumbnailId(album.id);
      if (thumb) return thumb;
    }
-    // Try sections
    if (sp.sections) {
      for (const sec of sp.sections) {
        for (const album of sec.albums) {
@@ -444,6 +688,13 @@ export default function PageBuilder() {
    return null;
  }

+  function slugify(str: string): string {
+    return str
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '');
+  }
+
  // ── Render ───────────────────────────────────────────────────
  if (loading) {
    return (
@@ -466,48 +717,62 @@ export default function PageBuilder() {
              {saveMessage}
            </span>
          )}
+          {!dirty && !saveMessage && <span className="save-hint">⌘S to save</span>}
+        </div>
+        <div className="save-bar-right">
+          <a
+            href="/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="admin-btn admin-btn-ghost admin-btn-preview"
+            title="Open site in new tab"
+          >
+            ↗ Preview Site
+          </a>
+          <button
+            className="admin-btn admin-btn-primary"
+            onClick={handleSave}
+            disabled={!dirty || saving}
+          >
+            {saving ? 'Saving...' : 'Save Changes'}
+          </button>
        </div>
-        <button
-          className="admin-btn admin-btn-primary"
-          onClick={handleSave}
-          disabled={!dirty || saving}
-        >
-          {saving ? 'Saving...' : 'Save Changes'}
-        </button>
      </div>

      {/* Hero Section */}
      <section className="builder-section">
        <div className="builder-section-header">
          <h2>🏠 Homepage Hero</h2>
-          <button className="admin-btn admin-btn-sm" onClick={addHero}>
+          <button className="admin-btn admin-btn-sm" onClick={() => setShowHeroPicker(true)}>
            + Add Hero
          </button>
        </div>
-        <div className="hero-grid">
-          {gallery.hero.length === 0 && (
-            <p className="empty-hint">
-              No hero images configured. Add asset UUIDs to show a hero carousel.
-            </p>
-          )}
-          {gallery.hero.map((id, i) => (
-            <div key={i} className="hero-tile">
-              <img
-                src={`/api/admin/thumbnail/${id}`}
-                alt=""
-                loading="lazy"
-              />
-              <button
-                className="hero-tile-remove"
-                onClick={() => removeHero(i)}
-                title="Remove"
-              >
-                ×
-              </button>
-              <span className="hero-tile-index">{i + 1}</span>
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleHeroDragEnd}
+        >
+          <SortableContext
+            items={gallery.hero.map((_, i) => `hero-${i}`)}
+            strategy={horizontalListSortingStrategy}
+          >
+            <div className="hero-grid">
+              {gallery.hero.length === 0 && (
+                <p className="empty-hint">
+                  No hero images configured. Add photos to show a hero carousel on the homepage.
+                </p>
+              )}
+              {gallery.hero.map((id, i) => (
+                <SortableHeroTile
+                  key={`hero-${i}`}
+                  id={id}
+                  index={i}
+                  onRemove={() => removeHero(i)}
+                />
+              ))}
            </div>
-          ))}
-        </div>
+          </SortableContext>
+        </DndContext>
      </section>

      {/* Standalone Albums */}
@@ -521,29 +786,43 @@ export default function PageBuilder() {
            + Add Album
          </button>
        </div>
-        <div className="album-list">
-          {gallery.albums.length === 0 && (
-            <p className="empty-hint">No standalone albums. These show directly on the homepage.</p>
-          )}
-          {gallery.albums.map((album, i) => (
-            <AlbumCard
-              key={`${album.id}-${i}`}
-              album={album}
-              name={getAlbumName(album.id)}
-              count={getAlbumCount(album.id)}
-              thumbnailId={getAlbumThumbnailId(album.id)}
-              onRemove={() => removeStandaloneAlbum(i)}
-              onUpdate={(updates) => {
-                setGallery((g) => {
-                  const albums = [...g.albums];
-                  albums[i] = { ...albums[i], ...updates };
-                  return { ...g, albums };
-                });
-                markDirty();
-              }}
-            />
-          ))}
-        </div>
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleAlbumDragEnd}
+        >
+          <SortableContext
+            items={gallery.albums.map((a, i) => `album-${a.id}-${i}`)}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className="album-list">
+              {gallery.albums.length === 0 && (
+                <p className="empty-hint">
+                  No standalone albums. These show directly on the homepage.
+                </p>
+              )}
+              {gallery.albums.map((album, i) => (
+                <SortableAlbumCard
+                  key={`${album.id}-${i}`}
+                  album={album}
+                  index={i}
+                  name={getAlbumName(album.id)}
+                  count={getAlbumCount(album.id)}
+                  thumbnailId={getAlbumThumbnailId(album.id)}
+                  onRemove={() => removeStandaloneAlbum(i)}
+                  onUpdate={(updates) => {
+                    setGallery((g) => {
+                      const albums = [...g.albums];
+                      albums[i] = { ...albums[i], ...updates };
+                      return { ...g, albums };
+                    });
+                    markDirty();
+                  }}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
      </section>

      {/* Subpages */}
@@ -561,38 +840,30 @@ export default function PageBuilder() {
          </p>
        )}

-        {/* Collapsed overview grid */}
-        <div className="subpage-grid">
-          {gallery.subpages.map((sp, spIndex) => {
-            const totalAlbums =
-              sp.albums.length +
-              (sp.sections?.reduce((sum, sec) => sum + sec.albums.length, 0) || 0);
-            const firstThumb = getFirstSubpageThumb(sp);
-            return (
-              <div
-                key={spIndex}
-                className={`subpage-tile ${expandedSubpage === spIndex ? 'active' : ''}`}
-                onClick={() =>
-                  setExpandedSubpage(expandedSubpage === spIndex ? null : spIndex)
-                }
-              >
-                <div className="subpage-tile-cover">
-                  {firstThumb ? (
-                    <img src={`/api/admin/thumbnail/${firstThumb}`} alt="" loading="lazy" />
-                  ) : (
-                    <div className="subpage-tile-placeholder">📂</div>
-                  )}
-                </div>
-                <div className="subpage-tile-info">
-                  <span className="subpage-tile-name">{sp.title || sp.name}</span>
-                  <span className="subpage-tile-meta">
-                    {totalAlbums} album{totalAlbums !== 1 ? 's' : ''}
-                  </span>
-                </div>
-              </div>
-            );
-          })}
-        </div>
+        {/* Collapsed overview grid with DnD */}
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleSubpageDragEnd}
+        >
+          <SortableContext
+            items={gallery.subpages.map((_, i) => `subpage-${i}`)}
+            strategy={horizontalListSortingStrategy}
+          >
+            <div className="subpage-grid">
+              {gallery.subpages.map((sp, spIndex) => (
+                <SortableSubpageTile
+                  key={`subpage-${spIndex}`}
+                  sp={sp}
+                  spIndex={spIndex}
+                  isActive={expandedSubpage === spIndex}
+                  onClick={() => setExpandedSubpage(expandedSubpage === spIndex ? null : spIndex)}
+                  getFirstThumb={getFirstSubpageThumb}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>

        {/* Expanded subpage detail */}
        {expandedSubpage !== null && gallery.subpages[expandedSubpage] && (
@@ -604,30 +875,6 @@ export default function PageBuilder() {
                <>
                  <div className="subpage-detail-header">
                    <div className="subpage-detail-header-left">
-                      <div className="subpage-move-btns">
-                        <button
-                          className="admin-btn-icon"
-                          onClick={() => {
-                            moveSubpage(spIndex, -1);
-                            setExpandedSubpage(spIndex - 1);
-                          }}
-                          disabled={spIndex === 0}
-                          title="Move up"
-                        >
-                          ←
-                        </button>
-                        <button
-                          className="admin-btn-icon"
-                          onClick={() => {
-                            moveSubpage(spIndex, 1);
-                            setExpandedSubpage(spIndex + 1);
-                          }}
-                          disabled={spIndex === gallery.subpages.length - 1}
-                          title="Move down"
-                        >
-                          →
-                        </button>
-                      </div>
                      <input
                        className="subpage-name-input"
                        value={sp.name}
@@ -635,8 +882,19 @@ export default function PageBuilder() {
                        placeholder="Page name (used for URL)"
                        onClick={(e) => e.stopPropagation()}
                      />
+                      <span className="subpage-slug-preview">/{slugify(sp.name)}</span>
                    </div>
                    <div className="subpage-detail-header-right">
+                      <a
+                        href={`/${slugify(sp.name)}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="admin-btn-icon"
+                        title="Preview this page"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        ↗
+                      </a>
                      <button
                        className="admin-btn-icon"
                        onClick={() => setExpandedSubpage(null)}
@@ -645,7 +903,7 @@ export default function PageBuilder() {
                        ✕
                      </button>
                      <button
-                        className="admin-btn-icon"
+                        className="admin-btn-icon admin-btn-icon-danger"
                        onClick={() => {
                          removeSubpage(spIndex);
                          setExpandedSubpage(null);
@@ -696,7 +954,7 @@ export default function PageBuilder() {
                    </div>
                  </div>

-                  {/* Albums (if no sections) */}
+                  {/* Albums (if no sections) with DnD */}
                  {(!sp.sections || sp.sections.length === 0) && (
                    <div className="subpage-albums">
                      <div className="subpage-albums-header">
@@ -710,30 +968,42 @@ export default function PageBuilder() {
                          + Add
                        </button>
                      </div>
-                      <div className="album-list">
-                        {sp.albums.map((album, aIndex) => (
-                          <AlbumCard
-                            key={`${album.id}-${aIndex}`}
-                            album={album}
-                            name={getAlbumName(album.id)}
-                            count={getAlbumCount(album.id)}
-                            thumbnailId={getAlbumThumbnailId(album.id)}
-                            onRemove={() => removeSubpageAlbum(spIndex, aIndex)}
-                            onUpdate={(updates) => {
-                              setGallery((g) => {
-                                const subpages = [...g.subpages];
-                                const sp2 = { ...subpages[spIndex] };
-                                const albums = [...sp2.albums];
-                                albums[aIndex] = { ...albums[aIndex], ...updates };
-                                sp2.albums = albums;
-                                subpages[spIndex] = sp2;
-                                return { ...g, subpages };
-                              });
-                              markDirty();
-                            }}
-                          />
-                        ))}
-                      </div>
+                      <DndContext
+                        sensors={sensors}
+                        collisionDetection={closestCenter}
+                        onDragEnd={handleSubpageAlbumDragEnd(spIndex)}
+                      >
+                        <SortableContext
+                          items={sp.albums.map((a, i) => `album-${a.id}-${i}`)}
+                          strategy={verticalListSortingStrategy}
+                        >
+                          <div className="album-list">
+                            {sp.albums.map((album, aIndex) => (
+                              <SortableAlbumCard
+                                key={`${album.id}-${aIndex}`}
+                                album={album}
+                                index={aIndex}
+                                name={getAlbumName(album.id)}
+                                count={getAlbumCount(album.id)}
+                                thumbnailId={getAlbumThumbnailId(album.id)}
+                                onRemove={() => removeSubpageAlbum(spIndex, aIndex)}
+                                onUpdate={(updates) => {
+                                  setGallery((g) => {
+                                    const subpages = [...g.subpages];
+                                    const sp2 = { ...subpages[spIndex] };
+                                    const albums = [...sp2.albums];
+                                    albums[aIndex] = { ...albums[aIndex], ...updates };
+                                    sp2.albums = albums;
+                                    subpages[spIndex] = sp2;
+                                    return { ...g, subpages };
+                                  });
+                                  markDirty();
+                                }}
+                              />
+                            ))}
+                          </div>
+                        </SortableContext>
+                      </DndContext>
                    </div>
                  )}

@@ -817,18 +1087,13 @@ export default function PageBuilder() {
                  )}

                  <div className="subpage-actions">
-                    <button
-                      className="admin-btn admin-btn-xs"
-                      onClick={() => addSection(spIndex)}
-                    >
+                    <button className="admin-btn admin-btn-xs" onClick={() => addSection(spIndex)}>
                      + Add Section
                    </button>
                    {sp.sections && sp.sections.length > 0 && (
                      <button
                        className="admin-btn admin-btn-xs"
-                        onClick={() =>
-                          setPickerTarget({ type: 'subpage', subpageIndex: spIndex })
-                        }
+                        onClick={() => setPickerTarget({ type: 'subpage', subpageIndex: spIndex })}
                      >
                        + Add Album (outside sections)
                      </button>
@@ -850,6 +1115,15 @@ export default function PageBuilder() {
          usedAlbumIds={getAllUsedAlbumIds()}
        />
      )}
+
+      {/* Hero Asset Picker Modal */}
+      {showHeroPicker && (
+        <AssetPicker
+          onSelect={handleHeroSelect}
+          onClose={() => setShowHeroPicker(false)}
+          currentAssetIds={gallery.hero}
+        />
+      )}
    </div>
  );

@@ -873,20 +1147,30 @@ interface AlbumCardProps {
  thumbnailId: string | null;
  onRemove: () => void;
  onUpdate: (updates: Partial<AlbumEntry>) => void;
+  dragListeners?: Record<string, unknown>;
 }

-function AlbumCard({ album, name, count, thumbnailId, onRemove, onUpdate }: AlbumCardProps) {
+function AlbumCard({
+  album,
+  name,
+  count,
+  thumbnailId,
+  onRemove,
+  onUpdate,
+  dragListeners,
+}: AlbumCardProps) {
  const [expanded, setExpanded] = useState(false);

  return (
    <div className="album-tile">
      <div className="album-tile-cover">
+        {dragListeners && (
+          <div className="album-tile-drag" {...dragListeners} title="Drag to reorder">
+            ⠿
+          </div>
+        )}
        {thumbnailId ? (
-          <img
-            src={`/api/admin/thumbnail/${thumbnailId}`}
-            alt=""
-            loading="lazy"
-          />
+          <img src={`/api/admin/thumbnail/${thumbnailId}`} alt="" loading="lazy" />
        ) : (
          <div className="album-tile-placeholder">📷</div>
        )}
--- a/app/admin/components/SettingsEditor.tsx
+++ b/app/admin/components/SettingsEditor.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';

 interface Settings {
  title?: string;
@@ -67,6 +67,37 @@ export default function SettingsEditor() {
    loadSettings();
  }, []);

+  // ── Keyboard shortcut: ⌘+S / Ctrl+S ─────────────────────────
+  const handleSaveRef = useCallback(() => {
+    if (dirty && !saving) {
+      handleSave();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dirty, saving, settings]);
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault();
+        handleSaveRef();
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleSaveRef]);
+
+  // ── Unsaved changes guard ────────────────────────────────────
+  useEffect(() => {
+    function handleBeforeUnload(e: BeforeUnloadEvent) {
+      if (dirty) {
+        e.preventDefault();
+        e.returnValue = '';
+      }
+    }
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [dirty]);
+
  async function loadSettings() {
    setLoading(true);
    try {
--- a/app/api/admin/assets/route.ts
+++ b/app/api/admin/assets/route.ts
@@ -0,0 +1,87 @@
+/**
+ * Admin API: Browse Immich assets for the hero picker.
+ * Supports pagination and fetching favorites first.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { isAdminAuthenticated, isAdminEnabled } from '@/lib/admin/auth';
+import { getConfig } from '@/lib/config';
+
+interface ImmichSearchResult {
+  assets: {
+    items: Array<{
+      id: string;
+      type: string;
+      originalFileName: string;
+      thumbhash: string | null;
+      fileCreatedAt: string;
+      isFavorite: boolean;
+    }>;
+    nextPage: string | null;
+  };
+}
+
+/** GET: Search/browse assets from Immich for hero image selection. */
+export async function GET(request: NextRequest) {
+  if (!isAdminEnabled()) {
+    return NextResponse.json({ error: 'Admin not enabled' }, { status: 403 });
+  }
+  if (!(await isAdminAuthenticated())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const config = getConfig();
+  if (config.needsSetup) {
+    return NextResponse.json({ error: 'Immich not configured' }, { status: 503 });
+  }
+
+  const { searchParams } = new URL(request.url);
+  const page = parseInt(searchParams.get('page') || '1', 10);
+  const favoritesOnly = searchParams.get('favorites') === 'true';
+  const pageSize = 50;
+
+  try {
+    // Use Immich search/metadata endpoint to query assets
+    const body: Record<string, unknown> = {
+      type: 'IMAGE',
+      size: pageSize,
+      page,
+      order: 'desc',
+      isNotInAlbum: false,
+    };
+
+    if (favoritesOnly) {
+      body.isFavorite = true;
+    }
+
+    const res = await fetch(`${config.immich.apiUrl}/search/metadata`, {
+      method: 'POST',
+      headers: {
+        'x-api-key': config.immich.apiKey,
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!res.ok) {
+      return NextResponse.json({ error: `Immich API returned ${res.status}` }, { status: 502 });
+    }
+
+    const data = (await res.json()) as ImmichSearchResult;
+    const assets = data.assets.items.map((asset) => ({
+      id: asset.id,
+      originalFileName: asset.originalFileName,
+      fileCreatedAt: asset.fileCreatedAt,
+      isFavorite: asset.isFavorite,
+    }));
+
+    return NextResponse.json({
+      assets,
+      nextPage: data.assets.nextPage ? page + 1 : null,
+    });
+  } catch (err) {
+    console.error('[Admin] Failed to fetch assets from Immich:', err);
+    return NextResponse.json({ error: 'Failed to connect to Immich' }, { status: 502 });
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,9 @@
      "version": "0.1.0",
      "license": "MIT",
      "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
        "js-yaml": "^4.1.1",
        "leaflet": "^1.9.4",
        "next": "16.2.4",
@@ -283,6 +286,59 @@
        "node": ">=18"
      }
    },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
    "node_modules/@emnapi/core": {
      "version": "1.8.1",
      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
--- a/package.json
+++ b/package.json
@@ -15,6 +15,9 @@
    "test:e2e": "playwright test"
  },
  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
    "js-yaml": "^4.1.1",
    "leaflet": "^1.9.4",
    "next": "16.2.4",