From bffe175bed4c600ddce491813d327e3ad090598c Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 12 Mar 2025 12:34:21 -0600
Subject: [PATCH] keyboard shortcut for closing

---
 .../components/ui/pills/KeyboardShortcutPills.tsx   |  2 +-
 .../MetricEditControllerHeader.tsx                  | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ui/pills/KeyboardShortcutPills.tsx b/web/src/components/ui/pills/KeyboardShortcutPills.tsx
index 2fc8bc719..f78846c00 100644
--- a/web/src/components/ui/pills/KeyboardShortcutPills.tsx
+++ b/web/src/components/ui/pills/KeyboardShortcutPills.tsx
@@ -19,7 +19,7 @@ KeyboardShortcutPill.displayName = 'KeyboardShortcutPill';
 
 const TooltipShortcut: React.FC<{ shortcut: string }> = ({ shortcut }) => {
   return (
-    <div className="border-border bg-background text2xs pointer-events-none relative flex h-5 w-[1.375rem] items-center justify-center rounded border-[0.5px] leading-none shadow">
+    <div className="border-border bg-background text2xs pointer-events-none relative flex h-5 w-[1.375rem] items-center justify-center rounded border-[0.5px] px-[1.5px] leading-none shadow">
       {shortcut}
     </div>
   );
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricEditControllerHeader.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricEditControllerHeader.tsx
index 9c0249491..23ea15b9d 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricEditControllerHeader.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricEditControllerHeader.tsx
@@ -4,9 +4,18 @@ import { Button } from '@/components/ui/buttons';
 import { Xmark } from '@/components/ui/icons';
 import { useChatLayoutContextSelector } from '@/layouts/ChatLayout';
 import { cn } from '@/lib/classMerge';
+import { AppTooltip } from '@/components/ui/tooltip';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 export const MetricEditControllerHeader: React.FC = React.memo(() => {
   const closeSecondaryView = useChatLayoutContextSelector((x) => x.closeSecondaryView);
+  const selectedFileViewSecondary = useChatLayoutContextSelector(
+    (x) => x.selectedFileViewSecondary
+  );
+
+  useHotkeys('esc', () => closeSecondaryView(), {
+    enabled: !!selectedFileViewSecondary
+  });
 
   return (
     <div
@@ -16,7 +25,9 @@ export const MetricEditControllerHeader: React.FC = React.memo(() => {
         'px-4 py-2.5'
       )}>
       <Text>Edit chart</Text>
-      <Button onClick={closeSecondaryView} variant="ghost" prefix={<Xmark />} />
+      <AppTooltip title="Close" shortcuts={['esc']}>
+        <Button onClick={closeSecondaryView} variant="ghost" prefix={<Xmark />} />
+      </AppTooltip>
     </div>
   );
 });