Что такое палитра команд — поиск, который находит не страницы, а действия

Где на GitHub переключается тёмная тема? В настройках профиля? В разделе про внешний вид? В меню под аватаркой?

Можно не вспоминать. Жмёшь Ctrl+K, вводишь > и пишешь «theme». В списке появляется команда «Switch theme to…». Enter — готово. Ты так и не узнал, в каком меню она живёт, и тебе это не понадобилось.

Это палитра команд. Поиск, который находит не страницы и не товары, а действия. И у неё есть одна хитрая слабость — про неё ближе к концу.

Что такое палитра команд

Палитра команд — окно с полем ввода, которое открывается горячей клавишей. Ты печатаешь пару букв, список команд сужается, Enter выполняет выбранную.

Где ты её встретишь:

• VS Code — Ctrl+Shift+P (на Mac ⇧⌘P). Документация редактора называет это самой важной комбинацией: оттуда доступна вся его функциональность.
• GitHub — Ctrl+K открывает поиск и переходы, Ctrl+Shift+K — сразу команды. Палитра пока в режиме предпросмотра и включается в настройках.
• Рабочие веб-приложения — трекеры задач, заметки, админки. Для React есть готовый компонент cmdk, у которого на GitHub почти 13 тысяч звёзд. Его README так и озаглавлен — «⌘K».

Чем она отличается от меню и поиска

Кажется, это просто ещё один поиск. Но у каждого из трёх свой вопрос.

• Меню спрашивает: «Ты знаешь, где это лежит?» Не знаешь — ходи по разделам.
• Поиск спрашивает: «Что ты хочешь найти?» И ищет по содержимому: статьям, товарам, письмам. Как сделать такой, мы разбирали в гайде про поиск в приложении.
• Палитра спрашивает: «Что ты хочешь сделать?» Создать задачу, переключить тему, открыть настройки, перейти в нужный проект.

Отсюда главный плюс. Меню заставляет помнить, где лежит функция. Палитре достаточно помнить, что ты хочешь. Человек впервые открыл сложное приложение, пишет «экспорт» — и находит экспорт, даже если тот закопан в третьем подменю.

Второй плюс — руки не уходят с клавиатуры. Тем, кто сидит в приложении весь день, это экономит сотни движений мышью.

GitHub добавляет третий: палитра подсказывает команды по месту, где ты сейчас. В репозитории она предложит одно, в профиле — другое.

Как она устроена внутри

Палитра — это просто список команд. У каждой есть:

1. Название — «Переключить тему».
2. Синонимы — «тёмная тема», «ночной режим», «dark». Люди называют одно и то же по-разному, и искать надо по всем словам.
3. Действие — функция, которая выполнится по Enter.
4. Горячая клавиша, если есть. Её показывают справа от названия — так палитра заодно учит шорткатам. Человек пять раз открыл тему через палитру, увидел рядом сочетание клавиш и в шестой раз нажмёт его сразу.

Когда ты печатаешь, код фильтрует этот список и поднимает лучшие совпадения наверх. У cmdk фильтрация и сортировка уже встроены, а синонимы задаются пропом keywords:

import { Command } from 'cmdk';

<Command.Dialog open={open} onOpenChange={setOpen} label="Команды">
  <Command.Input placeholder="Что сделать?" />
  <Command.List>
    <Command.Empty>Ничего не нашлось</Command.Empty>
    <Command.Item keywords={['тёмная', 'ночной режим']} onSelect={toggleTheme}>
      Переключить тему
    </Command.Item>
    <Command.Item keywords={['задача', 'таск']} onSelect={createTask}>
      Новая задача
    </Command.Item>
  </Command.List>
</Command.Dialog>

Если команд сотни и называют их очень по-разному, можно искать даже по смыслу — это семантический поиск. Но для первых двадцати команд хватит синонимов.

Нужна ли она твоему приложению

Вот та самая слабость: палитру не видно. Горячая клавиша — невидимая дверь. Кто не знает про Ctrl+K, тот её никогда не откроет.

Поэтому правило простое: палитра — дополнительный путь, а не замена меню. И у неё должна быть видимая точка входа: кнопка с лупой в шапке и подсказка Ctrl K рядом.

Когда она окупается:

• приложение сложное — десятки действий и настроек;
• в нём работают каждый день: трекер задач, редактор, CRM, админка;
• у людей под рукой клавиатура.

Когда не нужна:

• лендинг или сайт на пять страниц — там всё и так на виду;
• мобильное приложение — горячей клавиши нет;
• сервис, который открывают раз в месяц: шорткат просто не запомнится.

С чего начать: выпиши 10–15 действий, которые люди делают чаще всего. Добавь каждому два-три синонима. Этого хватит, чтобы палитра стала полезной в первый же день.

Почему палитру открывают именно Ctrl+K?

Это соглашение, а не стандарт: так сделано на GitHub и в примере из README cmdk. Учти, что сочетание может конфликтовать с горячими клавишами браузера или системы — GitHub прямо об этом предупреждает и даёт сменить шорткат в настройках. В своём обработчике вызывай preventDefault().

Палитра команд — это то же самое, что поиск по сайту?

Нет. Поиск находит содержимое — страницы, товары, сообщения. Палитра находит действия и места внутри приложения. Их иногда совмещают в одном окне, как на GitHub, но задачи у них разные.

Работает ли палитра на телефоне?

Без клавиатуры главный плюс пропадает: горячую клавишу не нажать, печатать неудобно. Если список команд всё же нужен на телефоне, открывай его обычной кнопкой в интерфейсе.