Create new workspace, and more optimizations

src-web/components/core/Button.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import type { HTMLAttributes } from 'react';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, memo, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { Icon } from './Icon';
 
@@ -26,7 +26,7 @@ export type ButtonProps = HTMLAttributes<HTMLElement> & {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Button = forwardRef<any, ButtonProps>(function Button(
+const _Button = forwardRef<any, ButtonProps>(function Button(
   {
     to,
     className,
@@ -71,3 +71,5 @@ export const Button = forwardRef<any, ButtonProps>(function Button(
     );
   }
 });
+
+export const Button = memo(_Button);

src-web/components/core/Dropdown.tsx

@@ -9,6 +9,7 @@ import {
   useCallback,
   useImperativeHandle,
   useLayoutEffect,
+  useMemo,
   useState,
 } from 'react';
 
@@ -61,17 +62,18 @@ export const DropdownMenuRadio = memo(function DropdownMenuRadio({
   );
 });
 
+export type DropdownItem =
+  | {
+      label: string;
+      onSelect?: () => void;
+      disabled?: boolean;
+      leftSlot?: ReactNode;
+    }
+  | '-----';
+
 export interface DropdownProps {
   children: ReactElement<typeof DropdownMenuTrigger>;
-  items: (
-    | {
-        label: string;
-        onSelect?: () => void;
-        disabled?: boolean;
-        leftSlot?: ReactNode;
-      }
-    | '-----'
-  )[];
+  items: DropdownItem[];
 }
 
 export const Dropdown = memo(function Dropdown({ children, items }: DropdownProps) {
@@ -106,19 +108,21 @@ interface DropdownMenuPortalProps {
   children: ReactNode;
 }
 
-function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
+const DropdownMenuPortal = memo(function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
   const container = document.querySelector<Element>('#radix-portal');
   if (container === null) return null;
+  const initial = useMemo(() => ({ opacity: 0 }), []);
+  const animate = useMemo(() => ({ opacity: 1 }), []);
   return (
     <D.Portal>
-      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+      <motion.div initial={initial} animate={animate}>
         {children}
       </motion.div>
     </D.Portal>
   );
-}
+});
 
-const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProps>(
+const _DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProps>(
   function DropdownMenuContent(
     { className, children, ...props }: D.DropdownMenuContentProps,
     ref: ForwardedRef<HTMLDivElement>,
@@ -127,33 +131,34 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProp
     const [divRef, setDivRef] = useState<HTMLDivElement | null>(null);
     useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => divRef);
 
-    const initDivRef = (ref: HTMLDivElement | null) => {
+    const initDivRef = useCallback((ref: HTMLDivElement | null) => {
       setDivRef(ref);
-    };
+    }, []);
 
     // Calculate the max height so we can scroll
     useLayoutEffect(() => {
       if (divRef === null) return;
       // Needs to be in a setTimeout because the ref is not positioned yet
       // TODO: Make this better?
-      setTimeout(() => {
+      const t = setTimeout(() => {
         const windowBox = document.documentElement.getBoundingClientRect();
         const menuBox = divRef.getBoundingClientRect();
         const styles = { maxHeight: windowBox.height - menuBox.top - 5 - 45 };
         setStyles(styles);
       });
+      return () => clearTimeout(t);
     }, [divRef]);
 
     return (
       <D.Content
         ref={initDivRef}
         align="start"
+        style={styles}
         className={classnames(
           className,
           'bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 p-1.5 border border-gray-200',
           'overflow-auto m-1',
         )}
-        style={styles}
         {...props}
       >
         {children}
@@ -161,10 +166,11 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProp
     );
   },
 );
+const DropdownMenuContent = memo(_DropdownMenuContent);
 
 type DropdownMenuItemProps = D.DropdownMenuItemProps & ItemInnerProps;
 
-function DropdownMenuItem({
+const DropdownMenuItem = memo(function DropdownMenuItem({
   leftSlot,
   rightSlot,
   className,
@@ -184,7 +190,7 @@ function DropdownMenuItem({
       </ItemInner>
     </D.Item>
   );
-}
+});
 
 // type DropdownMenuCheckboxItemProps = DropdownMenu.DropdownMenuCheckboxItemProps & ItemInnerProps;
 //
@@ -230,12 +236,12 @@ const DropdownMenuRadioItem = memo(function DropdownMenuRadioItem({
   return (
     <D.RadioItem asChild {...props}>
       <ItemInner
+        rightSlot={rightSlot}
         leftSlot={
           <D.ItemIndicator>
             <CheckIcon />
           </D.ItemIndicator>
         }
-        rightSlot={rightSlot}
       >
         {children}
       </ItemInner>
@@ -260,7 +266,11 @@ const DropdownMenuRadioItem = memo(function DropdownMenuRadioItem({
 //   },
 // );
 
-function DropdownMenuLabel({ className, children, ...props }: D.DropdownMenuLabelProps) {
+const DropdownMenuLabel = memo(function DropdownMenuLabel({
+  className,
+  children,
+  ...props
+}: D.DropdownMenuLabelProps) {
   return (
     <D.Label asChild {...props}>
       <ItemInner noHover className={classnames(className, 'opacity-50 uppercase text-sm')}>
@@ -268,16 +278,19 @@ function DropdownMenuLabel({ className, children, ...props }: D.DropdownMenuLabe
       </ItemInner>
     </D.Label>
   );
-}
+});
 
-function DropdownMenuSeparator({ className, ...props }: D.DropdownMenuSeparatorProps) {
+const DropdownMenuSeparator = memo(function DropdownMenuSeparator({
+  className,
+  ...props
+}: D.DropdownMenuSeparatorProps) {
   return (
     <D.Separator
       className={classnames(className, 'h-[1px] bg-gray-400 bg-opacity-30 my-1')}
       {...props}
     />
   );
-}
+});
 
 type DropdownMenuTriggerProps = D.DropdownMenuTriggerProps & {
   children: ReactNode;
@@ -304,7 +317,7 @@ interface ItemInnerProps {
   className?: string;
 }
 
-const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
+const _ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
   { leftSlot, rightSlot, children, className, noHover, ...props }: ItemInnerProps,
   ref,
 ) {
@@ -324,3 +337,5 @@ const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
     </div>
   );
 });
+
+const ItemInner = memo(_ItemInner);

src-web/components/core/IconButton.tsx

@@ -1,5 +1,6 @@
 import classnames from 'classnames';
-import { forwardRef } from 'react';
+import type { MouseEvent } from 'react';
+import { forwardRef, memo, useCallback } from 'react';
 import { useTimedBoolean } from '../../hooks/useTimedBoolean';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
@@ -14,7 +15,7 @@ type Props = IconProps &
     title: string;
   };
 
-export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
+const _IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
   {
     showConfirm,
     icon,
@@ -30,16 +31,20 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
   ref,
 ) {
   const [confirmed, setConfirmed] = useTimedBoolean();
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLElement>) => {
+      if (showConfirm) setConfirmed();
+      onClick?.(e);
+    },
+    [onClick],
+  );
   return (
     <Button
       ref={ref}
       aria-hidden={icon === 'empty'}
       disabled={icon === 'empty'}
       tabIndex={tabIndex ?? icon === 'empty' ? -1 : undefined}
-      onClick={(e) => {
-        if (showConfirm) setConfirmed();
-        onClick?.(e);
-      }}
+      onClick={handleClick}
       className={classnames(
         className,
         'text-gray-700 hover:text-gray-1000',
@@ -63,3 +68,5 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
     </Button>
   );
 });
+
+export const IconButton = memo(_IconButton);

src-web/components/core/PairEditor.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import type { GenericCompletionOption } from './Editor/genericCompletion';
 import { IconButton } from './IconButton';
 import { Input } from './Input';
@@ -21,7 +21,11 @@ interface PairContainer {
   id: string;
 }
 
-export function PairEditor({ pairs: originalPairs, className, onChange }: Props) {
+export const PairEditor = memo(function PairEditor({
+  pairs: originalPairs,
+  className,
+  onChange,
+}: Props) {
   const newPairContainer = (): PairContainer => {
     return { pair: { name: '', value: '' }, id: Math.random().toString() };
   };
@@ -79,9 +83,9 @@ export function PairEditor({ pairs: originalPairs, className, onChange }: Props)
       </VStack>
     </div>
   );
-}
+});
 
-function FormRow({
+const FormRow = memo(function FormRow({
   pairContainer,
   onChange,
   onDelete,
@@ -146,4 +150,4 @@ function FormRow({
       )}
     </div>
   );
-}
+});

src-web/components/core/Tabs/Tabs.tsx

@@ -1,5 +1,6 @@
 import * as T from '@radix-ui/react-tabs';
 import classnames from 'classnames';
+import { memo } from 'react';
 import type { ReactNode } from 'react';
 import { Button } from '../Button';
 import type { DropdownMenuRadioItem, DropdownMenuRadioProps } from '../Dropdown';
@@ -29,7 +30,7 @@ interface Props {
   children: ReactNode;
 }
 
-export function Tabs({
+export const Tabs = memo(function Tabs({
   value,
   onChangeValue,
   label,
@@ -115,7 +116,7 @@ export function Tabs({
       {children}
     </T.Root>
   );
-}
+});
 
 interface TabContentProps {
   value: string;
@@ -123,7 +124,11 @@ interface TabContentProps {
   className?: string;
 }
 
-export function TabContent({ value, children, className }: TabContentProps) {
+export const TabContent = memo(function TabContent({
+  value,
+  children,
+  className,
+}: TabContentProps) {
   return (
     <T.Content
       forceMount
@@ -133,4 +138,4 @@ export function TabContent({ value, children, className }: TabContentProps) {
       {children}
     </T.Content>
   );
-}
+});