Update app.py

app.py

@@ -40,12 +40,30 @@ def _new_card() -> dict:
     return {
         "id": str(uuid4())[:12],
         "model": "",
+        "tags": [],  # NEW
         "how_it_works": "",
         "use_cases": "",
         "link": "",
     }
 
 
+def _normalize_tags(x) -> list[str]:
+    if x is None:
+        return []
+    if isinstance(x, str):
+        x = [t.strip() for t in x.split(",")]
+    if not isinstance(x, list):
+        return []
+    out = []
+    for t in x:
+        if t is None:
+            continue
+        s = str(t).strip()
+        if s and s not in out:
+            out.append(s)
+    return out
+
+
 def _normalize_state(obj: dict) -> dict:
     if not isinstance(obj, dict):
         obj = {}
@@ -68,10 +86,19 @@ def _normalize_state(obj: dict) -> dict:
         use_cases = c.get("use_cases", c.get("use", ""))
         link = c.get("link", c.get("resource_url", ""))
 
+        # Back-compat: if someone stored "categories"/"tag"/etc.
+        tags = (
+            c.get("tags")
+            if "tags" in c
+            else c.get("categories", c.get("tag", c.get("model_tags", [])))
+        )
+        tags = _normalize_tags(tags)
+
         normalized.append(
             {
                 "id": str(c.get("id") or str(uuid4())[:12]),
                 "model": "" if model is None else str(model),
+                "tags": tags,
                 "how_it_works": "" if how_it_works is None else str(how_it_works),
                 "use_cases": "" if use_cases is None else str(use_cases),
                 "link": "" if link is None else str(link),
@@ -153,9 +180,13 @@ async def api_card_id(request: Request) -> Response:
         if not isinstance(payload, dict):
             return _json({"error": "Invalid payload"}, status_code=400)
 
-        allowed = {"model", "how_it_works", "use_cases", "link"}
+        allowed = {"model", "tags", "how_it_works", "use_cases", "link"}
         for k in allowed:
-            if k in payload:
+            if k not in payload:
+                continue
+            if k == "tags":
+                cards[idx]["tags"] = _normalize_tags(payload.get("tags"))
+            else:
                 cards[idx][k] = "" if payload[k] is None else str(payload[k])
 
         state["version"] += 1
@@ -179,10 +210,14 @@ app_ui = ui.page_fluid(
           --cardBg:#ffffff;
           --muted:#6b778c;
           --headerBg:#f3f6fb;
+          --chipBg:#eef2f8;
+          --chipText:#1f2a44;
+          --chipActiveBg:#1f3a66;
+          --chipActiveText:#ffffff;
         }
         body { background: #f3f6fb; }
 
-        /* Top bar: ONLY + */
+        /* Top bar */
         .topbar{
           background: linear-gradient(0deg, var(--navy2), var(--navy));
           padding: 14px 18px;
@@ -191,7 +226,7 @@ app_ui = ui.page_fluid(
           display:flex;
           justify-content:flex-end;
           align-items:center;
-          margin-bottom: 12px;
+          margin-bottom: 10px;
         }
         #add-btn{
           background: white;
@@ -205,7 +240,55 @@ app_ui = ui.page_fluid(
           cursor: pointer;
           box-shadow: 0 2px 8px rgba(0,0,0,.14);
         }
-        #add-btn:hover{ filter: brightness(.97); }
+
+        /* Filters row */
+        .filters{
+          display:flex;
+          flex-wrap:wrap;
+          gap: 10px;
+          padding: 0 16px 12px 16px;
+          align-items:center;
+        }
+        .filters .label{
+          color: #1f2a44;
+          font-weight: 850;
+          font-size: 13px;
+          margin-right: 4px;
+        }
+        .chip{
+          border: 1px solid #d8e1ee;
+          background: var(--chipBg);
+          color: var(--chipText);
+          border-radius: 999px;
+          padding: 7px 10px;
+          font-size: 12px;
+          font-weight: 800;
+          cursor: pointer;
+          user-select:none;
+          display:inline-flex;
+          align-items:center;
+          gap: 6px;
+        }
+        .chip.active{
+          background: var(--chipActiveBg);
+          color: var(--chipActiveText);
+          border-color: rgba(0,0,0,.0);
+        }
+        .chip .x{
+          font-weight: 950;
+          opacity: .75;
+        }
+        .chip:hover{ filter: brightness(.98); }
+
+        .btn-clear{
+          margin-left: 6px;
+          border-radius: 10px;
+          padding: 7px 10px;
+          font-weight: 900;
+          border: 1px solid #d8e1ee;
+          background: #fff;
+          cursor:pointer;
+        }
 
         .err{
           margin: 0 16px 10px 16px;
@@ -246,6 +329,7 @@ app_ui = ui.page_fluid(
           min-height: 0;
         }
 
+        /* Header with title + tags + delete */
         .card-header{
           background: var(--headerBg);
           display:flex;
@@ -256,10 +340,16 @@ app_ui = ui.page_fluid(
           border-bottom: 1px solid #eef2f8;
           flex: 0 0 auto;
         }
-
-        /* Title input in header */
+        .header-left{
+          display:flex;
+          align-items:center;
+          gap: 10px;
+          flex: 1 1 auto;
+          min-width: 0;
+        }
         .title-input{
-          width: 100%;
+          flex: 1 1 auto;
+          min-width: 140px;
           border: none;
           outline: none;
           background: transparent;
@@ -269,18 +359,51 @@ app_ui = ui.page_fluid(
           font-weight: 650;
           color: #1f2a44;
         }
-        .title-input::placeholder{
-          color: #7b879c;
-          font-weight: 650;
+        .title-input::placeholder{ color: #7b879c; font-weight: 650; }
+        .card.has-title .title-input{ font-weight: 950; }
+        .title-input:focus{
+          background: rgba(255,255,255,.85);
+          border: 1px solid #d8e1ee;
         }
-        /* When filled, make it look like a bold title */
-        .card.has-title .title-input{
-          font-weight: 900;
+
+        .tag-bar{
+          display:flex;
+          gap: 6px;
+          align-items:center;
+          flex: 0 0 auto;
+          max-width: 48%;
+          overflow:auto;
+          padding-bottom: 2px;
         }
-        /* Optional subtle focus background so it feels editable */
-        .title-input:focus{
-          background: rgba(255,255,255,.8);
+        .tag-chip{
           border: 1px solid #d8e1ee;
+          background: #fff;
+          color: #1f2a44;
+          border-radius: 999px;
+          padding: 6px 9px;
+          font-size: 11px;
+          font-weight: 850;
+          display:inline-flex;
+          align-items:center;
+          gap: 6px;
+          cursor:pointer;
+          white-space: nowrap;
+        }
+        .tag-chip .rm{
+          font-weight: 950;
+          opacity: .6;
+        }
+        .tag-chip:hover{ filter: brightness(.98); }
+
+        .tag-add{
+          border: 1px dashed #cfd9ea;
+          background: transparent;
+          border-radius: 999px;
+          padding: 6px 10px;
+          font-size: 11px;
+          font-weight: 900;
+          cursor:pointer;
+          white-space:nowrap;
         }
 
         .del-btn{
@@ -293,7 +416,6 @@ app_ui = ui.page_fluid(
           padding: 0 8px;
           flex: 0 0 auto;
         }
-        .del-btn:hover{ color:#1c2b44; }
 
         .card-main{
           padding: 12px;
@@ -302,30 +424,38 @@ app_ui = ui.page_fluid(
           gap: 12px;
           flex: 1 1 auto;
           min-height: 0;
-          overflow:hidden; /* no card scroll */
+          overflow:hidden;
         }
 
-        /* How fixed height (~3-4 lines) */
-        textarea.ta-fixed{
-          height: 92px;
-          line-height: 1.25;
-          resize: none;
-          overflow: auto;
-        }
-
-        /* Use Cases grows to fill remaining space (kills the blank gap) */
-        .grow{
+        /* Equal-height panels */
+        .panel{
           display:flex;
           flex-direction:column;
-          flex: 1 1 auto;
+          flex: 1 1 0;
           min-height: 0;
         }
-        textarea.ta-grow{
-          flex: 1 1 auto;
+        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;
+          flex: 1 1 0;
           min-height: 0;
-          line-height: 1.25;
           resize: none;
           overflow: auto;
+          line-height: 1.25;
         }
 
         .card-footer{
@@ -333,17 +463,7 @@ app_ui = ui.page_fluid(
           border-top: 1px solid #eef2f8;
           flex: 0 0 auto;
         }
-
-        label{
-          display:block;
-          font-size: 12px;
-          color: var(--muted);
-          margin: 0 0 5px;
-          font-weight: 750;
-          letter-spacing: .2px;
-        }
-
-        input, textarea{
+        input{
           width:100%;
           box-sizing:border-box;
           border: 1px solid #d8e1ee;
@@ -353,7 +473,6 @@ app_ui = ui.page_fluid(
           outline: none;
           background: white;
         }
-
         .resource-link{
           display:inline-block;
           margin-top: 8px;
@@ -417,6 +536,7 @@ app_ui = ui.page_fluid(
         """
     ),
     ui.tags.div({"class": "topbar"}, ui.tags.button("＋", {"id": "add-btn", "type": "button"})),
+    ui.tags.div({"id": "filters", "class": "filters"}),
     ui.tags.div({"id": "err", "class": "err"}),
     ui.tags.div({"id": "grid", "class": "cards-grid"}),
     ui.tags.script(
@@ -425,10 +545,21 @@ app_ui = ui.page_fluid(
           const grid = document.getElementById("grid");
           const addBtn = document.getElementById("add-btn");
           const errBox = document.getElementById("err");
+          const filtersEl = document.getElementById("filters");
 
           const state = { version: null, cards: [] };
           const saveTimers = new Map();
 
+          // Tag suggestions (you can add more; custom tags are allowed too)
+          const DEFAULT_TAGS = [
+            "Regression", "Classification", "Time Series", "Causal",
+            "Tree-based", "Linear", "Bayesian", "Deep Learning",
+            "Unsupervised", "Dimensionality Reduction", "NLP", "Computer Vision",
+            "Ranking", "Survival"
+          ];
+
+          const activeFilters = new Set();
+
           function showErr(msg){
             if(!msg){ errBox.style.display="none"; errBox.textContent=""; return; }
             errBox.style.display="block";
@@ -464,6 +595,69 @@ app_ui = ui.page_fluid(
               .replaceAll(">", ">");
           }
 
+          function uniq(arr){
+            const out = [];
+            const seen = new Set();
+            for(const x of arr){
+              const s = String(x || "").trim();
+              if(!s) continue;
+              if(seen.has(s)) continue;
+              seen.add(s);
+              out.push(s);
+            }
+            return out;
+          }
+
+          function allKnownTags(){
+            const fromCards = [];
+            for(const c of state.cards){
+              const tags = Array.isArray(c.tags) ? c.tags : [];
+              for(const t of tags) fromCards.push(t);
+            }
+            return uniq([...DEFAULT_TAGS, ...fromCards]).sort((a,b)=>a.localeCompare(b));
+          }
+
+          function cardMatchesFilters(card){
+            if(activeFilters.size === 0) return true;
+            const tags = new Set(Array.isArray(card.tags) ? card.tags : []);
+            for(const f of activeFilters){
+              if(tags.has(f)) return true; // OR logic
+            }
+            return false;
+          }
+
+          function renderFilters(){
+            const tags = allKnownTags();
+
+            const chips = tags.map(t => {
+              const active = activeFilters.has(t) ? "active" : "";
+              return `<span class="chip ${active}" data-tag="${escapeAttr(t)}">${escapeHtml(t)}</span>`;
+            }).join("");
+
+            const any = activeFilters.size > 0;
+            filtersEl.innerHTML = `
+              <span class="label">Filters:</span>
+              ${chips}
+              <button class="btn-clear" id="clearFilters" type="button" ${any ? "" : "disabled"}>Clear</button>
+            `;
+
+            filtersEl.querySelectorAll(".chip").forEach(chip => {
+              chip.addEventListener("click", () => {
+                const t = chip.getAttribute("data-tag");
+                if(activeFilters.has(t)) activeFilters.delete(t);
+                else activeFilters.add(t);
+                renderFilters();
+                renderCardsOnly();
+              });
+            });
+
+            filtersEl.querySelector("#clearFilters").addEventListener("click", () => {
+              activeFilters.clear();
+              renderFilters();
+              renderCardsOnly();
+            });
+          }
+
           async function doDelete(cardId){
             const data = await api(`/api/cards/${encodeURIComponent(cardId)}`, { method: "DELETE" });
             state.version = data.version;
@@ -510,7 +704,6 @@ app_ui = ui.page_fluid(
             typed.addEventListener("input", updateEnabled);
 
             function close(){ backdrop.remove(); }
-
             cancel.addEventListener("click", (e) => { e.preventDefault(); close(); });
             backdrop.addEventListener("click", (e) => { if(e.target === backdrop) close(); });
 
@@ -523,37 +716,73 @@ app_ui = ui.page_fluid(
             typed.focus();
           }
 
-          function render(){
+          function tagPrompt(existingTags){
+            // simple add flow: choose from list or custom
+            const known = allKnownTags();
+            const remaining = known.filter(t => !existingTags.includes(t));
+            const menu = remaining.slice(0, 12); // keep prompt readable
+            const promptText =
+              "Add a tag.\n\n" +
+              (menu.length ? ("Suggestions: " + menu.join(", ") + "\n\n") : "") +
+              "Type a tag name (exactly as you want it):";
+            const val = (prompt(promptText) || "").trim();
+            if(!val) return null;
+            return val;
+          }
+
+          function renderCardsOnly(){
+            // renders only the grid (filters already rendered)
             if(state.cards.length === 0){
               grid.innerHTML = `<div class="empty"><b>No cards yet.</b><div>Click the ＋ to add your first card.</div></div>`;
               return;
             }
 
+            const visible = state.cards.filter(cardMatchesFilters);
+
+            if(visible.length === 0){
+              grid.innerHTML = `<div class="empty"><b>No matches.</b><div>Clear filters to show all cards.</div></div>`;
+              return;
+            }
+
             grid.innerHTML = "";
 
-            state.cards.forEach((c) => {
+            visible.forEach((c) => {
               const card = document.createElement("div");
               card.className = "card";
               card.dataset.id = c.id;
 
-              // mark title bold if filled
-              if((c.model || "").trim().length > 0) card.classList.add("has-title");
+              const titleFilled = (c.model || "").trim().length > 0;
+              if(titleFilled) card.classList.add("has-title");
+
+              const tags = Array.isArray(c.tags) ? c.tags : [];
+
+              const tagHtml = titleFilled
+                ? `
+                  <div class="tag-bar">
+                    ${tags.map(t => `<span class="tag-chip" data-tag="${escapeAttr(t)}">${escapeHtml(t)} <span class="rm">×</span></span>`).join("")}
+                    <button class="tag-add" type="button">+ Tag</button>
+                  </div>
+                `
+                : `<div class="tag-bar" style="display:none;"></div>`;
 
               card.innerHTML = `
                 <div class="card-header">
-                  <input class="title-input" type="text" value="${escapeHtml(c.model)}" placeholder="Model" />
+                  <div class="header-left">
+                    <input class="title-input" type="text" value="${escapeHtml(c.model)}" placeholder="Model" />
+                    ${tagHtml}
+                  </div>
                   <button class="del-btn" type="button" title="Delete">×</button>
                 </div>
 
                 <div class="card-main">
-                  <div>
+                  <div class="panel">
                     <label>How it Works</label>
-                    <textarea class="how ta-fixed">${escapeHtml(c.how_it_works)}</textarea>
+                    <textarea class="how">${escapeHtml(c.how_it_works)}</textarea>
                   </div>
 
-                  <div class="grow">
+                  <div class="panel">
                     <label>Use Cases</label>
-                    <textarea class="use ta-grow">${escapeHtml(c.use_cases)}</textarea>
+                    <textarea class="use">${escapeHtml(c.use_cases)}</textarea>
                   </div>
                 </div>
 
@@ -571,6 +800,9 @@ app_ui = ui.page_fluid(
               const linkEl  = card.querySelector(".link");
               const linkWrap = card.querySelector(".linkwrap");
 
+              const tagBar = card.querySelector(".tag-bar");
+              const tagAddBtn = card.querySelector(".tag-add");
+
               function updateLink(){
                 const url = (linkEl.value || "").trim();
                 linkWrap.innerHTML = url
@@ -578,18 +810,24 @@ app_ui = ui.page_fluid(
                   : "";
               }
 
-              function updateTitleStyle(){
+              function updateTitleStyleAndTagBar(){
                 const has = (titleEl.value || "").trim().length > 0;
                 card.classList.toggle("has-title", has);
+                // show/hide tag bar
+                if(tagBar){
+                  tagBar.style.display = has ? "flex" : "none";
+                }
               }
 
-              async function saveNow(){
+              async function saveNow(extraPayload = null){
                 const payload = {
                   model: titleEl.value || "",
                   how_it_works: howEl.value || "",
                   use_cases: useEl.value || "",
                   link: linkEl.value || "",
                 };
+                if(extraPayload) Object.assign(payload, extraPayload);
+
                 try{
                   const data = await api(`/api/cards/${encodeURIComponent(c.id)}`, {
                     method: "PUT",
@@ -599,7 +837,9 @@ app_ui = ui.page_fluid(
                   state.cards = data.cards;
                   showErr("");
                   updateLink();
-                  updateTitleStyle();
+                  updateTitleStyleAndTagBar();
+                  renderFilters();     // tags may have changed
+                  renderCardsOnly();   // so filtering reflects new tags
                 }catch(e){
                   showErr(String(e.message || e));
                 }
@@ -607,10 +847,10 @@ app_ui = ui.page_fluid(
 
               function scheduleSave(){
                 updateLink();
-                updateTitleStyle();
+                updateTitleStyleAndTagBar();
                 const existing = saveTimers.get(c.id);
                 if(existing) clearTimeout(existing);
-                saveTimers.set(c.id, setTimeout(saveNow, 350));
+                saveTimers.set(c.id, setTimeout(() => saveNow(), 350));
               }
 
               [titleEl, howEl, useEl, linkEl].forEach(el => el.addEventListener("input", scheduleSave));
@@ -621,11 +861,43 @@ app_ui = ui.page_fluid(
                 openDeleteModal(c.id);
               });
 
+              // Tag interactions (only if title is filled)
+              if(tagAddBtn){
+                tagAddBtn.addEventListener("click", async (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  const current = Array.isArray(c.tags) ? c.tags.slice() : [];
+                  const t = tagPrompt(current);
+                  if(!t) return;
+                  if(!current.includes(t)) current.push(t);
+                  await saveNow({ tags: current });
+                });
+              }
+
+              if(tagBar){
+                tagBar.querySelectorAll(".tag-chip").forEach(ch => {
+                  ch.addEventListener("click", async (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const t = ch.getAttribute("data-tag");
+                    const current = Array.isArray(c.tags) ? c.tags.slice() : [];
+                    const next = current.filter(x => x !== t);
+                    await saveNow({ tags: next });
+                  });
+                });
+              }
+
               updateLink();
+              updateTitleStyleAndTagBar();
               grid.appendChild(card);
             });
           }
 
+          function render(){
+            renderFilters();
+            renderCardsOnly();
+          }
+
           async function refresh(){
             try{
               const active = document.activeElement;