Frontend improvements

Reviewed-on: #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, Pencil, Trash2, MoreHorizontal } from "lucide-react"
 import {
   Sidebar,
   SidebarContent,
@@ -9,9 +9,22 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar"
-import { Link, useLocation } from "react-router-dom"
+import { Link, useLocation, useSearchParams, useNavigate } from "react-router-dom"
 import { SettingsDialog } from "@/components/settings-dialog"
 import { useState } from "react"
+import { useTags, useDeleteTag, useRenameTag } 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"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { toast } from "sonner"
 
 const items = [
   {
@@ -26,9 +39,119 @@ const items = [
   },
 ]
 
+interface TagItemProps {
+  tag: { id: string; name: string };
+  isActive: boolean;
+}
+
+function TagItem({ tag, isActive }: TagItemProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editName, setEditName] = useState(tag.name);
+  const { mutate: deleteTag } = useDeleteTag();
+  const { mutate: renameTag } = useRenameTag();
+  const navigate = useNavigate();
+
+  const handleDelete = () => {
+    if (confirm(`Delete tag "${tag.name}"? Notes will keep their content.`)) {
+      deleteTag(tag.id, {
+        onSuccess: () => {
+          toast.success("Tag deleted");
+          navigate("/");
+        },
+        onError: (err: any) => toast.error(err.message)
+      });
+    }
+  };
+
+  const handleRename = () => {
+    if (editName.trim() && editName.trim() !== tag.name) {
+      renameTag({ id: tag.id, name: editName.trim() }, {
+        onSuccess: () => {
+          toast.success("Tag renamed");
+          setIsEditing(false);
+        },
+        onError: (err: any) => {
+          toast.error(err.message);
+          setEditName(tag.name);
+        }
+      });
+    } else {
+      setIsEditing(false);
+      setEditName(tag.name);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleRename();
+    } else if (e.key === "Escape") {
+      setIsEditing(false);
+      setEditName(tag.name);
+    }
+  };
+
+  if (isEditing) {
+    return (
+      <SidebarMenuItem>
+        <Input
+          value={editName}
+          onChange={(e) => setEditName(e.target.value)}
+          onBlur={handleRename}
+          onKeyDown={handleKeyDown}
+          autoFocus
+          className="h-7 text-xs"
+        />
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <SidebarMenuItem className="group/tag">
+      <SidebarMenuButton
+        asChild
+        isActive={isActive}
+        tooltip={tag.name}
+        className="pr-0"
+      >
+        <Link to={`/?tag=${encodeURIComponent(tag.name)}`} className="flex items-center justify-between w-full">
+          <Badge variant="secondary" className="text-xs px-1.5 py-0">
+            {tag.name}
+          </Badge>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild onClick={(e) => e.preventDefault()}>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 opacity-0 group-hover/tag:opacity-100 transition-opacity"
+              >
+                <MoreHorizontal className="h-3.5 w-3.5" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-32">
+              <DropdownMenuItem onClick={(e) => { e.preventDefault(); setIsEditing(true); }}>
+                <Pencil className="mr-2 h-3.5 w-3.5" />
+                Rename
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={(e) => { e.preventDefault(); handleDelete(); }} className="text-destructive focus:text-destructive">
+                <Trash2 className="mr-2 h-3.5 w-3.5" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}
+
 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 +163,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,9 +181,46 @@ 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 }) => (
+                          <TagItem
+                            key={tag.id}
+                            tag={tag}
+                            isActive={activeTag === tag.name}
+                          />
+                        ))
+                      ) : (
+                        <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 />
     </>
   )
 }
+