💄 style: Update lucide-static and fix some style problem

src/components/PromptEditor/TagList/index.tsx

@@ -79,10 +79,11 @@ const TagList = memo<TagListProps>(({ tags, setTags, type, setValue }) => {
   );
 
   useEffect(() => {
+    if (!addAutocompleteToArea || bind) return;
+    let retryTimes = 0;
+    let bindInterval: any;
     try {
-      if (!addAutocompleteToArea || bind) return;
+      bindInterval = setInterval(() => {
-      let retryTimes = 0;
-      const bindInterval = setInterval(() => {
         if (bind || retryTimes > 10) {
           const inputDom = document.querySelector(`#${id}`) as HTMLInputElement;
           if (inputDom) {
@@ -97,6 +98,9 @@ const TagList = memo<TagListProps>(({ tags, setTags, type, setValue }) => {
     } catch (error) {
       consola.error('🤯 [promptTagEditor]', error);
     }
+    return () => {
+      if (bindInterval) clearInterval(bindInterval);
+    };
   }, [bind]);
 
   return (

src/features/ExtraNetworkSidebar/useCivitaiHelperFix.ts

@@ -35,9 +35,11 @@ export const useCivitaiHelperFix = ({
       !!document.querySelector('#tab_civitai_helper') &&
       !!document.querySelector('#txt2img_extra_refresh');
 
+    let timoutFn: any;
+
     if (canInject) {
       try {
-        setTimeout(() => {
+        timoutFn = setTimeout(() => {
           replaceCivitaiHelper('txt');
           replaceCivitaiHelper('img');
           civitaiHelperFix();
@@ -52,6 +54,10 @@ export const useCivitaiHelperFix = ({
     isInject.current = true;
     setIsLoading(false);
     if (debug) consola.success(`🤯 ${debug}`);
+
+    return () => {
+      if (timoutFn) clearTimeout(timoutFn);
+    };
   }, []);
 
   return {

src/scripts/civitaiHelperFix.ts

@@ -1,4 +1,5 @@
 import { consola } from 'consola';
+import { isNumber } from 'lodash-es';
 
 const TAB_PREFIX_LIST = ['txt2img', 'img2img'] as const;
 const MODEL_TYPE_LIST = [
@@ -244,15 +245,11 @@ const updateCardForCivitai = () => {
 
 export default () => {
   let checkDomCurrent: INullable<HTMLElement>;
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let x: number = 0;
-  let fn: () => any;
+
-  // eslint-disable-next-line unicorn/consistent-function-scoping
+  const helperFix = () => {
-  const fnClick = () => {
+    // eslint-disable-next-line unicorn/consistent-function-scoping
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    const fnClick = () => setTimeout(helperFix, 500);
-    setTimeout(fn, 500);
-  };
-  fn = () => {
     let retryTimes = 0;
     const fixInterval = setInterval(() => {
       consola.info('🤯 [civitai helper] update card for civitai');
@@ -272,7 +269,7 @@ export default () => {
           }
         }
         const y = updateCardForCivitai()?.length as number;
-        if (typeof y === 'number' && y < x) x = y;
+        if (isNumber(y) && y < x) x = y;
         if (retryTimes > 5 || !checkDom || y >= MODEL_TYPE_LIST.length || y > x) {
           clearInterval(fixInterval);
           x = y ?? x;
@@ -282,5 +279,5 @@ export default () => {
     }, 500);
   };
 
-  return fn();
+  return helperFix;
 };

src/scripts/replaceIcon.ts

@@ -1,40 +1,40 @@
 import { consola } from 'consola';
 import {
-  archiveRestore,
+  ArchiveRestore,
-  arrowDown,
+  ArrowDown,
-  arrowDownLeft,
+  ArrowDownLeft,
-  arrowDownWideNarrow,
+  ArrowDownWideNarrow,
-  arrowLeft,
+  ArrowLeft,
-  arrowRight,
+  ArrowRight,
-  arrowRightLeft,
+  ArrowRightLeft,
-  arrowUpDown,
+  ArrowUpDown,
-  book,
+  Book,
-  box,
+  Box,
-  brush,
+  Brush,
-  clipboardList,
+  ClipboardList,
-  cornerRightUp,
+  CornerRightUp,
-  dices,
+  Dices,
-  download,
+  Download,
-  fileArchive,
+  FileArchive,
-  folderClosed,
+  FolderClosed,
-  grid2x2,
+  Grid2x2,
-  image,
+  Image,
-  laptop2,
+  Laptop2,
-  maximize,
+  Maximize,
-  panelRight,
+  PanelRight,
-  paperclip,
+  Paperclip,
-  penSquare,
+  PencilRuler,
-  pencilRuler,
+  Play,
-  play,
+  RefreshCcw,
-  refreshCcw,
+  Save,
-  save,
+  Settings,
-  settings,
+  Share2,
-  share2,
+  SquarePen,
-  trash,
+  Trash,
-  undo,
+  Undo,
-  wand2,
+  Wand2,
-  webcam,
+  Webcam,
-  x, // @ts-ignore
+  X,
 } from 'lucide-static';
 
 const replaceIcon = (element: HTMLElement, emoji: string[], svg: string, size: number) => {
@@ -50,48 +50,48 @@ const replaceIcon = (element: HTMLElement, emoji: string[], svg: string, size: n
 
 export default () => {
   for (const button of document.querySelectorAll('button')) {
-    replaceIcon(button, ['🖌️'], penSquare, 16);
+    replaceIcon(button, ['🖌️'], SquarePen, 16);
-    replaceIcon(button, ['🗃️'], fileArchive, 16);
+    replaceIcon(button, ['🗃️'], FileArchive, 16);
-    replaceIcon(button, ['🖼️'], image, 16);
+    replaceIcon(button, ['🖼️'], Image, 16);
-    replaceIcon(button, ['🎨️'], brush, 16);
+    replaceIcon(button, ['🎨️'], Brush, 16);
-    replaceIcon(button, ['📂'], folderClosed, 16);
+    replaceIcon(button, ['📂'], FolderClosed, 16);
-    replaceIcon(button, ['🔄', '🔁', '♻️'], refreshCcw, 16);
+    replaceIcon(button, ['🔄', '🔁', '♻️'], RefreshCcw, 16);
-    replaceIcon(button, ['↙️'], arrowDownLeft, 16);
+    replaceIcon(button, ['↙️'], ArrowDownLeft, 16);
-    replaceIcon(button, ['⤴'], cornerRightUp, 16);
+    replaceIcon(button, ['⤴'], CornerRightUp, 16);
-    replaceIcon(button, ['↕️'], arrowDownWideNarrow, 16);
+    replaceIcon(button, ['↕️'], ArrowDownWideNarrow, 16);
-    replaceIcon(button, ['🗑️'], trash, 16);
+    replaceIcon(button, ['🗑️'], Trash, 16);
-    replaceIcon(button, ['📋'], clipboardList, 16);
+    replaceIcon(button, ['📋'], ClipboardList, 16);
-    replaceIcon(button, ['💾'], save, 16);
+    replaceIcon(button, ['💾'], Save, 16);
-    replaceIcon(button, ['🎲️'], dices, 16);
+    replaceIcon(button, ['🎲️'], Dices, 16);
-    replaceIcon(button, ['🪄'], wand2, 16);
+    replaceIcon(button, ['🪄'], Wand2, 16);
-    replaceIcon(button, ['⚙️'], settings, 16);
+    replaceIcon(button, ['⚙️'], Settings, 16);
-    replaceIcon(button, ['➡️'], arrowRight, 16);
+    replaceIcon(button, ['➡️'], ArrowRight, 16);
-    replaceIcon(button, ['⇅'], arrowUpDown, 16);
+    replaceIcon(button, ['⇅'], ArrowUpDown, 16);
-    replaceIcon(button, ['⇄'], arrowRightLeft, 16);
+    replaceIcon(button, ['⇄'], ArrowRightLeft, 16);
-    replaceIcon(button, ['🎴'], panelRight, 16);
+    replaceIcon(button, ['🎴'], PanelRight, 16);
-    replaceIcon(button, ['🌀'], archiveRestore, 16);
+    replaceIcon(button, ['🌀'], ArchiveRestore, 16);
-    replaceIcon(button, ['💥'], play, 16);
+    replaceIcon(button, ['💥'], Play, 16);
-    replaceIcon(button, ['📷'], webcam, 16);
+    replaceIcon(button, ['📷'], Webcam, 16);
-    replaceIcon(button, ['📝'], laptop2, 16);
+    replaceIcon(button, ['📝'], Laptop2, 16);
-    replaceIcon(button, ['📐'], pencilRuler, 16);
+    replaceIcon(button, ['📐'], PencilRuler, 16);
-    replaceIcon(button, ['⬇️'], arrowDown, 16);
+    replaceIcon(button, ['⬇️'], ArrowDown, 16);
-    replaceIcon(button, ['↩'], undo, 16);
+    replaceIcon(button, ['↩'], Undo, 16);
-    replaceIcon(button, ['📒'], book, 16);
+    replaceIcon(button, ['📒'], Book, 16);
-    replaceIcon(button, ['📎'], paperclip, 16);
+    replaceIcon(button, ['📎'], Paperclip, 16);
-    replaceIcon(button, ['📦'], box, 16);
+    replaceIcon(button, ['📦'], Box, 16);
-    replaceIcon(button, ['💞'], share2, 16);
+    replaceIcon(button, ['💞'], Share2, 16);
   }
 
   for (const span of document.querySelectorAll('span')) {
-    replaceIcon(span, ['⤡'], maximize, 36);
+    replaceIcon(span, ['⤡'], Maximize, 36);
-    replaceIcon(span, ['⊞'], grid2x2, 36);
+    replaceIcon(span, ['⊞'], Grid2x2, 36);
-    replaceIcon(span, ['🖫'], download, 36);
+    replaceIcon(span, ['🖫'], Download, 36);
-    replaceIcon(span, ['×'], x, 36);
+    replaceIcon(span, ['×'], X, 36);
   }
 
   for (const a of document.querySelectorAll('a')) {
-    replaceIcon(a, ['❮'], arrowLeft, 36);
+    replaceIcon(a, ['❮'], ArrowLeft, 36);
-    replaceIcon(a, ['❯'], arrowRight, 36);
+    replaceIcon(a, ['❯'], ArrowRight, 36);
   }
   consola.success('🤯 [svgIcon] replace');
 };