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

@@ -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,

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()
             }}
           >