From 2855575b36ecde333232f01f161c982869b326a3 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Tue, 10 Sep 2024 15:20:59 +0800
Subject: [PATCH] style: Refine UI styles and layout.

- Adjusted various font and layout styles to refine the user interface.
- Updated the minimum width of the NavbarRightContainer to match the var(--topic-list-width) setting.
- Added logic to synchronize local _activeTopic with activeTopic state.
- Improve logic for dynamically updating tab state in RightSidebar component based on position and topic settings.
- Removed unneeded console statement from font size slider's onChangeComplete event.
- Adjusted the width of the SettingMenus component to utilize the --settings-width variable.
---
 src/renderer/src/assets/styles/index.scss     |  4 ++--
 src/renderer/src/components/app/Navbar.tsx    |  2 +-
 src/renderer/src/hooks/useTopic.ts            |  2 ++
 src/renderer/src/pages/home/RightSidebar.tsx  | 20 +++++++++++++++----
 src/renderer/src/pages/home/Settings.tsx      |  5 +----
 .../src/pages/settings/SettingsPage.tsx       |  2 +-
 6 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index 9dcb0a38..d1fab437 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -31,7 +31,7 @@
   --color-text: var(--color-text-1);
   --color-icon: #ffffff99;
   --color-icon-white: #ffffff;
-  --color-border: #ffffff28;
+  --color-border: #ffffff20;
   --color-border-soft: #ffffff20;
   --color-error: #f44336;
   --color-link: #1677ff;
@@ -50,7 +50,7 @@
 
   --assistants-width: 280px;
   --topic-list-width: 280px;
-  --settings-width: var(--assistants-width);
+  --settings-width: 260px;
 }
 
 body[theme-mode='light'] {
diff --git a/src/renderer/src/components/app/Navbar.tsx b/src/renderer/src/components/app/Navbar.tsx
index c92c8b83..36a1e093 100644
--- a/src/renderer/src/components/app/Navbar.tsx
+++ b/src/renderer/src/components/app/Navbar.tsx
@@ -66,7 +66,7 @@ const NavbarCenterContainer = styled.div`
 `
 
 const NavbarRightContainer = styled.div`
-  min-width: var(--settings-width);
+  min-width: var(--topic-list-width);
   display: flex;
   align-items: center;
   padding: 0 12px;
diff --git a/src/renderer/src/hooks/useTopic.ts b/src/renderer/src/hooks/useTopic.ts
index 6fa9767b..0b1bc5a7 100644
--- a/src/renderer/src/hooks/useTopic.ts
+++ b/src/renderer/src/hooks/useTopic.ts
@@ -10,6 +10,8 @@ export function useActiveTopic(_assistant: Assistant) {
   const { assistant } = useAssistant(_assistant.id)
   const [activeTopic, setActiveTopic] = useState(_activeTopic || assistant?.topics[0])
 
+  _activeTopic = activeTopic
+
   useEffect(() => {
     // activeTopic not in assistant.topics
     if (assistant && !find(assistant.topics, { id: activeTopic?.id })) {
diff --git a/src/renderer/src/pages/home/RightSidebar.tsx b/src/renderer/src/pages/home/RightSidebar.tsx
index 9027ae95..7d43cbe6 100644
--- a/src/renderer/src/pages/home/RightSidebar.tsx
+++ b/src/renderer/src/pages/home/RightSidebar.tsx
@@ -24,11 +24,11 @@ interface Props {
 
 type Tab = 'assistants' | 'topic' | 'settings'
 
-let _tab = ''
+let _tab: any = ''
 
 const RightSidebar: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssistant, setActiveTopic, position }) => {
   const { addAssistant } = useAssistants()
-  const [tab, setTab] = useState<Tab>(_tab || position === 'left' ? 'assistants' : 'topic')
+  const [tab, setTab] = useState<Tab>(position === 'left' ? _tab || 'assistants' : 'topic')
   const { topicPosition } = useSettings()
   const { defaultAssistant } = useDefaultAssistant()
   const { toggleShowTopics } = useShowTopics()
@@ -37,7 +37,10 @@ const RightSidebar: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssist
 
   const borderStyle = '0.5px solid var(--color-border)'
   const border = position === 'left' ? { borderRight: borderStyle } : { borderLeft: borderStyle }
-  _tab = tab
+
+  if (position === 'left' && topicPosition === 'left') {
+    _tab = tab
+  }
 
   const showTab = !(position === 'left' && topicPosition === 'right')
   const assistantTab = {
@@ -73,8 +76,17 @@ const RightSidebar: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssist
     return () => unsubscribes.forEach((unsub) => unsub())
   }, [position, showTab, tab, toggleShowTopics, topicPosition])
 
+  useEffect(() => {
+    if (position === 'right' && topicPosition === 'right' && tab === 'assistants') {
+      setTab('topic')
+    }
+    if (position === 'left' && topicPosition === 'right' && tab !== 'assistants') {
+      setTab('assistants')
+    }
+  }, [position, tab, topicPosition])
+
   return (
-    <Container style={{ ...border }}>
+    <Container style={border}>
       {showTab && (
         <Segmented
           value={tab}
diff --git a/src/renderer/src/pages/home/Settings.tsx b/src/renderer/src/pages/home/Settings.tsx
index ae263f4a..5dba6249 100644
--- a/src/renderer/src/pages/home/Settings.tsx
+++ b/src/renderer/src/pages/home/Settings.tsx
@@ -187,10 +187,7 @@ const SettingsTab: FC<Props> = (props) => {
           <Slider
             value={fontSizeValue}
             onChange={(value) => setFontSizeValue(value)}
-            onChangeComplete={(value) => {
-              dispatch(setFontSize(value))
-              console.debug('set font size', value)
-            }}
+            onChangeComplete={(value) => dispatch(setFontSize(value))}
             min={12}
             max={18}
             step={1}
diff --git a/src/renderer/src/pages/settings/SettingsPage.tsx b/src/renderer/src/pages/settings/SettingsPage.tsx
index 15939550..a49c3a6b 100644
--- a/src/renderer/src/pages/settings/SettingsPage.tsx
+++ b/src/renderer/src/pages/settings/SettingsPage.tsx
@@ -90,7 +90,7 @@ const ContentContainer = styled.div`
 const SettingMenus = styled.ul`
   display: flex;
   flex-direction: column;
-  min-width: var(--assistants-width);
+  min-width: var(--settings-width);
   border-right: 0.5px solid var(--color-border);
   padding: 10px;
 `