Merge pull request #602 from mark-when/contextMenu2

Feat: Basic file tree context menu
stackblitz-labs · Dec 15, 2024 · 25fe152 · 25fe152
2 parents b8e457e + 6eb2d84
commit 25fe152
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 33 deletions.
diff --git a/app/components/workbench/FileTree.tsx b/app/components/workbench/FileTree.tsx
@@ -2,6 +2,7 @@ import { memo, useEffect, useMemo, useState, type ReactNode } from 'react';
 import type { FileMap } from '~/lib/stores/files';
 import { classNames } from '~/utils/classNames';
 import { createScopedLogger, renderLogger } from '~/utils/logger';
+import * as ContextMenu from '@radix-ui/react-context-menu';
 
 const logger = createScopedLogger('FileTree');
 
@@ -110,6 +111,22 @@ export const FileTree = memo(
       });
     };
 
+    const onCopyPath = (fileOrFolder: FileNode | FolderNode) => {
+      try {
+        navigator.clipboard.writeText(fileOrFolder.fullPath);
+      } catch (error) {
+        logger.error(error);
+      }
+    };
+
+    const onCopyRelativePath = (fileOrFolder: FileNode | FolderNode) => {
+      try {
+        navigator.clipboard.writeText(fileOrFolder.fullPath.substring((rootFolder || '').length));
+      } catch (error) {
+        logger.error(error);
+      }
+    };
+
     return (
       <div className={classNames('text-sm', className, 'overflow-y-auto')}>
         {filteredFileList.map((fileOrFolder) => {
@@ -121,6 +138,12 @@ export const FileTree = memo(
                   selected={selectedFile === fileOrFolder.fullPath}
                   file={fileOrFolder}
                   unsavedChanges={unsavedFiles?.has(fileOrFolder.fullPath)}
+                  onCopyPath={() => {
+                    onCopyPath(fileOrFolder);
+                  }}
+                  onCopyRelativePath={() => {
+                    onCopyRelativePath(fileOrFolder);
+                  }}
                   onClick={() => {
                     onFileSelect?.(fileOrFolder.fullPath);
                   }}
@@ -134,6 +157,12 @@ export const FileTree = memo(
                   folder={fileOrFolder}
                   selected={allowFolderSelection && selectedFile === fileOrFolder.fullPath}
                   collapsed={collapsedFolders.has(fileOrFolder.fullPath)}
+                  onCopyPath={() => {
+                    onCopyPath(fileOrFolder);
+                  }}
+                  onCopyRelativePath={() => {
+                    onCopyRelativePath(fileOrFolder);
+                  }}
                   onClick={() => {
                     toggleCollapseState(fileOrFolder.fullPath);
                   }}
@@ -156,58 +185,111 @@ interface FolderProps {
   folder: FolderNode;
   collapsed: boolean;
   selected?: boolean;
+  onCopyPath: () => void;
+  onCopyRelativePath: () => void;
   onClick: () => void;
 }
 
-function Folder({ folder: { depth, name }, collapsed, selected = false, onClick }: FolderProps) {
+interface FolderContextMenuProps {
+  onCopyPath?: () => void;
+  onCopyRelativePath?: () => void;
+  children: ReactNode;
+}
+
+function ContextMenuItem({ onSelect, children }: { onSelect?: () => void; children: ReactNode }) {
   return (
-    <NodeButton
-      className={classNames('group', {
-        'bg-transparent text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive':
-          !selected,
-        'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
-      })}
-      depth={depth}
-      iconClasses={classNames({
-        'i-ph:caret-right scale-98': collapsed,
-        'i-ph:caret-down scale-98': !collapsed,
-      })}
-      onClick={onClick}
+    <ContextMenu.Item
+      onSelect={onSelect}
+      className="flex items-center gap-2 px-2 py-1.5 outline-0 text-sm text-bolt-elements-textPrimary cursor-pointer ws-nowrap text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive rounded-md"
     >
-      {name}
-    </NodeButton>
+      <span className="size-4 shrink-0"></span>
+      <span>{children}</span>
+    </ContextMenu.Item>
+  );
+}
+
+function FileContextMenu({ onCopyPath, onCopyRelativePath, children }: FolderContextMenuProps) {
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content
+          style={{ zIndex: 998 }}
+          className="border border-bolt-elements-borderColor rounded-md z-context-menu bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-2 data-[state=open]:animate-in animate-duration-100 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-98 w-56"
+        >
+          <ContextMenu.Group className="p-1 border-b-px border-solid border-bolt-elements-borderColor">
+            <ContextMenuItem onSelect={onCopyPath}>Copy path</ContextMenuItem>
+            <ContextMenuItem onSelect={onCopyRelativePath}>Copy relative path</ContextMenuItem>
+          </ContextMenu.Group>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}
+
+function Folder({ folder, collapsed, selected = false, onCopyPath, onCopyRelativePath, onClick }: FolderProps) {
+  return (
+    <FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath}>
+      <NodeButton
+        className={classNames('group', {
+          'bg-transparent text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive':
+            !selected,
+          'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
+        })}
+        depth={folder.depth}
+        iconClasses={classNames({
+          'i-ph:caret-right scale-98': collapsed,
+          'i-ph:caret-down scale-98': !collapsed,
+        })}
+        onClick={onClick}
+      >
+        {folder.name}
+      </NodeButton>
+    </FileContextMenu>
   );
 }
 
 interface FileProps {
   file: FileNode;
   selected: boolean;
   unsavedChanges?: boolean;
+  onCopyPath: () => void;
+  onCopyRelativePath: () => void;
   onClick: () => void;
 }
 
-function File({ file: { depth, name }, onClick, selected, unsavedChanges = false }: FileProps) {
+function File({
+  file: { depth, name },
+  onClick,
+  onCopyPath,
+  onCopyRelativePath,
+  selected,
+  unsavedChanges = false,
+}: FileProps) {
   return (
-    <NodeButton
-      className={classNames('group', {
-        'bg-transparent hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-item-contentDefault': !selected,
-        'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
-      })}
-      depth={depth}
-      iconClasses={classNames('i-ph:file-duotone scale-98', {
-        'group-hover:text-bolt-elements-item-contentActive': !selected,
-      })}
-      onClick={onClick}
-    >
-      <div
-        className={classNames('flex items-center', {
+    <FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath}>
+      <NodeButton
+        className={classNames('group', {
+          'bg-transparent hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-item-contentDefault':
+            !selected,
+          'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
+        })}
+        depth={depth}
+        iconClasses={classNames('i-ph:file-duotone scale-98', {
           'group-hover:text-bolt-elements-item-contentActive': !selected,
         })}
+        onClick={onClick}
       >
-        <div className="flex-1 truncate pr-2">{name}</div>
-        {unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />}
-      </div>
-    </NodeButton>
+        <div
+          className={classNames('flex items-center', {
+            'group-hover:text-bolt-elements-item-contentActive': !selected,
+          })}
+        >
+          <div className="flex-1 truncate pr-2">{name}</div>
+          {unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />}
+        </div>
+      </NodeButton>
+    </FileContextMenu>
   );
 }
 

diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "@octokit/rest": "^21.0.2",
     "@octokit/types": "^13.6.2",
     "@openrouter/ai-sdk-provider": "^0.0.5",
+    "@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-separator": "^1.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml