diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index 2193727..85e975f 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -1,5 +1,6 @@
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
+import { SearchIcon, XIcon } from "lucide-react";
import Navbar from "../components/Navbar";
import RateLimitedUI from "../components/RateLimitedUI";
import api from "../lib/axios";
@@ -15,6 +16,7 @@ const HomePage = () => {
const [isRateLimited, setIsRateLimited] = useState(false);
const [notes, setNotes] = useState([]);
const [loading, setLoading] = useState(true);
+ const [searchQuery, setSearchQuery] = useState("");
// Drag & drop state
const [activeDragId, setActiveDragId] = useState(null);
@@ -28,6 +30,16 @@ const HomePage = () => {
// Top-level notes (not grouped under another note)
const topLevelNotes = notes.filter((n) => !n.groupId);
+ // Filter top-level notes by title/content (case-insensitive substring match)
+ const query = searchQuery.trim().toLowerCase();
+ const filteredNotes = topLevelNotes.filter((n) => {
+ if (!query) return true;
+ return (
+ n.title?.toLowerCase().includes(query) ||
+ n.content?.toLowerCase().includes(query)
+ );
+ });
+
const fetchNotes = async () => {
try {
const res = await api.get("/notes");
@@ -146,21 +158,63 @@ const HomePage = () => {
{!loading && notes.length === 0 && !isRateLimited &&
+ No notes found for “{searchQuery}”. Try a different + keyword or clear the search to see all notes. +
+