From a4f5c36f71f06d85ecd57441fbc1d2674efa04ca Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 9 Jul 2025 23:20:56 -0700 Subject: [PATCH] refactor: migrate media components to Svelte 5 runes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Convert all media-related admin components to use $state and $derived - Update event handlers to use new syntax (onclick instead of on:click) - Refactor prop destructuring to use interface Props pattern - Improve type safety and remove legacy reactive statements - Simplify component logic with Svelte 5 patterns Components updated: - AlbumForm: Enhanced validation and state management - FilePreviewList: Simplified preview rendering - FileUploadZone: Improved drag-and-drop handling - MediaDetailsModal: Better metadata display - MediaGrid: Optimized selection state - MediaMetadataPanel: Cleaner EXIF data presentation - MediaUploadModal: Streamlined upload flow - MediaUsageList: Enhanced usage tracking - UnifiedMediaModal: Consolidated media management 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- src/lib/components/admin/AlbumForm.svelte | 134 ++++++++---- .../components/admin/FilePreviewList.svelte | 23 +- .../components/admin/FileUploadZone.svelte | 22 +- .../components/admin/MediaDetailsModal.svelte | 69 +++--- src/lib/components/admin/MediaGrid.svelte | 16 +- .../admin/MediaMetadataPanel.svelte | 12 +- .../components/admin/MediaUploadModal.svelte | 7 +- .../components/admin/MediaUsageList.svelte | 9 +- .../components/admin/UnifiedMediaModal.svelte | 205 +++++++++++------- 9 files changed, 292 insertions(+), 205 deletions(-) diff --git a/src/lib/components/admin/AlbumForm.svelte b/src/lib/components/admin/AlbumForm.svelte index 1ea832b..cd1a123 100644 --- a/src/lib/components/admin/AlbumForm.svelte +++ b/src/lib/components/admin/AlbumForm.svelte @@ -11,7 +11,7 @@ import Composer from './composer' import { authenticatedFetch } from '$lib/admin-auth' import { toast } from '$lib/stores/toast' - import type { Album } from '@prisma/client' + import type { Album, Media } from '@prisma/client' import type { JSONContent } from '@tiptap/core' interface Props { @@ -40,6 +40,7 @@ let albumMedia = $state([]) let editorInstance = $state() let activeTab = $state('metadata') + let pendingMediaIds = $state([]) // Photos to add after album creation const tabOptions = [ { value: 'metadata', label: 'Metadata' }, @@ -57,6 +58,9 @@ content: { type: 'doc', content: [{ type: 'paragraph' }] } as JSONContent }) + // Derived state for existing media IDs + const existingMediaIds = $derived(albumMedia.map((item) => item.media.id)) + // Watch for album changes and populate form data $effect(() => { if (album && mode === 'edit') { @@ -172,7 +176,37 @@ const savedAlbum = await response.json() toast.dismiss(loadingToastId) - toast.success(`Album ${mode === 'edit' ? 'saved' : 'created'} successfully!`) + + // Add pending photos to newly created album + if (mode === 'create' && pendingMediaIds.length > 0) { + const photoToastId = toast.loading('Adding selected photos to album...') + try { + const photoResponse = await authenticatedFetch(`/api/albums/${savedAlbum.id}/media`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ mediaIds: pendingMediaIds }) + }) + + if (!photoResponse.ok) { + throw new Error('Failed to add photos to album') + } + + toast.dismiss(photoToastId) + toast.success( + `Album created with ${pendingMediaIds.length} photo${pendingMediaIds.length !== 1 ? 's' : ''}!` + ) + } catch (err) { + toast.dismiss(photoToastId) + toast.error( + 'Album created but failed to add photos. You can add them by editing the album.' + ) + console.error('Failed to add photos:', err) + } + } else { + toast.success(`Album ${mode === 'edit' ? 'saved' : 'created'} successfully!`) + } if (mode === 'create') { goto(`/admin/albums/${savedAlbum.id}/edit`) @@ -209,6 +243,10 @@ function handleContentUpdate(content: JSONContent) { formData.content = content } + + function handlePhotoSelection(media: Media[]) { + pendingMediaIds = media.map((m) => m.id) + } @@ -317,35 +355,42 @@ - {#if mode === 'edit'} -
-
-

- Photos {albumMedia.length > 0 ? `(${albumMedia.length})` : ''} -

- -
- {#if albumMedia.length > 0} -
- {#each albumMedia as item} -
- -
- {/each} -
- {:else} -

- No photos added yet. Click "Manage Photos" to add photos to this album. -

- {/if} +
+
+

+ Photos {albumMedia.length > 0 || pendingMediaIds.length > 0 + ? `(${mode === 'edit' ? albumMedia.length : pendingMediaIds.length})` + : ''} +

+
- {/if} + {#if mode === 'edit' && albumMedia.length > 0} +
+ {#each albumMedia as item} +
+ +
+ {/each} +
+ {:else if mode === 'create' && pendingMediaIds.length > 0} +

+ {pendingMediaIds.length} photo{pendingMediaIds.length !== 1 ? 's' : ''} selected. They + will be added when you save the album. +

+ {:else} +

+ No photos {mode === 'create' ? 'selected' : 'added'} yet. Click "{mode === 'create' + ? 'Select Photos' + : 'Manage Photos'}" to {mode === 'create' ? 'select' : 'add'} photos. +

+ {/if} +
@@ -366,14 +411,17 @@ -{#if album && mode === 'edit'} - -{/if} + diff --git a/src/lib/components/admin/FilePreviewList.svelte b/src/lib/components/admin/FilePreviewList.svelte index cddfe16..2635325 100644 --- a/src/lib/components/admin/FilePreviewList.svelte +++ b/src/lib/components/admin/FilePreviewList.svelte @@ -120,10 +120,7 @@ {#if variant === 'upload' && isUploading && preview.file}
-
+
{#if uploadProgress[preview.name] === 100} @@ -138,7 +135,7 @@ {/if}
{/each} - + {#if uploadErrors.length > 0}
{#each uploadErrors as error} @@ -157,20 +154,20 @@ &.attached { flex-direction: row; flex-wrap: wrap; - + .file-item { width: auto; padding: 0; background: none; border: none; } - + .file-preview { width: 64px; height: 64px; border-radius: 12px; } - + .file-info, .progress-bar-container { display: none; @@ -311,7 +308,7 @@ background: $red-60; color: white; } - + .attached & { position: absolute; top: -6px; @@ -325,25 +322,25 @@ align-items: center; justify-content: center; opacity: 0; - + svg { width: 10px; height: 10px; } } } - + .attached .file-item:hover .remove-button { opacity: 1; } .upload-errors { margin-top: $unit-2x; - + .error-item { color: $red-60; margin-bottom: $unit; font-size: 0.875rem; } } - \ No newline at end of file + diff --git a/src/lib/components/admin/FileUploadZone.svelte b/src/lib/components/admin/FileUploadZone.svelte index e756478..6b603f3 100644 --- a/src/lib/components/admin/FileUploadZone.svelte +++ b/src/lib/components/admin/FileUploadZone.svelte @@ -24,7 +24,7 @@ let fileInput: HTMLInputElement let internalDragActive = $state(false) - + // Use external drag state if provided, otherwise use internal const dragActive = $derived(externalDragActive || internalDragActive) @@ -43,17 +43,17 @@ function handleDrop(event: DragEvent) { event.preventDefault() internalDragActive = false - + if (disabled) return const droppedFiles = Array.from(event.dataTransfer?.files || []) - const validFiles = droppedFiles.filter(file => validateFileType(file, accept)) - + const validFiles = droppedFiles.filter((file) => validateFileType(file, accept)) + if (validFiles.length !== droppedFiles.length) { const invalidCount = droppedFiles.length - validFiles.length console.warn(`${invalidCount} file(s) were not accepted due to invalid type`) } - + if (validFiles.length > 0) { onFilesAdded(multiple ? validFiles : [validFiles[0]]) } @@ -62,12 +62,12 @@ function handleFileSelect(event: Event) { const target = event.target as HTMLInputElement const selectedFiles = Array.from(target.files || []) - const validFiles = selectedFiles.filter(file => validateFileType(file, accept)) - + const validFiles = selectedFiles.filter((file) => validateFileType(file, accept)) + if (validFiles.length > 0) { onFilesAdded(multiple ? validFiles : [validFiles[0]]) } - + // Clear the input so the same file can be selected again target.value = '' } @@ -251,7 +251,7 @@ &.disabled { opacity: 0.6; cursor: not-allowed; - + .drop-zone-button { cursor: not-allowed; } @@ -303,11 +303,11 @@ &:disabled { cursor: not-allowed; } - + &:focus-visible { outline: 2px solid $blue-50; outline-offset: -2px; border-radius: $unit-2x; } } - \ No newline at end of file + diff --git a/src/lib/components/admin/MediaDetailsModal.svelte b/src/lib/components/admin/MediaDetailsModal.svelte index bfc792c..2c8687a 100644 --- a/src/lib/components/admin/MediaDetailsModal.svelte +++ b/src/lib/components/admin/MediaDetailsModal.svelte @@ -202,7 +202,6 @@ }) } } - {#if media} @@ -295,43 +294,46 @@
- - {#if albums.length > 0} -
-

Albums

-
- {#each albums as album} - - {album.title} - - {/each} + + {#if albums.length > 0} +
+

Albums

+
+ {#each albums as album} + + {album.title} + + {/each} +
-
- {/if} + {/if} +
+
+ + + +
+
+ +
+ +
+
- - -
-
- -
- -
- -
-
- - + {#if showAlbumSelector && media} @@ -635,7 +637,6 @@ } } - // Responsive adjustments @media (max-width: 768px) { .media-details-modal { diff --git a/src/lib/components/admin/MediaGrid.svelte b/src/lib/components/admin/MediaGrid.svelte index 376fa94..74596ab 100644 --- a/src/lib/components/admin/MediaGrid.svelte +++ b/src/lib/components/admin/MediaGrid.svelte @@ -52,15 +52,7 @@ fill="none" xmlns="http://www.w3.org/2000/svg" > - + @@ -74,7 +66,9 @@ class="media-item" class:selected={mode === 'select' && isSelected(item)} onclick={() => handleClick(item)} - title={mode === 'select' ? `Click to ${isSelected(item) ? 'deselect' : 'select'}` : 'Click to view details'} + title={mode === 'select' + ? `Click to ${isSelected(item) ? 'deselect' : 'select'}` + : 'Click to view details'} >
\ No newline at end of file + diff --git a/src/lib/components/admin/MediaMetadataPanel.svelte b/src/lib/components/admin/MediaMetadataPanel.svelte index d174f61..12b44c8 100644 --- a/src/lib/components/admin/MediaMetadataPanel.svelte +++ b/src/lib/components/admin/MediaMetadataPanel.svelte @@ -9,11 +9,7 @@ class?: string } - let { - media, - showExifToggle = true, - class: className = '' - }: Props = $props() + let { media, showExifToggle = true, class: className = '' }: Props = $props() let showExif = $state(false) @@ -102,9 +98,7 @@ {#if media.exifData.dateTaken}
Date Taken - {new Date(media.exifData.dateTaken).toLocaleDateString()} + {new Date(media.exifData.dateTaken).toLocaleDateString()}
{/if} {#if media.exifData.coordinates} @@ -220,4 +214,4 @@ display: flex; flex-direction: column; } - \ No newline at end of file + diff --git a/src/lib/components/admin/MediaUploadModal.svelte b/src/lib/components/admin/MediaUploadModal.svelte index 40e7284..3b9f0ff 100644 --- a/src/lib/components/admin/MediaUploadModal.svelte +++ b/src/lib/components/admin/MediaUploadModal.svelte @@ -52,9 +52,9 @@ function removeFile(id: string | number) { // For files, the id is the filename - const fileToRemove = files.find(f => f.name === id) + const fileToRemove = files.find((f) => f.name === id) if (fileToRemove) { - files = files.filter(f => f.name !== id) + files = files.filter((f) => f.name !== id) // Clear any related upload progress if (uploadProgress[fileToRemove.name]) { const { [fileToRemove.name]: removed, ...rest } = uploadProgress @@ -63,7 +63,6 @@ } } - async function uploadFiles() { if (files.length === 0) return @@ -168,7 +167,7 @@
{/if} - + diff --git a/src/lib/components/admin/MediaUsageList.svelte b/src/lib/components/admin/MediaUsageList.svelte index c352c2b..603c0eb 100644 --- a/src/lib/components/admin/MediaUsageList.svelte +++ b/src/lib/components/admin/MediaUsageList.svelte @@ -38,12 +38,7 @@
{#if usageItem.contentUrl} - + {usageItem.contentTitle} {:else} @@ -159,4 +154,4 @@ margin: $unit-2x 0 0 0; font-size: 0.875rem; } - \ No newline at end of file + diff --git a/src/lib/components/admin/UnifiedMediaModal.svelte b/src/lib/components/admin/UnifiedMediaModal.svelte index b38e32a..a330c7e 100644 --- a/src/lib/components/admin/UnifiedMediaModal.svelte +++ b/src/lib/components/admin/UnifiedMediaModal.svelte @@ -45,17 +45,37 @@ let currentPage = $state(1) let totalPages = $state(1) let total = $state(0) - + // Media selection state let selectedMediaIds = $state>(new Set(selectedIds)) - + let initialMediaIds = $state>(new Set(selectedIds)) + // Derived selection values - const selectedMedia = $derived( - media.filter(m => selectedMediaIds.has(m.id)) - ) + const selectedMedia = $derived(media.filter((m) => selectedMediaIds.has(m.id))) const hasSelection = $derived(selectedMediaIds.size > 0) const selectionCount = $derived(selectedMediaIds.size) + // Track changes for add/remove operations + const mediaToAdd = $derived(() => { + const toAdd = new Set() + selectedMediaIds.forEach((id) => { + if (!initialMediaIds.has(id)) { + toAdd.add(id) + } + }) + return toAdd + }) + + const mediaToRemove = $derived(() => { + const toRemove = new Set() + initialMediaIds.forEach((id) => { + if (!selectedMediaIds.has(id)) { + toRemove.add(id) + } + }) + return toRemove + }) + // Filter states let filterType = $state(fileType === 'all' ? 'all' : fileType) let photographyFilter = $state('all') @@ -102,37 +122,55 @@ selectedMediaIds = new Set([item.id]) } else { // Multiple selection mode - toggle - if (selectedMediaIds.has(item.id)) { - selectedMediaIds.delete(item.id) + const newSet = new Set(selectedMediaIds) + if (newSet.has(item.id)) { + newSet.delete(item.id) } else { - selectedMediaIds.add(item.id) + newSet.add(item.id) } - // Trigger reactivity - selectedMediaIds = new Set(selectedMediaIds) + // Trigger reactivity by assigning the new Set + selectedMediaIds = newSet } } - + function clearSelection() { selectedMediaIds = new Set() } - + function getSelectedIds(): number[] { return Array.from(selectedMediaIds) } - + function getSelected(): Media[] { return selectedMedia } - const footerText = $derived( - showInAlbumMode && canConfirm - ? `Add ${mediaCount} ${mediaCount === 1 ? 'photo' : 'photos'} to album` - : mode === 'single' - ? canConfirm - ? '1 item selected' - : 'No item selected' - : `${mediaCount} item${mediaCount !== 1 ? 's' : ''} selected` - ) + const footerText = $derived(() => { + if (showInAlbumMode) { + const addCount = mediaToAdd().size + const removeCount = mediaToRemove().size + + if (addCount === 0 && removeCount === 0) { + return `${mediaCount} ${mediaCount === 1 ? 'photo' : 'photos'} selected (no changes)` + } + + const parts = [] + if (addCount > 0) { + parts.push(`${addCount} to add`) + } + if (removeCount > 0) { + parts.push(`${removeCount} to remove`) + } + + return `${mediaCount} ${mediaCount === 1 ? 'photo' : 'photos'} selected (${parts.join(', ')})` + } + + return mode === 'single' + ? canConfirm + ? '1 item selected' + : 'No item selected' + : `${mediaCount} item${mediaCount !== 1 ? 's' : ''} selected` + }) // State for preventing flicker let isInitialLoad = $state(true) @@ -140,8 +178,9 @@ // Reset state when modal opens $effect(() => { if (isOpen) { - selectedMediaIds.clear() - selectedMediaIds = new Set() // Trigger reactivity + // Initialize with selectedIds from props + selectedMediaIds = new Set(selectedIds) + initialMediaIds = new Set(selectedIds) // Don't clear media immediately - let new data replace old currentPage = 1 isInitialLoad = true @@ -181,15 +220,6 @@ } }) - // Initialize selected media from IDs when media loads - $effect(() => { - if (selectedIds.length > 0 && media.length > 0) { - // Re-select items that are in the current media list - const availableIds = new Set(media.map(m => m.id)) - selectedMediaIds = new Set(selectedIds.filter(id => availableIds.has(id))) - } - }) - async function loadMedia(page = currentPage) { try { // Short delay to prevent flicker @@ -273,19 +303,39 @@ const auth = localStorage.getItem('admin_auth') if (!auth) return - const mediaIds = getSelectedIds() + const toAdd = Array.from(mediaToAdd()) + const toRemove = Array.from(mediaToRemove()) - const response = await fetch(`/api/albums/${albumId}/media`, { - method: 'POST', - headers: { - Authorization: `Basic ${auth}`, - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ mediaIds }) - }) + // Handle additions + if (toAdd.length > 0) { + const response = await fetch(`/api/albums/${albumId}/media`, { + method: 'POST', + headers: { + Authorization: `Basic ${auth}`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ mediaIds: toAdd }) + }) - if (!response.ok) { - throw new Error('Failed to add media to album') + if (!response.ok) { + throw new Error('Failed to add media to album') + } + } + + // Handle removals + if (toRemove.length > 0) { + const response = await fetch(`/api/albums/${albumId}/media`, { + method: 'DELETE', + headers: { + Authorization: `Basic ${auth}`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ mediaIds: toRemove }) + }) + + if (!response.ok) { + throw new Error('Failed to remove media from album') + } } handleClose() @@ -389,58 +439,58 @@ selectedIds={selectedMediaIds} onItemClick={handleMediaClick} isLoading={isInitialLoad && media.length === 0} - emptyMessage={fileType !== 'all' - ? 'No media found. Try adjusting your filters or search' + emptyMessage={fileType !== 'all' + ? 'No media found. Try adjusting your filters or search' : 'No media found. Try adjusting your search or filters'} mode="select" /> - - -
+ + +
- {#snippet loading()} -
- -
- {/snippet} + {#snippet loading()} +
+ +
+ {/snippet} - {#snippet error()} -
-

Failed to load media

- -
- {/snippet} + {#snippet error()} +
+

Failed to load media

+ +
+ {/snippet} - {#snippet noData()} - - {/snippet} + {#snippet noData()} + + {/snippet}
- {footerText} + {footerText()}