feat: clear trash

.babelrc

@@ -10,7 +10,5 @@
         }
       }
     ]
-  ],
-  "plugins": [
   ]
 }

.prettierrc.js

@@ -7,6 +7,4 @@ module.exports = {
   trailingComma: 'all',
   bracketSpacing: true,
   arrowParens: 'always',
-  plugins: [
-  ],
 };

app/components/Screen/index.tsx

@@ -5,8 +5,6 @@ import { getLang } from "@/app/locales";
 
 import useMobileScreen from "@/app/hooks/useMobileScreen";
 import { isIOS } from "@/app/utils";
-
-import backgroundUrl from "!url-loader!@/app/icons/background.svg";
 import useListenWinResize from "@/app/hooks/useListenWinResize";
 
 interface ScreenProps {
@@ -40,9 +38,8 @@ export default function Screen(props: ScreenProps) {
 
   return (
     <div
-      className={containerClassName}
+      className={`bg-global ${containerClassName}`}
       style={{
-        backgroundImage: `url(${backgroundUrl})`,
         direction: getLang() === "ar" ? "rtl" : "ltr",
       }}
     >

app/components/home.tsx

@@ -9,7 +9,7 @@ import styles from "./home.module.scss";
 import BotIcon from "../icons/bot.svg";
 import LoadingIcon from "../icons/three-dots.svg";
 
-import { getCSSVar } from "../utils";
+import { getCSSVar, useMobileScreen } from "../utils";
 
 import dynamic from "next/dynamic";
 import { ModelProvider, Path, SlotID } from "../constant";
@@ -23,14 +23,13 @@ import {
   Route,
   useLocation,
 } from "react-router-dom";
-import { SideBar } from "@/app/containers/Sidebar";
+import { SideBar } from "./sidebar";
 import { useAppConfig } from "../store/config";
 import { AuthPage } from "./auth";
 import { getClientConfig } from "../config/client";
 import { ClientApi } from "../client/api";
 import { useAccessStore } from "../store";
 import { identifyDefaultClaudeModel } from "../utils/checkers";
-import backgroundUrl from "!url-loader!@/app/icons/background.svg";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -125,9 +124,13 @@ const loadAsyncGoogleFont = () => {
 };
 
 function Screen() {
+  const config = useAppConfig();
   const location = useLocation();
   const isHome = location.pathname === Path.Home;
   const isAuth = location.pathname === Path.Auth;
+  const isMobileScreen = useMobileScreen();
+  const shouldTightBorder =
+    getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
 
   useEffect(() => {
     loadAsyncGoogleFont();
@@ -137,11 +140,10 @@ function Screen() {
     <div
       className={
         styles.container +
-        `${styles["container"]} ${styles["tight-container"]} ${
+        ` ${shouldTightBorder ? styles["tight-container"] : styles.container} ${
           getLang() === "ar" ? styles["rtl-screen"] : ""
         }`
       }
-      style={{ background: `url(${backgroundUrl})` }}
     >
       {isAuth ? (
         <>
@@ -152,15 +154,13 @@ function Screen() {
           <SideBar className={isHome ? styles["sidebar-show"] : ""} />
 
           <div className={styles["window-content"]} id={SlotID.AppBody}>
-            <ErrorBoundary>
+            <Routes>
-              <Routes>
+              <Route path={Path.Home} element={<Chat />} />
-                <Route path={Path.Home} element={<Chat />} />
+              <Route path={Path.NewChat} element={<NewChat />} />
-                <Route path={Path.NewChat} element={<NewChat />} />
+              <Route path={Path.Masks} element={<MaskPage />} />
-                <Route path={Path.Masks} element={<MaskPage />} />
+              <Route path={Path.Chat} element={<Chat />} />
-                <Route path={Path.Chat} element={<Chat />} />
+              <Route path={Path.Settings} element={<Settings />} />
-                <Route path={Path.Settings} element={<Settings />} />
+            </Routes>
-              </Routes>
-            </ErrorBoundary>
           </div>
         </>
       )}

app/icons/background.svg

@@ -1,36 +0,0 @@
-<svg width="1440" height="960" viewBox="0 0 1440 960" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_564_64804)">
-<rect width="1440" height="960" rx="16" fill="#E3E3ED"/>
-<g opacity="0.2">
-<g filter="url(#filter0_f_564_64804)">
-<path d="M283.28 480C283.28 582.725 297.308 666 201.492 666C105.675 666 28 582.725 28 480C28 377.275 105.675 294 201.492 294C297.308 294 283.28 377.275 283.28 480Z" fill="#2E42F3"/>
-</g>
-<g filter="url(#filter1_f_564_64804)">
-<path d="M270.453 403C270.453 463.199 261.63 512 321.89 512C382.15 512 431 463.199 431 403C431 342.801 382.15 294 321.89 294C261.63 294 270.453 342.801 270.453 403Z" fill="#E28383"/>
-</g>
-<g filter="url(#filter2_f_564_64804)">
-<path d="M270.351 570C270.351 602.033 263.502 628 310.287 628C357.073 628 395 602.033 395 570C395 537.967 357.073 512 310.287 512C263.502 512 270.351 537.967 270.351 570Z" fill="#91FFC4"/>
-</g>
-</g>
-</g>
-<defs>
-<filter id="filter0_f_564_64804" x="-211.8" y="54.2" width="735.6" height="851.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="119.9" result="effect1_foregroundBlur_564_64804"/>
-</filter>
-<filter id="filter1_f_564_64804" x="30.2" y="54.2" width="640.6" height="697.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="119.9" result="effect1_foregroundBlur_564_64804"/>
-</filter>
-<filter id="filter2_f_564_64804" x="30.2" y="272.2" width="604.6" height="595.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="119.9" result="effect1_foregroundBlur_564_64804"/>
-</filter>
-<clipPath id="clip0_564_64804">
-<rect width="1440" height="960" rx="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>

tailwind.config.js

@@ -74,6 +74,7 @@ module.exports = {
         'select-btn': 'rgba(0, 0, 0, 0.05)',
         'chat-actions-popover-color': 'var(--tip-popover-color)',
         'chat-panel': 'var(--chat-panel-bg)',
+        'global': '#E3E3ED',
       },
       boxShadow: {
         'btn': '0px 4px 10px 0px rgba(60, 68, 255, 0.14)',