# Frontend — Regles Nuxt 4 / Vue 3 / @malio/layer-ui

## Base

- TypeScript strict
- 4 espaces d'indentation
- Commentaires (JSDoc, inline, bloc) **en francais** ; code (variables, types) en anglais
- Chaque module front = un layer Nuxt auto-detecte (`frontend/modules/*/nuxt.config.ts` minimal)

## Appels API

- Toujours `useApi()` — jamais `$fetch`, `ofetch`, `axios` en direct
- `useApi()` gere : cookies JWT, erreurs, toasts i18n, parsing Hydra

## Stores (Pinia)

- `useAuthStore` pour l'authentification
- `useUiStore` pour l'etat UI global (sidebar, modales, etc.)
- Composables avec state singleton (refs module-level) : exposer une fonction `reset*()` et la rappeler au logout (ex: `useSidebar().resetSidebar()`)

## Middlewares globaux

- `auth.global.ts` protege les routes + charge la sidebar apres login
- `modules.global.ts` redirige si la route demandee est dans `disabledRoutes`

## i18n et sidebar

- Labels de sidebar = cles i18n `sidebar.<module>.*`, jamais du texte brut
- Le layout `default.vue` applique `t()` sur les labels retournes par `/api/sidebar`
- Traductions dans `frontend/i18n/locales/`

## Composants formulaires — @malio/layer-ui obligatoire

Tout champ de formulaire / filtre doit utiliser les composants `Malio*` plutot que `<input>` / `<select>` bruts :

- `MalioInputText`, `MalioInputNumber`, `MalioInputAmount`, `MalioInputPassword`, `MalioInputTextArea`
- `MalioSelect`, `MalioSelectCheckbox`, `MalioCheckbox`, `MalioRadioButton`
- `MalioInputUpload`, `MalioTime`
- `MalioButton`, `MalioButtonIcon`

**Exceptions autorisees** (commenter un `// TODO` pour migrer quand la lib couvrira le cas) :
1. Type non couvert : `datetime-local`, `date`, color picker, file drag & drop
2. Bug connu bloquant (ex: `MalioSelect` avec options string) — documenter le bug en commentaire

Toute autre exception requiert validation avant merge.

## Tableaux de donnees — MalioDataTable obligatoire

Tout affichage LISTE tabulaire (donnees metier paginees, CRUD admin) doit passer par `MalioDataTable` :
- Pagination integree
- Slots `#header-*` pour filtres, `#cell-*` pour rendu custom
- Pas de `<table>` brut avec pagination custom

**Exception** : tableaux purement presentationnels non paginables (diff field/old/new, grille de comparaison, matrice RBAC d'admin, etc.) peuvent rester en `<table>` HTML brut.

## Etat des tableaux — pas de persistance URL

**Interdit** de persister l'etat d'un tableau (filtres, pagination, tri par colonne, selection, ligne active, scroll) dans la query string ou de le reinjecter depuis `route.query` au montage.

- L'etat vit uniquement dans le composant (`reactive`, `ref` locales)
- Seuls les deep links "de navigation metier" (ex: ouvrir un detail precis `/users/42`) sont dans l'URL
- Exceptions autorisees **sur demande explicite** de l'utilisateur

## Interdits

- `modules-loader.ts`, `.module.ts` — le scan des layers est automatique
- Hardcode de la sidebar cote front — elle vient de `/api/sidebar`
- Edition manuelle de `extends` dans `frontend/nuxt.config.ts` — les layers sont scannes
- Import d'un module front depuis un autre module — passer par `frontend/shared/`