fix: add bg when context menu trigger, fix #389

Signed-off-by: Innei <i@innei.in>
RSSNext · Sep 14, 2024 · 53f3185 · 53f3185
1 parent a498228
commit 53f3185
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/src/renderer/src/modules/feed-column/category.tsx b/src/renderer/src/modules/feed-column/category.tsx
@@ -15,8 +15,8 @@ import { useMutation } from "@tanstack/react-query"
 import { AnimatePresence, m } from "framer-motion"
 import type { FC } from "react"
 import { Fragment, memo, useEffect, useRef, useState } from "react"
-import {useTranslation  } from "react-i18next"
-import { useOnClickOutside } from "usehooks-ts"
+import { useTranslation } from "react-i18next"
+import { useClickAnyWhere, useOnClickOutside } from "usehooks-ts"
 
 import { useModalStack } from "../../components/ui/modal/stacked/hooks"
 import { useFeedListSortSelector } from "./atom"
@@ -108,6 +108,10 @@ function FeedCategoryImpl({
 
   const [isCategoryEditing, setIsCategoryEditing] = useState(false)
 
+  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
+  useClickAnyWhere(() => {
+    setIsContextMenuOpen(false)
+  })
   const isCategoryIsWaiting = isChangePending
 
   return (
@@ -116,7 +120,7 @@ function FeedCategoryImpl({
         <div
           className={cn(
             "flex w-full items-center justify-between rounded-md px-2.5 transition-colors",
-            isActive && "bg-native-active",
+            (isActive || isContextMenuOpen) && "bg-native-active",
           )}
           onClick={(e) => {
             e.stopPropagation()
@@ -125,6 +129,7 @@ function FeedCategoryImpl({
             }
           }}
           onContextMenu={(e) => {
+            setIsContextMenuOpen(true)
             showNativeMenu(
               [
                 {

diff --git a/src/renderer/src/modules/feed-column/item.tsx b/src/renderer/src/modules/feed-column/item.tsx
@@ -20,8 +20,9 @@ import { useSubscriptionByFeedId } from "@renderer/store/subscription"
 import { useFeedUnreadStore } from "@renderer/store/unread"
 import { WEB_URL } from "@shared/constants"
 import dayjs from "dayjs"
-import { memo, useCallback } from "react"
+import { memo, useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
+import { useClickAnyWhere } from "usehooks-ts"
 
 import { UnreadNumber } from "./unread-number"
 
@@ -60,6 +61,10 @@ const FeedItemImpl = ({ view, feedId, className, showUnreadCount = true }: FeedI
 
   const { items } = useFeedActions({ feedId, view })
 
+  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
+  useClickAnyWhere(() => {
+    setIsContextMenuOpen(false)
+  })
   if (!feed) return null
 
   return (
@@ -68,14 +73,16 @@ const FeedItemImpl = ({ view, feedId, className, showUnreadCount = true }: FeedI
         data-feed-id={feedId}
         className={cn(
           "flex w-full items-center justify-between rounded-md py-[2px] pr-2.5 text-sm font-medium leading-loose",
-          isActive && "bg-native-active",
+          (isActive || isContextMenuOpen) && "bg-native-active",
+
           className,
         )}
         onClick={handleNavigate}
         onDoubleClick={() => {
           window.open(`${WEB_URL}/feed/${feedId}?view=${view}`, "_blank")
         }}
         onContextMenu={(e) => {
+          setIsContextMenuOpen(true)
           const nextItems = items.concat()
           if (feed.errorAt && feed.errorMessage) {
             nextItems.push(