refactor for readability

Author: jav1anpry5ce

builder-frontend/src/components/shared/QuestionTooltip.tsx

@@ -1,39 +1,50 @@
 import { createSignal, JSX, Show } from "solid-js";
 import QuestionMarkIcon from "../icon/QuestionMarkIcon";
 
+export enum TooltipAlignment {
+  Center = "center",
+  Left = "left",
+  Right = "right",
+}
+
 interface TooltipProps {
   text: string;
   children?: JSX.Element;
 }
 
 export default function QuestionTooltip(props: TooltipProps) {
   const [isVisible, setIsVisible] = createSignal(false);
-  const [position, setPosition] = createSignal<{ x: number, align: 'center' | 'left' | 'right' }>({ x: 0, align: 'center' });
+  const [position, setPosition] = createSignal<{
+    x: number;
+    align: TooltipAlignment;
+  }>({ x: 0, align: TooltipAlignment.Center });
 
   let containerRef: HTMLDivElement | undefined;
 
-  const handleMouseEnter = () => {
-    if (containerRef) {
-      const rect = containerRef.getBoundingClientRect();
-      const tooltipWidth = 256; // w-64 is 16rem = 256px
+  const determineAlignment = (rect: DOMRect): TooltipAlignment => {
+    const tooltipWidth = 256; // w-64 is 16rem = 256px
 
-      // Calculate potential left and right bounds if centered
-      const centerLeft = rect.left + (rect.width / 2) - (tooltipWidth / 2);
-      const centerRight = centerLeft + tooltipWidth;
+    // Calculate potential left and right bounds if centered
+    const centerLeft = rect.left + rect.width / 2 - tooltipWidth / 2;
+    const centerRight = centerLeft + tooltipWidth;
 
-      const viewportWidth = window.innerWidth;
-      const padding = 16; // 16px safety padding from screen edges
+    const viewportWidth = window.innerWidth;
+    const padding = 16; // 16px safety padding from screen edges
 
-      if (centerLeft < padding) {
-        // Overflow on the left: align left edge of tooltip with container
-        setPosition({ x: 0, align: 'left' });
-      } else if (centerRight > viewportWidth - padding) {
-        // Overflow on the right: align right edge of tooltip with container
-        setPosition({ x: 0, align: 'right' });
-      } else {
-        // Safe to center perfectly
-        setPosition({ x: 0, align: 'center' });
-      }
+    if (centerLeft < padding) {
+      return TooltipAlignment.Left;
+    } else if (centerRight > viewportWidth - padding) {
+      return TooltipAlignment.Right;
+    } else {
+      return TooltipAlignment.Center;
+    }
+  };
+
+  const handleMouseEnter = () => {
+    if (containerRef) {
+      const rect = containerRef.getBoundingClientRect();
+      const align = determineAlignment(rect);
+      setPosition({ x: 0, align });
     }
     setIsVisible(true);
   };
@@ -51,25 +62,34 @@ export default function QuestionTooltip(props: TooltipProps) {
       tabIndex={0}
       aria-label="More information"
     >
-      <Show when={props.children} fallback={<QuestionMarkIcon class="size-5 text-gray-500 hover:text-gray-700 transition-colors" />}>
+      <Show
+        when={props.children}
+        fallback={
+          <QuestionMarkIcon class="size-5 text-gray-500 hover:text-gray-700 transition-colors" />
+        }
+      >
         {props.children}
       </Show>
 
       <Show when={isVisible()}>
         <div
           class={`absolute z-50 w-64 p-3 mt-2 text-sm text-gray-800 bg-white border border-gray-200 rounded-lg shadow-lg top-full pointer-events-none fade-in ${
-            position().align === 'center' ? 'left-1/2 -translate-x-1/2' :
-            position().align === 'left' ? 'left-0' :
-            'right-0'
+            position().align === TooltipAlignment.Center
+              ? "left-1/2 -translate-x-1/2"
+              : position().align === TooltipAlignment.Left
+                ? "left-0"
+                : "right-0"
           }`}
         >
           {props.text}
           {/* Decorative arrow pointing up */}
           <div
             class={`absolute w-3 h-3 bg-white border-t border-l border-gray-200 rotate-45 -top-[7px] ${
-              position().align === 'center' ? 'left-1/2 -translate-x-1/2' :
-              position().align === 'left' ? 'left-3' :
-              'right-3'
+              position().align === TooltipAlignment.Center
+                ? "left-1/2 -translate-x-1/2"
+                : position().align === TooltipAlignment.Left
+                  ? "left-3"
+                  : "right-3"
             }`}
           />
         </div>