Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

🎃 Add a ⌘K / Ctrl+K command palette to the admin UI

Aperta
  • Qualcosa non va?
#1,010 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
frontend

Direzione di ricerca

Start with the mount point in packages/frontend/src/components/app-shell.tsx and the NAV array in components/app-sidebar.tsx, then the SIDEBAR_SECTIONS in app/settings/layout.tsx that move into a new lib/navigation.ts. The palette goes in components/command-palette.tsx, and the e2e reference is tests/e2e/mcp-server-connect-clients.spec.ts. Done when Ctrl+K opens and closes the palette on AppShell pages, role-based entries are filtered, the sidebar and settings navigation look unchanged, and the new tests/e2e/command-palette.spec.ts passes.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement hacktoberfest help wanted

Part of the October Challenge #997.

Why

The admin UI has ten sidebar entries, eight settings pages and, in a workspace in daily use, dozens of connectors and MCP servers. Reaching one connector means sidebar → Connectors → search → click. A ⌘K / Ctrl+K command palette (Linear, Vercel, GitHub and Grafana have one) lets keyboard users jump to any page, connector or MCP server, or run a common action, in a couple of keystrokes. Nothing like it exists in the frontend today: no palette component, no global keyboard shortcut.

Self-hosted vs Cloud

  • Self-hosted: enabled in Community and Business. Frontend only: no new endpoint, no ee/ code.
  • Cloud (DEPLOYMENT_MODE=cloud): enabled. The palette lists the same entries as the sidebar and the settings navigation, with the same rules: "Single sign-on" is hidden on Cloud (selfHostedOnly, settings/layout.tsx:41-44). Connectors and servers come from the existing organization-scoped list endpoints, so only the current workspace's records appear, and the cached lists are dropped after a workspace switch.
  • Who can use it: any signed-in user. Admin-only settings (adminOnly, settings/layout.tsx:39-46) appear only for ADMIN. "Add connector" is hidden for VIEWER, who cannot create connectors (connectors.controller.ts:589-593). The palette is mounted inside AppShell, so it never appears on /login or other signed-out pages.

What to build

  1. Shared navigation data: move NAV out of components/app-sidebar.tsx:45-73 and SIDEBAR_SECTIONS out of app/settings/layout.tsx:27-49 into packages/frontend/src/lib/navigation.ts, and import them in the sidebar, the settings layout and the palette, so a new page shows up everywhere at once. The icons can stay where they are.
  2. Component components/command-palette.tsx on @radix-ui/react-dialog, which the app already uses (for example connectors/page.tsx:271-300). No new dependency. A text input above a grouped result list: Pages, Settings, Connectors, MCP servers, Actions. Matching is case-insensitive and every typed word must appear in the label or in a short keyword list per entry (for example "logs" for Audit Log). At most 8 results per group.
  3. Records: on first open, load connectors.list(token) and mcpServers.list(token) (lib/api.ts:313, :1391) and keep them while the app is open; reload after a workspace switch. Show a loading row; if a request fails, pages and actions still work. Entries link to /connectors/<id> and /mcp-server/<id>.
  4. Actions: Add connector (/connectors/new), Browse Marketplace (/connectors/store), Toggle theme (useTheme().setTheme), "Switch to " for each other workspace (useAuth().switchOrg), Log out (useAuth().logout).
  5. Keyboard and accessibility: ⌘K on macOS and Ctrl+K elsewhere toggles the palette from anywhere inside AppShell, also while focus is in a text field; call preventDefault() so the browser's own Ctrl+K does not fire. ↑/↓ moves, Enter runs, Esc closes and focus returns to where it was. role="combobox" on the input with aria-controls and aria-activedescendant; role="listbox" and role="option" on the results.
  6. Visible trigger: a search button in the AppShell header next to the theme toggle (app-shell.tsx:138-145) that shows "⌘K" or "Ctrl K" depending on the platform, so the palette can be found and used on touch devices.

Where to look

  • packages/frontend/src/components/app-shell.tsx:69-168: mount point and header actions.
  • packages/frontend/src/components/app-sidebar.tsx:45-91: NAV, bestHref, workspace switcher and logout.
  • packages/frontend/src/app/settings/layout.tsx:9-55: settings entries and their adminOnly / selfHostedOnly rules.
  • packages/frontend/src/lib/auth-context.tsx:29-53: user, orgs, switchOrg, logout, deploymentMode.
  • packages/frontend/src/lib/theme-context.tsx:20: useTheme.
  • packages/frontend/src/lib/api.ts:313, :1391: connectors and mcpServers clients.
  • packages/frontend/src/app/connectors/page.tsx:271-300: Radix Dialog styling to match.
  • packages/frontend/tests/e2e/mcp-server-connect-clients.spec.ts:21-54: how tests fake a session and stub the API.

Acceptance criteria

  • Ctrl+K opens the palette on every AppShell page and Esc closes it; it does not open on /login.
  • Typing "audit" and Enter opens /logs; typing part of a connector's name opens that connector.
  • An admin sees "Users"; a viewer sees neither "Users" nor "Add connector". With deploymentMode: 'cloud' in the stubbed /health/server-info, "Single sign-on" is not listed.
  • The sidebar and the settings navigation look and behave as before.
  • Playwright test tests/e2e/command-palette.spec.ts covering the points above, with /api/connectors, /api/mcp-servers and /health/server-info stubbed. Run with cd packages/frontend && npm run test:e2e.
  • A keyboard-only walkthrough and a screen reader check (VoiceOver or NVDA) described in the PR.

Out of scope

  • Searching tools, logs, knowledge-graph content or docs, and any backend search endpoint.
  • Recent items, favourites, configurable shortcuts.
  • Translating the labels (the i18n foundation is a separate challenge issue).

Size

M (1–2 days)

How to claim

Comment "I'd like to work on this" and we'll assign you. Rules in #997.

Lingua principale
TypeScript
Stelle
856
Fork
82
Merge medio
8h 27m
PR unite (30g)
104

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di HelpCode-ai/anythingmcp

Tutte le issue di HelpCode-ai/anythingmcp

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.