Merge pull request #9 from codeid9/feature/multi-label-filter-logic

feat: multi-select lable chips with AND/OR logic

Author: monapdx

src/App.jsx

@@ -23,7 +23,7 @@ const DEMO_NOTES = [
     title: "Welcome 👋",
     text: "This is the *web demo* of Keep Sticky Board.\n\nDrag me by my title bar.",
     color: "yellow",
-    labels: ["demo", "welcome"]
+    labels: ["demo", "welcome","ss","s","e","t"]
   },
   {
     id: "demo-2",
@@ -258,9 +258,11 @@ export default function App() {
   const [notes, setNotes] = useState([]);
   const [positions, setPositions] = useState({});
   const [query, setQuery] = useState("");
-  const [activeLabel, setActiveLabel] = useState("ALL");
   const saveTimer = useRef(null);
   const [zoom, setZoom] = useState(1);
+  const [openFilterBox,setOpenFilterBox] = useState(false);
+  const [selectedLabels, setSelectedLabels] = useState([]);
+  const [filterLogic, setFilterLogic] = useState("OR");
 
   // Initial load:
   // - Electron: load from keepAPI
@@ -367,26 +369,42 @@ export default function App() {
     setActiveLabel("ALL");
   }
 
+  const toggleLabel = (label) => {
+  if (label === "ALL") {
+    setSelectedLabels([]);
+    return;
+  }
+  setSelectedLabels(prev => 
+    prev.includes(label) 
+      ? prev.filter(l => l !== label)
+      : [...prev, label]
+  );
+};
+
   const allLabels = useMemo(() => {
     const s = new Set();
     for (const n of notes) for (const l of n.labels || []) s.add(l);
     return ["ALL", ...Array.from(s).sort((a, b) => a.localeCompare(b))];
   }, [notes]);
 
   const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    return notes.filter((n) => {
-      if (activeLabel !== "ALL" && !(n.labels || []).includes(activeLabel)) return false;
-      if (!q) return true;
-
-      const imageTerms = getNoteImages(n)
-        .map((img) => `${img.alt || ""} ${img.src || ""}`)
-        .join("\n");
+  const q = query.trim().toLowerCase();
+  return notes.filter((n) => {
+    // Label Filter Logic
+    if (selectedLabels.length > 0) {
+      const noteLabels = n.labels || [];
+      if (filterLogic === "OR") {
+        if (!selectedLabels.some(l => noteLabels.includes(l))) return false;
+      } else {
+        if (!selectedLabels.every(l => noteLabels.includes(l))) return false;
+      }
+    }
 
-      const hay = `${n.title || ""}\n${n.text || ""}\n${imageTerms}`.toLowerCase();
-      return hay.includes(q);
-    });
-  }, [notes, query, activeLabel]);
+    if (!q) return true;
+    const hay = `${n.title || ""}\n${n.text || ""}`.toLowerCase();
+    return hay.includes(q);
+  });
+}, [notes, query, selectedLabels, filterLogic]);
 
   function noteColor(n) {
     const c = String(n.color || "").toLowerCase();
@@ -436,11 +454,33 @@ export default function App() {
             value={query}
             onChange={(e) => setQuery(e.target.value)}
           />
-          <select className="select" value={activeLabel} onChange={(e) => setActiveLabel(e.target.value)}>
-            {allLabels.map((l) => (
-              <option key={l} value={l}>{l}</option>
-            ))}
-          </select>
+          <button className={`filter btn ${openFilterBox ? "active" : ""}`} onClick={()=>setOpenFilterBox(prev=>!prev)}>Filter Notes</button>
+          <div className={`filter-section ${openFilterBox? "active" : ""}`}>
+            {/* Logic Toggle: AND vs OR */}
+            <div className="logic-toggle">
+              <button 
+                className={`btn-toggle ${filterLogic === 'OR' ? 'active' : ''}`}
+                onClick={() => setFilterLogic('OR')}
+              > OR </button>
+              <button 
+                className={`btn-toggle ${filterLogic === 'AND' ? 'active' : ''}`}
+                onClick={() => setFilterLogic('AND')}
+              > AND </button>
+            </div>
+
+            {/* Multi-select Chips */}
+            <div className="chips-container">
+              {allLabels.map((l) => (
+                <button
+                  key={l}
+                  className={`chip-filter ${selectedLabels.includes(l) || (l === "ALL" && selectedLabels.length === 0) ? "selected" : ""}`}
+                  onClick={() => toggleLabel(l)}
+                >
+                  {l}
+                </button>
+              ))}
+            </div>
+          </div>
         </div>
       </header>      
       <div className="board" style={{

src/app.css

@@ -21,6 +21,7 @@ body{
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   background: var(--bg);
   color: var(--text);
+  overflow: hidden;
 }
 
 .app{ height:100%; display:flex; flex-direction:column; }
@@ -61,16 +62,8 @@ body{
   color: var(--text);
   outline:none;
 }
-.search:focus{ box-shadow: 0 0 0 3px var(--ring); }
-
-.select{
-  padding:10px 12px;
-  border-radius:10px;
-  border:1px solid rgba(255,255,255,.18);
-  background: rgba(0,0,0,.20);
-  color: var(--text);
-  outline:none;
-}
+.search:focus,
+.filter.active{ box-shadow: 0 0 0 3px var(--ring); }
 
 .board{
   position:relative;
@@ -218,6 +211,73 @@ body{
   background: rgba(255,255,255,0.3);
 }
 
+.filter-section {
+  position: absolute;
+  right:0;
+  transform: translateX(100%);
+  top:4.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  flex-wrap: wrap;
+  background: var(--ring);
+  width: 250px;
+  padding: 0.5rem;
+  border-radius: 8px;
+  box-shadow: 0 0 8px 0 rgba(0,0,0,.8);
+  transition: transform 0.3s ease-out;
+}
+.filter-section.active{
+  right:1.5rem;
+  transform: translateX(0);
+}
+
+.chips-container {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding-bottom: 5px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.chip-filter {
+  padding: 5px 12px;
+  border-radius: 15px;
+  border: 1px solid #ddd;
+  background: white;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: 0.2s;
+}
+
+.chip-filter.selected {
+  background: #202124;
+  color: white;
+  border-color: #202124;
+}
+
+.logic-toggle {
+  display: flex;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.btn-toggle {
+  padding: 5px 10px;
+  border: none;
+  background: #f1f3f4;
+  cursor: pointer;
+}
+
+.btn-toggle.active {
+  background: #4285f4;
+  color: white;
+}
+
 @media (max-width: 900px){
   .topbar{
     align-items:flex-start;