alexei.dolgolyov/haos-hacs-immich-album-watcher

Files

Validate / Hassfest (push) Successful in 3s

Details

Fix template variable docs to match actual notifier output

Audit and fix all template variable references:
- template_vars.py: Add missing fields (album_id, old_shared,
  new_shared, latitude, longitude, owner_id, people per asset)
- _SAMPLE_CONTEXT: Use proper structured data matching
  build_asset_detail() output (id, owner_id, latitude, longitude,
  people per asset, playback_url for videos)
- i18n: Fix all variable descriptions for accuracy, add missing
  fields, mark scheduler-dependent slots as "not yet implemented"
- Variables modal: Add album_fields section for periodic_summary
- Shared _ASSET_FIELDS and _ALBUM_FIELDS dicts in template_vars.py
  to keep scheduled/memory slots DRY

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-19 20:58:21 +03:00

3.8 KiB

Raw Blame History

Phase 11: Snackbar Notifications

Status: Pending Parent: primary-plan.md

Goal

Replace browser alert() calls, silent failures, and inconsistent error handling with a unified snackbar/toast notification system. Every user-triggered action (save, delete, test, etc.) should provide clear visual feedback via a dismissable snackbar that appears at the bottom of the screen.

Design

Snackbar Types

Type	Color	Icon	Auto-dismiss	Use Case
`success`	Green	`mdiCheckCircle`	3s	Save, delete, test passed
`error`	Red	`mdiAlertCircle`	5s (or manual)	API errors, validation failures
`info`	Blue	`mdiInformation`	3s	Status updates, copy-to-clipboard
`warning`	Amber	`mdiAlert`	4s	Non-critical issues, deprecation notices

Behavior

Appears at bottom-center of viewport, above the mobile nav bar
Stacks vertically (newest on top, max 3 visible)
Slide-up entrance, fade-out exit animation
Manual dismiss via X button on all types
Errors with detail: expandable to show full error message
position: fixed with inline styles (per project convention)

Implementation Plan

Task 1: Create Snackbar Store + Component

Files to create:

frontend/src/lib/stores/snackbar.svelte.ts — reactive store using $state
- addSnack(type, message, options?) — push notification
- removeSnack(id) — dismiss
- snacks — reactive array of active notifications
- Auto-dismiss timer per snack
frontend/src/lib/components/Snackbar.svelte — renders snack stack
- Fixed position at bottom-center
- Svelte transitions (fly + fade)
- Icon per type, dismiss button, optional detail expand
- Responsive: full-width on mobile, max-width on desktop

Task 2: Mount Snackbar in Layout

Files to modify:

frontend/src/routes/+layout.svelte — add <Snackbar /> component (renders globally)

Task 3: Replace All Alert/Silent Patterns

Files to modify (each page):

Page	Current Pattern	Replace With
`servers/+page.svelte`	`alert()` on error, silent success	`snack.success('Server saved')`, `snack.error(err.message)`
`trackers/+page.svelte`	`alert()` on error, silent success	`snack.success('Tracker created')`, etc.
`targets/+page.svelte`	`alert()` on error, silent success	`snack.success('Target saved')`, `snack.error(...)`
`template-configs/+page.svelte`	`alert()` on error, silent success	`snack.success('Template saved')`, etc.
`tracking-configs/+page.svelte`	`alert()` on error, silent success	`snack.success('Config saved')`, etc.
`telegram-bots/+page.svelte`	`alert()` on error, silent success	`snack.success('Bot registered')`, etc.
`users/+page.svelte`	`alert()` on error, silent success	`snack.success('User updated')`, etc.
`login/+page.svelte`	`alert()` on error	`snack.error('Invalid credentials')`

Task 4: Add i18n Keys