From e0156803ff54026d5bb661513752700ee458f8d3 Mon Sep 17 00:00:00 2001 From: Mathew Pareles Date: Mon, 5 May 2025 21:36:20 -0700 Subject: [PATCH] better commandbar ui --- .../react/src/sidebar-tsx/SidebarChat.tsx | 47 --- .../VoidCommandBar.tsx | 357 +++++++++--------- 2 files changed, 187 insertions(+), 217 deletions(-) diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx index dbb539f0..6c6d1b91 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx @@ -2420,53 +2420,6 @@ const _ChatBubble = ({ threadId, chatMessage, currCheckpointIdx, isCommitted, me } - - - -export const AcceptAllButtonWrapper = ({ text, onClick, className }: { text: string, onClick: () => void, className?: string }) => ( - -) - -export const RejectAllButtonWrapper = ({ text, onClick, className }: { text: string, onClick: () => void, className?: string }) => ( - -) - - - const CommandBarInChat = () => { const { stateOfURI: commandBarStateOfURI, sortedURIs: sortedCommandBarURIs } = useCommandBarState() const numFilesChanged = sortedCommandBarURIs.length diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-editor-widgets-tsx/VoidCommandBar.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-editor-widgets-tsx/VoidCommandBar.tsx index dcf97f8e..405c147e 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/void-editor-widgets-tsx/VoidCommandBar.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/void-editor-widgets-tsx/VoidCommandBar.tsx @@ -9,9 +9,9 @@ import { useAccessor, useCommandBarState, useIsDark } from '../util/services.js' import '../styles.css' import { useCallback, useEffect, useState, useRef } from 'react'; import { ScrollType } from '../../../../../../../editor/common/editorCommon.js'; -import { acceptAllBg, acceptBorder, buttonFontSize, buttonTextColor, rejectBg, rejectBorder } from '../../../../common/helpers/colors.js'; +import { acceptAllBg, acceptBorder, buttonFontSize, buttonTextColor, rejectAllBg, rejectBg, rejectBorder } from '../../../../common/helpers/colors.js'; import { VoidCommandBarProps } from '../../../voidCommandBarService.js'; -import { AcceptAllButtonWrapper, RejectAllButtonWrapper } from '../sidebar-tsx/SidebarChat.js'; +import { Check, EllipsisVertical, Menu, MoveDown, MoveLeft, MoveRight, MoveUp, X } from 'lucide-react'; export const VoidCommandBarMain = ({ uri, editor }: VoidCommandBarProps) => { const isDark = useIsDark() @@ -23,8 +23,6 @@ export const VoidCommandBarMain = ({ uri, editor }: VoidCommandBarProps) => { } - - const stepIdx = (currIdx: number | null, len: number, step: -1 | 1) => { if (len === 0) return null return ((currIdx ?? 0) + step + len) % len // for some reason, small negatives are kept negative. just add len to offset @@ -32,7 +30,55 @@ const stepIdx = (currIdx: number | null, len: number, step: -1 | 1) => { -const VoidCommandBar = ({ uri, editor }: VoidCommandBarProps) => { + + +export const AcceptAllButtonWrapper = ({ text, onClick, className }: { text: string, onClick: () => void, className?: string }) => ( + +) + + +export const RejectAllButtonWrapper = ({ text, onClick, className }: { text: string, onClick: () => void, className?: string }) => ( + +) + + +export const VoidCommandBar = ({ uri, editor }: VoidCommandBarProps) => { const accessor = useAccessor() const editCodeService = accessor.get('IEditCodeService') const editorService = accessor.get('ICodeEditorService') @@ -41,11 +87,7 @@ const VoidCommandBar = ({ uri, editor }: VoidCommandBarProps) => { const commandBarService = accessor.get('IVoidCommandBarService') const voidModelService = accessor.get('IVoidModelService') const { stateOfURI: commandBarState, sortedURIs: sortedCommandBarURIs } = useCommandBarState() - - - // useEffect(() => { - // console.log('MOUNTING!!!') - // }, []) + const [showAcceptRejectAllButtons, setShowAcceptRejectAllButtons] = useState(false) // latestUriIdx is used to remember place in leftRight const _latestValidUriIdxRef = useRef(null) @@ -111,7 +153,7 @@ const VoidCommandBar = ({ uri, editor }: VoidCommandBarProps) => { const { model } = await voidModelService.getModelSafe(nextURI) if (model) { // switch to the URI - editorService.openCodeEditor({ resource: nextURI, options: { revealIfVisible: true } }, editor) + editorService.openCodeEditor({ resource: model.uri, options: { revealIfVisible: true } }, editor) } } @@ -119,7 +161,6 @@ const VoidCommandBar = ({ uri, editor }: VoidCommandBarProps) => { const sortedDiffIds = uri ? commandBarState[uri.fsPath]?.sortedDiffIds ?? [] : [] const sortedDiffZoneIds = uri ? commandBarState[uri.fsPath]?.sortedDiffZoneIds ?? [] : [] - const isADiffInThisFile = sortedDiffIds.length !== 0 const isADiffZoneInThisFile = sortedDiffZoneIds.length !== 0 const isADiffZoneInAnyFile = sortedCommandBarURIs.length !== 0 @@ -133,185 +174,161 @@ const VoidCommandBar = ({ uri, editor }: VoidCommandBarProps) => { const prevURIIdx = getNextUriIdx(-1) const upDownDisabled = prevDiffIdx === null || nextDiffIdx === null - const leftRightDisabled = prevURIIdx === null || nextURIIdx === null // || (sortedCommandBarURIs.length === 1 && isADiffZoneInThisFile) - - const upButton = - - const downButton = - - const leftButton = - - const rightButton = - - + const leftRightDisabled = prevURIIdx === null || nextURIIdx === null // accept/reject if current URI has changes - const onAcceptAll = () => { + const onAcceptFile = () => { if (!uri) return editCodeService.acceptOrRejectAllDiffAreas({ uri, behavior: 'accept', removeCtrlKs: false, _addToHistory: true }) metricsService.capture('Accept All', {}) } - const onRejectAll = () => { + const onRejectFile = () => { if (!uri) return editCodeService.acceptOrRejectAllDiffAreas({ uri, behavior: 'reject', removeCtrlKs: false, _addToHistory: true }) metricsService.capture('Reject All', {}) } - if (!isADiffZoneInAnyFile) return null - // const acceptAllButton = + return ( +
- // const rejectAllButton = - const acceptAllButton = + {/* Accept All / Reject All buttons that appear when the vertical ellipsis is clicked */} + {showAcceptRejectAllButtons && showAcceptRejectAll && ( +
+
+
+ { + onAcceptFile(); + setShowAcceptRejectAllButtons(false); + }} + /> + { + onRejectFile(); + setShowAcceptRejectAllButtons(false); + }} + /> +
+
+
+ )} - const rejectAllButton = +
- const acceptRejectAllButtons =
- {acceptAllButton} - {rejectAllButton} -
+ {/* Diff Navigation Group */} +
+ + + {isADiffInThisFile + ? `Diff ${(currDiffIdx ?? 0) + 1} of ${sortedDiffIds.length}` + : streamState === 'streaming' + ? 'No changes yet' + : 'No changes' + } - // const closeCommandBar = useCallback(() => { - // commandService.executeCommand('void.hideCommandBar'); - // }, [commandService]); + + +
- // const hideButton = - const leftRightUpDownButtons =
-
- {/* Changes in file */} -
- {upButton} - {downButton} - - {isADiffInThisFile ? - `Diff ${(currDiffIdx ?? 0) + 1} of ${sortedDiffIds.length}` - : streamState === 'streaming' ? - 'No changes yet' - : `No changes` - } - -
- {/* Files */} -
- {leftButton} - {/*
*/} - {rightButton} - {/*
*/} - - {currFileIdx !== null ? - `File ${currFileIdx + 1} of ${sortedCommandBarURIs.length}` - : `${sortedCommandBarURIs.length} file${sortedCommandBarURIs.length === 1 ? '' : 's'} changed` - } - + {/* File Navigation Group */} +
+ + + {currFileIdx !== null + ? `File ${currFileIdx + 1} of ${sortedCommandBarURIs.length}` + : `${sortedCommandBarURIs.length} file${sortedCommandBarURIs.length === 1 ? '' : 's'}` + } + + +
+ + + {/* Accept/Reject buttons - only shown when appropriate */} + {showAcceptRejectAll && ( +
+ + +
+ )} + {/* Triple colon menu button */} + {showAcceptRejectAll &&
+ + setShowAcceptRejectAllButtons(!showAcceptRejectAllButtons)} + /> + +
}
-
- - return
- {showAcceptRejectAll && acceptRejectAllButtons} - {leftRightUpDownButtons} - -
+ ) } + + + +