Koko210/immich-folio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement album-level password protection

Browse Source
This commit is contained in:
ralksta
2026-04-07 23:04:03 +02:00
parent e739fdb518
commit 17398dea39
16 changed files with 168 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
.planning/ui-reviews/UI-REVIEW.md
View File

@@ -8,14 +8,14 @@
## Pillar Scores
| Pillar | Score | Key Finding |
|--------|-------|-------------|
| 1. Copywriting | 3/4 | Error states use generic 'Something went wrong'. |
| 2. Visuals | 3/4 | Standard component structures, but icon accessibility could be improved. |
| 3. Color | 2/4 | Heavy use of hardcoded colors in `DevToolbar.tsx`. |
| 4. Typography | 3/4 | Uses custom CSS styles rather than utility classes; mostly consistent. |
| 5. Spacing | 3/4 | Uses custom CSS styles; no major arbitrary inline spacing found. |
| 6. Experience Design | 3/4 | Good coverage of loading/error states in MapView and PasswordGate. |
| Pillar | Score | Key Finding |
| -------------------- | ----- | ------------------------------------------------------------------------ |
| 1. Copywriting | 3/4 | Error states use generic 'Something went wrong'. |
| 2. Visuals | 3/4 | Standard component structures, but icon accessibility could be improved. |
| 3. Color | 2/4 | Heavy use of hardcoded colors in `DevToolbar.tsx`. |
| 4. Typography | 3/4 | Uses custom CSS styles rather than utility classes; mostly consistent. |
| 5. Spacing | 3/4 | Uses custom CSS styles; no major arbitrary inline spacing found. |
| 6. Experience Design | 3/4 | Good coverage of loading/error states in MapView and PasswordGate. |
**Overall: 17/24**
@@ -32,30 +32,37 @@
## Detailed Findings
### Pillar 1: Copywriting (3/4)
- **PasswordGate.tsx**: Uses standard CTA ('Enter', 'Verifying...') but error state falls back to generic "Something went wrong" at line 40.
### Pillar 2: Visuals (3/4)
- Components use semantic HTML for the most part. SVG icons in `ThemeToggle`, `Lightbox`, and `Footer` lack robust `aria-label` alternatives for screen readers in some instances.
### Pillar 3: Color (2/4)
- **DevToolbar.tsx**: Contains over 20 distinct hardcoded hex values (clues: `#e60012`, `#e4e4e7`, `#166534`, `#ff6b35`). This violates the single-source-of-truth theme approach.
- **Lightbox / SetupScreen**: Minimal hardcoded values used for fallback (`#000`, `#ffffff`).
### Pillar 4: Typography (3/4)
- Exclusively uses CSS module classes rather than utility variables.
- Some inline font sizes exist (e.g., `fontSize: 10` in DevToolbar).
### Pillar 5: Spacing (3/4)
- Relies cleanly on CSS modules.
- Only a few inline spacing overrides (e.g., `marginTop: 6` in DevToolbar).
### Pillar 6: Experience Design (3/4)
- **PasswordGate.tsx**: Correctly disables the submit button and indicates processing state (`loading ? 'Verifying...' : 'Enter'`).
- **MapView.tsx**: Handles API mapping errors gracefully (`error && <p>{error}</p>`).
---
## Files Audited
- `app/api/auth/route.ts`
- `app/api/health/route.ts`
- `components/PasswordGate.tsx`