- Create single PhotoGrid component with columns (1,2,3,auto) and masonry options
- Remove 5 duplicate grid components
- Update HorizontalScrollPhotoGrid to HorizontalPhotoScroll with Photo type
- Add interactive test page for PhotoGrid
- Update all pages to use new unified component
- Use svelte-bricks for proper masonry layout
- Single column always uses natural aspect ratios
- Square thumbnails (object-fit: cover) for multi-column non-masonry layouts
Co-Authored-By: Claude <noreply@anthropic.com>
- Created PhotoGrid.new.svelte with flexible column layouts (1, 2, 3, auto)
- Supports ultrawide image handling from ThreeColumnPhotoGrid
- Maintains PhotoItem component usage for consistency
- Created wrapper components for backward compatibility:
- SingleColumnPhotoGrid.new.svelte
- TwoColumnPhotoGrid.new.svelte
- ThreeColumnPhotoGrid.new.svelte
- Fixed FormFieldWrapper import errors (was already removed)
This consolidates 4 similar grid components into a single flexible component, reducing code duplication by ~60%.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created BaseSegmentedController with shared logic for all segmented controls
- Refactored AdminSegmentedController to use BaseSegmentedController
- Added keyboard navigation support (arrow keys, Home/End)
- Added size variants (small, medium, large)
- Added support for custom pill colors
- Added proper ARIA attributes for accessibility
- Fixed missing CSS variables ($red-error, $shadow-*)
This eliminates significant code duplication and provides a consistent foundation for all segmented control patterns.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add children prop to FormField to support wrapper mode
- Update components using FormFieldWrapper to use FormField
- Remove redundant FormFieldWrapper component
- Maintain all existing functionality with unified API
This reduces code duplication and simplifies the form component hierarchy.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
The Avatar component was also using $dark-blue as a string literal
in the SVG paths, which needed to be replaced with the actual hex
value #070610.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixes ReferenceError where template was using undefined variables.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add missing variables: $unit-22x, $gray-5, $salmon-pink
- Fix AvatarSVG.svelte to use actual color values instead of SCSS variables
- SVG fill attributes cannot use SCSS variables directly
This resolves all preprocessing errors after the color system refactor.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix themes.scss to use $gray- variables
- Fix tooltip.scss to use $gray- variables
- Resolves build error with undefined variables
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace hardcoded pixel values with unit variables in key components:
- GalleryExtended, MediaDetailsModal, UrlEmbedExtended
- EnhancedComposer, UniverseCard, NavDropdown, Button
Key replacements:
- Spacing: 1px→$unit-1px, 8px→$unit, 16px→$unit-2x, etc.
- Font sizes: Use semantic $font-size-* variables
- Border radius: Use $corner-radius-* variables
Added missing common pixel value variables for consistency.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace 802 instances of $grey- variables with $gray- across 106 files
- Remove legacy color aliases from variables.scss
- Maintain consistent naming convention throughout codebase
This completes the migration to the new color scale system.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major improvements to the color system:
1. Create proper color scales (00-100) for:
- Gray: 14 shades from darkest to lightest
- Red: 12 shades with brand colors
- Blue: 12 shades for primary colors
- Yellow: 12 shades for warnings
- Green: 12 shades for success states
- Orange: 12 shades for secondary accents
2. Semantic color assignments:
- Map all semantic colors to scale values
- Background colors use gray scale
- Text colors use appropriate gray shades
- Status colors (success, error, warning, info)
- Component-specific colors reference scales
3. Backward compatibility:
- Maintain $grey-* aliases for existing code
- Map old variables to new scale system
- TODO comments for future migration
This provides a more maintainable and scalable color system.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove Squiggly.svelte
- Remove PhotoLightbox.svelte
- Remove Pill.svelte
- Remove SVGHoverEffect.svelte
- Remove MusicPreview.svelte
These components were identified as unused in the codebase analysis.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add drag handle functionality to editor blocks
- Improve dropdown menu component with better state management
- Enhance composer with AI-powered features
- Update form components to use toast notifications
- Add chevron-right and drag-handle SVG icons
- Various bug fixes and UI refinements
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create reusable tooltip action using Tippy.js
- Add tooltips to link menu buttons (copy, edit, open, remove)
- Implement visual feedback with green flash animation on URL copy
- Configure bubble menu scale animation for smooth appearance
- Add scoped tooltip styles with dark theme
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Move embeds to display before text content in UniversePostCard
- Show full content for non-essay posts (no truncation)
- Increase essay truncation limit from 150 to 300 characters
- Add styles to hide duplicate embeds in rendered content
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Move album routes from /photos/[slug] to /albums/[slug]
- Simplify photo permalinks from /photos/p/[id] to /photos/[id]
- Remove album-scoped photo route /photos/[albumSlug]/[photoId]
- Update all component references to use new routes
- Simplify content.ts to always use direct photo permalinks
- Update PhotoItem, MasonryPhotoGrid, ThreeColumnPhotoGrid components
- Update UniverseAlbumCard and admin AlbumForm view links
- Remove album context from photo navigation
Breaking change: URLs have changed
- Albums: /photos/[slug] → /albums/[slug]
- Photos: /photos/p/[id] → /photos/[id]
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Update all admin forms to use toast messages
- Remove temporary "Saving..." button text changes
- Remove inline error/success message displays
- Keep buttons disabled during operations
- Show loading, success, and error toasts appropriately
Updated components:
- AlbumForm: Save operations with descriptive messages
- StatusDropdown: Remove loading text from buttons
- MediaDetailsModal: Save, delete, and copy operations
- ProjectForm: Create and update operations
- EssayForm: Publish and save draft operations
- SimplePostForm: Create and update posts
- PhotoPostForm: Publish photo posts
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update NavDropdown with album navigation support
- Enhance UniverseAlbumCard with better styling
- Update album-stream store for new album structure
- Improve now-playing-stream with better error handling
- Add TypeScript improvements throughout
- Better component prop validation
Enhances UI components for the new album system.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update media management page with album associations
- Enhance media audit page with better reporting
- Improve regenerate thumbnails page
- Update post pages to use EnhancedComposer
- Update universe compose page with new editor
- Update ProjectForm to use EnhancedComposer
- Add better error handling and loading states
- Improve form validation across admin pages
Modernizes admin workflows with unified components.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Enhance GalleryExtended with better layout options
- Update GalleryPlaceholder with improved media selection
- Improve ImagePlaceholder with better preview handling
- Add support for multiple gallery layouts
- Improve component styling and interactions
- Better integration with UnifiedMediaModal
Enhances content editing with improved media components.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add album and media icons for better navigation
- Update AdminNavBar with new routes and improved styling
- Enhance GalleryUploader with better drag-and-drop support
- Improve ImagePicker and ImageUploader components
- Remove unused ImageUploadPlaceholder component
- Update MediaDetailsModal with album association features
- Improve Modal component styling and animations
- Add PostDropdown for post management actions
Modernizes the admin interface with better usability.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add PhotoGrid component as base for photo grid layouts
- Update PhotoItem with color placeholder loading states
- Enhance PhotoMetadata display with better formatting
- Improve PhotoViewEnhanced with smoother transitions
- Update single and two-column grid layouts
- Fix photo routing for album-based photo URLs
- Add support for direct photo ID routes
- Improve photo page performance and loading states
Creates a more polished photo viewing experience.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update AlbumForm to use EnhancedComposer for content editing
- Add AlbumSelector component for album selection workflows
- Update AlbumListItem with improved styling and metadata display
- Enhance album edit/create pages with new content capabilities
- Add support for geolocation data in album forms
- Improve form validation and error handling
Modernizes the album management interface with rich content editing.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add geolocation Tiptap extension for embedding maps
- Create GeolocationExtended component for rendering map embeds
- Create GeolocationPlaceholder for editor insertion
- Add GeoCard component for displaying location data
- Support latitude, longitude, zoom level, and optional labels
- Enable location-based content in albums and posts
Allows editors to embed interactive maps with specific locations.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create UnifiedMediaModal to replace MediaLibraryModal and bulk album functionality
- Remove redundant MediaLibraryModal and MediaSelector components
- Add media-selection store for better state management
- Add AlbumSelectorModal for album selection workflows
- Add InlineComposerModal for inline content editing
- Improve modal reusability and reduce code duplication
Streamlines media selection with a single, flexible modal component.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create EnhancedComposer as the single unified editor component
- Remove redundant editor components (Editor, EditorWithUpload, CaseStudyEditor, UniverseComposer)
- Add editor-extensions.ts for centralized extension configuration
- Enhance image placeholder with better UI and selection support
- Update editor commands and slash command groups
- Improve editor state management and content handling
Simplifies the codebase by having one powerful editor component instead
of multiple specialized ones.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix extractPublicId to handle encoded URLs correctly
- Update admin media page to use goto for client-side navigation
- Add color display to media details modal
- Include color data in media API responses
- Clean up unused imports in audit page
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Use dominant color as placeholder background while images load
- Add aspect ratio support for proper image dimensions
- Improve loading state with smoother transitions
- Remove shimmer animation in favor of solid color placeholders
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add two-column view mode option
- Import new view mode icons
- Hide selector on mobile devices
- Update ViewMode type to include all options
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- SingleColumnPhotoGrid: Displays photos in a single centered column
- TwoColumnPhotoGrid: Splits photos evenly between two columns
- HorizontalScrollPhotoGrid: Shows photos in a horizontal scrolling view
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update view-single icon with text representation
- Add view-horizontal icon with side scroll indicator
- Add view-two-column icon for two-column layout
- Simplify width-normal and width-wide icons
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
