Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#861 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
65/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
playwright, react, tailwindcss, typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
856
Forks
82
Merge medio
5 h 18 min
PR fusionados (30 d)
162

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de HelpCode-ai/anythingmcp

Todos los issues de HelpCode-ai/anythingmcp

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.