add inventory sort control to the ui

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
2026-11-12 12:07:15 -07:00
parent 8f3bff2e62
commit 83611e2a2c
3 changed files with 16 additions and 2 deletions

View File

@@ -17,7 +17,7 @@ const state = {
totalPages: 1,
view: "catalog",
user: null,
inventory: { search: "", category: "" },
inventory: { search: "", category: "", sort: "name" },
};
let authMode = "login";
@@ -32,7 +32,7 @@ function cacheElements() {
"error-banner", "loading", "empty-state", "results-grid",
"pagination", "prev-page", "next-page", "page-info",
"modal-backdrop", "modal-close", "modal-title", "modal-body",
"catalog-view", "inventory-view", "inv-search", "inv-category",
"catalog-view", "inventory-view", "inv-search", "inv-category", "inv-sort",
"inv-summary", "inv-empty", "inv-table-wrap", "inv-tbody", "tab-mine",
"auth-backdrop", "auth-close", "auth-title", "auth-form",
"auth-username", "auth-password", "auth-error", "auth-submit",
@@ -394,8 +394,10 @@ function showCatalogView() {
function resetInventoryView() {
state.inventory.search = "";
state.inventory.category = "";
state.inventory.sort = "name";
els["inv-search"].value = "";
els["inv-category"].value = "";
els["inv-sort"].value = "name";
els["inv-summary"].textContent = "";
renderInventory({ total: 0, items: [] });
}
@@ -404,6 +406,7 @@ async function loadInventory() {
const params = new URLSearchParams();
if (state.inventory.search) params.set("search", state.inventory.search);
if (state.inventory.category) params.set("category", state.inventory.category);
params.set("sort", state.inventory.sort);
params.set("page", "1");
params.set("page_size", String(INVENTORY_PAGE_SIZE));
@@ -674,6 +677,10 @@ function bindInventoryEvents() {
state.inventory.category = els["inv-category"].value;
loadInventory();
});
els["inv-sort"].addEventListener("change", () => {
state.inventory.sort = els["inv-sort"].value;
loadInventory();
});
}
/* ---------- boot ---------- */

View File

@@ -68,6 +68,12 @@
<option value="ship-items">Ship Equipment</option>
<option value="fps-items">FPS Items</option>
</select>
<select id="inv-sort" aria-label="Sort inventory">
<option value="name">Sort: Name</option>
<option value="category">Sort: Category</option>
<option value="quantity">Sort: Quantity</option>
<option value="updated">Sort: Recently updated</option>
</select>
</div>
<div id="inv-summary" class="inv-summary"></div>
<div id="inv-empty" class="empty-state hidden">

View File

@@ -347,6 +347,7 @@ main {
}
#inv-search { flex: 2 1 280px; }
#inv-category { flex: 1 1 180px; }
#inv-sort { flex: 1 1 170px; }
.inventory-controls input:focus,
.inventory-controls select:focus { outline: none; border-color: var(--accent); }
#inventory-view {