chore: reformat code

src/components/HighlightOnIndexes.tsx

@@ -1,17 +1,17 @@
-import * as React from 'react';
+import * as React from 'react'
 
-export function HighlightOnIndexes(props: { text: string; indexes?: number[]; }) {
-  const { text, indexes } = props;
+export function HighlightOnIndexes(props: { text: string; indexes?: number[] }) {
+  const { text, indexes } = props
 
-  if (!indexes?.length)
-    return <>{text}</>;
+  if (!indexes?.length) return <>{text}</>
 
   return (
     <>
       {text
         .split('')
-        .map((char, i) => indexes.includes(i) ? <mark key={i}>{char}</mark> : <span key={i}>{char}</span>
+        .map((char, i) =>
+          indexes.includes(i) ? <mark key={i}>{char}</mark> : <span key={i}>{char}</span>,
         )}
     </>
-  );
+  )
 }

src/utils/createAnchorClickHandler.ts

@@ -1,12 +1,11 @@
-import { isOpenInNewWindowClick } from './general';
-import { loadWithPJAX } from './hooks/usePJAX';
+import { isOpenInNewWindowClick } from './general'
+import { loadWithPJAX } from './hooks/usePJAX'
 
 export function createAnchorClickHandler(url: string) {
   return (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-    if (isOpenInNewWindowClick(e))
-      return;
+    if (isOpenInNewWindowClick(e)) return
 
-    e.preventDefault();
-    loadWithPJAX(url, e.currentTarget);
-  };
+    e.preventDefault()
+    loadWithPJAX(url, e.currentTarget)
+  }
 }

src/utils/hooks/useConditionalHook.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react'
 
 export function useConditionalHook<T>(condition: () => boolean, hook: () => T) {
   const [use] = React.useState(condition)

src/utils/hooks/useResizeHandler.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { Size2D } from '../../components/SideBarBodyWrapper';
+import * as React from 'react'
+import { Size2D } from '../../components/SideBarBodyWrapper'
 
-export type ResizeState = 'idle' | 'resizing';
+export type ResizeState = 'idle' | 'resizing'
 
 export function useResizeHandler(
   size: Size2D,
@@ -9,58 +9,60 @@ export function useResizeHandler(
   {
     onResizeStateChange,
     onClick,
+    distanceTolerance = 2,
   }: Partial<{
-    onResizeStateChange: (state: ResizeState) => void;
-    onClick: (e: PointerEvent) => void;
-  }> = {}
+    onResizeStateChange: (state: ResizeState) => void
+    onClick: (e: PointerEvent) => void
+    distanceTolerance: number
+  }> = {},
 ) {
-  const pointerDown = React.useRef(false);
-  const pointerMoved = React.useRef(false);
-  const initialSizeRef = React.useRef([0, 0]);
-  const baseSize = React.useRef(size);
-  const latestPropSize = React.useRef(size);
+  const pointerDown = React.useRef(false)
+  const pointerMoved = React.useRef(false)
+  const initialSizeRef = React.useRef([0, 0])
+  const baseSize = React.useRef(size)
+  const latestPropSize = React.useRef(size)
 
   React.useEffect(() => {
-    latestPropSize.current = size;
-  }, [size]);
+    latestPropSize.current = size
+  }, [size])
 
   React.useEffect(() => {
     const onPointerMove = ({ clientX, clientY }: PointerEvent) => {
-      if (!pointerDown.current)
-        return;
-      pointerMoved.current = true;
-      const [x, y] = baseSize.current;
-      onResize([x + clientX - initialSizeRef.current[0], y + clientY - initialSizeRef.current[1]]);
-    };
-    window.addEventListener('pointermove', onPointerMove);
-    return () => window.removeEventListener('pointermove', onPointerMove);
-  }, [onResize]);
+      if (!pointerDown.current) return
+      const [x0, y0] = initialSizeRef.current
+      // Allow minor movement, this happened unintentionally for few times when I use track pad
+      pointerMoved.current = pointerMoved.current || (clientX - x0) ** 2 + (clientY - y0) ** 2 > distanceTolerance ** 2
+      const [x1, y1] = baseSize.current
+      onResize([x1 + clientX - x0, y1 + clientY - y0])
+    }
+    window.addEventListener('pointermove', onPointerMove)
+    return () => window.removeEventListener('pointermove', onPointerMove)
+  }, [onResize])
 
   React.useEffect(() => {
     const onPointerUp = (e: PointerEvent) => {
       if (pointerDown.current) {
-        pointerDown.current = false;
+        pointerDown.current = false
 
-        if (!pointerMoved.current)
-          onClick?.(e);
-        pointerMoved.current = false;
+        if (!pointerMoved.current) onClick?.(e)
+        pointerMoved.current = false
 
-        baseSize.current = latestPropSize.current;
-        onResizeStateChange?.('idle');
+        baseSize.current = latestPropSize.current
+        onResizeStateChange?.('idle')
       }
-    };
-    window.addEventListener('pointerup', onPointerUp);
-    return () => window.removeEventListener('pointerup', onPointerUp);
-  }, []);
+    }
+    window.addEventListener('pointerup', onPointerUp)
+    return () => window.removeEventListener('pointerup', onPointerUp)
+  }, [])
 
   const onPointerDown = React.useCallback((e: React.PointerEvent) => {
-    e.preventDefault(); // Prevent unexpected selection when dragging in Safari
-    const { clientX, clientY } = e;
-    pointerDown.current = true;
-    initialSizeRef.current = [clientX, clientY];
-    baseSize.current = latestPropSize.current;
-    onResizeStateChange?.('resizing');
-  }, []);
+    e.preventDefault() // Prevent unexpected selection when dragging in Safari
+    const { clientX, clientY } = e
+    pointerDown.current = true
+    initialSizeRef.current = [clientX, clientY]
+    baseSize.current = latestPropSize.current
+    onResizeStateChange?.('resizing')
+  }, [])
 
-  return { onPointerDown };
+  return { onPointerDown }
 }

src/utils/hooks/useUpdateReason.ts

@@ -1,9 +1,7 @@
 import { IN_PRODUCTION_MODE } from 'env'
 import * as React from 'react'
 
-export function useUpdateReason<P /* extends {
-  [key: string]: any
-} */>(props: P) {
+export function useUpdateReason<P>(props: P) {
   const lastPropsRef = React.useRef<P>(props)
   React.useEffect(() => {
     if (IN_PRODUCTION_MODE) return
@@ -23,11 +21,11 @@ export function useUpdateReason<P /* extends {
     }
 
     if (output.length) {
-      console.log(`[Updated Reasons]`)
+      console.group(`[Update Reasons]`)
       for (const record of output) {
         console.log(...record.map(r => (typeof r === 'function' ? '[fn]' : r)))
       }
-      console.log(`;;`)
+      console.groupEnd()
     }
 
     lastPropsRef.current = props