refactor: Move Tooltip and DarkModeToggle to shared/view/ui

src/shared/view/ui/tooltip/Tooltip.tsx

@@ -0,0 +1,106 @@
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { cn } from '../../../../lib/utils';
+
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+
+type TooltipProps = {
+  children: ReactNode;
+  content?: ReactNode;
+  position?: TooltipPosition;
+  className?: string;
+  delay?: number;
+};
+
+function getPositionClasses(position: TooltipPosition): string {
+  switch (position) {
+    case 'top':
+      return 'bottom-full left-1/2 transform -translate-x-1/2 mb-2';
+    case 'bottom':
+      return 'top-full left-1/2 transform -translate-x-1/2 mt-2';
+    case 'left':
+      return 'right-full top-1/2 transform -translate-y-1/2 mr-2';
+    case 'right':
+      return 'left-full top-1/2 transform -translate-y-1/2 ml-2';
+    default:
+      return 'bottom-full left-1/2 transform -translate-x-1/2 mb-2';
+  }
+}
+
+function getArrowClasses(position: TooltipPosition): string {
+  switch (position) {
+    case 'top':
+      return 'top-full left-1/2 transform -translate-x-1/2 border-t-gray-900 dark:border-t-gray-100';
+    case 'bottom':
+      return 'bottom-full left-1/2 transform -translate-x-1/2 border-b-gray-900 dark:border-b-gray-100';
+    case 'left':
+      return 'left-full top-1/2 transform -translate-y-1/2 border-l-gray-900 dark:border-l-gray-100';
+    case 'right':
+      return 'right-full top-1/2 transform -translate-y-1/2 border-r-gray-900 dark:border-r-gray-100';
+    default:
+      return 'top-full left-1/2 transform -translate-x-1/2 border-t-gray-900 dark:border-t-gray-100';
+  }
+}
+
+function Tooltip({
+  children,
+  content,
+  position = 'top',
+  className = '',
+  delay = 500,
+}: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  // Store the timer id without forcing re-renders while hovering.
+  const timeoutRef = useRef<number | null>(null);
+
+  const clearTooltipTimer = () => {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+
+  const handleMouseEnter = () => {
+    clearTooltipTimer();
+    timeoutRef.current = window.setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+
+  const handleMouseLeave = () => {
+    clearTooltipTimer();
+    setIsVisible(false);
+  };
+
+  useEffect(() => {
+    // Avoid delayed updates after unmount.
+    return () => {
+      clearTooltipTimer();
+    };
+  }, []);
+
+  if (!content) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="relative inline-block" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      {children}
+      {isVisible && (
+        <div
+          className={cn(
+            'absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 dark:bg-gray-100 dark:text-gray-900 rounded shadow-lg whitespace-nowrap pointer-events-none',
+            'animate-in fade-in-0 zoom-in-95 duration-200',
+            getPositionClasses(position),
+            className
+          )}
+        >
+          {content}
+          {/* Arrow */}
+          <div className={cn('absolute w-0 h-0 border-4 border-transparent', getArrowClasses(position))} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Tooltip;

src/shared/view/ui/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Tooltip';
+export { default as Tooltip } from './Tooltip';