From 772a173189329ed52499dcb6565c746a1ee72c4a Mon Sep 17 00:00:00 2001
From: Cedric van Putten <github@cedric.dev>
Date: Sun, 25 Aug 2024 22:52:10 +0200
Subject: [PATCH] feature(webui): allow copying absolute and relative import
 paths

---
 webui/src/components/ModuleReferenceList.tsx | 46 +++++++++++---------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/webui/src/components/ModuleReferenceList.tsx b/webui/src/components/ModuleReferenceList.tsx
index ece1d59..d4ca125 100644
--- a/webui/src/components/ModuleReferenceList.tsx
+++ b/webui/src/components/ModuleReferenceList.tsx
@@ -5,6 +5,7 @@ import PackageIcon from 'lucide-react/dist/esm/icons/box';
 import FileIcon from 'lucide-react/dist/esm/icons/file';
 import { PropsWithChildren } from 'react';
 
+import { FilePathMenu } from '~/components/FilePathMenu';
 import type { AtlasModuleRef, PartialAtlasBundle } from '~core/data/types';
 
 type ModuleReferenceListProps = PropsWithChildren<{
@@ -37,27 +38,32 @@ function ModuleImportLink(props: ModuleImportLinkProps) {
   const Icon = props.reference.package ? PackageIcon : FileIcon;
 
   return (
-    <Link
-      asChild
-      href={{
-        pathname: '/(atlas)/[bundle]/modules/[path]',
-        params: {
-          bundle: props.bundle.id,
-          path: props.reference.relativePath,
-        },
-      }}
+    <FilePathMenu
+      absolute={{ path: props.reference.absolutePath, label: 'Copy absolute import path' }}
+      relative={{ path: props.reference.relativePath, label: 'Copy relative import path' }}
     >
-      <a
-        className="px-3 py-2 text-2xs border border-secondary rounded-md bg-default text-default inline-flex flex-row items-center group hover:bg-subtle transition-colors"
-        aria-label={props.reference.absolutePath}
-        title={props.reference.absolutePath}
+      <Link
+        asChild
+        href={{
+          pathname: '/(atlas)/[bundle]/modules/[path]',
+          params: {
+            bundle: props.bundle.id,
+            path: props.reference.relativePath,
+          },
+        }}
       >
-        <Icon size={14} />
-        <span className="mx-2 whitespace-nowrap overflow-hidden text-ellipsis group-hover:underline underline-offset-2">
-          {props.reference.relativePath}
-        </span>
-        <span className="ml-2">→</span>
-      </a>
-    </Link>
+        <a
+          className="px-3 py-2 text-2xs border border-secondary rounded-md bg-default text-default inline-flex flex-row items-center group hover:bg-subtle transition-colors"
+          aria-label={props.reference.absolutePath}
+          title={props.reference.absolutePath}
+        >
+          <Icon size={14} />
+          <span className="mx-2 whitespace-nowrap overflow-hidden text-ellipsis group-hover:underline underline-offset-2">
+            {props.reference.relativePath}
+          </span>
+          <span className="ml-2">→</span>
+        </a>
+      </Link>
+    </FilePathMenu>
   );
 }