From 5ec8e5babe3a9791cc20b9577fdfd6524005f3ff Mon Sep 17 00:00:00 2001
From: Akhilesh Patidar <akhileshpatidar989368@gmail.com>
Date: Fri, 31 Oct 2025 01:29:21 +0530
Subject: [PATCH 1/2] updated keyboard shortcuts display to use tooltips

---
 .../logs/live-switch-button/index.tsx         | 54 +++++++++++--------
 .../src/components/buttons/refresh-button.tsx | 23 +++++---
 2 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/apps/dashboard/components/logs/live-switch-button/index.tsx b/apps/dashboard/components/logs/live-switch-button/index.tsx
index c834c9a2df..e39d27b4f5 100644
--- a/apps/dashboard/components/logs/live-switch-button/index.tsx
+++ b/apps/dashboard/components/logs/live-switch-button/index.tsx
@@ -1,6 +1,6 @@
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { CircleCaretRight } from "@unkey/icons";
-import { Button, KeyboardButton } from "@unkey/ui";
+import { Button, InfoTooltip, KeyboardButton } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 
 type LiveSwitchProps = {
@@ -11,28 +11,36 @@ type LiveSwitchProps = {
 export const LiveSwitchButton = ({ isLive, onToggle }: LiveSwitchProps) => {
   useKeyboardShortcut("option+shift+q", onToggle);
   return (
-    <Button
-      onClick={onToggle}
-      variant="ghost"
-      size="md"
-      title="Toggle live updates (Shortcut: ⌥+⇧+Q)"
-      className={cn(
-        "px-2 relative rounded-lg group overflow-hidden",
-        isLive
-          ? "bg-info-3 text-info-11 hover:bg-info-3 hover:text-info-11 border border-solid border-info-7"
-          : "text-accent-12 [&_svg]:text-accent-9",
-      )}
-    >
-      {isLive && (
-        <div className="absolute left-0 right-0 top-0 bottom-0 rounded">
-          <div className="absolute inset-0 bg-info-6 rounded opacity-15 animate-[ping_3s_cubic-bezier(0,0,0.2,1)_infinite]" />
+    <InfoTooltip
+      content={
+        <div className="flex items-center gap-2">
+          <span>Toggle live updates</span>
+          <KeyboardButton shortcut="⌥+⇧+Q" />
         </div>
-      )}
-      <CircleCaretRight className="size-4 relative z-10" />
-      <span className="font-medium text-[13px]">Live</span>
-      <div className="max-w-0 opacity-0 group-hover:max-w-[100px] group-hover:opacity-100 transition-all duration-300 ease-in-out overflow-hidden">
-        <KeyboardButton shortcut="⌥+⇧+Q" className="ml-1" />
-      </div>
-    </Button>
+      }
+      position={{ side: "bottom", align: "center" }}
+      delayDuration={300}
+      asChild
+    >
+      <Button
+        onClick={onToggle}
+        variant="ghost"
+        size="md"
+        className={cn(
+          "px-2 relative rounded-lg overflow-hidden",
+          isLive
+            ? "bg-info-3 text-info-11 hover:bg-info-3 hover:text-info-11 border border-solid border-info-7"
+            : "text-accent-12 [&_svg]:text-accent-9",
+        )}
+      >
+        {isLive && (
+          <div className="absolute left-0 right-0 top-0 bottom-0 rounded">
+            <div className="absolute inset-0 bg-info-6 rounded opacity-15 animate-[ping_3s_cubic-bezier(0,0,0.2,1)_infinite]" />
+          </div>
+        )}
+        <CircleCaretRight className="size-4 relative z-10" />
+        <span className="font-medium text-[13px]">Live</span>
+      </Button>
+    </InfoTooltip>
   );
 };
diff --git a/internal/ui/src/components/buttons/refresh-button.tsx b/internal/ui/src/components/buttons/refresh-button.tsx
index 57a1b00cc6..cf40865c08 100644
--- a/internal/ui/src/components/buttons/refresh-button.tsx
+++ b/internal/ui/src/components/buttons/refresh-button.tsx
@@ -49,12 +49,23 @@ const RefreshButton = ({ onRefresh, isEnabled, isLive, toggleLive }: RefreshButt
     disabled: !isEnabled,
   });
 
+  // Determine tooltip content based on state
+  const tooltipContent = !isEnabled
+    ? "Refresh unavailable - please select a relative time filter in the 'Since' dropdown"
+    : (
+        <div className="flex items-center gap-2">
+          <span>Refresh data</span>
+          <KeyboardButton shortcut="⌥+⇧+W" />
+        </div>
+      );
+
   return (
     <InfoTooltip
-      content="Refresh unavailable - please select a relative time filter in the 'Since' dropdown"
-      variant="inverted"
+      content={tooltipContent}
+      variant={!isEnabled ? "inverted" : "primary"}
       position={{ side: "bottom", align: "center" }}
-      disabled={isEnabled && !isLoading}
+      delayDuration={300}
+      disabled={isLoading}
       asChild
     >
       <div>
@@ -62,16 +73,12 @@ const RefreshButton = ({ onRefresh, isEnabled, isLive, toggleLive }: RefreshButt
           onClick={handleRefresh}
           variant="ghost"
           size="md"
-          title={isEnabled ? "Refresh data (Shortcut: ⌥+⇧+W)" : ""}
           disabled={!isEnabled || isLoading}
           loading={isLoading}
-          className="flex w-full items-center justify-center rounded-lg border border-gray-4 group overflow-hidden"
+          className="flex w-full items-center justify-center rounded-lg border border-gray-4 overflow-hidden"
         >
           <Refresh3 className="size-4" />
           <span className="font-medium text-[13px] relative z-10">Refresh</span>
-          <div className="max-w-0 opacity-0 group-hover:max-w-[100px] group-hover:opacity-100 transition-all duration-300 ease-in-out overflow-hidden">
-            <KeyboardButton shortcut="⌥+⇧+W" className="ml-1" />
-          </div>
         </Button>
       </div>
     </InfoTooltip>

From 1d402c43b3667c1ef42e2d8acd499d292dad3c26 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 2 Nov 2025 23:03:54 +0000
Subject: [PATCH 2/2] [autofix.ci] apply automated fixes

---
 .../src/components/buttons/refresh-button.tsx  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/internal/ui/src/components/buttons/refresh-button.tsx b/internal/ui/src/components/buttons/refresh-button.tsx
index cf40865c08..fc1a5c4245 100644
--- a/internal/ui/src/components/buttons/refresh-button.tsx
+++ b/internal/ui/src/components/buttons/refresh-button.tsx
@@ -50,19 +50,19 @@ const RefreshButton = ({ onRefresh, isEnabled, isLive, toggleLive }: RefreshButt
   });
 
   // Determine tooltip content based on state
-  const tooltipContent = !isEnabled
-    ? "Refresh unavailable - please select a relative time filter in the 'Since' dropdown"
-    : (
-        <div className="flex items-center gap-2">
-          <span>Refresh data</span>
-          <KeyboardButton shortcut="⌥+⇧+W" />
-        </div>
-      );
+  const tooltipContent = isEnabled ? (
+    <div className="flex items-center gap-2">
+      <span>Refresh data</span>
+      <KeyboardButton shortcut="⌥+⇧+W" />
+    </div>
+  ) : (
+    "Refresh unavailable - please select a relative time filter in the 'Since' dropdown"
+  );
 
   return (
     <InfoTooltip
       content={tooltipContent}
-      variant={!isEnabled ? "inverted" : "primary"}
+      variant={isEnabled ? "primary" : "inverted"}
       position={{ side: "bottom", align: "center" }}
       delayDuration={300}
       disabled={isLoading}