# Refonte du système de playground

Date : 2026-05-21
Branche : `feature/MUI-34-revoir-le-systeme-de-playground`

## Contexte

Le playground actuel (`.playground/`) est une **fausse SPA** : une unique page
`index.vue` contient une sidebar codée à la main et charge dynamiquement les
pages de démo via `import.meta.glob` + `<component :is>`. Il n'y a ni vrai
routage, ni layout, et la sidebar ne réutilise pas le composant `MalioSidebar`
de la bibliothèque.

Les pages de démo existent déjà dans `.playground/pages/composant/<catégorie>/<nom>.vue`
mais ne sont pas exploitées comme de vraies routes.

## Objectif

Refondre le playground autour du **vrai routage fichier de Nuxt** et d'un
**layout par défaut** qui embarque le composant `MalioSidebar` de production
(dogfooding du composant).

## Décisions validées

| Sujet | Décision |
|-------|----------|
| Navigation | Vrai routage Nuxt + layout dédié |
| Construction de la sidebar | Liste manuelle centralisée |
| Habillage du layout | Sidebar + contenu seul (épuré, chaque page gère son titre) |
| Page d'accueil | Page de bienvenue simple |
| Surbrillance lien actif | Hors périmètre (MalioSidebar inchangé) |

## Architecture

### 1. Config de navigation centralisée

Nouveau fichier `.playground/playground.nav.ts` exportant un tableau
`SidebarSection[]` (type exporté par `MalioSidebar`). Les sections sont
définies manuellement ; chaque item est un `{ label, to }` pointant vers la
route de démo.

```ts
import type { SidebarSection } from '../app/components/malio/sidebar/Sidebar.vue'

export const navSections: SidebarSection[] = [
  {
    label: 'BOUTONS',
    icon: 'mdi:gesture-tap-button',
    items: [
      { label: 'Button', to: '/composant/button/button' },
      { label: 'Button Icon', to: '/composant/button/buttonIcon' },
    ],
  },
  // … autres sections (Champs, Sélections, Navigation, Données, Divers)
]
```

Les routes correspondent exactement aux fichiers existants dans
`.playground/pages/composant/`. Liste à couvrir :

- **button/** : `button`, `buttonIcon`
- **checkbox/** : `checkbox`
- **radio/** : `radioButton`
- **input/** : `inputText`, `inputNumber`, `inputAmount`, `inputEmail`,
  `inputPassword`, `inputPhone`, `inputTextArea`, `inputAutocomplete`,
  `inputUpload`, `inputRichText`
- **select/** : `select`, `selectCheckbox`
- **time/** : `time`
- **tab/** : `tabList`
- **sidebar/** : `sidebar`
- **drawer/** : `drawer`
- **datatable/** : `datatable`
- **site/** : `siteSelector`
- **form/** : `client`

Le regroupement en sections et les libellés affichés sont au choix du
développeur (manuel). Les routes, elles, sont imposées par les fichiers.

### 2. Layout par défaut

Nouveau fichier `.playground/layouts/default.vue` :

- Conteneur `flex` pleine hauteur (`h-screen`).
- `<MalioSidebar :sections="navSections">` à gauche.
  - Slots `logo` / `logo-collapsed` : logos `LOGO_MALIO.png` /
    `LOGO_MALIO_COLLAPSED.png` (servis depuis le `public/` du layer),
    enveloppés dans un `<NuxtLink to="/">` pour revenir à l'accueil.
  - Collapse géré en interne par le composant (mode non-contrôlé).
- `<main class="flex-1 overflow-y-auto p-6"><slot /></main>` à droite.

Le layout `default` s'applique automatiquement à toutes les pages du
playground — aucune page n'a besoin de `definePageMeta({ layout })`.

### 3. Page d'accueil

`.playground/pages/index.vue` réécrite en page de bienvenue simple :
titre + invitation à choisir un composant dans la sidebar. Toute la logique
de glob / chargement dynamique / sidebar maison est supprimée.

### 4. Pages de démo

**Inchangées.** Elles sont déjà des routes `/composant/<cat>/<nom>` et
hériteront automatiquement du layout `default`.

### 5. Mise à jour du skill `creating-malio-component`

Ajouter une étape au skill : lors de la création d'un nouveau composant,
ajouter son entrée dans `.playground/playground.nav.ts` pour qu'il apparaisse
dans la sidebar.

## Hors périmètre

- Surbrillance de l'item actif dans `MalioSidebar` (ticket dédié si besoin).
- Toute autre évolution de `MalioSidebar`.
- Refonte du contenu des pages de démo existantes.

## Critères de réussite

- `npm run dev` lance le playground avec `MalioSidebar` dans un layout.
- Cliquer sur un item de la sidebar change l'URL et affiche la bonne démo.
- Le logo ramène à l'accueil ; l'accueil affiche le message de bienvenue.
- Plus aucune trace de la sidebar maison ni du chargement dynamique dans
  `index.vue`.
- `npm run lint` et `npm run test` passent.