scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-10-08 03:07:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge eac11c12e0 into 96d6e43643

Browse source
This commit is contained in:
Seth Miller 2026-04-23 16:41:57 -07:00 • committed by GitHub
commit bb755d9ab3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 31 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
webview-ui/src/components/chat/ContextMenu.tsx
View file

@ -46,6 +46,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
}) => { }) => {
const [materialIconsBaseUri, setMaterialIconsBaseUri] = useState("") const [materialIconsBaseUri, setMaterialIconsBaseUri] = useState("")
const menuRef = useRef<HTMLDivElement>(null) const menuRef = useRef<HTMLDivElement>(null)
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
const filteredOptions = useMemo(() => { const filteredOptions = useMemo(() => {
return getContextMenuOptions(searchQuery, selectedType, queryItems, dynamicSearchResults, modes, commands) return getContextMenuOptions(searchQuery, selectedType, queryItems, dynamicSearchResults, modes, commands)
@ -73,6 +74,11 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
setMaterialIconsBaseUri(w.MATERIAL_ICONS_BASE_URI) setMaterialIconsBaseUri(w.MATERIAL_ICONS_BASE_URI)
}, []) }, [])
// Reset hover state when menu opens/closes
useEffect(() => {
setHoveredIndex(null)
}, [searchQuery])
const renderOptionContent = (option: ContextMenuQueryItem) => { const renderOptionContent = (option: ContextMenuQueryItem) => {
switch (option.type) { switch (option.type) {
case ContextMenuOptionType.SectionHeader: case ContextMenuOptionType.SectionHeader:
@ -340,14 +346,18 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
filteredOptions.map((option, index) => ( filteredOptions.map((option, index) => (
<div <div
key={`${option.type}-${option.value || index}`} key={`${option.type}-${option.value || index}`}
onClick={() => isOptionSelectable(option) && onSelect(option.type, option.value)} onClick={() => {
if (isOptionSelectable(option)) {
setSelectedIndex(index)
onSelect(option.type, option.value)
}
}}
style={{ style={{
padding: padding:
option.type === ContextMenuOptionType.SectionHeader option.type === ContextMenuOptionType.SectionHeader
? "16px 8px 4px 8px" ? "16px 8px 4px 8px"
: "4px 8px", : "4px 8px",
cursor: isOptionSelectable(option) ? "pointer" : "default", cursor: isOptionSelectable(option) ? "pointer" : "default",
color: "var(--vscode-dropdown-foreground)",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
@ -358,14 +368,31 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
marginBottom: "2px", marginBottom: "2px",
} }
: {}), : {}),
// Show different styles for selection vs hover
...(index === selectedIndex && isOptionSelectable(option) ...(index === selectedIndex && isOptionSelectable(option)
? { ? {
backgroundColor: "var(--vscode-list-activeSelectionBackground)", backgroundColor: "var(--vscode-list-activeSelectionBackground)",
color: "var(--vscode-list-activeSelectionForeground)", color: "var(--vscode-list-activeSelectionForeground)",
} }
: {}), : index === hoveredIndex && isOptionSelectable(option)
? {
backgroundColor: "var(--vscode-list-hoverBackground)",
color: "var(--vscode-dropdown-foreground)",
}
: {
color: "var(--vscode-dropdown-foreground)",
}),
}} }}
onMouseEnter={() => isOptionSelectable(option) && setSelectedIndex(index)}> onMouseEnter={() => {
if (isOptionSelectable(option)) {
setHoveredIndex(index)
}
}}
onMouseLeave={() => {
if (index === hoveredIndex) {
setHoveredIndex(null)
}
}}>
<div <div
style={{ style={{
display: "flex", display: "flex",