From 11e256ac70e43d389fe1c2877a18f9b94ca3265b Mon Sep 17 00:00:00 2001
From: jgor20 <102353650+jgor20@users.noreply.github.com>
Date: Sun, 11 Jan 2026 13:40:31 +0000
Subject: [PATCH] feat(ui): add sortable columns to models table

Add sorting functionality to the models table with clickable headers for columns like Stat, Model Identity, Global Quota, Next Reset, and Account Distribution. Includes dynamic sort icons and logic to handle ascending/descending order with appropriate defaults.
---
 public/js/data-store.js  | 42 ++++++++++++++++++++++---
 public/views/models.html | 68 +++++++++++++++++++++++++++++++++-------
 2 files changed, 95 insertions(+), 15 deletions(-)

diff --git a/public/js/data-store.js b/public/js/data-store.js
index 1eb496d..a55f8aa 100644
--- a/public/js/data-store.js
+++ b/public/js/data-store.js
@@ -22,7 +22,9 @@ document.addEventListener('alpine:init', () => {
         filters: {
             account: 'all',
             family: 'all',
-            search: ''
+            search: '',
+            sortCol: 'avgQuota',
+            sortAsc: true
         },
 
         // Settings for calculation
@@ -177,20 +179,52 @@ document.addEventListener('alpine:init', () => {
                     resetIn: minResetTime ? window.utils.formatTimeUntil(minResetTime) : '-',
                     quotaInfo,
                     pinned: !!config.pinned,
-                    hidden: !!isHidden // Use computed visibility
+                    hidden: !!isHidden, // Use computed visibility
+                    activeCount: quotaInfo.filter(q => q.pct > 0).length
                 });
             });
 
-            // Sort: Pinned first, then by avgQuota (descending)
+            // Sort: Pinned first, then by selected column
+            const sortCol = this.filters.sortCol;
+            const sortAsc = this.filters.sortAsc;
+
             this.quotaRows = rows.sort((a, b) => {
                 if (a.pinned !== b.pinned) return a.pinned ? -1 : 1;
-                return b.avgQuota - a.avgQuota;
+                
+                let valA = a[sortCol];
+                let valB = b[sortCol];
+
+                // Handle nulls (always push to bottom)
+                if (valA === valB) return 0;
+                if (valA === null || valA === undefined) return 1;
+                if (valB === null || valB === undefined) return -1;
+
+                if (typeof valA === 'string' && typeof valB === 'string') {
+                    return sortAsc ? valA.localeCompare(valB) : valB.localeCompare(valA);
+                }
+
+                return sortAsc ? valA - valB : valB - valA;
             });
 
             // Trigger Dashboard Update if active
             // Ideally dashboard watches this store.
         },
 
+        setSort(col) {
+            if (this.filters.sortCol === col) {
+                this.filters.sortAsc = !this.filters.sortAsc;
+            } else {
+                this.filters.sortCol = col;
+                // Default sort direction: Descending for numbers/stats, Ascending for text/time
+                if (['avgQuota', 'activeCount'].includes(col)) {
+                    this.filters.sortAsc = false;
+                } else {
+                    this.filters.sortAsc = true;
+                }
+            }
+            this.computeQuotaRows();
+        },
+
         getModelFamily(modelId) {
             const lower = modelId.toLowerCase();
             if (lower.includes('claude')) return 'claude';
diff --git a/public/views/models.html b/public/views/models.html
index 8b2b1d6..5efcde1 100644
--- a/public/views/models.html
+++ b/public/views/models.html
@@ -94,14 +94,60 @@
                 :class="{'table-xs': $store.settings.compact, 'table-sm': !$store.settings.compact}">
             <thead>
                 <tr>
-                    <th class="w-14 py-3 pl-4 whitespace-nowrap" x-text="$store.global.t('stat')">Stat</th>
-                    <th class="py-3 whitespace-nowrap" x-text="$store.global.t('modelIdentity')">Model Identity</th>
-                    <th class="min-w-[12rem] py-3 whitespace-nowrap" x-text="$store.global.t('globalQuota')">Global
-                        Quota</th>
-                    <th class="min-w-[8rem] py-3 whitespace-nowrap" x-text="$store.global.t('nextReset')">Next Reset
+                    <th class="w-14 py-3 pl-4 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('avgQuota')">
+                        <div class="flex items-center justify-center">
+                            <span x-text="$store.global.t('stat')">Stat</span>
+                        </div>
+                    </th>
+                    <th class="py-3 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('modelId')">
+                        <div class="flex items-center gap-1">
+                            <span x-text="$store.global.t('modelIdentity')">Model Identity</span>
+                            <svg class="w-3 h-3 transition-colors"
+                                :class="$store.data.filters.sortCol === 'modelId' ? 'text-neon-purple' : 'text-gray-700 opacity-0 group-hover:opacity-100'"
+                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    :d="$store.data.filters.sortCol === 'modelId' ? ($store.data.filters.sortAsc ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7') : 'M8 9l4-4 4 4m0 6l-4 4-4-4'" />
+                            </svg>
+                        </div>
+                    </th>
+                    <th class="min-w-[12rem] py-3 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('avgQuota')">
+                        <div class="flex items-center gap-1">
+                            <span x-text="$store.global.t('globalQuota')">Global Quota</span>
+                            <svg class="w-3 h-3 transition-colors"
+                                :class="$store.data.filters.sortCol === 'avgQuota' ? 'text-neon-purple' : 'text-gray-700 opacity-0 group-hover:opacity-100'"
+                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    :d="$store.data.filters.sortCol === 'avgQuota' ? ($store.data.filters.sortAsc ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7') : 'M8 9l4-4 4 4m0 6l-4 4-4-4'" />
+                            </svg>
+                        </div>
+                    </th>
+                    <th class="min-w-[8rem] py-3 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('minResetTime')">
+                        <div class="flex items-center gap-1">
+                            <span x-text="$store.global.t('nextReset')">Next Reset</span>
+                            <svg class="w-3 h-3 transition-colors"
+                                :class="$store.data.filters.sortCol === 'minResetTime' ? 'text-neon-purple' : 'text-gray-700 opacity-0 group-hover:opacity-100'"
+                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    :d="$store.data.filters.sortCol === 'minResetTime' ? ($store.data.filters.sortAsc ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7') : 'M8 9l4-4 4 4m0 6l-4 4-4-4'" />
+                            </svg>
+                        </div>
+                    </th>
+                    <th class="py-3 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('activeCount')">
+                        <div class="flex items-center gap-1 justify-start">
+                            <span x-text="$store.global.t('distribution')">Account Distribution</span>
+                            <svg class="w-3 h-3 transition-colors"
+                                :class="$store.data.filters.sortCol === 'activeCount' ? 'text-neon-purple' : 'text-gray-700 opacity-0 group-hover:opacity-100'"
+                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    :d="$store.data.filters.sortCol === 'activeCount' ? ($store.data.filters.sortAsc ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7') : 'M8 9l4-4 4 4m0 6l-4 4-4-4'" />
+                            </svg>
+                        </div>
                     </th>
-                    <th class="py-3 whitespace-nowrap" x-text="$store.global.t('distribution')">Account
-                        Distribution</th>
                     <th class="w-20 py-3 pr-4 text-right whitespace-nowrap" x-text="$store.global.t('actions')">Actions
                     </th>
                 </tr>
@@ -143,20 +189,20 @@
                             </div>
                         </td>
                         <td>
-                            <div class="flex items-center justify-end gap-3">
+                            <div class="flex items-center justify-start gap-3">
                                 <div
-                                    class="text-[10px] font-mono text-gray-500 hidden xl:block text-right leading-tight opacity-70">
+                                    class="text-[10px] font-mono text-gray-500 hidden xl:block text-left leading-tight opacity-70">
                                     <div
                                         x-text="$store.global.t('activeCount', {count: row.quotaInfo?.filter(q => q.pct > 0).length || 0})">
                                     </div>
                                 </div>
                                 <!-- Account Status Indicators -->
-                                <div class="flex flex-wrap gap-1 justify-end max-w-[200px]" x-data="{ maxVisible: 12 }">
+                                <div class="flex flex-wrap gap-1 justify-start max-w-[200px]" x-data="{ maxVisible: 12 }">
                                     <template x-if="!row.quotaInfo || row.quotaInfo.length === 0">
                                         <div class="text-[10px] text-gray-600 italic">No data</div>
                                     </template>
                                     <template x-if="row.quotaInfo && row.quotaInfo.length > 0">
-                                        <div class="flex flex-wrap gap-1 justify-end">
+                                        <div class="flex flex-wrap gap-1 justify-start">
                                             <!-- Visible accounts (limited to maxVisible) -->
                                             <template x-for="(q, idx) in row.quotaInfo.slice(0, maxVisible)" :key="q.fullEmail">
                                                 <div class="tooltip tooltip-left" :data-tip="`${q.fullEmail} (${q.pct}%)`">