Migrate sidebar to use Tailwind/Shadcn

2026-01-21 11:36:41 +00:00
parent 4fc155af0a
commit 56a3105913
19 changed files with 2076 additions and 187 deletions
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@@ -0,0 +1,87 @@
+import { Check, Plus, Sun, Moon } from "lucide-react"
+
+import { Sidebar, SidebarContent, SidebarHeader, SidebarFooter, SidebarTrigger } from "@/components/ui/sidebar"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Input } from "@/components/ui/input"
+
+import ListItem from "./ListItem"
+
+import { useNote } from "../contexts/ActiveNoteContext"
+import { useNotesStore } from "../contexts/NotesStore"
+import { useState } from "react"
+
+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"))
+  }
+
+  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 />}
+          </Button>
+        </div>
+        <Input placeholder="Search Notes" className="shadow-none bg-background" />
+      </SidebarHeader>
+
+      <SidebarContent>
+        <ScrollArea className="h-full px-2 py-2">
+          <div className="space-y-1 py-2">
+            {notes.map((note) => (
+              <ListItem
+                key={note.id}
+                id={note.id}
+                label={note.title}
+                onSelect={() => setCurrentNote(note)}
+              />
+            ))}
+          </div>
+
+          <Button
+            variant="secondary"
+            className="w-full justify-start gap-2 mb-2"
+            onClick={createNote}
+          >
+            <Plus />
+            New Note
+          </Button>
+        </ScrollArea>
+      </SidebarContent>
+
+      <SidebarFooter className="p-2 border-t-1">
+        <div className="flex items-center gap-3 rounded-md px-2 py-1.5">
+          <div className="flex flex-col leading-tight gap-2">
+            <span className="text-xs text-muted-foreground">
+              {notes.length} note{notes.length !== 1 && "s"}
+            </span>
+            <div className="flex flex-row gap-2">
+              <div className="flex h-4 w-4 items-center justify-center rounded-full bg-foreground">
+                <Check className="h-2 w-2 text-background" />
+              </div>
+              <span className="text-sm font-medium text-foreground">
+                Notes synced
+              </span>
+            </div>
+          </div>
+        </div>
+      </SidebarFooter>
+
+    </Sidebar>
+  )
+}
+
+export default AppSidebar