From d46c406bd81f1c4b2aa106df75aec4e820511d79 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 bd49a17..bccd760 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.