Implement note delete

src/components/ListItem.tsx

@@ -5,10 +5,12 @@ import {
   useRef,
   useEffect,
 } from "react"
-import { FileText } from "lucide-react"
+
+import { FileText, X } from "lucide-react"
 import { Input } from "@/components/ui/input"
 import { cn } from "@/lib/utils"
 import { useNotesStore } from "../contexts/NotesStore"
+import { useNote } from "@/contexts/ActiveNoteContext"
 
 type ListItemProps = {
   id: string
@@ -17,7 +19,8 @@ type ListItemProps = {
 }
 
 function ListItem({ id, label, onSelect }: ListItemProps) {
-  const { updateNote } = useNotesStore()
+  const { updateNote, deleteNote } = useNotesStore();
+  const { currentNoteId, setCurrentNoteId } = useNote();
   const [tempLabel, setTempLabel] = useState(label)
   const [isEditing, setIsEditing] = useState(false)
   const containerRef = useRef<HTMLDivElement | null>(null)
@@ -45,6 +48,14 @@ function ListItem({ id, label, onSelect }: ListItemProps) {
     setIsEditing(false)
   }
 
+  const handleDelete = () => {
+    if (currentNoteId === id) {
+      setCurrentNoteId(null)
+    }
+
+    deleteNote(id)
+  }
+
   useEffect(() => {
     if (!isEditing) return
 
@@ -70,10 +81,10 @@ function ListItem({ id, label, onSelect }: ListItemProps) {
       className={cn(
         "flex items-center gap-2 px-3 py-2 rounded-md cursor-pointer",
         "text-muted-foreground hover:bg-muted hover:text-foreground",
-        "transition-colors"
+        "transition-colors listItem"
       )}
     >
-      <FileText className="h-4 w-4 shrink-0" />
+      <FileText className="h-3.5 w-3.5" />
 
       {isEditing ? (
         <Input
@@ -84,7 +95,15 @@ function ListItem({ id, label, onSelect }: ListItemProps) {
           className="h-7 px-2 text-sm"
         />
       ) : (
+        <>
           <span className="truncate text-sm">{label}</span>
+          <div 
+              className="opacity-0 listItem-delete h-4 w-4 items-center justify-center rounded-full bg-muted-foreground p-0.5 ml-auto"
+              onClick={handleDelete}
+            >
+            <X className="h-3 w-3 text-background" />
+          </div>
+        </>
       )}
     </div>
   )

src/index.css

@@ -130,6 +130,13 @@ body {
   padding-inline: 0 !important;
 }
 
+.listItem:hover {
+  .listItem-delete {
+    transition: opacity .25s ease-out;
+    opacity: 100%;
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;