From b6ca460ac61c9c7b0fcf53cf8d96e8a6fca93cf3 Mon Sep 17 00:00:00 2001
From: Josh Wright <josh@Joshs-MacBook-Pro.local>
Date: Sun, 29 Mar 2026 08:26:46 -0400
Subject: [PATCH] feat: add sort by vmid, name, last created, last updated on
 dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- GET /api/instances now accepts ?sort= (name|vmid|created_at|updated_at)
  and ?order= (asc|desc); invalid sort fields fall back to name asc
- Timestamp sorts use id as a tiebreaker (datetime() precision is 1 s)
- Toolbar gains a sort-field <select> and a ↑/↓ direction toggle button
- toggleSortDir() flips direction and re-fetches; state held in data-dir attr

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html       |  7 +++++++
 js/ui.js         | 12 +++++++++++-
 server/db.js     |  8 +++++++-
 server/routes.js |  4 ++--
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index a0dcc88..28a0160 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,13 @@
         <select id="filter-stack" onchange="filterInstances()">
           <option value="">all stacks</option>
         </select>
+        <select id="sort-field" onchange="filterInstances()">
+          <option value="name">name</option>
+          <option value="vmid">vmid</option>
+          <option value="updated_at">last updated</option>
+          <option value="created_at">last created</option>
+        </select>
+        <button id="sort-dir" class="btn" data-dir="asc" onclick="toggleSortDir()" title="reverse sort">↑</button>
         <div class="toolbar-right">
           <button class="btn primary" onclick="openNewModal()">+ new instance</button>
         </div>
diff --git a/js/ui.js b/js/ui.js
index 7c3587d..2c41a57 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -100,11 +100,21 @@ function setStateFilter(state) {
   filterInstances();
 }
 
+function toggleSortDir() {
+  const btn = document.getElementById('sort-dir');
+  const next = btn.dataset.dir === 'asc' ? 'desc' : 'asc';
+  btn.dataset.dir = next;
+  btn.textContent = next === 'asc' ? '↑' : '↓';
+  filterInstances();
+}
+
 async function filterInstances() {
   const search = document.getElementById('search-input').value;
   const state  = document.getElementById('filter-state').value;
   const stack  = document.getElementById('filter-stack').value;
-  const instances = await getInstances({ search, state, stack });
+  const sort   = document.getElementById('sort-field').value;
+  const order  = document.getElementById('sort-dir').dataset.dir || 'asc';
+  const instances = await getInstances({ search, state, stack, sort, order });
   const grid = document.getElementById('instance-grid');
 
   if (!instances.length) {
diff --git a/server/db.js b/server/db.js
index fc7720e..a7a29c9 100644
--- a/server/db.js
+++ b/server/db.js
@@ -133,6 +133,8 @@ function seedJobs() {
 
 // ── Queries ───────────────────────────────────────────────────────────────────
 
+const VALID_SORTS  = ['name', 'vmid', 'updated_at', 'created_at'];
+
 export function getInstances(filters = {}) {
   const parts = ['SELECT * FROM instances WHERE 1=1'];
   const params = {};
@@ -142,7 +144,11 @@ export function getInstances(filters = {}) {
   }
   if (filters.state) { parts.push('AND state = @state'); params.state = filters.state; }
   if (filters.stack) { parts.push('AND stack = @stack'); params.stack = filters.stack; }
-  parts.push('ORDER BY name ASC');
+  const sortField = VALID_SORTS.includes(filters.sort) ? filters.sort : 'name';
+  const sortOrder = filters.order === 'desc' ? 'DESC' : 'ASC';
+  // id is a stable tiebreaker for timestamp fields (datetime precision is 1 s)
+  const tiebreaker = (sortField === 'created_at' || sortField === 'updated_at') ? `, id ${sortOrder}` : '';
+  parts.push(`ORDER BY ${sortField} ${sortOrder}${tiebreaker}`);
   return db.prepare(parts.join(' ')).all(params);
 }
 
diff --git a/server/routes.js b/server/routes.js
index fba5552..6f2a79e 100644
--- a/server/routes.js
+++ b/server/routes.js
@@ -69,8 +69,8 @@ router.get('/instances/stacks', (_req, res) => {
 
 // GET /api/instances
 router.get('/instances', (req, res) => {
-  const { search, state, stack } = req.query;
-  res.json(getInstances({ search, state, stack }));
+  const { search, state, stack, sort, order } = req.query;
+  res.json(getInstances({ search, state, stack, sort, order }));
 });
 
 // GET /api/instances/:vmid/history