Update app.py

app.py

@@ -139,10 +139,6 @@ def _check_password(request: Request, payload: dict | None = None) -> bool:
 
 # -----------------------------------------------------------------------------
 # API: published cards only
-#   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:
@@ -219,7 +215,7 @@ async def api_card_id(request: Request) -> Response:
 
 app_ui = ui.page_fluid(
     ui.tags.style(
-        """
+        r"""
         :root{
           --navy:#062a4d;
           --navy2:#041f3a;
@@ -231,6 +227,43 @@ app_ui = ui.page_fluid(
         }
         body { background: #f3f6fb; }
 
+        /* IMPORTANT: do NOT force checkboxes to width:100% */
+        input:not([type="checkbox"]):not([type="radio"]) {
+          width: 100%;
+          box-sizing: border-box;
+          border: 1px solid #d8e1ee;
+          border-radius: 12px;
+          padding: 10px 12px;
+          font-size: 14px;
+          outline: none;
+          background: white;
+        }
+        input[readonly]:not([type="checkbox"]):not([type="radio"]) { background:#f8fafc; }
+
+        textarea{
+          width:100%;
+          box-sizing:border-box;
+          border: 1px solid #d8e1ee;
+          border-radius: 12px;
+          padding: 10px 12px;
+          font-size: 14px;
+          outline: none;
+          background: white;
+          resize: none;
+          overflow: auto;
+          line-height: 1.25;
+        }
+        textarea[readonly]{ background:#f8fafc; }
+
+        label{
+          display:block;
+          font-size: 12px;
+          color: var(--muted);
+          margin: 0 0 5px;
+          font-weight: 750;
+          letter-spacing: .2px;
+        }
+
         /* Top bar */
         .topbar{
           background: linear-gradient(0deg, var(--navy2), var(--navy));
@@ -278,7 +311,6 @@ app_ui = ui.page_fluid(
           color: var(--navy);
           border-color: rgba(0,0,0,.08);
         }
-
         #clear-filters{
           border-radius: 12px;
           padding: 9px 12px;
@@ -290,7 +322,6 @@ app_ui = ui.page_fluid(
           color: #fff;
           border: 1px solid rgba(255,255,255,.25);
         }
-
         #add-btn{
           background: white;
           color: var(--navy);
@@ -361,7 +392,6 @@ app_ui = ui.page_fluid(
           flex: 1 1 auto;
           min-width: 0;
         }
-
         .title-input, .title-text{
           flex: 1 1 auto;
           min-width: 140px;
@@ -392,7 +422,6 @@ app_ui = ui.page_fluid(
           padding-bottom: 2px;
         }
         .tag-bar::-webkit-scrollbar{ display:none; }
-
         .tag-chip{
           border: 1px solid #d8e1ee;
           background: #fff;
@@ -408,7 +437,6 @@ app_ui = ui.page_fluid(
           white-space: nowrap;
         }
         .tag-chip .rm{ font-weight: 950; opacity: .6; }
-
         .tag-btn{
           border: 1px dashed #cfd9ea;
           background: transparent;
@@ -426,7 +454,6 @@ app_ui = ui.page_fluid(
           gap: 8px;
           flex: 0 0 auto;
         }
-
         .draft-badge{
           font-size: 11px;
           font-weight: 950;
@@ -437,7 +464,6 @@ app_ui = ui.page_fluid(
           color: #9a3412;
           user-select:none;
         }
-
         .post-btn, .edit-btn{
           border-radius: 12px;
           padding: 8px 12px;
@@ -445,17 +471,14 @@ app_ui = ui.page_fluid(
           border: 1px solid rgba(0,0,0,.08);
           cursor:pointer;
           white-space:nowrap;
+          background: #fff;
+          color: #1f2a44;
         }
         .post-btn{
           background: #eaf7ef;
           color: var(--good);
         }
         .post-btn:disabled{ opacity: .55; cursor: not-allowed; }
-        .edit-btn{
-          background: #ffffff;
-          color: #1f2a44;
-        }
-
         .del-btn{
           border: none;
           background: transparent;
@@ -482,72 +505,50 @@ app_ui = ui.page_fluid(
           flex: 1 1 0;
           min-height: 0;
         }
-        label{
-          display:block;
-          font-size: 12px;
-          color: var(--muted);
-          margin: 0 0 5px;
-          font-weight: 750;
-          letter-spacing: .2px;
-        }
-        textarea{
-          width:100%;
-          box-sizing:border-box;
-          border: 1px solid #d8e1ee;
-          border-radius: 12px;
-          padding: 10px 12px;
-          font-size: 14px;
-          outline: none;
-          background: white;
+        .panel textarea{
           flex: 1 1 0;
           min-height: 0;
-          resize: none;
-          overflow: auto;
-          line-height: 1.25;
         }
-        textarea[readonly]{ background:#f8fafc; }
 
         .card-footer{
           padding: 10px 12px 12px 12px;
           border-top: 1px solid #eef2f8;
           flex: 0 0 auto;
         }
-        input{
-          width:100%;
-          box-sizing:border-box;
-          border: 1px solid #d8e1ee;
-          border-radius: 12px;
-          padding: 10px 12px;
-          font-size: 14px;
-          outline: none;
-          background: white;
-        }
-        input[readonly]{ background:#f8fafc; }
-        .resource-link{ display:inline-block; margin-top: 8px; font-size: 13px; }
 
-        .by-row{
+        /* Link + By on same line */
+        .footer-row{
+          display:flex;
+          align-items:center;
+          gap: 10px;
+        }
+        .link-col{ flex: 1 1 auto; min-width: 0; }
+        .by-col{
+          flex: 0 0 auto;
           display:flex;
-          justify-content:flex-end;
           align-items:center;
           gap: 8px;
-          margin-top: 10px;
-          color:#1f2a44;
+          white-space: nowrap;
           font-size: 12px;
-          font-weight: 850;
+          font-weight: 900;
+          color:#1f2a44;
         }
         .by-input{
-          width: 180px;
-          padding: 7px 10px;
+          width: 160px;
+          padding: 8px 10px;
           border-radius: 10px;
           font-size: 12px;
         }
         .by-display{
+          width: 200px;
           text-align:right;
-          color:#1f2a44;
           font-size: 12px;
           font-weight: 900;
-          margin-top: 10px;
+          color:#1f2a44;
+          overflow:hidden;
+          text-overflow: ellipsis;
         }
+        .resource-link{ display:inline-block; margin-top: 8px; font-size: 13px; }
 
         .empty{
           margin: 0 16px;
@@ -558,65 +559,8 @@ app_ui = ui.page_fluid(
           color: #41516b;
         }
 
-        /* Checklist popover for tags */
-        .pop{
-          position: fixed;
-          background: white;
-          border: 1px solid #d8e1ee;
-          border-radius: 14px;
-          box-shadow: 0 10px 30px rgba(0,0,0,.18);
-          padding: 10px;
-          z-index: 999999;
-          width: 340px;
-          max-width: calc(100vw - 24px);
-        }
-        .pop h4{
-          margin: 2px 0 10px 0;
-          font-size: 13px;
-          font-weight: 950;
-          color:#1f2a44;
-        }
-        .pop .close{
-          position:absolute;
-          top: 8px;
-          right: 10px;
-          border:none;
-          background:transparent;
-          font-size: 18px;
-          font-weight: 900;
-          cursor:pointer;
-          color:#7b879c;
-        }
-        .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;
-          gap: 8px;
-          align-items:center;
-          margin-top: 10px;
-        }
-        .pop .btn{
-          border-radius: 12px;
-          padding: 9px 12px;
-          font-weight: 900;
-          cursor:pointer;
-          border: 1px solid #d8e1ee;
-          background: #ffffff;
-        }
-
-        /* Generic modal shell (shorter, scrolls internally) */
-        .modal-backdrop{
+        /* Centered dialogs (renamed to avoid collisions) */
+        .dlg-backdrop{
           position: fixed;
           inset: 0;
           background: rgba(0,0,0,.35);
@@ -624,10 +568,11 @@ app_ui = ui.page_fluid(
           align-items:center;
           justify-content:center;
           z-index: 999999;
+          padding: 14px;
         }
-        .modal{
-          width: min(620px, calc(100vw - 28px));
-          max-height: 85vh;
+        .dlg{
+          width: min(560px, calc(100vw - 28px));
+          max-height: 80vh;
           background: white;
           border-radius: 14px;
           box-shadow: 0 10px 30px rgba(0,0,0,.25);
@@ -635,18 +580,18 @@ app_ui = ui.page_fluid(
           flex-direction:column;
           overflow:hidden;
         }
-        .modal .head{
-          padding: 14px 14px 10px 14px;
+        .dlg .head{
+          padding: 12px 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{
+        .dlg .head h3{ margin: 0 0 6px 0; font-size: 16px; }
+        .dlg .muted{ color: var(--muted); font-size: 13px; }
+        .dlg .body{
           padding: 12px 14px;
           overflow:auto;
         }
-        .modal .foot{
-          padding: 12px 14px;
+        .dlg .foot{
+          padding: 10px 14px 12px 14px;
           border-top: 1px solid #eef2f8;
           display:flex;
           gap: 10px;
@@ -655,7 +600,7 @@ app_ui = ui.page_fluid(
         .btn{
           border-radius: 12px;
           padding: 9px 12px;
-          font-weight: 850;
+          font-weight: 900;
           cursor:pointer;
           border: 1px solid #d8e1ee;
           background: #ffffff;
@@ -664,35 +609,51 @@ app_ui = ui.page_fluid(
           background:#eaf7ef;
           border-color:#bbf7d0;
           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 form */
-        .edit-grid{
-          display:grid;
-          grid-template-columns: 1fr;
+        /* Checklist layout aligned */
+        .checklist{
+          display:flex;
+          flex-direction:column;
+          gap: 6px;
+        }
+        .checkrow{
+          display:flex;
+          align-items:center;
           gap: 10px;
+          padding: 6px 8px;
+          border-radius: 10px;
+        }
+        .checkrow:hover{ background:#f6f8fe; }
+        .checkrow input[type="checkbox"]{ width:auto !important; }
+        .checkrow .lbl{
+          font-weight: 850;
+          font-size: 12px;
+          color:#1f2a44;
+          line-height: 1.1;
         }
-        .edit-tags{
+
+        .row{
           display:flex;
-          flex-wrap: wrap;
-          gap: 8px;
+          gap: 10px;
           align-items:center;
+          margin-top: 10px;
         }
         """
     ),
     ui.tags.div(
         {"class": "topbar"},
-        ui.tags.div({"class": "top-left"},
-                    ui.tags.div({"id": "chips-row", "class": "chips-row"}),
-                    ui.tags.button("Clear", {"id": "clear-filters", "type": "button"})),
+        ui.tags.div(
+            {"class": "top-left"},
+            ui.tags.div({"id": "chips-row", "class": "chips-row"}),
+            ui.tags.button("Clear", {"id": "clear-filters", "type": "button"}),
+        ),
         ui.tags.button("＋", {"id": "add-btn", "type": "button"}),
     ),
     ui.tags.div({"id": "err", "class": "err"}),
@@ -700,7 +661,7 @@ app_ui = ui.page_fluid(
     ui.tags.script(
         r"""
         (() => {
-          const DRAFTS_KEY = "model_cards_drafts_v4";
+          const DRAFTS_KEY = "model_cards_drafts_v5";
 
           const grid = document.getElementById("grid");
           const addBtn = document.getElementById("add-btn");
@@ -721,8 +682,6 @@ app_ui = ui.page_fluid(
           const saveTimers = new Map();
           const filterTags = new Set();
 
-          let openPop = null;
-
           function showErr(msg){
             if(!msg){ errBox.style.display="none"; errBox.textContent=""; return; }
             errBox.style.display="block";
@@ -841,169 +800,139 @@ app_ui = ui.page_fluid(
           });
 
           // ------------------------------------------------------------
-          // Tag checklist popover
-          // ------------------------------------------------------------
-          function closePop(){
-            if(openPop){ openPop.remove(); openPop = null; }
-          }
-
-          function openPopoverNear(anchorEl, html){
-            closePop();
-            const pop = document.createElement("div");
-            pop.className = "pop";
-            pop.innerHTML = html;
-            document.body.appendChild(pop);
-            openPop = pop;
-
-            const r = anchorEl.getBoundingClientRect();
-            const pad = 10;
-            let left = Math.min(r.left, window.innerWidth - pop.offsetWidth - pad);
-            left = Math.max(pad, left);
-            let top = r.bottom + 10;
-            if(top + pop.offsetHeight + pad > window.innerHeight){
-              top = Math.max(pad, r.top - pop.offsetHeight - 10);
-            }
-            pop.style.left = `${left}px`;
-            pop.style.top = `${top}px`;
-
-            const closeBtn = pop.querySelector(".close");
-            if(closeBtn) closeBtn.addEventListener("click", closePop);
-
-            setTimeout(() => {
-              const onDoc = (e) => {
-                if(!openPop) return;
-                if(openPop.contains(e.target)) return;
-                if(anchorEl.contains(e.target)) return;
-                closePop();
-                document.removeEventListener("mousedown", onDoc);
-              };
-              document.addEventListener("mousedown", onDoc);
-            }, 0);
-
-            return pop;
-          }
-
-          function openTagChecklist(anchorEl, currentTags, onChange){
-            const all = tagUniverse();
-            const html = `
-              <button class="close" type="button">×</button>
-              <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">
-                <input id="custom" type="text" placeholder="Add custom tag…" />
-                <button class="btn" id="addCustom" type="button">Add</button>
-              </div>
-            `;
-            const pop = openPopoverNear(anchorEl, html);
-
-            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();
-          }
-
-          // ------------------------------------------------------------
-          // Generic modal helpers + Enter-to-confirm
+          // Centered dialog helper (Enter triggers primary unless textarea)
           // ------------------------------------------------------------
-          function openModal({title, subtitle, bodyHtml, primaryText, primaryClass, isPrimaryEnabled, onPrimary, onMount}){
+          function openDialog({title, subtitle, bodyHtml, primaryText, primaryClass, canSubmit, onSubmit, onOpen}){
             const backdrop = document.createElement("div");
-            backdrop.className = "modal-backdrop";
+            backdrop.className = "dlg-backdrop";
             backdrop.innerHTML = `
-              <div class="modal" role="dialog" aria-modal="true">
+              <div class="dlg" 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 ${primaryClass || ""}" id="primary" type="button" disabled>${escapeHtml(primaryText || "Confirm")}</button>
+                  <button class="btn" data-act="cancel" type="button">Cancel</button>
+                  <button class="btn ${primaryClass || ""}" data-act="primary" type="button" disabled>${escapeHtml(primaryText || "Confirm")}</button>
                 </div>
               </div>
             `;
             document.body.appendChild(backdrop);
 
-            const cancel = backdrop.querySelector("#cancel");
-            const primary = backdrop.querySelector("#primary");
+            const dlg = backdrop.querySelector(".dlg");
+            const btnCancel = backdrop.querySelector('[data-act="cancel"]');
+            const btnPrimary = backdrop.querySelector('[data-act="primary"]');
 
             function close(){ backdrop.remove(); }
 
-            cancel.addEventListener("click", (e) => { e.preventDefault(); close(); });
-            backdrop.addEventListener("click", (e) => { if(e.target === backdrop) close(); });
+            function refresh(){
+              try{
+                btnPrimary.disabled = !(canSubmit ? canSubmit(backdrop) : true);
+              }catch{
+                btnPrimary.disabled = true;
+              }
+            }
 
-            async function doPrimary(){
-              if(primary.disabled) return;
-              try{ await onPrimary(); }
-              catch(e){ showErr(String(e.message || e)); }
+            async function submit(){
+              if(btnPrimary.disabled) return;
+              try{
+                await onSubmit(backdrop);
+              }catch(e){
+                showErr(String(e.message || e));
+                return;
+              }
               close();
             }
 
-            primary.addEventListener("click", (e) => { e.preventDefault(); doPrimary(); });
-
-            function setEnabled(ok){ primary.disabled = !ok; }
-            function refreshEnabled(){
-              try{ setEnabled(!!isPrimaryEnabled()); } catch { setEnabled(false); }
-            }
+            btnCancel.addEventListener("click", (e) => { e.preventDefault(); close(); });
+            backdrop.addEventListener("click", (e) => { if(e.target === backdrop) close(); });
+            btnPrimary.addEventListener("click", (e) => { e.preventDefault(); submit(); });
 
-            // 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){
+                if(!btnPrimary.disabled){
                   e.preventDefault();
-                  doPrimary();
+                  submit();
                 }
               }
             });
 
-            if(onMount) onMount({backdrop, primary, refreshEnabled, close});
-            refreshEnabled();
-            return { close };
+            // initial
+            refresh();
+            if(onOpen) onOpen({backdrop, dlg, refresh, close});
+            return { close, refresh };
+          }
+
+          // ------------------------------------------------------------
+          // Tags checklist dialog (centered)
+          // ------------------------------------------------------------
+          function openTagsDialog({selected, onApply}){
+            const all = tagUniverse();
+            const selectedSet = new Set(selected);
+
+            const listHtml = all.map(t => {
+              const checked = selectedSet.has(t) ? "checked" : "";
+              return `
+                <div class="checkrow">
+                  <input type="checkbox" class="tg" data-tag="${escapeAttr(t)}" ${checked}/>
+                  <div class="lbl">${escapeHtml(t)}</div>
+                </div>
+              `;
+            }).join("");
+
+            openDialog({
+              title: "Tags",
+              subtitle: "Check all that apply.",
+              bodyHtml: `
+                <div class="checklist">${listHtml}</div>
+                <div class="row">
+                  <input id="custom" type="text" placeholder="Add custom tag…" />
+                  <button class="btn" id="addCustom" type="button">Add</button>
+                </div>
+              `,
+              primaryText: "Apply",
+              primaryClass: "btn-primary",
+              canSubmit: () => true,
+              onSubmit: async (backdrop) => {
+                const checked = [];
+                backdrop.querySelectorAll(".tg").forEach(cb => {
+                  if(cb.checked) checked.push(cb.getAttribute("data-tag"));
+                });
+                onApply(checked.filter(Boolean));
+              },
+              onOpen: ({backdrop, refresh}) => {
+                // custom add
+                const custom = backdrop.querySelector("#custom");
+                const addBtn = backdrop.querySelector("#addCustom");
+
+                function addCustom(){
+                  const t = (custom.value || "").trim();
+                  if(!t) return;
+                  // add to UI by appending a new row checked
+                  const wrap = backdrop.querySelector(".checklist");
+                  const row = document.createElement("div");
+                  row.className = "checkrow";
+                  row.innerHTML = `<input type="checkbox" class="tg" data-tag="${escapeAttr(t)}" checked/><div class="lbl">${escapeHtml(t)}</div>`;
+                  wrap.prepend(row);
+                  custom.value = "";
+                  renderFilterChips();
+                  refresh();
+                }
+
+                addBtn.addEventListener("click", (e) => { e.preventDefault(); addCustom(); });
+                custom.addEventListener("keydown", (e) => {
+                  if(e.key === "Enter"){
+                    e.preventDefault();
+                    addCustom();
+                  }
+                });
+
+                custom.focus();
+              }
+            });
           }
 
           // ------------------------------------------------------------
@@ -1030,7 +959,7 @@ app_ui = ui.page_fluid(
 
             grid.innerHTML = "";
 
-            // ---------------- Drafts (private) ----------------
+            // ---------------- Drafts ----------------
             visibleDrafts.forEach((d) => {
               const card = document.createElement("div");
               card.className = "card";
@@ -1069,12 +998,15 @@ app_ui = ui.page_fluid(
 
                 <div class="card-footer">
                   <label>Link</label>
-                  <input type="text" class="link" value="${escapeHtml(d.link)}" />
-                  <div class="linkwrap"></div>
-
-                  <div class="by-row">
-                    <span>By:</span>
-                    <input class="by-input" type="text" value="${escapeHtml(d.author)}" placeholder="name" />
+                  <div class="footer-row">
+                    <div class="link-col">
+                      <input type="text" class="link" value="${escapeHtml(d.link)}" placeholder="https://..." />
+                      <div class="linkwrap"></div>
+                    </div>
+                    <div class="by-col">
+                      <span>By:</span>
+                      <input class="by-input" type="text" value="${escapeHtml(d.author)}" placeholder="name" />
+                    </div>
                   </div>
                 </div>
               `;
@@ -1153,26 +1085,29 @@ app_ui = ui.page_fluid(
                 }, 150));
               }
 
-              // Tags checklist
+              // Tags dialog
               tagBtn.addEventListener("click", (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 if(!(titleEl.value || "").trim()) return;
-                openTagChecklist(tagBtn, tags, (next) => {
-                  tags = next.slice();
-                  setDraft({ tags });
-                  renderTags();
-                  renderFilterChips();
-                  updateHeader();
+                openTagsDialog({
+                  selected: tags,
+                  onApply: (next) => {
+                    tags = next.slice();
+                    setDraft({ tags });
+                    renderTags();
+                    renderFilterChips();
+                    updateHeader();
+                  }
                 });
               });
 
-              // Post (password modal; Enter works)
+              // Post dialog
               postBtn.addEventListener("click", () => {
                 const cur = getDraft();
                 if(!cur || !draftFilled(cur)) return;
 
-                openModal({
+                openDialog({
                   title: "Post this card?",
                   subtitle: "This will publish the card for everyone to see.",
                   bodyHtml: `
@@ -1181,13 +1116,9 @@ app_ui = ui.page_fluid(
                   `,
                   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();
+                  canSubmit: (backdrop) => (backdrop.querySelector("#pw").value || "").trim().length > 0,
+                  onSubmit: async (backdrop) => {
+                    const password = (backdrop.querySelector("#pw").value || "").trim();
                     const payload = {
                       password,
                       model: cur.model,
@@ -1213,10 +1144,10 @@ app_ui = ui.page_fluid(
                     renderFilterChips();
                     render();
                   },
-                  onMount: ({backdrop, refreshEnabled}) => {
+                  onOpen: ({backdrop, refresh}) => {
                     const pw = backdrop.querySelector("#pw");
                     pw.focus();
-                    pw.addEventListener("input", refreshEnabled);
+                    pw.addEventListener("input", refresh);
                   }
                 });
               });
@@ -1230,7 +1161,6 @@ 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();
@@ -1239,7 +1169,7 @@ app_ui = ui.page_fluid(
               grid.appendChild(card);
             });
 
-            // ---------------- Published (shared) ----------------
+            // ---------------- Published ----------------
             visiblePublished.forEach((c) => {
               const card = document.createElement("div");
               card.className = "card";
@@ -1272,9 +1202,15 @@ app_ui = ui.page_fluid(
 
                 <div class="card-footer">
                   <label>Link</label>
-                  <input readonly value="${escapeHtml(c.link || "")}" />
-                  <div class="linkwrap"></div>
-                  <div class="by-display">${c.author ? ("By: " + escapeHtml(c.author)) : ""}</div>
+                  <div class="footer-row">
+                    <div class="link-col">
+                      <input readonly value="${escapeHtml(c.link || "")}" />
+                      <div class="linkwrap"></div>
+                    </div>
+                    <div class="by-col">
+                      <div class="by-display">${c.author ? ("By: " + escapeHtml(c.author)) : ""}</div>
+                    </div>
+                  </div>
                 </div>
               `;
 
@@ -1287,34 +1223,32 @@ app_ui = ui.page_fluid(
                 ? `<a class="resource-link" href="${escapeAttr(url)}" target="_blank" rel="noopener noreferrer">Open link</a>`
                 : "";
 
-              // Delete published (password + 2 checks; Enter works)
+              // Delete published (centered + compact)
               delBtn.addEventListener("click", () => {
-                openModal({
+                openDialog({
                   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 class="checklist" style="margin-bottom:10px;">
+                      <div class="checkrow">
+                        <input type="checkbox" id="c1"/>
+                        <div class="lbl">I understand this is permanent</div>
+                      </div>
+                      <div class="checkrow">
+                        <input type="checkbox" id="c2"/>
+                        <div class="lbl">I confirm I want to delete this card</div>
+                      </div>
                     </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();
+                  canSubmit: (b) => b.querySelector("#c1").checked
+                                 && b.querySelector("#c2").checked
+                                 && (b.querySelector("#pw").value || "").trim().length > 0,
+                  onSubmit: async (b) => {
+                    const password = (b.querySelector("#pw").value || "").trim();
                     const data = await api(`/api/cards/${encodeURIComponent(c.id)}`, {
                       method: "DELETE",
                       headers: { "X-Password": password },
@@ -1325,26 +1259,26 @@ app_ui = ui.page_fluid(
                     renderFilterChips();
                     render();
                   },
-                  onMount: ({backdrop, refreshEnabled}) => {
+                  onOpen: ({backdrop, refresh}) => {
                     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));
+                    [pw, c1, c2].forEach(el => el.addEventListener("input", refresh));
+                    [c1, c2].forEach(el => el.addEventListener("change", refresh));
                   }
                 });
               });
 
-              // Edit & Republish (short modal; internal scroll; tags checklist; Enter republish)
+              // Edit & Republish (centered, shorter, internal scroll)
               editBtn.addEventListener("click", () => {
                 let tagsLocal = tags.slice();
 
-                openModal({
+                openDialog({
                   title: "Edit & Republish",
                   subtitle: "Edits go live only after you enter the password and republish.",
                   bodyHtml: `
-                    <div class="edit-grid">
+                    <div style="display:grid; gap:10px;">
                       <div>
                         <label>Model</label>
                         <input id="m" type="text" value="${escapeHtml(c.model || "")}" />
@@ -1352,30 +1286,31 @@ app_ui = ui.page_fluid(
 
                       <div>
                         <label>Tags</label>
-                        <div class="edit-tags" id="tags"></div>
+                        <div id="tags" style="display:flex; flex-wrap:wrap; gap:8px; align-items:center;"></div>
                         <div style="margin-top:8px;">
-                          <button class="tag-btn" id="tagChecklist" type="button">Tags</button>
+                          <button class="tag-btn" id="tagBtn" type="button">Tags</button>
                         </div>
                       </div>
 
                       <div>
                         <label>How it Works</label>
-                        <textarea id="h">${escapeHtml(c.how_it_works || "")}</textarea>
+                        <textarea id="h" style="height:90px;">${escapeHtml(c.how_it_works || "")}</textarea>
                       </div>
 
                       <div>
                         <label>Use Cases</label>
-                        <textarea id="u">${escapeHtml(c.use_cases || "")}</textarea>
-                      </div>
-
-                      <div>
-                        <label>Link</label>
-                        <input id="l" type="text" value="${escapeHtml(c.link || "")}" />
+                        <textarea id="u" style="height:90px;">${escapeHtml(c.use_cases || "")}</textarea>
                       </div>
 
-                      <div style="display:flex; justify-content:flex-end; gap:8px; align-items:center;">
-                        <label style="margin:0; font-weight:900;">By:</label>
-                        <input id="a" type="text" style="width:220px;" value="${escapeHtml(c.author || "")}" placeholder="name" />
+                      <div class="footer-row" style="align-items:flex-end;">
+                        <div class="link-col">
+                          <label>Link</label>
+                          <input id="l" type="text" value="${escapeHtml(c.link || "")}" />
+                        </div>
+                        <div class="by-col" style="padding-bottom:2px;">
+                          <span>By:</span>
+                          <input id="a" class="by-input" type="text" value="${escapeHtml(c.author || "")}" placeholder="name" />
+                        </div>
                       </div>
 
                       <div>
@@ -1386,33 +1321,20 @@ app_ui = ui.page_fluid(
                   `,
                   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();
-
+                  canSubmit: (b) => (b.querySelector("#pw").value || "").trim().length > 0
+                                  && (b.querySelector("#m").value || "").trim().length > 0
+                                  && (b.querySelector("#h").value || "").trim().length > 0
+                                  && (b.querySelector("#u").value || "").trim().length > 0,
+                  onSubmit: async (b) => {
+                    const password = (b.querySelector("#pw").value || "").trim();
                     const payload = {
                       password,
-                      model: m.value || "",
+                      model: b.querySelector("#m").value || "",
                       tags: tagsLocal,
-                      how_it_works: h.value || "",
-                      use_cases: u.value || "",
-                      link: l.value || "",
-                      author: a.value || "",
+                      how_it_works: b.querySelector("#h").value || "",
+                      use_cases: b.querySelector("#u").value || "",
+                      link: b.querySelector("#l").value || "",
+                      author: b.querySelector("#a").value || "",
                     };
 
                     const data = await api(`/api/cards/${encodeURIComponent(c.id)}`, {
@@ -1427,13 +1349,13 @@ app_ui = ui.page_fluid(
                     renderFilterChips();
                     render();
                   },
-                  onMount: ({backdrop, refreshEnabled}) => {
-                    const tagsEl = backdrop.querySelector("#tags");
-                    const tagBtn = backdrop.querySelector("#tagChecklist");
+                  onOpen: ({backdrop, refresh}) => {
+                    const tagsWrap = backdrop.querySelector("#tags");
+                    const tagBtn = backdrop.querySelector("#tagBtn");
                     const pw = backdrop.querySelector("#pw");
 
                     function renderEditTags(){
-                      tagsEl.innerHTML = "";
+                      tagsWrap.innerHTML = "";
                       tagsLocal.forEach(t => {
                         const chip = document.createElement("span");
                         chip.className = "tag-chip";
@@ -1443,32 +1365,32 @@ app_ui = ui.page_fluid(
                           tagsLocal = tagsLocal.filter(x => x !== t);
                           renderEditTags();
                           renderFilterChips();
-                          refreshEnabled();
+                          refresh();
                         });
-                        tagsEl.appendChild(chip);
+                        tagsWrap.appendChild(chip);
                       });
                     }
 
                     tagBtn.addEventListener("click", (e) => {
                       e.preventDefault();
-                      e.stopPropagation();
-                      openTagChecklist(tagBtn, tagsLocal, (next) => {
-                        tagsLocal = next.slice();
-                        renderEditTags();
-                        renderFilterChips();
-                        refreshEnabled();
+                      openTagsDialog({
+                        selected: tagsLocal,
+                        onApply: (next) => {
+                          tagsLocal = next.slice();
+                          renderEditTags();
+                          renderFilterChips();
+                          refresh();
+                        }
                       });
                     });
 
-                    // enable/disable republish as user types
                     ["m","h","u","l","a","pw"].forEach(id => {
-                      const el = backdrop.querySelector("#" + id);
-                      el.addEventListener("input", refreshEnabled);
+                      backdrop.querySelector("#" + id).addEventListener("input", refresh);
                     });
 
                     pw.focus();
                     renderEditTags();
-                    refreshEnabled();
+                    refresh();
                   }
                 });
               });