Collection: sort bar UI, fix set_code sort field, column header hover styles

ui/collection.css

@@ -746,15 +746,18 @@
 .coll-th-sortable {
     cursor: pointer;
     user-select: none;
-    transition: color 0.15s;
+    transition: color 0.15s, background 0.15s;
+    position: relative;
 }
 
 .coll-th-sortable:hover {
     color: var(--accent);
+    background: rgba(255,255,255,0.06);
 }
 
 .coll-th-active {
     color: var(--accent);
+    background: rgba(255,255,255,0.04);
 }
 
 .coll-table td,
@@ -2738,6 +2741,69 @@
 
 /* ── 15. Animations ──────────────────────────────────────── */
 
+/* ── Sort Bar ─────────────────────────────────────────── */
+
+.coll-sort-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px;
+    margin-bottom: 8px;
+    background: var(--card-bg, #1e1e2e);
+    border: 1px solid var(--border, #2a2a3a);
+    border-radius: 8px;
+    font-size: 13px;
+    color: var(--text-secondary, #999);
+}
+
+.coll-sort-bar-label {
+    font-weight: 600;
+    color: var(--text-secondary, #999);
+    white-space: nowrap;
+}
+
+.coll-sort-select {
+    background: var(--bg, #121220);
+    color: var(--text, #e0e0e0);
+    border: 1px solid var(--border, #2a2a3a);
+    border-radius: 6px;
+    padding: 5px 10px;
+    font-size: 13px;
+    cursor: pointer;
+    transition: border-color 0.15s;
+}
+
+.coll-sort-select:hover,
+.coll-sort-select:focus {
+    border-color: var(--accent, #6c63ff);
+    outline: none;
+}
+
+.coll-sort-dir-btn {
+    background: var(--bg, #121220);
+    color: var(--text, #e0e0e0);
+    border: 1px solid var(--border, #2a2a3a);
+    border-radius: 6px;
+    padding: 5px 12px;
+    font-size: 13px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: border-color 0.15s, background 0.15s;
+    white-space: nowrap;
+}
+
+.coll-sort-dir-btn:hover {
+    border-color: var(--accent, #6c63ff);
+    background: rgba(108, 99, 255, 0.1);
+}
+
+.coll-sort-bar-count {
+    margin-left: auto;
+    font-weight: 500;
+    color: var(--text-secondary, #999);
+    white-space: nowrap;
+}
+
 @keyframes coll-fade-in {
     from { opacity: 0; }
     to   { opacity: 1; }

ui/collection.js

@@ -352,6 +352,7 @@ const Collection = (() => {
             showLoading(false);
         }
         renderTable();
+        renderSortBar();
         renderPagination();
         renderCountBadge();
     }
@@ -450,6 +451,7 @@ const Collection = (() => {
 
                 <!-- Table Area -->
                 <div class="coll-table-wrap">
+                    ${renderSortBarHtml()}
                     <div class="coll-table-container">
                         <table class="coll-table" id="coll-table">
                             ${renderTableHeaderHtml()}
@@ -491,6 +493,59 @@ const Collection = (() => {
         renderPagination();
     }
 
+    // ── Sort Bar HTML ───────────────────────────────────────
+
+    function renderSortBarHtml() {
+        const sortOptions = [
+            { value: 'name',       label: 'Name' },
+            { value: 'tcg_price',  label: 'Price' },
+            { value: 'cmc',        label: 'CMC / Mana Value' },
+            { value: 'quantity',   label: 'Quantity' },
+            { value: 'type_line',  label: 'Type' },
+            { value: 'rarity',     label: 'Rarity' },
+            { value: 'edhrec_rank',label: 'EDHREC Rank' },
+            { value: 'salt_score', label: 'Salt Score' },
+            { value: 'set_code',   label: 'Set' },
+            { value: 'finish',     label: 'Finish' },
+        ];
+        const opts = sortOptions.map(o =>
+            `<option value="${o.value}" ${state.sortField === o.value ? 'selected' : ''}>${o.label}</option>`
+        ).join('');
+        const dirLabel = state.sortDir === 'asc' ? '▲ Asc' : '▼ Desc';
+        return `
+        <div class="coll-sort-bar">
+            <span class="coll-sort-bar-label">Sort by</span>
+            <select class="coll-sort-select" id="coll-sort-select" onchange="Collection.setSortFromBar(this.value)">
+                ${opts}
+            </select>
+            <button class="coll-sort-dir-btn" id="coll-sort-dir-btn" onclick="Collection.toggleSortDir()" title="Toggle sort direction">${dirLabel}</button>
+            <span class="coll-sort-bar-count" id="coll-sort-bar-count">${state.total.toLocaleString()} cards</span>
+        </div>`;
+    }
+
+    function renderSortBar() {
+        const bar = document.querySelector('.coll-sort-bar');
+        if (bar) {
+            bar.outerHTML = renderSortBarHtml();
+        }
+    }
+
+    function setSortFromBar(field) {
+        state.sortField = field;
+        state.page = 1;
+        savePreferences();
+        pushUrlState();
+        fetchCollection();
+    }
+
+    function toggleSortDir() {
+        state.sortDir = state.sortDir === 'asc' ? 'desc' : 'asc';
+        state.page = 1;
+        savePreferences();
+        pushUrlState();
+        fetchCollection();
+    }
+
     // ── Filter Panel HTML ───────────────────────────────────
 
     function renderFiltersHtml() {
@@ -724,7 +779,7 @@ const Collection = (() => {
         { key: 'cmc',           label: 'CMC',       sortable: true },
         { key: 'power_toughness',label: 'P/T',      sortable: false },
         { key: 'rarity',        label: 'Rarity',    sortable: true },
-        { key: 'set_name',      label: 'Set',       sortable: true },
+        { key: 'set_code',      label: 'Set',       sortable: true },
         { key: 'tcg_price',     label: 'Price',     sortable: true },
         { key: 'edhrec_rank',   label: 'EDHREC',    sortable: true },
         { key: 'salt_score',    label: 'Salt',      sortable: true },
@@ -2729,6 +2784,8 @@ const Collection = (() => {
         resetFilters,
         // Sort / page
         setSort,
+        setSortFromBar,
+        toggleSortDir,
         setPage,
         setPageSize,
         // Category inline