Update app.py

app.py

@@ -139,9 +139,10 @@ def _check_password(request: Request, payload: dict | None = None) -> bool:
 
 # -----------------------------------------------------------------------------
 # API: published cards only
-#   GET  /api/cards          -> list published
-#   POST /api/cards          -> publish a new card (password)
-#   PUT  /api/cards/{id}     -> republish/update existing (password)
+#   GET  /api/cards
+#   POST /api/cards              (password) -> publish new
+#   PUT  /api/cards/{id}         (password) -> republish existing
+#   DELETE /api/cards/{id}       (password) -> delete published
 # -----------------------------------------------------------------------------
 
 async def api_cards(request: Request) -> Response:
@@ -159,8 +160,6 @@ async def api_cards(request: Request) -> Response:
             return _json({"error": msg}, status_code=401)
 
         card = _new_published_card(payload)
-
-        # "filled out" server-side: model + both sections required
         if not card["model"] or not card["how_it_works"] or not card["use_cases"]:
             return _json({"error": "Model, How it Works, and Use Cases are required"}, status_code=400)
 
@@ -193,7 +192,6 @@ async def api_card_id(request: Request) -> Response:
             return _json({"error": msg}, status_code=401)
 
         updated = _new_published_card(payload, card_id=card_id)
-
         if not updated["model"] or not updated["how_it_works"] or not updated["use_cases"]:
             return _json({"error": "Model, How it Works, and Use Cases are required"}, status_code=400)
 
@@ -202,11 +200,21 @@ async def api_card_id(request: Request) -> Response:
         await set_state(state)
         return _json(state)
 
+    if request.method == "DELETE":
+        if not _check_password(request):
+            msg = "Unauthorized (check Space secret 'password')" if SERVER_PASSWORD else "Password not configured"
+            return _json({"error": msg}, status_code=401)
+
+        cards.pop(idx)
+        state["version"] += 1
+        await set_state(state)
+        return _json(state)
+
     return _json({"error": "Method not allowed"}, status_code=405)
 
 
 # -----------------------------------------------------------------------------
-# Shiny UI (client-side drafts + server-side published)
+# UI
 # -----------------------------------------------------------------------------
 
 app_ui = ui.page_fluid(
@@ -223,7 +231,7 @@ app_ui = ui.page_fluid(
         }
         body { background: #f3f6fb; }
 
-        /* Top bar: visible chip row + clear + + */
+        /* Top bar */
         .topbar{
           background: linear-gradient(0deg, var(--navy2), var(--navy));
           padding: 12px 14px;
@@ -242,7 +250,6 @@ app_ui = ui.page_fluid(
           min-width: 0;
           flex: 1 1 auto;
         }
-
         .chips-row{
           display:flex;
           gap: 8px;
@@ -309,7 +316,7 @@ app_ui = ui.page_fluid(
           display:none;
         }
 
-        /* GRID: 2 columns, full width */
+        /* Grid */
         .cards-grid{
           display:grid;
           grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -323,7 +330,7 @@ app_ui = ui.page_fluid(
           .cards-grid{ grid-template-columns: 1fr; }
         }
 
-        /* Card = square */
+        /* Card */
         .card{
           background: var(--cardBg);
           border: 1px solid var(--cardBorder);
@@ -385,6 +392,7 @@ app_ui = ui.page_fluid(
           padding-bottom: 2px;
         }
         .tag-bar::-webkit-scrollbar{ display:none; }
+
         .tag-chip{
           border: 1px solid #d8e1ee;
           background: #fff;
@@ -400,7 +408,8 @@ app_ui = ui.page_fluid(
           white-space: nowrap;
         }
         .tag-chip .rm{ font-weight: 950; opacity: .6; }
-        .tag-add{
+
+        .tag-btn{
           border: 1px dashed #cfd9ea;
           background: transparent;
           border-radius: 999px;
@@ -467,8 +476,6 @@ app_ui = ui.page_fluid(
           min-height: 0;
           overflow:hidden;
         }
-
-        /* Equal-height panels */
         .panel{
           display:flex;
           flex-direction:column;
@@ -551,7 +558,7 @@ app_ui = ui.page_fluid(
           color: #41516b;
         }
 
-        /* Popover for tag dropdown */
+        /* Checklist popover for tags */
         .pop{
           position: fixed;
           background: white;
@@ -560,7 +567,7 @@ app_ui = ui.page_fluid(
           box-shadow: 0 10px 30px rgba(0,0,0,.18);
           padding: 10px;
           z-index: 999999;
-          width: 320px;
+          width: 340px;
           max-width: calc(100vw - 24px);
         }
         .pop h4{
@@ -580,19 +587,23 @@ app_ui = ui.page_fluid(
           cursor:pointer;
           color:#7b879c;
         }
-        .pop select{
-          width:100%;
-          border: 1px solid #d8e1ee;
-          border-radius: 12px;
-          padding: 10px 12px;
-          font-size: 13px;
-          background:#fff;
-          outline:none;
+        .pop .list{
+          max-height: 260px;
+          overflow:auto;
+          padding-right: 4px;
         }
+        .pop .checkrow{
+          display:flex;
+          align-items:center;
+          gap: 8px;
+          padding: 6px 6px;
+          border-radius: 10px;
+        }
+        .pop .checkrow:hover{ background:#f6f8fe; }
         .pop .row{
           display:flex;
-          justify-content:flex-end;
-          gap: 10px;
+          gap: 8px;
+          align-items:center;
           margin-top: 10px;
         }
         .pop .btn{
@@ -604,8 +615,8 @@ app_ui = ui.page_fluid(
           background: #ffffff;
         }
 
-        /* Post/Republish modal */
-        .pw-backdrop{
+        /* Generic modal shell (shorter, scrolls internally) */
+        .modal-backdrop{
           position: fixed;
           inset: 0;
           background: rgba(0,0,0,.35);
@@ -614,17 +625,33 @@ app_ui = ui.page_fluid(
           justify-content:center;
           z-index: 999999;
         }
-        .pw-dialog{
-          width: min(560px, calc(100vw - 28px));
+        .modal{
+          width: min(620px, calc(100vw - 28px));
+          max-height: 85vh;
           background: white;
           border-radius: 14px;
           box-shadow: 0 10px 30px rgba(0,0,0,.25);
-          padding: 14px 14px 12px 14px;
-          display:block;
+          display:flex;
+          flex-direction:column;
+          overflow:hidden;
+        }
+        .modal .head{
+          padding: 14px 14px 10px 14px;
+          border-bottom: 1px solid #eef2f8;
+        }
+        .modal .head h3{ margin: 0 0 6px 0; font-size: 16px; }
+        .modal .muted{ color: var(--muted); font-size: 13px; }
+        .modal .body{
+          padding: 12px 14px;
+          overflow:auto;
+        }
+        .modal .foot{
+          padding: 12px 14px;
+          border-top: 1px solid #eef2f8;
+          display:flex;
+          gap: 10px;
+          justify-content:flex-end;
         }
-        .pw-dialog h3{ margin: 0 0 8px 0; font-size: 16px; }
-        .pw-muted{ color: var(--muted); font-size: 13px; margin-bottom: 10px; }
-        .pw-actions{ display:flex; gap: 10px; justify-content:flex-end; margin-top: 12px; }
         .btn{
           border-radius: 12px;
           padding: 9px 12px;
@@ -639,23 +666,26 @@ app_ui = ui.page_fluid(
           color: var(--good);
           font-weight: 950;
         }
+        .btn-danger{
+          border: 1px solid #fecdd3;
+          background: #fff1f2;
+          color: #9f1239;
+          font-weight: 950;
+        }
+        .btn[disabled]{ opacity: .55; cursor: not-allowed; }
 
-        /* Edit modal (republish) */
+        /* Edit form */
         .edit-grid{
           display:grid;
           grid-template-columns: 1fr;
           gap: 10px;
         }
-        .edit-grid textarea{
-          height: 120px;
-        }
         .edit-tags{
           display:flex;
-          gap: 8px;
           flex-wrap: wrap;
+          gap: 8px;
           align-items:center;
         }
-        .edit-tags .tag-chip{ cursor:pointer; }
         """
     ),
     ui.tags.div(
@@ -670,7 +700,7 @@ app_ui = ui.page_fluid(
     ui.tags.script(
         r"""
         (() => {
-          const DRAFTS_KEY = "model_cards_drafts_v3";
+          const DRAFTS_KEY = "model_cards_drafts_v4";
 
           const grid = document.getElementById("grid");
           const addBtn = document.getElementById("add-btn");
@@ -811,7 +841,7 @@ app_ui = ui.page_fluid(
           });
 
           // ------------------------------------------------------------
-          // Small popover with dropdown to add a tag
+          // Tag checklist popover
           // ------------------------------------------------------------
           function closePop(){
             if(openPop){ openPop.remove(); openPop = null; }
@@ -853,82 +883,133 @@ app_ui = ui.page_fluid(
             return pop;
           }
 
-          function openTagDropdown(anchorEl, currentTags, onAdd){
-            const available = tagUniverse().filter(t => !currentTags.includes(t));
-            const options = available.length
-              ? available.map(t => `<option value="${escapeAttr(t)}">${escapeHtml(t)}</option>`).join("")
-              : `<option value="">No tags available</option>`;
-
+          function openTagChecklist(anchorEl, currentTags, onChange){
+            const all = tagUniverse();
             const html = `
               <button class="close" type="button">×</button>
-              <h4>Add a tag</h4>
-              <select id="tagSel" ${available.length ? "" : "disabled"}>${options}</select>
+              <h4>Tags</h4>
+              <div class="list">
+                ${all.map(t => {
+                  const checked = currentTags.includes(t) ? "checked" : "";
+                  return `
+                    <div class="checkrow">
+                      <input type="checkbox" class="tg" data-tag="${escapeAttr(t)}" ${checked}/>
+                      <div style="font-weight:850; font-size:12px; color:#1f2a44;">${escapeHtml(t)}</div>
+                    </div>
+                  `;
+                }).join("")}
+              </div>
+
               <div class="row">
-                <button class="btn" id="cancel" type="button">Cancel</button>
-                <button class="btn" id="add" type="button" ${available.length ? "" : "disabled"}>Add</button>
+                <input id="custom" type="text" placeholder="Add custom tag…" />
+                <button class="btn" id="addCustom" type="button">Add</button>
               </div>
             `;
             const pop = openPopoverNear(anchorEl, html);
-            const sel = pop.querySelector("#tagSel");
-            pop.querySelector("#cancel").addEventListener("click", closePop);
-            pop.querySelector("#add").addEventListener("click", () => {
-              const v = (sel.value || "").trim();
-              if(!v) return;
-              onAdd(v);
+
+            pop.querySelectorAll(".tg").forEach(cb => {
+              cb.addEventListener("change", () => {
+                const t = cb.getAttribute("data-tag");
+                if(!t) return;
+                const next = new Set(currentTags);
+                if(cb.checked) next.add(t);
+                else next.delete(t);
+                currentTags = Array.from(next);
+                onChange(currentTags);
+              });
+            });
+
+            const custom = pop.querySelector("#custom");
+            const addCustom = pop.querySelector("#addCustom");
+
+            function doAdd(){
+              const t = (custom.value || "").trim();
+              if(!t) return;
+              if(!currentTags.includes(t)){
+                currentTags = [...currentTags, t];
+                onChange(currentTags);
+              }
+              custom.value = "";
+              renderFilterChips(); // new tag becomes filterable
               closePop();
+            }
+
+            addCustom.addEventListener("click", doAdd);
+            custom.addEventListener("keydown", (e) => {
+              if(e.key === "Enter"){
+                e.preventDefault();
+                doAdd();
+              }
             });
+
+            custom.focus();
           }
 
           // ------------------------------------------------------------
-          // Post/Republish password modal
+          // Generic modal helpers + Enter-to-confirm
           // ------------------------------------------------------------
-          function openPasswordModal(title, subtitle, onConfirm){
+          function openModal({title, subtitle, bodyHtml, primaryText, primaryClass, isPrimaryEnabled, onPrimary, onMount}){
             const backdrop = document.createElement("div");
-            backdrop.className = "pw-backdrop";
+            backdrop.className = "modal-backdrop";
             backdrop.innerHTML = `
-              <div class="pw-dialog" role="dialog" aria-modal="true">
-                <h3>${escapeHtml(title)}</h3>
-                <div class="pw-muted">${escapeHtml(subtitle)}</div>
-
-                <label style="margin:8px 0 4px; color:#1f2a44; font-weight:900;">Password</label>
-                <input type="password" id="pw" value="" />
-
-                <div class="pw-actions">
+              <div class="modal" role="dialog" aria-modal="true">
+                <div class="head">
+                  <h3>${escapeHtml(title)}</h3>
+                  <div class="muted">${escapeHtml(subtitle || "")}</div>
+                </div>
+                <div class="body">${bodyHtml}</div>
+                <div class="foot">
                   <button class="btn" id="cancel" type="button">Cancel</button>
-                  <button class="btn btn-primary" id="confirm" type="button" disabled>Confirm</button>
+                  <button class="btn ${primaryClass || ""}" id="primary" type="button" disabled>${escapeHtml(primaryText || "Confirm")}</button>
                 </div>
               </div>
             `;
             document.body.appendChild(backdrop);
 
-            const pw = backdrop.querySelector("#pw");
             const cancel = backdrop.querySelector("#cancel");
-            const confirmBtn = backdrop.querySelector("#confirm");
-
-            function updateEnabled(){
-              confirmBtn.disabled = ((pw.value || "").trim().length === 0);
-            }
-            pw.addEventListener("input", updateEnabled);
+            const primary = backdrop.querySelector("#primary");
 
             function close(){ backdrop.remove(); }
+
             cancel.addEventListener("click", (e) => { e.preventDefault(); close(); });
             backdrop.addEventListener("click", (e) => { if(e.target === backdrop) close(); });
 
-            confirmBtn.addEventListener("click", async (e) => {
-              e.preventDefault();
-              const p = (pw.value || "").trim();
-              if(!p) return;
-              try{ await onConfirm(p); } finally { close(); }
+            async function doPrimary(){
+              if(primary.disabled) return;
+              try{ await onPrimary(); }
+              catch(e){ showErr(String(e.message || e)); }
+              close();
+            }
+
+            primary.addEventListener("click", (e) => { e.preventDefault(); doPrimary(); });
+
+            function setEnabled(ok){ primary.disabled = !ok; }
+            function refreshEnabled(){
+              try{ setEnabled(!!isPrimaryEnabled()); } catch { setEnabled(false); }
+            }
+
+            // Enter triggers primary if enabled
+            backdrop.addEventListener("keydown", (e) => {
+              if(e.key === "Enter"){
+                const active = document.activeElement;
+                // allow Enter in textarea without submitting
+                if(active && active.tagName === "TEXTAREA") return;
+                if(!primary.disabled){
+                  e.preventDefault();
+                  doPrimary();
+                }
+              }
             });
 
-            pw.focus();
+            if(onMount) onMount({backdrop, primary, refreshEnabled, close});
+            refreshEnabled();
+            return { close };
           }
 
           // ------------------------------------------------------------
           // Draft helpers
           // ------------------------------------------------------------
           function draftFilled(d){
-            // Require model + both sections to enable Post
             return (d.model || "").trim().length > 0
               && (d.how_it_works || "").trim().length > 0
               && (d.use_cases || "").trim().length > 0;
@@ -956,6 +1037,7 @@ app_ui = ui.page_fluid(
 
               const modelText = (d.model || "").trim();
               if(modelText) card.classList.add("has-title");
+
               let tags = Array.isArray(d.tags) ? d.tags.map(String) : [];
 
               card.innerHTML = `
@@ -964,7 +1046,7 @@ app_ui = ui.page_fluid(
                     <input class="title-input" type="text" value="${escapeHtml(d.model)}" placeholder="Model" />
                     <div class="tag-bar" style="display:${modelText ? "flex" : "none"};">
                       <span class="tags"></span>
-                      <button class="tag-add" type="button">+ Tag</button>
+                      <button class="tag-btn" type="button">Tags</button>
                     </div>
                   </div>
                   <div class="hdr-right">
@@ -1005,13 +1087,15 @@ app_ui = ui.page_fluid(
               const linkWrap = card.querySelector(".linkwrap");
               const tagBar = card.querySelector(".tag-bar");
               const tagsWrap = card.querySelector(".tags");
-              const tagAddBtn = card.querySelector(".tag-add");
+              const tagBtn = card.querySelector(".tag-btn");
               const postBtn = card.querySelector(".post-btn");
               const delBtn = card.querySelector(".del-btn");
 
               function updateLink(){
                 const url = (linkEl.value || "").trim();
-                linkWrap.innerHTML = url ? `<a class="resource-link" href="${escapeAttr(url)}" target="_blank" rel="noopener noreferrer">Open link</a>` : "";
+                linkWrap.innerHTML = url
+                  ? `<a class="resource-link" href="${escapeAttr(url)}" target="_blank" rel="noopener noreferrer">Open link</a>`
+                  : "";
               }
 
               function getDraft(){
@@ -1069,13 +1153,13 @@ app_ui = ui.page_fluid(
                 }, 150));
               }
 
-              // Tag add via dropdown (available tags)
-              tagAddBtn.addEventListener("click", (e) => {
+              // Tags checklist
+              tagBtn.addEventListener("click", (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 if(!(titleEl.value || "").trim()) return;
-                openTagDropdown(tagAddBtn, tags, (t) => {
-                  if(!tags.includes(t)) tags = [...tags, t];
+                openTagChecklist(tagBtn, tags, (next) => {
+                  tags = next.slice();
                   setDraft({ tags });
                   renderTags();
                   renderFilterChips();
@@ -1083,15 +1167,27 @@ app_ui = ui.page_fluid(
                 });
               });
 
-              // Post (password shown here)
-              postBtn.addEventListener("click", async () => {
+              // Post (password modal; Enter works)
+              postBtn.addEventListener("click", () => {
                 const cur = getDraft();
                 if(!cur || !draftFilled(cur)) return;
 
-                openPasswordModal(
-                  "Post this card?",
-                  "This will publish the card for everyone to see.",
-                  async (password) => {
+                openModal({
+                  title: "Post this card?",
+                  subtitle: "This will publish the card for everyone to see.",
+                  bodyHtml: `
+                    <label>Password</label>
+                    <input type="password" id="pw" value="" />
+                  `,
+                  primaryText: "Post",
+                  primaryClass: "btn-primary",
+                  isPrimaryEnabled: () => {
+                    const pw = document.getElementById("pw");
+                    return pw && (pw.value || "").trim().length > 0;
+                  },
+                  onPrimary: async () => {
+                    const pw = document.getElementById("pw");
+                    const password = (pw.value || "").trim();
                     const payload = {
                       password,
                       model: cur.model,
@@ -1101,32 +1197,31 @@ app_ui = ui.page_fluid(
                       link: cur.link,
                       author: cur.author,
                     };
-                    try{
-                      const data = await api("/api/cards", {
-                        method: "POST",
-                        body: JSON.stringify(payload),
-                        headers: { "X-Password": password },
-                      });
+                    const data = await api("/api/cards", {
+                      method: "POST",
+                      body: JSON.stringify(payload),
+                      headers: { "X-Password": password },
+                    });
 
-                      // remove draft
-                      drafts = drafts.filter(x => x.id !== cur.id);
-                      saveDrafts();
+                    drafts = drafts.filter(x => x.id !== cur.id);
+                    saveDrafts();
 
-                      // update published
-                      state.version = data.version;
-                      state.published = data.cards;
+                    state.version = data.version;
+                    state.published = data.cards;
 
-                      showErr("");
-                      renderFilterChips();
-                      render();
-                    }catch(e){
-                      showErr(String(e.message || e));
-                    }
+                    showErr("");
+                    renderFilterChips();
+                    render();
+                  },
+                  onMount: ({backdrop, refreshEnabled}) => {
+                    const pw = backdrop.querySelector("#pw");
+                    pw.focus();
+                    pw.addEventListener("input", refreshEnabled);
                   }
-                );
+                });
               });
 
-              // Delete draft (local only)
+              // Delete draft (local)
               delBtn.addEventListener("click", () => {
                 if(!confirm("Delete this draft? (Only on your computer.)")) return;
                 drafts = drafts.filter(x => x.id !== d.id);
@@ -1135,6 +1230,7 @@ app_ui = ui.page_fluid(
                 render();
               });
 
+              // Enter should not submit from textareas; handled by modal only.
               [titleEl, howEl, useEl, linkEl, byEl].forEach(el => el.addEventListener("input", scheduleDraftSave));
 
               updateLink();
@@ -1143,7 +1239,7 @@ app_ui = ui.page_fluid(
               grid.appendChild(card);
             });
 
-            // ---------------- Published (shared, read-only) ----------------
+            // ---------------- Published (shared) ----------------
             visiblePublished.forEach((c) => {
               const card = document.createElement("div");
               card.className = "card";
@@ -1159,6 +1255,7 @@ app_ui = ui.page_fluid(
                   </div>
                   <div class="hdr-right">
                     <button class="edit-btn" type="button">Edit</button>
+                    <button class="del-btn" type="button" title="Delete published">×</button>
                   </div>
                 </div>
 
@@ -1183,19 +1280,70 @@ app_ui = ui.page_fluid(
 
               const linkWrap = card.querySelector(".linkwrap");
               const editBtn = card.querySelector(".edit-btn");
+              const delBtn = card.querySelector(".del-btn");
+
               const url = (c.link || "").trim();
-              linkWrap.innerHTML = url ? `<a class="resource-link" href="${escapeAttr(url)}" target="_blank" rel="noopener noreferrer">Open link</a>` : "";
+              linkWrap.innerHTML = url
+                ? `<a class="resource-link" href="${escapeAttr(url)}" target="_blank" rel="noopener noreferrer">Open link</a>`
+                : "";
+
+              // Delete published (password + 2 checks; Enter works)
+              delBtn.addEventListener("click", () => {
+                openModal({
+                  title: "Delete published card?",
+                  subtitle: "This is permanent and affects everyone viewing this Space.",
+                  bodyHtml: `
+                    <div style="display:flex; flex-direction:column; gap:8px; margin-bottom:10px;">
+                      <label style="display:flex; gap:8px; align-items:center; font-weight:700; color:#1f2a44;">
+                        <input type="checkbox" id="c1" /> I understand this is permanent
+                      </label>
+                      <label style="display:flex; gap:8px; align-items:center; font-weight:700; color:#1f2a44;">
+                        <input type="checkbox" id="c2" /> I confirm I want to delete this card
+                      </label>
+                    </div>
+                    <label>Password</label>
+                    <input type="password" id="pw" value="" />
+                  `,
+                  primaryText: "Delete",
+                  primaryClass: "btn-danger",
+                  isPrimaryEnabled: () => {
+                    const c1 = document.getElementById("c1");
+                    const c2 = document.getElementById("c2");
+                    const pw = document.getElementById("pw");
+                    return c1?.checked && c2?.checked && pw && (pw.value || "").trim().length > 0;
+                  },
+                  onPrimary: async () => {
+                    const pw = document.getElementById("pw");
+                    const password = (pw.value || "").trim();
+                    const data = await api(`/api/cards/${encodeURIComponent(c.id)}`, {
+                      method: "DELETE",
+                      headers: { "X-Password": password },
+                    });
+                    state.version = data.version;
+                    state.published = data.cards || [];
+                    showErr("");
+                    renderFilterChips();
+                    render();
+                  },
+                  onMount: ({backdrop, refreshEnabled}) => {
+                    const pw = backdrop.querySelector("#pw");
+                    const c1 = backdrop.querySelector("#c1");
+                    const c2 = backdrop.querySelector("#c2");
+                    pw.focus();
+                    [pw, c1, c2].forEach(el => el.addEventListener("input", refreshEnabled));
+                    [c1, c2].forEach(el => el.addEventListener("change", refreshEnabled));
+                  }
+                });
+              });
 
-              // Edit -> modal with fields -> Republish (password required)
+              // Edit & Republish (short modal; internal scroll; tags checklist; Enter republish)
               editBtn.addEventListener("click", () => {
-                // build edit modal UI
-                const backdrop = document.createElement("div");
-                backdrop.className = "pw-backdrop";
-                backdrop.innerHTML = `
-                  <div class="pw-dialog" role="dialog" aria-modal="true">
-                    <h3>Edit & Republish</h3>
-                    <div class="pw-muted">Edits become public only after you enter the password and republish.</div>
+                let tagsLocal = tags.slice();
 
+                openModal({
+                  title: "Edit & Republish",
+                  subtitle: "Edits go live only after you enter the password and republish.",
+                  bodyHtml: `
                     <div class="edit-grid">
                       <div>
                         <label>Model</label>
@@ -1206,7 +1354,7 @@ app_ui = ui.page_fluid(
                         <label>Tags</label>
                         <div class="edit-tags" id="tags"></div>
                         <div style="margin-top:8px;">
-                          <button class="tag-add" id="addTag" type="button">+ Tag</button>
+                          <button class="tag-btn" id="tagChecklist" type="button">Tags</button>
                         </div>
                       </div>
 
@@ -1235,104 +1383,94 @@ app_ui = ui.page_fluid(
                         <input id="pw" type="password" value="" />
                       </div>
                     </div>
+                  `,
+                  primaryText: "Republish",
+                  primaryClass: "btn-primary",
+                  isPrimaryEnabled: () => {
+                    const m = document.getElementById("m");
+                    const h = document.getElementById("h");
+                    const u = document.getElementById("u");
+                    const pw = document.getElementById("pw");
+                    return (pw?.value || "").trim().length > 0
+                      && (m?.value || "").trim().length > 0
+                      && (h?.value || "").trim().length > 0
+                      && (u?.value || "").trim().length > 0;
+                  },
+                  onPrimary: async () => {
+                    const m = document.getElementById("m");
+                    const h = document.getElementById("h");
+                    const u = document.getElementById("u");
+                    const l = document.getElementById("l");
+                    const a = document.getElementById("a");
+                    const pw = document.getElementById("pw");
+                    const password = (pw.value || "").trim();
 
-                    <div class="pw-actions">
-                      <button class="btn" id="cancel" type="button">Cancel</button>
-                      <button class="btn btn-primary" id="republish" type="button" disabled>Republish</button>
-                    </div>
-                  </div>
-                `;
-                document.body.appendChild(backdrop);
-
-                let tagsLocal = tags.slice();
-
-                const m = backdrop.querySelector("#m");
-                const h = backdrop.querySelector("#h");
-                const u = backdrop.querySelector("#u");
-                const l = backdrop.querySelector("#l");
-                const a = backdrop.querySelector("#a");
-                const pw = backdrop.querySelector("#pw");
-                const tagsEl = backdrop.querySelector("#tags");
-                const addTagBtn = backdrop.querySelector("#addTag");
-                const republishBtn = backdrop.querySelector("#republish");
-                const cancelBtn = backdrop.querySelector("#cancel");
-
-                function close(){ backdrop.remove(); }
-
-                function renderEditTags(){
-                  tagsEl.innerHTML = "";
-                  tagsLocal.forEach(t => {
-                    const chip = document.createElement("span");
-                    chip.className = "tag-chip";
-                    chip.innerHTML = `${escapeHtml(t)} <span class="rm">×</span>`;
-                    chip.addEventListener("click", (e) => {
-                      e.preventDefault();
-                      tagsLocal = tagsLocal.filter(x => x !== t);
-                      renderEditTags();
-                      renderFilterChips();
-                      updateEnabled();
-                    });
-                    tagsEl.appendChild(chip);
-                  });
-                }
-
-                function updateEnabled(){
-                  const ok = (pw.value || "").trim().length > 0
-                    && (m.value || "").trim().length > 0
-                    && (h.value || "").trim().length > 0
-                    && (u.value || "").trim().length > 0;
-                  republishBtn.disabled = !ok;
-                }
-
-                addTagBtn.addEventListener("click", (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  if(!(m.value || "").trim()) return;
-                  openTagDropdown(addTagBtn, tagsLocal, (t) => {
-                    if(!tagsLocal.includes(t)) tagsLocal = [...tagsLocal, t];
-                    renderEditTags();
-                    renderFilterChips();
-                    updateEnabled();
-                  });
-                });
-
-                [m,h,u,l,a,pw].forEach(el => el.addEventListener("input", updateEnabled));
-
-                cancelBtn.addEventListener("click", (e) => { e.preventDefault(); close(); });
-                backdrop.addEventListener("click", (e) => { if(e.target === backdrop) close(); });
+                    const payload = {
+                      password,
+                      model: m.value || "",
+                      tags: tagsLocal,
+                      how_it_works: h.value || "",
+                      use_cases: u.value || "",
+                      link: l.value || "",
+                      author: a.value || "",
+                    };
 
-                republishBtn.addEventListener("click", async (e) => {
-                  e.preventDefault();
-                  const password = (pw.value || "").trim();
-                  const payload = {
-                    password,
-                    model: m.value || "",
-                    tags: tagsLocal,
-                    how_it_works: h.value || "",
-                    use_cases: u.value || "",
-                    link: l.value || "",
-                    author: a.value || "",
-                  };
-                  try{
                     const data = await api(`/api/cards/${encodeURIComponent(c.id)}`, {
                       method: "PUT",
                       body: JSON.stringify(payload),
                       headers: { "X-Password": password },
                     });
+
                     state.version = data.version;
                     state.published = data.cards || [];
                     showErr("");
                     renderFilterChips();
                     render();
-                    close();
-                  }catch(err){
-                    showErr(String(err.message || err));
+                  },
+                  onMount: ({backdrop, refreshEnabled}) => {
+                    const tagsEl = backdrop.querySelector("#tags");
+                    const tagBtn = backdrop.querySelector("#tagChecklist");
+                    const pw = backdrop.querySelector("#pw");
+
+                    function renderEditTags(){
+                      tagsEl.innerHTML = "";
+                      tagsLocal.forEach(t => {
+                        const chip = document.createElement("span");
+                        chip.className = "tag-chip";
+                        chip.innerHTML = `${escapeHtml(t)} <span class="rm">×</span>`;
+                        chip.addEventListener("click", (e) => {
+                          e.preventDefault();
+                          tagsLocal = tagsLocal.filter(x => x !== t);
+                          renderEditTags();
+                          renderFilterChips();
+                          refreshEnabled();
+                        });
+                        tagsEl.appendChild(chip);
+                      });
+                    }
+
+                    tagBtn.addEventListener("click", (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      openTagChecklist(tagBtn, tagsLocal, (next) => {
+                        tagsLocal = next.slice();
+                        renderEditTags();
+                        renderFilterChips();
+                        refreshEnabled();
+                      });
+                    });
+
+                    // enable/disable republish as user types
+                    ["m","h","u","l","a","pw"].forEach(id => {
+                      const el = backdrop.querySelector("#" + id);
+                      el.addEventListener("input", refreshEnabled);
+                    });
+
+                    pw.focus();
+                    renderEditTags();
+                    refreshEnabled();
                   }
                 });
-
-                renderEditTags();
-                updateEnabled();
-                pw.focus();
               });
 
               grid.appendChild(card);
@@ -1387,7 +1525,7 @@ app_shiny = App(app_ui, shiny_server)
 
 routes = [
     Route("/api/cards", endpoint=api_cards, methods=["GET", "POST"]),
-    Route("/api/cards/{card_id}", endpoint=api_card_id, methods=["PUT"]),
+    Route("/api/cards/{card_id}", endpoint=api_card_id, methods=["PUT", "DELETE"]),
     Mount("/", app=app_shiny),
 ]