Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đã đóng
  • Có gì không ổn?
#1,010 2 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@AYUshJaiswal454 đang làm issue này rồi.

Từ ngày 14/10/2026.

  • #1094 của @AYUshJaiswal454 — đã merge

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
45/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
856
Fork
82
Merge trung bình
7 giờ 46 phút
Pull request đã merge (30 ngày)
221

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của HelpCode-ai/anythingmcp

Tất cả issue của HelpCode-ai/anythingmcp

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.