feat: add tight border layout

app/404.tsx

@@ -1,12 +0,0 @@
-import Link from "next/link";
-
-export default function FourOhFour() {
-  return (
-    <>
-      <h1>404 - Page Not Found</h1>
-      <Link href="/">
-        <a>Go back home</a>
-      </Link>
-    </>
-  );
-}

app/500.tsx

@@ -1,12 +0,0 @@
-import Link from "next/link";
-
-export default function FourOhFour() {
-  return (
-    <>
-      <h1>500 - Page Not Found</h1>
-      <Link href="/">
-        <a>Go back home</a>
-      </Link>
-    </>
-  );
-}

app/components/home.module.scss

@@ -1,18 +1,33 @@
-.container {
-  max-width: 1080px;
-  min-width: 600px;
-  min-height: 480px;
-  width: 90vw;
-  height: 90vh;
+@mixin container {
   background-color: var(--white);
   border: var(--border-in-light);
   border-radius: 20px;
   box-shadow: var(--shadow);
   color: var(--black);
   background-color: var(--white);
+  min-width: 600px;
+  min-height: 480px;
 
   display: flex;
   overflow: hidden;
+  box-sizing: border-box;
+}
+
+.container {
+  @include container();
+
+  max-width: 1080px;
+  max-height: 864px;
+  width: 90vw;
+  height: 90vh;
+}
+
+.tight-container {
+  @include container();
+
+  width: 100vw;
+  height: 100vh;
+  border-radius: 0;
 }
 
 .sidebar {

app/components/home.tsx

@@ -291,11 +291,16 @@ export function Home() {
 
   // settings
   const [openSettings, setOpenSettings] = useState(false);
+  const config = useChatStore((state) => state.config);
 
   useSwitchTheme();
 
   return (
-    <div className={styles.container}>
+    <div
+      className={`${
+        config.tightBorder ? styles["tight-container"] : styles.container
+      }`}
+    >
       <div className={styles.sidebar}>
         <div className={styles["sidebar-header"]}>
           <div className={styles["sidebar-title"]}>ChatGPT Next</div>
@@ -347,9 +352,10 @@ export function Home() {
 
 export function Settings() {
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-  const [config, updateConfig] = useChatStore((state) => [
+  const [config, updateConfig, resetConfig] = useChatStore((state) => [
     state.config,
     state.updateConfig,
+    state.resetConfig,
   ]);
 
   return (
@@ -361,7 +367,12 @@ export function Settings() {
         </div>
         <div className={styles["window-actions"]}>
           <div className={styles["window-action-button"]}>
-            <IconButton icon={<ResetIcon />} bordered title="重置所有选项" />
+            <IconButton
+              icon={<ResetIcon />}
+              onClick={resetConfig}
+              bordered
+              title="重置所有选项"
+            />
           </div>
         </div>
       </div>
@@ -432,6 +443,19 @@ export function Settings() {
               </select>
             </div>
           </ListItem>
+
+          <ListItem>
+            <div className={styles["settings-title"]}>紧凑边框</div>
+            <input
+              type="checkbox"
+              checked={config.tightBorder}
+              onChange={(e) =>
+                updateConfig(
+                  (config) => (config.tightBorder = e.currentTarget.checked)
+                )
+              }
+            ></input>
+          </ListItem>
         </List>
         <List>
           <ListItem>

app/store.ts

@@ -30,8 +30,18 @@ interface ChatConfig {
   submitKey: SubmitKey;
   avatar: string;
   theme: Theme;
+  tightBorder: boolean;
 }
 
+const DEFAULT_CONFIG: ChatConfig = {
+  historyMessageCount: 5,
+  sendBotMessages: false as boolean,
+  submitKey: SubmitKey.CtrlEnter as SubmitKey,
+  avatar: "1fae0",
+  theme: Theme.Auto as Theme,
+  tightBorder: false,
+};
+
 interface ChatStat {
   tokenCount: number;
   wordCount: number;
@@ -94,6 +104,7 @@ interface ChatStore {
   ) => void;
 
   getConfig: () => ChatConfig;
+  resetConfig: () => void;
   updateConfig: (updater: (config: ChatConfig) => void) => void;
 }
 
@@ -103,11 +114,11 @@ export const useChatStore = create<ChatStore>()(
       sessions: [createEmptySession()],
       currentSessionIndex: 0,
       config: {
-        historyMessageCount: 5,
-        sendBotMessages: false as boolean,
-        submitKey: SubmitKey.CtrlEnter as SubmitKey,
-        avatar: "1fae0",
-        theme: Theme.Auto as Theme,
+        ...DEFAULT_CONFIG,
+      },
+
+      resetConfig() {
+        set(() => ({ config: { ...DEFAULT_CONFIG } }));
       },
 
       getConfig() {

next.config.js

@@ -1,8 +1,6 @@
 /** @type {import('next').NextConfig} */
 
-const withLess = require("next-with-less");
-
-const nextConfig = withLess({
+const nextConfig = {
   experimental: {
     appDir: true,
   },
@@ -14,6 +12,6 @@ const nextConfig = withLess({
 
     return config;
   },
-});
+};
 
 module.exports = nextConfig;