Add Blocknote editor, Add theme switching

src/components/AppSidebar.tsx

@@ -9,30 +9,21 @@ import ListItem from "./ListItem"
 
 import { useNote } from "../contexts/ActiveNoteContext"
 import { useNotesStore } from "../contexts/NotesStore"
-import { useState } from "react"
+import { useTheme } from "../contexts/ThemeContext"
 
 function AppSidebar() {
   const { notes, createNote } = useNotesStore()
   const { setCurrentNote } = useNote()
-  const [isDark, setIsDark] = useState(
-    () => document.documentElement.classList.contains("dark")
-  )
-
-  const toggleTheme = () => {
-    const html = document.documentElement
-    html.classList.toggle("dark")
-    setIsDark(html.classList.contains("dark"))
-  }
+  const { theme, toggleTheme } = useTheme()
 
   return (
     <Sidebar>
 
-
       <SidebarHeader className="justify-between px-4 py-3 border-b-1 gap-3.5">
         <div className="flex items-center justify-between">
           <span className="font-medium">Notes</span>
           <Button variant="ghost" size="sm" onClick={toggleTheme} className="text-muted-foreground">
-            {isDark ? <Sun /> : <Moon />}
+            {theme === "dark" ? <Sun /> : <Moon />}
           </Button>
         </div>
         <Input placeholder="Search Notes" className="shadow-none bg-background" />