feat: add border to list item

src/main/services/WindowService.ts

@@ -43,7 +43,7 @@ export class WindowService {
       show: true,
       autoHideMenuBar: true,
       transparent: isMac,
-      vibrancy: 'sidebar',
+      vibrancy: 'under-window',
       visualEffectState: 'active',
       titleBarStyle: 'hidden',
       titleBarOverlay: theme === 'dark' ? titleBarOverlayDark : titleBarOverlayLight,

src/renderer/src/assets/styles/index.scss

@@ -9,9 +9,9 @@
   --color-white-soft: rgba(255, 255, 255, 0.8);
   --color-white-mute: rgba(255, 255, 255, 0.94);
 
-  --color-black: #0f0f0f;
+  --color-black: #151515;
-  --color-black-soft: #191919;
+  --color-black-soft: #222222;
-  --color-black-mute: #242424;
+  --color-black-mute: #333333;
 
   --color-gray-1: #515c67;
   --color-gray-2: #414853;
@@ -32,8 +32,8 @@
   --color-text: var(--color-text-1);
   --color-icon: #ffffff99;
   --color-icon-white: #ffffff;
-  --color-border: #ffffff24;
+  --color-border: #ffffff22;
-  --color-border-soft: #ffffff20;
+  --color-border-soft: #ffffff11;
   --color-border-mute: #ffffff11;
   --color-error: #f44336;
   --color-link: #1677ff;
@@ -90,8 +90,8 @@ body[theme-mode='light'] {
   --color-icon: #00000099;
   --color-icon-white: #000000;
   --color-border: #00000028;
-  --color-border-soft: #00000028;
+  --color-border-soft: #00000020;
-  --color-border-mute: #00000011;
+  --color-border-mute: #00000010;
   --color-error: #f44336;
   --color-link: #1677ff;
   --color-code-background: #e3e3e3;

src/renderer/src/components/AssistantSettings/index.tsx

@@ -143,10 +143,11 @@ const StyledModal = styled(Modal)`
   }
   .ant-menu-item {
     height: 36px;
-    border-radius: 6px;
     color: var(--color-text-2);
     display: flex;
     align-items: center;
+    border: 0.5px solid transparent;
+    border-radius: 6px;
     .ant-menu-title-content {
       line-height: 36px;
     }
@@ -157,6 +158,7 @@ const StyledModal = styled(Modal)`
   }
   .ant-menu-item-selected {
     background-color: var(--color-background-soft);
+    border: 0.5px solid var(--color-border);
     .ant-menu-title-content {
       color: var(--color-text-1);
       font-weight: 500;

src/renderer/src/components/Popups/SelectModelPopup.tsx

@@ -168,7 +168,15 @@ const PopupContainer: React.FC<PopupContainerProps> = ({ model, resolve }) => {
       onCancel={onCancel}
       afterClose={onClose}
       transitionName="ant-move-down"
-      styles={{ content: { borderRadius: 20, padding: 0, overflow: 'hidden', paddingBottom: 20 } }}
+      styles={{
+        content: {
+          borderRadius: 20,
+          padding: 0,
+          overflow: 'hidden',
+          paddingBottom: 20,
+          border: '1px solid var(--color-border)'
+        }
+      }}
       closeIcon={null}
       footer={null}>
       <HStack style={{ padding: '0 12px', marginTop: 5 }}>

src/renderer/src/components/app/Navbar.tsx

@@ -38,7 +38,6 @@ const NavbarContainer = styled.div`
   max-height: var(--navbar-height);
   margin-left: ${isMac ? 'calc(var(--sidebar-width) * -1)' : 0};
   padding-left: ${isMac ? 'var(--sidebar-width)' : 0};
-  transition: background-color 0.3s ease;
   -webkit-app-region: drag;
 `
 

src/renderer/src/components/app/Sidebar.tsx

@@ -127,7 +127,6 @@ const Container = styled.div`
   height: ${isMac ? 'calc(100vh - var(--navbar-height))' : '100vh'};
   -webkit-app-region: drag !important;
   margin-top: ${isMac ? 'var(--navbar-height)' : 0};
-  transition: background-color 0.3s ease;
 `
 
 const AvatarImg = styled(Avatar)`
@@ -158,14 +157,12 @@ const Icon = styled.div`
   align-items: center;
   border-radius: 50%;
   margin-bottom: 5px;
-  transition: background-color 0.2s ease;
   -webkit-app-region: none;
-  transition: all 0.2s ease;
+  border: 0.5px solid transparent;
   .iconfont,
   .anticon {
     color: var(--color-icon);
     font-size: 20px;
-    transition: color 0.2s ease;
     text-decoration: none;
   }
   .anticon {
@@ -181,6 +178,7 @@ const Icon = styled.div`
   }
   &.active {
     background-color: var(--color-active);
+    border: 0.5px solid var(--color-border);
     .iconfont,
     .anticon {
       color: var(--color-icon-white);

src/renderer/src/context/AntdProvider.tsx

@@ -24,9 +24,9 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
             trackBg: 'transparent',
             itemSelectedBg: isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
             boxShadowTertiary: undefined,
-            borderRadiusLG: 12,
+            borderRadiusLG: 16,
-            borderRadiusSM: 12,
+            borderRadiusSM: 16,
-            borderRadiusXS: 12
+            borderRadiusXS: 16
           },
           Menu: {
             activeBarBorderWidth: 0,

src/renderer/src/pages/agents/AgentsPage.tsx

@@ -253,11 +253,12 @@ const Tabs = styled(TabsAntd)`
   }
   .ant-tabs-tab {
     margin: 0 !important;
-    border-radius: 7px;
+    border-radius: 16px;
     margin-bottom: 5px !important;
     font-size: 13px;
     justify-content: left;
-    padding: 7px 12px !important;
+    padding: 7px 15px !important;
+    border: 0.5px solid transparent;
     .ant-tabs-tab-btn {
       white-space: nowrap;
       overflow: hidden;
@@ -270,8 +271,9 @@ const Tabs = styled(TabsAntd)`
     }
   }
   .ant-tabs-tab-active {
-    background-color: var(--color-background-mute);
+    background-color: var(--color-background-soft);
     border-right: none;
+    border: 0.5px solid var(--color-border);
   }
   .ant-tabs-content-holder {
     border-left: 0.5px solid var(--color-border);

src/renderer/src/pages/agents/components/AgentCard.tsx

@@ -81,7 +81,7 @@ const Container = styled.div`
   text-align: center;
   gap: 10px;
   background-color: var(--color-background);
-  border-radius: 8px;
+  border-radius: 16px;
   position: relative;
   overflow: hidden;
   cursor: pointer;

src/renderer/src/pages/files/FilesPage.tsx

@@ -220,7 +220,7 @@ const ImageInfo = styled.div`
 const SideNav = styled.div`
   width: var(--assistants-width);
   border-right: 0.5px solid var(--color-border);
-  padding: 15px;
+  padding: 7px 12px;
 
   .ant-menu {
     border-inline-end: none !important;
@@ -228,18 +228,22 @@ const SideNav = styled.div`
   }
 
   .ant-menu-item {
-    height: 40px;
+    height: 36px;
-    line-height: 40px;
+    line-height: 36px;
     margin: 4px 0;
     width: 100%;
+    border-radius: 16px;
+    border: 0.5px solid transparent;
 
     &:hover {
-      background-color: var(--color-background-soft);
+      background-color: var(--color-background-soft) !important;
     }
 
     &.ant-menu-item-selected {
       background-color: var(--color-background-soft);
       color: var(--color-primary);
+      border: 0.5px solid var(--color-border);
+      color: var(--color-text);
     }
   }
 `

src/renderer/src/pages/history/HistoryPage.tsx

@@ -106,7 +106,7 @@ const Header = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: 10px 0;
+  padding: 12px 0;
   width: 100%;
   position: relative;
   background-color: var(--color-background-mute);

src/renderer/src/pages/home/Messages/Message.tsx

@@ -216,7 +216,7 @@ const MessageFooter = styled.div`
   align-items: center;
   padding: 2px 0;
   margin-top: 2px;
-  border-top: 0.5px dashed var(--color-border);
+  border-top: 1px dotted var(--color-border);
   gap: 20px;
 `
 

src/renderer/src/pages/home/Messages/Messages.tsx

@@ -44,7 +44,7 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
     const showRightTopics = showTopics && topicPosition === 'right'
     const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
     const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : ''
-    return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth} - 2px)`
+    return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth})`
   }, [showAssistants, showTopics, topicPosition])
 
   const scrollToBottom = useCallback(() => {

src/renderer/src/pages/home/Messages/Prompt.tsx

@@ -31,6 +31,7 @@ const Container = styled.div`
   margin: 0 20px 0 20px;
   border-radius: 6px;
   cursor: pointer;
+  border: 0.5px solid var(--color-border);
 `
 
 const Text = styled.div`

src/renderer/src/pages/home/Navbar.tsx

@@ -101,7 +101,6 @@ const TitleText = styled.span`
   margin-left: 5px;
   font-family: Ubuntu;
   font-size: 13px;
-  font-weight: 500;
 `
 
 export default HeaderNavbar

src/renderer/src/pages/home/Tabs/AssistantsTab.tsx

@@ -150,10 +150,9 @@ const Assistants: FC<Props> = ({
                 <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
                 {isCurrent && (
                   <ArrowRightButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>
-                    <i className="iconfont icon-gridlines" />
+                    <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>
                   </ArrowRightButton>
                 )}
-                {false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>}
               </AssistantItem>
             </Dropdown>
           )
@@ -175,7 +174,7 @@ const Assistants: FC<Props> = ({
 const Container = styled(Scrollbar)`
   display: flex;
   flex-direction: column;
-  padding-top: 10px;
+  padding-top: 11px;
 `
 
 const AssistantItem = styled.div`
@@ -187,7 +186,8 @@ const AssistantItem = styled.div`
   margin: 0 10px;
   padding-right: 35px;
   font-family: Ubuntu;
-  border-radius: 17px;
+  border-radius: 16px;
+  border: 0.5px solid transparent;
   cursor: pointer;
   .iconfont {
     opacity: 0;
@@ -197,16 +197,10 @@ const AssistantItem = styled.div`
     background-color: var(--color-background-soft);
   }
   &.active {
-    background-color: var(--color-background-mute);
+    background-color: var(--color-background-soft);
+    border: 0.5px solid var(--color-border);
     .name {
     }
-    .topics-count {
-      display: none;
-    }
-    .iconfont {
-      opacity: 1;
-      color: var(--color-text-2);
-    }
   }
 `
 
@@ -228,24 +222,16 @@ const ArrowRightButton = styled.div`
   height: 22px;
   min-width: 22px;
   min-height: 22px;
-  border-radius: 4px;
+  border-radius: 11px;
   position: absolute;
   background-color: var(--color-background);
   right: 9px;
   top: 6px;
-  .iconfont {
-    font-size: 12px;
-  }
 `
 
 const TopicCount = styled.div`
-  color: var(--color-text-2);
+  color: var(--color-text);
   font-size: 10px;
-  margin-right: 3px;
-  background-color: var(--color-background-mute);
-  opacity: 0.8;
-  width: 20px;
-  height: 20px;
   border-radius: 10px;
   display: flex;
   flex-direction: row;

src/renderer/src/pages/home/Tabs/SettingsTab.tsx

@@ -387,6 +387,7 @@ const Container = styled(Scrollbar)`
   flex-direction: column;
   padding: 0 10px;
   padding-right: 5px;
+  padding-top: 2px;
 `
 
 const Label = styled.p`

src/renderer/src/pages/home/Tabs/TopicsTab.tsx

@@ -197,7 +197,9 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
                 style={{ borderRadius }}
                 onClick={() => onSwitchTopic(topic)}>
                 <TopicName className="name">{topic.name.replace('`', '')}</TopicName>
-                {showTopicTime && <TopicTime>{dayjs(topic.createdAt).format('MM/DD HH:mm')}</TopicTime>}
+                {showTopicTime && (
+                  <TopicTime className="time">{dayjs(topic.createdAt).format('MM/DD HH:mm')}</TopicTime>
+                )}
                 {isActive && (
                   <MenuButton
                     className="menu"
@@ -224,13 +226,13 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
 const Container = styled(Scrollbar)`
   display: flex;
   flex-direction: column;
-  padding-top: 10px;
+  padding-top: 11px;
 `
 
 const TopicListItem = styled.div`
   padding: 7px 12px;
   margin: 0 10px;
-  border-radius: 17px;
+  border-radius: 16px;
   font-family: Ubuntu;
   font-size: 13px;
   display: flex;
@@ -239,6 +241,7 @@ const TopicListItem = styled.div`
   position: relative;
   font-family: Ubuntu;
   cursor: pointer;
+  border: 0.5px solid transparent;
   .menu {
     opacity: 0;
     color: var(--color-text-3);
@@ -246,17 +249,16 @@ const TopicListItem = styled.div`
   &:hover {
     background-color: var(--color-background-soft);
     .name {
-      opacity: 1;
     }
   }
   &.active {
-    background-color: var(--color-background-mute);
+    background-color: var(--color-background-soft);
+    border: 0.5px solid var(--color-border);
     .name {
-      opacity: 1;
     }
     .menu {
       opacity: 1;
-      background-color: var(--color-background-mute);
+      background-color: var(--color-background-soft);
       &:hover {
         color: var(--color-text-2);
       }

src/renderer/src/pages/home/Tabs/index.tsx

@@ -168,11 +168,15 @@ const TabContent = styled.div`
 const Segmented = styled(AntSegmented)`
   .ant-segmented-item {
     overflow: hidden;
+    transition: none !important;
     height: 30px;
     line-height: 30px;
+    background-color: transparent;
   }
   .ant-segmented-item-selected {
-    background-color: var(--color-background-mute);
+    background-color: var(--color-background-soft);
+    border: 0.5px solid var(--color-border);
+    transition: none !important;
   }
   .ant-segmented-item-label {
     align-items: center;
@@ -195,6 +199,11 @@ const Segmented = styled(AntSegmented)`
   .ant-segmented-item-icon + * {
     margin-left: 4px;
   }
+  .ant-segmented-thumb {
+    transition: none !important;
+    background-color: var(--color-background-soft);
+    border: 0.5px solid var(--color-border);
+  }
 `
 
 export default HomeTabs

src/renderer/src/pages/home/components/SelectModelButton.tsx

@@ -45,11 +45,12 @@ const DropdownButton = styled(Button)`
   padding: 12px 8px 12px 3px;
   -webkit-app-region: none;
   box-shadow: none;
+  background-color: transparent;
+  border: 1px solid transparent;
 `
 
 const ModelName = styled.span`
   margin-left: -2px;
-  font-weight: bolder;
 `
 
 export default SelectModelButton

src/renderer/src/pages/settings/ProviderSettings/index.tsx

@@ -124,7 +124,7 @@ const ProvidersList: FC = () => {
                                   {provider.isSystem ? t(`provider.${provider.id}`) : provider.name}
                                 </ProviderItemName>
                                 {provider.enabled && (
-                                  <Tag color="green" style={{ marginLeft: 'auto' }}>
+                                  <Tag color="green" style={{ marginLeft: 'auto', borderRadius: 16 }}>
                                     ON
                                   </Tag>
                                 )}
@@ -182,14 +182,16 @@ const ProviderListItem = styled.div`
   padding: 5px 8px;
   width: 100%;
   cursor: grab;
-  border-radius: 5px;
+  border-radius: 16px;
   font-size: 14px;
   transition: all 0.2s ease-in-out;
+  border: 0.5px solid transparent;
   &:hover {
     background: var(--color-background-soft);
   }
   &.active {
-    background: var(--color-background-mute);
+    background: var(--color-background-soft);
+    border: 0.5px solid var(--color-border);
     font-weight: bold !important;
   }
 `

src/renderer/src/pages/settings/SettingsPage.tsx

@@ -116,9 +116,10 @@ const MenuItem = styled.li`
   padding: 6px 10px;
   width: 100%;
   cursor: pointer;
-  border-radius: 5px;
+  border-radius: 16px;
   font-weight: 500;
   transition: all 0.2s ease-in-out;
+  border: 0.5px solid transparent;
   .anticon {
     font-size: 16px;
     opacity: 0.8;
@@ -133,7 +134,8 @@ const MenuItem = styled.li`
     background: var(--color-background-soft);
   }
   &.active {
-    background: var(--color-background-mute);
+    background: var(--color-background-soft);
+    border: 0.5px solid var(--color-border);
   }
 `