fix(web/uninstaller): Update uninstall selected count on select + prevent selection of text in many UI elements

Signed-off-by: paulober <[email protected]>

Author: paulober

web/uninstaller/main.css

@@ -17,4 +17,11 @@ body {
   margin: 0;
 }
 
+.prevent-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 /* Fullscreen overlay tweaks handled via Tailwind classes; nothing else needed */

web/uninstaller/main.js

@@ -144,36 +144,36 @@ function renderToolbar() {
   <div class="flex flex-wrap items-center justify-between gap-3 mb-2">
     <div class="flex items-center gap-2 flex-1">
       <input id="search" type="search" placeholder="Search (name, id, version)…"
-        class="w-full md:w-96 px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-zinc-900/80 focus:outline-none focus:ring focus:ring-blue-500/40"
+        class="w-full md:w-96 px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-zinc-900/80 focus:outline-none focus:ring focus:ring-blue-500/40 prevent-select"
         value="${state.filter}">
     </div>
 
     <div class="flex items-center gap-2">
       <button id="sort-installed"
         class="px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-zinc-800 ${state.sortKey === 'installedAt' ? 'ring-1 ring-blue-500/50' : ''}"
         title="Sort by install date">
-        <span class="mr-1">Installed</span>
+        <span class="mr-1 prevent-select">Installed</span>
         <span aria-hidden="true">${state.sortKey === 'installedAt' ? (state.sortDir === 'desc' ? '↓' : '↑') : ''}</span>
       </button>  
 
       <button id="sort-last" class="px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-zinc-800 ${state.sortKey === 'lastUsed' ? 'ring-1 ring-blue-500/50' : ''}" title="Sort by last used">
-        <span class="mr-1">Last used</span>
+        <span class="mr-1 prevent-select">Last used</span>
         <span aria-hidden="true">${state.sortKey === 'lastUsed' ? (state.sortDir === 'desc' ? '↓' : '↑') : ''}</span>
       </button>
 
       <button id="sort-name" class="px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-zinc-800 ${state.sortKey === 'name' ? 'ring-1 ring-blue-500/50' : ''}" title="Sort by name">
-        <span class="mr-1">Name</span>
+        <span class="mr-1 prevent-select">Name</span>
         <span aria-hidden="true">${state.sortKey === 'name' ? (state.sortDir === 'asc' ? '↑' : '↓') : ''}</span>
       </button>
 
       <div class="h-6 w-px bg-gray-300 dark:bg-zinc-700 mx-1"></div>
 
       <label class="inline-flex items-center gap-2 px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-zinc-800 cursor-pointer">
         <input id="select-all" type="checkbox" class="h-4 w-4 accent-blue-600">
-        <span>Select all (visible)</span>
+        <span class="prevent-select">Select all (visible)</span>
       </label>
 
-      <button id="select-stale" class="px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-zinc-800"
+      <button id="select-stale" class="px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-zinc-800 prevent-select"
         title="Select items last used > 30 days ago that are not the latest version">
         Select stale & not-latest
       </button>
@@ -196,25 +196,25 @@ function itemRow(i) {
     <label class="flex items-center gap-3 flex-1 cursor-pointer">
       <input data-role="select" data-id="${i.id}" type="checkbox" class="h-4 w-4 accent-blue-600" ${checked} />
       <div class="flex flex-col">
-        <div class="text-sm font-medium">
+        <div class="text-sm font-medium prevent-select">
           ${escapeHtml(i.label)}
           <span class="text-gray-500 dark:text-gray-400 font-normal">• ${escapeHtml(i.version || "unknown")}</span>
         </div>
         <div class="text-xs text-gray-500 dark:text-gray-400 truncate" title="${escapeHtml((i.path || i.depId) + (i.path ? "" : ""))}">
-          ${escapeHtml(i.depId)}${i.path ? ` • ${escapeHtml(i.path)}` : ""}
+          <span class="prevent-select">${escapeHtml(i.depId)}</span>${i.path ? `<span class="prevent-select"> • </span>${escapeHtml(i.path)}` : ""}
         </div>
       </div>
     </label>
 
     <div class="flex items-center gap-2 sm:gap-3 shrink-0">
       <span class="text-xs px-2 py-1 rounded-full border border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-zinc-800">
-        Last used: ${escapeHtml(last)}
+        <span class="prevent-select">Last used: </span>${escapeHtml(last)}
       </span>
       <span class="text-xs px-2 py-1 rounded-full border border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-zinc-800">
-        Installed: ${escapeHtml(installed)}
+        <span class="prevent-select">Installed: </span>${escapeHtml(installed)}
       </span>
       <button data-role="uninstall-one" data-id="${i.id}"
-        class="px-3 py-2 rounded-xl bg-red-600 text-white hover:bg-red-700">
+        class="px-3 py-2 rounded-xl bg-red-600 text-white hover:bg-red-700 prevent-select">
         Uninstall
       </button>
     </div>
@@ -248,7 +248,7 @@ function renderOverlay(visible = false) {
 function renderFrame() {
   document.body.innerHTML = `
   <div class="h-full w-full overflow-hidden grid grid-rows-[auto,1fr] text-[13px] text-gray-900 dark:text-gray-100">
-    <header class="px-5 py-4 shrink-0">
+    <header class="px-5 py-4 shrink-0 prevent-select">
       <h1 class="text-lg font-semibold">Uninstall components</h1>
       <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
         Select one or more installed items to uninstall. Sort by last used to find stale components quickly.
@@ -386,8 +386,19 @@ function bindEvents() {
       if (id) {
         if (target.checked) state.selected.add(id); else state.selected.delete(id);
         updateSelectAllCheckbox();
-        $("#uninstall-selected")?.setAttribute("disabled", state.selected.size ? "" : "disabled");
-        if (state.selected.size) $("#uninstall-selected")?.removeAttribute("disabled");
+        const uninstallSelectedBtn = document.getElementById("uninstall-selected");
+        if (uninstallSelectedBtn) {
+          uninstallSelectedBtn.disabled = state.selected.size === 0;
+          // Update content without having to re-render the whole toolbar
+          // replace (<number>) in button text with current count
+          const m = uninstallSelectedBtn.textContent.match(/\((\d+)\)/);
+          if (m) {
+            uninstallSelectedBtn.textContent = uninstallSelectedBtn.textContent.replace(
+              m[0],
+              `(${state.selected.size})`);
+          }
+          if (state.selected.size) uninstallSelectedBtn.removeAttribute("disabled");
+        }
       }
     }
   });
@@ -531,7 +542,7 @@ function renderBootLoading(text = "Loading installed components…") {
     <div class="h-full w-full grid place-items-center">
       <div class="flex flex-col items-center gap-4 p-8 rounded-2xl bg-white/90 dark:bg-zinc-900/90 border border-gray-200 dark:border-zinc-800">
         <div class="h-10 w-10 rounded-full border-4 border-gray-300 dark:border-zinc-700 border-t-transparent animate-spin"></div>
-        <div class="text-sm text-gray-700 dark:text-gray-200">${escapeHtml(text)}</div>
+        <div class="text-sm text-gray-700 dark:text-gray-200 prevent-select">${escapeHtml(text)}</div>
       </div>
     </div>
   `;