fix(webui): unify desktop header actions

This commit is contained in:
Xubin Ren
2026-06-06 15:54:32 +08:00
parent a79ae11aa1
commit d3ef583c4a
+33 -28
View File
@@ -1,4 +1,11 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import {
useCallback,
useEffect,
useMemo,
useRef,
useState,
type ReactNode,
} from "react";
import { Moon, PanelLeft, Sun } from "lucide-react"; import { Moon, PanelLeft, Sun } from "lucide-react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { DeleteConfirm } from "@/components/DeleteConfirm"; import { DeleteConfirm } from "@/components/DeleteConfirm";
@@ -282,17 +289,13 @@ function HostChrome({
onSidebarPreviewEnter, onSidebarPreviewEnter,
onSidebarPreviewLeave, onSidebarPreviewLeave,
sidebarOpen = true, sidebarOpen = true,
theme, rightAction,
onToggleTheme,
showThemeButton = true,
}: { }: {
onToggleSidebar?: () => void; onToggleSidebar?: () => void;
onSidebarPreviewEnter?: () => void; onSidebarPreviewEnter?: () => void;
onSidebarPreviewLeave?: () => void; onSidebarPreviewLeave?: () => void;
sidebarOpen?: boolean; sidebarOpen?: boolean;
theme: "light" | "dark"; rightAction?: ReactNode;
onToggleTheme: () => void;
showThemeButton?: boolean;
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -315,24 +318,11 @@ function HostChrome({
<PanelLeft className="h-[15px] w-[15px]" strokeWidth={1.75} /> <PanelLeft className="h-[15px] w-[15px]" strokeWidth={1.75} />
</Button> </Button>
) : null} ) : null}
{showThemeButton ? ( {rightAction ? (
<Button <div className="host-no-drag pointer-events-auto absolute right-3 top-2">
type="button" {rightAction}
variant="ghost" </div>
size="icon" ) : null}
aria-label={t("thread.header.toggleTheme")}
onClick={onToggleTheme}
className="host-no-drag pointer-events-auto absolute right-3 top-2 h-8 w-8 rounded-full text-muted-foreground/85 hover:bg-accent/40 hover:text-foreground"
>
{theme === "dark" ? (
<Sun className="h-4 w-4" />
) : (
<Moon className="h-4 w-4" />
)}
</Button>
) : (
null
)}
</header> </header>
); );
} }
@@ -1369,8 +1359,24 @@ function Shell({
onSidebarPreviewEnter={openHostSidebarPreview} onSidebarPreviewEnter={openHostSidebarPreview}
onSidebarPreviewLeave={scheduleHostSidebarPreviewClose} onSidebarPreviewLeave={scheduleHostSidebarPreviewClose}
sidebarOpen={hostSidebarOpen} sidebarOpen={hostSidebarOpen}
theme={theme} rightAction={
onToggleTheme={toggle} view === "chat" ? undefined : (
<Button
type="button"
variant="ghost"
size="icon"
aria-label={t("thread.header.toggleTheme")}
onClick={toggle}
className="h-8 w-8 rounded-full text-muted-foreground/85 hover:bg-accent/40 hover:text-foreground"
>
{theme === "dark" ? (
<Sun className="h-4 w-4" />
) : (
<Moon className="h-4 w-4" />
)}
</Button>
)
}
/> />
) : null} ) : null}
<div <div
@@ -1484,7 +1490,6 @@ function Shell({
onToggleTheme={toggle} onToggleTheme={toggle}
hideSidebarToggleForHostChrome hideSidebarToggleForHostChrome
hostChromeTitleInset={hostSidebarCollapsed} hostChromeTitleInset={hostSidebarCollapsed}
hideThemeButton={showHostChrome}
hideHeader={false} hideHeader={false}
workspaceScope={activeWorkspaceScope} workspaceScope={activeWorkspaceScope}
workspaceDefaultScope={workspaces?.default_scope ?? null} workspaceDefaultScope={workspaces?.default_scope ?? null}