diff --git a/apps/desktop/src/components/main/sidebar/profile/index.tsx b/apps/desktop/src/components/main/sidebar/profile/index.tsx
index 57fe1c8620..4884f5ca08 100644
--- a/apps/desktop/src/components/main/sidebar/profile/index.tsx
+++ b/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: (
+
+ ⌘
+ ⇧D
+
+ ),
+ },
+ {
+ icon: UsersIcon,
+ label: "Contacts",
+ onClick: handleClickContacts,
+ badge: (
+
+ ⌘
+ ⇧O
+
+ ),
+ },
+ {
+ icon: CalendarIcon,
+ label: "Calendar",
+ onClick: handleClickCalendar,
+ badge: (
+
+ ⌘
+ ⇧C
+
+ ),
+ },
+ {
+ icon: SparklesIcon,
+ label: "AI",
+ onClick: handleClickAI,
+ badge: (
+
+ ⌘
+ ⇧A
+
+ ),
+ },
// { icon: DatabaseIcon, label: "Data", onClick: handleClickData },
- { icon: UserIcon, label: "My Profile", onClick: handleClickProfile },
+ {
+ icon: UserIcon,
+ label: "My Profile",
+ onClick: handleClickProfile,
+ badge: (
+
+ ⌘
+ ⇧M
+
+ ),
+ },
{
icon: SettingsIcon,
label: "Settings",
onClick: handleClickSettings,
badge: (
-