docs(04-02): complete Frontend Unsplash UI plan

Tasks completed: 2/2 - Task 1: Types + Settings page + hooks per Unsplash - Task 2: Thumbnail PostCard + hint OutputReview SUMMARY: .planning/phases/04-enrichment/04-02-SUMMARY.md
2026-03-09 08:18:47 +01:00
parent f154f1b2f6
commit e8a93526a2
2 changed files with 134 additions and 16 deletions
--- a/.planning/phases/04-enrichment/04-02-SUMMARY.md
+++ b/.planning/phases/04-enrichment/04-02-SUMMARY.md
@@ -0,0 +1,115 @@
+---
+phase: 04-enrichment
+plan: 02
+subsystem: ui
+tags: [react, typescript, unsplash, thumbnail, settings, tanstack-query]
+
+# Dependency graph
+requires:
+  - phase: 04-01
+    provides: UnsplashService backend + unsplash_api_key in Settings schema + image_url_map nel job JSON
+
+provides:
+  - Campo API Key Unsplash in pagina Settings con sezione dedicata "Immagini"
+  - Thumbnail cover image in PostCard (80x56px) quando cover_image_keyword e' un URL reale
+  - Hint discreto in OutputReview che suggerisce di configurare Unsplash se non presente
+  - Types aggiornati: Settings con unsplash_api_key, SettingsStatus con unsplash_api_key_configured
+
+affects:
+  - deploy (frontend pronto per deploy completo fase 4)
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - "Logica di submit difensiva: campi API key non inviati se vuoti (evita sovrascrittura)"
+    - "Hint contestuali condizionali via useSettingsStatus (scompaiono quando risolto)"
+    - "Thumbnail lazy con onError fallback (nasconde immagine se URL non valido)"
+    - "Rilevamento URL reale via startsWith('http') — pattern semplice e affidabile"
+
+key-files:
+  created: []
+  modified:
+    - frontend/src/types.ts
+    - frontend/src/pages/Settings.tsx
+    - frontend/src/components/PostCard.tsx
+    - frontend/src/pages/OutputReview.tsx
+
+key-decisions:
+  - "Pattern Link da react-router-dom (non useNavigate) per navigazione a /impostazioni — coerente col codebase"
+  - "showUnsplashKey state separato da showApiKey — toggle indipendenti per le due API key"
+  - "Thumbnail 80x56px (w-20 h-14) — anteprima sufficiente senza appesantire la pagina con 13 immagini"
+  - "Hint OutputReview volutamente discreto (text-stone-600) — non aggressivo, scompare silenziosamente"
+
+patterns-established:
+  - "Tutti i campi API key: non pre-popolati nel form, non inviati se vuoti, reset dopo salvataggio"
+  - "useSettingsStatus() come fonte di verita' per feature-gating UI (configured vs not)"
+
+# Metrics
+duration: 3min
+completed: 2026-03-09
+---
+
+# Phase 4 Plan 02: Frontend Unsplash — Settings, Thumbnail, Hint Summary
+
+**Campo Unsplash API key in Settings, thumbnail cover image 80x56px in PostCard, e hint contestuale in OutputReview con Link a /impostazioni**
+
+## Performance
+
+- **Duration:** ~3 min
+- **Started:** 2026-03-09T07:14:26Z
+- **Completed:** 2026-03-09T07:17:09Z
+- **Tasks:** 2
+- **Files modified:** 4
+
+## Accomplishments
+
+- Types TypeScript aggiornati: `unsplash_api_key` in `Settings`, `unsplash_api_key_configured` in `SettingsStatus`
+- Pagina Settings: nuova sezione "Immagini" con input API Key Unsplash, toggle visibilita' indipendente, helper text condizionale (diverso se key configurata o no), logica submit identica a API Key Claude (non invia se vuota)
+- PostCard: thumbnail 80x56px della cover image visibile solo quando `cover_image_keyword` e' un URL reale (`startsWith('http')`), con `loading="lazy"` e `onError` per fallback silenzioso
+- OutputReview: hint discreto con Link a `/impostazioni` visibile solo quando `unsplash_api_key_configured === false`, scompare automaticamente dopo configurazione
+
+## Task Commits
+
+Ogni task e' stato committato atomicamente:
+
+1. **Task 1: Types + Settings page + hooks per Unsplash** - `d537c03` (feat)
+2. **Task 2: Thumbnail PostCard + hint OutputReview** - `f154f1b` (feat)
+
+**Plan metadata:** (doc commit segue)
+
+## Files Created/Modified
+
+- `frontend/src/types.ts` - Aggiunto `unsplash_api_key` a Settings, `unsplash_api_key_configured` a SettingsStatus
+- `frontend/src/pages/Settings.tsx` - Sezione "Immagini" con campo Unsplash API key, state showUnsplashKey, logica submit, reset post-salvataggio
+- `frontend/src/components/PostCard.tsx` - Thumbnail condizionale dopo cover_title nella sezione SUCCESS
+- `frontend/src/pages/OutputReview.tsx` - Import Link e useSettingsStatus, hint discreto Unsplash con Link a /impostazioni
+
+## Decisions Made
+
+- **Link vs navigate():** Usato `Link` da `react-router-dom` con `to="/impostazioni"` (pattern usato in tutto il codebase, es. Dashboard, GenerateCalendar, GenerateSingle) — non introdotto `useNavigate` che non era necessario
+- **showUnsplashKey separato:** State `showUnsplashKey` indipendente da `showApiKey` — ogni campo API key ha il proprio toggle, coerente con comportamento atteso
+- **Thumbnail size 80x56px:** `w-20 h-14` — abbastanza grande per dare un'anteprima visiva significativa, abbastanza piccolo da non dominare la card con 13 post in pagina
+- **Hint discreto stone-600:** Testo volutamente sottotono, non un warning aggressivo. Colore amber solo sul link di azione
+
+## Deviations from Plan
+
+Nessuna — piano eseguito esattamente come scritto.
+
+## Issues Encountered
+
+Nessuno.
+
+## User Setup Required
+
+None — l'API key Unsplash si configura ora direttamente dalla UI in Settings.
+
+## Next Phase Readiness
+
+- Frontend completo per tutte le 4 fasi (core generation, prompt control, organization, enrichment)
+- Pronto per `vps-lab-deploy` per testing end-to-end completo
+- Per testare Unsplash: configurare API key in Settings, avviare generazione bulk, verificare thumbnail in OutputReview e URL immagini nel CSV scaricato
+
+---
+*Phase: 04-enrichment*
+*Completed: 2026-03-09*