Barre de titre : mode clair/sombre, titre et logo ; explorateur redimensionnable #3

2026-10-07T15:02:16+02:00

claude Bot commented

2026-10-07 15:02:16 +02:00

Requested by Cédric · project thread

Before: la largeur de l'explorateur était fixe (330 px), le thème ne se changeait que dans le menu d'Excalidraw, et la barre du haut affichait seulement « Excalidraw » ou le nom du schéma.

After: une poignée entre l'explorateur et le canevas permet de régler sa largeur (souris, tactile, flèches clavier, double-clic = défaut), mémorisée par navigateur. À droite de la barre, un bouton ☀/☾ bascule clair/sombre (interface + canevas, synchronisé avec le menu d'Excalidraw) et un bouton ✎ ouvre « Personnaliser » : titre affiché et logo PNG. Le logo est recadré au centre, réduit à 64×64 côté serveur et affiché en rond en tête de barre. Titre et logo sont communs à tous les utilisateurs.

How: internal/storage/settings.go (.settings.json, .logo.png sous DATA_DIR, rééchantillonnage « boîte » en Go stdlib, PNG ré-encodé, limites 5 Mo / 8192 px) ; routes GET/PUT /api/settings, GET/PUT/DELETE /api/logo. Front : Splitter.tsx, CustomizeDialog.tsx, icons.tsx, App.tsx (largeur via --drawer-w, garde-fou contre la boucle de synchronisation du thème), styles.css. Sur mobile, la poignée est masquée et le tiroir garde 330 px.

Tests

go vet ./... && go test ./...
cd frontend && npm ci && npm run build && cd ..
go run ./cmd/server          # DATA_DIR=./data par défaut, http://localhost:8080
# ou : docker compose up -d --build
curl -s localhost:8080/api/settings
curl -s -X PUT --data-binary @logo.png -H 'Content-Type: image/png' localhost:8080/api/logo

Vérifié dans Chromium (Playwright) : glissement et clavier de la poignée, persistance après rechargement, bascule de thème depuis la barre et depuis le menu Excalidraw, envoi d'un PNG 400×260 → .logo.png 64×64, titre persistant, rendu mobile 390 px.

🤖 Generated with Claude Code

https://claude.ai/code/session_013WSSWgbf7gUzTzEqhjqtzN

_Requested by **Cédric** · [project thread](https://claude.ai/code/project/chan_013iVUFruntRnMfvjdyEKh7f?thread=cmsg_013iVUFruntRnMfvjdyEKh7f4FEDqhM2urSdKDyVxLuFsC)_ Before: la largeur de l'explorateur était fixe (330 px), le thème ne se changeait que dans le menu d'Excalidraw, et la barre du haut affichait seulement « Excalidraw » ou le nom du schéma. After: une poignée entre l'explorateur et le canevas permet de régler sa largeur (souris, tactile, flèches clavier, double-clic = défaut), mémorisée par navigateur. À droite de la barre, un bouton ☀/☾ bascule clair/sombre (interface + canevas, synchronisé avec le menu d'Excalidraw) et un bouton ✎ ouvre « Personnaliser » : titre affiché et logo PNG. Le logo est recadré au centre, réduit à 64×64 côté serveur et affiché en rond en tête de barre. Titre et logo sont communs à tous les utilisateurs. How: `internal/storage/settings.go` (`.settings.json`, `.logo.png` sous `DATA_DIR`, rééchantillonnage « boîte » en Go stdlib, PNG ré-encodé, limites 5 Mo / 8192 px) ; routes `GET/PUT /api/settings`, `GET/PUT/DELETE /api/logo`. Front : `Splitter.tsx`, `CustomizeDialog.tsx`, `icons.tsx`, `App.tsx` (largeur via `--drawer-w`, garde-fou contre la boucle de synchronisation du thème), `styles.css`. Sur mobile, la poignée est masquée et le tiroir garde 330 px. ### Tests ```bash go vet ./... && go test ./... cd frontend && npm ci && npm run build && cd .. go run ./cmd/server # DATA_DIR=./data par défaut, http://localhost:8080 # ou : docker compose up -d --build curl -s localhost:8080/api/settings curl -s -X PUT --data-binary @logo.png -H 'Content-Type: image/png' localhost:8080/api/logo ``` Vérifié dans Chromium (Playwright) : glissement et clavier de la poignée, persistance après rechargement, bascule de thème depuis la barre et depuis le menu Excalidraw, envoi d'un PNG 400×260 → `.logo.png` 64×64, titre persistant, rendu mobile 390 px. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_013WSSWgbf7gUzTzEqhjqtzN

claude Bot added 2 commits 2026-10-07 15:02:16 +02:00

API : titre et logo personnalisés (/api/settings, /api/logo) baa412d02e

Logo PNG recadré au centre et réduit à 64x64 côté serveur, ré-encodé.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013WSSWgbf7gUzTzEqhjqtzN

Interface : explorateur redimensionnable, bouton clair/sombre, titre et logo 9ecaab550a

- poignée entre l'explorateur et le canevas (souris, tactile, clavier), largeur mémorisée
- bouton clair/sombre à droite de la barre, synchronisé avec le menu d'Excalidraw
- dialogue Personnaliser : titre et logo PNG affiché en rond
- README

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013WSSWgbf7gUzTzEqhjqtzN

claude Bot merged commit 9ecaab550a into main

2026-10-07 15:03:33 +02:00

claude Bot deleted branch feat/barre-titre-theme

2026-10-07 15:03:33 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: vLab-BZH/excalicloud#3