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?
#861 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
65/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
playwright, react, tailwindcss, typescript
Ambito
frontend

Direzione di ricerca

Start with app-sidebar.tsx and settings/layout.tsx to understand their navigation lists and access filters, then read app-shell.tsx to find where the palette should be mounted. Check api.ts and the redesign.spec.ts Playwright pattern; implement the shared navigation and palette, then run the new command-palette.spec.ts and frontend lint. Done means the listed shortcuts, filters, navigation, mobile trigger, and accessibility behavior pass the acceptance criteria.

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

Descrizione

enhancement hacktoberfest help wanted

Part of the October Challenge #846.

Why

Workspaces grow to dozens of connectors and several MCP servers, and getting to "the SAP connector's tools" means sidebar → Connectors → scroll → click. A command palette (as in Linear, Vercel, GitHub, Supabase) lets power users jump anywhere with the keyboard. There is no keyboard navigation of this kind in the frontend today.

Self-hosted vs Cloud

  • Self-hosted: enabled in Community and Business.
  • Cloud (DEPLOYMENT_MODE=cloud): enabled. Entries for self-hosted-only pages (e.g. Single sign-on) are hidden, exactly like the settings sub-navigation does.
  • Who can use it: every signed-in user. Entries for admin-only pages (Users, Roles, Single sign-on, License, Administration) are shown only when user.role === 'ADMIN'. This is a convenience filter; the pages and API already enforce access, so do not rely on the palette for security. Connectors and MCP servers come from the same org-scoped endpoints the list pages use, so a user only ever sees their current organization's items.

What to build

  1. Add cmdk (small, unstyled, built on @radix-ui/react-dialog, which is already a dependency). No other new dependency.
  2. New packages/frontend/src/components/command-palette.tsx, mounted once in AppShell so it exists on every authenticated page and never on /login.
  3. Open with ⌘K (macOS) / Ctrl+K (others); close with Esc. Add a small "Search ⌘K" trigger button in the sidebar header so touch and mouse users can reach it too (show Ctrl K on non-Mac).
  4. Groups:
    • Pages: the sidebar NAV entries + settings entries. Refactor so both the sidebar/settings layout and the palette read one list (export it, add adminOnly/selfHostedOnly flags) instead of duplicating hrefs.
    • Connectors: connectors.list(token) → /connectors/<id>.
    • MCP servers: mcpServers.list(token) → /mcp-server/<id>.
    • Actions: "New connector" (/connectors/new), "Toggle theme" (useTheme().setTheme), "Switch organization → " for each entry of orgs (calls switchOrg).
  5. Fetch connectors/servers lazily on first open, cache for the session, refetch on org switch. Show a loading row; on an API error show the static groups only.
  6. Fuzzy search via cmdk's built-in filter; up to ~8 results per group. Style with the existing CSS variables (--surface, --border, --text-2, …) so light and dark themes work.

Where to look

  • packages/frontend/package.json — current UI deps (Radix primitives, lucide-react, Tailwind 4; no palette lib yet).
  • packages/frontend/src/components/app-sidebar.tsx:43 — NAV groups to reuse; :90 useAuth() with orgs, switchOrg.
  • packages/frontend/src/app/settings/layout.tsx:27 — SIDEBAR_SECTIONS with adminOnly / selfHostedOnly; :54–55 how isAdmin and isCloud are derived (useAuth() → user.role, deploymentMode).
  • packages/frontend/src/components/app-shell.tsx:87 — where AppSidebar is rendered; mount the palette next to it.
  • packages/frontend/src/lib/api.ts:313 (connectors.list), :1360 (mcpServers.list).
  • packages/frontend/src/lib/theme-context.tsx:20 — useTheme().
  • packages/frontend/tests/e2e/redesign.spec.ts — fake-session + page.route('/api/…') pattern for Playwright tests without a backend.

Acceptance criteria

  • Ctrl+K opens the palette on /, /connectors and a settings page; typing a connector name and pressing Enter navigates to it.
  • As VIEWER/EDITOR, admin-only pages are not listed; as ADMIN they are. With deploymentMode: 'cloud' (stub /health/server-info), "Single sign-on" is not listed.
  • Focus is trapped while open and returns to the previous element on close; the dialog has an accessible label.
  • The browser's own Ctrl+K shortcut is preventDefaulted only when the palette handles it.
  • Playwright spec packages/frontend/tests/e2e/command-palette.spec.ts (run with npm run test:e2e --workspace=packages/frontend) covering the points above, plus a mobile-width check that the trigger button opens it.
  • npm run lint --workspace=packages/frontend passes; bundle impact noted in the PR (cmdk is ~10 kB gzipped).
  • Docs: one line in README.md features list.

Out of scope

  • Searching tools across connectors, Audit Log entries or Knowledge Graph nodes (needs a search endpoint — follow-up).
  • Running tools or destructive actions (delete connector, revoke key) from the palette.
  • Recently-visited items / user-configurable shortcuts.
  • Translating palette strings (see the i18n foundation issue #859).

Size

M (1–2 days).

How to claim

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

Lingua principale
TypeScript
Stelle
856
Fork
82
Merge medio
6h 15m
PR unite (30g)
141

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.