feat: ui fixed

app/containers/Settings/index.tsx

@@ -5,6 +5,7 @@ import Panel from "./SettingPanel";
 
 import GotoIcon from "@/app/icons/goto.svg";
 import { useAppConfig } from "@/app/store";
+import { useState } from "react";
 
 export default MenuLayout(function SettingList(props) {
   const { setShowPanel } = props;
@@ -12,12 +13,21 @@ export default MenuLayout(function SettingList(props) {
 
   const { isMobileScreen } = config;
 
+  const list = [
+    {
+      id: Locale.Settings.GeneralSettings,
+      title: Locale.Settings.GeneralSettings,
+      icon: null,
+    },
+  ];
+
+  const [selected, setSelected] = useState(list[0].id);
+
   return (
     <div
       className={`
-      px-6
       max-md:h-[100%] max-md:mx-[-1.5rem] max-md:py-6 max-md:bg-settings-menu-mobile
-      md:pt-7 md:px-4
+      md:pt-7
     `}
     >
       <div data-tauri-drag-region>
@@ -25,7 +35,7 @@ export default MenuLayout(function SettingList(props) {
           className={`
             flex items-center justify-between 
             max-md:h-menu-title-mobile
-            md:pb-5
+            md:pb-5 md:px-4
           `}
           data-tauri-drag-region
         >
@@ -38,22 +48,35 @@ export default MenuLayout(function SettingList(props) {
       <div
         className={`flex flex-col overflow-y-auto overflow-x-hidden w-[100%]`}
       >
-        <div
-          className={`
-            p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
-            border 
-            border-opacity-0 rounded-md
-            hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected 
-            flex justify-between items-center
-            max-md:bg-settings-menu-item-mobile
-          `}
-          onClick={() => {
-            setShowPanel?.(true);
-          }}
-        >
-          {Locale.Settings.GeneralSettings}
-          {isMobileScreen && <GotoIcon />}
-        </div>
+        {list.map((i) => (
+          <div
+            key={i.id}
+            className={`
+              p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
+             cursor-pointer
+              border 
+              rounded-md
+
+              bg-chat-menu-session-unselected border-chat-menu-session-unselected
+              ${
+                selected === i.id && !isMobileScreen
+                  ? `!bg-chat-menu-session-selected !border-chat-menu-session-selected`
+                  : `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered`
+              }
+
+              hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected 
+              flex justify-between items-center
+              max-md:bg-settings-menu-item-mobile
+            `}
+            onClick={() => {
+              setShowPanel?.(true);
+            }}
+          >
+            {i.title}
+            {i.icon}
+            {isMobileScreen && <GotoIcon />}
+          </div>
+        ))}
       </div>
     </div>
   );