From f5d221feec01c835b7c2e7e2a29cdae312f514c1 Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Fri, 18 Jul 2025 05:53:42 +0600
Subject: [PATCH] Refactor KeyBadge component to return key names directly and
 update ShortcutItem to use <kbd> for key display

---
 .../src/components/keyboard-shortcuts-help.tsx    | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index 936254be..e883da14 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -16,7 +16,7 @@ import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
 
 const KeyBadge = ({ keyName }: { keyName: string }) => {
   // Replace common key names with symbols or friendly names
-  const displayKey = keyName
+  return keyName
     .replace("Cmd", "⌘")
     .replace("Shift", "Shift")
     .replace("ArrowLeft", "Arrow Left")
@@ -26,12 +26,6 @@ const KeyBadge = ({ keyName }: { keyName: string }) => {
     .replace("←", "◀")
     .replace("→", "▶")
     .replace("Space", "Space");
-
-  return (
-    <Badge variant="secondary" className="font-mono text-xs px-1 py-1">
-      {displayKey}
-    </Badge>
-  );
 };
 
 const ShortcutItem = ({ shortcut }: { shortcut: any }) => {
@@ -65,12 +59,9 @@ const ShortcutItem = ({ shortcut }: { shortcut: any }) => {
           <div key={index} className="flex items-center gap-1">
             <div className="flex items-center">
               {key.split("+").map((keyPart: string, partIndex: number) => (
-                <div key={partIndex} className="flex items-center gap-1">
+                <kbd key={partIndex} className="shortcut-key">
                   <KeyBadge keyName={keyPart} />
-                  {partIndex < key.split("+").length - 1 && (
-                    <span className="text-xs text-muted-foreground">+</span>
-                  )}
-                </div>
+                </kbd>
               ))}
             </div>
             {index < displayKeys.length - 1 && (