zach/chat-gpz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Zacharias-Brohn
2026-01-14 22:13:08 +01:00
parent 7663a917da
commit 02fd30924b
2 changed files with 54 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chat/ChatLayout.module.css
+14
View File
@@ -14,3 +14,17 @@
.chatScrollViewport { .chatScrollViewport {
scroll-behavior: smooth; 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
+40 -39
View File
@@ -2,7 +2,6 @@
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { import {
IconDotsVertical,
IconLayoutSidebar, IconLayoutSidebar,
IconMessage, IconMessage,
IconPencil, IconPencil,
@@ -649,12 +648,12 @@ export default function ChatLayout() {
</Group> </Group>
) : ( ) : (
// Normal display mode with NavLink // Normal display mode with NavLink
<Group key={chat.id} gap={0} wrap="nowrap"> <div key={chat.id} className={classes.chatListItem}>
<NavLink <NavLink
component="button" component="button"
active={activeChatId === chat.id} active={activeChatId === chat.id}
color={primaryColor} color={primaryColor}
variant="subtle" variant="light"
label={chat.title} label={chat.title}
leftSection={ leftSection={
chat.pinned ? ( chat.pinned ? (
@@ -663,11 +662,47 @@ export default function ChatLayout() {
<IconMessage size={16} stroke={1.5} /> <IconMessage size={16} stroke={1.5} />
) )
} }
rightSection={
<Menu position="bottom-end" withArrow>
<Menu.Target>
<ActionIcon
variant="subtle"
color="gray"
size="xs"
className={classes.cogwheel}
onClick={(e) => e.stopPropagation()}
>
<IconSettings size={14} />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
leftSection={<IconPencil size={14} />}
onClick={() => handleRenameChat(chat.id)}
>
Rename
</Menu.Item>
<Menu.Item
leftSection={<IconPin size={14} />}
onClick={() => handlePinChat(chat.id)}
>
{chat.pinned ? 'Unpin' : 'Pin'}
</Menu.Item>
<Menu.Divider />
<Menu.Item
color="red"
leftSection={<IconTrash size={14} />}
onClick={() => handleRemoveChat(chat.id)}
>
Remove
</Menu.Item>
</Menu.Dropdown>
</Menu>
}
onClick={() => handleSelectChat(chat)} onClick={() => handleSelectChat(chat)}
noWrap noWrap
styles={{ styles={{
root: { root: {
flex: 1,
minWidth: 0, minWidth: 0,
borderRadius: 'var(--mantine-radius-sm)', borderRadius: 'var(--mantine-radius-sm)',
padding: '6px 10px', padding: '6px 10px',
@@ -678,41 +713,7 @@ export default function ChatLayout() {
}, },
}} }}
/> />
<Menu position="bottom-end" withArrow> </div>
<Menu.Target>
<ActionIcon
variant="subtle"
color="gray"
size="sm"
onClick={(e) => e.stopPropagation()}
>
<IconDotsVertical size={14} />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
leftSection={<IconPencil size={14} />}
onClick={() => handleRenameChat(chat.id)}
>
Rename
</Menu.Item>
<Menu.Item
leftSection={<IconPin size={14} />}
onClick={() => handlePinChat(chat.id)}
>
{chat.pinned ? 'Unpin' : 'Pin'}
</Menu.Item>
<Menu.Divider />
<Menu.Item
color="red"
leftSection={<IconTrash size={14} />}
onClick={() => handleRemoveChat(chat.id)}
>
Remove
</Menu.Item>
</Menu.Dropdown>
</Menu>
</Group>
) )
) )
) : ( ) : (