From 130a8a09ad23ace18dd7ccca5da936ce75779ddf Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Sun, 12 Jul 2026 15:53:57 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20menu=20contextuel=20=E2=80=94=20tous=20l?=
 =?UTF-8?q?es=20tags=20visibles=20+=20s=C3=A9lection=20couleur=20en=20gril?=
 =?UTF-8?q?le?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- loadWorkspaceTags() utilise /api/settings/tags/all (TOUS les tags, pas
  seulement ceux déjà utilisés via JOIN page_tags). Avant: 2/6 tags visibles.
- Nouvelle grille couleurs 'New tag': grid 7 colonnes × 2 rangées,
  carrés responsifs via padding-bottom:100%. + bouton Add à droite.
- .ctx-menu: max-height:80vh + overflow-y:auto → plus de clipping
  en bas de fenêtre. z-index 600 (au-dessus du settings panel).
- .color-swatch-ctx: carrés parfaits dans la grid, hover scale 1.15
---
 app/templates/local_workspace.html | 35 +++++++++++++++++-------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/app/templates/local_workspace.html b/app/templates/local_workspace.html
index 7a7d38c..9498e88 100644
--- a/app/templates/local_workspace.html
+++ b/app/templates/local_workspace.html
@@ -269,7 +269,7 @@
 .view-menu-item.active{background:rgba(35,131,226,.12);color:var(--accent);font-weight:500;}
 
 /* Context menu */
-.ctx-menu{position:fixed;z-index:300;background:#1E1E1E;border:1px solid var(--border-strong);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.7);min-width:180px;overflow:hidden;padding:4px 0;}
+.ctx-menu{position:fixed;background:#1E1E1E;border:1px solid var(--border-strong);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);min-width:200px;z-index:600;padding:4px 0;max-height:80vh;overflow-y:auto;}
 .ctx-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:13px;color:var(--text);cursor:pointer;transition:background 100ms;}
 .ctx-item:hover{background:var(--bg-hover);}
 .ctx-item.ctx-danger{color:var(--danger);}
@@ -280,8 +280,8 @@
 .ctx-tag-add:hover{color:var(--accent);}
 .ctx-section{padding:5px 14px;font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;}
 .ctx-tag-color{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
-.color-swatch-ctx{width:18px;height:18px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:all 100ms;}
-.color-swatch-ctx:hover{transform:scale(1.15);}
+.color-swatch-ctx{width:100%;padding-bottom:100%;border-radius:5px;cursor:pointer;border:2px solid transparent;transition:all 100ms;box-sizing:border-box;position:relative;}
+.color-swatch-ctx:hover{transform:scale(1.15);z-index:1;}
 .color-swatch-ctx.selected{border-color:var(--text);box-shadow:0 0 0 2px var(--accent);}
 .ctx-add-tag-item:hover{background:rgba(35,131,226,.08);}
 .ctx-has-sub{justify-content:space-between;}
@@ -804,17 +804,22 @@
       <span style="flex:1;">➕ New tag</span>
       <span x-text="ctxTagAdding ? '▾' : '▸'"></span>
     </div>
-    <div x-show="ctxTagAdding" style="display:flex;align-items:center;gap:4px;padding:4px 14px;">
-      <template x-for="c in ctxTagColors" :key="c">
-        <div class="color-swatch-ctx" :class="{ selected: ctxNewTagColor === c }" 
-             :style="{background: c}" @click.stop="ctxNewTagColor=c"></div>
-      </template>
-      <input class="tag-input" x-ref="ctxTagInput"
-             @keydown.enter="ctxAddNewTag($event.target.value); $event.target.value=''"
-             @keydown.escape="ctxTagAdding=false"
-             @click.stop
-             placeholder="tag name..."
-             style="margin-left:4px;">
+    <div x-show="ctxTagAdding" style="padding:6px 10px;background:var(--bg-tertiary);border-radius:6px;margin:2px 6px;">
+      <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;">
+        <template x-for="c in ctxTagColors" :key="c">
+          <div class="color-swatch-ctx" :class="{ selected: ctxNewTagColor === c }" 
+               :style="{background: c}" @click.stop="ctxNewTagColor=c"></div>
+        </template>
+      </div>
+      <div style="display:flex;gap:4px;">
+        <input class="tag-input" x-ref="ctxTagInput"
+               @keydown.enter="ctxAddNewTag($event.target.value); $event.target.value=''"
+               @keydown.escape="ctxTagAdding=false"
+               @click.stop
+               placeholder="Tag name..."
+               style="flex:1;">
+        <button class="btn btn-primary" @click.stop="ctxAddNewTag($refs.ctxTagInput.value); $refs.ctxTagInput.value=''" style="padding:2px 10px;font-size:12px;">Add</button>
+      </div>
     </div>
     <div class="ctx-sep"></div>
     <div class="ctx-item ctx-danger" @click="ctxMenuDelete()">🗑 Delete</div>
@@ -2238,7 +2243,7 @@ document.addEventListener('alpine:init', function() {
     // ── Tag management ──
     async loadWorkspaceTags() {
       try {
-        var r = await fetch('/api/local-workspace/tags');
+        var r = await fetch('/api/settings/tags/all');
         var d = await r.json();
         this.workspaceTags = d.tags || [];
       } catch(e) { this.workspaceTags = []; }