updated quality for ore

trade-hub/frontend/src/app.js

@@ -361,6 +361,10 @@ async function openModal(class_name) {
       <div class="add-row">
         <label for="add-qty">Qty</label>
         <input type="number" id="add-qty" min="1" max="1000000" value="1">
+        ${item.quality_applicable ? `
+          <label for="add-quality">Quality</label>
+          <input type="number" id="add-quality" min="1" max="1000" placeholder="—">
+        ` : ""}
         <button type="button" id="add-to-inventory" class="btn-primary">
           ${state.user ? "Add to my inventory" : "Log in to add"}
         </button>
@@ -368,7 +372,16 @@ async function openModal(class_name) {
     `;
     document.getElementById("add-to-inventory").addEventListener("click", () => {
       const qty = Math.max(1, Number(document.getElementById("add-qty").value) || 1);
-      addToInventory(item.class_name, qty);
+      let quality = null;
+      const qualityInput = document.getElementById("add-quality");
+      if (qualityInput && qualityInput.value.trim() !== "") {
+        quality = Number(qualityInput.value);
+        if (!Number.isInteger(quality) || quality < 1 || quality > 1000) {
+          showToast("Quality must be between 1 and 1000", true);
+          return;
+        }
+      }
+      addToInventory(item.class_name, qty, quality);
     });
   } catch (err) {
     els["modal-body"].innerHTML = `<p class="modal-desc">Failed to load item: ${escapeHtml(err.message)}</p>`;
@@ -503,6 +516,48 @@ function itemNameCell(entry) {
   return cell;
 }
 
+function qualityCell(entry, editable) {
+  const cell = document.createElement("td");
+  if (!entry.quality_applicable) {
+    // Keep a recorded quality visible even if the catalog item disappeared.
+    cell.innerHTML =
+      entry.quality == null
+        ? '<span class="inv-quality-na">—</span>'
+        : escapeHtml(String(entry.quality));
+    return cell;
+  }
+  if (!editable) {
+    cell.textContent = entry.quality == null ? "—" : String(entry.quality);
+    return cell;
+  }
+  const input = document.createElement("input");
+  input.type = "number";
+  input.className = "inv-quality";
+  input.min = "1";
+  input.max = "1000";
+  input.placeholder = "—";
+  input.value = entry.quality == null ? "" : String(entry.quality);
+  input.setAttribute("aria-label", `Quality of ${entry.name}`);
+  input.addEventListener("change", () => {
+    const raw = input.value.trim();
+    if (raw === "") {
+      entry.quality = null;
+      patchEntry(entry.class_name, { quality: null });
+      return;
+    }
+    const value = Number(raw);
+    if (!Number.isInteger(value) || value < 1 || value > 1000) {
+      input.value = entry.quality == null ? "" : String(entry.quality);
+      showToast("Quality must be between 1 and 1000", true);
+      return;
+    }
+    entry.quality = value;
+    patchEntry(entry.class_name, { quality: value });
+  });
+  cell.appendChild(input);
+  return cell;
+}
+
 function renderInventory(listing) {
   const tbody = els["inv-tbody"];
   tbody.innerHTML = "";
@@ -567,7 +622,15 @@ function renderInventory(listing) {
     visibilityCell.appendChild(visibility);
     applyVisibility(visibility, entry.visibility);
 
-    row.append(nameCell, categoryCell, qtyCell, notesCell, visibilityCell, actionCell);
+    row.append(
+      nameCell,
+      categoryCell,
+      qtyCell,
+      qualityCell(entry, true),
+      notesCell,
+      visibilityCell,
+      actionCell
+    );
     tbody.appendChild(row);
   }
 }
@@ -633,15 +696,17 @@ async function deleteEntry(class_name, name) {
   }
 }
 
-async function addToInventory(class_name, quantity = 1) {
+async function addToInventory(class_name, quantity = 1, quality = null) {
   if (!state.user) {
     openAuth("login", "Log in to add items to your inventory.");
     return;
   }
+  const body = { class_name, quantity };
+  if (quality !== null) body.quality = quality;
   try {
     const data = await apiFetch("/api/v1/me/inventory", {
       method: "POST",
-      body: { class_name, quantity },
+      body,
     });
     showToast(
       data.created
@@ -718,7 +783,14 @@ function renderAvailable(listing) {
     updatedCell.className = "avail-updated";
     updatedCell.textContent = formatDate(entry.updated_at);
 
-    row.append(nameCell, categoryCell, qtyCell, userCell, updatedCell);
+    row.append(
+      nameCell,
+      categoryCell,
+      qtyCell,
+      qualityCell(entry, false),
+      userCell,
+      updatedCell
+    );
     tbody.appendChild(row);
   }
 }

trade-hub/frontend/src/index.html

@@ -90,6 +90,7 @@
             <th>Item</th>
             <th>Category</th>
             <th>Qty</th>
+            <th>Quality</th>
             <th>Notes</th>
             <th>Visibility</th>
             <th></th>
@@ -129,6 +130,7 @@
             <th>Item</th>
             <th>Category</th>
             <th>Qty</th>
+            <th>Quality</th>
             <th>Offered by</th>
             <th>Updated</th>
           </tr>

trade-hub/frontend/src/style.css

@@ -429,6 +429,16 @@ main {
   border-radius: 6px;
   padding: 0.35rem 0.5rem;
 }
+.inv-quality {
+  width: 5rem;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 6px;
+  padding: 0.35rem 0.5rem;
+}
+.inv-quality-na { color: var(--text-dim); }
+.inv-quality:focus { outline: none; border-color: var(--accent); }
 .inv-notes {
   width: 100%;
   min-width: 12rem;