Refactor selection hint logic in toolbar component to improve user experience with active state handling

Author: aidenybai

packages/react-grab/src/components/toolbar/index.tsx

@@ -167,12 +167,14 @@ export const Toolbar: Component<ToolbarProps> = (props) => {
   let clockFlashRef: HTMLSpanElement | undefined;
   const [selectionHintIndex, setSelectionHintIndex] = createSignal(0);
 
+  const hasLearnedSelectionHints = () => (props.clockFlashTrigger ?? 0) > 0;
+
   createEffect(
     on(
-      () => props.isActive,
-      (isActive) => {
+      () => [props.isActive, hasLearnedSelectionHints()] as const,
+      ([isActive, hasLearned]) => {
         setSelectionHintIndex(0);
-        if (!isActive) return;
+        if (!isActive || hasLearned) return;
         const intervalId = setInterval(() => {
           setSelectionHintIndex(
             (previous) => (previous + 1) % SELECTION_HINT_COUNT,
@@ -1761,7 +1763,7 @@ export const Toolbar: Component<ToolbarProps> = (props) => {
         }
         shakeTooltip={
           <>
-            <Show when={props.isActive}>
+            <Show when={props.isActive && !hasLearnedSelectionHints()}>
               <div
                 class={cn(
                   "absolute whitespace-nowrap flex items-center gap-1 px-1.5 py-0.5 rounded-[10px] text-[10px] text-black/60 pointer-events-none animate-tooltip-fade-in [animation-fill-mode:backwards] overflow-hidden [corner-shape:superellipse(1.25)]",