From 6887d631eaad5999eaf7a551fa277e05dc2e0d1a Mon Sep 17 00:00:00 2001
From: Spark <spark@hatch.local>
Date: Sun, 11 Oct 2026 11:00:53 -0400
Subject: [PATCH] =?UTF-8?q?feat(board):=20=C3=A9tiquettes=20g=C3=A9rables,?=
 =?UTF-8?q?=20notes=20repliable/redimensionnable/auto-save?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- modale Étiquettes: liste, création (nom + couleur + palette),
  suppression via DELETE (CSRF par en-tête); panneau détail:
  bascules d'étiquettes par issue avec mise à jour immédiate des
  chips de la carte; _issue_payload expose les ids d'étiquettes
- API étiquettes dans main (routes repos + toggle issue)
- notes: bouton replier/déplier et largeur par glisser, persistés
  par projet (localStorage), sauvegarde automatique débouncée
  avec statut, formulaire repris par board.js (HTMX retiré du board)
- nouvelles pages search/my/briefing; navigation enrichie partout
  (Mes issues, Briefing, Recherche); CSS associé
---
 app/templates/activity.html  |   3 +
 app/templates/board.html     |  71 ++++++++----
 app/templates/briefing.html  |  71 ++++++++++++
 app/templates/dashboard.html |   3 +
 app/templates/error.html     |   2 +
 app/templates/focus.html     |   3 +
 app/templates/my.html        |  63 +++++++++++
 app/templates/search.html    |  69 ++++++++++++
 static/css/style.css         | 148 ++++++++++++++++++++++++
 static/js/board.js           | 210 +++++++++++++++++++++++++++++++++++
 10 files changed, 621 insertions(+), 22 deletions(-)
 create mode 100644 app/templates/briefing.html
 create mode 100644 app/templates/my.html
 create mode 100644 app/templates/search.html

diff --git a/app/templates/activity.html b/app/templates/activity.html
index 69c24b2..dbb7db7 100644
--- a/app/templates/activity.html
+++ b/app/templates/activity.html
@@ -16,7 +16,10 @@
         <nav class="nav-pills">
             <a href="/" class="nav-pill">🏠 Projets</a>
             <a href="/focus" class="nav-pill">🎯 Focus</a>
+            <a href="/my" class="nav-pill">👤 Mes issues</a>
             <a href="/activity" class="nav-pill active">📰 Activité</a>
+            <a href="/briefing" class="nav-pill">📊 Briefing</a>
+            <a href="/search" class="nav-pill">🔍 Recherche</a>
         </nav>
     </header>
 
diff --git a/app/templates/board.html b/app/templates/board.html
index ba23f29..81ca7f4 100644
--- a/app/templates/board.html
+++ b/app/templates/board.html
@@ -6,7 +6,6 @@
     <meta name="csrf-token" content="{{ csrf_token }}">
     <title>{{ repo }} — Kanbante</title>
     <link rel="stylesheet" href="/static/css/style.css">
-    <script src="/static/vendor/htmx.min.js"></script>
     <script src="/static/vendor/sortable.min.js"></script>
     <script src="/static/vendor/marked.min.js"></script>
     <script src="/static/vendor/purify.min.js"></script>
@@ -21,7 +20,9 @@
         <nav class="nav-pills">
             <a href="/" class="nav-pill">🏠 Projets</a>
             <a href="/focus" class="nav-pill">🎯 Focus</a>
+            <a href="/my" class="nav-pill">👤 Mes issues</a>
             <a href="/activity" class="nav-pill">📰 Activité</a>
+            <a href="/search" class="nav-pill">🔍 Recherche</a>
             {% if repo_info.html_url %}
             <a href="{{ repo_info.html_url }}" target="_blank" class="nav-pill">🔗 Gitea ↗</a>
             {% endif %}
@@ -61,6 +62,7 @@
             <option value="{{ label.name }}">{{ label.name }}</option>
             {% endfor %}
         </select>
+        <button type="button" id="labels-btn" class="btn-sm">🏷️ Gérer les étiquettes</button>
         <form id="create-issue-form">
             <input type="text" id="new-issue-title" maxlength="255"
                    placeholder="➕ Nouvelle issue (titre)..." required>
@@ -123,21 +125,51 @@
             {% endfor %}
         </div>
 
-        <!-- Notes panel -->
-        <aside class="notes-panel">
-            <h3>📝 Notes du projet</h3>
-            <p class="notes-hint">Contexte libre, propre à Kanbante — il ne part pas dans Gitea.</p>
-            <form hx-post="/api/notes" hx-swap="none"
-                  hx-on::after-request="if(event.detail.successful) showNotesSaved()">
-                <input type="hidden" name="repo_full_name" value="{{ full_name }}">
-                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-                <textarea name="note" rows="10"
-                          placeholder="Notes, idées, liens...">{{ notes }}</textarea>
-                <button type="submit" class="btn-save">💾 Sauvegarder</button>
-            </form>
+        <!-- Notes panel: collapsible + resizable + autosave -->
+        <aside class="notes-panel" id="notes-panel">
+            <div class="notes-resize" id="notes-resize" title="Glisser pour ajuster la largeur"></div>
+            <div class="notes-head">
+                <h3>📝 Notes du projet</h3>
+                <button type="button" id="notes-toggle" class="btn-sm notes-toggle"
+                        title="Replier / déplier le panneau">⤢</button>
+            </div>
+            <div class="notes-body-wrap">
+                <p class="notes-hint">Contexte libre, propre à Kanbante — il ne part pas dans Gitea. Enregistrement automatique.</p>
+                <form id="notes-form">
+                    <input type="hidden" name="repo_full_name" value="{{ full_name }}">
+                    <textarea name="note" id="notes-text" rows="10"
+                              placeholder="Notes, idées, liens...">{{ notes }}</textarea>
+                    <div class="notes-foot">
+                        <span id="notes-status" class="notes-status"></span>
+                        <button type="submit" class="btn-save">💾 Sauvegarder</button>
+                    </div>
+                </form>
+            </div>
         </aside>
     </main>
 
+    <!-- Label manager modal -->
+    <div id="label-modal" class="modal" hidden>
+        <div class="modal-box">
+            <div class="detail-head">
+                <h2>🏷️ Étiquettes de {{ full_name }}</h2>
+                <button id="label-modal-close" class="btn-sm" type="button">✕</button>
+            </div>
+            <p class="notes-hint">Ces étiquettes vivent dans Gitea : les créer ou les supprimer ici les modifie pour tout le dépôt.</p>
+            <div id="label-list" class="label-list"></div>
+            <form id="label-create-form" class="label-create-form">
+                <input type="text" id="new-label-name" maxlength="50" placeholder="Nom de la nouvelle étiquette" required>
+                <input type="color" id="new-label-color" value="#7c5cfc" title="Couleur">
+                <button type="submit" class="btn-save btn-inline">Créer</button>
+            </form>
+            <div class="label-swatches">
+                {% for c in ['e11d48','f59e0b','10b981','0ea5e9','7c5cfc','ec4899','64748b','84cc16'] %}
+                <button type="button" class="swatch" data-color="#{{ c }}" style="background: #{{ c }}" title="#{{ c }}"></button>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+
     <!-- Card detail drawer: issue body, comments, comment form -->
     <div id="detail-overlay" class="detail-overlay" hidden></div>
     <aside id="card-detail" class="card-detail" hidden>
@@ -149,6 +181,10 @@
         <h2 id="detail-title"></h2>
         <div id="detail-meta" class="detail-meta"></div>
         <div id="detail-labels" class="card-labels"></div>
+        <div class="detail-labels-manage">
+            <span class="notes-hint">Étiquettes de l'issue — cliquez pour ajouter / retirer :</span>
+            <div id="detail-label-toggles" class="label-toggles"></div>
+        </div>
         <div id="detail-body" class="detail-body"></div>
         <h3 class="detail-comments-title">💬 Commentaires</h3>
         <div id="detail-comments"></div>
@@ -167,14 +203,5 @@
         {% endif %}
     </footer>
     <script src="/static/js/live.js" defer></script>
-    <script>
-        function showNotesSaved() {
-            const toast = document.createElement('div');
-            toast.className = 'toast';
-            toast.textContent = '✅ Notes sauvegardées';
-            document.body.appendChild(toast);
-            setTimeout(() => toast.remove(), 2000);
-        }
-    </script>
 </body>
 </html>
diff --git a/app/templates/briefing.html b/app/templates/briefing.html
new file mode 100644
index 0000000..5e2e6b5
--- /dev/null
+++ b/app/templates/briefing.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="fr" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="csrf-token" content="{{ csrf_token }}">
+    <title>Briefing — Kanbante</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body>
+    <header class="app-header">
+        <div class="brand">
+            <a href="/" class="logo" aria-label="Kanbante — accueil"><span class="logo-mark">📋</span><span class="gradient-text">Kanbante</span></a>
+            <span class="crumb"><span class="sep">/</span> 📊 <strong>Briefing</strong></span>
+        </div>
+        <nav class="nav-pills">
+            <a href="/" class="nav-pill">🏠 Projets</a>
+            <a href="/focus" class="nav-pill">🎯 Focus</a>
+            <a href="/my" class="nav-pill">👤 Mes issues</a>
+            <a href="/activity" class="nav-pill">📰 Activité</a>
+            <a href="/search" class="nav-pill">🔍 Recherche</a>
+        </nav>
+    </header>
+
+    <main class="focus-main">
+        <p class="focus-intro">Le briefing du <strong>{{ data.date }}</strong> — le même contenu que celui poussé sur ntfy.</p>
+
+        <div class="stat-tiles briefing-tiles">
+            <div class="stat-tile"><span class="stat-num">{{ data.focus_total }}</span><span class="stat-label">en cours / révision</span></div>
+            <div class="stat-tile"><span class="stat-num">{{ data.activity_24h.closed }}</span><span class="stat-label">fermées · 24 h</span></div>
+            <div class="stat-tile"><span class="stat-num">{{ data.activity_24h.moved }}</span><span class="stat-label">déplacements · 24 h</span></div>
+            <div class="stat-tile"><span class="stat-num">{{ data.aging|length }}</span><span class="stat-label">cartes vieillissantes</span></div>
+        </div>
+
+        <section class="briefing-card">
+            <h2>📄 Contenu du briefing</h2>
+            <pre class="briefing-text">{{ text }}</pre>
+        </section>
+
+        <section class="briefing-card">
+            <h2>📲 Envoi ntfy</h2>
+            {% if ntfy_configured %}
+            <p class="notes-hint">ntfy est configuré. {% if briefing_time %}Envoi automatique chaque jour à <strong>{{ briefing_time }}</strong> (heure du serveur).{% else %}Aucune heure d'envoi automatique (<code>KANBANTE_BRIEFING_TIME</code> non défini).{% endif %}{% if last_sent %} Dernier envoi : {{ last_sent }}.{% endif %}</p>
+            <form id="briefing-send-form">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+                <button type="submit" class="btn-save">📤 Envoyer maintenant via ntfy</button>
+            </form>
+            <p id="briefing-status" class="notes-hint"></p>
+            {% else %}
+            <p class="notes-hint">Pour recevoir ce briefing sur votre téléphone, définissez <code>KANBANTE_NTFY_URL</code> (ex. <code>https://ntfy.sh</code> ou votre ntfy auto-hébergé), <code>KANBANTE_NTFY_TOPIC</code> et, pour l'envoi automatique, <code>KANBANTE_BRIEFING_TIME=07:30</code>, puis redémarrez Kanbante.</p>
+            {% endif %}
+        </section>
+    </main>
+
+    <footer>
+        Kanbante v{{ version }} · briefing quotidien
+    </footer>
+    <script src="/static/js/live.js" defer></script>
+    <script>
+        document.getElementById('briefing-send-form')?.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const status = document.getElementById('briefing-status');
+            status.textContent = 'Envoi en cours...';
+            const r = await fetch('/api/briefing/send', { method: 'POST', body: new FormData(e.target) });
+            const data = await r.json().catch(() => ({}));
+            status.textContent = data.ok ? '✅ Briefing envoyé sur ntfy.' : '❌ ' + (data.error || ('HTTP ' + r.status));
+        });
+    </script>
+</body>
+</html>
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index c5277a1..5c86109 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -16,7 +16,10 @@
         <nav class="nav-pills">
             <a href="/" class="nav-pill active">🏠 Projets</a>
             <a href="/focus" class="nav-pill">🎯 Focus</a>
+            <a href="/my" class="nav-pill">👤 Mes issues</a>
             <a href="/activity" class="nav-pill">📰 Activité</a>
+            <a href="/briefing" class="nav-pill">📊 Briefing</a>
+            <a href="/search" class="nav-pill">🔍 Recherche</a>
         </nav>
     </header>
 
diff --git a/app/templates/error.html b/app/templates/error.html
index 1852108..52875f7 100644
--- a/app/templates/error.html
+++ b/app/templates/error.html
@@ -14,7 +14,9 @@
         <nav class="nav-pills">
             <a href="/" class="nav-pill">🏠 Projets</a>
             <a href="/focus" class="nav-pill">🎯 Focus</a>
+            <a href="/my" class="nav-pill">👤 Mes issues</a>
             <a href="/activity" class="nav-pill">📰 Activité</a>
+            <a href="/search" class="nav-pill">🔍 Recherche</a>
         </nav>
     </header>
     <main class="error-main">
diff --git a/app/templates/focus.html b/app/templates/focus.html
index 67007cc..481c503 100644
--- a/app/templates/focus.html
+++ b/app/templates/focus.html
@@ -16,7 +16,10 @@
         <nav class="nav-pills">
             <a href="/" class="nav-pill">🏠 Projets</a>
             <a href="/focus" class="nav-pill active">🎯 Focus</a>
+            <a href="/my" class="nav-pill">👤 Mes issues</a>
             <a href="/activity" class="nav-pill">📰 Activité</a>
+            <a href="/briefing" class="nav-pill">📊 Briefing</a>
+            <a href="/search" class="nav-pill">🔍 Recherche</a>
             <span class="badge">{{ groups|map(attribute='cards')|map('length')|sum }} cartes en cours</span>
         </nav>
     </header>
diff --git a/app/templates/my.html b/app/templates/my.html
new file mode 100644
index 0000000..460ad5d
--- /dev/null
+++ b/app/templates/my.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="fr" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mes issues — Kanbante</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>👤</text></svg>">
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body>
+    <header class="app-header">
+        <div class="brand">
+            <a href="/" class="logo" aria-label="Kanbante — accueil"><span class="logo-mark">📋</span><span class="gradient-text">Kanbante</span></a>
+            <span class="crumb"><span class="sep">/</span> 👤 <strong>Mes issues</strong></span>
+        </div>
+        <nav class="nav-pills">
+            <a href="/" class="nav-pill">🏠 Projets</a>
+            <a href="/focus" class="nav-pill">🎯 Focus</a>
+            <a href="/my" class="nav-pill active">👤 Mes issues</a>
+            <a href="/activity" class="nav-pill">📰 Activité</a>
+            <a href="/search" class="nav-pill">🔍 Recherche</a>
+        </nav>
+    </header>
+
+    <main class="focus-main">
+        {% if not user %}
+        <div class="empty-state">🔑 Aucun utilisateur Gitea résolu : définissez <code>GITEA_TOKEN</code> pour voir les issues qui vous sont assignées.</div>
+        {% else %}
+        <p class="focus-intro">Issues ouvertes assignées à <strong>{{ user.login }}</strong>, tous projets confondus — {{ total }} au total.</p>
+        {% if not groups %}
+        <div class="empty-state">🎉 Aucune issue ne vous est assignée pour le moment.</div>
+        {% endif %}
+        {% for group in groups %}
+        <section class="focus-group">
+            <h2><a href="/board/{{ group.full_name }}">{{ group.full_name }}</a>
+                <span class="badge secondary">{{ group.rows|length }}</span></h2>
+            <div class="issue-results">
+                {% for row in group.rows %}
+                {% set issue = row.issue %}
+                <div class="issue-row">
+                    <span class="issue-state">🟢</span>
+                    <a class="issue-main" href="/board/{{ group.full_name }}">
+                        <span class="card-id">#{{ issue.number }}</span> {{ issue.title }}
+                    </a>
+                    <span class="col-chip" style="background: {{ column_colors[row.column] }}20; color: {{ column_colors[row.column] }}">{{ column_labels[row.column] }}</span>
+                    {% for label in issue.labels or [] %}
+                    <span class="label-tag" style="background: #{{ label.color }}30; color: #{{ label.color }}">{{ label.name }}</span>
+                    {% endfor %}
+                    <span class="activity-date">{{ (issue.updated_at or '')[:10] }}</span>
+                </div>
+                {% endfor %}
+            </div>
+        </section>
+        {% endfor %}
+        {% endif %}
+    </main>
+
+    <footer>
+        Kanbante v{{ version }} · mes issues
+    </footer>
+    <script src="/static/js/live.js" defer></script>
+</body>
+</html>
diff --git a/app/templates/search.html b/app/templates/search.html
new file mode 100644
index 0000000..ae08b1a
--- /dev/null
+++ b/app/templates/search.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="fr" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Recherche — Kanbante</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔍</text></svg>">
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body>
+    <header class="app-header">
+        <div class="brand">
+            <a href="/" class="logo" aria-label="Kanbante — accueil"><span class="logo-mark">📋</span><span class="gradient-text">Kanbante</span></a>
+            <span class="crumb"><span class="sep">/</span> 🔍 <strong>Recherche</strong></span>
+        </div>
+        <nav class="nav-pills">
+            <a href="/" class="nav-pill">🏠 Projets</a>
+            <a href="/focus" class="nav-pill">🎯 Focus</a>
+            <a href="/my" class="nav-pill">👤 Mes issues</a>
+            <a href="/activity" class="nav-pill">📰 Activité</a>
+            <a href="/search" class="nav-pill active">🔍 Recherche</a>
+        </nav>
+    </header>
+
+    <main class="focus-main">
+        <form method="get" action="/search" class="search-hero">
+            <input type="text" name="q" value="{{ q }}" autofocus
+                   placeholder="Rechercher dans toutes les issues de tous les projets...">
+            <button type="submit" class="btn-save btn-inline">Rechercher</button>
+        </form>
+
+        {% if q %}
+        <p class="focus-intro">{{ total }} résultat(s) pour « {{ q }} » — recherche Gitea, tous projets confondus.</p>
+        {% if not groups %}
+        <div class="empty-state">🔍 Aucune issue ne correspond. Essayez un mot plus court ou vérifiez l'orthographe.</div>
+        {% endif %}
+        {% for group in groups %}
+        <section class="focus-group">
+            <h2><a href="/board/{{ group.full_name }}">{{ group.full_name }}</a>
+                <span class="badge secondary">{{ group.rows|length }}</span></h2>
+            <div class="issue-results">
+                {% for row in group.rows %}
+                {% set issue = row.issue %}
+                <div class="issue-row">
+                    <span class="issue-state">{{ '✅' if issue.state != 'open' else '🟢' }}</span>
+                    <a class="issue-main" href="/board/{{ group.full_name }}">
+                        <span class="card-id">#{{ issue.number }}</span> {{ issue.title }}
+                    </a>
+                    <span class="col-chip" style="background: {{ column_colors[row.column] }}20; color: {{ column_colors[row.column] }}">{{ column_labels[row.column] }}</span>
+                    {% for label in issue.labels or [] %}
+                    <span class="label-tag" style="background: #{{ label.color }}30; color: #{{ label.color }}">{{ label.name }}</span>
+                    {% endfor %}
+                    <span class="activity-date">{{ (issue.updated_at or '')[:10] }}</span>
+                </div>
+                {% endfor %}
+            </div>
+        </section>
+        {% endfor %}
+        {% else %}
+        <div class="empty-state">🔍 Tapez un mot-clé : la recherche couvre les titres et corps d'issues de <strong>tous</strong> vos projets Gitea, ouverts comme fermés.</div>
+        {% endif %}
+    </main>
+
+    <footer>
+        Kanbante v{{ version }} · recherche globale
+    </footer>
+    <script src="/static/js/live.js" defer></script>
+</body>
+</html>
diff --git a/static/css/style.css b/static/css/style.css
index ad74177..a55d792 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -719,6 +719,154 @@ footer {
 .activity-text { flex: 1; }
 .card-date { color: var(--text-3); }
 
+/* ── Search / my issues / briefing ──────────── */
+.search-hero { display: flex; gap: 10px; margin-bottom: 18px; }
+.search-hero input {
+    flex: 1;
+    padding: 13px 18px;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    font-size: 1rem;
+    outline: none;
+}
+.search-hero input:focus { border-color: var(--accent); box-shadow: var(--ring); }
+.issue-results { display: flex; flex-direction: column; gap: 7px; }
+.issue-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    background: linear-gradient(180deg, var(--surface-2), var(--surface));
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 10px 14px;
+    font-size: 0.9rem;
+    transition: border-color 0.15s;
+}
+.issue-row:hover { border-color: var(--border-strong); }
+.issue-main { color: var(--text); flex: 1; min-width: 220px; }
+.issue-main:hover { color: #a5c4fd; text-decoration: none; }
+.col-chip {
+    padding: 2px 10px;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 700;
+}
+.briefing-tiles { margin-bottom: 18px; }
+.briefing-card {
+    background: linear-gradient(180deg, var(--surface-2), var(--surface));
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 20px;
+    margin-bottom: 16px;
+}
+.briefing-card h2 { font-size: 1.02rem; margin-bottom: 12px; }
+.briefing-text {
+    white-space: pre-wrap;
+    font-family: inherit;
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: var(--text);
+}
+.briefing-card code, .empty-state code {
+    background: var(--surface-3);
+    padding: 1px 6px;
+    border-radius: 5px;
+    font-size: 0.82em;
+}
+
+/* ── Notes panel v2 ─────────────────────────── */
+.notes-panel { position: relative; transition: width 0.18s ease; }
+.notes-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+.notes-head h3 { margin-bottom: 0; }
+.notes-toggle { padding: 4px 10px; }
+.notes-panel.collapsed { width: 54px !important; padding: 14px 10px; }
+.notes-panel.collapsed .notes-body-wrap { display: none; }
+.notes-panel.collapsed .notes-head h3 { display: none; }
+.notes-panel.collapsed .notes-head { justify-content: center; }
+.notes-resize {
+    position: absolute;
+    left: -3px; top: 0;
+    width: 7px; height: 100%;
+    cursor: col-resize;
+    z-index: 5;
+}
+.notes-resize:hover { background: rgba(124, 92, 252, 0.35); }
+.notes-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
+.notes-foot .btn-save { margin-top: 0; }
+.notes-status { font-size: 0.76rem; color: var(--text-3); }
+
+/* ── Label manager + toggles ────────────────── */
+.modal {
+    position: fixed; inset: 0;
+    background: rgba(4, 6, 10, 0.6);
+    backdrop-filter: blur(3px);
+    z-index: 300;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 8vh 16px 16px;
+}
+.modal[hidden] { display: none; }
+.modal-box {
+    background: var(--surface);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    width: min(560px, 94vw);
+    max-height: 80vh;
+    overflow-y: auto;
+    padding: 22px;
+    animation: drawer-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
+}
+.modal-box h2 { font-size: 1.1rem; }
+.label-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
+.label-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 8px 12px;
+}
+.label-del { font-size: 0.78rem; padding: 5px 10px; }
+.label-create-form { display: flex; gap: 8px; align-items: center; }
+.label-create-form input[type="text"] {
+    flex: 1;
+    padding: 10px 14px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    background: var(--bg);
+    color: var(--text);
+    outline: none;
+}
+.label-create-form input[type="text"]:focus { border-color: var(--accent); box-shadow: var(--ring); }
+.label-create-form input[type="color"] {
+    width: 44px; height: 40px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg);
+    cursor: pointer;
+    padding: 3px;
+}
+.label-swatches { display: flex; gap: 6px; margin-top: 10px; }
+.swatch {
+    width: 22px; height: 22px;
+    border-radius: 50%;
+    border: 2px solid rgba(255,255,255,0.25);
+    cursor: pointer;
+    padding: 0;
+}
+.swatch:hover { transform: scale(1.15); }
+.detail-labels-manage { margin: 4px 0 10px; }
+.label-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+.label-toggle { cursor: pointer; opacity: 0.45; transition: opacity 0.15s, transform 0.1s; }
+.label-toggle:hover { opacity: 0.85; }
+.label-toggle.on { opacity: 1; box-shadow: 0 0 0 1.5px currentColor inset; }
+
 /* ── Responsive ─────────────────────────────── */
 @media (max-width: 900px) {
     .hero { flex-direction: column; align-items: flex-start; }
diff --git a/static/js/board.js b/static/js/board.js
index 0b38085..b735cc9 100644
--- a/static/js/board.js
+++ b/static/js/board.js
@@ -138,6 +138,161 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    // ── Repo context (repoFullName is declared at the top) ──
+    const [repoOwner, repoName] = (repoFullName || '').split('/', 2);
+
+    // ── Notes panel: collapsible, resizable, autosave ──────
+    const notesPanel = document.getElementById('notes-panel');
+    if (notesPanel) {
+        const widthKey = 'kb.notes.w.' + repoFullName;
+        const collapsedKey = 'kb.notes.c.' + repoFullName;
+        const savedWidth = parseInt(localStorage.getItem(widthKey) || '0', 10);
+        if (savedWidth >= 200 && savedWidth <= 560) notesPanel.style.width = savedWidth + 'px';
+        const toggleBtn = document.getElementById('notes-toggle');
+        function applyCollapsed(collapsed) {
+            notesPanel.classList.toggle('collapsed', collapsed);
+            toggleBtn.textContent = collapsed ? '⤡' : '⤢';
+            toggleBtn.title = collapsed ? 'Déplier le panneau' : 'Replier le panneau';
+        }
+        applyCollapsed(localStorage.getItem(collapsedKey) === '1');
+        toggleBtn?.addEventListener('click', () => {
+            const collapsed = !notesPanel.classList.contains('collapsed');
+            applyCollapsed(collapsed);
+            localStorage.setItem(collapsedKey, collapsed ? '1' : '0');
+        });
+
+        const handle = document.getElementById('notes-resize');
+        handle?.addEventListener('pointerdown', (e) => {
+            e.preventDefault();
+            const startX = e.clientX;
+            const startW = notesPanel.getBoundingClientRect().width;
+            function onMove(ev) {
+                const w = Math.min(560, Math.max(200, startW + (startX - ev.clientX)));
+                notesPanel.style.width = w + 'px';
+            }
+            function onUp() {
+                window.removeEventListener('pointermove', onMove);
+                window.removeEventListener('pointerup', onUp);
+                localStorage.setItem(widthKey, String(Math.round(notesPanel.getBoundingClientRect().width)));
+            }
+            window.addEventListener('pointermove', onMove);
+            window.addEventListener('pointerup', onUp);
+        });
+
+        const notesText = document.getElementById('notes-text');
+        const notesStatus = document.getElementById('notes-status');
+        let notesTimer = null;
+        async function saveNotes() {
+            const fd = new FormData();
+            fd.append('repo_full_name', repoFullName);
+            fd.append('note', notesText.value);
+            fd.append('csrf_token', csrfToken);
+            notesStatus.textContent = '💾 Enregistrement...';
+            try {
+                const r = await fetch('/api/notes', { method: 'POST', body: fd });
+                const data = await r.json().catch(() => ({}));
+                if (!r.ok || !data.ok) throw new Error(data.error || ('HTTP ' + r.status));
+                notesStatus.textContent = '✓ Enregistré à ' + new Date().toLocaleTimeString('fr-CA');
+            } catch (err) {
+                notesStatus.textContent = '❌ Échec : ' + err.message;
+            }
+        }
+        notesText?.addEventListener('input', () => {
+            notesStatus.textContent = '✎ Modifié...';
+            clearTimeout(notesTimer);
+            notesTimer = setTimeout(saveNotes, 1200);
+        });
+        document.getElementById('notes-form')?.addEventListener('submit', (e) => {
+            e.preventDefault();
+            clearTimeout(notesTimer);
+            saveNotes();
+        });
+    }
+
+    // ── Label manager ──────────────────────────────────────
+    let repoLabelsCache = null;
+    async function fetchRepoLabels() {
+        if (repoLabelsCache) return repoLabelsCache;
+        const r = await fetch(`/api/repos/${repoOwner}/${repoName}/labels`);
+        const data = await r.json().catch(() => ({}));
+        if (!r.ok || !data.ok) throw new Error(data.error || ('HTTP ' + r.status));
+        repoLabelsCache = data.labels;
+        return repoLabelsCache;
+    }
+
+    function labelChipEl(label) {
+        const span = document.createElement('span');
+        span.className = 'label-tag';
+        const color = /^[0-9a-fA-F]{6}$/.test(label.color || '') ? label.color : '888888';
+        span.style.background = '#' + color + '30';
+        span.style.color = '#' + color;
+        span.textContent = label.name;
+        return span;
+    }
+
+    const labelModal = document.getElementById('label-modal');
+    async function renderLabelList() {
+        const box = document.getElementById('label-list');
+        box.innerHTML = '';
+        try {
+            const labels = await fetchRepoLabels();
+            if (!labels.length) box.innerHTML = '<p class="detail-empty">Aucune étiquette dans ce dépôt.</p>';
+            labels.forEach(label => {
+                const row = document.createElement('div');
+                row.className = 'label-row';
+                row.appendChild(labelChipEl(label));
+                const del = document.createElement('button');
+                del.type = 'button';
+                del.className = 'btn-sm label-del';
+                del.textContent = '🗑️ Supprimer';
+                del.addEventListener('click', async () => {
+                    if (!confirm('Supprimer l\'étiquette « ' + label.name + ' » de tout le dépôt ?')) return;
+                    try {
+                        const r = await fetch(`/api/repos/${repoOwner}/${repoName}/labels/${label.id}`,
+                            { method: 'DELETE', headers: { 'X-CSRF-Token': csrfToken } });
+                        const data = await r.json().catch(() => ({}));
+                        if (!r.ok || !data.ok) throw new Error(data.error || ('HTTP ' + r.status));
+                        repoLabelsCache = repoLabelsCache.filter(l => l.id !== label.id);
+                        row.remove();
+                        showToast('✅ Étiquette supprimée');
+                    } catch (err) { showToast('❌ ' + err.message, true); }
+                });
+                row.appendChild(del);
+                box.appendChild(row);
+            });
+        } catch (err) {
+            box.innerHTML = '<p class="detail-empty">Erreur : ' + err.message + '</p>';
+        }
+    }
+    document.getElementById('labels-btn')?.addEventListener('click', () => {
+        labelModal.hidden = false;
+        renderLabelList();
+    });
+    document.getElementById('label-modal-close')?.addEventListener('click', () => { labelModal.hidden = true; });
+    labelModal?.addEventListener('click', (e) => { if (e.target === labelModal) labelModal.hidden = true; });
+    document.querySelectorAll('.swatch').forEach(sw => sw.addEventListener('click', () => {
+        document.getElementById('new-label-color').value = sw.dataset.color;
+    }));
+    document.getElementById('label-create-form')?.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const name = document.getElementById('new-label-name').value.trim();
+        const color = document.getElementById('new-label-color').value.replace('#', '');
+        if (!name) return;
+        const fd = new FormData();
+        fd.append('name', name);
+        fd.append('color', color);
+        fd.append('csrf_token', csrfToken);
+        try {
+            const r = await fetch(`/api/repos/${repoOwner}/${repoName}/labels`, { method: 'POST', body: fd });
+            const data = await r.json().catch(() => ({}));
+            if (!r.ok || !data.ok) throw new Error(data.error || ('HTTP ' + r.status));
+            if (repoLabelsCache) repoLabelsCache.push(data.label);
+            document.getElementById('new-label-name').value = '';
+            renderLabelList();
+            showToast('✅ Étiquette « ' + data.label.name + ' » créée');
+        } catch (err) { showToast('❌ ' + err.message, true); }
+    });
+
     // ── Card detail drawer ─────────────────────────────────
     // A click opens the panel; a drag must not. Track pointer travel.
     let downX = 0, downY = 0;
@@ -215,6 +370,7 @@ document.addEventListener('DOMContentLoaded', () => {
             span.textContent = l.name;
             labelsBox.appendChild(span);
         });
+        renderLabelToggles(issue);
         document.getElementById('detail-body').innerHTML =
             issue.body ? renderMarkdown(issue.body) : '<p class="detail-empty">Aucune description.</p>';
         document.getElementById('detail-gitea-link').href = issue.html_url || '#';
@@ -226,6 +382,60 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    async function renderLabelToggles(issue) {
+        const box = document.getElementById('detail-label-toggles');
+        if (!box) return;
+        box.innerHTML = '';
+        let all = [];
+        try { all = await fetchRepoLabels(); } catch { return; }
+        const activeIds = new Set((issue.labels || []).map(l => l.id));
+        all.forEach(label => {
+            const chip = labelChipEl(label);
+            chip.classList.add('label-toggle');
+            if (activeIds.has(label.id)) chip.classList.add('on');
+            chip.title = activeIds.has(label.id) ? 'Retirer de l\'issue' : 'Ajouter à l\'issue';
+            chip.addEventListener('click', async () => {
+                const action = activeIds.has(label.id) ? 'remove' : 'add';
+                const fd = new FormData();
+                fd.append('label_id', label.id);
+                fd.append('action', action);
+                fd.append('csrf_token', csrfToken);
+                try {
+                    const [owner, repo] = currentIssue.repo.split('/', 2);
+                    const r = await fetch(`/api/issues/${owner}/${repo}/${currentIssue.number}/labels`,
+                        { method: 'POST', body: fd });
+                    const data = await r.json().catch(() => ({}));
+                    if (!r.ok || !data.ok) throw new Error(data.error || ('HTTP ' + r.status));
+                    issue.labels = data.labels;
+                    // Refresh the chips in the drawer and on the board card.
+                    const labelsBox = document.getElementById('detail-labels');
+                    labelsBox.innerHTML = '';
+                    data.labels.forEach(l => labelsBox.appendChild(labelChipEl(l)));
+                    updateCardLabels(currentIssue.number, data.labels);
+                    renderLabelToggles(issue);
+                } catch (err) { showToast('❌ ' + err.message, true); }
+            });
+            box.appendChild(chip);
+        });
+    }
+
+    function updateCardLabels(number, labels) {
+        const card = document.querySelector(`.kanban-card[data-issue="${number}"]`);
+        if (!card) return;
+        card.dataset.labels = labels.map(l => (l.name || '').toLowerCase()).join(',');
+        let box = card.querySelector('.card-labels');
+        if (!box && labels.length) {
+            box = document.createElement('div');
+            box.className = 'card-labels';
+            card.querySelector('.card-title')?.after(box);
+        }
+        if (box) {
+            box.innerHTML = '';
+            labels.forEach(l => box.appendChild(labelChipEl(l)));
+            box.style.display = labels.length ? '' : 'none';
+        }
+    }
+
     function commentNode(c) {
         const div = document.createElement('div');
         div.className = 'comment';