# Comment ajouter une nouvelle page full layout

Ce document décrit comment ajouter une nouvelle page principale dans le shell (DashboardLayout) et sa story full layout dans Storybook.

## Prérequis

- La page doit être rendue dans le même shell que Dashboard, Playlists, Library, Settings, Profile : **DashboardLayout** (voir [APP_SHELL.md](APP_SHELL.md)).
- Les routes protégées utilisent `wrapProtected` dans [routeConfig.tsx](../src/router/routeConfig.tsx), qui enveloppe le contenu avec `ProtectedLayoutRoute` → `DashboardLayout`.

## Étapes

### 1. Route

Dans [routeConfig.tsx](../src/router/routeConfig.tsx) :

- Importer (lazy) le composant de page depuis `LazyComponent` ou l’ajouter dans [lazy-component/lazyExports.ts](../src/components/ui/lazy-component/lazyExports.ts).
- Ajouter une entrée dans `getProtectedRoutes()` :  
  `{ path: '/votre-page', element: wrapProtected(<LazyVotrePage />) }`.

### 2. Story full layout

Dans [DashboardLayout.stories.tsx](../src/components/layout/DashboardLayout.stories.tsx) :

- Importer la page :  
  `import { VotrePage } from '@/features/...';`
- Ajouter une story sur le même modèle que `LibraryFullLayout` ou `SettingsFullLayout` :

```tsx
export const VotrePageFullLayout: Story = {
  name: 'Votre page – full layout',
  render: () => (
    <DashboardLayout>
      <VotrePage />
    </DashboardLayout>
  ),
  parameters: {
    layout: 'fullscreen',
    router: { initialEntries: ['/votre-page'] },
  },
};
```

### 3. MSW (handlers)

Si la page charge des données via l’API, ajouter ou réutiliser les handlers dans [handlers.ts](../src/mocks/handlers.ts) pour éviter un loading infini dans Storybook (ex. `http.get('*/api/v1/votre-resource', ...)`).

### 4. Viewport

Les stories full layout utilisent le viewport par défaut du meta (desktop). Les captures visuelles Playwright utilisent 1280×720 (voir [visual-tests/README.md](../visual-tests/README.md)). Aucune config supplémentaire n’est nécessaire pour une nouvelle story.

### 5. Validation visuelle (optionnel)

Pour inclure la page dans la régression visuelle :

- Ajouter une entrée dans `SCREENS` dans [e2e/visual-complete.spec.ts](../e2e/visual-complete.spec.ts) si vous voulez une capture full page (ex. `{ name: 'votre-page', url: '/votre-page', auth: true, full: true }`).
- Lancer `npm run visual:capture` puis `npm run visual:compare` ; si les changements sont validés, `npm run visual:update` et committer les baselines.

## Règles UI

- Pas de valeurs arbitraires (w-[...], h-[...], gap-[...], etc.) : utiliser l’échelle Tailwind ou les tokens (voir [DESIGN_TOKENS.md](DESIGN_TOKENS.md)).
- Espacements et typo : respecter [SPACING_GUIDE.md](SPACING_GUIDE.md) et la hiérarchie dans DESIGN_TOKENS.md.