From 2dcd559b268cbf90d49d7060bcba0c8fee8e7e20 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Sat, 22 Mar 2025 16:16:59 -0600
Subject: [PATCH] shortcut tooltip update

---
 .../features/sidebars/SidebarPrimary.tsx      | 61 +++++++++++--------
 .../ui/pills/KeyboardShortcutPills.tsx        |  4 +-
 web/src/components/ui/tooltip/Tooltip.tsx     |  2 +-
 web/src/components/ui/tooltip/TooltipBase.tsx |  2 +-
 .../MetricItemsContainer.tsx                  |  4 --
 5 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/web/src/components/features/sidebars/SidebarPrimary.tsx b/web/src/components/features/sidebars/SidebarPrimary.tsx
index 3a1443932..fcadba0f3 100644
--- a/web/src/components/features/sidebars/SidebarPrimary.tsx
+++ b/web/src/components/features/sidebars/SidebarPrimary.tsx
@@ -23,6 +23,7 @@ import {
   useGetUserFavorites,
   useUpdateUserFavorites
 } from '@/api/buster_rest';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 const topItems: ISidebarList = {
   id: 'top-items',
@@ -165,33 +166,41 @@ export const SidebarPrimary = React.memo(() => {
 
 SidebarPrimary.displayName = 'SidebarPrimary';
 
-const SidebarPrimaryHeader = React.memo(() => {
-  return (
-    <div className="flex items-center justify-between">
-      <BusterLogoWithText />
-      <div className="flex items-center gap-2">
-        <Tooltip title="Settings">
-          <Link href={createBusterRoute({ route: BusterRoutes.SETTINGS_PROFILE })}>
-            <Button prefix={<Gear />} variant="ghost" />
-          </Link>
-        </Tooltip>
-        <Tooltip title="Start a chat">
-          <Link href={createBusterRoute({ route: BusterRoutes.APP_HOME })}>
-            <Button
-              size="tall"
-              rounding={'large'}
-              prefix={
-                <div className="flex items-center justify-center">
-                  <PencilSquareIcon />
-                </div>
-              }
-            />
-          </Link>
-        </Tooltip>
+const SidebarPrimaryHeader = React.memo(
+  () => {
+    const onChangePage = useAppLayoutContextSelector((s) => s.onChangePage);
+    useHotkeys('C', () => {
+      onChangePage(BusterRoutes.APP_HOME);
+    });
+
+    return (
+      <div className="flex items-center justify-between">
+        <BusterLogoWithText />
+        <div className="flex items-center gap-2">
+          <Tooltip title="Settings">
+            <Link href={createBusterRoute({ route: BusterRoutes.SETTINGS_PROFILE })}>
+              <Button prefix={<Gear />} variant="ghost" />
+            </Link>
+          </Tooltip>
+          <Tooltip title="Start a chat" shortcuts={['C']}>
+            <Link href={createBusterRoute({ route: BusterRoutes.APP_HOME })}>
+              <Button
+                size="tall"
+                rounding={'large'}
+                prefix={
+                  <div className="flex items-center justify-center">
+                    <PencilSquareIcon />
+                  </div>
+                }
+              />
+            </Link>
+          </Tooltip>
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+  () => true
+);
 
 SidebarPrimaryHeader.displayName = 'SidebarPrimaryHeader';
 
diff --git a/web/src/components/ui/pills/KeyboardShortcutPills.tsx b/web/src/components/ui/pills/KeyboardShortcutPills.tsx
index 483ab95e9..d4232dfaf 100644
--- a/web/src/components/ui/pills/KeyboardShortcutPills.tsx
+++ b/web/src/components/ui/pills/KeyboardShortcutPills.tsx
@@ -24,8 +24,8 @@ const TooltipShortcut: React.FC<{ shortcut: string }> = ({ shortcut }) => {
   return (
     <div
       className={cn(
-        'border-border bg-background text2xs pointer-events-none relative flex h-5 items-center justify-center rounded border-[0.5px] px-[1.5px] leading-none shadow',
-        numberOfChars === 1 ? 'w-[1.375rem]' : 'px-1'
+        'bg-background text-gray-light pointer-events-none relative flex h-5 items-center justify-center rounded px-[0.5px] text-xs leading-none',
+        numberOfChars === 1 ? '' : 'px-1'
       )}>
       {shortcut}
     </div>
diff --git a/web/src/components/ui/tooltip/Tooltip.tsx b/web/src/components/ui/tooltip/Tooltip.tsx
index 159108ab9..0a2560d5a 100644
--- a/web/src/components/ui/tooltip/Tooltip.tsx
+++ b/web/src/components/ui/tooltip/Tooltip.tsx
@@ -59,7 +59,7 @@ const TooltipContent: React.FC<{
   shortcut?: string[];
 }> = ({ title, shortcut }) => {
   return (
-    <div className="flex h-3 max-h-3 min-h-3 items-center gap-x-1">
+    <div className="flex h-3 max-h-3 min-h-3 items-center gap-x-1.5">
       <span className="text-sm">{title}</span>
       <KeyboardShortcutPill shortcut={shortcut} />
     </div>
diff --git a/web/src/components/ui/tooltip/TooltipBase.tsx b/web/src/components/ui/tooltip/TooltipBase.tsx
index e8a7b2f5a..9683b20d2 100644
--- a/web/src/components/ui/tooltip/TooltipBase.tsx
+++ b/web/src/components/ui/tooltip/TooltipBase.tsx
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         'bg-popover text-popover-foreground',
-        'rounded border py-1.5 pr-0.5 pl-1.5',
+        'rounded border px-1.5 py-1.5',
         'text-sm shadow',
         'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden',
         className
diff --git a/web/src/controllers/MetricListContainer/MetricItemsContainer.tsx b/web/src/controllers/MetricListContainer/MetricItemsContainer.tsx
index 45ccff4e8..174ca187b 100644
--- a/web/src/controllers/MetricListContainer/MetricItemsContainer.tsx
+++ b/web/src/controllers/MetricListContainer/MetricItemsContainer.tsx
@@ -153,10 +153,6 @@ EmptyState.displayName = 'EmptyState';
 
 const TitleCell = React.memo<{ title: string; status: VerificationStatus; metricId: string }>(
   ({ title, status, metricId }) => {
-    const onFavoriteDivClick = useMemoizedFn((e: React.MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation();
-    });
-
     return (
       <div className="mr-2 flex w-full items-center space-x-2">
         <div className="flex items-center justify-center">