feat: native entry context menu

src/renderer/src/components/entry-column/context-menu.tsx

@@ -1,44 +0,0 @@
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "@renderer/components/ui/context-menu"
-import { useEntryActions } from "@renderer/hooks/useEntryActions"
-import { EntriesResponse } from "@renderer/lib/types"
-
-export function EntryContextMenu({
-  entry,
-  view,
-  children,
-}: {
-  entry: EntriesResponse[number]
-  view?: number
-  children: React.ReactNode
-}) {
-  if (!entry?.url || view === undefined) return children
-
-  const { execAction, items } = useEntryActions({
-    url: entry.url,
-    images: entry.images,
-    view,
-  })
-
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger className="w-full">{children}</ContextMenuTrigger>
-      <ContextMenuContent onClick={(e) => e.stopPropagation()}>
-        {items
-          .filter((item) => !item.disabled)
-          .map((item) => (
-            <ContextMenuItem
-              key={item.name}
-              onClick={() => execAction(item.action)}
-            >
-              {item.name}
-            </ContextMenuItem>
-          ))}
-      </ContextMenuContent>
-    </ContextMenu>
-  )
-}

src/renderer/src/components/entry-column/index.tsx

@@ -7,7 +7,8 @@ import { SocialMediaItem } from "./social-media-item"
 import { PictureItem } from "./picture-item"
 import { VideoItem } from "./video-item"
 import { NotificationItem } from "./notification-item"
-import { EntryContextMenu } from "./context-menu"
+import { showNativeMenu } from "@renderer/lib/native-menu"
+import { EntryItemWrapper } from "./item-wrapper"
 
 const gridMode = [2, 3]
 
@@ -69,21 +70,15 @@ export function EntryColumn({
             )}
           >
             {page.data?.map((entry) => (
-              <div
+              <EntryItemWrapper
                 key={entry.id}
-                className={cn(
-                  "rounded-md transition-colors",
-                  activedEntry?.id === entry.id && "bg-[#DEDDDC]",
-                )}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  setActivedEntry(entry)
-                }}
+                entry={entry}
+                activedEntry={activedEntry}
+                setActivedEntry={setActivedEntry}
+                view={activedList?.view}
               >
-                <EntryContextMenu entry={entry} view={activedList?.view}>
-                  <Item entry={entry} />
-                </EntryContextMenu>
-              </div>
+                <Item entry={entry} />
+              </EntryItemWrapper>
             ))}
           </m.div>
         ))}

src/renderer/src/components/entry-column/item-wrapper.tsx

@@ -0,0 +1,55 @@
+import { ActivedEntry, EntriesResponse } from "@renderer/lib/types"
+import { cn } from "@renderer/lib/utils"
+import { showNativeMenu } from "@renderer/lib/native-menu"
+import { useEntryActions } from "@renderer/hooks/useEntryActions"
+
+export function EntryItemWrapper({
+  entry,
+  activedEntry,
+  setActivedEntry,
+  children,
+  view,
+}: {
+  entry: EntriesResponse[number]
+  activedEntry: ActivedEntry
+  setActivedEntry: (value: ActivedEntry) => void
+  children: React.ReactNode
+  view?: number
+}) {
+  if (!entry?.url || view === undefined) return children
+
+  const { execAction, items } = useEntryActions({
+    url: entry.url,
+    images: entry.images,
+    view,
+  })
+
+  return (
+    <div
+      key={entry.id}
+      className={cn(
+        "rounded-md transition-colors",
+        activedEntry?.id === entry.id && "bg-[#DEDDDC]",
+      )}
+      onClick={(e) => {
+        e.stopPropagation()
+        setActivedEntry(entry)
+      }}
+      onContextMenu={(e) => {
+        e.preventDefault()
+        showNativeMenu(
+          items
+            .filter((item) => !item.disabled)
+            .map((item) => ({
+              type: "text",
+              label: item.name,
+              click: () => execAction(item.action),
+            })),
+          e,
+        )
+      }}
+    >
+      {children}
+    </div>
+  )
+}