File size: 2,681 Bytes
3201ca6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | import React from "react";
import { Search } from "lucide-react";
import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";
import { StyledTooltip } from "#/components/shared/buttons/styled-tooltip";
import { useCommandMenuStore } from "#/stores/command-menu-store";
import { cn } from "#/utils/utils";
import { SidebarCollapsedIconSlot } from "#/components/features/sidebar/sidebar-collapsed-icon-slot";
import {
SIDEBAR_ICON_SLOT_CLASS,
sidebarNavLabelClassName,
sidebarNavRowClassName,
} from "#/components/features/sidebar/sidebar-layout";
interface CommandMenuTriggerProps {
collapsed: boolean;
}
const COMMAND_MENU_TRIGGER_TEST_ID = "command-menu-trigger";
const COMMAND_MENU_TRIGGER_ICON_SIZE = 18;
export function CommandMenuTrigger({ collapsed }: CommandMenuTriggerProps) {
const { t } = useTranslation("openhands");
const open = useCommandMenuStore((state) => state.open);
const label = t(I18nKey.COMMAND_MENU$OPEN_LABEL);
const trigger = (
<button
type="button"
data-testid={COMMAND_MENU_TRIGGER_TEST_ID}
aria-label={label}
onClick={open}
className={cn(
sidebarNavRowClassName({ collapsed }),
collapsed
? "cursor-pointer"
: "group justify-between border border-[var(--oh-border-subtle)] bg-[var(--oh-surface)]/50 hover:border-[var(--oh-border)] hover:bg-[var(--oh-surface-raised)]",
)}
>
<span className="flex min-w-0 items-center gap-2">
{collapsed ? (
<SidebarCollapsedIconSlot active={false}>
<Search
width={COMMAND_MENU_TRIGGER_ICON_SIZE}
height={COMMAND_MENU_TRIGGER_ICON_SIZE}
/>
</SidebarCollapsedIconSlot>
) : (
<span
className={cn(
SIDEBAR_ICON_SLOT_CLASS,
"text-[var(--oh-muted)] group-hover:text-white",
)}
aria-hidden="true"
>
<Search
width={COMMAND_MENU_TRIGGER_ICON_SIZE}
height={COMMAND_MENU_TRIGGER_ICON_SIZE}
/>
</span>
)}
<span className={sidebarNavLabelClassName(collapsed)}>{label}</span>
</span>
{!collapsed ? (
<kbd className="rounded-md border border-[var(--oh-border)] bg-black/20 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--oh-text-dim)]">
{t(I18nKey.COMMAND_MENU$SHORTCUT)}
</kbd>
) : null}
</button>
);
if (collapsed) {
return (
<StyledTooltip content={label} placement="right">
{trigger}
</StyledTooltip>
);
}
return trigger;
}
|