Recycle bin feature

src/App.tsx

@@ -18,6 +18,7 @@ const App = () => {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Index />} />
+          <Route path="/recycle-bin" element={<Index deletePage={true} />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

src/components/NoteCard.tsx

@@ -14,7 +14,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
-
+import { useLocation } from 'react-router-dom';
 interface NoteCardProps {
   note: Note;
   isActive: boolean;
@@ -24,6 +24,8 @@ interface NoteCardProps {
 }
 
 export function NoteCard({ note, isActive, onClick, onDelete, onDuplicate }: NoteCardProps) {
+  const path = useLocation()?.pathname;
+    const deletePage = path === '/recycle-bin';
   const preview = note.content.slice(0, 100) || 'No content';
 
   return (
@@ -83,7 +85,10 @@ export function NoteCard({ note, isActive, onClick, onDelete, onDuplicate }: Not
               <AlertDialogHeader>
                 <AlertDialogTitle>Delete Note</AlertDialogTitle>
                 <AlertDialogDescription>
-                  Are you sure you want to delete this note? This action cannot be undone.
+                  { 
+                  deletePage ? "This note will be permanently deleted and cannot be recovered. Are you sure you want to continue?" :
+                  "This note will be moved to the recycle bin and can be restored later. Are you sure you want to continue?"
+                }
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter>

src/components/NoteEditor.tsx

@@ -15,6 +15,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
+import { useLocation } from 'react-router-dom';
 
 interface NoteEditorProps {
   note: Note;
@@ -25,6 +26,8 @@ interface NoteEditorProps {
 export function NoteEditor({ note, onUpdate, onDelete }: NoteEditorProps) {
   const [title, setTitle] = useState(note.title);
   const [content, setContent] = useState(note.content);
+  const path = useLocation()?.pathname
+  const deletePage = path === '/recycle-bin'
 
   useEffect(() => {
     setTitle(note.title);
@@ -60,7 +63,10 @@ export function NoteEditor({ note, onUpdate, onDelete }: NoteEditorProps) {
               <AlertDialogHeader>
                 <AlertDialogTitle>Delete Note</AlertDialogTitle>
                 <AlertDialogDescription>
-                  Are you sure you want to delete this note? This action cannot be undone.
+                { 
+                  deletePage ? "This note will be permanently deleted and cannot be recovered. Are you sure you want to continue?" :
+                  "This note will be moved to the recycle bin and can be restored later. Are you sure you want to continue?"
+                }
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter>

src/components/NotesSidebar.tsx

@@ -2,11 +2,12 @@ import { Note } from '@/types/note';
 import { NoteCard } from './NoteCard';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { PlusCircle, Search, FileDown } from 'lucide-react';
+import { PlusCircle, Search, FileDown, Trash2, Home } from 'lucide-react';
 import jsPDF from 'jspdf';
 import { useState } from 'react';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { ThemeToggle } from "@/components/theme/themeToggle";
+import { Link, useLocation } from 'react-router-dom';
 
 interface NotesSidebarProps {
   notes: Note[];
@@ -26,62 +27,69 @@ export function NotesSidebar({
   onDelete,
 }: NotesSidebarProps) {
   const [searchQuery, setSearchQuery] = useState('');
+  const path = useLocation()?.pathname;
+  const deletePage = path === '/recycle-bin';
+
 
   const filteredNotes = notes.filter(
     (note) =>
-      note.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      note.content.toLowerCase().includes(searchQuery.toLowerCase())
+      (note.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        note.content.toLowerCase().includes(searchQuery.toLowerCase())) && (!!note?.deleted === deletePage)
   );
 
   return (
     <div className="w-screen md:w-80 border-r bg-secondary/30 flex flex-col h-screen">
       <div className="p-4 border-b space-y-3">
         <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-bold text-foreground">Notes</h1>
+          <h1 className="text-2xl font-bold text-foreground">{ deletePage ? "Recycle Bin" : "Notes"}</h1>
           <div className="flex items-center gap-2">
-            <ThemeToggle/>
-            <Button
-              onClick={() => {
-                if (!activeNoteId) return;
+            {!deletePage &&  (
+              <>
+                <ThemeToggle />
+                <Button
+                  onClick={() => {
+                    if (!activeNoteId) return;
 
-                const activeNote = notes.find(note => note.id === activeNoteId);
-                if (!activeNote) return;
+                    const activeNote = notes.find(note => note.id === activeNoteId);
+                    if (!activeNote) return;
 
-                const doc = new jsPDF();
-                const pageWidth = doc.internal.pageSize.getWidth();
-                const margin = 10;
-                const contentWidth = pageWidth - (margin * 2);
+                    const doc = new jsPDF();
+                    const pageWidth = doc.internal.pageSize.getWidth();
+                    const margin = 10;
+                    const contentWidth = pageWidth - (margin * 2);
 
-                doc.setFontSize(16);
-                doc.text(activeNote.title || 'Untitled Note', margin, margin);
+                    doc.setFontSize(16);
+                    doc.text(activeNote.title || 'Untitled Note', margin, margin);
 
-                doc.setFontSize(12);
-                const contentLines = doc.splitTextToSize(activeNote.content, contentWidth);
+                    doc.setFontSize(12);
+                    const contentLines = doc.splitTextToSize(activeNote.content, contentWidth);
 
-                let yOffset = margin + 10;
-                const lineHeight = 7;
+                    let yOffset = margin + 10;
+                    const lineHeight = 7;
 
-                contentLines.forEach((line: string) => {
-                  if (yOffset > doc.internal.pageSize.getHeight() - margin) {
-                    doc.addPage();
-                    yOffset = margin;
-                  }
-                  doc.text(line, margin, yOffset);
-                  yOffset += lineHeight;
-                });
+                    contentLines.forEach((line: string) => {
+                      if (yOffset > doc.internal.pageSize.getHeight() - margin) {
+                        doc.addPage();
+                        yOffset = margin;
+                      }
+                      doc.text(line, margin, yOffset);
+                      yOffset += lineHeight;
+                    });
 
-                doc.save(`${activeNote.title || 'note'}.pdf`);
-              }}
-              size="icon"
-              variant="outline"
-              className="hover:bg-secondary"
-              title="Export as PDF"
-            >
-              <FileDown className="h-5 w-5" />
-            </Button>
-            <Button onClick={onCreateNote} size="icon" variant="default" title="Create Note">
-              <PlusCircle className="h-5 w-5" />
-            </Button>
+                    doc.save(`${activeNote.title || 'note'}.pdf`);
+                  }}
+                  size="icon"
+                  variant="outline"
+                  className="hover:bg-secondary"
+                  title="Export as PDF"
+                >
+                  <FileDown className="h-5 w-5" />
+                </Button>
+                <Button onClick={onCreateNote} size="icon" variant="default">
+                  <PlusCircle className="h-5 w-5" />
+                </Button>
+              </>
+            )}
           </div>
         </div>
         <div className="relative">
@@ -98,7 +106,7 @@ export function NotesSidebar({
         <div className="p-4 space-y-2">
           {filteredNotes.length === 0 ? (
             <div className="text-center py-8 text-muted-foreground">
-              {searchQuery ? 'No notes found' : 'No notes yet. Create one!'}
+              {(searchQuery ? 'No notes found' : (deletePage ? 'Recycle Bin is empty' : 'No notes yet. Create one!'))}
             </div>
           ) : (
             filteredNotes.map((note) => (
@@ -114,6 +122,31 @@ export function NotesSidebar({
           )}
         </div>
       </ScrollArea>
+      <div className="border-t">
+        {!deletePage ? (
+          <Link to="/recycle-bin" className="w-full">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="w-full h-14 pl-4 justify-start text-red-600 hover:text-red-700 hover:bg-red-300 dark:hover:bg-red-950 rounded-none"
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Recycle Bin
+            </Button>
+          </Link>
+        ) : (
+          <Link to="/" className="w-full">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="w-full h-14 pl-4 justify-start rounded-none"
+            >
+              <Home className="h-4 w-4 mr-2" />
+              Home
+            </Button>
+          </Link>
+        )}
+      </div>
     </div>
   );
 }

src/hooks/useNotes.ts

@@ -85,6 +85,14 @@ export function useNotes() {
     setNotes((prev) => prev.filter((note) => note.id !== id));
   };
 
+  const softDeleteNote = (id: string) => {
+    setNotes((prev) =>
+      prev.map((note) =>
+        note.id === id ? { ...note, deleted: true } : note
+      )
+    );
+  }
+
   const duplicateNote = (id: string) => {
     const newId = crypto.randomUUID();
 
@@ -123,6 +131,7 @@ export function useNotes() {
     createNote,
     updateNote,
     deleteNote,
+    softDeleteNote,
     duplicateNote,
   };
 }

src/pages/Index.tsx

@@ -5,9 +5,8 @@
 import { FileText, ArrowLeft } from "lucide-react";
 import { toast } from "sonner";
 
-const Index = () => {
-  const { notes, createNote, updateNote, deleteNote, duplicateNote } =
-    useNotes();
+const Index = ({deletePage = false}: {deletePage?: boolean}) => {
+  const { notes, createNote, updateNote, deleteNote, duplicateNote, softDeleteNote } = useNotes();
   const [activeNoteId, setActiveNoteId] = useState<string | null>(null);
   const [isMobile, setIsMobile] = useState(false);
 
@@ -18,6 +17,10 @@
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
 
+  useEffect(() => {
+    setActiveNoteId(null);
+  }, [deletePage]);
+
   const handleCreateNote = () => {
     const newId = createNote();
     setActiveNoteId(newId);
@@ -29,6 +32,12 @@
       setActiveNoteId(notes.length > 1 ? notes[0].id : null);
     }
   };
+  const handleSoftDeleteNote = (id: string) => {
+    softDeleteNote(id);
+    if (activeNoteId === id) {
+      setActiveNoteId(null);
+    }
+  };
 
   const handleDuplicateNote = useCallback(
     (id: string) => {
@@ -129,7 +138,7 @@
     return () => {
       document.removeEventListener("keydown", handleKeyDown, true);
     };
   }, [notes, activeNoteId]);
 
   const activeNote = notes.find((note) => note.id === activeNoteId);
 
@@ -144,7 +153,7 @@
             onSelectNote={setActiveNoteId}
             onCreateNote={handleCreateNote}
             onDuplicateNote={handleDuplicateNote}
-            onDelete={handleDeleteNote}
+            onDelete={ deletePage ? handleDeleteNote : handleSoftDeleteNote}
           />
           <main className="flex-1 overflow-hidden relative">
             {/* Keyboard Shortcuts Helper */}
@@ -193,7 +202,7 @@
                 <NoteEditor
                   note={activeNote}
                   onUpdate={updateNote}
-                  onDelete={handleDeleteNote}
+                  onDelete={ deletePage ? handleDeleteNote : handleSoftDeleteNote}
                 />
               </div>
             ) : (
@@ -222,7 +231,7 @@
               <NoteEditor
                 note={activeNote}
                 onUpdate={updateNote}
-                onDelete={handleDeleteNote}
+                onDelete={ deletePage ? handleDeleteNote : handleSoftDeleteNote}
               />
             </div>
           ) : (
@@ -232,7 +241,7 @@
               onSelectNote={setActiveNoteId}
               onCreateNote={handleCreateNote}
               onDuplicateNote={handleDuplicateNote}
-              onDelete={handleDeleteNote}
+              onDelete={ deletePage ? handleDeleteNote : handleSoftDeleteNote}
             />
           )}
         </main>

src/types/note.ts

@@ -4,6 +4,7 @@ export interface Note {
   content: string;
   createdAt: Date;
   updatedAt: Date;
+  deleted?: boolean;
 }
 // Utility function to format timestamps
 export const formatTimestamp = (date: Date, locale: string = 'en-US'): string => {