feat: context menu for all views

RSSNext · May 16, 2024 · e96a285 · e96a285
1 parent 6e9cd0e
commit e96a285
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 37 deletions.
diff --git a/src/renderer/src/components/entry-column/article-item.tsx b/src/renderer/src/components/entry-column/article-item.tsx
@@ -2,41 +2,38 @@ import dayjs from "@renderer/lib/dayjs"
 import { EntriesResponse } from "@renderer/lib/types"
 import { Image } from "@renderer/components/ui/image"
 import { FeedIcon } from "@renderer/components/feed-icon"
-import { EntryContextMenu } from "./context-menu"
 
 export function ArticleItem({ entry }: { entry: EntriesResponse[number] }) {
   return (
-    <EntryContextMenu entry={entry} view={0}>
-      <div className="flex my-5 px-2 py-3">
-        <FeedIcon feed={entry.feeds} />
-        <div className="line-clamp-5 text-sm flex-1 -mt-0.5 leading-tight">
-          <div className="text-zinc-500 text-[10px] space-x-1">
-            <span>{entry.feeds.title}</span>
-            <span>·</span>
-            <span>
-              {dayjs
-                .duration(
-                  dayjs(entry.publishedAt).diff(dayjs(), "minute"),
-                  "minute",
-                )
-                .humanize()}
-            </span>
-          </div>
-          <div className="font-medium my-0.5 break-words">{entry.title}</div>
-          <div className="text-zinc-500 text-[13px]">{entry.description}</div>
+    <div className="flex my-5 px-2 py-3">
+      <FeedIcon feed={entry.feeds} />
+      <div className="line-clamp-5 text-sm flex-1 -mt-0.5 leading-tight">
+        <div className="text-zinc-500 text-[10px] space-x-1">
+          <span>{entry.feeds.title}</span>
+          <span>·</span>
+          <span>
+            {dayjs
+              .duration(
+                dayjs(entry.publishedAt).diff(dayjs(), "minute"),
+                "minute",
+              )
+              .humanize()}
+          </span>
         </div>
-        {entry.images?.[0] && (
-          <Image
-            src={entry.images[0]}
-            className="w-20 h-20 shrink-0 ml-2"
-            loading="lazy"
-            proxy={{
-              width: 160,
-              height: 160,
-            }}
-          />
-        )}
+        <div className="font-medium my-0.5 break-words">{entry.title}</div>
+        <div className="text-zinc-500 text-[13px]">{entry.description}</div>
       </div>
-    </EntryContextMenu>
+      {entry.images?.[0] && (
+        <Image
+          src={entry.images[0]}
+          className="w-20 h-20 shrink-0 ml-2"
+          loading="lazy"
+          proxy={{
+            width: 160,
+            height: 160,
+          }}
+        />
+      )}
+    </div>
   )
 }
diff --git a/src/renderer/src/components/entry-column/context-menu.tsx b/src/renderer/src/components/entry-column/context-menu.tsx
@@ -13,21 +13,22 @@ export function EntryContextMenu({
   children,
 }: {
   entry: EntriesResponse[number]
-  view: number
+  view?: number
   children: React.ReactNode
 }) {
-  if (!entry?.url) return children
+  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[view]
+        {items
           .filter((item) => !item.disabled)
           .map((item) => (
             <ContextMenuItem

diff --git a/src/renderer/src/components/entry-column/index.tsx b/src/renderer/src/components/entry-column/index.tsx
@@ -7,6 +7,7 @@ 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"
 
 const gridMode = [2, 3]
 
@@ -79,7 +80,9 @@ export function EntryColumn({
                   setActivedEntry(entry)
                 }}
               >
-                <Item entry={entry} />
+                <EntryContextMenu entry={entry} view={activedList?.view}>
+                  <Item entry={entry} />
+                </EntryContextMenu>
               </div>
             ))}
           </m.div>

diff --git a/src/renderer/src/components/entry-content/share.tsx b/src/renderer/src/components/entry-content/share.tsx
@@ -20,12 +20,13 @@ export function EntryShare({
   const { execAction, items } = useEntryActions({
     url: entry.url,
     images: entry.images,
+    view,
   })
 
   return (
     <div className="px-5 h-14 flex items-center text-lg justify-end text-zinc-500 gap-5">
       <TooltipProvider delayDuration={300}>
-        {items[view]
+        {items
           .filter((item) => !item.disabled)
           .map((item) => (
             <Tooltip key={item.name}>

diff --git a/src/renderer/src/hooks/useEntryActions.tsx b/src/renderer/src/hooks/useEntryActions.tsx
@@ -19,9 +19,11 @@ export const useCheckEagle = () =>
 export const useEntryActions = ({
   url,
   images,
+  view,
 }: {
   url: string
   images?: string[]
+  view: number
 }) => {
   const checkEagle = useCheckEagle()
 
@@ -99,6 +101,6 @@ export const useEntryActions = ({
 
   return {
     execAction,
-    items,
+    items: items[view] || items[0],
   }
 }