changes

components/Chat/ChatLayout.module.css

@@ -14,3 +14,17 @@
 .chatScrollViewport {
   scroll-behavior: smooth;
 }
+
+/* Chat list item - cogwheel appears on hover */
+.chatListItem {
+  position: relative;
+}
+
+.chatListItem .cogwheel {
+  opacity: 0;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.chatListItem:hover .cogwheel {
+  opacity: 1;
+}

components/Chat/ChatLayout.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useRef, useState } from 'react';
 import {
-  IconDotsVertical,
   IconLayoutSidebar,
   IconMessage,
   IconPencil,
@@ -649,12 +648,12 @@ export default function ChatLayout() {
                       </Group>
                     ) : (
                       // Normal display mode with NavLink
-                      <Group key={chat.id} gap={0} wrap="nowrap">
+                      <div key={chat.id} className={classes.chatListItem}>
                         <NavLink
                           component="button"
                           active={activeChatId === chat.id}
                           color={primaryColor}
-                          variant="subtle"
+                          variant="light"
                           label={chat.title}
                           leftSection={
                             chat.pinned ? (
@@ -663,30 +662,17 @@ export default function ChatLayout() {
                               <IconMessage size={16} stroke={1.5} />
                             )
                           }
-                          onClick={() => handleSelectChat(chat)}
-                          noWrap
-                          styles={{
-                            root: {
-                              flex: 1,
-                              minWidth: 0,
-                              borderRadius: 'var(--mantine-radius-sm)',
-                              padding: '6px 10px',
-                            },
-                            label: {
-                              overflow: 'hidden',
-                              textOverflow: 'ellipsis',
-                            },
-                          }}
-                        />
+                          rightSection={
                             <Menu position="bottom-end" withArrow>
                               <Menu.Target>
                                 <ActionIcon
                                   variant="subtle"
                                   color="gray"
-                              size="sm"
+                                  size="xs"
+                                  className={classes.cogwheel}
                                   onClick={(e) => e.stopPropagation()}
                                 >
-                              <IconDotsVertical size={14} />
+                                  <IconSettings size={14} />
                                 </ActionIcon>
                               </Menu.Target>
                               <Menu.Dropdown>
@@ -712,7 +698,22 @@ export default function ChatLayout() {
                                 </Menu.Item>
                               </Menu.Dropdown>
                             </Menu>
-                      </Group>
+                          }
+                          onClick={() => handleSelectChat(chat)}
+                          noWrap
+                          styles={{
+                            root: {
+                              minWidth: 0,
+                              borderRadius: 'var(--mantine-radius-sm)',
+                              padding: '6px 10px',
+                            },
+                            label: {
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                            },
+                          }}
+                        />
+                      </div>
                     )
                   )
                 ) : (