From e71b481dbb7b0a1fd79fa294a5ac73449bb1966d Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 28 Feb 2026 14:06:00 +0100
Subject: [PATCH] Context menu sidebar

---
 src/components/sidebar/AppSidebar.tsx | 12 +++-
 src/components/sidebar/Entity.tsx     | 99 ++++++++++++++-------------
 2 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/src/components/sidebar/AppSidebar.tsx b/src/components/sidebar/AppSidebar.tsx
index 2caa1b1..0b77f91 100644
--- a/src/components/sidebar/AppSidebar.tsx
+++ b/src/components/sidebar/AppSidebar.tsx
@@ -164,10 +164,10 @@ export default function AppSidebar({
             <SidebarMenuItem>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <button className="flex w-full items-center justify-between px-2 py-1 text-sm">
+                  <Button className="w-full" variant='ghost'>
                     {workspace.name}
                     <ChevronDown className="ml-auto h-4 w-4 opacity-60" />
-                  </button>
+                  </Button>
                 </DropdownMenuTrigger>
 
                 <DropdownMenuContent
@@ -236,6 +236,14 @@ export default function AppSidebar({
                   >
                     Create workspace
                   </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={() => {
+                      localStorage.removeItem(workspace.id);
+                    }}
+                    variant="destructive"
+                  >
+                    Delete workspace
+                  </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
             </SidebarMenuItem>
diff --git a/src/components/sidebar/Entity.tsx b/src/components/sidebar/Entity.tsx
index cfc1993..0cc5ba5 100644
--- a/src/components/sidebar/Entity.tsx
+++ b/src/components/sidebar/Entity.tsx
@@ -30,6 +30,13 @@ import {
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "../ui/context-menu";
 
 type Props = {
   node: LayoutNode;
@@ -58,7 +65,6 @@ export default function EntitySwitch({
   removeNode,
   renameGroup,
 }: Props) {
-  const [menuOpen, setMenuOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogValue, setDialogValue] = useState("");
   const [dialogMode, setDialogMode] = useState<
@@ -74,7 +80,6 @@ export default function EntitySwitch({
       setDialogValue(initial);
     }
     setDialogOpen(true);
-    setMenuOpen(false);
   };
 
   const handleDialogSubmit = () => {
@@ -100,32 +105,30 @@ export default function EntitySwitch({
           <SidebarGroup>
             <SidebarGroupLabel asChild>
               <div className="flex items-center justify-between w-full">
-                <SidebarMenuButton asChild>
-                  <CollapsibleTrigger className="flex w-full items-center">
-                    {node.name}
-                    <ChevronDown className="ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-180" />
-                  </CollapsibleTrigger>
-                </SidebarMenuButton>
-                <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
-                  <DropdownMenuTrigger asChild>
-                    <button className="p-1 hover:bg-accent rounded">
-                      <MoreHorizontal className="h-4 w-4" />
-                    </button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent>
-                    <DropdownMenuItem onSelect={() => openDialog("add-item")}>
+                <ContextMenu>
+                  <ContextMenuTrigger asChild>
+                    <SidebarMenuButton asChild>
+                      <CollapsibleTrigger className="flex w-full items-center">
+                        {node.name}
+                        <ChevronDown className="ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                      </CollapsibleTrigger>
+                    </SidebarMenuButton>
+                  </ContextMenuTrigger>
+                  <ContextMenuContent>
+                    <ContextMenuItem onSelect={() => openDialog("add-item")}>
                       Add list
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onSelect={() => openDialog("add-group")}>
+                    </ContextMenuItem>
+                    <ContextMenuItem onSelect={() => openDialog("add-group")}>
                       Add group
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem
+                    </ContextMenuItem>
+                    <ContextMenuSeparator />
+                    <ContextMenuItem
                       onSelect={() => openDialog("rename-group", node.name)}
                     >
                       Rename
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
+                    </ContextMenuItem>
+                    <ContextMenuItem
+                      variant="destructive"
                       onSelect={() => {
                         if (
                           window.confirm("Delete this group and its children?")
@@ -135,9 +138,9 @@ export default function EntitySwitch({
                       }}
                     >
                       Delete
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
+                    </ContextMenuItem>
+                  </ContextMenuContent>
+                </ContextMenu>
               </div>
             </SidebarGroupLabel>
 
@@ -209,29 +212,27 @@ export default function EntitySwitch({
   return (
     <SidebarMenuItem>
       <div className="flex items-center justify-between w-full">
-        <SidebarMenuButton
-          onClick={() =>
-            setRoute({
-              workspace: workspace.id,
-              entity: node.entityId,
-            })
-          }
-        >
-          {workspaceEntity.name}
-        </SidebarMenuButton>
-        <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
-          <DropdownMenuTrigger asChild>
-            <button className="p-1 hover:bg-accent rounded">
-              <MoreHorizontal className="h-4 w-4" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem
+        <ContextMenu>
+          <ContextMenuTrigger asChild>
+            <SidebarMenuButton
+              onClick={() =>
+                setRoute({
+                  workspace: workspace.id,
+                  entity: node.entityId,
+                })
+              }
+            >
+              {workspaceEntity.name}
+            </SidebarMenuButton>
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuItem
               onSelect={() => openDialog("rename-item", workspaceEntity.name)}
             >
               Rename
-            </DropdownMenuItem>
-            <DropdownMenuItem
+            </ContextMenuItem>
+            <ContextMenuItem
+              variant="destructive"
               onSelect={() => {
                 if (window.confirm("Delete this list?")) {
                   deleteEntity(node.entityId);
@@ -239,9 +240,9 @@ export default function EntitySwitch({
               }}
             >
               Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
       </div>
     </SidebarMenuItem>
   );