From 620469889d67fa58bbbb859b8b1fee49644b451f Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Mon, 3 Feb 2025 18:18:21 +0800
Subject: [PATCH] Update index.tsx

---
 .../web/components/widget/toolbar/index.tsx   | 86 +++++++++----------
 1 file changed, 42 insertions(+), 44 deletions(-)

diff --git a/packages/scan/src/web/components/widget/toolbar/index.tsx b/packages/scan/src/web/components/widget/toolbar/index.tsx
index b856cabe..5a3b483e 100644
--- a/packages/scan/src/web/components/widget/toolbar/index.tsx
+++ b/packages/scan/src/web/components/widget/toolbar/index.tsx
@@ -1,27 +1,29 @@
 // @TODO: @pivanov - finish the pin functionality
-import { useCallback, useEffect, useRef } from 'preact/hooks';
+import { useComputed, useSignalEffect } from '@preact/signals';
 import {
   type LocalStorageOptions,
   ReactScanInternals,
   Store,
 } from '~core/index';
-import { Icon } from '~web/components/icon';
 import { Toggle } from '~web/components/toggle';
 import FpsMeter from '~web/components/widget/fps-meter';
-import { signalIsSettingsOpen } from '~web/state';
 import { cn, readLocalStorage, saveLocalStorage } from '~web/utils/helpers';
 import { constant } from '~web/utils/preact/constant';
 
 export const Toolbar = constant(() => {
-  const refSettingsButton = useRef<HTMLButtonElement>(null);
+  // const refSettingsButton = useRef<HTMLButtonElement>(null);
   // const [isPinned, setIsPinned] = useState(false);
   // const [metadata, setMetadata] = useState<FiberMetadata | null>(null);
 
   const inspectState = Store.inspectState;
-  const isInspectActive = inspectState.value.kind === 'inspecting';
-  const isInspectFocused = inspectState.value.kind === 'focused';
+  const isInspectActive = useComputed(
+    () => inspectState.value.kind === 'inspecting',
+  );
+  const isInspectFocused = useComputed(
+    () => inspectState.value.kind === 'focused',
+  );
 
-  const onToggleInspect = useCallback(() => {
+  const onToggleInspect = () => {
     const currentState = Store.inspectState.value;
 
     switch (currentState.kind) {
@@ -44,9 +46,9 @@ export const Toolbar = constant(() => {
       case 'uninitialized':
         break;
     }
-  }, []);
+  };
 
-  const onToggleActive = useCallback((e: Event) => {
+  const onToggleActive = (e: Event) => {
     e.preventDefault();
     e.stopPropagation();
 
@@ -62,19 +64,17 @@ export const Toolbar = constant(() => {
       ...existingLocalStorageOptions,
       enabled: !isPaused,
     });
-  }, []);
+  };
 
   // const onToggleSettings = useCallback(() => {
   //   signalIsSettingsOpen.value = !signalIsSettingsOpen.value;
   // }, []);
 
-  useEffect(() => {
-    const unSubState = Store.inspectState.subscribe((state) => {
-      if (state.kind === 'uninitialized') {
-        Store.inspectState.value = {
-          kind: 'inspect-off',
-        };
-      }
+  useSignalEffect(() => {
+    if (Store.inspectState.value.kind === 'uninitialized') {
+      Store.inspectState.value = {
+        kind: 'inspect-off',
+      };
 
       // if (state.kind === 'focused' && state.fiber) {
       //   const pinned = readLocalStorage<FiberMetadata>('react-scann-pinned');
@@ -85,17 +85,14 @@ export const Toolbar = constant(() => {
       //     setMetadata(m);
       //   }
       // }
-    });
-
-    const unSubSettings = signalIsSettingsOpen.subscribe((state) => {
-      refSettingsButton.current?.classList.toggle('text-inspect', state);
-    });
+    }
+  });
 
-    return () => {
-      unSubState();
-      unSubSettings();
-    };
-  }, []);
+  // useEffect(() => {
+  //   const unSubSettings = signalIsSettingsOpen.subscribe((state) => {
+  //     refSettingsButton.current?.classList.toggle('text-inspect', state);
+  //   });
+  // }, []);
 
   // const onTogglePin = useCallback(() => {
   //   if (isPinned) {
@@ -107,24 +104,24 @@ export const Toolbar = constant(() => {
   //   }
   // }, [isPinned, metadata]);
 
-  let inspectIcon = null;
-  let inspectColor = '#999';
-
-  if (isInspectActive) {
-    inspectIcon = <Icon name="icon-inspect" />;
-    inspectColor = '#8e61e3';
-  } else if (isInspectFocused) {
-    inspectIcon = <Icon name="icon-focus" />;
-    inspectColor = '#8e61e3';
-  } else {
-    inspectIcon = <Icon name="icon-inspect" />;
-    inspectColor = '#999';
-  }
+  const inspectIcon = useComputed(() => {
+    if (isInspectActive.value) {
+      return 'icon-inspect';
+    }
+    if (isInspectFocused.value) {
+      return 'icon-focus';
+    }
+    return 'icon-inspect';
+  });
+  const inspectColor = useComputed(() => {
+    if (isInspectActive.value || isInspectFocused.value) {
+      return { color: '#8e61e3' };
+    }
+    return { color: '#999' };
+  });
 
   return (
-    <div
-      className="flex max-h-9 min-h-9 flex-1 items-stretch overflow-hidden gap-x-[6px]"
-    >
+    <div className="flex max-h-9 min-h-9 flex-1 items-stretch overflow-hidden gap-x-[6px]">
       <div className="h-full flex items-center min-w-fit gap-x-[6px]">
         <button
           type="button"
@@ -132,11 +129,12 @@ export const Toolbar = constant(() => {
           title="Inspect element"
           onClick={onToggleInspect}
           className="button flex items-center justify-center px-3 h-full"
-          style={{ color: inspectColor }}
+          style={inspectColor}
         >
           {inspectIcon}
         </button>
 
+        {/* TODO(Alexis): fine-grained props */}
         <Toggle
           checked={!ReactScanInternals.instrumentation?.isPaused.value}
           onChange={onToggleActive}