improved copy context menu

Herobread · Dec 2, 2024 · d858831 · d858831
1 parent a8e0f1a
commit d858831
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 5 deletions.
diff --git a/src/features/quickLinks/components/quickLink/QuickLinkContextMenuContent.tsx b/src/features/quickLinks/components/quickLink/QuickLinkContextMenuContent.tsx
@@ -64,7 +64,7 @@ export const QuickLinkContextMenuContent = forwardRef<
             <ContextMenuItem onSelect={handleEditQuickLink}>
                 <Edit2Icon className="h-4 w-4" /> Edit
             </ContextMenuItem>
-            <CopyTextMenuItem name="URL" textToCopy={quickLink.href} />
+            <CopyTextMenuItem name="Copy URL" textToCopy={quickLink.href} />
             <ContextMenuItem
                 disabled={isLast}
                 onSelect={async () => {

diff --git a/src/features/shared/contextMenuItems/CopyTextMenuItem.tsx b/src/features/shared/contextMenuItems/CopyTextMenuItem.tsx
@@ -1,13 +1,16 @@
 import { ContextMenuItem } from "@src/components/ui/context-menu"
 import { useToast } from "@src/components/ui/use-toast"
 import { CopyIcon } from "lucide-react"
+import React from "react"
 
 interface CopyTextMenuItemProps {
+    icon?: React.ReactNode
     textToCopy: string
     name: string
 }
 
 export default function CopyTextMenuItem({
+    icon,
     textToCopy,
     name,
 }: CopyTextMenuItemProps) {
@@ -24,7 +27,8 @@ export default function CopyTextMenuItem({
 
     return (
         <ContextMenuItem onSelect={handleSelect}>
-            <CopyIcon className="h-4 w-4" /> Copy {name}
+            {icon || <CopyIcon className="h-4 w-4" />}
+            {name}
         </ContextMenuItem>
     )
 }
diff --git a/src/features/table/fileCard/contextMenu/CopyMenuSub.tsx b/src/features/table/fileCard/contextMenu/CopyMenuSub.tsx
@@ -0,0 +1,38 @@
+import {
+    ContextMenuSub,
+    ContextMenuSubContent,
+    ContextMenuSubTrigger,
+} from "@src/components/ui/context-menu"
+import { FullFileLink } from "@src/features/parser"
+import CopyTextMenuItem from "@src/features/shared/contextMenuItems/CopyTextMenuItem"
+import { CopyIcon, FileTextIcon, LinkIcon, TerminalIcon } from "lucide-react"
+
+export function CopyMenuSub({ fileLink }: { fileLink: FullFileLink }) {
+    return (
+        <ContextMenuSub>
+            <ContextMenuSubTrigger>
+                <CopyIcon className="h-4 w-4" /> Copy
+            </ContextMenuSubTrigger>
+            <ContextMenuSubContent className="max-h-[300px] w-48 overflow-auto">
+                <CopyTextMenuItem
+                    icon={<LinkIcon className="h-4 w-4" />}
+                    name="URL"
+                    textToCopy={fileLink.href}
+                />
+                <CopyTextMenuItem
+                    icon={<FileTextIcon className="h-4 w-4" />}
+                    name="Name"
+                    textToCopy={fileLink.fullName}
+                />
+                <CopyTextMenuItem
+                    icon={<TerminalIcon className="h-4 w-4" />}
+                    name="Path"
+                    textToCopy={
+                        "/cs/studres/_this_session/" +
+                        fileLink.urlSegments.join("/")
+                    }
+                />
+            </ContextMenuSubContent>
+        </ContextMenuSub>
+    )
+}
diff --git a/src/features/table/fileCard/contextMenu/FileCardContextMenu.tsx b/src/features/table/fileCard/contextMenu/FileCardContextMenu.tsx
@@ -10,9 +10,9 @@ import {
 } from "@src/features/files"
 import { FullFileLink } from "@src/features/parser"
 import useSmoothRouter from "@src/features/router/useSmoothRouter"
-import CopyTextMenuItem from "@src/features/shared/contextMenuItems/CopyTextMenuItem"
 import { AddNoteContextMenuItem } from "@src/features/table/fileCard/contextMenu/AddNoteContextMenuItem"
 import { AddQuickLinkMenuItem } from "@src/features/table/fileCard/contextMenu/AddQuickLinkMenuItem"
+import { CopyMenuSub } from "@src/features/table/fileCard/contextMenu/CopyMenuSub"
 import DownloadUsingScpContextMenuItem from "@src/features/table/fileCard/contextMenu/DownloadUsingScpContextMenuItem"
 import { FolderIcon, FolderRootIcon } from "lucide-react"
 import { forwardRef } from "react"
@@ -62,8 +62,8 @@ const FileCardContextMenuContent = forwardRef<
 
             <AddQuickLinkMenuItem href={fileLink.href} />
             <UpdatesMenuItem fileLink={fileLink} />
-            <CopyTextMenuItem name="URL" textToCopy={fileLink.href} />
-            <CopyTextMenuItem name="file name" textToCopy={fileLink.fullName} />
+
+            <CopyMenuSub fileLink={fileLink} />
             <DownloadFileMenuItem
                 fileKey={fileLink.fileKey}
                 href={fileLink.href}