refactor: batch 4

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "vite",
     "build": "tsc -p tsconfig.prod.json && vite build && pnpm build:finalize",
-    "build:finalize": "node scripts/write-version.mjs && node scripts/minify-mjs.mjs",
+    "build:finalize": "node scripts/write-version.mjs",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier -w .",
     "test": "vitest run",
@@ -17,17 +17,10 @@
     "prepare": "simple-git-hooks"
   },
   "dependencies": {
-    "@chakra-ui/anatomy": "^2.3.4",
-    "@chakra-ui/icons": "^2.2.4",
-    "@chakra-ui/react": "^2.10.8",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
     "@reduxjs/toolkit": "^2.8.2",
     "@unlock-music/crypto": "0.1.10",
     "classnames": "^2.5.1",
-    "framer-motion": "^12.12.1",
     "nanoid": "^5.1.5",
-    "next-themes": "^0.4.6",
     "radash": "^12.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -37,9 +30,7 @@
     "react-router": "^7.6.0",
     "react-syntax-highlighter": "^15.6.1",
     "react-toastify": "^11.0.5",
-    "sass": "^1.89.0",
+    "sql.js": "^1.13.0"
-    "sql.js": "^1.13.0",
-    "workbox-build": "^7.3.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.26.0",
@@ -69,6 +60,7 @@
     "lint-staged": "^16.0.0",
     "prettier": "^3.5.3",
     "rollup": "^4.40.2",
+    "sass": "^1.89.0",
     "simple-git-hooks": "^2.13.0",
     "tailwindcss": "^4.1.7",
     "terser": "^5.39.2",
@@ -79,6 +71,7 @@
     "vite-plugin-top-level-await": "^1.5.0",
     "vite-plugin-wasm": "^3.4.1",
     "vitest": "^3.1.3",
+    "workbox-build": "^7.3.0",
     "workbox-window": "^7.3.0"
   },
   "lint-staged": {

src/components/Key/MacCommandKey.tsx

@@ -1,9 +1,9 @@
 import { BsCommand } from 'react-icons/bs';
 import { Ruby } from '../Ruby';
 
-export function MacCommandKey() {
+export function MacCommandKey({ className }: { className?: string }) {
   return (
-    <Ruby caption="command">
+    <Ruby caption="command" className={className}>
       <kbd className="kbd">
         <BsCommand className="text-sm" />
       </kbd>

src/components/Key/ShiftKey.tsx

@@ -1,9 +1,9 @@
 import { BsShift } from 'react-icons/bs';
 import { Ruby } from '../Ruby';
 
-export function ShiftKey() {
+export function ShiftKey({ className }: { className?: string }) {
   return (
-    <Ruby caption="shift">
+    <Ruby caption="shift" className={className}>
       <kbd className="kbd">
         <BsShift className="text-sm" />
       </kbd>

src/features/file-listing/FileRowResponsiveGrid.tsx

@@ -1,27 +0,0 @@
-import { Grid, chakra } from '@chakra-ui/react';
-
-export const FileRowResponsiveGrid = chakra(Grid, {
-  baseStyle: {
-    gridTemplateAreas: {
-      base: `
-        "cover"
-        "title"
-        "meta"
-        "action"
-      `,
-      md: `
-        "cover title action"
-        "cover meta  action"
-      `,
-    },
-    gridTemplateRows: {
-      base: 'repeat(auto-fill)',
-      md: 'min-content 1fr',
-    },
-    gridTemplateColumns: {
-      base: '1fr',
-      md: '160px 1fr',
-    },
-    gap: 3,
-  },
-});

src/features/settings/panels/Kugou/InstructionsPC.tsx

@@ -26,9 +26,7 @@ export function InstructionsPC() {
         来加密储存密钥。
       </p>
       <p>该密钥数据库通常位于下述路径：</p>
-      <p className="flex items-center gap-1">
+      <FilePathBlock>{DB_PATH}</FilePathBlock>
-        <FilePathBlock>{DB_PATH}</FilePathBlock>
-      </p>
 
       <h3 className="font-bold text-xl mt-4">导入密钥</h3>
       <ol className="list-decimal pl-6">

src/features/settings/panels/PanelQingTing.tsx

@@ -56,10 +56,7 @@ export function PanelQingTing() {
 
   return (
     <div className="min-h-0 flex-col grow px-1">
-      <h2 className="text-2xl font-bold mb-4">
+      <h2 className="text-2xl font-bold mb-4">蜻蜓 FM</h2>
-        <VQuote>蜻蜓 FM</VQuote>
-        设备密钥
-      </h2>
 
       <p>
         <VQuote>蜻蜓 FM</VQuote>的安卓版本需要获取设备密钥，并以此来生成解密密钥。

src/features/settings/panels/QMCv2/InstructionsIOS.tsx

@@ -1,51 +1,36 @@
-import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Box,
-  Heading,
-  Text,
-} from '@chakra-ui/react';
 import { InstructionsIOSCondition } from './InstructionsIOSCondition';
+import { useId } from 'react';
 
 export function InstructionsIOS() {
+  const iosInstructionId = useId();
+
   return (
     <>
-      <Box>
+      <div>
-        <Text>iOS 设备获取应用私有文件比较麻烦，你需要越狱或使用一台 PC 或 Mac 来对 iOS 设备进行完整备份。</Text>
+        <p>iOS 设备获取应用私有文件比较麻烦，你需要越狱或使用一台 PC 或 Mac 来对 iOS 设备进行完整备份。</p>
-        <Text>因此，建议换用 PC 或 Mac 重新下载音乐文件然后再尝试解密。</Text>
+        <p>因此，建议换用 PC 或 Mac 重新下载音乐文件然后再尝试解密。</p>
-      </Box>
+      </div>
-      <Accordion allowToggle mt="2">
-        <AccordionItem>
-          <Heading as="h3" size="md">
-            <AccordionButton>
-              <Box as="span" flex="1" textAlign="left">
-                我的 iOS 设备已经越狱
-              </Box>
-              <AccordionIcon />
-            </AccordionButton>
-          </Heading>
-          <AccordionPanel pb={4}>
-            <InstructionsIOSCondition jailbreak={true} />
-          </AccordionPanel>
-        </AccordionItem>
 
-        <AccordionItem>
+      <div className="join join-vertical bg-base-100 mt-2 max-w-full">
-          <Heading as="h3" size="md">
+        <div className="collapse collapse-arrow join-item border-base-300 border">
-            <AccordionButton>
+          <input type="radio" name={iosInstructionId} />
-              <Box as="span" flex="1" textAlign="left">
+          <div className="collapse-title font-semibold">
-                我的 iOS 设备没有越狱
+            我的 iOS 设备<strong>已经越狱</strong>{' '}
-              </Box>
+          </div>
-              <AccordionIcon />
+          <div className="collapse-content text-sm min-w-0">
-            </AccordionButton>
+            <InstructionsIOSCondition jailbreak={true} />
-          </Heading>
+          </div>
-          <AccordionPanel pb={4}>
+        </div>
+        <div className="collapse collapse-arrow join-item border-base-300 border">
+          <input type="radio" name={iosInstructionId} />
+          <div className="collapse-title font-semibold">
+            我的 iOS 设备<strong>没有越狱</strong>
+          </div>
+          <div className="collapse-content text-sm min-w-0">
             <InstructionsIOSCondition jailbreak={false} />
-          </AccordionPanel>
+          </div>
-        </AccordionItem>
+        </div>
-      </Accordion>
+      </div>
     </>
   );
 }

src/features/settings/panels/QMCv2/InstructionsIOSCondition.tsx

@@ -1,6 +1,6 @@
-import { Box, Code, Heading, Image, ListItem, OrderedList, Text } from '@chakra-ui/react';
 import iosAllowBackup from './iosAllowBackup.webp';
 import { FilePathBlock } from '~/components/FilePathBlock';
+import { HiWord } from '~/components/HelpText/HiWord';
 
 const EXAMPLE_MEDIA_ID = '0011wjLv1bIkvv';
 const EXAMPLE_NAME_IOS = '333407709-0011wjLv1bIkvv-1.mgalaxy';
@@ -10,92 +10,77 @@ export function InstructionsIOSCondition({ jailbreak }: { jailbreak: boolean })
   const useJailbreak = jailbreak;
   const useBackup = !jailbreak;
 
-  const pathPrefix = jailbreak ? '/var/mobile/Containers/Data/Application/<随机>/' : '/AppDomain-';
+  const pathPrefix = jailbreak ? (
+    <>
+      /var/mobile/Containers/Data/Application/<HiWord className="text-nowrap">[随机字符]</HiWord>/
+    </>
+  ) : (
+    '/AppDomain-'
+  );
 
   return (
     <>
-      <Heading as="h3" size="md">
+      <h4 className="text-lg font-semibold">获取密钥数据库文件</h4>
-        获取密钥数据库文件
+      <ol className="list-decimal pl-4">
-      </Heading>
-      <OrderedList>
         {useBackup && (
-          <ListItem>
+          <li>
-            <Text>首先需要在 iOS 客户端的设定允许备份：</Text>
+            首先需要在 iOS 客户端的设定允许备份：
-            <Image src={iosAllowBackup}></Image>
+            <br />
-          </ListItem>
+            <img src={iosAllowBackup}></img>
+          </li>
         )}
-        {useBackup && (
+        {useBackup && <li>使用你喜欢的备份软件对 iOS 设备进行完整备份</li>}
-          <ListItem>
+        <li>
-            <Text>使用你喜欢的备份软件对 iOS 设备进行完整备份；</Text>
+          {useBackup && <span>打开备份文件，并导航到下述目录：</span>}
-          </ListItem>
+          {useJailbreak && <span>访问下述目录：</span>}
-        )}
-        <ListItem>
-          {useBackup && <Text>打开备份文件，并导航到下述目录：</Text>}
-          {useJailbreak && <Text>访问下述目录：</Text>}
           <FilePathBlock>{pathPrefix}com.tencent.QQMusic/Documents/mmkv/</FilePathBlock>
-        </ListItem>
+        </li>
-        <ListItem>
+        <li>
-          <Text>
+          提取或导出密钥数据库文件 <code>filenameEkeyMap</code>
-            提取或导出密钥数据库文件 <Code>filenameEkeyMap</Code>；
+        </li>
-          </Text>
+        <li>
-        </ListItem>
+          提交导出的 <code>filenameEkeyMap</code> 文件
-        <ListItem>
+        </li>
-          <Text>
+        <li>按下「保存」来应用更改。</li>
-            提交导出的 <Code>filenameEkeyMap</Code> 文件；
+      </ol>
-          </Text>
-        </ListItem>
-        <ListItem>
-          <Text>按下「保存」来应用更改。</Text>
-        </ListItem>
-      </OrderedList>
 
-      <Heading as="h3" size="md" mt="3">
+      <h3 className="text-lg font-semibold mt-3">获取离线文件</h3>
-        获取离线文件
+      <section>
-      </Heading>
+        <p>访问下述目录：</p>
-      <Box>
-        <Text>访问下述目录：</Text>
         <FilePathBlock>
           {pathPrefix}com.tencent.QQMusic/Library/Application Support/com.tencent.QQMusic/iData/iMusic
         </FilePathBlock>
-        <Text>
+        <p>
-          该目录又存在数个子目录，其子目录下保存的「<Code>[字符].m[字符]</Code>」文件则是最终的加密文件。
+          该目录又存在数个子目录，其子目录下保存的「<code>[字符].m[字符]</code>」文件则是最终的加密文件。
-        </Text>
+        </p>
-        <Text>
+        <p>
-          格式：<Code>[song_id]-[mid]-[随机数字].m[后缀]</Code>
+          格式：<code>[song_id]-[mid]-[随机数字].m[后缀]</code>
-        </Text>
+        </p>
-        <Text>
+        <p>
-          &#x3000;例：<Code>{EXAMPLE_NAME_IOS}</Code>
+          &#x3000;例：<code>{EXAMPLE_NAME_IOS}</code>
-        </Text>
+        </p>
-      </Box>
+      </section>
 
-      <Heading as="h3" size="md" mt="3">
+      <h4 className="text-lg font-semibold mt-3">解密离线文件</h4>
-        解密离线文件
+      <p>勾选设定界面的「使用近似文件名匹配」可跳过该节内容。</p>
-      </Heading>
+      <p>⚠ 注意：若密钥过多，匹配过程可能会造成浏览器卡顿或无响应。</p>
-      <Text>勾选设定界面的「使用近似文件名匹配」可跳过该节内容。</Text>
+      <ol className="list-decimal pl-4 mt-1">
-      <Text>⚠ 注意：若密钥过多，匹配过程可能会造成浏览器卡顿或无响应。</Text>
+        <li>
-      <OrderedList>
+          提取文件的 <code>[mid]</code> 部分，如 <code>{EXAMPLE_MEDIA_ID}</code>
-        <ListItem>
+        </li>
-          <Text>
+        <li>
-            提取文件的 <Code>[mid]</Code> 部分，如 <Code>{EXAMPLE_MEDIA_ID}</Code>；
+          查找密钥表，得到文件名「<code>{EXAMPLE_NAME_DB}</code>」
-          </Text>
+        </li>
-        </ListItem>
+        <li>
-        <ListItem>
+          将文件更名为对应的文件名，如
-          <Text>
+          <br />
-            查找密钥表，得到文件名「<Code>{EXAMPLE_NAME_DB}</Code>」；
+          <code>{EXAMPLE_NAME_IOS}</code>
-          </Text>
+          <br />➔ <code>{EXAMPLE_NAME_DB}</code>
-        </ListItem>
+        </li>
-        <ListItem>
+        <li>
-          <Text>
+          回到主界面，提交文件「<code>{EXAMPLE_NAME_DB}</code>」。
-            将文件更名为对应的文件名，如<Code display="inline">{EXAMPLE_NAME_IOS}</Code> ➔
+        </li>
-            <Code display="inline">{EXAMPLE_NAME_DB}</Code>；
+      </ol>
-          </Text>
-        </ListItem>
-        <ListItem>
-          <Text>
-            回到主界面，提交文件「<Code>{EXAMPLE_NAME_DB}</Code>」。
-          </Text>
-        </ListItem>
-      </OrderedList>
     </>
   );
 }

src/features/settings/panels/QMCv2/InstructionsMac.tsx

@@ -1,59 +1,79 @@
-import { Heading, Text, Code, OrderedList, ListItem, Link } from '@chakra-ui/react';
+import { RiFileCopyLine } from 'react-icons/ri';
+import { toast } from 'react-toastify';
+import { ExtLink } from '~/components/ExtLink';
 import { FilePathBlock } from '~/components/FilePathBlock';
+import { VQuote } from '~/components/HelpText/VQuote';
 import { MacCommandKey } from '~/components/Key/MacCommandKey';
 import { ShiftKey } from '~/components/Key/ShiftKey';
 
 const MAC_CLIENT_URL =
   'https://web.archive.org/web/20230903/https://dldir1.qq.com/music/clntupate/mac/QQMusicMac_Mgr.dmg';
+const MAC_CLIENT_TG_URL = 'https://t.me/um_lsr_ch/21';
+const DB_PATH =
+  '~/Library/Containers/com.tencent.QQMusicMac/Data/Library/Application Support/QQMusicMac/mmkv/MMKVStreamEncryptId';
 
 export function InstructionsMac() {
+  const copyDbPathToClipboard = () => {
+    navigator.clipboard
+      .writeText(DB_PATH)
+      .then(() => {
+        toast.success('已复制到剪贴板');
+      })
+      .catch((err) => {
+        toast.error(`复制失败，请手动复制\n${err}`);
+      });
+  };
+
   return (
     <>
-      <Text>Mac 客户端使用 mmkv 数据库储存密钥。</Text>
+      <p>Mac 客户端使用 mmkv 数据库储存密钥。</p>
-      <Text>
+      <p>此外，你需要降级到 v8.8.0 版本的客户端 —— 更新的版本对密钥数据库进行了加密，目前无公开的获取方案。</p>
-        {'此外，你需要降级到 '}
-        <Link isExternal href={MAC_CLIENT_URL}>
-          2023.09.03 版本的客户端
-        </Link>
-        {'。'}
-        新版本对 mmkv 数据库进行了加密处理。
-      </Text>
-      <Text>该密钥文件通常存储在下述路径：</Text>
-      <FilePathBlock>
-        ~/Library/Containers/com.tencent.QQMusicMac/Data/Library/Application Support/QQMusicMac/mmkv/MMKVStreamEncryptId
-      </FilePathBlock>
 
-      <Heading as="h3" size="md" mt="4">
+      <p className="mt-4">获取 QQ 音乐 Mac 客户端 8.8.0:</p>
-        导入密钥
+      <ul className="list-disc pl-6">
-      </Heading>
+        <li>
-      <OrderedList>
+          <ExtLink className="link-info" href={MAC_CLIENT_URL}>
-        <ListItem>
+            通过 <code>Archive.org</code> 缓存下载（慢）
-          <Text>
+          </ExtLink>
-            选中并复制上述的 <Code>MMKVStreamEncryptId</Code> 文件路径
+        </li>
-          </Text>
+        <li>
-        </ListItem>
+          <ExtLink className="link-info" href={MAC_CLIENT_TG_URL}>
-        <ListItem>
+            通过 Telegram 下载（需要账号）
-          <Text>点击上方的「文件选择区域」，打开「文件选择框」</Text>
+          </ExtLink>
-        </ListItem>
+        </li>
-        <ListItem>
+      </ul>
-          <Text>
+
-            按下「
+      <p className="mt-4">密钥文件通常存储在下述路径：</p>
-            <ShiftKey />
+      <FilePathBlock>{DB_PATH}</FilePathBlock>
-            {' + '}
+
-            <MacCommandKey />
+      <h4 className="font-bold text-lg mt-4">导入密钥</h4>
-            {' + '}
+      <ol className="list-decimal pl-6">
-            <kbd className="kbd">{'G'}</kbd>」组合键打开「路径输入框」
+        <li>
-          </Text>
+          <button className="btn btn-sm btn-outline btn-accent mr-2" onClick={copyDbPathToClipboard}>
-        </ListItem>
+            <RiFileCopyLine className="text-xl" />
-        <ListItem>
+            <span>复制</span>
-          <Text>
+          </button>
-            粘贴之前复制的 <Code>MMKVStreamEncryptId</Code> 文件路径
+          <code>MMKVStreamEncryptId</code> 文件路径
-          </Text>
+        </li>
-        </ListItem>
+        <li>
-        <ListItem>
+          点击上方的<VQuote>文件选择区域</VQuote>，打开<VQuote>文件选择框</VQuote>
-          <Text>按下「回车键」确认。</Text>
+        </li>
-        </ListItem>
+        <li>
-      </OrderedList>
+          按下
+          <VQuote>
+            <ShiftKey className="mx-1" />
+            {'+'}
+            <MacCommandKey className="mx-1" />
+            {'+'}
+            <kbd className="kbd mx-1">G</kbd>
+          </VQuote>
+          组合键打开<VQuote>路径输入框</VQuote>
+        </li>
+        <li>
+          粘贴之前复制的 <code>MMKVStreamEncryptId</code> 文件路径
+        </li>
+        <li>按下「回车键」确认。</li>
+      </ol>
     </>
   );
 }

src/features/settings/panels/QMCv2/InstructionsPC.tsx

@@ -3,6 +3,9 @@ import { HiWord } from '~/components/HelpText/HiWord';
 import NoopExecutable from './assets/noop.exe?base64';
 import NoopExecutableSource from './assets/noop.asm.txt?base64';
 
+const PC_CLIENT_URL = 'https://web.archive.org/web/2023/https://dldir1v6.qq.com/music/clntupate/QQMusic_Setup_1951.exe';
+const PC_CLIENT_TG_URL = 'https://t.me/um_lsr_ch/24';
+
 export function InstructionsPC() {
   return (
     <>
@@ -23,33 +26,35 @@ export function InstructionsPC() {
       </p>
       <ul className="list-disc pl-6">
         <li>
-          <ExtLink href="https://web.archive.org/web/2023/https://dldir1v6.qq.com/music/clntupate/QQMusic_Setup_1951.exe">
+          <ExtLink className="link-info" href={PC_CLIENT_URL}>
             通过 <code>Archive.org</code> 缓存下载（慢）
           </ExtLink>
         </li>
         <li>
-          <ExtLink href="https://t.me/um_lsr_ch/24">通过 Telegram 下载（需要账号）</ExtLink>
+          <ExtLink className="link-info" href={PC_CLIENT_TG_URL}>
+            通过 Telegram 下载（需要账号）
+          </ExtLink>
         </li>
       </ul>
 
       <p className="mt-4">
         安装完成后可以覆盖 QQ 音乐安装目录下的
         <a
-          className="link px-1"
+          className="link link-info mx-1"
           download="QQMusicUp.exe"
           href={`data:application/vnd.microsoft.portable-executable;base64,${NoopExecutable}`}
         >
           <code>QQMusicUp.exe</code>
         </a>
-        同名文件（
+        同名文件，屏蔽自动更新（
         <a
-          className="link px-1"
+          className="link"
           download="QQMusicUp.asm"
           href={`data:text/x-asm;charset=utf-8;base64,${NoopExecutableSource}`}
         >
           源码
         </a>
-        ），屏蔽自动更新。
+        ）。
       </p>
       <p className="mt-2">降级后需要删除新版本下载的文件并重新使用旧版本下载。</p>
     </>

src/theme.ts

@@ -1,61 +0,0 @@
-import { extendTheme } from '@chakra-ui/react';
-import { tabsTheme } from './themes/Tabs';
-
-export const theme = extendTheme({
-  fonts: {
-    body: [
-      '-system-ui,-apple-system,BlinkMacSystemFont',
-      'Source Han Sans CN,Noto Sans CJK SC',
-      'Segoe UI,Helvetica,Arial,sans-serif',
-      'Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol',
-    ].join(','),
-    mono: [
-      'SFMono-Regular,Menlo,Monaco',
-      '"Sarasa Mono CJK SC"',
-      'Consolas,"Liberation Mono","Courier New",monospace',
-      '"Microsoft YaHei UI"',
-    ].join(','),
-  },
-  components: {
-    Button: {
-      baseStyle: {
-        fontWeight: 'normal',
-      },
-      defaultProps: {
-        colorScheme: 'teal',
-      },
-    },
-    Tabs: tabsTheme,
-    Link: {
-      baseStyle: {
-        color: 'blue.600',
-      },
-    },
-    Text: {
-      baseStyle: {
-        mt: 1,
-      },
-    },
-    Header: {
-      baseStyle: {
-        mt: 3,
-      },
-    },
-  },
-  styles: {
-    global: {
-      '#root': {
-        minHeight: '100vh',
-        maxHeight: '100vh',
-        display: 'flex',
-        flexDirection: 'column',
-      },
-    },
-  },
-  sizes: {
-    footer: {
-      container: '5rem',
-      content: '4rem',
-    },
-  },
-});

src/themes/Tabs.tsx

@@ -1,74 +0,0 @@
-import { tabsAnatomy } from '@chakra-ui/anatomy';
-import { createMultiStyleConfigHelpers, cssVar } from '@chakra-ui/react';
-
-const $fg = cssVar('tabs-color');
-const $bg = cssVar('tabs-bg');
-
-const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(tabsAnatomy.keys);
-
-const variantLineInvert = definePartsStyle((props) => {
-  const { colorScheme: c, orientation } = props;
-  const isVertical = orientation === 'vertical';
-  const borderProp = isVertical ? 'borderEnd' : 'borderTop';
-  const marginProp = isVertical ? 'marginEnd' : 'marginTop';
-
-  return {
-    tablist: {
-      [borderProp]: '2px solid',
-      borderColor: 'inherit',
-    },
-    tabpanels: {
-      flex: 1,
-      minH: 0,
-    },
-    tabpanel: {
-      padding: 0,
-    },
-    tab: {
-      [borderProp]: '2px solid',
-      borderColor: 'transparent',
-      [marginProp]: '-2px',
-      justifyContent: 'flex-end',
-      _selected: {
-        [$fg.variable]: `colors.${c}.600`,
-        _dark: {
-          [$fg.variable]: `colors.${c}.300`,
-        },
-        borderColor: 'currentColor',
-      },
-      _active: {
-        [$bg.variable]: 'colors.gray.200',
-        _dark: {
-          [$bg.variable]: 'colors.whiteAlpha.300',
-        },
-      },
-      _disabled: {
-        _active: { bg: 'none' },
-      },
-      color: $fg.reference,
-      bg: $bg.reference,
-    },
-    root: {
-      display: 'flex',
-      flexDir: isVertical ? 'row' : 'column',
-      gap: 8,
-      minH: 0,
-    },
-  };
-});
-
-export const tabsTheme = defineMultiStyleConfig({
-  baseStyle: {
-    tablist: {
-      userSelect: 'none',
-    },
-    tabpanel: {
-      minHeight: 0,
-      overflow: 'auto',
-      maxHeight: '100%',
-    },
-  },
-  variants: {
-    'line-i': variantLineInvert,
-  },
-});

vite.config.ts

@@ -96,13 +96,14 @@ export default defineConfig({
     },
   },
   build: {
+    minify: true,
     rollupOptions: {
       output: {
         manualChunks: {
-          reacts: ['react', 'react-dom', 'react-dropzone', 'react-redux', '@reduxjs/toolkit'],
+          core: ['react', 'react-dom'],
-          chakra: ['@chakra-ui/react', '@emotion/react', '@emotion/styled', 'framer-motion'],
+          router: ['react-router'],
-          icons: ['react-icons', '@chakra-ui/icons'],
+          store: ['react-redux', '@reduxjs/toolkit'],
-          utility: ['radash', 'nanoid', 'react-syntax-highlighter'],
+          extras: ['react-dropzone', 'react-toastify'],
         },
       },
     },