Add result card indexes

frontend/app.js

@@ -266,10 +266,12 @@ function pageSuffix(url) {
 
 function renderResults(data) {
   const grid = $("#results-grid")
-  grid.innerHTML = data.items.map(item => {
+  const offset = (data.page - 1) * PAGE_SIZE
+  grid.innerHTML = data.items.map((item, i) => {
     const pid = item.post_id
     const pg = item.url ? pageSuffix(item.url) : ""
     const label = pid + pg
+    const index = offset + i + 1
     let badge = ""
     if (!item.scanned) {
       badge = `<span class="not-scanned">not scanned</span>`
@@ -290,6 +292,7 @@ function renderResults(data) {
         ${download}
       </div>
       ${badge}
+      <span class="result-index">${index}</span>
     </div>`
   }).join("")
   grid.querySelectorAll(".result-link").forEach(el => {

frontend/style.css

@@ -293,8 +293,9 @@ input:focus, select:focus { outline: none; border-color: var(--accent); backgrou
   padding: .25rem .15rem 1rem;
 }
 .result-card {
+  position: relative;
   min-width: 0;
-  padding: .55rem;
+  padding: .55rem .55rem 1.85rem;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: 6px;
@@ -372,6 +373,15 @@ input:focus, select:focus { outline: none; border-color: var(--accent); backgrou
 .exif-5, .exif-6 { background: #232323; color: #aaa; }
 .exif-7 { background: #2a172a; color: #d9a; }
 .not-scanned, .no-exif { color: var(--dim); background: #181818; }
+.result-index {
+  position: absolute;
+  right: .55rem;
+  bottom: .45rem;
+  color: var(--dim);
+  font-family: Consolas, "SFMono-Regular", monospace;
+  font-size: .72rem;
+  font-weight: 800;
+}
 #viewer {
   position: fixed;
   inset: 0;