Add keyboard shortcut badges to sidebar menu items

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

@@ -12,7 +12,6 @@ import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useResizeObserver } from "usehooks-ts";
 
-import { Kbd, KbdGroup } from "@hypr/ui/components/ui/kbd";
 import { cn } from "@hypr/utils";
 
 import { useAuth } from "../../../../auth";
@@ -141,22 +140,82 @@ export function ProfileSection({ onExpandChange }: ProfileSectionProps = {}) {
   //   closeMenu();
   // }, [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",
+    "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",
+  ]);
+
   const menuItems = [
-    { icon: FolderOpenIcon, label: "Folders", onClick: handleClickFolders },
-    { icon: UsersIcon, label: "Contacts", onClick: handleClickContacts },
-    { icon: CalendarIcon, label: "Calendar", onClick: handleClickCalendar },
-    { icon: SparklesIcon, label: "AI", onClick: handleClickAI },
+    {
+      icon: FolderOpenIcon,
+      label: "Folders",
+      onClick: handleClickFolders,
+      badge: (
+        <kbd className={kbdClass}>
+          <span className="text-xs">⌘</span>
+          <span className="text-xs">⇧</span>D
+        </kbd>
+      ),
+    },
+    {
+      icon: UsersIcon,
+      label: "Contacts",
+      onClick: handleClickContacts,
+      badge: (
+        <kbd className={kbdClass}>
+          <span className="text-xs">⌘</span>
+          <span className="text-xs">⇧</span>O
+        </kbd>
+      ),
+    },
+    {
+      icon: CalendarIcon,
+      label: "Calendar",
+      onClick: handleClickCalendar,
+      badge: (
+        <kbd className={kbdClass}>
+          <span className="text-xs">⌘</span>
+          <span className="text-xs">⇧</span>C
+        </kbd>
+      ),
+    },
+    {
+      icon: SparklesIcon,
+      label: "AI",
+      onClick: handleClickAI,
+      badge: (
+        <kbd className={kbdClass}>
+          <span className="text-xs">⌘</span>
+          <span className="text-xs">⇧</span>A
+        </kbd>
+      ),
+    },
     // { icon: DatabaseIcon, label: "Data", onClick: handleClickData },
-    { icon: UserIcon, label: "My Profile", onClick: handleClickProfile },
+    {
+      icon: UserIcon,
+      label: "My Profile",
+      onClick: handleClickProfile,
+      badge: (
+        <kbd className={kbdClass}>
+          <span className="text-xs">⌘</span>
+          <span className="text-xs">⇧</span>M
+        </kbd>
+      ),
+    },
     {
       icon: SettingsIcon,
       label: "Settings",
       onClick: handleClickSettings,
       badge: (
-        <KbdGroup>
-          <Kbd className="bg-neutral-200">⌘</Kbd>
-          <Kbd className="bg-neutral-200">,</Kbd>
-        </KbdGroup>
+        <kbd className={kbdClass}>
+          <span className="text-xs">⌘</span>,
+        </kbd>
       ),
     },
   ];

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

@@ -17,7 +17,7 @@ export function MenuItem({
     <div className="px-1">
       <button
         className={cn([
-          "flex w-full items-center justify-between gap-2 rounded-lg",
+          "group flex w-full items-center justify-between gap-2 rounded-lg",
           "px-3 py-1.5",
           "text-sm text-black whitespace-nowrap",
           "transition-colors hover:bg-neutral-100",