Add grid/list layout toggle to admin Photos tab

The event detail Photos tab (AdminPhotoGrid) only offered a thumbnail
grid. Add a Grid/List toggle in the action bar so admins can scan
photos in a compact, metadata-oriented list.

- New utils/photoViewPrefs.ts persists the choice per admin via
  localStorage (mirrors utils/calendarPrefs.ts), defaulting to grid
- List view is a compact <table> following the established admin
  list pattern (EventsListPage), with responsive column hiding:
  Photo (thumbnail + filename + original + Video/Hidden badges),
  Category (lg+), Uploaded date (md+, via useLocalizedDate),
  Engagement views/downloads/likes (xl+), Feedback rating/comments
  (sm+), Size, and hover Actions (download, delete)
- Rows reuse the existing selection, download, delete and category
  handlers; row click opens the photo viewer
- Toggle buttons use LayoutGrid / List icons with aria-pressed state
- Add en.json + de.json keys under admin.photos (viewMode, gridView,
  listView, columns.*)
- Tests for the persistence util and the toggle's render + persistence
This commit is contained in:
André Deuerling
2026-06-30 19:17:26 +02:00
parent 627c655a4d
commit 46ce59d82e
6 changed files with 495 additions and 6 deletions
+16 -1
View File
@@ -2514,7 +2514,22 @@
"visibleSuccess": "Fotos jetzt für Gäste sichtbar",
"processingStatus": "Wird verarbeitet…",
"processingFailed": "Fehlgeschlagen",
"retryQueued": "Wiederholung in Warteschlange"
"retryQueued": "Wiederholung in Warteschlange",
"viewMode": "Ansicht",
"gridView": "Rasteransicht",
"listView": "Listenansicht",
"columns": {
"photo": "Foto",
"category": "Kategorie",
"uploaded": "Hochgeladen",
"engagement": "Aktivität",
"feedback": "Feedback",
"size": "Größe",
"actions": "Aktionen",
"views": "Aufrufe",
"downloads": "Downloads",
"likes": "Likes"
}
},
"events": {
"tabs": {
+16 -1
View File
@@ -2101,7 +2101,22 @@
"visibleSuccess": "Photos now visible to guests",
"processingStatus": "Processing…",
"processingFailed": "Failed",
"retryQueued": "Retry queued"
"retryQueued": "Retry queued",
"viewMode": "View mode",
"gridView": "Grid view",
"listView": "List view",
"columns": {
"photo": "Photo",
"category": "Category",
"uploaded": "Uploaded",
"engagement": "Engagement",
"feedback": "Feedback",
"size": "Size",
"actions": "Actions",
"views": "Views",
"downloads": "Downloads",
"likes": "Likes"
}
},
"events": {
"tabs": {