From 4dff3e216a7491035b83255ca73bf35ca1427871 Mon Sep 17 00:00:00 2001 From: Mathew Pareles Date: Fri, 21 Mar 2025 00:22:51 -0700 Subject: [PATCH] command bar decent --- .../void-command-bar-tsx/VoidCommandBar.tsx | 105 ++++++++++++------ .../void/browser/voidCommandBarService.ts | 37 ++---- 2 files changed, 79 insertions(+), 63 deletions(-) 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 9864110e..407305cd 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 @@ -12,7 +12,7 @@ import { ScrollType } from '../../../../../../../editor/common/editorCommon.js'; import { acceptAllBg, acceptBorder, buttonFontSize, buttonTextColor, rejectAllBg, rejectBorder } from '../../../../common/helpers/colors.js'; import { VoidCommandBarProps } from '../../../voidCommandBarService.js'; -export const VoidCommandBarMain = ({ uri, editor, onChangeHeight }: VoidCommandBarProps) => { +export const VoidCommandBarMain = ({ uri, editor }: VoidCommandBarProps) => { const isDark = useIsDark() if (uri?.scheme !== 'file') return null // don't show in editors that we made, they must be files @@ -20,7 +20,7 @@ export const VoidCommandBarMain = ({ uri, editor, onChangeHeight }: VoidCommandB return
- +
} @@ -32,11 +32,9 @@ const stepIdx = (currIdx: number | null, len: number, step: -1 | 1) => { return ((currIdx ?? 0) + step + len) % len // for some reason, small negatives are kept negative. just add len to offset } -const DummyContainer = ()=>{ -} -const VoidCommandBar = ({ uri, editor, onChangeHeight }: VoidCommandBarProps) => { +const VoidCommandBar = ({ uri, editor }: VoidCommandBarProps) => { const accessor = useAccessor() const editCodeService = accessor.get('IEditCodeService') const editorService = accessor.get('ICodeEditorService') @@ -46,28 +44,11 @@ const VoidCommandBar = ({ uri, editor, onChangeHeight }: VoidCommandBarProps) => const voidModelService = accessor.get('IVoidModelService') const { state: commandBarState, sortedURIs: sortedCommandBarURIs } = useCommandBarState() - // Add a reference to the container for resize observer - const sizerRef = useRef(null) - - // Add the resize observer effect - useEffect(() => { - const inputContainer = sizerRef.current - if (!inputContainer) return; - // only observing 1 element - let resizeObserver: ResizeObserver | undefined - resizeObserver = new ResizeObserver((entries) => { - const height = entries[0].borderBoxSize[0].blockSize - onChangeHeight(height) - }) - resizeObserver.observe(inputContainer); - return () => { resizeObserver?.disconnect(); }; - }, [onChangeHeight]); // changes if the user clicks left/right or if the user goes on a uri with changes const [currUriIdx, setUriIdx] = useState(null) const [currUriHasChanges, setCurrUriHasChanges] = useState(false) - const anyUriHasChanges = sortedCommandBarURIs.length !== 0 useEffect(() => { const i = sortedCommandBarURIs.findIndex(e => e.fsPath === uri?.fsPath) if (i !== -1) { @@ -137,19 +118,26 @@ const VoidCommandBar = ({ uri, editor, onChangeHeight }: VoidCommandBarProps) => const currDiffIdx = uri ? commandBarState[uri.fsPath]?.diffIdx ?? null : null - const sortedDiffIds = uri ? commandBarState[uri.fsPath]?.sortedDiffIds ?? null : null + const sortedDiffIds = uri ? commandBarState[uri.fsPath]?.sortedDiffIds ?? [] : [] + const sortedDiffZoneIds = uri ? commandBarState[uri.fsPath]?.sortedDiffZoneIds ?? [] : [] + const nextDiffIdx = getNextDiffIdx(1) const prevDiffIdx = getNextDiffIdx(-1) const nextURIIdx = getNextUriIdx(1) const prevURIIdx = getNextUriIdx(-1) + const isAChangeInThisFile = sortedDiffIds.length !== 0 + const isADiffZoneInThisFile = sortedDiffZoneIds.length !== 0 + const isADiffZoneInAnyFile = sortedCommandBarURIs.length !== 0 - // if there are *any* changes at all - const navPanel = anyUriHasChanges &&
+ if (!isADiffZoneInAnyFile) { // no changes for the user to accept + return null + } + + + const buttonsHTML = <> + -
+ + const descriptionHTML = isADiffZoneInThisFile ? + <> {currUriIdx !== null && sortedCommandBarURIs.length &&
- File {currUriIdx + 1} of {sortedCommandBarURIs.length} + {`File ${currUriIdx + 1} of ${sortedCommandBarURIs.length}`}
} - {currDiffIdx !== null && sortedDiffIds?.length &&
- Diff {currDiffIdx + 1} of {sortedDiffIds?.length ?? 0} -
} -
-
+ {/*
+ {!isAChangeInThisFile ? + `(No changes)` + : `Diff ${(currDiffIdx ?? 0) + 1} of ${sortedDiffIds.length}` + } +
*/} + + : <> + {`${sortedCommandBarURIs.length} file${sortedCommandBarURIs.length === 1 ? '' : 's'}`} + + + // accept/reject if current URI has changes @@ -276,13 +274,48 @@ const VoidCommandBar = ({ uri, editor, onChangeHeight }: VoidCommandBarProps) => - return
+ // const closeCommandBar = useCallback(() => { + // commandService.executeCommand('void.hideCommandBar'); + // }, [commandService]); + + // const hideButton = + + // const actionButtons = currUriHasChanges && ( + //
+ // {acceptAllButton} + // {rejectAllButton} + // {hideButton} + //
+ // ); + + + // dummy container due to annoyances with VS Code mounting the widget + return
{currUriHasChanges && <>
{acceptAllButton} {rejectAllButton}
} - {navPanel} +
+
+ {buttonsHTML} +
+
+ {descriptionHTML} +
+
} diff --git a/src/vs/workbench/contrib/void/browser/voidCommandBarService.ts b/src/vs/workbench/contrib/void/browser/voidCommandBarService.ts index 28392bd5..2b01e37b 100644 --- a/src/vs/workbench/contrib/void/browser/voidCommandBarService.ts +++ b/src/vs/workbench/contrib/void/browser/voidCommandBarService.ts @@ -352,7 +352,6 @@ registerSingleton(IVoidCommandBarService, VoidCommandBarService, InstantiationTy export type VoidCommandBarProps = { uri: URI | null; editor: ICodeEditor; - onChangeHeight: (height: number) => void; } @@ -376,33 +375,17 @@ class AcceptRejectAllFloatingWidget extends Widget implements IOverlayWidget { const { root } = dom.h('div@root'); // Style the container + // root.style.backgroundColor = 'rgb(248 113 113)'; + root.style.height = '16rem'; // make a fixed size, and all contents go on the bottom right. this fixes annoying VS Code mounting issues + root.style.width = '16rem'; + root.style.flexDirection = 'column'; + root.style.justifyContent = 'flex-end'; + root.style.alignItems = 'flex-end'; root.style.zIndex = '2'; root.style.padding = '4px'; - root.style.alignItems = 'center'; root.style.pointerEvents = 'none'; - // Mount command bar using mountVoidCommandBar - // this.editor.getDomNode()?.appendChild(root) - - const onChangeHeight = (height: number) => { - if (height === 0) return; - - this._height = height - // editor.layoutOverlayWidget(this) - // stupid hack because layoutOverlayWidget doesn't work - editor.removeOverlayWidget(this) - editor.addOverlayWidget(this) - } - - // alternative to mount VoidCommandBar without the stupid widget - // editor.getLayoutInfo() - // this._register( - // editor.onDidLayoutChange(e => { - // // e.height - // // e.width - // }) - // ) - - + root.style.display = 'flex'; + root.style.overflow = 'hidden'; this._domNode = root; @@ -412,14 +395,14 @@ class AcceptRejectAllFloatingWidget extends Widget implements IOverlayWidget { const uri = editor.getModel()?.uri || null - const res = mountVoidCommandBar(root, accessor, { uri, editor, onChangeHeight } satisfies VoidCommandBarProps) + const res = mountVoidCommandBar(root, accessor, { uri, editor } satisfies VoidCommandBarProps) if (!res) return this._register(toDisposable(() => res.dispose?.())) this._register(editor.onDidChangeModel((model) => { const uri = model.newModelUrl - res.rerender({ uri, editor, onChangeHeight }) + res.rerender({ uri, editor }) })) });