diff --git a/SVG_ANALYSIS_REPORT.md b/SVG_ANALYSIS_REPORT.md index f64d4cf..9038220 100644 --- a/SVG_ANALYSIS_REPORT.md +++ b/SVG_ANALYSIS_REPORT.md @@ -9,6 +9,7 @@ This analysis examines SVG usage patterns in the Svelte 5 codebase to identify o ### 1. Inline SVGs vs. Imported SVGs **Inline SVGs Found:** + - **Close/X buttons**: Found in 7+ components with identical SVG code - `admin/Modal.svelte` - `admin/UnifiedMediaModal.svelte` @@ -17,8 +18,8 @@ This analysis examines SVG usage patterns in the Svelte 5 codebase to identify o - `admin/GalleryManager.svelte` - `admin/MediaDetailsModal.svelte` - `Lightbox.svelte` - - **Loading spinners**: Found in 2+ components + - `admin/Button.svelte` - `admin/ImageUploader.svelte` - `admin/GalleryUploader.svelte` @@ -30,26 +31,23 @@ This analysis examines SVG usage patterns in the Svelte 5 codebase to identify o ### 2. SVG Import Patterns **Consistent patterns using aliases:** + ```svelte -// Good - using $icons alias -import ArrowLeft from '$icons/arrow-left.svg' -import ChevronDownIcon from '$icons/chevron-down.svg' - -// Component imports with ?component -import PhotosIcon from '$icons/photos.svg?component' -import ViewSingleIcon from '$icons/view-single.svg?component' - -// Raw imports -import ChevronDownIcon from '$icons/chevron-down.svg?raw' +// Good - using $icons alias import ArrowLeft from '$icons/arrow-left.svg' import ChevronDownIcon +from '$icons/chevron-down.svg' // Component imports with ?component import PhotosIcon from +'$icons/photos.svg?component' import ViewSingleIcon from '$icons/view-single.svg?component' // Raw +imports import ChevronDownIcon from '$icons/chevron-down.svg?raw' ``` ### 3. Unused SVG Files **Unused icons in `/src/assets/icons/`:** + - `dashboard.svg` - `metadata.svg` **Unused illustrations in `/src/assets/illos/`:** + - `jedmund-blink.svg` - `jedmund-headphones.svg` - `jedmund-listening-downbeat.svg` @@ -65,11 +63,13 @@ import ChevronDownIcon from '$icons/chevron-down.svg?raw' ### 4. Duplicate SVG Definitions **Close/X Button SVG** (appears 7+ times): + ```svg ``` **Loading Spinner SVG** (appears 3+ times): + ```svg
diff --git a/src/lib/components/MasonryPhotoGrid.svelte b/src/lib/components/MasonryPhotoGrid.svelte index ce9a29f..1da4992 100644 --- a/src/lib/components/MasonryPhotoGrid.svelte +++ b/src/lib/components/MasonryPhotoGrid.svelte @@ -10,4 +10,4 @@ let { photos = [], columns = 'auto' }: Props = $props() - \ No newline at end of file + diff --git a/src/lib/components/PhotoGrid.svelte b/src/lib/components/PhotoGrid.svelte index 7d6452e..4c0b114 100644 --- a/src/lib/components/PhotoGrid.svelte +++ b/src/lib/components/PhotoGrid.svelte @@ -21,22 +21,21 @@ class: className = '' }: Props = $props() - - // Split photos into columns for column-based layouts function splitIntoColumns(photos: Photo[], numColumns: number): Photo[][] { const columns: Photo[][] = Array.from({ length: numColumns }, () => []) - + photos.forEach((photo, index) => { columns[index % numColumns].push(photo) }) - + return columns } - const columnPhotos = $derived( - (columns === 1 || columns === 2 || columns === 3) && !masonry ? splitIntoColumns(photos, columns) : [] + (columns === 1 || columns === 2 || columns === 3) && !masonry + ? splitIntoColumns(photos, columns) + : [] ) // Window width for responsive masonry @@ -45,9 +44,9 @@ // Calculate masonry column widths based on columns prop const masonryConfig = $derived(() => { if (!masonry) return null - + const gapSize = gap === 'small' ? 8 : gap === 'large' ? 32 : 16 - + if (columns === 1) { const width = windowWidth - 64 // Account for padding return { minColWidth: width, maxColWidth: width, gap: gapSize } @@ -55,7 +54,7 @@ const width = Math.floor((windowWidth - 64 - gapSize) / 2) return { minColWidth: width - 10, maxColWidth: width + 10, gap: gapSize } } else if (columns === 3) { - const width = Math.floor((windowWidth - 64 - (gapSize * 2)) / 3) + const width = Math.floor((windowWidth - 64 - gapSize * 2) / 3) return { minColWidth: width - 10, maxColWidth: width + 10, gap: gapSize } } else { // Auto columns @@ -90,7 +89,7 @@ > {#snippet children({ item })}
- + {#if showCaptions}

{item.caption || ''}

{/if} @@ -147,7 +146,7 @@ &--3-column { display: flex; gap: var(--grid-gap); - + @include breakpoint('mobile') { flex-direction: column; } @@ -233,4 +232,4 @@ } } } - \ No newline at end of file + diff --git a/src/lib/components/SingleColumnPhotoGrid.svelte b/src/lib/components/SingleColumnPhotoGrid.svelte index f06ba47..ff51cee 100644 --- a/src/lib/components/SingleColumnPhotoGrid.svelte +++ b/src/lib/components/SingleColumnPhotoGrid.svelte @@ -9,4 +9,4 @@ let { photos = [] }: Props = $props() - \ No newline at end of file + diff --git a/src/lib/components/ThreeColumnPhotoGrid.svelte b/src/lib/components/ThreeColumnPhotoGrid.svelte index ad2df82..4687db7 100644 --- a/src/lib/components/ThreeColumnPhotoGrid.svelte +++ b/src/lib/components/ThreeColumnPhotoGrid.svelte @@ -9,4 +9,4 @@ let { photos = [] }: Props = $props() - \ No newline at end of file + diff --git a/src/lib/components/TwoColumnPhotoGrid.svelte b/src/lib/components/TwoColumnPhotoGrid.svelte index 5be9155..d915802 100644 --- a/src/lib/components/TwoColumnPhotoGrid.svelte +++ b/src/lib/components/TwoColumnPhotoGrid.svelte @@ -9,4 +9,4 @@ let { photos = [] }: Props = $props() - \ No newline at end of file + diff --git a/src/lib/components/admin/BaseDropdown.svelte b/src/lib/components/admin/BaseDropdown.svelte index 43cd090..3024a22 100644 --- a/src/lib/components/admin/BaseDropdown.svelte +++ b/src/lib/components/admin/BaseDropdown.svelte @@ -53,7 +53,7 @@
{@render trigger()} - + {#if dropdown} - + {#if item.children && openSubmenuId === item.id}
@@ -243,16 +246,16 @@ &.danger { color: $red-60; } - + &.has-children { padding-right: $unit-2x; } } - + .item-label { flex: 1; } - + .submenu-icon { width: 16px; height: 16px; @@ -261,13 +264,13 @@ flex-shrink: 0; display: inline-flex; align-items: center; - + :global(svg) { width: 100%; height: 100%; fill: none; } - + :global(path) { fill: none; stroke: currentColor; diff --git a/src/lib/components/admin/FormField.svelte b/src/lib/components/admin/FormField.svelte index 4bba7b8..3a1c7a0 100644 --- a/src/lib/components/admin/FormField.svelte +++ b/src/lib/components/admin/FormField.svelte @@ -148,4 +148,4 @@ color: $gray-40; font-size: $font-size-small; } - \ No newline at end of file + diff --git a/src/lib/components/admin/Modal.svelte b/src/lib/components/admin/Modal.svelte index ef5ca73..ab4268f 100644 --- a/src/lib/components/admin/Modal.svelte +++ b/src/lib/components/admin/Modal.svelte @@ -27,13 +27,7 @@ } - + {#if showCloseButton}
{/if} - \ No newline at end of file + diff --git a/src/lib/components/admin/StatusDropdown.svelte b/src/lib/components/admin/StatusDropdown.svelte index 19b953f..c75c45e 100644 --- a/src/lib/components/admin/StatusDropdown.svelte +++ b/src/lib/components/admin/StatusDropdown.svelte @@ -49,12 +49,7 @@ const hasDropdownContent = $derived(availableActions.length > 0 || showViewInDropdown) - + {#snippet trigger()}