feat(app-admin): command palette (DI-based command registration)#5432
Open
adrians5j wants to merge 8 commits into
Open
feat(app-admin): command palette (DI-based command registration)#5432adrians5j wants to merge 8 commits into
adrians5j wants to merge 8 commits into
Conversation
Introduce a Cmd+K / Ctrl+K command palette shell for the admin app, mounted in AdminUI. Custom scrim+blur overlay wrapping the admin-ui Command (cmdk) primitive: autofocused input, grouped list, empty state. Toggled via useHotkeys on a dedicated zIndex layer; closes on Esc and scrim click. Phase 1 ships the themed shell with placeholder items only. Navigation and Actions command sources follow in later phases (see plans/command-palette.md). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Derive Navigation commands from the registered admin menus: leaf Menu.Link entries become searchable commands (label, parent-menu section, icon) and selecting one navigates via RouterGateway.pushState. The palette mounts inside Layout so it renders within the admin config provider tree. Rebuild the palette UI on cmdk to match the Webiny design: leading search icon + esc chip, icon-tile rows with section subtitles, primary-tinted selection with an "Open" pill, grouped headers, footer hint bar, and a search_off empty state. Adds cmdk as a direct dependency. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Refactor palette styling onto design-system tokens (Text component, spacing/radius scale, font weights) instead of hand-picked pixel values; scrim uses the DS neutral-dark overlay. Leaf navigation items inherit their parent section's icon (dropping a misleading search-glyph fallback), and the "Actions" footer hint is removed for now. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add AdminConfig.CommandPalette.Command config API (in @webiny/app-admin, mirroring Dashboard.Widget) so modules register palette actions declaratively (name, label, onSelect, group, description, icon, keywords, shortcut, pin/before/after). Commands surface via useAdminConfig().commands. The palette now renders grouped Actions alongside Navigation, preserving registration order; selecting a command runs onSelect and closes. Action rows support description subtitles and shortcut chips. Split the palette into focused modules (constants, types, deriveRows, presentational components). Seeds a demo "Copy current URL" action from AdminUI. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…phase 4/5) Add a "Search or jump to… ⌘K" trigger to the admin header, backed by a CommandPaletteProvider so the hotkey and the button share open state. Register baseline global palette actions (Copy current URL, Sign out) via the AdminConfig.CommandPalette.Command registry, replacing the earlier demo command. Richer per-module actions (new entry, publish, upload, invite) remain a follow-up owned by each module. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Move command registration + palette state to dependency injection (adapted from Pavel's #5065): a Command DI abstraction, a MobX CommandPalettePresenter resolving commands via container.resolveAll, and a CommandPaletteFeature. Keeps our design- system UI (header trigger, breadcrumb sections, ancestor icon inheritance), now driven by the presenter. - detailView: a command can render a form inside the palette; submit runs execute(data) - shortcut: registers a working global hotkey (useHotkeys gains a [keys] dep) - Global DI commands: Copy current URL, Sign out; demo Send message (detail view) - Remove the earlier React-config registry (AdminConfig.CommandPalette.Command) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add an example admin extension registering a custom command palette action via the DI Command abstraction, and expose Command from webiny/admin so extension authors can import it. Wired (enabled) in webiny.config.tsx. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a ⌘K / Ctrl+K command palette to the Webiny admin app: fuzzy search over navigation destinations and registered actions, keyboard-driven, design-system styled.
Builds on the ideas from #5065 (thanks @Pavel910) — adopting its DI-based command registration and MobX presenter, combined with a design-system UI, navigation derived from the sidebar menus, an in-palette detail view, and working global shortcuts.
What's included
@webiny/app-admin): aCommandabstraction, a MobXCommandPalettePresenterresolving commands viacontainer.resolveAll(Command), and aCommandPaletteFeature(registered inAdmin.tsx, exported from the barrel).@webiny/app-admin-ui): scrim + panel, grouped list, header "Search or jump to… ⌘K" trigger, breadcrumb sections, ancestor icon inheritance, footer hints — all on DS tokens. Driven by the presenter (observer).Menu.Links → navigate on select), merged with DI command groups.execute(data). Back returns to the list, Esc closes.shortcutregisters a working hotkey (useHotkeysgained a[keys]dep for dynamic re-registration).Send messagedetail-view command (cmd+shift+m) — flagged, safe to remove.Registering a command
Notes / follow-ups
Send messagecommand (remove thecontainer.register(SendMessageCommand)line to drop it).mod+kshares theuseHotkeyszIndex layering — a higher-zIndex layer opened elsewhere can shadow it.🤖 Generated with Claude Code