From 7fd939a9887a2280fa4b172f74a8d9b9980a3620 Mon Sep 17 00:00:00 2001
From: Nicola Zangrandi <wasp@wasp.ovh>
Date: Fri, 28 Feb 2025 17:12:48 +0100
Subject: [PATCH] feat(frontend): add search functionality to all sections

---
 frontend/src/lib/components/SearchBar.svelte | 34 ++++++++++++++++++++
 frontend/src/routes/+page.svelte             | 17 +++++++++-
 frontend/src/routes/feeds/+page.svelte       | 24 +++++++++++++-
 frontend/src/routes/feeds/list/+page.svelte  | 21 +++++++++++-
 frontend/src/routes/readlist/+page.svelte    | 20 +++++++++++-
 5 files changed, 112 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/lib/components/SearchBar.svelte

diff --git a/frontend/src/lib/components/SearchBar.svelte b/frontend/src/lib/components/SearchBar.svelte
new file mode 100644
index 0000000..94ccb3e
--- /dev/null
+++ b/frontend/src/lib/components/SearchBar.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	/**
+	 * A reusable search bar component that emits search events
+	 */
+	export let placeholder = 'Search...';
+	export let value = '';
+	export let debounceTime = 300;
+
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const searchValue = target.value;
+
+		// Clear any existing timeout
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+		}
+
+		// Set a new timeout to debounce the search
+		timeoutId = setTimeout(() => {
+			value = searchValue;
+		}, debounceTime);
+	}
+</script>
+
+<div class="field">
+	<div class="control has-icons-left">
+		<input class="input" type="text" {placeholder} {value} on:input={handleInput} />
+		<span class="icon is-small is-left">
+			<i class="fas fa-search"></i>
+		</span>
+	</div>
+</div>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 61fec5b..85fe34a 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CardList from '$lib/components/CardList.svelte';
+	import SearchBar from '$lib/components/SearchBar.svelte';
 	import type { Note, Feed } from '$lib/types';
 	import { onMount } from 'svelte';
 	import Navigation from '$lib/components/Navigation.svelte';
@@ -10,6 +11,7 @@
 	let error: string | null = null;
 	let importCount = 0;
 	let obsidianFile: File | null = null;
+	let searchQuery = '';
 
 	// Subscribe to the notes store
 	const unsubscribe = notes.subscribe((value) => {
@@ -109,6 +111,15 @@
 			'updatedAt' in item
 		);
 	}
+
+	// Filter notes based on search query
+	$: filteredNotes = searchQuery
+		? notesList.filter(
+				(note) =>
+					note.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+					note.content.toLowerCase().includes(searchQuery.toLowerCase())
+			)
+		: notesList;
 </script>
 
 <Navigation />
@@ -183,6 +194,10 @@
 			</div>
 		</div>
 
-		<CardList items={notesList} {renderCard} emptyMessage="No notes found." />
+		<div class="mb-4">
+			<SearchBar placeholder="Search notes by title or content..." bind:value={searchQuery} />
+		</div>
+
+		<CardList items={filteredNotes} {renderCard} emptyMessage="No notes found." />
 	</section>
 </div>
diff --git a/frontend/src/routes/feeds/+page.svelte b/frontend/src/routes/feeds/+page.svelte
index 4a7d7bc..04031e7 100644
--- a/frontend/src/routes/feeds/+page.svelte
+++ b/frontend/src/routes/feeds/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { entries, feeds } from '$lib/feeds';
 	import CardList from '$lib/components/CardList.svelte';
+	import SearchBar from '$lib/components/SearchBar.svelte';
 	import type { Feed, FeedEntry, Note, ReadLaterItem } from '$lib/types';
 
 	// Define the CardProps interface to match what CardList expects
@@ -23,6 +24,7 @@
 	let error: string | null = null;
 	let showUnreadOnly = true;
 	let feedsMap: Map<string, Feed> = new Map();
+	let searchQuery = '';
 
 	onMount(async () => {
 		await loadData();
@@ -153,6 +155,19 @@
 		}
 		return 'No description available';
 	}
+
+	// Filter entries based on search query
+	$: filteredEntries = searchQuery
+		? $entries.filter((entry) => {
+				const feedName = feedsMap.get(entry.feedId)?.title || '';
+				return (
+					entry.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+					entry.summary?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+					feedName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+					entry.content?.toLowerCase().includes(searchQuery.toLowerCase())
+				);
+			})
+		: $entries;
 </script>
 
 <div class="container">
@@ -213,6 +228,13 @@
 		</div>
 	</div>
 
+	<div class="mb-4">
+		<SearchBar
+			placeholder="Search entries by title, content, or feed name..."
+			bind:value={searchQuery}
+		/>
+	</div>
+
 	{#if isLoading && $entries.length === 0}
 		<div class="has-text-centered py-6">
 			<span class="icon is-large">
@@ -221,7 +243,7 @@
 		</div>
 	{:else}
 		<CardList
-			items={$entries}
+			items={filteredEntries}
 			{renderCard}
 			emptyMessage={showUnreadOnly
 				? 'No unread entries found. Try refreshing your feeds or viewing all entries.'
diff --git a/frontend/src/routes/feeds/list/+page.svelte b/frontend/src/routes/feeds/list/+page.svelte
index 3974d3d..d9a3c99 100644
--- a/frontend/src/routes/feeds/list/+page.svelte
+++ b/frontend/src/routes/feeds/list/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { feeds } from '$lib/feeds';
 	import CardList from '$lib/components/CardList.svelte';
+	import SearchBar from '$lib/components/SearchBar.svelte';
 	import type { Feed, Note, ReadLaterItem } from '$lib/types';
 
 	// Define the CardProps interface to match what CardList expects
@@ -26,6 +27,7 @@
 	let isRefreshing = false;
 	let error: string | null = null;
 	let importCount = 0;
+	let searchQuery = '';
 
 	onMount(async () => {
 		await loadFeeds();
@@ -156,6 +158,16 @@
 			timestamp: item.createdAt
 		};
 	}
+
+	// Filter feeds based on search query
+	$: filteredFeeds = searchQuery
+		? feedsList.filter(
+				(feed) =>
+					feed.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+					(feed.description || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+					feed.url.toLowerCase().includes(searchQuery.toLowerCase())
+			)
+		: feedsList;
 </script>
 
 <div class="container">
@@ -266,6 +278,13 @@
 		</form>
 	</div>
 
+	<div class="mb-4">
+		<SearchBar
+			placeholder="Search feeds by title, description, or URL..."
+			bind:value={searchQuery}
+		/>
+	</div>
+
 	{#if isLoading && feedsList.length === 0}
 		<div class="has-text-centered py-6">
 			<span class="icon is-large">
@@ -274,7 +293,7 @@
 		</div>
 	{:else}
 		<CardList
-			items={feedsList}
+			items={filteredFeeds}
 			{renderCard}
 			emptyMessage="No feeds found. Add your first feed above."
 		/>
diff --git a/frontend/src/routes/readlist/+page.svelte b/frontend/src/routes/readlist/+page.svelte
index 2dc05a9..ce16faa 100644
--- a/frontend/src/routes/readlist/+page.svelte
+++ b/frontend/src/routes/readlist/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { readlist } from '$lib/readlist';
 	import CardList from '$lib/components/CardList.svelte';
+	import SearchBar from '$lib/components/SearchBar.svelte';
 	import type { ReadLaterItem } from '$lib/types';
 
 	let url = '';
@@ -9,6 +10,7 @@
 	let error: string | null = null;
 	let showArchived = false;
 	let archivingItems: Record<string, boolean> = {};
+	let searchQuery = '';
 
 	onMount(() => {
 		loadItems();
@@ -59,7 +61,16 @@
 	}
 
 	function getFilteredItems() {
-		return $readlist;
+		if (!searchQuery) {
+			return $readlist;
+		}
+
+		return $readlist.filter(
+			(item) =>
+				item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+				item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+				item.url.toLowerCase().includes(searchQuery.toLowerCase())
+		);
 	}
 </script>
 
@@ -107,6 +118,13 @@
 		</div>
 	</div>
 
+	<div class="mb-4">
+		<SearchBar
+			placeholder="Search saved links by title, description, or URL..."
+			bind:value={searchQuery}
+		/>
+	</div>
+
 	<CardList
 		items={getFilteredItems()}
 		renderCard={(item) => {