From d00badf884a9b21755615b908a199c72c4eb9370 Mon Sep 17 00:00:00 2001
From: Stephen Yue <realsabimaru@gmail.com>
Date: Tue, 2 Jun 2026 12:05:53 +0800
Subject: [PATCH] Fix Cookbook fit column sorting

The Fit column shared the Score column's sort key, so clicking the Fit
header sorted by Score instead of by hardware fit. There was also no
fit option in the hidden sort <select> and no fit branch in the
client-side comparator.

- Give the Fit column its own sort key (fit).
- Add a fit option to the sort select (kept Score as the default so
  first-load ordering is unchanged).
- Sort by the categorical fit_level rank
  (perfect > good > marginal > too_tight), tie-broken by score, honoring
  the ascending/descending toggle.

Fixes #842

Co-authored-by: SabixMaru <285860855+SabixMaru@users.noreply.github.com>
---
 static/js/cookbook-hwfit.js | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/static/js/cookbook-hwfit.js b/static/js/cookbook-hwfit.js
index bd49a1703..bccd760e5 100644
--- a/static/js/cookbook-hwfit.js
+++ b/static/js/cookbook-hwfit.js
@@ -530,16 +530,24 @@ export async function _hwfitFetch(fresh = false) {
       const sortSel = document.getElementById('hwfit-sort');
       const sortKey = sortSel?.value || 'score';
       const asc = sortSel?.dataset.reverse === '1';   // reversed → ascending (lowest first)
-      const field = { score: 'score', vram: 'required_gb', speed: 'speed_tps', params: 'params_b', context: 'context' }[sortKey] || 'score';
-      data.models.sort((a, b) => {
-        if (sortKey === 'fit') {
-          const rank = { perfect: 4, good: 3, marginal: 2, too_tight: 1, no_fit: 0 };
-          const av = rank[a.fit_level] || 0, bv = rank[b.fit_level] || 0;
+      if (sortKey === 'fit') {
+        // fit_level is categorical (perfect→good→marginal→too_tight), not numeric,
+        // so rank it explicitly instead of falling through to the score column.
+        // Tie-break by score so rows within one fit tier stay meaningfully ordered.
+        const fitRank = { perfect: 4, good: 3, marginal: 2, too_tight: 1, no_fit: 0 };
+        data.models.sort((a, b) => {
+          const ar = fitRank[a.fit_level] ?? -1, br = fitRank[b.fit_level] ?? -1;
+          if (ar !== br) return asc ? ar - br : br - ar;
+          const as = Number(a.score) || 0, bs = Number(b.score) || 0;
+          return asc ? as - bs : bs - as;
+        });
+      } else {
+        const field = { score: 'score', vram: 'required_gb', speed: 'speed_tps', params: 'params_b', context: 'context' }[sortKey] || 'score';
+        data.models.sort((a, b) => {
+          const av = Number(a[field]) || 0, bv = Number(b[field]) || 0;
           return asc ? av - bv : bv - av;
-        }
-        const av = Number(a[field]) || 0, bv = Number(b[field]) || 0;
-        return asc ? av - bv : bv - av;
-      });
+        });
+      }
     }
     _hwfitRenderList(list, _applyEngineFilter(data.models));
     // Persist this result so the next page load can paint it instantly.