From b15dac9ef4b6779a4272b3aa86ce5c6949dbb2fe Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Thu, 12 Jun 2025 17:37:20 +0800
Subject: [PATCH] refactor(styles): standardize padding and width across
 various components for improved layout consistency

---
 src/renderer/src/assets/styles/ant.scss       |  8 +-
 .../src/components/Popups/SearchPopup.tsx     | 13 ++-
 .../Popups/SelectModelPopup/popup.tsx         |  7 +-
 .../src/pages/history/HistoryPage.tsx         | 94 ++++++++++---------
 .../history/components/SearchMessage.tsx      |  3 +-
 .../history/components/SearchResults.tsx      |  3 +-
 .../history/components/TopicMessages.tsx      |  3 +-
 .../history/components/TopicsHistory.tsx      |  3 +-
 8 files changed, 75 insertions(+), 59 deletions(-)

diff --git a/src/renderer/src/assets/styles/ant.scss b/src/renderer/src/assets/styles/ant.scss
index afac53a155..034207c580 100644
--- a/src/renderer/src/assets/styles/ant.scss
+++ b/src/renderer/src/assets/styles/ant.scss
@@ -231,11 +231,11 @@
 }
 .ant-modal {
   .ant-modal-content {
-    border-radius: 12px !important;
-    border: 0.5px solid var(--color-border) !important;
-    padding: 0 0 8px 0 !important;
+    border-radius: 12px;
+    border: 0.5px solid var(--color-border);
+    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 {
diff --git a/src/renderer/src/components/Popups/SearchPopup.tsx b/src/renderer/src/components/Popups/SearchPopup.tsx
index 5b3936cbf5..3f0c59bf8a 100644
--- a/src/renderer/src/components/Popups/SearchPopup.tsx
+++ b/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>
diff --git a/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx b/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx
index a02c63bcb2..646e8894dc 100644
--- a/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx
+++ b/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,
-          border: '1px solid var(--color-border)'
+          paddingBottom: 16
+        },
+        body: {
+          maxHeight: 'inherit',
+          padding: 0
         }
       }}
       closeIcon={null}
diff --git a/src/renderer/src/pages/history/HistoryPage.tsx b/src/renderer/src/pages/history/HistoryPage.tsx
index f1b3890660..08619dc1a8 100644
--- a/src/renderer/src/pages/history/HistoryPage.tsx
+++ b/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`
-  display: flex;
-  flex-direction: row;
-  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;
+const SearchIcon = styled.div`
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
-  &:hover {
-    background-color: var(--color-background);
-    .anticon {
-      color: var(--color-text-1);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  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
diff --git a/src/renderer/src/pages/history/components/SearchMessage.tsx b/src/renderer/src/pages/history/components/SearchMessage.tsx
index 3fcfea6761..a03249ba35 100644
--- a/src/renderer/src/pages/history/components/SearchMessage.tsx
+++ b/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 {
diff --git a/src/renderer/src/pages/history/components/SearchResults.tsx b/src/renderer/src/pages/history/components/SearchResults.tsx
index 5882f4945c..2fd299a388 100644
--- a/src/renderer/src/pages/history/components/SearchResults.tsx
+++ b/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;
 `
diff --git a/src/renderer/src/pages/history/components/TopicMessages.tsx b/src/renderer/src/pages/history/components/TopicMessages.tsx
index 49f1c2ac89..4aa34bb48c 100644
--- a/src/renderer/src/pages/history/components/TopicMessages.tsx
+++ b/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 {
diff --git a/src/renderer/src/pages/history/components/TopicsHistory.tsx b/src/renderer/src/pages/history/components/TopicsHistory.tsx
index 85d8ef5a26..d95a3f7ae6 100644
--- a/src/renderer/src/pages/history/components/TopicsHistory.tsx
+++ b/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;
 `