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 && } {!loading && notes.length > 0 && !isRateLimited && ( -
- {topLevelNotes.map((note) => ( - - ))} -
+ <> + {/* Search / filter notes */} +
+
+ + setSearchQuery(e.target.value)} + placeholder="Search notes by title or content..." + aria-label="Search notes" + className="w-full pl-10 pr-10 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" + /> + {searchQuery && ( + + )} +
+
+ + {filteredNotes.length > 0 ? ( +
+ {filteredNotes.map((note) => ( + + ))} +
+ ) : ( +
+
+ +
+

+ No notes match your search +

+

+ No notes found for “{searchQuery}”. Try a different + keyword or clear the search to see all notes. +

+
+ )} + )}