fix: update kbd

Signed-off-by: Innei <i@innei.in>

src/renderer/src/components/ui/button/index.tsx

@@ -8,7 +8,7 @@ import * as React from "react"
 import { useHotkeys } from "react-hotkeys-hook"
 import type { OptionsOrDependencyArray } from "react-hotkeys-hook/dist/types"
 
-import { Kbd } from "../kbd/Kbd"
+import { KbdCombined } from "../kbd/Kbd"
 import { LoadingCircle } from "../loading"
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip"
 import { buttonVariants, styledButtonVariant } from "./variants"
@@ -38,7 +38,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) => {
-    const Comp = asChild ? Slot : as as any
+    const Comp = asChild ? Slot : (as as any)
 
     return (
       <Comp
@@ -124,11 +124,18 @@ export const ActionButton = React.forwardRef<
               {children}
             </Button>
           </TooltipTrigger>
-          <TooltipContent className="flex items-center gap-1" side={tooltipSide ?? "bottom"}>
+          <TooltipContent
+            className="flex items-center gap-1"
+            side={tooltipSide ?? "bottom"}
+          >
             {tooltip}
-            <div className="ml-1">
-              {shortcut && <Kbd className="text-foreground/80">{shortcut}</Kbd>}
-            </div>
+            {!!shortcut && (
+              <div className="ml-1">
+                <KbdCombined className="text-foreground/80">
+                  {shortcut}
+                </KbdCombined>
+              </div>
+            )}
           </TooltipContent>
         </Tooltip>
       </>
@@ -193,10 +200,13 @@ export const StyledButton = React.forwardRef<
   return (
     <MotionButtonBase
       ref={ref}
-      className={cn(styledButtonVariant({
-        variant,
-        status: isLoading || props.disabled ? "disabled" : undefined,
-      }), className)}
+      className={cn(
+        styledButtonVariant({
+          variant,
+          status: isLoading || props.disabled ? "disabled" : undefined,
+        }),
+        className,
+      )}
       {...props}
       onClick={handleClick}
     >

src/renderer/src/components/ui/context-menu/context-menu.tsx

@@ -77,7 +77,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       "focus-within:outline-transparent",
       inset && "pl-8",
       className,

src/renderer/src/components/ui/kbd/Kbd.tsx

@@ -1,5 +1,6 @@
 import { cn, getOS } from "@renderer/lib/utils"
 import type { FC } from "react"
+import { Fragment, memo } from "react"
 
 const SpecialKeys = {
   Windows: {
@@ -22,7 +23,7 @@ const SpecialKeys = {
   },
 }
 
-export const Kbd: FC<{
+export const KbdCombined: FC<{
   children: string
   className?: string
 }> = ({ children, className }) => {
@@ -33,10 +34,27 @@ export const Kbd: FC<{
   }
 
   return (
-    <div className="space-x-1">
-      {key.split(",").map((k) => (
-        <kbd key={k} className={cn("kbd h-4 font-mono text-[0.9em]", className)}>{k}</kbd>
+    <div className="flex items-center gap-1">
+      {key.split(",").map((k, i) => (
+        <Fragment key={k}>
+          <div className="flex items-center gap-1">
+            {k.split("+").map((key, index) => (
+              <Kbd key={index} className={className}>
+                {key}
+              </Kbd>
+            ))}
+          </div>
+          {i !== key.split(",").length - 1 && " / "}
+        </Fragment>
       ))}
     </div>
   )
 }
+
+export const Kbd: FC<{ children: string, className?: string }> = memo(
+  ({ children, className }) => (
+    <kbd className={cn("kbd h-4 font-mono text-[0.7rem]", className)}>
+      {children}
+    </kbd>
+  ),
+)

src/renderer/src/components/ui/tooltip.tsx

@@ -16,7 +16,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-[101] overflow-hidden border border-border bg-theme-tooltip-background px-2 py-1 text-theme-tooltip-foreground backdrop-blur-xl",
+      "z-[101] overflow-hidden border border-border bg-theme-tooltip-background px-1.5 py-1 text-theme-tooltip-foreground backdrop-blur-xl",
       "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       "rounded-lg text-xs",
       "max-w-[75ch] select-text",

src/renderer/src/pages/settings/(settings)/shortcuts.tsx

@@ -1,4 +1,4 @@
-import { Kbd } from "@renderer/components/ui/kbd/Kbd"
+import { KbdCombined } from "@renderer/components/ui/kbd/Kbd"
 import { shortcuts } from "@renderer/constants/shortcuts"
 import { cn } from "@renderer/lib/utils"
 import { SettingsTitle } from "@renderer/modules/settings/title"
@@ -32,9 +32,9 @@ export function Component() {
                 >
                   <div>{shortcuts[type][action].name}</div>
                   <div>
-                    <Kbd>
+                    <KbdCombined>
                       {`${shortcuts[type][action].key}${shortcuts[type][action].extra ? `, ${shortcuts[type][action].extra}` : ""}`}
-                    </Kbd>
+                    </KbdCombined>
                   </div>
                 </div>
               ))}

src/renderer/src/providers/context-menu-provider.tsx

@@ -5,7 +5,7 @@ import {
   ContextMenuSeparator,
   ContextMenuTrigger,
 } from "@renderer/components/ui/context-menu"
-import { Kbd } from "@renderer/components/ui/kbd/Kbd"
+import { KbdCombined } from "@renderer/components/ui/kbd/Kbd"
 import { nextFrame } from "@renderer/lib/dom"
 import type { NativeMenuItem } from "@renderer/lib/native-menu"
 import { CONTEXT_MENU_SHOW_EVENT_KEY } from "@renderer/lib/native-menu"
@@ -126,7 +126,7 @@ const Item = memo(({ item }: { item: NativeMenuItem }) => {
 
           {!!item.shortcut && (
             <div className="ml-auto pl-4">
-              <Kbd>{item.shortcut}</Kbd>
+              <KbdCombined>{item.shortcut}</KbdCombined>
             </div>
           )}
         </ContextMenuItem>