diff --git a/plans/phase-7-production-ui.md b/plans/phase-7-production-ui.md new file mode 100644 index 0000000..c877f80 --- /dev/null +++ b/plans/phase-7-production-ui.md @@ -0,0 +1,138 @@ +# Phase 7: Production-Ready UI & Full Blueprint Feature Parity + +**Status**: Planning +**Parent**: [primary-plan.md](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 diff --git a/plans/primary-plan.md b/plans/primary-plan.md index 398bb19..2ca264d 100644 --- a/plans/primary-plan.md +++ b/plans/primary-plan.md @@ -206,6 +206,15 @@ async def _execute_telegram_notification(self, ...): - **Subplan**: `plans/phase-5-haos-server-sync.md` ### Phase 6: Claude AI Telegram Bot Enhancement (Optional) `[x]` +- Conversational bot, AI captions, album summaries +- **Subplan**: `plans/phase-6-claude-ai-bot.md` + +### Phase 7: Production UI & Full Blueprint Parity `[ ]` +- i18n (RU/EN), dark/light themes, OAuth via Immich +- 4 notification modes: event-driven, periodic summary, scheduled assets, memory +- Enhanced tracker config (filtering, sorting, telegram media) +- Full template variable system (40+ vars, per-event templates) +- **Subplan**: `plans/phase-7-production-ui.md` - Integrate Claude AI to enhance the Telegram notification bot - Enable conversational interactions: users can ask questions about their albums, get summaries, request specific photos - AI-powered message formatting: intelligent caption generation, album descriptions