feat: ui fixed

app/containers/Chat/components/ChatActions.tsx

@@ -182,7 +182,7 @@ export function ChatActions(props: {
             return (
               <div
                 key={act.text}
-                className={`flex items-center gap-3 p-3 rounded-action-btn leading-6`}
+                className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
                 onClick={act.onClick}
               >
                 {act.icon}

app/containers/Chat/components/ChatMessagePanel.tsx

@@ -180,7 +180,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
                 )}
               </div>
               <div
-                className={`group relative flex-1 flex ${
+                className={`group relative flex flex ${
                   isUser ? "flex-row-reverse" : ""
                 }`}
               >

app/containers/Chat/components/MessageActions.tsx

@@ -261,17 +261,13 @@ export default function MessageActions(props: MessageActionsProps) {
     showActions && (
       <div
         className={`
-          absolute z-10
+          absolute z-10 w-[100%]
           ${isUser ? "right-0" : "left-0"} 
           transition-all duration-300 
           opacity-0
           pointer-events-none
           group-hover:opacity-100 
           group-hover:pointer-events-auto
-          bg-chat-message-actions 
-          rounded-md 
-          shadow-message-actions-bar 
-          dark:bg-none
           ${className}
         `}
       >
@@ -285,7 +281,13 @@ export default function MessageActions(props: MessageActionsProps) {
             onUserStop,
           })}
           groups={groupsTypes[groupsType]}
-          className="flex flex-row gap-1  p-1"
+          className={`
+            float-right flex flex-row gap-1  p-1
+            bg-chat-message-actions 
+            rounded-md 
+            shadow-message-actions-bar 
+            dark:bg-none
+          `}
         />
       </div>
     )

app/containers/Chat/index.tsx

@@ -54,12 +54,17 @@ export function SessionItem(props: {
     <Draggable draggableId={`${props.id}`} index={props.index}>
       {(provided) => (
         <div
-          className={`group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2 ${
-            props.selected &&
-            (currentPath === Path.Chat || currentPath === Path.Home)
-              ? `bg-chat-menu-session-selected border-chat-menu-session-selected border `
-              : `bg-chat-menu-session-unselected hover:bg-chat-menu-session-hovered`
-          }`}
+          className={`
+            group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2 
+            border 
+            bg-chat-menu-session-unselected border-chat-menu-session-unselected
+            ${
+              props.selected &&
+              (currentPath === Path.Chat || currentPath === Path.Home)
+                ? `!bg-chat-menu-session-selected !border-chat-menu-session-selected`
+                : `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered`
+            }
+          `}
           onClick={props.onClick}
           ref={(ele) => {
             draggableRef.current = ele;
@@ -94,7 +99,7 @@ export function SessionItem(props: {
           <Popover
             content={
               <div
-                className={`flex items-center gap-3 p-3 rounded-action-btn leading-6`}
+                className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
                 onClickCapture={(e) => {
                   props.onDelete?.();
                   e.preventDefault();
@@ -208,12 +213,12 @@ export default MenuLayout(function SessionList(props) {
       </div>
 
       <div
-        className={`flex-1 overflow-y-auto overflow-x-hidden`}
-        onClick={(e) => {
-          if (e.target === e.currentTarget) {
-            navigate(Path.Home);
-          }
-        }}
+        className={`flex-1 overflow-y-auto`}
+        // onClick={(e) => {
+        //   if (e.target === e.currentTarget) {
+        //     navigate(Path.Home);
+        //   }
+        // }}
       >
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="chat-list">

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>
   );

app/containers/Sidebar/index.tsx

@@ -61,6 +61,8 @@ export function SideBar(props: { className?: string }) {
               mobileInactive: <DiscoverMobileInactive />,
             },
             title: "Discover",
+            activeClassName: "shadow-sidebar-btn-shadow",
+            className: "mb-4 hover:bg-sidebar-btn-hovered",
           },
           {
             id: Path.Home,
@@ -71,11 +73,13 @@ export function SideBar(props: { className?: string }) {
               mobileInactive: <AssistantMobileInactive />,
             },
             title: "Assistant",
+            activeClassName: "shadow-sidebar-btn-shadow",
+            className: "mb-4 hover:bg-sidebar-btn-hovered",
           },
           {
             id: "github",
             icons: <GitHubIcon />,
-            className: "p-2",
+            className: "!p-2 mb-3 hover:bg-sidebar-btn-hovered",
           },
           {
             id: Path.Settings,
@@ -85,7 +89,7 @@ export function SideBar(props: { className?: string }) {
               mobileActive: <SettingMobileActive />,
               mobileInactive: <SettingMobileInactive />,
             },
-            className: "p-2",
+            className: "!p-2 hover:bg-sidebar-btn-hovered",
             title: "Settrings",
           },
         ]}