feat: redesign settings page

app/store/config.ts

@@ -1,5 +1,4 @@
 import { LLMModel } from "../client/api";
-import { isMacOS } from "../utils";
 import { getClientConfig } from "../config/client";
 import {
   DEFAULT_INPUT_TEMPLATE,
@@ -8,6 +7,9 @@ import {
   StoreKey,
 } from "../constant";
 import { createPersistStore } from "../utils/store";
+import System from "@/app/icons/systemIcon.svg";
+import Light from "@/app/icons/lightIcon.svg";
+import Dark from "@/app/icons/darkIcon.svg";
 
 export type ModelType = (typeof DEFAULT_MODELS)[number]["name"];
 
@@ -25,6 +27,21 @@ export enum Theme {
   Light = "light",
 }
 
+export const ThemeConfig = {
+  [Theme.Auto]: {
+    icon: System,
+    title: "Follow System",
+  },
+  [Theme.Light]: {
+    icon: Light,
+    title: "Light model",
+  },
+  [Theme.Dark]: {
+    icon: Dark,
+    title: "Dark model",
+  },
+};
+
 export const DEFAULT_CONFIG = {
   lastUpdate: Date.now(), // timestamp, to merge state
 
@@ -45,6 +62,8 @@ export const DEFAULT_CONFIG = {
   customModels: "",
   models: DEFAULT_MODELS as any as LLMModel[],
 
+  isMobileScreen: false,
+
   modelConfig: {
     model: "gpt-3.5-turbo" as ModelType,
     temperature: 0.5,