Des tonnes de modifications notamment VIM / Couleurs / typos

CLAUDE.md

@@ -78,6 +78,155 @@ frontend/src/
 - **Highlight.js**: Syntax highlighting for code blocks in preview
 - **Custom Theme**: Material Darker theme in `static/theme.css` with CSS custom properties
 
+### HTMX + JavaScript Coordination (Optimized Architecture)
+
+**Key Principle**: HTMX handles ALL server interactions and DOM updates. JavaScript handles UI enhancements (editor, drag-and-drop, animations).
+
+#### Architecture Flow
+```
+User Interaction → HTMX (AJAX) → Go Server (HTML) → HTMX (DOM update) → JS Events (enhancements)
+```
+
+#### Best Practices
+
+**1. Use `htmx.ajax()` for JavaScript-initiated requests:**
+```javascript
+// ✅ Good: Let HTMX handle the request and DOM updates
+htmx.ajax('POST', '/api/files/move', {
+    values: { source, destination },
+    swap: 'none'  // Server uses hx-swap-oob
+});
+
+// ❌ Bad: Manual fetch + DOM manipulation
+const response = await fetch('/api/files/move', {...});
+const html = await response.text();
+target.innerHTML = html;
+htmx.process(target);  // This is now unnecessary
+```
+
+**2. Listen to HTMX events instead of DOM observers:**
+```javascript
+// ✅ Good: React to HTMX swaps
+document.body.addEventListener('htmx:afterSwap', (event) => {
+    if (event.detail.target.id === 'file-tree') {
+        updateDraggableAttributes();
+    }
+});
+
+document.body.addEventListener('htmx:oobAfterSwap', (event) => {
+    if (event.detail.target.id === 'file-tree') {
+        updateDraggableAttributes();
+    }
+});
+
+// ❌ Bad: MutationObserver (performance overhead)
+const observer = new MutationObserver(() => {...});
+observer.observe(element, { childList: true, subtree: true });
+```
+
+**3. Let HTMX process out-of-band swaps automatically:**
+The server returns HTML with `hx-swap-oob` attributes. HTMX automatically finds these elements and swaps them, even when they're not the primary target.
+
+```go
+// Server response (Go template)
+<div id="file-tree" hx-swap-oob="innerHTML">
+    <!-- Updated file tree HTML -->
+</div>
+```
+
+HTMX automatically:
+- Finds the element with `id="file-tree"`
+- Replaces its innerHTML
+- Processes any HTMX attributes in the new content
+- Triggers `htmx:oobAfterSwap` event
+
+**4. Event-driven architecture:**
+```javascript
+// File tree initialization (file-tree.js)
+class FileTree {
+    constructor() {
+        this.init();
+    }
+
+    init() {
+        // Use event delegation on stable parent
+        const sidebar = document.getElementById('sidebar');
+
+        // Click handlers (delegated)
+        sidebar.addEventListener('click', (e) => {
+            const folderHeader = e.target.closest('.folder-header');
+            if (folderHeader) this.toggleFolder(folderHeader);
+        });
+
+        // Drag-and-drop handlers (delegated)
+        sidebar.addEventListener('dragstart', (e) => {...});
+        sidebar.addEventListener('drop', (e) => {...});
+
+        // React to HTMX updates
+        document.body.addEventListener('htmx:oobAfterSwap', (event) => {
+            if (event.detail.target.id === 'file-tree') {
+                this.updateDraggableAttributes();
+            }
+        });
+    }
+}
+```
+
+#### Implementation Examples
+
+**Creating a folder (file-tree.js:438-476)**:
+```javascript
+htmx.ajax('POST', '/api/folders/create', {
+    values: { path: folderName },
+    swap: 'none'  // Server handles oob swap
+}).then(() => {
+    hideNewFolderModal();
+}).catch(() => {
+    alert('Erreur lors de la création du dossier');
+});
+```
+
+**Moving a file (file-tree.js:338-362)**:
+```javascript
+htmx.ajax('POST', '/api/files/move', {
+    values: { source: sourcePath, destination: destinationPath },
+    swap: 'none'  // Server handles oob swap
+}).then(() => {
+    console.log('File moved successfully');
+});
+```
+
+#### Benefits of This Architecture
+
+1. **Less Code**: ~60 lines removed by eliminating manual DOM manipulation
+2. **Better Performance**: HTMX events instead of MutationObserver
+3. **Consistency**: All server interactions use the same pattern
+4. **Maintainability**: Clear separation between HTMX (data) and JavaScript (UI enhancements)
+5. **Reliability**: HTMX handles edge cases (race conditions, partial updates, etc.)
+
+#### When to Use What
+
+**Use HTMX for:**
+- Loading content from server
+- Form submissions
+- Search/filtering
+- File operations (move, delete, create)
+- Automatic DOM updates
+
+**Use JavaScript for:**
+- CodeMirror editor initialization
+- Drag-and-drop UI logic
+- Slash command palette
+- Scroll synchronization
+- View mode toggles
+- Client-side animations
+
+**Never:**
+- Parse HTML manually from fetch() responses
+- Call `htmx.process()` manually (HTMX does it automatically)
+- Use MutationObserver when HTMX events are available
+- Mix fetch() and htmx.ajax() for similar operations
+
 ### Note Format
 
 Notes have YAML front matter with these fields: