Migrated Kbd component to a centralized implementation (#2475)

## Description

- Updated Kbd component styles and markup
- Migrated Kbd component to a centralized implementation

Author: ComputelessComputer

apps/desktop/src/components/main/body/empty/index.tsx

@@ -1,6 +1,7 @@
 import { AppWindowIcon, ChevronDown } from "lucide-react";
 import { useCallback, useState } from "react";
 
+import { Kbd } from "@hypr/ui/components/ui/kbd";
 import { cn } from "@hypr/utils";
 
 import { type Tab, useTabs } from "../../../../store/zustand/tabs";
@@ -130,22 +131,15 @@ function ActionItem({
     >
       <span>{label}</span>
       {shortcut && shortcut.length > 0 ? (
-        <kbd
+        <Kbd
           className={cn([
-            "inline-flex h-5 items-center gap-1",
-            "rounded border border-neutral-300",
-            "bg-gradient-to-b from-white to-neutral-100",
-            "px-1.5 font-mono text-xs font-medium text-neutral-400",
-            "shadow-[0_1px_0_0_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8)]",
-            "select-none transition-all duration-100",
+            "transition-all duration-100",
             "group-hover:-translate-y-0.5 group-hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15),inset_0_1px_0_0_rgba(255,255,255,0.8)]",
             "group-active:translate-y-0.5 group-active:shadow-none",
           ])}
         >
-          {shortcut.map((key, index) => (
-            <span key={index}>{key}</span>
-          ))}
-        </kbd>
+          {shortcut.join(" ")}
+        </Kbd>
       ) : (
         icon
       )}

apps/desktop/src/components/main/body/search.tsx

@@ -2,7 +2,7 @@ import { Loader2Icon, SearchIcon, XIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { Button } from "@hypr/ui/components/ui/button";
-import { Kbd, KbdGroup } from "@hypr/ui/components/ui/kbd";
+import { Kbd } from "@hypr/ui/components/ui/kbd";
 import { cn } from "@hypr/utils";
 
 import { useSearch } from "../../../contexts/search/ui";
@@ -171,10 +171,7 @@ function ExpandedSearch({
         )}
         {showShortcut && (
           <div className="absolute right-2 top-1">
-            <KbdGroup>
-              <Kbd className="bg-neutral-200">⌘</Kbd>
-              <Kbd className="bg-neutral-200">K</Kbd>
-            </KbdGroup>
+            <Kbd>⌘ K</Kbd>
           </div>
         )}
       </div>

apps/desktop/src/components/main/body/sessions/note-input/raw.tsx

@@ -66,7 +66,7 @@ export const RawEditor = forwardRef<
   const hasNonEmptyText = useCallback(
     (node?: JSONContent): boolean =>
       !!node?.text?.trim() ||
-      !!node?.content?.some((child) => hasNonEmptyText(child)),
+      !!node?.content?.some((child: JSONContent) => hasNonEmptyText(child)),
     [],
   );
 

apps/desktop/src/components/main/body/shared.tsx

@@ -1,7 +1,7 @@
 import { X } from "lucide-react";
 import { useState } from "react";
 
-import { Kbd, KbdGroup } from "@hypr/ui/components/ui/kbd";
+import { Kbd } from "@hypr/ui/components/ui/kbd";
 import { cn } from "@hypr/utils";
 
 import { useCmdKeyPressed } from "../../../hooks/useCmdKeyPressed";
@@ -149,12 +149,7 @@ export function TabItemBase({
         </div>
         {showShortcut && (
           <div className="absolute top-[3px] right-2 pointer-events-none">
-            <KbdGroup>
-              <Kbd className={active ? "bg-red-200" : "bg-neutral-200"}>⌘</Kbd>
-              <Kbd className={active ? "bg-red-200" : "bg-neutral-200"}>
-                {tabIndex}
-              </Kbd>
-            </KbdGroup>
+            <Kbd>⌘ {tabIndex}</Kbd>
           </div>
         )}
       </InteractiveButton>

apps/desktop/src/components/main/sidebar/profile/index.tsx

@@ -11,6 +11,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useResizeObserver } from "usehooks-ts";
 
+import { Kbd } from "@hypr/ui/components/ui/kbd";
 import { cn } from "@hypr/utils";
 
 import { useAuth } from "../../../../auth";
@@ -128,12 +129,7 @@ export function ProfileSection({ onExpandChange }: ProfileSectionProps = {}) {
   // }, [openNew, closeMenu]);
 
   const kbdClass = cn([
-    "inline-flex h-5 items-center gap-1",
-    "rounded border border-neutral-300",
-    "bg-gradient-to-b from-white to-neutral-100",
-    "px-1.5 font-mono text-[10px] font-medium text-neutral-400",
-    "shadow-[0_1px_0_0_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8)]",
-    "select-none transition-all duration-100",
+    "transition-all duration-100",
     "group-hover:-translate-y-0.5 group-hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15),inset_0_1px_0_0_rgba(255,255,255,0.8)]",
     "group-active:translate-y-0.5 group-active:shadow-none",
   ]);
@@ -143,55 +139,31 @@ export function ProfileSection({ onExpandChange }: ProfileSectionProps = {}) {
       icon: FolderOpenIcon,
       label: "Folders",
       onClick: handleClickFolders,
-      badge: (
-        <kbd className={kbdClass}>
-          <span className="text-xs">⌘</span>
-          <span className="text-xs">⇧</span>D
-        </kbd>
-      ),
+      badge: <Kbd className={kbdClass}>⌘ ⇧ D</Kbd>,
     },
     {
       icon: UsersIcon,
       label: "Contacts",
       onClick: handleClickContacts,
-      badge: (
-        <kbd className={kbdClass}>
-          <span className="text-xs">⌘</span>
-          <span className="text-xs">⇧</span>O
-        </kbd>
-      ),
+      badge: <Kbd className={kbdClass}>⌘ ⇧ O</Kbd>,
     },
     {
       icon: CalendarIcon,
       label: "Calendar",
       onClick: handleClickCalendar,
-      badge: (
-        <kbd className={kbdClass}>
-          <span className="text-xs">⌘</span>
-          <span className="text-xs">⇧</span>C
-        </kbd>
-      ),
+      badge: <Kbd className={kbdClass}>⌘ ⇧ C</Kbd>,
     },
     {
       icon: SparklesIcon,
       label: "AI",
       onClick: handleClickAI,
-      badge: (
-        <kbd className={kbdClass}>
-          <span className="text-xs">⌘</span>
-          <span className="text-xs">⇧</span>A
-        </kbd>
-      ),
+      badge: <Kbd className={kbdClass}>⌘ ⇧ A</Kbd>,
     },
     {
       icon: SettingsIcon,
       label: "Settings",
       onClick: handleClickSettings,
-      badge: (
-        <kbd className={kbdClass}>
-          <span className="text-xs">⌘</span>,
-        </kbd>
-      ),
+      badge: <Kbd className={kbdClass}>⌘ ,</Kbd>,
     },
   ];
 

apps/web/src/components/search.tsx

@@ -18,6 +18,7 @@ import {
   CommandItem,
   CommandList,
 } from "@hypr/ui/components/ui/command";
+import { Kbd } from "@hypr/ui/components/ui/kbd";
 import { cn } from "@hypr/utils";
 
 interface SearchResult {
@@ -111,20 +112,16 @@ export function SearchTrigger({
       >
         <SearchIcon size={16} className="text-neutral-400" />
         <span className="flex-1 text-left">Search docs...</span>
-        <kbd
+        <Kbd
           className={cn([
-            "hidden sm:inline-flex h-5 items-center gap-1",
-            "rounded border border-neutral-300",
-            "bg-linear-to-b from-white to-neutral-100",
-            "px-1.5 font-mono text-[10px] font-medium text-neutral-400",
-            "shadow-[0_1px_0_0_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8)]",
-            "select-none transition-all duration-100",
+            "hidden sm:inline-flex",
+            "transition-all duration-100",
             "group-hover:-translate-y-0.5 group-hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15),inset_0_1px_0_0_rgba(255,255,255,0.8)]",
             "group-active:translate-y-0.5 group-active:shadow-none",
           ])}
         >
-          <span className="text-xs">⌘</span>K
-        </kbd>
+          ⌘ K
+        </Kbd>
       </button>
     );
   }
@@ -160,20 +157,16 @@ export function SearchTrigger({
         ])}
       >
         <SearchIcon size={16} />
-        <kbd
+        <Kbd
           className={cn([
-            "hidden sm:inline-flex h-5 items-center gap-1",
-            "rounded border border-neutral-300",
-            "bg-linear-to-b from-white to-neutral-100",
-            "px-1.5 font-mono text-[10px] font-medium text-neutral-400",
-            "shadow-[0_1px_0_0_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8)]",
-            "select-none transition-all duration-100",
+            "hidden sm:inline-flex",
+            "transition-all duration-100",
             "group-hover:-translate-y-0.5 group-hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15),inset_0_1px_0_0_rgba(255,255,255,0.8)]",
             "group-active:translate-y-0.5 group-active:shadow-none",
           ])}
         >
-          <span className="text-sm">⌘</span>K
-        </kbd>
+          ⌘ K
+        </Kbd>
       </button>
     );
   }
@@ -193,16 +186,7 @@ export function SearchTrigger({
     >
       <SearchIcon size={14} className="text-neutral-400" />
       <span className="hidden lg:inline">Search</span>
-      <kbd
-        className={cn([
-          "hidden lg:inline-flex h-5 items-center gap-1",
-          "rounded border border-neutral-200 bg-white",
-          "px-1.5 font-mono text-[10px] font-medium text-neutral-500",
-          "select-none",
-        ])}
-      >
-        <span className="text-xs">⌘</span>K
-      </kbd>
+      <Kbd className="hidden lg:inline-flex">⌘ K</Kbd>
     </button>
   );
 }

packages/ui/src/components/ui/kbd.tsx

@@ -5,9 +5,12 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
     <kbd
       data-slot="kbd"
       className={cn([
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded px-1 font-mono text-xs font-medium",
+        "border border-neutral-300",
+        "bg-gradient-to-b from-white to-neutral-100",
+        "text-neutral-400",
+        "shadow-[0_1px_0_0_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8)]",
         "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
         className,
       ])}
       {...props}
@@ -17,9 +20,9 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
 
 function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <kbd
+    <div
       data-slot="kbd-group"
-      className={cn(["inline-flex items-center gap-1", className])}
+      className={cn(["inline-flex items-center gap-0.5", className])}
       {...props}
     />
   );