From d8a2cebdd66891755ee3cc043ef24effb0a9472f Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Sat, 11 Jul 2026 22:04:37 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20multi-s=C3=A9lection=20=E2=80=94=20Set()?=
 =?UTF-8?q?=20remplac=C3=A9=20par=20{}=20pour=20r=C3=A9activit=C3=A9=20Alp?=
 =?UTF-8?q?ine.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cause: Alpine.js ne détecte pas les mutations de Set() → les checkboxes
et la bulk bar ne se mettaient jamais à jour.

Fix: selectedIds devenu un objet {} (clés = IDs, valeurs = true).
selectedIdsCount (number) remplace .size pour la réactivité.
toggleSelect: Object.assign({}, selectedIds) force la réactivité.
bulkDelete: Object.keys(selectedIds) au lieu de Array.from(Set).
selectAll + Clear: boucles for..in au lieu de .clear().

Alpine détecte les changements sur les objets simples,
contrairement aux objets Set().
---
 app/templates/local_workspace.html | 41 +++++++++++++++---------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/app/templates/local_workspace.html b/app/templates/local_workspace.html
index 1326af2..e92832f 100644
--- a/app/templates/local_workspace.html
+++ b/app/templates/local_workspace.html
@@ -277,10 +277,10 @@
   </div>
 
   <!-- Bulk actions bar -->
-  <div class="bulk-bar" x-show="selectedIds.size > 0" x-transition>
-    <span x-text="selectedIds.size + ' selected'"></span>
+  <div class="bulk-bar" x-show="selectedIdsCount > 0" x-transition>
+    <span x-text="selectedIdsCount + ' selected'"></span>
     <button class="btn btn-danger" @click="bulkDelete()">🗑 Delete</button>
-    <button class="btn btn-secondary" @click="selectedIds.clear(); selectedIds=new Set()">✕ Clear</button>
+    <button class="btn btn-secondary" @click="for(var k in selectedIds) delete selectedIds[k]; selectedIdsCount=0">✕ Clear</button>
   </div>
 
   <!-- Tree -->
@@ -317,9 +317,9 @@
              :data-folder-id="node.is_folder ? node.id : null"
              @dragstart="onInternalDragStart($event, node.id)"
              @dragend="draggedItemId = null; $el.style.opacity = ''"
-             :class="{ selected: selectedIds.has(node.id) }">
+             :class="{ selected: !!selectedIds[node.id] }">
           <input type="checkbox" class="item-checkbox"
-                 :checked="selectedIds.has(node.id)"
+                 :checked="!!selectedIds[node.id]"
                  @click.stop="toggleSelect(node, $event)"
                  title="Select item">
           <!-- chevron -->
@@ -384,8 +384,8 @@
     </tr></thead>
     <tbody>
       <template x-for="node in flatTree" :key="'t'+node.id">
-        <tr :class="{ selected: selectedIds.has(node.id) }">
-          <td><input type="checkbox" :checked="selectedIds.has(node.id)" @click.stop="toggleSelect(node, $event)"></td>
+        <tr :class="{ selected: !!selectedIds[node.id] }">
+          <td><input type="checkbox" :checked="!!selectedIds[node.id]" @click.stop="toggleSelect(node, $event)"></td>
           <td>
             <span class="table-icon" x-text="_fileIcon(node.name, node.is_folder, node.content_format)"></span>
             <span class="table-name" @click="node.is_folder ? navigateToFolder(node.id) : openPage(node.id)" x-text="node.name"></span>
@@ -504,7 +504,8 @@ document.addEventListener('alpine:init', function() {
     viewMode: 'tree',
 
     // Multi-select
-    selectedIds: new Set(),
+    selectedIds: {},
+    selectedIdsCount: 0,
     lastSelectedId: null,
 
     // Undo
@@ -604,20 +605,20 @@ document.addEventListener('alpine:init', function() {
         var end = allIds.indexOf(node.id);
         if (start !== -1 && end !== -1) {
           var from = Math.min(start, end), to = Math.max(start, end);
-          for (var i = from; i <= to; i++) this.selectedIds.add(allIds[i]);
+          for (var i = from; i <= to; i++) this.selectedIds[allIds[i]] = true;
         }
       } else if (ev.ctrlKey || ev.metaKey) {
         // Toggle single
-        if (this.selectedIds.has(node.id)) this.selectedIds.delete(node.id);
-        else this.selectedIds.add(node.id);
+        if (!!this.selectedIds[node.id]) delete this.selectedIds[node.id];
+        else this.selectedIds[node.id] = true;
       } else {
         // Replace selection
-        this.selectedIds.clear();
-        this.selectedIds.add(node.id);
+        for (var k in this.selectedIds) delete this.selectedIds[k];
+        this.selectedIds[node.id] = true;
       }
       this.lastSelectedId = node.id;
       // Force reactivity
-      this.selectedIds = new Set(this.selectedIds);
+      this.selectedIds = Object.assign({}, this.selectedIds); this.selectedIdsCount = Object.keys(this.selectedIds).length;
     },
     _collectVisibleIds(nodes) {
       var ids = [];
@@ -628,25 +629,25 @@ document.addEventListener('alpine:init', function() {
       return ids;
     },
     async bulkDelete() {
-      var ids = Array.from(this.selectedIds);
+      var ids = Object.keys(this.selectedIds);
       if (ids.length === 0) return;
       if (!confirm('Delete ' + ids.length + ' selected items?')) return;
       var self = this;
       for (var i=0; i<ids.length; i++) {
         await fetch('/api/local-workspace/items/' + ids[i], { method: 'DELETE' });
       }
-      this.selectedIds.clear();
-      this.selectedIds = new Set();
+      for (var k in this.selectedIds) delete this.selectedIds[k];
+      this.selectedIdsCount = 0;
       this._reloadAfterAction();
     },
     selectAll(ev) {
       if (ev.target.checked) {
         var all = this._collectVisibleIds(this.displayTree);
-        for (var i=0; i<all.length; i++) this.selectedIds.add(all[i]);
+        for (var i=0; i<all.length; i++) this.selectedIds[all[i]] = true;
       } else {
-        this.selectedIds.clear();
+        for (var k in this.selectedIds) delete this.selectedIds[k];
       }
-      this.selectedIds = new Set(this.selectedIds);
+      this.selectedIds = Object.assign({}, this.selectedIds); this.selectedIdsCount = Object.keys(this.selectedIds).length;
     },
 
     // ── Table view data ──