confused

assets/scripts/notes.js

@@ -3,6 +3,8 @@
   const form = document.getElementById("notes-form");
   const authorInput = document.getElementById("note-author");
   const contentInput = document.getElementById("note-content");
+  const authorFilter = document.getElementById("notes-author-filter");
+  let notesCache = [];
 
   if (!wall) return;
 
@@ -34,6 +36,53 @@
     return el;
   }
 
+  function normaliseAuthor(author) {
+    return (author || "").trim();
+  }
+
+  function populateAuthorFilter(notes) {
+    if (!authorFilter) return;
+
+    const previousValue = authorFilter.value;
+    const authors = Array.from(
+      new Set(notes.map(note => normaliseAuthor(note.author_name)).filter(Boolean))
+    ).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }));
+
+    authorFilter.innerHTML = '<option value="">All authors</option>';
+
+    authors.forEach(author => {
+      const option = document.createElement("option");
+      option.value = author;
+      option.textContent = author;
+      authorFilter.appendChild(option);
+    });
+
+    authorFilter.value = authors.includes(previousValue) ? previousValue : "";
+  }
+
+  function renderNotes() {
+    wall.innerHTML = "";
+
+    const selectedAuthor = authorFilter ? authorFilter.value : "";
+    const notes = selectedAuthor
+      ? notesCache.filter(note => normaliseAuthor(note.author_name) === selectedAuthor)
+      : notesCache;
+
+    if (notesCache.length === 0) {
+      wall.innerHTML = "<p>No notes yet.</p>";
+      return;
+    }
+
+    if (notes.length === 0) {
+      wall.innerHTML = "<p>No notes for this author.</p>";
+      return;
+    }
+
+    notes.forEach(note => {
+      wall.appendChild(renderNote(note));
+    });
+  }
+
   async function loadNotes() {
     wall.innerHTML = "<p>Loading notes…</p>";
 
@@ -42,16 +91,9 @@
       if (!res.ok) throw new Error("Failed to fetch notes");
 
       const notes = await res.json();
-      wall.innerHTML = "";
-
-      if (notes.length === 0) {
-        wall.innerHTML = "<p>No notes yet.</p>";
-        return;
-      }
-
-      notes.forEach(note => {
-        wall.appendChild(renderNote(note));
-      });
+      notesCache = notes;
+      populateAuthorFilter(notesCache);
+      renderNotes();
     } catch (err) {
       console.error(err);
       wall.innerHTML = "<p>Could not load notes.</p>";
@@ -98,5 +140,9 @@
     form.addEventListener("submit", submitNote);
   }
 
+  if (authorFilter) {
+    authorFilter.addEventListener("change", renderNotes);
+  }
+
   loadNotes();
 })();