🔧 chore: update lint config

src/components/Content/index.tsx

@@ -1,6 +1,5 @@
-// import { useAppStore } from '@/store'
 import { FloatButton } from 'antd';
-import React, { useRef } from 'react';
+import { type ReactNode, memo, useRef } from 'react';
 import styled from 'styled-components';
 import { shallow } from 'zustand/shallow';
 
@@ -21,11 +20,11 @@ const ContentView = styled.div<{ isPromptResizable: boolean }>`
 `;
 
 interface ContentProps {
-  children: React.ReactNode;
+  children: ReactNode;
   loading?: boolean;
 }
 
-const Content: React.FC<ContentProps> = ({ children }) => {
+const Content = memo<ContentProps>(({ children }) => {
   const ref: any = useRef(null);
   const [setting] = useAppStore((st) => [st.setting], shallow);
 
@@ -35,6 +34,6 @@ const Content: React.FC<ContentProps> = ({ children }) => {
       <FloatButton.BackTop target={() => ref.current} />
     </ContentView>
   );
-};
+});
 
-export default React.memo(Content);
+export default Content;

src/components/DraggablePanel/index.tsx

@@ -2,7 +2,7 @@ import { useHover } from 'ahooks';
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';
 import type { Enable, NumberSize, Size } from 're-resizable';
 import { HandleClassName, Resizable } from 're-resizable';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { Center } from 'react-layout-kit';
 import type { Props as RndProps } from 'react-rnd';
 import useControlledState from 'use-merge-value';
@@ -37,185 +37,187 @@ export interface DraggablePanelProps extends DivProps {
   size?: Partial<Size>;
 }
 
-const DraggablePanel: React.FC<DraggablePanelProps> = ({
-  pin = 'true',
-  mode = 'fixed',
-  children,
-  placement = 'right',
-  resize,
-  style,
-  size,
-  defaultSize: customizeDefaultSize,
-  minWidth,
-  minHeight,
-  onSizeChange,
-  onSizeDragging,
-  expandable = true,
-  expand,
-  defaultExpand = true,
-  onExpandChange,
-  className,
-  showHandlerWhenUnexpand,
-  destroyOnClose,
-  hanlderStyle,
-}) => {
-  const ref = useRef(null);
-  const isHovering = useHover(ref);
-  const isVertical = placement === 'top' || placement === 'bottom';
+const DraggablePanel = memo<DraggablePanelProps>(
+  ({
+    pin = 'true',
+    mode = 'fixed',
+    children,
+    placement = 'right',
+    resize,
+    style,
+    size,
+    defaultSize: customizeDefaultSize,
+    minWidth,
+    minHeight,
+    onSizeChange,
+    onSizeDragging,
+    expandable = true,
+    expand,
+    defaultExpand = true,
+    onExpandChange,
+    className,
+    showHandlerWhenUnexpand,
+    destroyOnClose,
+    hanlderStyle,
+  }) => {
+    const ref = useRef(null);
+    const isHovering = useHover(ref);
+    const isVertical = placement === 'top' || placement === 'bottom';
 
-  const { styles, cx } = useStyle('draggable-panel');
+    const { styles, cx } = useStyle('draggable-panel');
 
-  const [isExpand, setIsExpand] = useControlledState(defaultExpand, {
-    value: expand,
-    onChange: onExpandChange,
-  });
+    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {
+      value: expand,
+      onChange: onExpandChange,
+    });
 
-  useEffect(() => {
-    if (pin) return;
-    if (isHovering && !isExpand) {
-      setIsExpand(true);
-    } else if (!isHovering && isExpand) {
-      setIsExpand(false);
-    }
-  }, [pin, isHovering, isExpand]);
+    useEffect(() => {
+      if (pin) return;
+      if (isHovering && !isExpand) {
+        setIsExpand(true);
+      } else if (!isHovering && isExpand) {
+        setIsExpand(false);
+      }
+    }, [pin, isHovering, isExpand]);
 
-  const [showExpand, setShowExpand] = useState(true);
+    const [showExpand, setShowExpand] = useState(true);
 
-  const canResizing = resize !== false && isExpand;
+    const canResizing = resize !== false && isExpand;
 
-  const resizeHandleClassNames: HandleClassName = useMemo(() => {
-    if (!canResizing) return {};
+    const resizeHandleClassNames: HandleClassName = useMemo(() => {
+      if (!canResizing) return {};
 
-    return {
-      [revesePlacement(placement)]: styles[`${revesePlacement(placement)}Handle`],
-    };
-  }, [canResizing, placement]);
-
-  const resizing = {
-    top: false,
-    bottom: false,
-    right: false,
-    left: false,
-    topRight: false,
-    bottomRight: false,
-    bottomLeft: false,
-    topLeft: false,
-    [revesePlacement(placement)]: true,
-    ...(resize as Enable),
-  };
-
-  const defaultSize: Size = useMemo(() => {
-    if (isVertical)
       return {
-        width: '100%',
-        height: DEFAULT_HEIGHT,
+        [revesePlacement(placement)]: styles[`${revesePlacement(placement)}Handle`],
+      };
+    }, [canResizing, placement]);
+
+    const resizing = {
+      top: false,
+      bottom: false,
+      right: false,
+      left: false,
+      topRight: false,
+      bottomRight: false,
+      bottomLeft: false,
+      topLeft: false,
+      [revesePlacement(placement)]: true,
+      ...(resize as Enable),
+    };
+
+    const defaultSize: Size = useMemo(() => {
+      if (isVertical)
+        return {
+          width: '100%',
+          height: DEFAULT_HEIGHT,
+          ...customizeDefaultSize,
+        };
+
+      return {
+        width: DEFAULT_WIDTH,
+        height: '100%',
         ...customizeDefaultSize,
       };
+    }, [isVertical]);
 
-    return {
-      width: DEFAULT_WIDTH,
-      height: '100%',
-      ...customizeDefaultSize,
-    };
-  }, [isVertical]);
+    const sizeProps = isExpand
+      ? {
+          minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : 280,
+          minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined,
+          defaultSize,
+          size: size as Size,
+        }
+      : isVertical
+      ? {
+          minHeight: 0,
+          size: { height: 0 },
+        }
+      : {
+          minWidth: 0,
+          size: { width: 0 },
+        };
 
-  const sizeProps = isExpand
-    ? {
-        minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : 280,
-        minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined,
-        defaultSize,
-        size: size as Size,
+    const { Arrow, className: arrowPlacement } = useMemo(() => {
+      switch (placement) {
+        case 'top':
+          return { className: 'Bottom', Arrow: ChevronDown };
+        case 'bottom':
+          return { className: 'Top', Arrow: ChevronUp };
+        case 'right':
+          return { className: 'Left', Arrow: ChevronLeft };
+        case 'left':
+          return { className: 'Right', Arrow: ChevronRight };
       }
-    : isVertical
-    ? {
-        minHeight: 0,
-        size: { height: 0 },
-      }
-    : {
-        minWidth: 0,
-        size: { width: 0 },
-      };
+    }, [styles, placement]);
 
-  const { Arrow, className: arrowPlacement } = useMemo(() => {
-    switch (placement) {
-      case 'top':
-        return { className: 'Bottom', Arrow: ChevronDown };
-      case 'bottom':
-        return { className: 'Top', Arrow: ChevronUp };
-      case 'right':
-        return { className: 'Left', Arrow: ChevronLeft };
-      case 'left':
-        return { className: 'Right', Arrow: ChevronRight };
-    }
-  }, [styles, placement]);
-
-  const handler = (
-    // @ts-ignore
-    <Center
+    const handler = (
       // @ts-ignore
-      className={cx(styles[`toggle${arrowPlacement}`])}
-      style={{ opacity: isExpand ? (!pin ? 0 : undefined) : showHandlerWhenUnexpand ? 1 : 0 }}
-    >
       <Center
-        onClick={() => {
-          setIsExpand(!isExpand);
-        }}
-        style={hanlderStyle}
-      >
-        <div
-          className={styles.handlerIcon}
-          style={{ transform: `rotate(${isExpand ? 180 : 0}deg)` }}
-        >
-          <Arrow size={16} strokeWidth={1.5} />
-        </div>
-      </Center>
-    </Center>
-  );
-
-  const inner = (
-    // @ts-ignore
-    <Resizable
-      {...sizeProps}
-      className={styles.panel}
-      enable={canResizing ? (resizing as Enable) : undefined}
-      handleClasses={resizeHandleClassNames}
-      onResize={(_, direction, ref, delta) => {
-        onSizeDragging?.(delta, {
-          width: ref.style.width,
-          height: ref.style.height,
-        });
-      }}
-      onResizeStart={() => {
-        setShowExpand(false);
-      }}
-      onResizeStop={(e, direction, ref, delta) => {
-        setShowExpand(true);
-        onSizeChange?.(delta, {
-          width: ref.style.width,
-          height: ref.style.height,
-        });
-      }}
-      style={style}
-    >
-      {children}
-    </Resizable>
-  );
-
-  return (
-    <div
-      className={cx(
-        styles.container,
         // @ts-ignore
-        styles[mode === 'fixed' ? 'fixed' : `${placement}Float`],
-        className,
-      )}
-      ref={ref}
-      style={{ [`border${arrowPlacement}Width`]: 1 }}
-    >
-      {expandable && showExpand && handler}
-      {destroyOnClose ? isExpand && inner : inner}
-    </div>
-  );
-};
+        className={cx(styles[`toggle${arrowPlacement}`])}
+        style={{ opacity: isExpand ? (!pin ? 0 : undefined) : showHandlerWhenUnexpand ? 1 : 0 }}
+      >
+        <Center
+          onClick={() => {
+            setIsExpand(!isExpand);
+          }}
+          style={hanlderStyle}
+        >
+          <div
+            className={styles.handlerIcon}
+            style={{ transform: `rotate(${isExpand ? 180 : 0}deg)` }}
+          >
+            <Arrow size={16} strokeWidth={1.5} />
+          </div>
+        </Center>
+      </Center>
+    );
 
-export default React.memo(DraggablePanel);
+    const inner = (
+      // @ts-ignore
+      <Resizable
+        {...sizeProps}
+        className={styles.panel}
+        enable={canResizing ? (resizing as Enable) : undefined}
+        handleClasses={resizeHandleClassNames}
+        onResize={(_, direction, ref, delta) => {
+          onSizeDragging?.(delta, {
+            width: ref.style.width,
+            height: ref.style.height,
+          });
+        }}
+        onResizeStart={() => {
+          setShowExpand(false);
+        }}
+        onResizeStop={(e, direction, ref, delta) => {
+          setShowExpand(true);
+          onSizeChange?.(delta, {
+            width: ref.style.width,
+            height: ref.style.height,
+          });
+        }}
+        style={style}
+      >
+        {children}
+      </Resizable>
+    );
+
+    return (
+      <div
+        className={cx(
+          styles.container,
+          // @ts-ignore
+          styles[mode === 'fixed' ? 'fixed' : `${placement}Float`],
+          className,
+        )}
+        ref={ref}
+        style={{ [`border${arrowPlacement}Width`]: 1 }}
+      >
+        {expandable && showExpand && handler}
+        {destroyOnClose ? isExpand && inner : inner}
+      </div>
+    );
+  },
+);
+
+export default DraggablePanel;

src/components/ExtraNetworkSidebar/index.tsx

@@ -1,7 +1,7 @@
 import { ZoomInOutlined } from '@ant-design/icons';
 import { Slider } from 'antd';
 import { useResponsive } from 'antd-style';
-import React, { CSSProperties, useEffect, useState } from 'react';
+import { type CSSProperties, type ReactNode, memo, useEffect, useState } from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { shallow } from 'zustand/shallow';
 
@@ -19,9 +19,7 @@ const View = styled.div`
   overflow: hidden;
   display: flex;
   flex-direction: column;
-
-  height: var(--chrome-fill-available);
-  height: var(--firefox-fill-available);
+  height: var(--fill-available);
 `;
 
 const SidebarView = styled.div<{ size: number }>`
@@ -45,8 +43,7 @@ const SidebarView = styled.div<{ size: number }>`
     grid-template-columns: repeat(auto-fill, minmax(${({ size }) => size}px, 1fr));
 
     > .card {
-      width: fill-available !important;
-      width: available !important;
+      width: var(--fill-available) !important;
       height: ${({ size }) => size * 1.5}px !important;
     }
   }
@@ -69,12 +66,12 @@ const ZoomSlider = styled(Slider)`
 `;
 
 interface SidebarProps {
-  children: React.ReactNode;
+  children: ReactNode;
   loading?: boolean;
   style?: CSSProperties;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({ children, style }) => {
+const Sidebar = memo<SidebarProps>(({ children, style }) => {
   const { mobile } = useResponsive();
   const [setting] = useAppStore((st) => [st.setting], shallow);
   const [mode] = useState<'fixed' | 'float'>(setting.extraNetworkFixedMode);
@@ -112,6 +109,6 @@ const Sidebar: React.FC<SidebarProps> = ({ children, style }) => {
       </DraggablePanel>
     </>
   );
-};
+});
 
-export default React.memo(Sidebar);
+export default Sidebar;

src/components/Header/Giscus.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect } from 'react';
+import { memo, useEffect } from 'react';
 
 interface GiscusProps {
   themeMode: 'light' | 'dark';
 }
-const Giscus: React.FC<GiscusProps> = ({ themeMode }) => {
+const Giscus = memo<GiscusProps>(({ themeMode }) => {
   useEffect(() => {
     // giscus
     const giscus: HTMLScriptElement = document.createElement('script');
@@ -23,6 +23,6 @@ const Giscus: React.FC<GiscusProps> = ({ themeMode }) => {
   }, []);
 
   return <div className="giscus" id="giscus" />;
-};
+});
 
-export default React.memo(Giscus);
+export default Giscus;

src/components/Header/Logo.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import { type CSSProperties, memo } from 'react';
 
 import { darkLogo, lightLogo } from './style';
 
 interface LogoProps {
   size?: number;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   themeMode: 'dark' | 'light';
 }
 
-const Logo: React.FC<LogoProps> = ({ size = 20, style, themeMode }) => {
+const Logo = memo<LogoProps>(({ size = 20, style, themeMode }) => {
   return (
     <img
       alt="logo"
@@ -16,6 +16,6 @@ const Logo: React.FC<LogoProps> = ({ size = 20, style, themeMode }) => {
       style={{ height: size, ...style }}
     />
   );
-};
+});
 
-export default React.memo(Logo);
+export default Logo;

src/components/Header/Nav.tsx

@@ -1,8 +1,12 @@
 import type { MenuProps } from 'antd';
 import { Menu } from 'antd';
-import React, { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
+/******************************************************
+ *********************** Style *************************
+ ******************************************************/
+
 const NavBar = styled(Menu)`
   overflow: hidden;
   flex: 1;
@@ -30,7 +34,11 @@ const NavBar = styled(Menu)`
   }
 `;
 
-const Nav: React.FC = () => {
+/******************************************************
+ ************************* Dom *************************
+ ******************************************************/
+
+const Nav = memo(() => {
   const [items, setItems] = useState<MenuProps['items']>([]);
 
   useEffect(() => {
@@ -64,6 +72,6 @@ const Nav: React.FC = () => {
       onClick={onClick}
     />
   );
-};
+});
 
 export default Nav;

src/components/Header/Setting.tsx

@@ -1,6 +1,6 @@
 import { SettingOutlined } from '@ant-design/icons';
 import { Button, Divider, Form, InputNumber, Popover, Segmented, Space, Switch } from 'antd';
-import React, { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import styled from 'styled-components';
 import { shallow } from 'zustand/shallow';
 
@@ -38,7 +38,7 @@ const SubTitle = styled.div`
  ************************* Dom *************************
  ******************************************************/
 
-const Setting: React.FC = () => {
+const Setting = memo(() => {
   const [setting, onSetSetting] = useAppStore((st) => [st.setting, st.onSetSetting], shallow);
 
   const onReset = useCallback(() => {
@@ -118,6 +118,6 @@ const Setting: React.FC = () => {
       <Button icon={<SettingOutlined />} title="Setting" />
     </Popover>
   );
-};
+});
 
-export default React.memo(Setting);
+export default Setting;

src/components/Header/index.tsx

@@ -2,7 +2,7 @@ import { BoldOutlined, GithubOutlined } from '@ant-design/icons';
 import { Button, Modal, Space } from 'antd';
 import { useResponsive } from 'antd-style';
 import qs from 'query-string';
-import React, { useCallback, useEffect, useState } from 'react';
+import { type ReactNode, memo, useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { shallow } from 'zustand/shallow';
 
@@ -26,8 +26,7 @@ const HeaderView = styled.div`
   align-items: center;
   justify-content: space-between;
 
-  height: var(--chrome-fill-available);
-  height: var(--firefox-fill-available);
+  height: var(--fill-available);
   padding: 16px 24px;
 `;
 
@@ -36,10 +35,10 @@ const HeaderView = styled.div`
  ******************************************************/
 
 interface HeaderProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-const Header: React.FC<HeaderProps> = ({ children }) => {
+const Header = memo<HeaderProps>(({ children }) => {
   const [themeMode] = useAppStore((st) => [st.themeMode], shallow);
   const { mobile } = useResponsive();
   const [expand, setExpand] = useState<boolean>(true);
@@ -119,6 +118,6 @@ const Header: React.FC<HeaderProps> = ({ children }) => {
       </Modal>
     </>
   );
-};
+});
 
-export default React.memo(Header);
+export default Header;

src/components/Sidebar/Prompt.tsx

@@ -1,9 +1,13 @@
-import React, { useCallback, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import styled from 'styled-components';
 
 import TagList, { PromptType, TagItem } from './TagList';
 import { formatPrompt } from './utils';
 
+/******************************************************
+ *********************** Style *************************
+ ******************************************************/
+
 const View = styled.div`
   display: flex;
   flex-direction: column;
@@ -36,11 +40,15 @@ const Btn = styled.button`
   border-radius: var(--input-radius);
 `;
 
+/******************************************************
+ ************************* Dom *************************
+ ******************************************************/
+
 interface PromptProps {
   type: PromptType;
 }
 
-const Prompt: React.FC<PromptProps> = ({ type }) => {
+const Prompt = memo<PromptProps>(({ type }) => {
   const [tags, setTags] = useState<TagItem[]>([]);
 
   const id =
@@ -82,6 +90,6 @@ const Prompt: React.FC<PromptProps> = ({ type }) => {
       </BtnGroup>
     </View>
   );
-};
+});
 
-export default React.memo(Prompt);
+export default Prompt;

src/components/Sidebar/PromptGroup.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import { memo } from 'react';
 import styled from 'styled-components';
 
 import Prompt from './Prompt';
 
+/******************************************************
+ *********************** Style *************************
+ ******************************************************/
+
 const View = styled.div`
   display: flex;
   flex-direction: column;
@@ -27,7 +31,11 @@ const Desc = styled.div`
   border-radius: var(--block-title-radius);
 `;
 
-const PromptGroup: React.FC = () => {
+/******************************************************
+ ************************* Dom *************************
+ ******************************************************/
+
+const PromptGroup = memo(() => {
   return (
     <View>
       <Desc>Positive</Desc>
@@ -36,6 +44,6 @@ const PromptGroup: React.FC = () => {
       <Prompt type="negative" />
     </View>
   );
-};
+});
 
-export default React.memo(PromptGroup);
+export default PromptGroup;

src/components/Sidebar/TagList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import { type FC, memo, useCallback, useMemo } from 'react';
 import { WithContext, ReactTagsProps as WithContextProps } from 'react-tag-input';
 import styled from 'styled-components';
 
@@ -18,15 +18,14 @@ interface ReactTagsProps extends WithContextProps {
 }
 
 // @ts-ignore
-const ReactTags: React.FC<ReactTagsProps> = WithContext;
+const ReactTags: FC<ReactTagsProps> = WithContext;
 
 const View = styled.div<{ type: PromptType }>`
   /* Styles for the input */
   .ReactTags__editTagInput,
   .ReactTags__tagInput {
     display: inline-block;
-    width: var(--chrome-fill-available);
-    width: var(--firefox-fill-available);
+    width: var(--fill-available);
     margin: 0;
 
     input,
@@ -34,9 +33,7 @@ const View = styled.div<{ type: PromptType }>`
       position: relative;
 
       display: block;
-
-      width: var(--chrome-fill-available);
-      width: var(--firefox-fill-available);
+      width: var(--fill-available);
       margin: 0;
       padding: var(--input-padding);
 
@@ -170,7 +167,7 @@ interface TagListProps {
   type: PromptType;
 }
 
-const TagList: React.FC<TagListProps> = ({ tags, setTags, type, setValue }) => {
+const TagList = memo<TagListProps>(({ tags, setTags, type, setValue }) => {
   const handleDelete = useCallback(
     (i: number) => {
       const newTags = tags.filter((tag, index) => index !== i);
@@ -229,6 +226,6 @@ const TagList: React.FC<TagListProps> = ({ tags, setTags, type, setValue }) => {
       />
     </View>
   );
-};
+});
 
-export default React.memo(TagList);
+export default TagList;

src/components/Sidebar/index.tsx

@@ -1,5 +1,5 @@
 import { useResponsive } from 'antd-style';
-import React, { CSSProperties, useEffect, useState } from 'react';
+import { type CSSProperties, type ReactNode, memo, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { shallow } from 'zustand/shallow';
 
@@ -8,22 +8,28 @@ import { useAppStore } from '@/store';
 
 import PromptGroup from './PromptGroup';
 
+/******************************************************
+ *********************** Style *************************
+ ******************************************************/
+
 const SidebarView = styled.div`
   overflow-x: hidden;
   overflow-y: auto;
-
-  height: var(--chrome-fill-available);
-  height: var(--firefox-fill-available);
+  height: var(--fill-available);
   padding: 16px;
 `;
 
+/******************************************************
+ ************************* Dom *************************
+ ******************************************************/
+
 interface SidebarProps {
-  children: React.ReactNode;
+  children: ReactNode;
   loading?: boolean;
   style?: CSSProperties;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({ children, loading, style }) => {
+const Sidebar = memo<SidebarProps>(({ children, loading, style }) => {
   const [setting] = useAppStore((st) => [st.setting], shallow);
   const [mode] = useState<'fixed' | 'float'>(setting.sidebarFixedMode);
   const { mobile } = useResponsive();
@@ -54,6 +60,6 @@ const Sidebar: React.FC<SidebarProps> = ({ children, loading, style }) => {
       </SidebarView>
     </DraggablePanel>
   );
-};
+});
 
-export default React.memo(Sidebar);
+export default Sidebar;

src/pages/index/App.tsx

@@ -1,6 +1,6 @@
 import { Spin } from 'antd';
 import { useResponsive } from 'antd-style';
-import React, { useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { shallow } from 'zustand/shallow';
 
@@ -40,7 +40,7 @@ const LoadingBox = styled.div`
   height: 100%;
 `;
 
-const App: React.FC = () => {
+const App = memo(() => {
   const [currentTab, setCurrentTab, setting] = useAppStore(
     (st) => [st.currentTab, st.setCurrentTab, st.setting],
     shallow,
@@ -159,6 +159,6 @@ const App: React.FC = () => {
       </View>
     </MainView>
   );
-};
+});
 
-export default React.memo(App);
+export default App;

src/pages/index/index.tsx

@@ -1,6 +1,6 @@
 import { ThemeProvider, setupStyled } from 'antd-style';
 import qs from 'query-string';
-import React, { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 // @ts-ignore
 import ReactFontLoader from 'react-font-loader';
@@ -18,7 +18,7 @@ import App from './App';
 import GlobalStyle from './GlobalStyle';
 import { baseToken } from './style';
 
-const Root: React.FC = () => {
+const Root = memo(() => {
   setupStyled({ ThemeContext });
   const [onSetThemeMode, onInit] = useAppStore((st) => [st.onSetThemeMode, st.onInit], shallow);
   const isDarkMode = useIsDarkMode();
@@ -54,7 +54,7 @@ const Root: React.FC = () => {
       <App />
     </ThemeProvider>
   );
-};
+});
 
 document.addEventListener(
   'DOMContentLoaded',

src/theme/components/container.less

@@ -1,6 +1,5 @@
 #content {
-  min-height: var(--chrome-fill-available);
-  min-height: var(--firefox-fill-available);
+  min-height: var(--fill-available);
 }
 
 .app.svelte-ac4rv4.svelte-ac4rv4 {

src/theme/components/extra-network.less

@@ -7,10 +7,8 @@
 
   .search {
     box-sizing: border-box;
-    width: var(--chrome-fill-available);
-    width: var(--firefox-fill-available);
-    max-width: var(--chrome-fill-available);
-    max-width: var(--firefox-fill-available);
+    width: var(--fill-available);
+    max-width: var(--fill-available);
     max-height: 36px !important;
     padding: 8px;
   }

src/theme/components/quicksetting.less

@@ -9,8 +9,7 @@
   > * {
     flex: 1;
 
-    width: fill-available !important;
-    width: available !important;
+    width: var(--fill-available) !important;
     min-width: unset !important;
     max-width: unset !important;
     margin: 0;
@@ -35,8 +34,7 @@
   }
 
   textarea {
-    width: var(--chrome-fill-available);
-    width: var(--firefox-fill-available);
+    width: var(--fill-available);
   }
 
   span {

src/theme/extensions/open-outpaint.less

@@ -4,7 +4,6 @@
   padding: 0 !important;
 
   #openoutpaint-iframe {
-    width: fill-available !important;
-    width: available !important;
+    width: var(--fill-available) !important;
   }
 }

src/theme/style.less

@@ -43,8 +43,13 @@
 /* Root */
 :root {
   /* stylelint-disable */
-  --chrome-fill-available: -webkit-fill-available;
-  --firefox-fill-available: -moz-available;
+  --fill-available: 100%;
+  @supports (width: -webkit-fill-available) {
+    --fill-available: -webkit-fill-available;
+  }
+  @supports (width: -moz-available) {
+    --fill-available: -moz-available;
+  }
   /* stylelint-enable */
 }
 

src/theme/tabs/tab-to-img.less

@@ -8,9 +8,7 @@
 
     span.svelte-1gfkn6j:not(.has-info) {
       overflow: hidden;
-
-      width: var(--chrome-fill-available);
-      width: var(--firefox-fill-available);
+      width: var(--fill-available);
       margin-right: 12px;
       margin-bottom: var(--spacing-lg);