feat: move column toggles into table headers

Replace separate checkbox bar with inline × buttons in each column
header. Click × to hide a column. Hidden columns appear in a bar
above the table with + buttons to restore them. Sort by clicking
the column label text. Persisted to localStorage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

static/inventory.html

@@ -281,6 +281,25 @@
             user-select: none;
         }
 
+        .results-table th .th-label {
+            cursor: pointer;
+        }
+
+        .results-table th .th-hide {
+            display: inline-block;
+            margin-left: 3px;
+            color: #999;
+            cursor: pointer;
+            font-size: 10px;
+            font-weight: normal;
+            line-height: 1;
+            vertical-align: middle;
+        }
+
+        .results-table th .th-hide:hover {
+            color: #c00;
+        }
+
         /* Resizable column handle */
         .results-table th .resize-handle {
             position: absolute;
@@ -1138,9 +1157,9 @@
                 </div>
             </div>
 
-            <div style="background:#f0f0f0;padding:3px 8px;border:1px solid #ccc;border-bottom:none;font-size:9px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;">
-                <strong style="margin-right:4px;">Columns:</strong>
-                <span id="columnToggles"></span>
+            <div id="hiddenColumnsBar" style="background:#f0f0f0;padding:3px 8px;border:1px solid #ccc;border-bottom:none;font-size:9px;display:none;align-items:center;gap:4px;flex-wrap:wrap;">
+                <strong style="margin-right:4px;">Hidden:</strong>
+                <span id="hiddenColumnsList"></span>
             </div>
             <div class="results-container" id="searchResults">
                 <div class="no-results">Enter search criteria above and click "Search Items" to find inventory items.</div>

static/inventory.js

@@ -34,7 +34,7 @@ document.addEventListener('DOMContentLoaded', function() {
     
     initializeEventListeners();
     loadCharacterOptions();
-    renderColumnToggles();
+    renderHiddenColumnsBar();
 });
 
 /**
@@ -504,28 +504,40 @@ function saveColumnVisibility() {
     localStorage.setItem('inventoryColumnVisibility', JSON.stringify(columnVisibility));
 }
 
-function renderColumnToggles() {
-    const container = document.getElementById('columnToggles');
-    if (!container) return;
-    container.innerHTML = '';
-    RESULT_COLUMNS.forEach(col => {
-        const label = document.createElement('label');
-        label.style.cssText = 'display:inline-flex;align-items:center;gap:2px;font-size:9px;margin-right:6px;cursor:pointer;';
-        const cb = document.createElement('input');
-        cb.type = 'checkbox';
-        cb.checked = columnVisibility[col.key] !== false;
-        cb.style.cssText = 'width:10px;height:10px;margin:0;';
-        cb.addEventListener('change', () => {
-            columnVisibility[col.key] = cb.checked;
+function renderHiddenColumnsBar() {
+    const bar = document.getElementById('hiddenColumnsBar');
+    const list = document.getElementById('hiddenColumnsList');
+    if (!bar || !list) return;
+
+    const hidden = RESULT_COLUMNS.filter(c => columnVisibility[c.key] === false);
+    if (hidden.length === 0) {
+        bar.style.display = 'none';
+        return;
+    }
+
+    bar.style.display = 'flex';
+    list.innerHTML = '';
+    hidden.forEach(col => {
+        const btn = document.createElement('button');
+        btn.textContent = `+ ${col.label}`;
+        btn.style.cssText = 'font-size:9px;padding:1px 5px;border:1px solid #999;background:#fff;cursor:pointer;border-radius:3px;margin-right:3px;';
+        btn.addEventListener('click', () => {
+            columnVisibility[col.key] = true;
             saveColumnVisibility();
             if (currentResultsData) displayResults(currentResultsData);
+            renderHiddenColumnsBar();
         });
-        label.appendChild(cb);
-        label.appendChild(document.createTextNode(col.label));
-        container.appendChild(label);
+        list.appendChild(btn);
     });
 }
 
+function hideColumn(key) {
+    columnVisibility[key] = false;
+    saveColumnVisibility();
+    if (currentResultsData) displayResults(currentResultsData);
+    renderHiddenColumnsBar();
+}
+
 /**
  * Display search results in the UI
  */
@@ -551,7 +563,7 @@ function displayResults(data) {
         <table class="results-table">
             <thead>
                 <tr>
-                    ${visibleCols.map(c => `<th class="${c.cls || ''} sortable" data-sort="${c.sort}">${c.label}${getSortIcon(c.sort)}</th>`).join('\n                    ')}
+                    ${visibleCols.map(c => `<th class="${c.cls || ''} sortable" data-sort="${c.sort}"><span class="th-label">${c.label}${getSortIcon(c.sort)}</span><span class="th-hide" data-col="${c.key}" title="Hide column">\u00d7</span></th>`).join('\n                    ')}
                 </tr>
             </thead>
             <tbody>
@@ -577,14 +589,26 @@ function displayResults(data) {
 
     searchResults.innerHTML = html;
 
-    // Add click event listeners to sortable headers
-    document.querySelectorAll('.sortable').forEach(header => {
-        header.addEventListener('click', () => {
-            const sortField = header.getAttribute('data-sort');
+    // Add click event listeners to sortable headers (click label to sort)
+    document.querySelectorAll('.sortable .th-label').forEach(label => {
+        label.style.cursor = 'pointer';
+        label.addEventListener('click', () => {
+            const sortField = label.closest('th').getAttribute('data-sort');
             handleSort(sortField);
         });
     });
 
+    // Add click event listeners to hide buttons
+    document.querySelectorAll('.th-hide').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            hideColumn(btn.getAttribute('data-col'));
+        });
+    });
+
+    // Update hidden columns bar
+    renderHiddenColumnsBar();
+
     // Initialize resizable columns
     initResizableColumns();
 }