From aba15e7b6d540638fae51fe6eea257c1dcc987a8 Mon Sep 17 00:00:00 2001
From: Tatlatat <hungdotmn@gmail.com>
Date: Tue, 2 Jun 2026 09:09:18 +0700
Subject: [PATCH] fix(cookbook): sort by Fit when the Fit header is clicked
 (#842) (#860)

The Cookbook Scan/Download (hwfit) table gave the Fit column key:'score', so
clicking the Fit header sorted by score instead of by fit. Give the Fit column
its own 'fit' sort key, add a matching option to the #hwfit-sort select, and
rank fit_level (perfect > good > marginal > too_tight > no_fit) in the
client-side sort. Default puts the best fit first; clicking again reverses it.
Score still sorts by score.

Closes #842
---
 static/js/cookbook-hwfit.js | 7 ++++++-
 static/js/cookbook.js       | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/static/js/cookbook-hwfit.js b/static/js/cookbook-hwfit.js
index e6445f8..4253553 100644
--- a/static/js/cookbook-hwfit.js
+++ b/static/js/cookbook-hwfit.js
@@ -519,6 +519,11 @@ export async function _hwfitFetch(fresh = false) {
       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;
+          return asc ? av - bv : bv - av;
+        }
         const av = Number(a[field]) || 0, bv = Number(b[field]) || 0;
         return asc ? av - bv : bv - av;
       });
@@ -717,7 +722,7 @@ function _wireManualHardwareControls(el) {
 export const _fitColors = { perfect: 'var(--green, #50fa7b)', good: 'var(--yellow, #f1fa8c)', marginal: 'var(--orange, #ffb86c)', too_tight: 'var(--red, #ff5555)' };
 
 export const _hwfitColumns = [
-  { key: 'score', label: 'Fit',    cls: 'hwfit-fit' },
+  { key: 'fit', label: 'Fit',    cls: 'hwfit-fit' },
   { key: null,    label: 'Model',  cls: 'hwfit-name' },
   { key: 'params',label: 'Param', cls: 'hwfit-c-params' },
   { key: null,    label: 'Quant',  cls: 'hwfit-c-quant' },
diff --git a/static/js/cookbook.js b/static/js/cookbook.js
index 98f5dc7..8eb914a 100644
--- a/static/js/cookbook.js
+++ b/static/js/cookbook.js
@@ -1434,7 +1434,7 @@ function _renderRecipes() {
   html += '<button type="button" class="hwfit-gpu-btn" id="hwfit-rescan" title="Re-scan hardware" style="flex-shrink:0;position:relative;top:-3px;left:-1px;">↻ RESCAN</button>';
   html += '<button type="button" class="hwfit-gpu-btn hwfit-hw-manual-btn" id="hwfit-hw-manual-btn" title="Set hardware manually" style="flex-shrink:0;position:relative;top:-3px;left:-1px;">EDIT</button>';
   html += '<select class="cookbook-field-input hwfit-sort" id="hwfit-sort" style="display:none">';
-  html += '<option value="score">Score</option><option value="vram">VRAM</option>';
+  html += '<option value="fit">Fit</option><option value="score">Score</option><option value="vram">VRAM</option>';
   html += '<option value="speed">Speed</option><option value="params">Params</option>';
   html += '<option value="context">Context</option></select>';
   html += '</div>';