fix(ui): optimize tooltip duration

- Removed the `tooltipDefaultOpen` prop from the `ActionButton` component to simplify the API.
- Refactored the tooltip structure for improved readability and maintainability, ensuring consistent rendering of tooltip content.

These changes enhance the clarity and efficiency of the `ActionButton` component's tooltip functionality.

Signed-off-by: Innei <tukon479@gmail.com>

packages/internal/components/src/ui/button/action-button.tsx

@@ -11,14 +11,13 @@ import type { Options } from "react-hotkeys-hook"
 import { useHotkeys } from "react-hotkeys-hook"
 
 import { KbdCombined } from "../kbd/Kbd"
-import { Tooltip, TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger } from "../tooltip"
+import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "../tooltip"
 
 export interface ActionButtonProps {
   icon?: React.ReactNode | ((props: { isActive?: boolean; className: string }) => React.ReactNode)
   tooltip?: React.ReactNode
   tooltipDescription?: React.ReactNode
   tooltipSide?: "top" | "bottom"
-  tooltipDefaultOpen?: boolean
   active?: boolean
   disabled?: boolean
   clickableDisabled?: boolean
@@ -60,7 +59,6 @@ export const ActionButton = ({
   tooltipDescription,
   className,
   tooltipSide,
-  tooltipDefaultOpen,
   highlightMotion,
   children,
   active,
@@ -173,29 +171,24 @@ export const ActionButton = ({
       )}
       {tooltip ? (
         <Tooltip disableHoverableContent={!enableHoverableContent}>
-          <TooltipRoot defaultOpen={tooltipDefaultOpen} key={id}>
-            <TooltipTrigger aria-label={typeof tooltip === "string" ? tooltip : undefined} asChild>
-              {Trigger}
-            </TooltipTrigger>
-            <TooltipPortal>
-              <TooltipContent
-                className="max-w-[300px] flex-col gap-1"
-                side={tooltipSide ?? "bottom"}
-              >
-                <div className="flex items-center gap-1">
-                  {tooltip}
-                  {!!finalShortcut && (
-                    <div className="ml-1">
-                      <KbdCombined className="text-text">{finalShortcut}</KbdCombined>
-                    </div>
-                  )}
-                </div>
-                {tooltipDescription ? (
-                  <div className="text-text-secondary text-body">{tooltipDescription}</div>
-                ) : null}
-              </TooltipContent>
-            </TooltipPortal>
-          </TooltipRoot>
+          <TooltipTrigger aria-label={typeof tooltip === "string" ? tooltip : undefined} asChild>
+            {Trigger}
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent className="max-w-[300px] flex-col gap-1" side={tooltipSide ?? "bottom"}>
+              <div className="flex items-center gap-1">
+                {tooltip}
+                {!!finalShortcut && (
+                  <div className="ml-1">
+                    <KbdCombined className="text-text">{finalShortcut}</KbdCombined>
+                  </div>
+                )}
+              </div>
+              {tooltipDescription ? (
+                <div className="text-text-secondary text-body">{tooltipDescription}</div>
+              ) : null}
+            </TooltipContent>
+          </TooltipPortal>
         </Tooltip>
       ) : (
         Trigger

packages/internal/components/src/ui/tooltip/index.tsx

@@ -10,7 +10,7 @@ const TooltipProvider = TooltipPrimitive.Provider
 const TooltipRoot = TooltipPrimitive.Root
 
 const Tooltip: typeof TooltipProvider = ({ children, ...props }) => (
-  <TooltipProvider {...props}>
+  <TooltipProvider delayDuration={200} skipDelayDuration={1000} {...props}>
     <TooltipPrimitive.Tooltip>{children}</TooltipPrimitive.Tooltip>
   </TooltipProvider>
 )