improvements #1

k-notes-frontend/src/components/app-sidebar.tsx

@@ -1,4 +1,4 @@
-import { Home, Archive, Settings } from "lucide-react"
+import { Home, Archive, Settings, Tag, ChevronRight } from "lucide-react"
 import {
   Sidebar,
   SidebarContent,
@@ -9,9 +9,13 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar"
-import { Link, useLocation } from "react-router-dom"
+import { Link, useLocation, useSearchParams } from "react-router-dom"
 import { SettingsDialog } from "@/components/settings-dialog"
 import { useState } from "react"
+import { useTags } from "@/hooks/use-notes"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Badge } from "@/components/ui/badge"
 
 const items = [
   {
@@ -28,7 +32,12 @@ const items = [
 
 export function AppSidebar() {
   const location = useLocation();
+  const [searchParams] = useSearchParams();
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [tagsOpen, setTagsOpen] = useState(true);
+
+  const { data: tags } = useTags();
+  const activeTag = searchParams.get("tag");
 
   return (
     <>
@@ -40,7 +49,7 @@ export function AppSidebar() {
               <SidebarMenu>
                 {items.map((item) => (
                   <SidebarMenuItem key={item.title}>
-                    <SidebarMenuButton asChild isActive={location.pathname === item.url} tooltip={item.title}>
+                    <SidebarMenuButton asChild isActive={location.pathname === item.url && !activeTag} tooltip={item.title}>
                       <Link to={item.url}>
                         <item.icon />
                         <span>{item.title}</span>
@@ -58,6 +67,50 @@ export function AppSidebar() {
               </SidebarMenu>
             </SidebarGroupContent>
           </SidebarGroup>
+
+          {/* Tag Browser Section */}
+          <SidebarGroup>
+            <Collapsible open={tagsOpen} onOpenChange={setTagsOpen}>
+              <SidebarGroupLabel asChild>
+                <CollapsibleTrigger className="flex items-center justify-between w-full cursor-pointer group/collapsible">
+                  <div className="flex items-center gap-1.5">
+                    <Tag className="h-3.5 w-3.5" />
+                    <span>Tags</span>
+                  </div>
+                  <ChevronRight className="h-3.5 w-3.5 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <ScrollArea className="max-h-48">
+                    <SidebarMenu>
+                      {tags && tags.length > 0 ? (
+                        tags.map((tag: { id: string; name: string }) => (
+                          <SidebarMenuItem key={tag.id}>
+                            <SidebarMenuButton
+                              asChild
+                              isActive={activeTag === tag.name}
+                              tooltip={tag.name}
+                            >
+                              <Link to={`/?tag=${encodeURIComponent(tag.name)}`}>
+                                <Badge variant="secondary" className="text-xs px-1.5 py-0">
+                                  {tag.name}
+                                </Badge>
+                              </Link>
+                            </SidebarMenuButton>
+                          </SidebarMenuItem>
+                        ))
+                      ) : (
+                        <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                          No tags yet
+                        </div>
+                      )}
+                    </SidebarMenu>
+                  </ScrollArea>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </Collapsible>
+          </SidebarGroup>
         </SidebarContent>
       </Sidebar>
       <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} dataManagementEnabled />