Migrated all components and routes from Svelte 4 to Svelte 5 syntax:
- Converted export let → $props() with generic type syntax
- Replaced createEventDispatcher → callback props
- Migrated $: reactive statements → $derived() and $effect()
- Updated two-way bindings with $bindable()
- Fixed TypeScript syntax: added lang="ts" to script tags
- Converted inline type annotations to generic parameter syntax
- Updated deprecated event directives to Svelte 5 syntax:
- on:click → onclick
- on:submit → onsubmit
- on:change → onchange
- Converted deprecated <slot> elements → {@render children()}
- Updated slot props to Snippet types
- Fixed season/icon selector components with {#snippet} blocks
- Fixed non-reactive state by converting let → $state()
- Fixed infinite loop in EnhancedBalance by converting $effect → $derived
- Fixed Chart.js integration by converting $state proxies to plain arrays
- Updated cospend dashboard and payment pages with proper reactivity
- Migrated 20+ route files from export let data → $props()
- Fixed TypeScript type annotations in page components
- Updated reactive statements in error and cospend routes
- Removed invalid onchange attribute from Toggle component
- Fixed modal ID isolation in CreateIngredientList/CreateStepList
- Fixed dark mode button visibility in TranslationApproval
- Build now succeeds with zero deprecation warnings
All functionality tested and working. No breaking changes to user experience.
Migrated all components and routes to Svelte 5 syntax standards:
Event Handlers:
- Updated all deprecated on:* directives to new on* attribute syntax
- Changed on:click → onclick, on:keydown → onkeydown, on:input → oninput
- Updated on:blur, on:focus, on:load, on:submit, on:cancel handlers
Reactive State:
- Added $state() declarations for all reactive variables
- Fixed non-reactive update warnings in layout and component files
Component API:
- Replaced <slot /> with {@render children()} pattern
- Added children prop to components using slots
Accessibility:
- Added id attributes to inputs and for attributes to labels
- Fixed label-control associations across forms
- Removed event listeners from non-interactive elements
HTML Fixes:
- Fixed self-closing textarea tags
- Corrected implicitly closed elements
- Proper element nesting
CSS Cleanup:
- Removed 20+ unused CSS selectors across components
- Cleaned up orphaned styles from refactoring
All vite-plugin-svelte warnings resolved. Codebase now fully compliant with Svelte 5.
- Replace deprecated <slot> syntax with modern {#snippet} and {@render} patterns
- Add TypeScript types for snippet props in Header component
- Convert on:click event handlers to onclick attribute throughout
- Update all layout files to use new snippet-based composition pattern
Optimize header link spacing and add visual feedback for active pages:
- Reduce link padding and gap for more compact navigation
- Shorten German labels: "In Saison" to "Saison", "Stichwörter" to "Tags"
- Remove "Tipps" section from navigation menu
Add active page highlighting across all layouts:
- Highlight current page links in red (matching hover color)
- Desktop: animated red underline that smoothly slides between links
- Mobile: static red underline for active links in hamburger menu
- Underline aligns precisely with text width (excludes padding)
Improve transitions:
- Fix color transition to only animate color, not layout properties
- Disable underline transition during window resize to prevent lag
- Underline updates immediately on resize for perfect alignment
Added max-width: 100% and overflow-x: hidden to main-content and cospend-main containers to prevent child elements from forcing horizontal scroll on mobile devices.
Reduced padding on mobile screens (max-width: 600px) to prevent horizontal overflow and ensure header spans full width. Updated BarChart, DebtBreakdown, EnhancedBalance components and recent activity section.
- Replace 8 duplicate formatCurrency functions with shared utility
- Add comprehensive formatter utilities (currency, date, number, etc.)
- Set up Vitest for unit testing with 38 passing tests
- Set up Playwright for E2E testing
- Consolidate database connection to single source (src/utils/db.ts)
- Add auth middleware helpers to reduce code duplication
- Fix display bug: remove spurious minus sign in recent activity amounts
- Add path aliases for cleaner imports ($utils, $models)
- Add project documentation (CODEMAP.md, REFACTORING_PLAN.md)
Test coverage: 38 unit tests passing
Build: successful with no breaking changes
- Remove createdBy restriction from edit buttons in PaymentModal and view pages
- All authenticated users can now edit any payment (including executed recurring payments)
- Remove delete payment functionality from both modal and view pages
- Replace inline edit button with consistent EditButton component in PaymentModal
- Clean up unused delete-related code and variables
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix settlement amounts rounding to 2 decimal places in debts API
- Improve dashboard mobile responsiveness with tighter gaps and padding
- Optimize settlement layout to stay horizontal on mobile with smaller profile pictures
- Fix payments page mobile layout with better breakpoints and reduced min-width
- Enhance modal behavior on mobile devices with proper responsive design
- Reduce container max-width from 1400px to 1200px for better mobile fitting
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add ExchangeRate model for currency conversion tracking
- Implement currency utility functions for formatting and conversion
- Add exchange rates API endpoint with caching and fallback rates
- Update Payment and RecurringPayment models to support multiple currencies
- Enhanced payment forms with currency selection and conversion display
- Update split method selector with better currency handling
- Add currency-aware payment display and balance calculations
- Support for EUR, USD, GBP, and CHF with automatic exchange rate fetching
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add monthly total labels above each bar showing cumulative expense amounts
- Improve chart styling: white labels, larger fonts, clean flat tooltip design
- Hide Y-axis ticks and grid lines for cleaner appearance
- Capitalize category names in legend and tooltips
- Show only hovered category in tooltip instead of all categories
- Trim empty months from start of data for users with limited history
- Create responsive layout: balance and chart side-by-side on wide screens
- Increase max width to 1400px for dashboard while keeping recent activity at 800px
- Filter out settlements from monthly expenses view
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create reusable components: ImageUpload, FormSection, SplitMethodSelector, UsersList
- Replace duplicate code across add/edit pages with shared components
- Remove created-by info and edit/delete buttons from payments list
- Add server-side rendering support to settle page with form actions
- Fix settlement submission redirect issue
- Remove redundant back button from settle page
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Make AddButton component generic with href prop instead of hardcoded path
- Update PaymentModal with Nord theme styling and improved UX
- Add EditButton functionality to PaymentModal
- Remove old recurring payment add pages that are no longer needed
- Update all AddButton usages across rezepte and cospend pages
- Add AddButton to cospend dashboard for better navigation
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change navigation text from "View All Payments" to "All Payments"
- Remove Nord theme background overrides to use global site background
- Update side panel styling to match site colors in light/dark modes
- Maintain existing functionality while improving visual consistency
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix 'paid in full for others' payments showing CHF 0.00 instead of actual amount
- Add time-based sorting to payments (date + createdAt) for proper chronological order
- Redirect to dashboard after adding payment instead of payments list
- Implement complete dashboard refresh after payment deletion via modal
- Fix dashboard component reactivity for single debtor view updates
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add RecurringPayment model with flexible scheduling options
- Implement node-cron based scheduler for payment processing
- Create API endpoints for CRUD operations on recurring payments
- Add recurring payments management UI with create/edit forms
- Integrate scheduler initialization in hooks.server.ts
- Enhance payments/add form with progressive enhancement
- Add recurring payments button to main dashboard
- Improve server-side rendering for better performance
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add settlement category with handshake emoji (🤝)
- Create settlement page for recording debt payments with user → user flow
- Implement settlement detection and visual styling across all views
- Add conditional "Settle Debts" button (hidden when balance is 0)
- Style settlement payments distinctly in recent activity with large profile pictures
- Add settlement flow styling in payments overview with green theme
- Update backend validation and Mongoose schema for settlement category
- Fix settlement receiver detection with proper user flow logic
🤝 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add EnhancedBalance component with integrated single-user debt display
- Create DebtBreakdown component for multi-user debt overview
- Add predefined users configuration (alexander, anna)
- Implement personal + equal split payment method
- Add profile pictures throughout payment interfaces
- Integrate debt information with profile pictures in balance view
- Auto-hide debt breakdown when single user (shows in balance instead)
- Support both manual and predefined user management modes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add comprehensive category system: Groceries 🛒, Shopping 🛍️, Travel 🚆, Restaurant 🍽️, Utilities ⚡, Fun 🎉
- Create category utility functions with emoji and display name helpers
- Update Payment model and API validation to support categories
- Add category selectors to payment creation and edit forms
- Display category emojis prominently across all UI components:
- Dashboard recent activities with category icons and names
- Payment cards showing category in metadata
- Payment modals and view pages with category information
- Add image upload/removal functionality to payment edit form
- Maintain responsive design and consistent styling across all components
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Allow clicking between payments in recent activities while modal is open
- Add fly transition for seamless horizontal slide animation
- Use absolute positioning to prevent modal stacking issues
- Replace fadeIn animation with proper slide-in-from-right effect
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add ProfilePicture component with fallback to user initials
- Integrate profile pictures in dashboard recent activity dialog layout
- Add profile pictures to payments list and split details
- Fix modal animation overshoot by using fixed positioning and smooth slide-in
- Add fade-in animation for modal content with proper sequencing
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add MongoDB models for Payment and PaymentSplit with proper splitting logic
- Implement API routes for CRUD operations and balance calculations
- Create dashboard with balance overview and recent activity
- Add payment creation form with file upload (using $IMAGE_DIR)
- Implement shallow routing with modal side panel for payment details
- Support multiple split methods: equal, full payment, custom proportions
- Add responsive design for desktop and mobile
- Integrate with existing Authentik authentication
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
