Skip to content

✨ Todo Enhancements: Shared Lists, Category View, Emoji Picker & Backend Refactoring - #523

Merged
tilloh-dev merged 10 commits into
mainfrom
feature/todo-enhancements
Feb 24, 2026
Merged

✨ Todo Enhancements: Shared Lists, Category View, Emoji Picker & Backend Refactoring#523
tilloh-dev merged 10 commits into
mainfrom
feature/todo-enhancements

Conversation

@tilloh-dev

Copy link
Copy Markdown
Owner

Summary

This PR introduces major enhancements to the todo feature, including shared todo lists with real-time sync, category view, backend architecture refactoring, and a new reusable emoji picker component.

Key Features

🎨 Emoji Picker Component

  • New shared component with inline expandable dropdown UI
  • Bilingual keyword search (EN/DE) for 200+ common emojis
  • Organized into 7 categories: Smileys, Animals, Food, Activities, Travel, Symbols, Flags
  • Refactored emoji data into separate utility module for reusability
  • Integrated into todo list creation and edit modals

🔄 Shared Todo Lists

  • Create shareable todo lists with unique IDs
  • Real-time sync via pull-based polling (5-second intervals)
  • Cross-user deletion detection and automatic removal
  • Conflict resolution notifications
  • "Make local" button to convert shared lists back to local-only mode
  • Duplicate detection when importing already-imported shared lists

📂 Category View & UI Improvements

  • New category view as default view (replaces classic view)
  • Improved TodoList with sorted todos (unchecked first)
  • Enhanced Todo component with clickable rows and better visual feedback
  • Improved TodoListOverlay with better form handling and state management
  • Persistence for last viewed todo list

🏗️ Backend Architecture Refactoring

  • Three-layer architecture: todo-persistence (database), todo-provider (business logic), todo-controller (API endpoints)
  • 39 comprehensive unit tests with proper mocking and error handling
  • Cleaned up duplicate module naming
  • Improved error handling with NestJS HTTP exceptions
  • Atomic updates with optimistic locking to prevent race conditions

🔧 Bug Fixes & Improvements

  • Fixed missing sync when re-adding todos from history
  • Fixed bi-directional sync issue with reactive $effect
  • Fixed Toggle component error by converting derived to state variable
  • Fixed blank display in category view for empty lists
  • Fixed list selection after deletion
  • Fixed TOCTOU race condition in shared list updates
  • Fixed DELETE request 400 error by removing Content-Type header
  • Removed duplicate CSS blocks and unused code

🌐 Translations

  • Updated German and English translations for all new features
  • Added emoji picker UI translations

Technical Details

Frontend Changes

  • Migrated todo components to Svelte 5 runes syntax ($props, $state, $derived, $effect)
  • Created dedicated API module (todo.api.ts) following project patterns
  • Updated all components with proper type safety
  • Fixed all TypeScript errors and accessibility warnings

Backend Changes

  • Created @backend/todo-persistence, @backend/todo-provider, @backend/todo-controller modules
  • Added comprehensive test coverage (39 tests, all passing)
  • Updated endpoints to be public (no auth required) for GET, POST, PUT, DELETE
  • Implemented version-based conflict resolution

Testing

  • ✅ All backend tests passing (39 tests)
  • ✅ Frontend type checks passing
  • ✅ ESLint checks passing

CHANGELOG Updated

All changes documented in CHANGELOG.md under [Unreleased] section.

🤖 Generated with Claude Code

timlohse1104 and others added 10 commits February 23, 2026 00:39
- Add optional 'amount' property to todos (max 10 chars, default '1x')
- Display amount between checkbox and title
- Add right-click/long-press context menu for renaming todos
- Implement inline rename mode with amount and title editing
- Add X button to history tags for easy deletion
- Add translations for rename action (de/en)
- Ensure backwards compatibility (auto-add amount to existing todos)
- Fix Enter key behavior in rename mode (doesn't toggle checkbox)
- Add proper accessibility attributes and keyboard navigation
- Remove unused CSS selectors

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
• Added category field to todos with 'Uncategorized' default
• Implemented view toggle (Classic/By Category) with Carbon Toggle
• Replaced custom context menu with Carbon ContextMenu (like memorandum)
• Added amount input field to todo creation with '1x' default
• Refactored translations for 'Anzahl'/'Amount' consistency
• Fixed reactivity issues in view mode switching
• Improved edit UI with Carbon components and ESC key support
• Added yellow cancel button with Close icon
• Fixed flex layout for TextInput inner elements
• Maintained full backwards compatibility
• Added comprehensive TypeScript types and JSDoc comments

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implements full shared todo list functionality with collaborative editing, server-side deletion, and automatic cross-user synchronization.

Backend:
- Add todo controller, service, MongoDB service, and DTOs for shared lists
- Implement atomic updates with optimistic locking to prevent race conditions
- Add public endpoints for GET, POST, PUT, DELETE operations
- Fix MongoDB schema to use auto-generated ObjectIds instead of UUIDs
- Add proper NestJS HTTP exceptions (NotFoundException, ConflictException)

Frontend:
- Add dedicated API module (todo.api.ts) following project patterns
- Implement pull-based polling (5s per-list, 10s global) for real-time sync
- Add deletion confirmation modal with bilingual warnings
- Implement server-side deletion for shared lists
- Add cross-user deletion detection with automatic list removal
- Add conflict resolution notifications with auto-merge
- Add import/export functionality with duplicate detection
- Improve UI with category view as default and list persistence

Features:
- Share lists via unique IDs for collaborative editing
- Automatic sync across browsers with version conflict detection
- Delete shared lists with confirmation (affects all users)
- Convert shared lists back to local-only mode
- Detect and notify when lists are deleted by other users
- Category-based organization with General/Done sections
- Persistent last-viewed list across page reloads

Fixes:
- Fix TOCTOU race condition in updates with atomic findOneAndUpdate
- Fix DELETE 400 error by removing Content-Type header from bodyless requests
- Fix bi-directional sync with reactive $effect instead of onMount
- Fix TypeScript errors with proper ObjectId typing and type assertions
- Fix missing history field persistence in updates

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…nt handlers.

Removed unnecessary onclick, onkeydown, and role attributes from edit-container div. The parent section already handles click disabling when in edit mode, making these handlers redundant and causing a11y warnings.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added proper ARIA attributes (role, tabindex, aria-label, aria-valuenow, aria-valuemin, aria-valuemax) to interactive color picker sliders to comply with a11y requirements.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- ColorPicker: Added lang="ts", fixed Number.prototype.mod, proper HTMLElement type casting
- Admin components: Added missing imports (fade, dispatch replacement)
- DebugInformation: Made selectedModel bindable
- Cards: Added showInHand() method to base Card class
- Navigation: Fixed icon type with Component type
- ToggledApplicationInfo: Changed icon size from 64 to 32
- Admin layout: Fixed async effect.root issue
- Uno-sort: Changed label to labelText for NumberInput
- Route type: Changed icon type from unknown to Component

Reduced errors from 48 to 0. Only warnings remain.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Replaced deprecated <svelte:component> with direct component rendering using {@const}
- Replaced deprecated <slot> with {@render children()} in admin layout
- Removed unused CSS selectors:
  * Todo.svelte: .save-btn, .cancel-btn styles
  * TodoInput.svelte: .add-button
  * TodoListOverlay.svelte: .shared_id_input
  * BackgroundColorPicker.svelte: section span
  * OnlinePersistenceCheck.svelte: .online_persistence_toggle

Result: 0 errors, 0 warnings, clean codebase! ✨

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…rage

- Restructured backend into three-layer architecture:
  - todo-persistence: Database operations with TodoPersistenceService
  - todo-provider: Business logic with TodoProviderService
  - todo-controller: REST API endpoints with TodoController
- Added 39 comprehensive unit tests across all three layers
  - 16 tests for persistence layer (CRUD, optimistic locking, conflicts)
  - 15 tests for provider layer (business logic, error handling)
  - 8 tests for controller layer (endpoint behavior, DTO mapping)
- Cleaned up duplicate naming in module files:
  - Renamed todo-todo-*.module.ts to todo-*.module.ts
  - Updated all class names (TodoTodoControllerModule → TodoControllerModule)
  - Updated TypeScript path aliases in tsconfig.base.json
  - Updated NX project names in project.json files
- Fixed Jest config to properly handle async configuration
- Updated CHANGELOG with all architectural improvements

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Created shared EmojiPicker component with inline expandable dropdown UI
- Added bilingual keyword search (EN/DE) for 200+ common emojis
- Organized emoji data into categories: Smileys, Animals, Food, Activities, Travel, Symbols, Flags
- Refactored emoji data into separate utility module (emoji-data.ts) for reusability
- Integrated emoji picker into todo list creation and edit modals
- Updated TodoListOverlay layout to vertical flex direction
- Added translations for emoji picker UI in English and German

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@tilloh-dev
tilloh-dev merged commit cac4f0c into main Feb 24, 2026
2 checks passed
@tilloh-dev
tilloh-dev deleted the feature/todo-enhancements branch February 24, 2026 23:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant