Implement file dialog and context menu

2025-12-23 23:19:29 +01:00 · 2024-10-24 00:10:51 +02:00
parent 789e8e356f
commit d75b3c53ee
8 changed files with 397 additions and 20 deletions
--- a/desktop/package-lock.json
+++ b/desktop/package-lock.json
@@ -13,6 +13,7 @@
        "@radix-ui/react-alert-dialog": "^1.1.2",
        "@radix-ui/react-checkbox": "^1.1.2",
        "@radix-ui/react-collapsible": "^1.1.1",
+        "@radix-ui/react-context-menu": "^2.2.2",
        "@radix-ui/react-dialog": "^1.1.2",
        "@radix-ui/react-dropdown-menu": "^2.1.2",
        "@radix-ui/react-hover-card": "^1.1.2",
@@ -1895,6 +1896,49 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.2.tgz",
+      "integrity": "sha512-99EatSTpW+hRYHt7m8wdDlLtkmTovEe8Z/hnxUPV+SKuuNL5HWNhQI4QSdjZqNSgXHay2z4M3Dym73j9p2Gx5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-menu": "2.1.2",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-dialog": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -56,6 +56,7 @@
    "@radix-ui/react-alert-dialog": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.1.2",
    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-context-menu": "^2.2.2",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-hover-card": "^1.1.2",
--- a/desktop/src/renderer/components/files/file-context-menu.tsx
+++ b/desktop/src/renderer/components/files/file-context-menu.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { FileDeleteDialog } from '@/renderer/components/files/file-delete-dialog';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from '@/renderer/components/ui/context-menu';
+import { Icon } from '@/renderer/components/ui/icon';
+import { useWorkspace } from '@/renderer/contexts/workspace';
+
+interface FileContextMenuProps {
+  id: string;
+  children: React.ReactNode;
+}
+
+export const FileContextMenu = ({ id, children }: FileContextMenuProps) => {
+  const workspace = useWorkspace();
+  const [openDelete, setOpenDelete] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <ContextMenu>
+        <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+        <ContextMenuContent className="w-64">
+          <ContextMenuItem
+            onSelect={() => {
+              workspace.openModal(id);
+            }}
+            className="pl-2"
+          >
+            <ContextMenuShortcut className="ml-0">
+              <Icon name="folder-line" className="mr-2 h-4 w-4" />
+            </ContextMenuShortcut>
+            Open
+          </ContextMenuItem>
+          <ContextMenuItem
+            onClick={() => setOpenDelete(true)}
+            className="flex items-center gap-x-2 pl-2 text-red-500"
+          >
+            <ContextMenuShortcut className="ml-0">
+              <Icon name="delete-bin-line" className="h-4 w-4 text-red-500" />
+            </ContextMenuShortcut>
+            <span className="text-red-500">Delete</span>
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+      <FileDeleteDialog
+        id={id}
+        open={openDelete}
+        onOpenChange={setOpenDelete}
+      />
+    </React.Fragment>
+  );
+};
--- a/desktop/src/renderer/components/files/file-delete-dialog.tsx
+++ b/desktop/src/renderer/components/files/file-delete-dialog.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/renderer/components/ui/alert-dialog';
+import { Button } from '@/renderer/components/ui/button';
+import { useMutation } from '@/renderer/hooks/use-mutation';
+import { useWorkspace } from '@/renderer/contexts/workspace';
+
+interface FileDeleteDialogProps {
+  id: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const FileDeleteDialog = ({
+  id,
+  open,
+  onOpenChange,
+}: FileDeleteDialogProps) => {
+  const workspace = useWorkspace();
+  const { mutate, isPending } = useMutation();
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Are you sure you want delete this file?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This file will no longer be accessible
+            and all data in the file will be lost.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <Button
+            variant="destructive"
+            disabled={isPending}
+            onClick={() => {
+              mutate({
+                input: {
+                  type: 'node_delete',
+                  nodeId: id,
+                  userId: workspace.userId,
+                },
+                onSuccess() {
+                  onOpenChange(false);
+                },
+              });
+            }}
+          >
+            Delete
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
--- a/desktop/src/renderer/components/folders/folder-files.tsx
+++ b/desktop/src/renderer/components/folders/folder-files.tsx
@@ -55,7 +55,9 @@ export const FolderFiles = ({ id, name, layout }: FolderFilesProps) => {
        id,
        name,
        files,
-        onClick: () => {},
+        onClick: () => {
+          console.log('onClick');
+        },
        onDoubleClick: (_, id) => {
          const idType = getIdType(id);

--- a/desktop/src/renderer/components/folders/grids/grid-file.tsx
+++ b/desktop/src/renderer/components/folders/grids/grid-file.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { FileNode } from '@/types/files';
 import { FileThumbnail } from '@/renderer/components/files/file-thumbnail';
+import { FileContextMenu } from '@/renderer/components/files/file-context-menu';

 interface GridFileProps {
  file: FileNode;
@@ -8,6 +9,7 @@ interface GridFileProps {

 export const GridFile = ({ file }: GridFileProps) => {
  return (
+    <FileContextMenu id={file.id}>
      <React.Fragment>
        <div className="flex w-full justify-center">
          <FileThumbnail
@@ -26,5 +28,6 @@ export const GridFile = ({ file }: GridFileProps) => {
          {file.name}
        </p>
      </React.Fragment>
+    </FileContextMenu>
  );
 };
--- a/desktop/src/renderer/components/folders/grids/grid-item.tsx
+++ b/desktop/src/renderer/components/folders/grids/grid-item.tsx
@@ -4,7 +4,11 @@ import { cn } from '@/lib/utils';
 import { useFolder } from '@/renderer/contexts/folder';
 import { GridFile } from '@/renderer/components/folders/grids/grid-file';

-export const GridItem = ({ file }: { file: FileNode }) => {
+interface GridItemProps {
+  file: FileNode;
+}
+
+export const GridItem = ({ file }: GridItemProps) => {
  const folder = useFolder();

  const ref = React.useRef<HTMLDivElement>(null);
--- a/desktop/src/renderer/components/ui/context-menu.tsx
+++ b/desktop/src/renderer/components/ui/context-menu.tsx
@@ -0,0 +1,202 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}