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: ( - - - , - + + , + ), }, ]; diff --git a/apps/desktop/src/components/main/sidebar/profile/shared.tsx b/apps/desktop/src/components/main/sidebar/profile/shared.tsx index e15c0ba9fa..3b857c5309 100644 --- a/apps/desktop/src/components/main/sidebar/profile/shared.tsx +++ b/apps/desktop/src/components/main/sidebar/profile/shared.tsx @@ -17,7 +17,7 @@ export function MenuItem({