e8a93526a2
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
116 lines
5.1 KiB
Markdown
116 lines
5.1 KiB
Markdown
---
|
|
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*
|