haos-hacs-immich-album-watcher/plans/phase-7-production-ui.md

Phase 7: Production-Ready UI & Full Blueprint Feature Parity

Status: Planning Parent: primary-plan.md

---

Goal

Transform the web UI into a production-ready application with i18n, theming, OAuth, and full feature parity with the HAOS blueprint's 4 notification modes.

---

Scope Summary

A. Frontend Enhancements

1. i18n: RU/EN locale support with language switcher
2. Theming: Light/dark mode toggle with system preference detection
3. OAuth: Login via Immich OAuth (reuse existing Immich auth)

B. Backend: New Notification Modes (from Blueprint)

4. Periodic Summary: Scheduled album summaries (daily/weekly/custom interval)
5. Scheduled Assets: Send random/curated photos on a schedule
6. Memory Mode: "On This Day" notifications from previous years

C. Backend: Enhanced Tracker Configuration

7. Asset filtering: type (photo/video), favorites only, min rating, date range
8. Asset sorting: by date/rating/name/random, ascending/descending
9. Truncation: max assets to show, "...and X more" message
10. Telegram media config: max media count, group size, chunk delay, size limits, video warning

D. Backend: Enhanced Message Templates

11. Per-event templates: separate templates for added/removed/renamed/deleted
12. Formatting sub-templates: asset item (image/video), people format, assets list wrapper
13. Date/location formatting: common date detection, per-asset dates, location format
14. 40+ template variables matching the blueprint

E. OAuth Integration

15. Immich OAuth provider: Login using Immich server credentials
16. OAuth flow: redirect to Immich -> callback -> create/link user

---

Tasks

A1. i18n Setup [ ]

• Install svelte-i18n or custom i18n store
• Create $lib/i18n/en.json and $lib/i18n/ru.json translation files
• Language switcher in sidebar footer
• Persist language preference in localStorage
• Translate all UI strings (~100 keys)

A2. Dark/Light Theme [ ]

• CSS variables for dark theme in app.css
• Theme toggle in sidebar header
• Persist preference in localStorage
• Respect prefers-color-scheme as default

A3. OAuth Support [ ]

• Backend: GET /api/auth/oauth/immich -> redirect to Immich OAuth
• Backend: GET /api/auth/oauth/callback -> exchange code, create/link user
• Backend: Store OAuth config (Immich server URL, client ID) in settings
• Frontend: "Login with Immich" button on login page
• Backend: POST /api/auth/oauth/config (admin) -> configure OAuth

B1. Periodic Summary Mode [ ]

• New DB model: ScheduledJob (type, tracker_id, interval_days, start_date, times, enabled)
• APScheduler cron jobs for summary notifications
• Template: periodic_summary_message, periodic_album_template
• API: CRUD for scheduled jobs per tracker
• Frontend: Scheduled notifications tab in tracker edit form

B2. Scheduled Assets Mode [ ]

• Uses same ScheduledJob model with type="scheduled_assets"
• Fetch assets via core filter_assets + sort_assets
• Album modes: per_album, combined, random
• Config: limit, favorite_only, asset_type, min_rating, date range, order_by, order

B3. Memory Mode [ ]

• Uses same ScheduledJob model with type="memory"
• Fetch assets using memory_date filter (same month/day, different year)
• Album modes: per_album, combined, random
• Config: limit, favorite_only, asset_type, min_rating

C1. Enhanced Tracker Config [ ]

• Add to AlbumTracker model:
  • track_images, track_videos (bool)
  • notify_favorites_only (bool)
  • include_people, include_asset_details (bool)
  • max_assets_to_show (int)
  • assets_order_by, assets_order (str)
• Update tracker form in frontend with these fields
• Update watcher to apply filters before notification

C2. Telegram Media Config [ ]

• Add to NotificationTarget config (for telegram type):
  • max_media_to_send, max_media_per_group, media_delay
  • max_asset_size, video_warning, disable_url_preview, chat_action
  • send_large_photos_as_documents
• Update notifier to pass these to TelegramClient
• Frontend: Telegram-specific config section in target form

D1. Per-Event Templates [ ]

• Extend MessageTemplate model with event_type field
• Templates per event: assets_added, assets_removed, album_renamed, album_deleted
• Sub-templates: asset_image, asset_video, people_format, assets_wrapper
• Default templates seeded on first run

D2. Template Variable System [ ]

• Implement all 40+ variables from blueprint
• Date formatting (configurable strftime format)
• Common date/location detection across assets
• Favorite indicator, rating display
• Location formatting (city, state, country)
• "...and X more" truncation

---

Estimated Scope

This is equivalent to ~3 full phases of work. Recommend implementing in order:

1. A1+A2 (i18n + themes) -- visual foundation
2. A3 (OAuth) -- auth enhancement
3. C1+C2 (tracker + telegram config) -- backend enrichment
4. D1+D2 (templates) -- notification intelligence
5. B1+B2+B3 (scheduled modes) -- new notification modes

---

Acceptance Criteria

• UI works in Russian and English with persistent preference
• Dark and light themes with system preference detection
• OAuth login via Immich server
• All 4 notification modes functional (event, periodic, scheduled, memory)
• Tracker config matches blueprint capabilities
• Template system supports 40+ variables with per-event templates
• Telegram media config fully exposed in UI