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

@@ -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'] {

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;

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 })) {

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}

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}

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