Add filtering

static/js/filter.js

@@ -0,0 +1,41 @@
+const filters = document.querySelector(".filters");
+const buttons = Array.from(filters.querySelectorAll(".button"));
+const search = document.querySelector("input[type='text']");
+const songList = document.querySelector(".song-list");
+
+let selectedCategory = null;
+
+function buttonToggle(clickedButton) {
+	buttons.forEach(button => {
+		if (button === clickedButton && !button.classList.contains("selected")) {
+			button.classList.add("selected");
+			selectedCategory = button.dataset.category;
+		} else {
+			button.classList.remove("selected");
+			if (button.dataset.category == selectedCategory) selectedCategory = null;
+		}
+	});
+	filterSongs();
+}
+
+function filterSongs() {
+	const searchTerm = search.value.trim().toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
+	const songs = Array.from(songList.children);
+	songs.forEach(song => {
+		const title = song.dataset.title.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
+		const matching = title.includes(searchTerm) && (!selectedCategory || song.dataset.category === selectedCategory);
+		song.classList.toggle("hidden", !matching);
+	});
+}
+
+// Event listeners
+search.addEventListener("keyup", filterSongs);
+buttons.forEach(button => button.addEventListener("click", () => buttonToggle(button)));
+
+// Normalize song titles
+Array.from(songList.children).forEach(song => {
+	song.dataset.title = song.dataset.title.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
+});
+
+// Display the filter section on JS-enabled browsers
+window.addEventListener("load", () => filters.classList.remove = "hidden");