refact: use only server

2025-08-27 13:28:50 +02:00
parent cf8a37f183
commit 2934224787
39 changed files with 6843 additions and 1223 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -2,29 +2,31 @@

 ## Contexte du Projet

-**Zebra Power** (nommée d'après la tomate verte zebra) est une application web dockerisée pour la gestion de serveurs via Wake-on-LAN et le contrôle de machines virtuelles Proxmox. Il s'agit d'un outil d'administration réseau légitime à usage défensif uniquement.
+**Zebra Power** (nommée d'après la tomate verte zebra) est une application web dockerisée pour la gestion unifiée d'hosts Proxmox via Wake-on-LAN, contrôle de VMs/Containers et extinction. Il s'agit d'un outil d'administration réseau légitime à usage défensif uniquement.

 ## Architecture et Technologies

 ### Backend (FastAPI + SQLite)

- **Langages**: Python 3.11+
- **Framework**: FastAPI 0.104.1 avec SQLAlchemy 2.0.23
+- **Langages**: Python 3.13 + uv
+- **Framework**: FastAPI 0.115.0 avec SQLAlchemy 2.0.35
 - **Base de données**: SQLite (fichier local `./data/zebra.db`)
- **Services**: Wake-on-LAN, API Proxmox, logging centralisé
+- **Services**: Wake-on-LAN, API Proxmox unifiée, logging centralisé
 - **Point d'entrée**: `backend/app/main.py`

 ### Frontend (Vue.js 3)

 - **Framework**: Vue.js 3.4.0 + Vue Router + Pinia
 - **Build**: Vite 5.0.8
- **Styling**: Tailwind CSS 3.3.6
+- **Styling**: Tailwind CSS 3.3.6 avec système de thème personnalisé
 - **Composants**: Headless UI + Heroicons
+- **Fonctionnalités**: Dark/Light mode, Pull-to-refresh, Swipe gestures
 - **Point d'entrée**: `frontend/src/main.js`

 ### Infrastructure

 - **Containerisation**: Docker Compose
+- **Images**: Python 3.13, Node.js 20, Nginx 1.25
 - **Proxy**: Nginx (port 80)
 - **Réseau**: Mode host pour backend (requis WOL)

@@ -48,31 +50,24 @@ backend/app/

 frontend/src/
 ├── components/   # Composants Vue réutilisables
-├── views/        # Pages/routes principales
+├── composables/  # Hooks Vue (useDarkMode, usePullToRefresh, useSwipe)
+├── views/        # Pages/routes principales (Home.vue, Hosts.vue)
 ├── services/     # API client
+├── style.css     # Styles globaux + système de thème
 └── main.js       # Bootstrap Vue
 ```

 ## Commandes de Développement

-### Backend
+### Développement (avec hot reload)

 ```bash
-cd backend
-pip install -r requirements.txt
-uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
+docker-compose -f docker-compose.dev.yml up -d
+docker-compose -f docker-compose.dev.yml logs -f
+docker-compose -f docker-compose.dev.yml down
 ```

-### Frontend
-
-```bash
-cd frontend
-npm install
-npm run dev    # Développement (port 3000)
-npm run build  # Production
-```
-
-### Docker (Production)
+### Production

 ```bash
 docker-compose up -d
@@ -80,6 +75,16 @@ docker-compose logs -f [service]
 docker-compose down
 ```

+### Manuel (développement local)
+
+```bash
+# Backend
+cd backend && uv run uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
+
+# Frontend  
+cd frontend && npm run dev
+```
+
 ## Directives Spécifiques pour les Agents

 ### 🔒 Sécurité - OBLIGATOIRE
@@ -106,6 +111,8 @@ docker-compose down
 - État global via Pinia stores
 - Requêtes API via `services/api.js`
 - Composants atomiques réutilisables
+- **Système de thème** : composable `useDarkMode.js` avec 3 états (light/dark/system)
+- **Interactions mobiles** : composables `usePullToRefresh.js` et `useSwipe.js`

 #### Docker

@@ -131,15 +138,20 @@ docker-compose down

 #### API Endpoints

- `backend/app/api/servers.py` - Gestion serveurs WOL
- `backend/app/api/wol.py` - Wake-on-LAN et ping
- `backend/app/api/proxmox.py` - Clusters et VMs Proxmox
+- `backend/app/api/hosts.py` - API unifiée hosts Proxmox (WOL + VMs)
+- `backend/app/api/wol.py` - Logs centralisés (legacy)

 #### Services Métier

- `backend/app/services/wol_service.py` - Logique Wake-on-LAN
- `backend/app/services/proxmox_service.py` - Intégration Proxmox
- `backend/app/services/logging_service.py` - Journalisation
+- `backend/app/services/proxmox_host_service.py` - Service unifié host Proxmox
+- `backend/app/services/wol_service.py` - Utilitaires Wake-on-LAN
+- `backend/app/services/logging_service.py` - Journalisation centralisée
+
+#### Frontend Composables
+
+- `frontend/src/composables/useDarkMode.js` - Système de thème 3 états avec persistance
+- `frontend/src/composables/usePullToRefresh.js` - Pull-to-refresh mobile natif
+- `frontend/src/composables/useSwipe.js` - Détection de gestes tactiles

 ### 🔧 Debugging et Logs

@@ -167,10 +179,9 @@ docker-compose logs nginx

 #### Tables Principales

- `servers` - Serveurs Wake-on-LAN
- `proxmox_clusters` - Configuration clusters
- `action_logs` - Historique des actions
- `wol_logs` - Logs spécifiques WOL (legacy)
+- `proxmox_hosts` - Configuration unifiée hosts (WOL + Proxmox)
+- `action_logs` - Historique centralisé toutes actions
+- `wol_logs` - Logs legacy (rétrocompatibilité)

 #### Migrations

@@ -183,17 +194,39 @@ docker-compose logs nginx
 #### Standards API

 - REST endpoints avec préfixes `/api/`
- Codes status HTTP standards
- JSON uniquement
- CORS permissif (à restreindre)
+- `/api/hosts/*` - API principale unifiée
+- `/api/wol/*` - Logs centralisés
+- Codes status HTTP standards, JSON uniquement

 #### Client Frontend

- Axios dans `services/api.js`
- Base URL via variable d'environnement
+- `hostsApi` et `logsApi` dans `services/api.js`
+- Base URL via variable d'environnement  
 - Error handling centralisé
 - Loading states dans les composants

+### 🎨 Système de Thème
+
+#### Configuration
+
+- **3 modes** : Light, Dark, System (suit l'OS)
+- **Persistance** : localStorage `theme-preference`
+- **Application** : classe `dark` sur `<html>` via `useDarkMode.js`
+- **Tailwind** : `darkMode: 'class'` dans `tailwind.config.js`
+
+#### Implémentation
+
+- **Composable** : `useDarkMode()` retourne `{ isDark, preference, toggleDarkMode }`
+- **CSS personnalisé** : styles forcés avec `!important` dans `style.css`
+- **Spécificité maximale** : `html:not(.dark)` et `html.dark` pour surcharger Tailwind
+- **Bouton de thème** : cycle System → Light → Dark dans l'interface
+
+#### Dépannage
+
+- **Vérifier** : classe `dark` sur `<html>` dans DevTools
+- **Logs** : console.log dans `useDarkMode.js` pour debugging
+- **CSS** : styles forcés hors `@layer` pour priorité maximale
+
 ### ⚡ Performance

 #### Backend
@@ -208,22 +241,22 @@ docker-compose logs nginx
 - Composition API pour réactivité
 - Tailwind purge pour CSS optimisé
 - Vite pour build rapide
+- **Système de thème** : transitions CSS fluides 300ms

 ### 🚀 Déploiement

-#### Développement Local
+#### Développement

-1. Clone du repo
-2. `mkdir -p data` pour SQLite
-3. `docker-compose up -d`
-4. Interface sur http://localhost
+1. `docker-compose -f docker-compose.dev.yml up -d`
+2. Frontend: http://localhost:3000
+3. Backend API: http://localhost:8000

 #### Production

- Même stack Docker
- Variables d'environnement sécurisées
- HTTPS recommandé (nginx SSL)
- Sauvegarde régulière de `./data/`
+1. `docker-compose up -d`
+2. Interface: http://localhost
+3. Health checks automatiques
+4. Sauvegarde régulière de `./data/`

 ### 💡 Bonnes Pratiques Agents Claude

@@ -235,3 +268,47 @@ docker-compose logs nginx
 6. **Sécurité first** - valider les entrées, gérer les erreurs
 7. **Performance** - éviter les requêtes N+1, optimiser les queries
 8. **UX** - interfaces intuitives, feedback utilisateur
+9. **Système de thème** - utiliser le composable `useDarkMode()`, ne pas modifier les styles CSS forcés
+
+### 🔧 Notes Techniques Importantes
+
+#### Système de Thème - État Actuel (2025-08-27)
+
+**Problèmes résolus** :
+- Classe `dark` s'applique correctement sur `<html>` 
+- Light mode maintenant vraiment lumineux (blanc pur)
+- Dark mode cohérent avec couleurs sombres
+- Fond de page couvre toute la hauteur
+
+**Architecture CSS** :
+```css
+/* Styles de base dans @layer base */
+html, body { bg-white/bg-gray-900 selon mode }
+
+/* Styles forcés HORS @layer pour priorité maximale */
+html:not(.dark) .card-mobile { background: #ffffff !important }
+html.dark .card-mobile { background: #1f2937 !important }
+```
+
+**Spécificités critiques** :
+- Ne PAS modifier les styles forcés dans `style.css` lignes 140-167
+- Les styles Tailwind seuls ne suffisent pas (problème de spécificité)
+- `!important` + sélecteurs spécifiques requis pour surcharger Tailwind
+
+#### Composables Vue
+
+**useDarkMode.js** :
+- Gère 3 états : 'system', 'light', 'dark'  
+- Persistance automatique localStorage
+- Application DOM via `document.documentElement.classList`
+- Écoute changements système `prefers-color-scheme`
+
+**usePullToRefresh.js** :
+- Implémentation native pull-to-refresh mobile
+- Détection tactile avec seuils configurables
+- Animation fluide avec indicateur visuel
+
+**useSwipe.js** :
+- Détection gestes swipe (left/right)
+- Touch events natifs avec debounce
+- Utilisé pour interactions host cards