| author |  Taras <Taras.Fomin@gmail.com> 2026-08-19 08:53:42+03:00 |
| committer |  GitHub <noreply@github.com> 2026-08-19 01:53:42-04:00 |
| log | 36f4314ab768dca3fc20af6ac25e7011b4b0447f |
| tree | 29418d40bebb31106dc218237580bca2b16206b3 |
| parent | 67e2fe71d937b45384a53c4e0addd9a167aed885 |
| signature | Signed by PGP key B5690EEEBB952194 |
fix(web): animate command palette when closing (#5169)
3 files changed, 7 insertions(+), 15 deletions(-)
apps
apps/web/src/components/CommandPalette.logic.test.ts+3-3
| ... | @@ -59,7 +59,7 @@ describe("reduceCommandPaletteUiState", () => { | ... | @@ -59,7 +59,7 @@ describe("reduceCommandPaletteUiState", () => { |
| 59 | 59 | ||
| 60 | expect( | 60 | expect( |
| 61 | reduceCommandPaletteUiState(contentOpen, { _tag: "ToggleMode", mode: "content" }), | 61 | reduceCommandPaletteUiState(contentOpen, { _tag: "ToggleMode", mode: "content" }), |
| 62 | ).toEqual({ open: false, mode: "command", openIntent: null }); | 62 | ).toEqual({ open: false, mode: "content", openIntent: null }); |
| 63 | }); | 63 | }); |
| 64 | 64 | ||
| 65 | it("switches between open modes without closing", () => { | 65 | it("switches between open modes without closing", () => { |
| ... | @@ -93,7 +93,7 @@ describe("reduceCommandPaletteUiState", () => { | ... | @@ -93,7 +93,7 @@ describe("reduceCommandPaletteUiState", () => { |
| 93 | }); | 93 | }); |
| 94 | }); | 94 | }); |
| 95 | 95 | ||
| 96 | it("resets to command mode for dialog-driven opens and closes", () => { | 96 | it("preserves the mode on close and resets it on open", () => { |
| 97 | const filesOpen = reduceCommandPaletteUiState(closedState, { | 97 | const filesOpen = reduceCommandPaletteUiState(closedState, { |
| 98 | _tag: "ToggleMode", | 98 | _tag: "ToggleMode", |
| 99 | mode: "files", | 99 | mode: "files", |
| ... | @@ -101,7 +101,7 @@ describe("reduceCommandPaletteUiState", () => { | ... | @@ -101,7 +101,7 @@ describe("reduceCommandPaletteUiState", () => { |
| 101 | 101 | ||
| 102 | expect(reduceCommandPaletteUiState(filesOpen, { _tag: "SetOpen", open: false })).toEqual({ | 102 | expect(reduceCommandPaletteUiState(filesOpen, { _tag: "SetOpen", open: false })).toEqual({ |
| 103 | open: false, | 103 | open: false, |
| 104 | mode: "command", | 104 | mode: "files", |
| 105 | openIntent: null, | 105 | openIntent: null, |
| 106 | }); | 106 | }); |
| 107 | expect(reduceCommandPaletteUiState(filesOpen, { _tag: "SetOpen", open: true })).toEqual({ | 107 | expect(reduceCommandPaletteUiState(filesOpen, { _tag: "SetOpen", open: true })).toEqual({ |
apps/web/src/components/CommandPalette.logic.ts+4-6
| ... | @@ -60,14 +60,12 @@ export function reduceCommandPaletteUiState( | ... | @@ -60,14 +60,12 @@ export function reduceCommandPaletteUiState( |
| 60 | ): CommandPaletteUiState { | 60 | ): CommandPaletteUiState { |
| 61 | switch (action._tag) { | 61 | switch (action._tag) { |
| 62 | case "SetOpen": | 62 | case "SetOpen": |
| 63 | return { | 63 | return action.open |
| 64 | open: action.open, | 64 | ? { open: true, mode: "command", openIntent: state.openIntent } |
| 65 | mode: "command", | 65 | : { ...state, open: false, openIntent: null }; |
| 66 | openIntent: action.open ? state.openIntent : null, | ||
| 67 | }; | ||
| 68 | case "ToggleMode": | 66 | case "ToggleMode": |
| 69 | return state.open && state.mode === action.mode | 67 | return state.open && state.mode === action.mode |
| 70 | ? { open: false, mode: "command", openIntent: null } | 68 | ? { ...state, open: false, openIntent: null } |
| 71 | : { open: true, mode: action.mode, openIntent: null }; | 69 | : { open: true, mode: action.mode, openIntent: null }; |
| 72 | case "OpenAddProject": | 70 | case "OpenAddProject": |
| 73 | return { open: true, mode: "command", openIntent: { kind: "add-project" } }; | 71 | 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 }) { | ... | @@ -501,7 +501,6 @@ export function CommandPalette({ children }: { children: ReactNode }) { |
| 501 | > | 501 | > |
| 502 | {children} | 502 | {children} |
| 503 | <CommandPaletteDialog | 503 | <CommandPaletteDialog |
| 504 | open={state.open} | ||
| 505 | mode={state.mode} | 504 | mode={state.mode} |
| 506 | openIntent={state.openIntent} | 505 | openIntent={state.openIntent} |
| 507 | setOpen={setOpen} | 506 | setOpen={setOpen} |
| ... | @@ -514,7 +513,6 @@ export function CommandPalette({ children }: { children: ReactNode }) { | ... | @@ -514,7 +513,6 @@ export function CommandPalette({ children }: { children: ReactNode }) { |
| 514 | } | 513 | } |
| 515 | 514 | ||
| 516 | function CommandPaletteDialog(props: { | 515 | function CommandPaletteDialog(props: { |
| 517 | readonly open: boolean; | ||
| 518 | readonly mode: SearchOverlayMode; | 516 | readonly mode: SearchOverlayMode; |
| 519 | readonly openIntent: CommandPaletteOpenIntent | null; | 517 | readonly openIntent: CommandPaletteOpenIntent | null; |
| 520 | readonly setOpen: (open: boolean) => void; | 518 | readonly setOpen: (open: boolean) => void; |
| ... | @@ -523,10 +521,6 @@ function CommandPaletteDialog(props: { | ... | @@ -523,10 +521,6 @@ function CommandPaletteDialog(props: { |
| 523 | }) { | 521 | }) { |
| 524 | const composerHandleRef = useComposerHandleContext(); | 522 | const composerHandleRef = useComposerHandleContext(); |
| 525 | 523 | ||
| 526 | if (!props.open) { | ||
| 527 | return null; | ||
| 528 | } | ||
| 529 | |||
| 530 | return ( | 524 | return ( |
| 531 | <CommandDialogPopup | 525 | <CommandDialogPopup |
| 532 | aria-label={ | 526 | aria-label={ |