Implement very, very crude search

priv/static/index.html

@@ -63,6 +63,9 @@
         <div>
           <a href="#" id="reset-app">Reset</a>
         </div>
+        <div>
+          <input type="text" id="search" placeholder="Search" autocomplete="off" />
+        </div>
       </nav>
 
       <note-form mode="add" id="new-note">

priv/static/js/jenot.js

@@ -92,6 +92,36 @@ if (notificationsAvailable()) {
   });
 }
 
+// Search
+
+let filter = "";
+const search = document.querySelector("#search");
+
+search.addEventListener("input", (e) => {
+  filter = e.target.value.trim().toLowerCase();
+  Notes.saveStorage();
+});
+
+function filterNotes(notes) {
+  if (filter !== "") {
+    return notes.filter(
+      (n) =>
+        n.title.toLowerCase().indexOf(filter) > -1 ||
+        textOf(n.content).toLowerCase().indexOf(filter) > -1,
+    );
+  }
+
+  return notes;
+}
+
+function textOf(content) {
+  if (typeof content === "object") {
+    return content.map((n) => n.content).join("");
+  } else {
+    return content;
+  }
+}
+
 // There are two note-form component instances - one for
 // composing new notes and another one for editing existing notes.
 
@@ -155,7 +185,8 @@ function notesEqual(note1, note2) {
 }
 
 async function render() {
-  const notes = await Notes.all();
+  const allNotes = await Notes.all();
+  const notes = filterNotes(allNotes);
   const notesContainer = document.querySelector("#notes");
 
   let previousId = null;

priv/static/style.css

@@ -311,6 +311,11 @@ button {
   gap: var(--gap-1);
 }
 
+#search {
+  width: 10em;
+  min-width: 0;
+}
+
 #notes {
   display: flex;
   flex-direction: column;