feat: add tight border layout

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>