From 1c38dc87e357c5f9cf57dba8f1404cfd0d6e2938 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 26 Jun 2025 10:33:27 -0400 Subject: [PATCH] fix: drag handle actions now affect the correct block MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Added menuNode state to capture the node position when menu opens - Updated all action functions to use menuNode instead of currentNode - This ensures drag handle actions (Turn into, Delete, etc.) always affect the block where the handle was clicked, not where the mouse currently hovers - Also formatted code with prettier 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- SVG_ANALYSIS_REPORT.md | 94 ++++--- prd/PRD-codebase-cleanup-refactoring.md | 32 ++- src/assets/styles/_z-index.scss | 2 +- src/assets/styles/variables.scss | 1 - src/lib/actions/tooltip.ts | 2 +- .../components/HorizontalPhotoScroll.svelte | 5 +- src/lib/components/MasonryPhotoGrid.svelte | 2 +- src/lib/components/PhotoGrid.svelte | 23 +- .../components/SingleColumnPhotoGrid.svelte | 2 +- .../components/ThreeColumnPhotoGrid.svelte | 2 +- src/lib/components/TwoColumnPhotoGrid.svelte | 2 +- src/lib/components/admin/BaseDropdown.svelte | 4 +- src/lib/components/admin/BaseModal.svelte | 14 +- .../admin/BaseSegmentedController.svelte | 4 +- .../admin/DeleteConfirmationModal.svelte | 9 +- src/lib/components/admin/DropdownMenu.svelte | 63 ++--- src/lib/components/admin/FormField.svelte | 2 +- src/lib/components/admin/Modal.svelte | 10 +- .../components/admin/PublishDropdown.svelte | 9 +- .../components/admin/StatusDropdown.svelte | 16 +- .../admin/composer/ComposerCore.svelte | 30 ++- .../admin/composer/ComposerLinkManager.svelte | 2 +- .../composer/ComposerMediaHandler.svelte.ts | 2 +- .../admin/composer/ComposerToolbar.svelte | 4 +- .../admin/composer/MediaInsertDropdown.svelte | 2 +- .../admin/composer/TextStyleDropdown.svelte | 2 +- .../components/admin/composer/editorConfig.ts | 7 +- src/lib/components/admin/composer/index.ts | 2 +- src/lib/components/admin/composer/types.ts | 2 +- .../composer/useComposerEvents.svelte.ts | 6 +- .../admin/composer/useDropdown.svelte.ts | 2 +- src/lib/components/edra/drag-handle.svelte | 245 ++++++++++-------- src/lib/components/edra/editor.css | 1 - .../edra/extensions/drag-handle/index.ts | 12 +- src/lib/components/edra/tooltip.scss | 2 +- src/lib/components/icons/CloseButton.svelte | 2 +- src/lib/components/icons/CopyIcon.svelte | 12 +- src/lib/components/icons/FileIcon.svelte | 2 +- src/routes/test-grids/+page.svelte | 34 ++- 39 files changed, 353 insertions(+), 316 deletions(-) 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()}