docs: add command palette documentation (#777)

* docs: add command palette documentation

* docs(command-palette): add image and script setup to command palette documentation

* docs: refine command palette readme placement

* docs(command-palette): update HTTP environment and import images

Author: antonreshetov

README.md

@@ -131,6 +131,15 @@ Built-in utilities for the small tasks that usually send you to a browser tab:
 - **Encoders:** URL, Base64, JSON to TOML/XML/YAML, Color Converter
 - **Generators:** JSON Generator, Lorem Ipsum
 
+### Command Palette
+
+Jump to spaces, snippets, notes, HTTP requests, and common actions from anywhere with a keyboard-first command palette.
+
+- Open with <kbd>Cmd+P</kbd> on macOS or <kbd>Ctrl+P</kbd> on Windows and Linux
+- Search across snippets, notes, HTTP requests, spaces, and commands
+- Run create actions for snippets, notes, HTTP requests, and folders
+- Scope search to a space with `@` or open command mode with `>`
+
 ## Markdown Vault
 
 Your snippets, notes, and HTTP requests live as plain `.md` files on disk with frontmatter metadata, so the data stays readable and portable.

docs/website/.vitepress/config.mts

@@ -99,6 +99,7 @@ export default defineConfig({
           text: 'General',
           items: [
             { text: 'Overview', link: '/documentation/' },
+            { text: 'Command Palette', link: '/documentation/command-palette' },
             { text: 'Storage', link: '/documentation/storage' },
             { text: 'Sync', link: '/documentation/sync' },
             { text: 'Themes', link: '/documentation/themes' },

docs/website/documentation/command-palette.md

@@ -0,0 +1,88 @@
+---
+title: Command Palette
+description: "Use the massCode Command Palette to jump between spaces, find snippets, notes, and HTTP requests, run commands, and create new items from anywhere."
+---
+
+# Command Palette
+
+<AppVersion text=">=5.4" />
+
+The Command Palette gives you a keyboard-first way to move around massCode without reaching for the Space rail or sidebars. Use it to jump to spaces, open snippets, notes, and HTTP requests, run common actions, and create new items from any space.
+
+Open it with <kbd>Cmd+P</kbd> on macOS or <kbd>Ctrl+P</kbd> on Windows and Linux.
+
+<img :src="withBase('/command-palette.png')">
+
+## What You Can Find
+
+The palette searches by title across searchable content:
+
+- snippets in Code
+- notes in Notes
+- HTTP requests in HTTP
+- spaces
+- commands
+- recently opened items
+
+Search results are ranked with your recent usage, so items you open often move higher over time.
+
+## Run Commands
+
+Commands create new content or open app-level actions without switching spaces first.
+
+Examples:
+
+- create a new snippet
+- create a new note
+- create a new HTTP request
+- create folders in Code, Notes, or HTTP
+- open Preferences
+
+Press <kbd>Cmd+Shift+P</kbd> on macOS or <kbd>Ctrl+Shift+P</kbd> on Windows and Linux to open the palette directly in command mode. You can also type `>` after opening the palette.
+
+## Search Commands
+
+Use command mode when you want to run an action instead of opening existing content.
+
+1. Open the palette.
+2. Type `>`.
+3. Type the command name, such as `new snippet`, `new note`, or `preferences`.
+4. Press <kbd>Enter</kbd> to run the selected command.
+
+Press <kbd>Esc</kbd> to leave command mode and return to the full palette.
+
+## Search In A Space
+
+Use space mode when you want to search only one part of massCode.
+
+1. Open the palette.
+2. Type `@`.
+3. Select a space, such as **Code**, **Notes**, or **HTTP**.
+4. Type your search query.
+
+You can also type the scope directly, for example `@code auth` or `@notes release`.
+
+Press <kbd>Esc</kbd> to leave the active scope and return to the full palette.
+
+## Create From Search
+
+If a search has no exact match, the palette can create a new item from the query.
+
+- Create a snippet in Code Inbox.
+- Create a note in Notes Inbox.
+- Create an HTTP request in HTTP Inbox.
+- Create an HTTP request from a URL.
+
+When create fallbacks are shown, press <kbd>Shift+Enter</kbd> to run the first create action.
+
+## Actions Panel
+
+Open the actions panel for the selected result with <kbd>Right Arrow</kbd> or <kbd>Cmd+K</kbd> on macOS and <kbd>Ctrl+K</kbd> on Windows and Linux.
+
+Actions depend on the selected result. For example, you can copy a title, copy snippet content, copy an HTTP request URL, or run the selected command.
+
+Use <kbd>Left Arrow</kbd> or <kbd>Esc</kbd> to close the actions panel.
+
+<script setup>
+import { withBase } from 'vitepress'
+</script>

docs/website/documentation/index.md

@@ -7,7 +7,7 @@ description: "Explore the massCode documentation for code snippets, markdown not
 
 massCode is a free and open source developer workspace for code snippets, markdown notes, HTTP requests, calculations, and quick developer utilities. Instead of scattering everyday work across an editor, a notes app, an HTTP client, a calculator, and a handful of websites, you keep it in focused Spaces inside one local-first desktop app.
 
-Switch between Spaces using the rail on the left side of the app.
+Switch between Spaces using the rail on the left side of the app, or use the [Command Palette](/documentation/command-palette) to jump to spaces, content, and actions from the keyboard.
 
 <img :src="withBase('/preview.png')">