fix: add hover bg color when context menu opened

Signed-off-by: Innei <i@innei.in>
RSSNext · Sep 19, 2024 · 6ceb263 · 6ceb263
1 parent cfd5275
commit 6ceb263
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 16 deletions.
diff --git a/apps/renderer/src/components/ui/button/index.tsx b/apps/renderer/src/components/ui/button/index.tsx
@@ -63,7 +63,7 @@ export const ActionButton = React.forwardRef<
                 "no-drag-region inline-flex size-8 items-center justify-center text-xl",
                 active && "bg-zinc-500/15 hover:bg-zinc-500/20",
                 "focus-visible:bg-zinc-500/30 focus-visible:!outline-none",
-                "rounded-md duration-200 hover:bg-theme-button-hover",
+                "rounded-md duration-200 hover:bg-theme-button-hover data-[state=open]:bg-theme-button-hover",
                 "disabled:cursor-not-allowed disabled:opacity-50",
                 className,
               )}

diff --git a/apps/renderer/src/components/ui/kbd/Kbd.tsx b/apps/renderer/src/components/ui/kbd/Kbd.tsx
@@ -158,7 +158,7 @@ export const Kbd: FC<{ children: string; className?: string }> = memo(({ childre
     <button type="button" onClick={handleClick}>
       <kbd
         className={cn(
-          "kbd box-border h-5 space-x-1 text-[0.7rem]",
+          "kbd box-border h-5 space-x-1 font-sans text-[0.7rem]",
 
           isKeyPressed ? "" : "border-b-2",
           className,
@@ -176,7 +176,7 @@ export const Kbd: FC<{ children: string; className?: string }> = memo(({ childre
             }
 
             case SharedKeys.backspace: {
-              return <MaterialSymbolsBackspaceOutlineSharp key={key} />
+              return <IcOutlineBackspace key={key} />
             }
             case SpecialKeys.macOS.meta: {
               return <MaterialSymbolsKeyboardCommandKey key={key} />
@@ -273,13 +273,13 @@ function MaterialSymbolsSpaceBarRounded(props: React.SVGProps<SVGSVGElement>) {
   )
 }
 
-function MaterialSymbolsBackspaceOutlineSharp(props: React.SVGProps<SVGSVGElement>) {
+export function IcOutlineBackspace(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
       <path
         fill="currentColor"
-        d="M7.95 19L3 12l4.95-7H21v14zM9 17h10V7H9l-3.55 5zm2.4-1l2.6-2.6l2.6 2.6l1.4-1.4l-2.6-2.6L18 9.4L16.6 8L14 10.6L11.4 8L10 9.4l2.6 2.6l-2.6 2.6zm7.6 1V7z"
-      />
+        d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H7.07L2.4 12l4.66-7H22zm-11.59-2L14 13.41L17.59 17L19 15.59L15.41 12L19 8.41L17.59 7L14 10.59L10.41 7L9 8.41L12.59 12L9 15.59z"
+       />
     </svg>
   )
 }

diff --git a/apps/renderer/src/hooks/common/index.ts b/apps/renderer/src/hooks/common/index.ts
@@ -1,3 +1,4 @@
+export * from "./useAnyPointDown"
 export * from "./useBizQuery"
 export * from "./useDark"
 export * from "./useI18n"

diff --git a/apps/renderer/src/hooks/common/useAnyPointDown.ts b/apps/renderer/src/hooks/common/useAnyPointDown.ts
@@ -0,0 +1,7 @@
+import { useEventListener } from "usehooks-ts"
+
+export const useAnyPointDown = (handler: (event: PointerEvent) => void) => {
+  useEventListener("pointerdown", (event) => {
+    handler(event)
+  })
+}
diff --git a/apps/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx b/apps/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx
@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren } from "react"
-import { useCallback } from "react"
+import { useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useDebounceCallback } from "usehooks-ts"
 
@@ -10,6 +10,7 @@ import { useEntryActions } from "~/hooks/biz/useEntryActions"
 import { useFeedActions } from "~/hooks/biz/useFeedActions"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
+import { useAnyPointDown } from "~/hooks/common"
 import { showNativeMenu } from "~/lib/native-menu"
 import { cn } from "~/lib/utils"
 import type { FlatEntryModel } from "~/store/entry"
@@ -71,10 +72,12 @@ export const EntryItemWrapper: FC<
     () => entry.entries.url && window.open(entry.entries.url, "_blank"),
     [entry.entries.url],
   )
+  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
+  useAnyPointDown(() => setIsContextMenuOpen(false))
   const handleContextMenu: React.MouseEventHandler<HTMLDivElement> = useCallback(
     (e) => {
       e.preventDefault()
-
+      setIsContextMenuOpen(true)
       showNativeMenu(
         [
           ...items
@@ -113,6 +116,7 @@ export const EntryItemWrapper: FC<
         className={cn(
           "relative",
           asRead ? "text-zinc-700 dark:text-neutral-400" : "text-zinc-900 dark:text-neutral-300",
+
           itemClassName,
         )}
         onClick={handleClick}
@@ -122,7 +126,9 @@ export const EntryItemWrapper: FC<
         onContextMenu={handleContextMenu}
       >
         {overlay ? (
-          <ListItemHoverOverlay isActive={isActive}>{children}</ListItemHoverOverlay>
+          <ListItemHoverOverlay isActive={isActive || isContextMenuOpen}>
+            {children}
+          </ListItemHoverOverlay>
         ) : (
           children
         )}

diff --git a/apps/renderer/src/modules/entry-content/index.tsx b/apps/renderer/src/modules/entry-content/index.tsx
@@ -310,7 +310,7 @@ export const EntryContentRender: Component<{ entryId: string }> = ({ entryId, cl
                     className="w-40 flex-col gap-3 p-0"
                     avatarClassName="size-12"
                     userId={feed.ownerUserId}
-                    enableModal={true}
+                    enableModal
                   />
                   <Button className="text-base" onClick={() => openTipModal()}>
                     <i className="i-mgc-power-outline mr-1.5 text-lg" />

diff --git a/apps/renderer/src/modules/feed-column/category.tsx b/apps/renderer/src/modules/feed-column/category.tsx
@@ -3,14 +3,14 @@ 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 { useClickAnyWhere, useOnClickOutside } from "usehooks-ts"
+import { useOnClickOutside } from "usehooks-ts"
 
 import { MotionButtonBase } from "~/components/ui/button"
 import { LoadingCircle } from "~/components/ui/loading"
 import { ROUTE_FEED_IN_FOLDER, views } from "~/constants"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { getRouteParams, useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
-import { useInputComposition } from "~/hooks/common"
+import { useAnyPointDown, useInputComposition } from "~/hooks/common"
 import { stopPropagation } from "~/lib/dom"
 import type { FeedViewType } from "~/lib/enum"
 import { showNativeMenu } from "~/lib/native-menu"
@@ -110,7 +110,7 @@ function FeedCategoryImpl({
   const [isCategoryEditing, setIsCategoryEditing] = useState(false)
 
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
-  useClickAnyWhere(() => {
+  useAnyPointDown(() => {
     setIsContextMenuOpen(false)
   })
   const isCategoryIsWaiting = isChangePending

diff --git a/apps/renderer/src/modules/feed-column/item.tsx b/apps/renderer/src/modules/feed-column/item.tsx
@@ -2,7 +2,6 @@ import { WEB_URL } from "@follow/shared/constants"
 import dayjs from "dayjs"
 import { memo, useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { useClickAnyWhere } from "usehooks-ts"
 
 import { getMainContainerElement } from "~/atoms/dom"
 import { FeedCertification } from "~/components/feed-certification"
@@ -12,6 +11,7 @@ import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "~/compon
 import { useFeedActions } from "~/hooks/biz/useFeedActions"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
+import { useAnyPointDown } from "~/hooks/common"
 import { nextFrame } from "~/lib/dom"
 import { getNewIssueUrl } from "~/lib/issues"
 import { showNativeMenu } from "~/lib/native-menu"
@@ -58,7 +58,7 @@ const FeedItemImpl = ({ view, feedId, className, showUnreadCount = true }: FeedI
   const { items } = useFeedActions({ feedId, view })
 
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
-  useClickAnyWhere(() => {
+  useAnyPointDown(() => {
     setIsContextMenuOpen(false)
   })
   if (!feed) return null

diff --git a/apps/renderer/src/modules/wallet/tip-modal.tsx b/apps/renderer/src/modules/wallet/tip-modal.tsx
@@ -118,7 +118,7 @@ const TipModalContent_: FC<{
           <UserAvatar
             className="h-8 justify-start bg-transparent p-0"
             userId={userId}
-            enableModal={true}
+            enableModal
           />
         </>
       ) : (