From 61ceca236365181f12c0b7a295eac9564a30ae66 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sat, 9 Nov 2024 22:26:35 +0800
Subject: [PATCH] feat: update sidebar menu with interactive tooltips and
 painting terminology

---
 src/renderer/src/components/app/Sidebar.tsx   | 112 ++++++++++--------
 src/renderer/src/i18n/locales/zh-cn.json      |   2 +-
 .../src/pages/paintings/PaintingsList.tsx     |   2 +-
 .../src/pages/paintings/PaintingsPage.tsx     |  30 ++---
 4 files changed, 82 insertions(+), 64 deletions(-)

diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx
index c15b5437..f05ba782 100644
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -5,6 +5,7 @@ import { useTheme } from '@renderer/context/ThemeProvider'
 import useAvatar from '@renderer/hooks/useAvatar'
 import { useRuntime } from '@renderer/hooks/useRuntime'
 import { useSettings } from '@renderer/hooks/useSettings'
+import { Tooltip } from 'antd'
 import { Avatar } from 'antd'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -50,57 +51,74 @@ const Sidebar: FC = () => {
       <AvatarImg src={avatar || UserAvatar} draggable={false} className="nodrag" onClick={onEditUser} />
       <MainMenus>
         <Menus onClick={MinApp.onClose}>
-          <StyledLink onClick={() => to('/')}>
-            <Icon className={isRoute('/')}>
-              <i className="iconfont icon-chat" />
-            </Icon>
-          </StyledLink>
-          <StyledLink onClick={() => to('/agents')}>
-            <Icon className={isRoutes('/agents')}>
-              <i className="iconfont icon-business-smart-assistant" />
-            </Icon>
-          </StyledLink>
-          <StyledLink onClick={() => to('/paintings')}>
-            <Icon className={isRoute('/paintings')}>
-              <PictureOutlined style={{ fontSize: 16 }} />
-            </Icon>
-          </StyledLink>
-          <StyledLink onClick={() => to('/translate')}>
-            <Icon className={isRoute('/translate')}>
-              <TranslationOutlined />
-            </Icon>
-          </StyledLink>
-          <StyledLink onClick={() => to('/apps')}>
-            <Icon className={isRoute('/apps')}>
-              <i className="iconfont icon-appstore" />
-            </Icon>
-          </StyledLink>
-          <StyledLink onClick={() => to('/files')}>
-            <Icon className={isRoute('/files')}>
-              <FolderOutlined />
-            </Icon>
-          </StyledLink>
-          <StyledLink onClick={() => to('/messages')}>
-            <Icon className={isRoutes('/messages')}>
-              <FileSearchOutlined />
-            </Icon>
-          </StyledLink>
+          <Tooltip title={t('assistants.title')} mouseEnterDelay={0.5} placement="right">
+            <StyledLink onClick={() => to('/')}>
+              <Icon className={isRoute('/')}>
+                <i className="iconfont icon-chat" />
+              </Icon>
+            </StyledLink>
+          </Tooltip>
+          <Tooltip title={t('agents.title')} mouseEnterDelay={0.5} placement="right">
+            <StyledLink onClick={() => to('/agents')}>
+              <Icon className={isRoutes('/agents')}>
+                <i className="iconfont icon-business-smart-assistant" />
+              </Icon>
+            </StyledLink>
+          </Tooltip>
+          <Tooltip title={t('paintings.title')} mouseEnterDelay={0.5} placement="right">
+            <StyledLink onClick={() => to('/paintings')}>
+              <Icon className={isRoute('/paintings')}>
+                <PictureOutlined style={{ fontSize: 16 }} />
+              </Icon>
+            </StyledLink>
+          </Tooltip>
+          <Tooltip title={t('translate.title')} mouseEnterDelay={0.5} placement="right">
+            <StyledLink onClick={() => to('/translate')}>
+              <Icon className={isRoute('/translate')}>
+                <TranslationOutlined />
+              </Icon>
+            </StyledLink>
+          </Tooltip>
+          <Tooltip title={t('minapp.title')} mouseEnterDelay={0.5} placement="right">
+            <StyledLink onClick={() => to('/apps')}>
+              <Icon className={isRoute('/apps')}>
+                <i className="iconfont icon-appstore" />
+              </Icon>
+            </StyledLink>
+          </Tooltip>
+          <Tooltip title={t('files.title')} mouseEnterDelay={0.5} placement="right">
+            <StyledLink onClick={() => to('/files')}>
+              <Icon className={isRoute('/files')}>
+                <FolderOutlined />
+              </Icon>
+            </StyledLink>
+          </Tooltip>
+          <Tooltip title={t('history.title')} mouseEnterDelay={0.5} placement="right">
+            <StyledLink onClick={() => to('/messages')}>
+              <Icon className={isRoutes('/messages')}>
+                <FileSearchOutlined />
+              </Icon>
+            </StyledLink>
+          </Tooltip>
         </Menus>
       </MainMenus>
       <Menus onClick={MinApp.onClose}>
-        <Icon onClick={() => toggleTheme()}>
-          {theme === 'dark' ? (
-            <i className="iconfont icon-theme icon-dark1" />
-          ) : (
-            <i className="iconfont icon-theme icon-theme-light" />
-          )}
-        </Icon>
-
-        <StyledLink onClick={() => to(isLocalAi ? '/settings/assistant' : '/settings/provider')}>
-          <Icon className={pathname.startsWith('/settings') ? 'active' : ''}>
-            <i className="iconfont icon-setting" />
+        <Tooltip title={t('settings.theme.title')} mouseEnterDelay={0.5} placement="right">
+          <Icon onClick={() => toggleTheme()}>
+            {theme === 'dark' ? (
+              <i className="iconfont icon-theme icon-dark1" />
+            ) : (
+              <i className="iconfont icon-theme icon-theme-light" />
+            )}
           </Icon>
-        </StyledLink>
+        </Tooltip>
+        <Tooltip title={t('settings.title')} mouseEnterDelay={0.5} placement="right">
+          <StyledLink onClick={() => to(isLocalAi ? '/settings/assistant' : '/settings/provider')}>
+            <Icon className={pathname.startsWith('/settings') ? 'active' : ''}>
+              <i className="iconfont icon-setting" />
+            </Icon>
+          </StyledLink>
+        </Tooltip>
       </Menus>
     </Container>
   )
diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json
index 46b7c9a0..b8b384e6 100644
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@@ -145,7 +145,7 @@
       "stream_output": "流式输出",
       "search": "搜索模型..."
     },
-    "images": {
+    "paintings": {
       "title": "图片",
       "image.size": "图片尺寸",
       "button.new.image": "新建图片",
diff --git a/src/renderer/src/pages/paintings/PaintingsList.tsx b/src/renderer/src/pages/paintings/PaintingsList.tsx
index 679253c0..44dc42aa 100644
--- a/src/renderer/src/pages/paintings/PaintingsList.tsx
+++ b/src/renderer/src/pages/paintings/PaintingsList.tsx
@@ -45,7 +45,7 @@ const PaintingsList: FC<PaintingsListProps> = ({
             </Canvas>
             <DeleteButton>
               <Popconfirm
-                title={t('images.button.delete.image.confirm')}
+                title={t('paintings.button.delete.image.confirm')}
                 onConfirm={() => onDeletePainting(item)}
                 okButtonProps={{ danger: true }}
                 placement="left">
diff --git a/src/renderer/src/pages/paintings/PaintingsPage.tsx b/src/renderer/src/pages/paintings/PaintingsPage.tsx
index 54392839..8ea675f7 100644
--- a/src/renderer/src/pages/paintings/PaintingsPage.tsx
+++ b/src/renderer/src/pages/paintings/PaintingsPage.tsx
@@ -107,7 +107,7 @@ const PaintingsPage: FC = () => {
   const onGenerate = async () => {
     if (painting.files.length > 0) {
       const confirmed = await window.modal.confirm({
-        content: t('images.regenerate.confirm'),
+        content: t('paintings.regenerate.confirm'),
         centered: true
       })
 
@@ -252,11 +252,11 @@ const PaintingsPage: FC = () => {
   return (
     <Container>
       <Navbar>
-        <NavbarCenter style={{ borderRight: 'none' }}>{t('images.title')}</NavbarCenter>
+        <NavbarCenter style={{ borderRight: 'none' }}>{t('paintings.title')}</NavbarCenter>
         {isMac && (
           <NavbarRight style={{ justifyContent: 'flex-end' }}>
             <Button size="small" className="nodrag" icon={<PlusOutlined />} onClick={() => setPainting(addPainting())}>
-              {t('images.button.new.image')}
+              {t('paintings.button.new.image')}
             </Button>
           </NavbarRight>
         )}
@@ -271,7 +271,7 @@ const PaintingsPage: FC = () => {
           />
           <SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>{t('common.model')}</SettingTitle>
           <Select value={painting.model} options={modelOptions} onChange={onSelectModel} />
-          <SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>{t('images.image.size')}</SettingTitle>
+          <SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>{t('paintings.image.size')}</SettingTitle>
           <Radio.Group
             value={painting.imageSize}
             onChange={(e) => onSelectImageSize(e.target.value)}
@@ -287,8 +287,8 @@ const PaintingsPage: FC = () => {
           </Radio.Group>
 
           <SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
-            {t('images.number_images')}
-            <Tooltip title={t('images.number_images_tip')}>
+            {t('paintings.number_images')}
+            <Tooltip title={t('paintings.number_images_tip')}>
               <InfoIcon />
             </Tooltip>
           </SettingTitle>
@@ -300,8 +300,8 @@ const PaintingsPage: FC = () => {
           />
 
           <SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
-            {t('images.seed')}
-            <Tooltip title={t('images.seed_tip')}>
+            {t('paintings.seed')}
+            <Tooltip title={t('paintings.seed_tip')}>
               <InfoIcon />
             </Tooltip>
           </SettingTitle>
@@ -312,8 +312,8 @@ const PaintingsPage: FC = () => {
           />
 
           <SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
-            {t('images.inference_steps')}
-            <Tooltip title={t('images.inference_steps_tip')}>
+            {t('paintings.inference_steps')}
+            <Tooltip title={t('paintings.inference_steps_tip')}>
               <InfoIcon />
             </Tooltip>
           </SettingTitle>
@@ -326,8 +326,8 @@ const PaintingsPage: FC = () => {
           />
 
           <SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
-            {t('images.guidance_scale')}
-            <Tooltip title={t('images.guidance_scale_tip')}>
+            {t('paintings.guidance_scale')}
+            <Tooltip title={t('paintings.guidance_scale_tip')}>
               <InfoIcon />
             </Tooltip>
           </SettingTitle>
@@ -347,8 +347,8 @@ const PaintingsPage: FC = () => {
           />
 
           <SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
-            {t('images.negative_prompt')}
-            <Tooltip title={t('images.negative_prompt_tip')}>
+            {t('paintings.negative_prompt')}
+            <Tooltip title={t('paintings.negative_prompt_tip')}>
               <InfoIcon />
             </Tooltip>
           </SettingTitle>
@@ -374,7 +374,7 @@ const PaintingsPage: FC = () => {
               disabled={isLoading}
               value={painting.prompt}
               onChange={(e) => updatePaintingState({ prompt: e.target.value })}
-              placeholder={t('images.prompt_placeholder')}
+              placeholder={t('paintings.prompt_placeholder')}
             />
             <Toolbar>
               <ToolbarMenu>