From 53865f136d9610701dad85478d1a7f9ab3728497 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Mon, 13 Jul 2026 11:20:51 -0400
Subject: [PATCH] fix: tags contextuels + rename/delete confirm dans Settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Context menu (_ctxMenuData):
- Remplacé getters par propriétés simples (Alpine ne réagit pas aux getters)
- Sync _wsInitData → _ctxMenuData dans onContextMenu, ctxAddNewTag, ctxRemoveTag
- Les 4 tags existants apparaissent maintenant dans le dropdown

Settings > Tags:
- Double-clic sur un tag → prompt rename (PUT /api/settings/tags/<id>)
- Suppression: modal de confirmation au lieu de confirm() natif
- Affiche le nombre d'items impactés si tag utilisé
---
 app/templates/local_workspace.html | 30 +++++++++++++--------
 app/templates/settings.html        | 43 ++++++++++++++++++++++++++++--
 2 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/app/templates/local_workspace.html b/app/templates/local_workspace.html
index 6f22562..93d22e3 100644
--- a/app/templates/local_workspace.html
+++ b/app/templates/local_workspace.html
@@ -774,6 +774,13 @@ window._wsInitData = (function() {
       menu.style.top = y + 'px';
       this.ctxMenu.x = x;
       this.ctxMenu.y = y;
+      // Sync to _ctxMenuData for Alpine reactivity
+      var c = window._ctxMenuData;
+      c.ctxMenu = this.ctxMenu;
+      c.ctxTagAdding = this.ctxTagAdding;
+      c.ctxTagExistingOpen = this.ctxTagExistingOpen;
+      c.ctxAvailTags = this.ctxAvailTags;
+      c.ctxNewTagColor = this.ctxNewTagColor;
     },
 
     // ── Long-press (mobile context menu) ──
@@ -851,6 +858,9 @@ window._wsInitData = (function() {
       this.ctxAvailTags = (this.workspaceTags || []).filter(function(t) {
         return !(this.ctxMenu.tags||[]).some(function(nt) { return nt.id === t.id; });
       }.bind(this));
+      // Sync to _ctxMenuData
+      window._ctxMenuData.ctxAvailTags = this.ctxAvailTags;
+      window._ctxMenuData.ctxMenu = this.ctxMenu;
     },
 
     async ctxAddNewTag(tagName, color) {
@@ -875,6 +885,9 @@ window._wsInitData = (function() {
           self.ctxAvailTags = (self.workspaceTags || []).filter(function(t) {
             return !(self.ctxMenu.tags||[]).some(function(nt) { return nt.id === t.id; });
           });
+          // Sync to _ctxMenuData
+          window._ctxMenuData.ctxAvailTags = self.ctxAvailTags;
+          window._ctxMenuData.ctxMenu = self.ctxMenu;
         }); }, 200);
       }
       this.ctxTagAdding = false;
@@ -1918,17 +1931,12 @@ for (var _i = 0; _i < _wsKeys.length; _i++) {
 _wsInitData = window._wsInitData;
 // Objet léger pour le ctx-menu (évite le conflit $nextTick avec Alpine)
 window._ctxMenuData = {
-  get ctxMenu() { return window._wsInitData.ctxMenu; },
-  set ctxMenu(v) { window._wsInitData.ctxMenu = v; },
-  get ctxTagAdding() { return window._wsInitData.ctxTagAdding; },
-  set ctxTagAdding(v) { window._wsInitData.ctxTagAdding = v; },
-  get ctxTagExistingOpen() { return window._wsInitData.ctxTagExistingOpen; },
-  set ctxTagExistingOpen(v) { window._wsInitData.ctxTagExistingOpen = v; },
-  get ctxAvailTags() { return window._wsInitData.ctxAvailTags; },
-  set ctxAvailTags(v) { window._wsInitData.ctxAvailTags = v; },
-  get ctxNewTagColor() { return window._wsInitData.ctxNewTagColor; },
-  set ctxNewTagColor(v) { window._wsInitData.ctxNewTagColor = v; },
-  get ctxTagColors() { return window._wsInitData.ctxTagColors; },
+  ctxMenu: {visible:false,x:0,y:0,node:null,tags:[]},
+  ctxTagAdding: false,
+  ctxTagExistingOpen: false,
+  ctxAvailTags: [],
+  ctxNewTagColor: '#787774',
+  ctxTagColors: ['#787774','#E03E3E','#D9730D','#DFAB01','#0F7B6C','#0B6E99','#6940A5','#AD1A72','#E16259','#D4A72C','#448361','#337EA9','#9065B0','#C94D8B'],
   ctxMenuOpenPage() { window._wsInitData.ctxMenuOpenPage(); },
   ctxMenuOpenFolder() { window._wsInitData.ctxMenuOpenFolder(); },
   ctxMenuRename() { window._wsInitData.ctxMenuRename(); },
diff --git a/app/templates/settings.html b/app/templates/settings.html
index 5fd30d9..ce8b447 100644
--- a/app/templates/settings.html
+++ b/app/templates/settings.html
@@ -193,10 +193,14 @@
           <template x-for="tag in allTags" :key="tag.id">
             <div class="tag-mgmt-item">
               <div class="tag-color-dot" :style="{background: tag.color}"></div>
-              <span class="tag-name" x-text="tag.name"></span>
+              <span class="tag-name" 
+                    x-text="tag.name" 
+                    @dblclick="renameTag(tag)" 
+                    title="Double-click to rename"
+                    style="cursor:pointer;"></span>
               <span class="tag-count" x-text="tag.count + ' items'"></span>
               <input type="color" :value="tag.color" @input="updateTagColor(tag.id, $event.target.value)" style="width:24px;height:24px;border:none;cursor:pointer;background:none;padding:0;" title="Change color">
-              <button class="tag-chip rm-btn" @click="deleteTag(tag.id)" title="Delete">×</button>
+              <button class="tag-chip rm-btn" @click="deletingTag=tag" title="Delete">×</button>
             </div>
           </template>
           <div class="new-tag-form">
@@ -207,6 +211,22 @@
             <button class="btn btn-primary" @click="createTag()" :disabled="!newTagName.trim()" style="padding:4px 12px;font-size:12px;">Add</button>
           </div>
         </div>
+        <!-- Delete confirmation modal -->
+        <div class="modal-overlay" x-show="deletingTag" @click.self="deletingTag=null" @keydown.escape="deletingTag=null" style="z-index:1000;">
+          <div class="modal-box" style="max-width:360px;">
+            <h3 style="margin:0 0 8px;">Delete tag</h3>
+            <p style="color:var(--text-dim);margin:0 0 16px;">
+              Are you sure you want to delete the tag "<strong x-text="deletingTag?.name"></strong>"?
+              <span x-show="deletingTag?.count > 0" style="color:#E03E3E;display:block;margin-top:4px;">
+                ⚠️ This tag is used on <span x-text="deletingTag?.count"></span> item(s). Removing it will also remove it from those items.
+              </span>
+            </p>
+            <div style="display:flex;gap:8px;justify-content:flex-end;">
+              <button class="btn" @click="deletingTag=null">Cancel</button>
+              <button class="btn btn-danger" @click="confirmDeleteTag()">Delete</button>
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- Features -->
@@ -267,6 +287,7 @@ document.addEventListener('alpine:init', function() {
       allTags: [],
       newTagName: '',
       newTagColor: '#787774',
+      deletingTag: null,
       presetColors: ['#787774','#E03E3E','#D9730D','#DFAB01','#0F7B6C','#0B6E99','#6940A5','#AD1A72','#E16259','#D4A72C','#448361','#337EA9','#9065B0','#C94D8B'],
       avatarUrl: '{{ avatar_url or "" }}',
       avatarColor: '{{ avatar_color or "#3A3A3A" }}',
@@ -310,6 +331,24 @@ document.addEventListener('alpine:init', function() {
         await this.loadTags();
       },
 
+      async renameTag(tag) {
+        var newName = prompt('Rename tag "' + tag.name + '":', tag.name);
+        if (!newName || !newName.trim() || newName.trim().toLowerCase() === tag.name.toLowerCase()) return;
+        await fetch('/api/settings/tags/' + tag.id, {
+          method: 'PUT', headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({name: newName.trim()})
+        });
+        await this.loadTags();
+      },
+
+      async confirmDeleteTag() {
+        var tag = this.deletingTag;
+        if (!tag) return;
+        await fetch('/api/settings/tags/' + tag.id, { method: 'DELETE' });
+        this.deletingTag = null;
+        await this.loadTags();
+      },
+
       async uploadAvatar(ev) {
         var file = ev.target.files[0];
         if (!file) return;