Skip to content

feat(commandPalette): add cmd+k palette for navigation and preferences#384

Open
yhabib wants to merge 5 commits intomainfrom
feat/command-palette
Open

feat(commandPalette): add cmd+k palette for navigation and preferences#384
yhabib wants to merge 5 commits intomainfrom
feat/command-palette

Conversation

@yhabib
Copy link
Copy Markdown
Collaborator

@yhabib yhabib commented May 10, 2026

Motivation

Power users want to navigate the app and toggle preferences without using the mouse. A cmd+k / ctrl+k palette consolidates common destinations and preference toggles into one searchable menu, allowing you to jump directly to a proposal by ID.

Screen.Recording.2026-05-10.at.11.29.08.mov

Changes

  • Added a cmdk-based command palette with two groups: Navigate (driven by the same getNavigationItems used in the sidebar, ensuring order remains consistent) and Preferences (theme, hide balances, sign out).
  • Introduced proposal ID lookup—typing a number reveals a "Go to proposal #N" item that directs you to the proposal route.
  • Implemented useCommandPaletteShortcut for the cmd+k / ctrl+k binding, controlled by its own setting to keep it separate from the existing single-key shortcut toggle.
  • Added a CommandPaletteCard to the Appearance section of Settings, enabled by default.
  • Mounted the palette within the _auth layout, making it available only after login.

Copilot AI review requested due to automatic review settings May 10, 2026 09:34
@yhabib yhabib requested a review from a team as a code owner May 10, 2026 09:34
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 10, 2026

📊 Build Bundle Stats

The latest build generated the following assets:

dist/index.html                                           1.92 kB │ gzip:   0.68 kB
dist/assets/index-iahl0rko.css                          132.20 kB │ gzip:  20.83 kB
dist/assets/externalServices-B9hWFV-7.js                  0.21 kB │ gzip:   0.17 kB
dist/assets/Spinner-BZza0DjM.js                           0.58 kB │ gzip:   0.40 kB
dist/assets/useTvlValue-BJxWdjPV.js                       0.58 kB │ gzip:   0.39 kB
dist/assets/service-B5Zk8bf4.js                           0.60 kB │ gzip:   0.39 kB
dist/assets/useHideBalances-wS0GQRzd.js                   0.61 kB │ gzip:   0.40 kB
dist/assets/numbers-BKpW7xmm.js                           0.61 kB │ gzip:   0.36 kB
dist/assets/PageHeader-Cr3cEbbs.js                        0.75 kB │ gzip:   0.44 kB
dist/assets/Separator-H7ZCqE9L.js                         0.77 kB │ gzip:   0.46 kB
dist/assets/CertifiedBadge-pv6ueLNy.js                    0.80 kB │ gzip:   0.48 kB
dist/assets/useIcpIndex-CjyG1hl6.js                       1.08 kB │ gzip:   0.63 kB
dist/assets/addressBook-26odoOSf.js                       1.10 kB │ gzip:   0.70 kB
dist/assets/useCommandPaletteSettings-C0Mml4Y3.js         1.64 kB │ gzip:   0.79 kB
dist/assets/Switch-Dmwdxdn-.js                            1.65 kB │ gzip:   0.82 kB
dist/assets/CopyButton-BZkg0Hbt.js                        1.86 kB │ gzip:   0.95 kB
dist/assets/AnimatedNumber-W1gpt__G.js                    1.86 kB │ gzip:   1.04 kB
dist/assets/useGovernanceAppCanister-b4IkEzcS.js          1.92 kB │ gzip:   0.97 kB
dist/assets/useInfiniteQueryThenUpdateCall-XsA5SWRd.js    1.93 kB │ gzip:   0.96 kB
dist/assets/ToggleGroup-MPfPwHN0.js                       3.05 kB │ gzip:   1.33 kB
dist/assets/useTickerPrices-CPD-mZHV.js                   3.17 kB │ gzip:   1.51 kB
dist/assets/AmountInput-B7ixNrvb.js                       6.37 kB │ gzip:   2.91 kB
dist/assets/useSpamFilterCanister-C8XMZeta.js             7.20 kB │ gzip:   3.25 kB
dist/assets/QueryStates-BDUG-aBR.js                       7.94 kB │ gzip:   2.27 kB
dist/assets/index-DnQjYY9J.js                             8.76 kB │ gzip:   3.39 kB
dist/assets/Input-DPpA9Oci.js                             9.40 kB │ gzip:   3.35 kB
dist/assets/types-DEjpZpar.js                             9.96 kB │ gzip:   4.32 kB
dist/assets/TopicFollowingAccordion-CqGzIPob.js          10.05 kB │ gzip:   4.00 kB
dist/assets/index-BS-30WZS.js                            14.43 kB │ gzip:   4.58 kB
dist/assets/_auth-6TFB-wsC.js                            17.11 kB │ gzip:   6.50 kB
dist/assets/index-D0Rr2y8T.js                            23.48 kB │ gzip:   8.06 kB
dist/assets/DepositICPModal-D2CfV3C_.js                  39.67 kB │ gzip:  13.87 kB
dist/assets/index-DkoktuEs.js                            41.83 kB │ gzip:  11.85 kB
dist/assets/index-C-wo9qEt.js                            49.75 kB │ gzip:  15.03 kB
dist/assets/index-D7ghufrj.js                            67.09 kB │ gzip:  20.63 kB
dist/assets/vendor-md-CeKJeCNV.js                        89.32 kB │ gzip:  25.51 kB
dist/assets/index-Dh5cnhSb.js                           122.56 kB │ gzip:  34.65 kB
dist/assets/index-UI2HBepa.js                           123.37 kB │ gzip:  39.97 kB
dist/assets/vendor-tanstack-dUF9ZPhg.js                 126.65 kB │ gzip:  39.34 kB
dist/assets/vendor-core-react-By6K7kM9.js               193.24 kB │ gzip:  60.69 kB
dist/assets/vendor-recharts-DmT8shOr.js                 228.10 kB │ gzip:  65.92 kB
dist/assets/vendor-icp-B-t-gTJv.js                      404.22 kB │ gzip: 100.21 kB
dist/assets/vendor-libs-SlEJfvxd.js                     553.84 kB │ gzip: 183.40 kB

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a cmd+k / ctrl+k command palette to the authenticated app experience, enabling keyboard-driven navigation and preference toggles (theme, hide balances, sign out), plus a proposal-by-ID jump.

Changes:

  • Introduces a cmdk-powered command palette UI with navigation + preferences groups and proposal ID lookup.
  • Adds persisted enable/disable setting for the command palette and surfaces it in Settings (Appearance).
  • Mounts the palette in the authenticated layout and adds supporting i18n resources and dependency updates.

Reviewed changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
src/governance-app-frontend/src/routes/_auth/settings/index.tsx Adds the Command Palette toggle card to the Appearance section.
src/governance-app-frontend/src/routes/_auth.tsx Mounts the CommandPalette in the authenticated layout.
src/governance-app-frontend/src/i18n/en/userAccount.json Adds Settings copy for the command palette toggle card.
src/governance-app-frontend/src/i18n/en/commandPalette.json Adds new translations for the command palette UI.
src/governance-app-frontend/src/i18n/config.ts Registers commandPalette translations in i18n resources.
src/governance-app-frontend/src/features/userAccount/components/CommandPaletteCard.tsx New Settings card to enable/disable the palette and show the shortcut hint.
src/governance-app-frontend/src/common/hooks/useCommandPaletteShortcut.ts New global cmd+k / ctrl+k shortcut hook.
src/governance-app-frontend/src/common/hooks/useCommandPaletteSettings.ts New localStorage-backed setting for enabling/disabling the palette.
src/governance-app-frontend/src/common/constants/extra.ts Adds a localStorage key constant for the palette setting.
src/governance-app-frontend/src/common/components/CommandPalette.tsx Implements the palette behavior, groups, and actions (navigate, theme, balances, logout, proposal lookup).
src/governance-app-frontend/src/common/components/Command.tsx Adds reusable cmdk + dialog wrapper components.
src/governance-app-frontend/src/app/App.tsx Comments out derivationOrigin in II login options (unrelated to palette).
src/governance-app-frontend/package.json Adds cmdk dependency.
package-lock.json Locks cmdk dependency resolution.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +35 to +45
<Dialog {...props}>
<DialogContent
className={cn('overflow-hidden p-0', className)}
showCloseButton={showCloseButton}
>
{(title || description) && (
<div className="sr-only">
{title && <h2>{title}</h2>}
{description && <p>{description}</p>}
</div>
)}
};

const storeValue = (enabled: boolean): void => {
localStorage.setItem(COMMAND_PALETTE_SETTINGS_KEY, String(enabled));
@zeropath-ai
Copy link
Copy Markdown

zeropath-ai Bot commented May 10, 2026

No security or compliance issues detected. Reviewed everything up to 22ae22a.

Security Overview
Detected Code Changes
Change Type Relevant files
Configuration changes ► package-lock.json
    Add cmdk dependency
► src/governance-app-frontend/package.json
    Add cmdk dependency
Enhancement ► src/governance-app-frontend/src/common/components/Command.tsx
    Implement Command primitive components
► src/governance-app-frontend/src/common/components/CommandPalette.tsx
    Implement Command Palette component
► src/governance-app-frontend/src/common/constants/extra.ts
    Add COMMAND_PALETTE_SETTINGS_KEY constant
► src/governance-app-frontend/src/common/hooks/useCommandPaletteSettings.ts
    Implement hook for command palette settings
► src/governance-app-frontend/src/common/hooks/useCommandPaletteShortcut.ts
    Implement hook for command palette shortcut
► src/governance-app-frontend/src/features/userAccount/components/CommandPaletteCard.tsx
    Create component for command palette settings card
► src/governance-app-frontend/src/i18n/config.ts
    Add commandPalette to i18n configuration
► src/governance-app-frontend/src/i18n/en/commandPalette.json
    Add English translations for command palette
► src/governance-app-frontend/src/i18n/en/userAccount.json
    Add command palette title and description to user account translations
► src/governance-app-frontend/src/routes/_auth.tsx
    Render CommandPalette component
► src/governance-app-frontend/src/routes/_auth/settings/index.tsx
    Add CommandPaletteCard to settings page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants