From a3ca8ea5c458a8453c21095b65c88305125243ab Mon Sep 17 00:00:00 2001
From: Yidadaa <yidadaa@qq.com>
Date: Sat, 22 Apr 2023 00:35:50 +0800
Subject: [PATCH] feat: new chat-item avatar

---
 app/components/chat-list.tsx    | 14 +++++++++++++-
 app/components/home.module.scss | 24 ++++++++++++++++++++----
 app/components/sidebar.tsx      |  2 +-
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/app/components/chat-list.tsx b/app/components/chat-list.tsx
index 626336af..637e0b11 100644
--- a/app/components/chat-list.tsx
+++ b/app/components/chat-list.tsx
@@ -1,4 +1,6 @@
 import DeleteIcon from "../icons/delete.svg";
+import BotIcon from "../icons/bot.svg";
+
 import styles from "./home.module.scss";
 import {
   DragDropContext,
@@ -35,9 +37,19 @@ export function ChatItem(props: {
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
+          title={`${props.title}\n${Locale.ChatItem.ChatItemCount(
+            props.count,
+          )}`}
         >
           {props.narrow ? (
-            <div className={styles["chat-item-narrow"]}>{props.count}</div>
+            <div className={styles["chat-item-narrow"]}>
+              <div className={styles["chat-item-avatar"] + " no-dark"}>
+                <BotIcon></BotIcon>
+              </div>
+              <div className={styles["chat-item-narrow-count"]}>
+                {props.count}
+              </div>
+            </div>
           ) : (
             <>
               <div className={styles["chat-item-title"]}>{props.title}</div>
diff --git a/app/components/home.module.scss b/app/components/home.module.scss
index 1c021d88..b0b44d9c 100644
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -154,7 +154,6 @@
   user-select: none;
   border: 2px solid transparent;
   position: relative;
-  overflow: hidden;
 }
 
 .chat-item:hover {
@@ -228,6 +227,7 @@
     justify-content: center;
     align-items: center;
     transition: all ease 0.3s;
+    overflow: hidden;
 
     &:hover {
       .chat-item-narrow {
@@ -237,15 +237,31 @@
   }
 
   .chat-item-narrow {
-    font-weight: bolder;
-    font-size: 24px;
     line-height: 0;
     font-weight: lighter;
     color: var(--black);
     transform: translateX(0);
     transition: all ease 0.3s;
-    opacity: 0.1;
     padding: 4px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .chat-item-avatar {
+      display: flex;
+      justify-content: center;
+      opacity: 0.1;
+      position: absolute;
+      transform: scale(4);
+    }
+
+    .chat-item-narrow-count {
+      font-size: 24px;
+      font-weight: bolder;
+      text-align: center;
+      color: var(--primary);
+      opacity: 0.6;
+    }
   }
 
   .chat-item-delete {
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index d0c99dd1..1e35964d 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -94,7 +94,7 @@ export function SideBar(props: { className?: string }) {
         <div className={styles["sidebar-sub-title"]}>
           Build your own AI assistant.
         </div>
-        <div className={styles["sidebar-logo"]}>
+        <div className={styles["sidebar-logo"] + " no-dark"}>
           <ChatGptIcon />
         </div>
       </div>