feat: manage image captions and tags from the admin panel

public/admin.html

@@ -3,16 +3,16 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>The Meme Protocol Review</title>
+    <title>The Meme Protocol Admin</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/assets/styles.css">
-    <script type="module" src="/assets/admin.js"></script>
+    <link rel="stylesheet" href="/assets/styles.css?v=admin-metadata-20260930">
+    <script type="module" src="/assets/admin.js?v=admin-metadata-20260930"></script>
   </head>
-  <body>
+  <body class="admin-page">
     <header class="topbar">
-      <div class="brand">THE_MEME_PROTOCOL_REVIEW</div>
+      <div class="brand">THE_MEME_PROTOCOL_ADMIN</div>
       <div class="admin-actions">
         <button class="secondary-action" id="refresh-review" type="button">REFRESH</button>
         <button class="primary-action" id="approve-selected" type="button">APPROVE_SELECTED</button>
@@ -25,7 +25,41 @@
         <span id="review-status">PENDING_REVIEW</span>
         <span class="live"><span class="pulse"></span><span id="review-count">0 ITEMS</span></span>
       </div>
-      <section class="meme-grid" id="review-grid" aria-label="Pending meme review"></section>
+      <details class="admin-tag-manager">
+        <summary>Manage tags</summary>
+        <p>AI chooses from these tags. Removing a tag also removes it from every image.</p>
+        <form id="tag-form" class="admin-toolbar">
+          <label for="tag-name">New tag</label>
+          <input id="tag-name" name="name" maxlength="60" required placeholder="e.g. cats">
+          <button class="secondary-action" type="submit">ADD TAG</button>
+        </form>
+        <div id="tag-catalog" class="admin-tag-list"></div>
+      </details>
+      <form id="review-filters" class="admin-toolbar">
+        <label for="review-filter">Images</label>
+        <select id="review-filter">
+          <option value="pending">Pending</option>
+          <option value="approved">Published</option>
+          <option value="all">All images</option>
+        </select>
+        <label for="review-query">Search</label>
+        <input id="review-query" type="search" maxlength="200" placeholder="Caption or topic">
+        <label for="review-tag">Tag</label>
+        <select id="review-tag"><option value="">All tags</option></select>
+        <button class="secondary-action" type="submit">SEARCH</button>
+      </form>
+      <div class="admin-toolbar">
+        <button class="secondary-action" id="generate-selected" type="button">GENERATE AI FOR SELECTED</button>
+        <button class="secondary-action" id="generate-missing" type="button">GENERATE ALL MISSING CAPTIONS</button>
+        <button class="secondary-action" id="stop-generation" type="button" hidden>STOP AFTER CURRENT IMAGE</button>
+        <p>AI generation uses the configured model and can be edited below.</p>
+      </div>
+      <section class="meme-grid" id="review-grid" aria-label="Manage memes"></section>
+      <nav class="admin-toolbar admin-pagination" aria-label="Image pages">
+        <button id="previous-page" class="secondary-action" type="button">PREVIOUS</button>
+        <span id="page-status">PAGE 1 OF 1</span>
+        <button id="next-page" class="secondary-action" type="button">NEXT</button>
+      </nav>
     </main>
   </body>
 </html>