task-manager/walkthrough.md

Walkthrough - Internationalization Updates

I have implemented full internationalization support for the "Focus Mode", "Tasks" page calendar, and "Week" page.

Changes

1. Translation Infrastructure

• Created useDateLocale hook client/src/hooks/use-date-locale.ts to automatically provide the correct date-fns locale (English or German) based on the active language.
• Updated en.json and de.json with new translation keys for Focus Mode.

2. Focus Mode (client/src/components/FocusMode.tsx)

• Replaced all hardcoded text (Greetings, Statistics headers, "View All" card, "Focus List" headers) with dynamic translations.
• Greeting now correctly switches between "Good morning/afternoon/evening" and "Guten Morgen/Tag/Abend" based on time of day and language.

3. Tasks Calendar (client/src/components/TasksWithCalendar.tsx)

• Fixed previous syntax errors in the component.
• Implemented useDateLocale to format the calendar dates (Day names, Month names) in the selected language.
• Preserved all original functionality (Drag & Drop, Context Menus).

4. Week View (client/src/components/WeekListView.tsx)

• Implemented useDateLocale to format the week range and day headers in the selected language.
• Added translation hooks for all static text.

5. Settings & Persistence

• Verified that language selection in Settings is persisted to localStorage.
• Note: A page reload might be required for date formats to fully update if the language is changed dynamically, although the text should update immediately.

Verification

Automated Verification

• Browser tests confirmed that changing the language in Settings updates the UI (Sidebar).
• Persistence was verified (Sidebar remained in German after reload).
• FocusMode and Calendar translations were updated to use the robust locale hook.

Manual Verification Steps

1. Go to Settings and switch language to German.
2. Reload the page (ensure persistence works).
3. Check Focus Mode: Greeting should be "Guten Tag" (depending on time).
4. Check Tasks: Calendar days should be "Mo, Di, Mi...".
5. Check Week: Calendar headers should be "Mo, Di, Mi...".

6. Gamification & Advanced Tasks Verification

• Goals API: Verified POST /api/goals handles creation correctly.
• Achievements Page: Verified UI for Goals and Analytics.
• Energy & Duration: Fixed a bug where Energy Level and Duration were not persisting. Verified "High Energy" badge appears on task card.

7. Gamification Polish

• Translations: Fully translated Achievements page, including "from last week" and Goal placeholders.
• UI Improvements:
  • Fixed "Double Flame" issue.
  • Made Gamification Bar clickable to show Level Details Modal with correct translated reward text ("Erweiterte Analysen...").
  • Enabled Monthly analytics tab with data fetching.
• Level Logic: Implemented consistent XP/Level calculation logic.

(Note: Latest translations for modal reward text and "from last week" are applied in code and build, requiring container restart to view)

8. Analytics & Roadmap

• Analytics Fixes:
  • Enabled Monthly view (previously hidden).
  • Fully translated all chart labels ("Mo/Di", "Jan/Feb").
  • Refined UI: Added Glassmorphism Tooltips and Calendar Week ("KW") labels for monthly view.
  • Label Fix: Implemented robust handling for both legacy "Week X" data and new "KW 50" numeric data.
  • CRITICAL FIX: Rebuilt Docker image to ensure server-side API changes Propagated.
• Reward Shop (Implemented):
  • Added rewards and user_rewards tables.
  • Implemented POST /api/rewards/buy with XP deduction logic.
  • Created RewardCard UI with "Buy" / "Owned" states.
  • Added "Rewards" tab to Achievements page.
  • Note: Database schema update (npm run db:push) is pending (requires manual confirmation).
• Roadmap: Created .

9. Calendar Refinements

• Week Numbers: Added "KW {Number}" badge to the Calendar Header.
• Grid View: Added Week Number indicators to the start of each week (Mondays) in the calendar grid.