From cea7f4a95ab7336c85613cc551c48639e20b2b9d Mon Sep 17 00:00:00 2001
From: Kieran Cui <78460423+cuikaipeng@users.noreply.github.com>
Date: Sat, 21 Sep 2024 18:39:11 +0800
Subject: [PATCH] fix: regarding the style issue of selecting subscription
 types using the Tab and arrow keys (#525)

* fix: The problem with the display of the right content area

When switching subscription types, the right side may briefly show the content of the previous type before displaying the current type's content after the data request is completed.

* fix:Regarding the style issue of selecting subscription types using the Tab and arrow keys

When a subscription type is selected with the mouse and then switched using the tab key or arrow keys, the background color of the subscription type does not change correctly, always remaining dark for the initially clicked type.
I noticed in the code that the style includes
focus-visible:bg-zinc-500/30 focus-visible:!outline-none
which suggests that the intended behavior is for the background color to change based on the currently focused subscription type when using the tab key or arrow keys.
However, the focus-visible style may not be applied correctly due to keyboard event listeners in the code.
To address this, I introduced a variable to track whether the switch is made via the tab key or arrow keys.

---------

Co-authored-by: Stephen Zhou <hi@hyoban.cc>
Co-authored-by: Innei <i@innei.in>
---
 apps/renderer/src/components/ui/button/index.tsx | 2 +-
 apps/renderer/src/modules/feed-column/index.tsx  | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/renderer/src/components/ui/button/index.tsx b/apps/renderer/src/components/ui/button/index.tsx
index e25826916..c68a03805 100644
--- a/apps/renderer/src/components/ui/button/index.tsx
+++ b/apps/renderer/src/components/ui/button/index.tsx
@@ -62,7 +62,7 @@ export const ActionButton = React.forwardRef<
               className={cn(
                 "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",
+                //"focus-visible:bg-zinc-500/30 focus-visible:!outline-none",
                 "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/modules/feed-column/index.tsx b/apps/renderer/src/modules/feed-column/index.tsx
index f23e14fa5..f33dd963d 100644
--- a/apps/renderer/src/modules/feed-column/index.tsx
+++ b/apps/renderer/src/modules/feed-column/index.tsx
@@ -88,10 +88,12 @@ export function FeedColumn({ children, className }: PropsWithChildren<{ classNam
     }
   }, [setActive_])
 
+  const [useHotkeysSwitch, setUseHotkeysSwitch] = useState<boolean>(false)
   useHotkeys(
     shortcuts.feeds.switchBetweenViews.key,
     (e) => {
       e.preventDefault()
+      setUseHotkeysSwitch(true)
       if (isHotkeyPressed("Left")) {
         setActive((i) => {
           if (i === 0) {
@@ -161,9 +163,11 @@ export function FeedColumn({ children, className }: PropsWithChildren<{ classNam
               "flex flex-col items-center gap-1 text-xl",
               ELECTRON ? "hover:!bg-theme-vibrancyBg" : "",
               showSidebarUnreadCount && "h-11",
+              active === index && useHotkeysSwitch ? "bg-zinc-500/30" : "",
             )}
             onClick={(e) => {
               setActive(index)
+              setUseHotkeysSwitch(false)
               e.stopPropagation()
             }}
           >