From e5956d40391ef7f108db6a78154dc898cf02728c Mon Sep 17 00:00:00 2001
From: Konv Suu <2583695112@qq.com>
Date: Sun, 13 Jul 2025 21:11:15 +0800
Subject: [PATCH] feat: improve translate history style (#8060)

---
 .../src/pages/translate/TranslatePage.tsx     | 51 ++++++++++++-------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/renderer/src/pages/translate/TranslatePage.tsx b/src/renderer/src/pages/translate/TranslatePage.tsx
index a9ab5d7972..554aac8d92 100644
--- a/src/renderer/src/pages/translate/TranslatePage.tsx
+++ b/src/renderer/src/pages/translate/TranslatePage.tsx
@@ -302,7 +302,15 @@ const TranslatePage: FC = () => {
   const { providers } = useProviders()
   const allModels = useMemo(() => providers.map((p) => p.models).flat(), [providers])
 
-  const translateHistory = useLiveQuery(() => db.translate_history.orderBy('createdAt').reverse().toArray(), [])
+  const _translateHistory = useLiveQuery(() => db.translate_history.orderBy('createdAt').reverse().toArray(), [])
+
+  const translateHistory = useMemo(() => {
+    return _translateHistory?.map((item) => ({
+      ...item,
+      _sourceLanguage: getLanguageByLangcode(item.sourceLanguage),
+      _targetLanguage: getLanguageByLangcode(item.targetLanguage)
+    }))
+  }, [_translateHistory])
 
   _text = text
   _result = result
@@ -441,10 +449,10 @@ const TranslatePage: FC = () => {
     setTimeout(() => setCopied(false), 2000)
   }
 
-  const onHistoryItemClick = (history: TranslateHistory) => {
+  const onHistoryItemClick = (history: TranslateHistory & { _sourceLanguage: Language; _targetLanguage: Language }) => {
     setText(history.sourceText)
     setResult(history.targetText)
-    setTargetLanguage(getLanguageByLangcode(history.targetLanguage))
+    setTargetLanguage(history._targetLanguage)
   }
 
   useEffect(() => {
@@ -579,7 +587,7 @@ const TranslatePage: FC = () => {
         </NavbarCenter>
       </Navbar>
       <ContentContainer id="content-container" ref={contentContainerRef} $historyDrawerVisible={historyDrawerVisible}>
-        <HistoryContainner $historyDrawerVisible={historyDrawerVisible}>
+        <HistoryContainer $historyDrawerVisible={historyDrawerVisible}>
           <OperationBar>
             <span style={{ fontSize: 16 }}>{t('translate.history.title')}</span>
             {!isEmpty(translateHistory) && (
@@ -612,9 +620,22 @@ const TranslatePage: FC = () => {
                   }}>
                   <HistoryListItem onClick={() => onHistoryItemClick(item)}>
                     <Flex justify="space-between" vertical gap={4} style={{ width: '100%' }}>
+                      <Flex align="center" justify="space-between" style={{ flex: 1 }}>
+                        <Flex align="center" gap={6}>
+                          <span>
+                            {item._sourceLanguage.emoji} {item._sourceLanguage.label()}
+                          </span>
+                          →
+                          <span>
+                            {item._targetLanguage.emoji} {item._targetLanguage.label()}
+                          </span>
+                        </Flex>
+                        <HistoryListItemDate>{dayjs(item.createdAt).format('MM/DD HH:mm')}</HistoryListItemDate>
+                      </Flex>
                       <HistoryListItemTitle>{item.sourceText}</HistoryListItemTitle>
-                      <HistoryListItemTitle>{item.targetText}</HistoryListItemTitle>
-                      <HistoryListItemDate>{dayjs(item.createdAt).format('MM/DD HH:mm')}</HistoryListItemDate>
+                      <HistoryListItemTitle style={{ color: 'var(--color-text-2)' }}>
+                        {item.targetText}
+                      </HistoryListItemTitle>
                     </Flex>
                   </HistoryListItem>
                 </Dropdown>
@@ -625,7 +646,7 @@ const TranslatePage: FC = () => {
               <Empty description={t('translate.history.empty')} />
             </Flex>
           )}
-        </HistoryContainner>
+        </HistoryContainer>
 
         <InputContainer>
           <OperationBar>
@@ -840,7 +861,7 @@ const BidirectionalLanguageDisplay = styled.div`
   text-align: center;
 `
 
-const HistoryContainner = styled.div<{ $historyDrawerVisible: boolean }>`
+const HistoryContainer = styled.div<{ $historyDrawerVisible: boolean }>`
   width: ${({ $historyDrawerVisible }) => ($historyDrawerVisible ? '300px' : '0')};
   height: calc(100vh - var(--navbar-height) - 40px);
   transition:
@@ -868,15 +889,12 @@ const HistoryList = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 16px;
   overflow-y: auto;
-  padding: 0 5px;
 `
 
 const HistoryListItem = styled.div`
   width: 100%;
   padding: 5px 10px;
-  border-radius: var(--list-item-border-radius);
   cursor: pointer;
   transition: background-color 0.2s;
   position: relative;
@@ -893,15 +911,10 @@ const HistoryListItem = styled.div`
     }
   }
 
-  &:not(:last-child)::after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 1px;
+  border-top: 1px dashed var(--color-border-soft);
+
+  &:last-child {
     border-bottom: 1px dashed var(--color-border-soft);
-    position: absolute;
-    bottom: -8px;
-    left: 0;
   }
 `