feat: new chat-item avatar

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>

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 {

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>