refactor(styles): standardize padding and width across various components for improved layout consistency

src/renderer/src/assets/styles/ant.scss

@@ -231,11 +231,11 @@
 }
 .ant-modal {
   .ant-modal-content {
-    border-radius: 12px !important;
+    border-radius: 12px;
-    border: 0.5px solid var(--color-border) !important;
+    border: 0.5px solid var(--color-border);
-    padding: 0 0 8px 0 !important;
+    padding: 0 0 8px 0;
     .ant-modal-header {
-      padding: 16px 16px 0 16px !important;
+      padding: 16px 16px 0 16px;
       border-radius: 12px;
     }
     .ant-modal-body {

src/renderer/src/components/Popups/SearchPopup.tsx

@@ -32,16 +32,23 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       onCancel={onCancel}
       afterClose={onClose}
       title={null}
-      width="920px"
+      width={700}
       transitionName="animation-move-down"
       styles={{
         content: {
+          borderRadius: 20,
           padding: 0,
-          border: `1px solid var(--color-frame-border)`
+          overflow: 'hidden',
+          paddingBottom: 16
         },
-        body: { height: '85vh' }
+        body: {
+          height: '85vh',
+          maxHeight: 'inherit',
+          padding: 0
+        }
       }}
       centered
+      closable={false}
       footer={null}>
       <HistoryPage />
     </Modal>

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

@@ -388,8 +388,11 @@ const PopupContainer: React.FC<Props> = ({ model, resolve }) => {
           borderRadius: 20,
           padding: 0,
           overflow: 'hidden',
-          paddingBottom: 20,
+          paddingBottom: 16
-          border: '1px solid var(--color-border)'
+        },
+        body: {
+          maxHeight: 'inherit',
+          padding: 0
         }
       }}
       closeIcon={null}

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

@@ -1,11 +1,11 @@
-import { ArrowLeftOutlined, EnterOutlined } from '@ant-design/icons'
+import { HStack } from '@renderer/components/Layout'
 import { useAppDispatch } from '@renderer/store'
 import { loadTopicMessagesThunk } from '@renderer/store/thunk/messageThunk'
 import { Topic } from '@renderer/types'
 import type { Message } from '@renderer/types/newMessage'
-import { Input, InputRef } from 'antd'
+import { Divider, Input, InputRef } from 'antd'
 import { last } from 'lodash'
-import { Search } from 'lucide-react'
+import { ChevronLeft, CornerDownLeft, Search } from 'lucide-react'
 import { FC, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -73,7 +73,36 @@ const TopicsPage: FC = () => {
 
   return (
     <Container>
-      <Header>
+      <HStack style={{ padding: '0 12px', marginTop: 8 }}>
+        <Input
+          prefix={
+            stack.length > 1 ? (
+              <SearchIcon className="back-icon" onClick={goBack}>
+                <ChevronLeft size={16} />
+              </SearchIcon>
+            ) : (
+              <SearchIcon>
+                <Search size={15} />
+              </SearchIcon>
+            )
+          }
+          suffix={search.length >= 2 ? <CornerDownLeft size={16} /> : <Search size={16} />}
+          ref={inputRef}
+          placeholder={t('models.search')}
+          value={search}
+          onChange={(e) => setSearch(e.target.value.trimStart())}
+          allowClear
+          autoFocus
+          spellCheck={false}
+          style={{ paddingLeft: 0 }}
+          variant="borderless"
+          size="middle"
+          onPressEnter={onSearch}
+        />
+      </HStack>
+      <Divider style={{ margin: 0, marginTop: 4, borderBlockStartWidth: 0.5 }} />
+
+      {/* <Header>
         {stack.length > 1 && (
           <HeaderLeft>
             <MenuIcon onClick={goBack}>
@@ -92,7 +121,7 @@ const TopicsPage: FC = () => {
           suffix={search.length >= 2 ? <EnterOutlined /> : <Search size={16} />}
           onPressEnter={onSearch}
         />
-      </Header>
+      </Header> */}
       <TopicsHistory
         keywords={search}
         onClick={onTopicClick as any}
@@ -118,50 +147,23 @@ const Container = styled.div`
   height: 100%;
 `
 
-const Header = styled.div`
+const SearchIcon = styled.div`
-  display: flex;
+  width: 32px;
-  flex-direction: row;
+  height: 32px;
-  align-items: center;
-  justify-content: center;
-  padding: 12px 0;
-  width: 100%;
-  position: relative;
-  background-color: var(--color-background-mute);
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  border-bottom: 0.5px solid var(--color-frame-border);
-`
-
-const HeaderLeft = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: absolute;
-  top: 12px;
-  left: 15px;
-`
-
-const MenuIcon = styled.div`
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  width: 33px;
-  height: 33px;
   border-radius: 50%;
-  &:hover {
+  display: flex;
-    background-color: var(--color-background);
+  flex-direction: row;
-    .anticon {
+  justify-content: center;
-      color: var(--color-text-1);
+  align-items: center;
+  background-color: var(--color-background-soft);
+  margin-right: 2px;
+  &.back-icon {
+    cursor: pointer;
+    transition: background-color 0.2s;
+    &:hover {
+      background-color: var(--color-background-mute);
     }
   }
 `
 
-const SearchInput = styled(Input)`
-  border-radius: 30px;
-  width: 800px;
-  height: 36px;
-`
-
 export default TopicsPage

src/renderer/src/pages/history/components/SearchMessage.tsx

@@ -76,7 +76,8 @@ const MessagesContainer = styled.div`
 `
 
 const ContainerWrapper = styled.div`
-  width: 800px;
+  width: 100%;
+  padding: 0 16px;
   display: flex;
   flex-direction: column;
   .message {

src/renderer/src/pages/history/components/SearchResults.tsx

@@ -151,7 +151,8 @@ const Container = styled.div`
 `
 
 const ContainerWrapper = styled.div`
-  width: 800px;
+  width: 100%;
+  padding: 0 16px;
   display: flex;
   flex-direction: column;
 `

src/renderer/src/pages/history/components/TopicMessages.tsx

@@ -88,7 +88,8 @@ const MessagesContainer = styled.div`
 `
 
 const ContainerWrapper = styled.div`
-  width: 800px;
+  width: 100%;
+  padding: 0 16px;
   display: flex;
   flex-direction: column;
   .message {

src/renderer/src/pages/history/components/TopicsHistory.tsx

@@ -78,7 +78,8 @@ const TopicsHistory: React.FC<Props> = ({ keywords, onClick, onSearch, ...props
 }
 
 const ContainerWrapper = styled.div`
-  width: 800px;
+  width: 100%;
+  padding: 0 16px;
   display: flex;
   flex-direction: column;
 `