theme tooltip

src/features/core/components/settings-button.tsx

@@ -1,8 +1,9 @@
-import { UnstyledButton } from "@mantine/core"
+import { Tooltip, UnstyledButton } from "@mantine/core"
 import { GearIcon } from "@phosphor-icons/react"
 import { useNavigate } from "@tanstack/react-router"
 import { useLingui } from "@lingui/react/macro"
-import { memo } from "react";
+import { memo, useEffect, useState } from "react";
+import { useThemeDiscovery } from "@/features/settings/hooks/use-theme-discovery";
 
 interface SettingButtonProps {
   to: string;
@@ -10,21 +11,48 @@ interface SettingButtonProps {
   right?: number;
 }
 
+const HINT_SHOW_DELAY_MS = 900;
+const HINT_VISIBLE_MS = 4000;
+
 const SettingsButton = ({ to }: SettingButtonProps) => {
   const navigate = useNavigate();
   const { t } = useLingui();
+  const { showHint, markSeen } = useThemeDiscovery();
+  const [hintOpen, setHintOpen] = useState(false);
+
+  useEffect(() => {
+    if (!showHint) return;
+    const show = setTimeout(() => setHintOpen(true), HINT_SHOW_DELAY_MS);
+    const hide = setTimeout(() => {
+      setHintOpen(false);
+      markSeen();
+    }, HINT_SHOW_DELAY_MS + HINT_VISIBLE_MS);
+    return () => {
+      clearTimeout(show);
+      clearTimeout(hide);
+    };
+  }, [showHint, markSeen]);
 
   return (
-    <UnstyledButton
-      aria-label={t`Settings`}
-      style={{ cursor: 'pointer', zIndex: 1000, display: 'flex' }}
-      onClick={() => navigate({ to })}
-      pos='absolute'
-      right={20}
-      top={6}
+    <Tooltip
+      label={t`Try the new themes`}
+      opened={hintOpen}
+      withArrow
+      position="bottom-end"
+      offset={8}
+      transitionProps={{ transition: "fade-down", duration: 250 }}
     >
-      <GearIcon weight='bold' size={20} />
-    </UnstyledButton>
+      <UnstyledButton
+        aria-label={t`Settings`}
+        style={{ cursor: 'pointer', zIndex: 1000, display: 'flex' }}
+        onClick={() => navigate({ to })}
+        pos='absolute'
+        right={20}
+        top={6}
+      >
+        <GearIcon weight='bold' size={20} />
+      </UnstyledButton>
+    </Tooltip>
   );
 }