Sidebar elements editor

2026-02-28 02:41:17 +01:00
parent 7d4a087c10
commit b543988f02
4 changed files with 501 additions and 40 deletions
@@ -10,8 +10,27 @@ import {
  SidebarMenuItem,
 } from "../ui/sidebar";
 import { Collapsible, CollapsibleContent } from "../ui/collapsible";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, MoreHorizontal } from "lucide-react";
 import { Route, Workspace, LayoutNode } from "@/lib/types";
+import { useWorkspace } from "@/hooks/workspace";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";

 type Props = {
  node: LayoutNode;
@@ -20,36 +39,151 @@ type Props = {
 };

 export default function EntitySwitch({ node, workspace, setRoute }: Props) {
+  const {
+    renameEntity,
+    deleteEntity,
+    addEntity,
+    addGroup,
+    removeNode,
+    renameGroup,
+  } = useWorkspace();
+
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogValue, setDialogValue] = useState("");
+  const [dialogMode, setDialogMode] = useState<
+    "rename-group" | "rename-item" | "add-item" | "add-group"
+  >("rename-item");
+
+  const openDialog = (mode: typeof dialogMode, initial = "") => {
+    setDialogMode(mode);
+    // supply default for add-item
+    if (mode === "add-item") {
+      setDialogValue("New list");
+    } else {
+      setDialogValue(initial);
+    }
+    setDialogOpen(true);
+    setMenuOpen(false);
+  };
+
+  const handleDialogSubmit = () => {
+    if (dialogMode === "rename-group" && node.type === "group") {
+      renameGroup(node.id, dialogValue);
+    } else if (dialogMode === "rename-item" && node.type === "item") {
+      renameEntity(node.entityId, dialogValue);
+    } else if (dialogMode === "add-item") {
+      const parentId = node.type === "group" ? node.id : null;
+      const id = addEntity("todo", parentId);
+      // optionally could rename newly created entity name
+      if (id && dialogValue) {
+        renameEntity(id, dialogValue);
+      }
+    } else if (dialogMode === "add-group") {
+      const parentId = node.type === "group" ? node.id : null;
+      addGroup(dialogValue || "New group", parentId);
+    }
+    setDialogOpen(false);
+  };
+
  // ---- GROUP ----
  if (node.type === "group") {
    return (
-      <Collapsible defaultOpen className="group/collapsible">
-        <SidebarGroup>
-          <SidebarGroupLabel 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>
-          </SidebarGroupLabel>
+      <>
+        <Collapsible defaultOpen className="group/collapsible">
+          <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")}>
+                      Add list
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onSelect={() => openDialog("add-group")}>
+                      Add group
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      onSelect={() => openDialog("rename-group", node.name)}
+                    >
+                      Rename
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onSelect={() => {
+                        if (
+                          window.confirm("Delete this group and its children?")
+                        ) {
+                          removeNode(node.id);
+                        }
+                      }}
+                    >
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </SidebarGroupLabel>

-          <CollapsibleContent>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {node.children.map((child) => (
-                  <EntitySwitch
-                    key={child.type === "group" ? child.id : child.entityId}
-                    node={child}
-                    workspace={workspace}
-                    setRoute={setRoute}
-                  />
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </CollapsibleContent>
-        </SidebarGroup>
-      </Collapsible>
+            <CollapsibleContent>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {node.children.map((child) => (
+                    <EntitySwitch
+                      key={child.type === "group" ? child.id : child.entityId}
+                      node={child}
+                      workspace={workspace}
+                      setRoute={setRoute}
+                    />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </CollapsibleContent>
+          </SidebarGroup>
+        </Collapsible>
+
+        {/* dialog for add/rename */}
+        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>
+                {dialogMode.startsWith("rename")
+                  ? "Rename"
+                  : dialogMode === "add-item"
+                    ? "Add new list"
+                    : "Add new group"}
+              </DialogTitle>
+              <DialogDescription>
+                {dialogMode === "add-item" &&
+                  "A default todo list will be created."}
+                {dialogMode === "add-group" &&
+                  "Enter the name for the new group."}
+              </DialogDescription>
+            </DialogHeader>
+            <Input
+              value={dialogValue}
+              onChange={(e) => setDialogValue(e.target.value)}
+              className="w-full"
+            />
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setDialogOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={handleDialogSubmit}>Save</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </>
    );
  }

@@ -62,16 +196,41 @@ export default function EntitySwitch({ node, workspace, setRoute }: Props) {

  return (
    <SidebarMenuItem>
-      <SidebarMenuButton
-        onClick={() =>
-          setRoute({
-            workspace: workspace.id,
-            entity: node.entityId,
-          })
-        }
-      >
-        {workspaceEntity.name}
-      </SidebarMenuButton>
+      <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
+              onSelect={() => openDialog("rename-item", workspaceEntity.name)}
+            >
+              Rename
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() => {
+                if (window.confirm("Delete this list?")) {
+                  deleteEntity(node.entityId);
+                }
+              }}
+            >
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
    </SidebarMenuItem>
  );
 }