From 933440f3271d9d0ecedcb5b6d2d42047896f34ff Mon Sep 17 00:00:00 2001
From: Michele <michele@mlhub.it>
Date: Sun, 1 Feb 2026 17:13:32 +0100
Subject: [PATCH] docs: Add design system and basePath troubleshooting to
 CLAUDE.md

- Document Editorial Fresh design system (fonts, colors, classes)
- Add basePath gotchas for middleware and email redirect
- Update phase 1 status with design system note

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 CLAUDE.md | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 102 insertions(+), 1 deletion(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 832b5bf..45e4b28 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -116,6 +116,37 @@ const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://lab.mlhub.it/leopost
 return NextResponse.redirect(`${baseUrl}${next}`)
 ```
 
+### 6. Middleware Redirect Senza basePath
+**Problema:** Middleware redirect a `/login/` invece di `/leopost/login/` → 404.
+**Causa:** `new URL('/login/', request.url)` non include il basePath.
+**Soluzione:** Usare `request.nextUrl.clone()`:
+```typescript
+// middleware.ts
+// ❌ SBAGLIATO
+const redirectUrl = new URL('/login/', request.url)
+
+// ✅ CORRETTO
+const redirectUrl = request.nextUrl.clone()
+redirectUrl.pathname = '/login/'
+return NextResponse.redirect(redirectUrl)
+```
+
+### 7. Email Conferma Redirect Errato
+**Problema:** Link conferma email reindirizza a `lab.mlhub.it/auth/callback` senza basePath.
+**Causa:** `window.location.origin` non include basePath.
+**Soluzione:** Usare `NEXT_PUBLIC_APP_URL`:
+```typescript
+// src/components/auth/register-form.tsx
+const appUrl = process.env.NEXT_PUBLIC_APP_URL || window.location.origin
+
+await supabase.auth.signUp({
+  email, password,
+  options: {
+    emailRedirectTo: `${appUrl}/auth/callback/`,
+  }
+})
+```
+
 ---
 
 ## Configurazione Supabase Dashboard
@@ -153,9 +184,79 @@ ssh mic@72.62.49.98 "docker exec nginx-proxy-app-1 tail -30 /data/logs/proxy-hos
 
 ---
 
+## Design System: "Editorial Fresh"
+
+Il progetto usa un design system personalizzato chiamato "Editorial Fresh" - ispirato al design editoriale/magazine con tipografia forte e layout distintivo.
+
+### Font
+| Tipo | Font | Uso |
+|------|------|-----|
+| Display | **Fraunces** | Titoli, heading (serif con carattere) |
+| Body | **DM Sans** | Testo, paragrafi, UI |
+
+```css
+.font-display { font-family: var(--font-display); }
+.font-body { font-family: var(--font-body); }
+```
+
+### Palette Colori
+| Nome | Valore | CSS Variable | Uso |
+|------|--------|--------------|-----|
+| Cream | `#FFFBF5` | `--color-cream` | Background principale |
+| Cream Dark | `#F5F0E8` | `--color-cream-dark` | Background secondario |
+| Ink | `#1A1A1A` | `--color-ink` | Testo principale, bottoni |
+| Ink Light | `#4A4A4A` | `--color-ink-light` | Testo secondario |
+| Ink Muted | `#7A7A7A` | `--color-ink-muted` | Testo disabilitato |
+| Accent | `#E85A4F` | `--color-accent` | CTA, elementi distintivi (corallo) |
+| Success | `#2D7A4F` | `--color-success` | Conferme |
+| Error | `#C53030` | `--color-error` | Errori |
+
+### Classi Utility Custom
+```css
+/* Testi */
+.text-accent     /* Corallo */
+.text-muted      /* Grigio chiaro */
+.text-ink        /* Nero */
+.text-ink-light  /* Grigio scuro */
+
+/* Background */
+.bg-cream        /* Sfondo principale */
+.bg-cream-dark   /* Sfondo alternativo */
+.bg-accent-light /* Sfondo accent leggero */
+
+/* Elementi editoriali */
+.editorial-tag   /* Tag uppercase corallo (SOCIAL MEDIA MANAGER) */
+.editorial-line  /* Linea decorativa 60px × 3px corallo */
+.card-editorial  /* Card con barra accent in cima */
+```
+
+### Componenti
+| Componente | File | Note |
+|------------|------|------|
+| Button | `src/components/ui/button.tsx` | Varianti: default, outline, ghost, accent |
+| Input | `src/components/ui/input.tsx` | Bordi quadrati, focus nero |
+| Card Editorial | CSS class | Bordo top accent, padding 2rem |
+
+### Principi di Design
+1. **Niente bordi arrotondati** - Stile editoriale con angoli vivi
+2. **Tipografia forte** - Fraunces per impatto, DM Sans per leggibilità
+3. **Spazio generoso** - Padding abbondante, respiro tra elementi
+4. **Accent limitato** - Corallo usato con parsimonia per CTA e emphasis
+5. **Animazioni sottili** - fade-up on load, transizioni 200ms
+
+### Come Mantenere Coerenza
+Quando crei nuove pagine/componenti:
+1. Usa `font-display` per tutti i titoli
+2. Usa le classi `text-*` e `bg-*` del design system
+3. Bottoni principali con `variant="default"` (nero → accent on hover)
+4. Form inputs senza border-radius
+5. Ogni sezione inizia con `editorial-tag` + titolo `font-display`
+
+---
+
 ## Stato Fasi
 
-- [x] **Fase 1:** Autenticazione (Email/Password + Google OAuth)
+- [x] **Fase 1:** Autenticazione (Email/Password + Google OAuth) + Design System
 - [ ] **Fase 2:** Dashboard e gestione account social
 - [ ] **Fase 3:** Creazione e scheduling post
 - [ ] **Fase 4:** Integrazione AI per generazione contenuti