feat(frontend): filtres, création d'issues, vue Focus, CDN vendorés

- vendor: HTMX/Alpine/SortableJS servis depuis /static/vendor (M3)
- board.js: jeton CSRF, ordres source/destination envoyés, carte
  replacée + toast rouge en cas d'échec (M8), filtres texte/étiquette,
  formulaire de création d'issue
- dashboard: 3 onglets Actifs/Inactifs/Archivés, recherche via
  data-search échappé au lieu d'une interpolation JS (M9)
- board: cartes liées vers l'issue Gitea, méta CSRF, notes protégées
- nouvelles pages focus.html et error.html
- CSS: fond des badges en color-mix, l'ancien var(--accent)20 était
  invalide (M1); styles toolbar/focus/erreur/toast erreur

app/templates/board.html

@@ -3,10 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="csrf-token" content="{{ csrf_token }}">
     <title>{{ repo }} — Kanbante</title>
     <link rel="stylesheet" href="/static/css/style.css">
-    <script src="https://unpkg.com/[email protected]"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
+    <script src="/static/vendor/htmx.min.js"></script>
+    <script src="/static/vendor/sortable.min.js"></script>
     <script src="/static/js/board.js" defer></script>
 </head>
 <body>
@@ -17,12 +18,29 @@
             <span>{{ owner }}/</span><strong>{{ repo }}</strong>
         </h1>
         <nav>
+            <a href="/focus" class="btn-sm">🎯 Focus</a>
             {% if repo_info.html_url %}
             <a href="{{ repo_info.html_url }}" target="_blank" class="btn-sm">🔗 Gitea</a>
             {% endif %}
         </nav>
     </header>
 
+    <!-- Toolbar: text + label filters, and issue creation (Gitea-backed) -->
+    <div class="board-toolbar">
+        <input type="text" id="card-filter" placeholder="🔍 Filtrer les cartes...">
+        <select id="label-filter">
+            <option value="">Toutes les étiquettes</option>
+            {% for label in labels %}
+            <option value="{{ label.name }}">{{ label.name }}</option>
+            {% endfor %}
+        </select>
+        <form id="create-issue-form">
+            <input type="text" id="new-issue-title" maxlength="255"
+                   placeholder="➕ Nouvelle issue (titre)..." required>
+            <button type="submit" class="btn-save btn-inline">Créer</button>
+        </form>
+    </div>
+
     <main class="board-container">
         <div class="kanban-board">
             {% for col in ['backlog','todo','in_progress','review','done'] %}
@@ -37,8 +55,14 @@
                     <div class="kanban-card"
                          data-issue="{{ issue.number }}"
                          data-repo="{{ full_name }}"
-                         draggable="true">
-                        <div class="card-id">#{{ issue.number }}</div>
+                         data-title="{{ issue.title|lower }}"
+                         data-labels="{{ issue.labels|map(attribute='name')|join(',')|lower }}">
+                        <div class="card-id">
+                            #{{ issue.number }}
+                            {% if issue.html_url %}
+                            <a href="{{ issue.html_url }}" target="_blank" title="Ouvrir dans Gitea">↗</a>
+                            {% endif %}
+                        </div>
                         <div class="card-title">{{ issue.title }}</div>
                         {% if issue.labels %}
                         <div class="card-labels">
@@ -65,8 +89,10 @@
         <!-- Notes panel -->
         <aside class="notes-panel">
             <h3>📝 Notes du projet</h3>
-            <form hx-post="/api/notes" hx-swap="none">
+            <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>
@@ -80,5 +106,14 @@
         <span>Mis à jour {{ repo_info.updated_at[:10] }}</span>
         {% endif %}
     </footer>
+    <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>

app/templates/dashboard.html

@@ -6,40 +6,44 @@
     <title>Kanbante — Dashboard</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">
-    <script src="https://unpkg.com/[email protected]"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
+    <script defer src="/static/vendor/alpine.min.js"></script>
 </head>
 <body>
     <header>
         <h1><a href="/">📋 <span class="gradient-text">Kanbante</span></a></h1>
         <nav>
+            <a href="/focus" class="btn-sm">🎯 Focus</a>
             <span class="badge">{{ active_repos|length }} actifs</span>
-            <span class="badge secondary">{{ inactive_repos|length }} archivés</span>
+            <span class="badge secondary">{{ archived_repos|length }} archivés</span>
         </nav>
     </header>
 
     <main x-data="{ tab: 'active', search: '' }">
-        <!-- Tabs -->
+        <!-- Tabs: "actif" = mis à jour dans la fenêtre glissante;
+             "archivé" = le vrai drapeau Gitea (repo.archived). -->
         <div class="tabs">
             <button :class="{ active: tab === 'active' }" @click="tab = 'active'">
                 🟢 Actifs ({{ active_repos|length }})
             </button>
             <button :class="{ active: tab === 'inactive' }" @click="tab = 'inactive'">
-                ⚪ Archivés ({{ inactive_repos|length }})
+                💤 Inactifs ({{ inactive_repos|length }})
+            </button>
+            <button :class="{ active: tab === 'archived' }" @click="tab = 'archived'">
+                🗄️ Archivés ({{ archived_repos|length }})
             </button>
         </div>
 
-        <!-- Search -->
+        <!-- Search: the repo name lives in a data-* attribute (HTML-escaped
+             by Jinja), never interpolated into a JS string literal. -->
         <div class="search-bar">
             <input type="text" placeholder="🔍 Filtrer les projets..." x-model="search">
         </div>
 
-        <!-- Active Projects -->
-        <div x-show="tab === 'active'" class="project-grid">
-            {% for repo in active_repos %}
+        {% macro project_card(repo, archived=False) %}
             {% set full = repo.full_name %}
-            <div class="project-card"
-                 x-show="search === '' || '{{ repo.name.lower() }}{{ repo.full_name.lower() }}'.includes(search.toLowerCase())">
+            <div class="project-card{% if archived %} archived{% endif %}"
+                 data-search="{{ (repo.name ~ ' ' ~ repo.full_name ~ ' ' ~ (repo.description or ''))|lower }}"
+                 x-show="search === '' || $el.dataset.search.includes(search.toLowerCase())">
                 <div class="card-header">
                     <span class="org-tag">{{ repo.owner.login }}</span>
                     <span class="date">{{ repo.updated_at[:10] }}</span>
@@ -64,27 +68,23 @@
                     {% endif %}
                 </div>
             </div>
-            {% endfor %}
+        {% endmacro %}
+
+        <div x-show="tab === 'active'" class="project-grid">
+            {% for repo in active_repos %}{{ project_card(repo) }}{% endfor %}
         </div>
 
-        <!-- Inactive Projects -->
         <div x-show="tab === 'inactive'" class="project-grid">
-            {% for repo in inactive_repos %}
-            <div class="project-card archived"
-                 x-show="search === '' || '{{ repo.name.lower() }}'.includes(search.toLowerCase())">
-                <div class="card-header">
-                    <span class="org-tag">{{ repo.owner.login }}</span>
-                    <span class="date">{{ repo.updated_at[:10] }}</span>
-                </div>
-                <h3>{{ repo.name }}</h3>
-                <p class="desc">{{ repo.description or '—' }}</p>
-            </div>
-            {% endfor %}
+            {% for repo in inactive_repos %}{{ project_card(repo) }}{% endfor %}
+        </div>
+
+        <div x-show="tab === 'archived'" class="project-grid">
+            {% for repo in archived_repos %}{{ project_card(repo, archived=True) }}{% endfor %}
         </div>
     </main>
 
     <footer>
-        Kanbante v0.1 · {{ active_repos|length + inactive_repos|length }} projets sur Gitea
+        Kanbante v{{ version }} · {{ active_repos|length + inactive_repos|length + archived_repos|length }} projets sur Gitea · actifs = mis à jour depuis {{ active_window_days }} jours
     </footer>
 </body>
 </html>

app/templates/error.html

@@ -0,0 +1,24 @@
+<!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>Erreur — Kanbante</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body>
+    <header>
+        <h1><a href="/">📋 <span class="gradient-text">Kanbante</span></a></h1>
+    </header>
+    <main class="error-main">
+        <div class="error-box">
+            <h2>⚠️ Quelque chose s'est mal passé</h2>
+            <p>{{ message }}</p>
+            <p><a href="/" class="btn-sm">← Retour au dashboard</a></p>
+        </div>
+    </main>
+    <footer>
+        Kanbante v{{ version }}
+    </footer>
+</body>
+</html>

app/templates/focus.html

@@ -0,0 +1,62 @@
+<!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>Focus — 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>
+        <h1><a href="/">📋 <span class="gradient-text">Kanbante</span></a> <span class="sep">/</span> 🎯 Focus</h1>
+        <nav>
+            <span class="badge">{{ groups|map(attribute='cards')|map('length')|sum }} cartes en cours</span>
+        </nav>
+    </header>
+
+    <main class="focus-main">
+        <p class="focus-intro">Tout ce qui est <strong>En cours</strong> ou <strong>En révision</strong>, tous projets actifs confondus.</p>
+        {% if not groups %}
+        <p class="focus-empty">🎉 Rien en cours ni en révision pour le moment.</p>
+        {% 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.cards|length }}</span>
+            </h2>
+            <div class="focus-cards">
+                {% for card in group.cards %}
+                <div class="kanban-card focus-card">
+                    <div class="card-id">
+                        #{{ card.issue.number }}
+                        <span class="chip" style="background: {{ column_colors[card.column] }}20; color: {{ column_colors[card.column] }}">
+                            {{ column_labels[card.column] }}
+                        </span>
+                        {% if card.issue.html_url %}
+                        <a href="{{ card.issue.html_url }}" target="_blank" title="Ouvrir dans Gitea">↗</a>
+                        {% endif %}
+                    </div>
+                    <div class="card-title">{{ card.issue.title }}</div>
+                    {% if card.issue.labels %}
+                    <div class="card-labels">
+                        {% for label in card.issue.labels %}
+                        <span class="label-tag" style="background: #{{ label.color }}30; color: #{{ label.color }}">
+                            {{ label.name }}
+                        </span>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+                {% endfor %}
+            </div>
+        </section>
+        {% endfor %}
+    </main>
+
+    <footer>
+        Kanbante v{{ version }} · vue Focus
+    </footer>
+</body>
+</html>