File tree context menu

Author: Sviridov Konstantin 00565358

packages/app/src/components/file-tree.test.ts

@@ -29,6 +29,15 @@ beforeAll(async () => {
   mock.module("@opencode-ai/ui/file-icon", () => ({ FileIcon: () => null }))
   mock.module("@opencode-ai/ui/icon", () => ({ Icon: () => null }))
   mock.module("@opencode-ai/ui/tooltip", () => ({ Tooltip: (props: { children?: unknown }) => props.children }))
+  mock.module("@opencode-ai/ui/context-menu", () => ({
+    ContextMenu: Object.assign((props: { children?: unknown }) => props.children, {
+      Trigger: (props: { children?: unknown }) => props.children,
+      Portal: (props: { children?: unknown }) => props.children,
+      Content: (props: { children?: unknown }) => props.children,
+      Item: (props: { children?: unknown }) => props.children,
+      ItemLabel: (props: { children?: unknown }) => props.children,
+    }),
+  }))
   const mod = await import("./file-tree")
   shouldListRoot = mod.shouldListRoot
   shouldListExpanded = mod.shouldListExpanded

packages/app/src/components/file-tree.tsx

@@ -1,6 +1,8 @@
 import { useFile } from "@/context/file"
 import { encodeFilePath } from "@/context/file/path"
+import { useLanguage } from "@/context/language"
 import { Collapsible } from "@opencode-ai/ui/collapsible"
+import { ContextMenu } from "@opencode-ai/ui/context-menu"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
 import {
@@ -13,10 +15,8 @@ import {
   splitProps,
   Switch,
   untrack,
-  type ComponentProps,
   type ParentProps,
 } from "solid-js"
-import { Dynamic } from "solid-js/web"
 import type { FileNode } from "@opencode-ai/sdk/v2"
 
 const MAX_DEPTH = 128
@@ -108,9 +108,7 @@ const withFileDragImage = (event: DragEvent) => {
 }
 
 const FileTreeNode = (
-  p: ParentProps &
-    ComponentProps<"div"> &
-    ComponentProps<"button"> & {
+  p: ParentProps & {
       node: FileNode
       level: number
       active?: string
@@ -119,8 +117,13 @@ const FileTreeNode = (
       kinds?: ReadonlyMap<string, Kind>
       marks?: Set<string>
       as?: "div" | "button"
+      type?: "button"
+      onClick?: (e: MouseEvent) => void
+      class?: string
+      classList?: { [k: string]: boolean | undefined }
     },
 ) => {
+  const language = useLanguage()
   const [local, rest] = splitProps(p, [
     "node",
     "level",
@@ -142,9 +145,18 @@ const FileTreeNode = (
     return kindTextColor(value)
   }
 
+  const handleCopyAbsolutePath = () => {
+    navigator.clipboard.writeText(local.node.absolute).catch(() => {})
+  }
+
+  const handleCopyRelativePath = () => {
+    navigator.clipboard.writeText(local.node.path).catch(() => {})
+  }
+
   return (
-    <Dynamic
-      component={local.as ?? "div"}
+    <ContextMenu modal={false} preventScroll={true}>
+      <ContextMenu.Trigger
+        as={local.as ?? "div"}
       classList={{
         "w-full min-w-0 h-6 flex items-center justify-start gap-x-1.5 rounded-md px-1.5 py-0 text-left hover:bg-surface-raised-base-hover active:bg-surface-base-active transition-colors cursor-pointer": true,
         "bg-surface-base-active": local.node.path === local.active,
@@ -186,7 +198,18 @@ const FileTreeNode = (
         }
         return <div class="shrink-0 size-1.5 mr-1.5 rounded-full" style={kindDotColor(value)} />
       })()}
-    </Dynamic>
+      </ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content>
+          <ContextMenu.Item onSelect={handleCopyAbsolutePath}>
+            <ContextMenu.ItemLabel>{language.t("filetree.contextMenu.copyPath")}</ContextMenu.ItemLabel>
+          </ContextMenu.Item>
+          <ContextMenu.Item onSelect={handleCopyRelativePath}>
+            <ContextMenu.ItemLabel>{language.t("filetree.contextMenu.copyRelativePath")}</ContextMenu.ItemLabel>
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu>
   )
 }
 

packages/app/src/i18n/ar.ts

@@ -843,4 +843,7 @@ export const dict = {
   "error.childStore.persistedProjectIconCreateFailed": "فشل إنشاء أيقونة المشروع الدائمة",
   "error.childStore.storeCreateFailed": "فشل إنشاء المخزن",
   "terminal.connectionLost.abnormalClose": "تم إغلاق WebSocket بشكل غير طبيعي: {{code}}",
+
+  "filetree.contextMenu.copyPath": "نسخ المسار",
+  "filetree.contextMenu.copyRelativePath": "نسخ المسار النسبي",
 }

packages/app/src/i18n/br.ts

@@ -856,4 +856,7 @@ export const dict = {
   "error.childStore.persistedProjectIconCreateFailed": "Falha ao criar ícone de projeto persistente",
   "error.childStore.storeCreateFailed": "Falha ao criar armazenamento",
   "terminal.connectionLost.abnormalClose": "WebSocket fechado anormalmente: {{code}}",
+
+  "filetree.contextMenu.copyPath": "Copiar caminho",
+  "filetree.contextMenu.copyRelativePath": "Copiar caminho relativo",
 }

packages/app/src/i18n/bs.ts

@@ -932,4 +932,7 @@ export const dict = {
   "error.childStore.persistedProjectIconCreateFailed": "Nije uspjelo kreiranje trajne ikone projekta",
   "error.childStore.storeCreateFailed": "Nije uspjelo kreiranje skladišta",
   "terminal.connectionLost.abnormalClose": "WebSocket zatvoren nenormalno: {{code}}",
+
+  "filetree.contextMenu.copyPath": "Kopiraj putanju",
+  "filetree.contextMenu.copyRelativePath": "Kopiraj relativnu putanju",
 }

packages/app/src/i18n/da.ts

@@ -926,4 +926,7 @@ export const dict = {
   "error.childStore.persistedProjectIconCreateFailed": "Kunne ikke oprette vedvarende projektikon",
   "error.childStore.storeCreateFailed": "Kunne ikke oprette lager",
   "terminal.connectionLost.abnormalClose": "WebSocket lukkede unormalt: {{code}}",
+
+  "filetree.contextMenu.copyPath": "Kopier sti",
+  "filetree.contextMenu.copyRelativePath": "Kopier relativ sti",
 }

packages/app/src/i18n/de.ts

@@ -868,4 +868,7 @@ export const dict = {
   "error.childStore.persistedProjectIconCreateFailed": "Dauerhaftes Projekticon konnte nicht erstellt werden",
   "error.childStore.storeCreateFailed": "Speicher konnte nicht erstellt werden",
   "terminal.connectionLost.abnormalClose": "WebSocket abnormal geschlossen: {{code}}",
+
+  "filetree.contextMenu.copyPath": "Pfad kopieren",
+  "filetree.contextMenu.copyRelativePath": "Relativen pfad kopieren",
 } satisfies Partial<Record<Keys, string>>

packages/app/src/i18n/en.ts

@@ -952,4 +952,7 @@ export const dict = {
   "workspace.reset.archived.one": "1 session will be archived.",
   "workspace.reset.archived.many": "{{count}} sessions will be archived.",
   "workspace.reset.note": "This will reset the workspace to match the default branch.",
+
+  "filetree.contextMenu.copyPath": "Copy path",
+  "filetree.contextMenu.copyRelativePath": "Copy relative path",
 }

packages/app/src/i18n/es.ts

@@ -939,4 +939,7 @@ export const dict = {
   "error.childStore.persistedProjectIconCreateFailed": "Error al crear icono de proyecto persistente",
   "error.childStore.storeCreateFailed": "Error al crear almacén",
   "terminal.connectionLost.abnormalClose": "WebSocket cerrado anormalmente: {{code}}",
+
+  "filetree.contextMenu.copyPath": "Copiar ruta",
+  "filetree.contextMenu.copyRelativePath": "Copiar ruta relativa",
 }

packages/app/src/i18n/fr.ts

@@ -867,4 +867,7 @@ export const dict = {
   "error.childStore.persistedProjectIconCreateFailed": "Échec de la création de l'icône de projet persistante",
   "error.childStore.storeCreateFailed": "Échec de la création du stockage",
   "terminal.connectionLost.abnormalClose": "WebSocket fermé anormalement : {{code}}",
+
+  "filetree.contextMenu.copyPath": "Copier le chemin",
+  "filetree.contextMenu.copyRelativePath": "Copier le chemin relatif",
 }