mirror/nanobot
1
0
Fork 0
mirror of https://github.com/HKUDS/nanobot.git synced 2026-06-15 15:24:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webui): align chat action menu hover inset

Browse Source
This commit is contained in:
Xubin Ren 2026-06-10 20:30:32 +08:00
parent 999552b998
commit 1f5ecf36ca
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
webui/src/components/ChatList.tsx
View File

@ -40,6 +40,8 @@ import type { ChatSummary, SidebarDensity, SidebarSortMode } from "@/lib/types";
const INITIAL_VISIBLE_SESSIONS = 160; const INITIAL_VISIBLE_SESSIONS = 160;
const VISIBLE_SESSIONS_INCREMENT = 160; const VISIBLE_SESSIONS_INCREMENT = 160;
const ACTION_MENU_CONTENT_CLASS = "w-[8.5rem] min-w-[8.5rem]";
const ACTION_MENU_ITEM_CLASS = "grid w-[7.75rem] grid-cols-[1rem_minmax(0,1fr)] items-center gap-2";
interface ChatListProps { interface ChatListProps {
sessions: ChatSummary[]; sessions: ChatSummary[];
@ -309,32 +311,36 @@ export const ChatList = memo(function ChatList({
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
align="end" align="end"
className={ACTION_MENU_CONTENT_CLASS}
portalContainer={actionMenuPortalContainer} portalContainer={actionMenuPortalContainer}
onCloseAutoFocus={(event) => event.preventDefault()} onCloseAutoFocus={(event) => event.preventDefault()}
> >
<DropdownMenuItem <DropdownMenuItem
onSelect={() => onTogglePin(s.key)} onSelect={() => onTogglePin(s.key)}
className={ACTION_MENU_ITEM_CLASS}
> >
{isPinned ? ( {isPinned ? (
<PinOff className="mr-2 h-4 w-4" /> <PinOff className="h-4 w-4 shrink-0" />
) : ( ) : (
<Pin className="mr-2 h-4 w-4" /> <Pin className="h-4 w-4 shrink-0" />
)} )}
{isPinned ? t("chat.unpin") : t("chat.pin")} {isPinned ? t("chat.unpin") : t("chat.pin")}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onSelect={() => onRequestRename(s.key, title)} onSelect={() => onRequestRename(s.key, title)}
className={ACTION_MENU_ITEM_CLASS}
> >
<Pencil className="mr-2 h-4 w-4" /> <Pencil className="h-4 w-4 shrink-0" />
{t("chat.rename")} {t("chat.rename")}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onSelect={() => onToggleArchive(s.key)} onSelect={() => onToggleArchive(s.key)}
className={ACTION_MENU_ITEM_CLASS}
> >
{isArchived ? ( {isArchived ? (
<ArchiveRestore className="mr-2 h-4 w-4" /> <ArchiveRestore className="h-4 w-4 shrink-0" />
) : ( ) : (
<Archive className="mr-2 h-4 w-4" /> <Archive className="h-4 w-4 shrink-0" />
)} )}
{isArchived ? t("chat.unarchive") : t("chat.archive")} {isArchived ? t("chat.unarchive") : t("chat.archive")}
</DropdownMenuItem> </DropdownMenuItem>
@ -342,9 +348,12 @@ export const ChatList = memo(function ChatList({
onSelect={() => { onSelect={() => {
window.setTimeout(() => onRequestDelete(s.key, title), 0); window.setTimeout(() => onRequestDelete(s.key, title), 0);
}} }}
className="text-destructive focus:text-destructive" className={cn(
ACTION_MENU_ITEM_CLASS,
"text-destructive focus:text-destructive",
)}
> >
<Trash2 className="mr-2 h-4 w-4" /> <Trash2 className="h-4 w-4 shrink-0" />
{t("chat.delete")} {t("chat.delete")}
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
@ -439,11 +448,12 @@ function ProjectGroupHeader({
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
align="end" align="end"
className={ACTION_MENU_CONTENT_CLASS}
portalContainer={actionMenuPortalContainer} portalContainer={actionMenuPortalContainer}
onCloseAutoFocus={(event) => event.preventDefault()} onCloseAutoFocus={(event) => event.preventDefault()}
> >
<DropdownMenuItem onSelect={onRequestRename}> <DropdownMenuItem onSelect={onRequestRename} className={ACTION_MENU_ITEM_CLASS}>
<Pencil className="mr-2 h-4 w-4" /> <Pencil className="h-4 w-4 shrink-0" />
{t("chat.rename")} {t("chat.rename")}
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>