56 lines
2.1 KiB
Markdown
56 lines
2.1 KiB
Markdown
# Composants Gmail — arborescence
|
||
|
||
Point d’entrée publics (re-exports à la racine) :
|
||
|
||
| Fichier racine | Module réel |
|
||
|----------------|-------------|
|
||
| `email-list.tsx` | `email-list/` |
|
||
| `sidebar.tsx` | `sidebar/` |
|
||
| `compose-modal.tsx` | `compose/` |
|
||
| `compose-toolbar.tsx` | `compose/` |
|
||
| `email-view.tsx` | `email-view/` + lecture |
|
||
|
||
## Dossiers par fonctionnalité
|
||
|
||
```
|
||
components/gmail/
|
||
├── compose/ # Rédaction (fenêtre, manager, toolbar, destinataires)
|
||
├── email-list/ # Liste des messages
|
||
│ ├── hooks/ # data, labels, selection, reading
|
||
│ ├── attachments/
|
||
│ └── …
|
||
├── email-view/ # Lecture d’un message
|
||
├── mail-search/ # Recherche avancée (desktop + mobile)
|
||
├── sidebar/ # Navigation latérale
|
||
├── contacts/ # Carnet d’adresses
|
||
├── quick-settings/ # Réglages rapides
|
||
└── *.tsx # Chrome global (header, search bar, swipe, …)
|
||
```
|
||
|
||
## email-list/
|
||
|
||
- `email-list.tsx` — orchestration (hooks → layout)
|
||
- `hooks/use-email-list-data.ts` — filtrage, pagination, pull-refresh
|
||
- `hooks/use-email-list-labels.ts` — libellés / déplacer
|
||
- `hooks/use-email-list-selection.ts` — sélection, actions bulk
|
||
- `hooks/use-email-list-reading.ts` — vue message, navigation clavier
|
||
- `email-list-layout.tsx` — structure split / toolbars
|
||
- `email-list-body.tsx` — zone scroll + lignes
|
||
- `email-list-toolbar.tsx` — barre d’outils
|
||
- `email-list-row.tsx` — une ligne
|
||
|
||
## sidebar/
|
||
|
||
- `sidebar.tsx` — shell `<aside>`
|
||
- `use-sidebar-state.ts` — état local + effets
|
||
- `sidebar-header.tsx` — logo, compose, réglages
|
||
- `sidebar-nav-panel.tsx` — nav principale, dossiers, libellés
|
||
- `sidebar-folder-row-expanded.tsx`, `sidebar-label-item-row.tsx`, …
|
||
|
||
## compose/
|
||
|
||
- `compose-window.tsx` — UI fenêtre
|
||
- `use-compose-window.ts` — éditeur TipTap, envoi, pièces jointes
|
||
- `compose-modal-manager.tsx` — pile de fenêtres / sheet mobile
|
||
- `compose-recipients.tsx`, `compose-editor-chrome.tsx`, `compose-toolbar.tsx`
|