authorgravatar for Taras.Fomin@gmail.comTaras <Taras.Fomin@gmail.com> 2026-08-19 08:53:42+03:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-19 01:53:42-04:00
log36f4314ab768dca3fc20af6ac25e7011b4b0447f
tree29418d40bebb31106dc218237580bca2b16206b3
parent67e2fe71d937b45384a53c4e0addd9a167aed885
signature Signed by PGP key B5690EEEBB952194

fix(web): animate command palette when closing (#5169)


3 files changed, 7 insertions(+), 15 deletions(-)

apps/web/src/components/CommandPalette.logic.test.ts+3-3
......@@ -59,7 +59,7 @@ describe("reduceCommandPaletteUiState", () => {
5959
6060 expect(
6161 reduceCommandPaletteUiState(contentOpen, { _tag: "ToggleMode", mode: "content" }),
62 ).toEqual({ open: false, mode: "command", openIntent: null });
62 ).toEqual({ open: false, mode: "content", openIntent: null });
6363 });
6464
6565 it("switches between open modes without closing", () => {
......@@ -93,7 +93,7 @@ describe("reduceCommandPaletteUiState", () => {
9393 });
9494 });
9595
96 it("resets to command mode for dialog-driven opens and closes", () => {
96 it("preserves the mode on close and resets it on open", () => {
9797 const filesOpen = reduceCommandPaletteUiState(closedState, {
9898 _tag: "ToggleMode",
9999 mode: "files",
......@@ -101,7 +101,7 @@ describe("reduceCommandPaletteUiState", () => {
101101
102102 expect(reduceCommandPaletteUiState(filesOpen, { _tag: "SetOpen", open: false })).toEqual({
103103 open: false,
104 mode: "command",
104 mode: "files",
105105 openIntent: null,
106106 });
107107 expect(reduceCommandPaletteUiState(filesOpen, { _tag: "SetOpen", open: true })).toEqual({
apps/web/src/components/CommandPalette.logic.ts+4-6
......@@ -60,14 +60,12 @@ export function reduceCommandPaletteUiState(
6060): CommandPaletteUiState {
6161 switch (action._tag) {
6262 case "SetOpen":
63 return {
64 open: action.open,
65 mode: "command",
66 openIntent: action.open ? state.openIntent : null,
67 };
63 return action.open
64 ? { open: true, mode: "command", openIntent: state.openIntent }
65 : { ...state, open: false, openIntent: null };
6866 case "ToggleMode":
6967 return state.open && state.mode === action.mode
70 ? { open: false, mode: "command", openIntent: null }
68 ? { ...state, open: false, openIntent: null }
7169 : { open: true, mode: action.mode, openIntent: null };
7270 case "OpenAddProject":
7371 return { open: true, mode: "command", openIntent: { kind: "add-project" } };
apps/web/src/components/CommandPalette.tsx-6
......@@ -501,7 +501,6 @@ export function CommandPalette({ children }: { children: ReactNode }) {
501501 >
502502 {children}
503503 <CommandPaletteDialog
504 open={state.open}
505504 mode={state.mode}
506505 openIntent={state.openIntent}
507506 setOpen={setOpen}
......@@ -514,7 +513,6 @@ export function CommandPalette({ children }: { children: ReactNode }) {
514513}
515514
516515function CommandPaletteDialog(props: {
517 readonly open: boolean;
518516 readonly mode: SearchOverlayMode;
519517 readonly openIntent: CommandPaletteOpenIntent | null;
520518 readonly setOpen: (open: boolean) => void;
......@@ -523,10 +521,6 @@ function CommandPaletteDialog(props: {
523521}) {
524522 const composerHandleRef = useComposerHandleContext();
525523
526 if (!props.open) {
527 return null;
528 }
529
530524 return (
531525 <CommandDialogPopup
532526 aria-label={