feat: added usevisibility hook

packages/web/src/components/ThemeSwitcher.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from "@core/hooks/useTheme.ts";
+import { useToggleVisibility } from "@core/hooks/useToggleVisiblility.ts";
 import { cn } from "@core/utils/cn.ts";
 import { Monitor, Moon, Sun } from "lucide-react";
-import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "./UI/Button.tsx";
 import { Subtle } from "./UI/Typography/Subtle.tsx";
@@ -19,7 +19,9 @@ export default function ThemeSwitcher({
   className: passedClassName = "",
   disableHover = false,
 }: ThemeSwitcherProps) {
-  const [showTooltip, setShowTooltip] = useState(false);
+  const [showTooltip, toggleShowTooltip] = useToggleVisibility({
+    timeout: TOOLTIP_TIMEOUT,
+  });
 
   const { preference, setPreference } = useTheme();
   const { t } = useTranslation("ui");
@@ -43,7 +45,7 @@ export default function ThemeSwitcher({
     const nextPreference =
       preferences[(currentIndex + 1) % preferences.length] ?? "system";
     setPreference(nextPreference);
-    setShowTooltip(true);
+    toggleShowTooltip();
   };
 
   const preferenceDisplayMap: Record<ThemePreference, string> = {
@@ -54,18 +56,6 @@ export default function ThemeSwitcher({
 
   const currentDisplayPreference = preferenceDisplayMap[preference];
 
-  useEffect(() => {
-    if (!showTooltip) {
-      return;
-    }
-
-    const timeout = setTimeout(() => {
-      setShowTooltip(false);
-    }, TOOLTIP_TIMEOUT);
-
-    return () => clearTimeout(timeout);
-  }, [showTooltip]);
-
   return (
     <Button
       variant="ghost"

packages/web/src/core/hooks/useToggleVisiblility.ts

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useToggleVisibility({ timeout }: { timeout?: number } = {}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const show = useCallback(() => {
+    setIsVisible(true);
+
+    if (timeout) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        setIsVisible(false);
+        timeoutRef.current = null;
+      }, timeout);
+    }
+  }, [timeout]);
+
+  // Clear timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return [isVisible, show] as const;
+}