From b3522ad73c12b82ed4a80ca25bda456fb369c220 Mon Sep 17 00:00:00 2001 From: Mathew Pareles Date: Fri, 21 Mar 2025 06:42:03 -0700 Subject: [PATCH] better styling for commandbar --- .../react/src/sidebar-tsx/SidebarChat.tsx | 26 ++- .../void-command-bar-tsx/VoidCommandBar.tsx | 218 +++++++++--------- 2 files changed, 130 insertions(+), 114 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 f887dea6..b7fa8c45 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 @@ -479,9 +479,9 @@ export const getBasename = (pathStr: string) => { } export const SelectedFiles = ( - { type, selections, setSelections, showProspectiveSelections }: - | { type: 'past', selections: StagingSelectionItem[]; setSelections?: undefined, showProspectiveSelections?: undefined } - | { type: 'staging', selections: StagingSelectionItem[]; setSelections: ((newSelections: StagingSelectionItem[]) => void), showProspectiveSelections?: boolean } + { type, selections, setSelections, showProspectiveSelections, messageIdx, }: + | { type: 'past', selections: StagingSelectionItem[]; setSelections?: undefined, showProspectiveSelections?: undefined, messageIdx: number, } + | { type: 'staging', selections: StagingSelectionItem[]; setSelections: ((newSelections: StagingSelectionItem[]) => void), showProspectiveSelections?: boolean, messageIdx?: number } ) => { const accessor = useAccessor() @@ -593,7 +593,11 @@ export const SelectedFiles = ( if (isThisSelectionAddedAsCurrentFile) { // make it so the file is added permanently, not just as the current file const newSelection: StagingSelectionItem = { ...selection, state: { ...selection.state, wasAddedAsCurrentFile: false } } - setSelections([...selections.slice(0, i), newSelection, ...selections.slice(i + 1)]) + setSelections([ + ...selections.slice(0, i), + newSelection, + ...selections.slice(i + 1) + ]) } } else { // show text @@ -620,8 +624,8 @@ export const SelectedFiles = ( + (isThisSelectionAFile ? '' : ` (${selection.range.startLineNumber}-${selection.range.endLineNumber})`) } - {isThisSelectionAddedAsCurrentFile && currentURI?.toString() === selection.fileURI.toString() && - + {isThisSelectionAddedAsCurrentFile && messageIdx === undefined && currentURI?.toString() === selection.fileURI.toString() && + {`(Current File)`} } @@ -792,7 +796,13 @@ const UserMessageComponent = ({ chatMessage, messageIdx, isCommitted }: { chatMe const canInitialize = mode === 'edit' && textAreaRefState const shouldInitialize = _justEnabledEdit.current || _mustInitialize.current if (canInitialize && shouldInitialize) { - setStagingSelections(chatMessage.selections || []) + setStagingSelections((chatMessage.selections || []) + .map(s => { // quick hack so we dont have to do anything more + const sNew = s + sNew.state.wasAddedAsCurrentFile = false // wipe all "current file" info when the user first edits a message + return sNew + }) + ) if (textAreaFnsRef.current) textAreaFnsRef.current.setValue(chatMessage.displayContent || '') @@ -823,7 +833,7 @@ const UserMessageComponent = ({ chatMessage, messageIdx, isCommitted }: { chatMe let chatbubbleContents: React.ReactNode if (mode === 'display') { chatbubbleContents = <> - + {chatMessage.displayContent} } diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-command-bar-tsx/VoidCommandBar.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-command-bar-tsx/VoidCommandBar.tsx index b052ae66..b8600474 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/void-command-bar-tsx/VoidCommandBar.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/void-command-bar-tsx/VoidCommandBar.tsx @@ -133,95 +133,90 @@ const VoidCommandBar = ({ uri, editor }: VoidCommandBarProps) => { } - const buttonsHTML = <> - + const upDownDisabled = prevDiffIdx === null || nextDiffIdx === null + const leftRightDisabled = prevURIIdx === null || currUriIdx === null - + const upButton = - + const downButton = - - - - - const descriptionHTML = isADiffZoneInThisFile ? - <> - {currUriIdx !== null && sortedCommandBarURIs.length &&
- {`File ${currUriIdx + 1} of ${sortedCommandBarURIs.length}`} -
} - {/*
- {!isAChangeInThisFile ? - `(No changes)` - : `Diff ${(currDiffIdx ?? 0) + 1} of ${sortedDiffIds.length}` - } -
*/} - - : <> - {`${sortedCommandBarURIs.length} file${sortedCommandBarURIs.length === 1 ? '' : 's'}`} - + const leftButton = + + const rightButton = + const filesDescription = (isADiffZoneInThisFile ? + currUriIdx !== null && sortedCommandBarURIs.length !== 0 && + `File ${currUriIdx + 1} of ${sortedCommandBarURIs.length}` + : `${sortedCommandBarURIs.length} file${sortedCommandBarURIs.length === 1 ? '' : 's'} changed` + ); + const changesDescription = (isADiffZoneInThisFile ? + isAChangeInThisFile ? + `Diff ${(currDiffIdx ?? 0) + 1} of ${sortedDiffIds.length}` + : `No changes` + : '' + ); // accept/reject if current URI has changes const onAcceptAll = () => { @@ -237,7 +232,7 @@ const VoidCommandBar = ({ uri, editor }: VoidCommandBarProps) => { const acceptAllButton = const rejectAllButton = @@ -288,30 +283,41 @@ const VoidCommandBar = ({ uri, editor }: VoidCommandBarProps) => { // >x // - // const actionButtons = currUriHasChanges && ( - //
- // {acceptAllButton} - // {rejectAllButton} - // {hideButton} - //
- // ); + const gridLayout =
+ {/* First row */} + {filesDescription && +
+ {leftButton} +
{/* Divider */} + {rightButton} +
{/* Divider */} +
{filesDescription}
+
+ } + {/* Second row */} + {changesDescription && +
+ {upButton} +
{/* Divider */} + {downButton} +
{/* Divider */} +
{changesDescription}
+
+ } +
- // dummy container due to annoyances with VS Code mounting the widget - return
- {showAcceptRejectAll && <> -
+ return
+ {showAcceptRejectAll && +
{acceptAllButton} {rejectAllButton}
- } -
-
- {buttonsHTML} -
-
- {descriptionHTML} -
+ } +
+ {gridLayout} + {/* {oldLayout} */}
+
}