Quick Command Toolbar

A VS Code extension to create custom command buttons in the status bar with icons, keyboard shortcuts, and one-click execution.

Features

Status Bar Buttons - Create custom buttons that run commands with a single click
Built-in Manager UI - Visual interface to add, edit, delete, and organize buttons
Icon Support - Choose from 30+ icons (codicons)
Keyboard Shortcuts - Assign custom shortcuts to any button
Terminal Grouping - Commands run in organized terminal sessions
Custom Working Directory - Set different directories per button
Enable/Disable - Toggle buttons without deleting them
Search & Filter - Find buttons quickly in the manager
Persistent Storage - Buttons saved in workspace settings

Installation

Download quick-command-toolbar-1.0.0.vsix
Open VS Code
Go to Extensions (Ctrl+Shift+X)
Click ... menu → Install from VSIX
Select the downloaded .vsix file

Usage

Status Bar

After installation, you'll see a QCT button in the status bar:

[QCT] | [Button 1] [Button 2] [Button 3] ...

Click QCT to open the Manager
Click any custom button to run its command

Opening the Manager

Option 1: Click the QCT button in status bar

Option 2: Press Ctrl+Shift+P and type QCT: Open Manager

Creating a Button

Open the Manager
Click Add Button
Fill in the form:
- Label - Display name (e.g., "Dev Server")
- Button ID - Unique identifier (e.g., "npm-dev")
- Command - Command to run (e.g., "npm run dev")
- Icon - Choose from dropdown
- Keyboard Shortcut - Optional (e.g., "ctrl+shift+d")
- Terminal Name - Group commands in same terminal
- Working Directory - Optional custom path
Click Create Button

Managing Buttons

From the Manager panel:

Action	How
Run Command	Click the play button on any card
Edit Button	Click the edit button on any card
Toggle Enable/Disable	Click the checkmark/X button
Delete Button	Click the trash button
Search	Type in the search box

Button Card Layout

Each button displays:

Icon + Label - Visual identification
Command - The actual command being run
Metadata - Keyboard shortcut, terminal name

Button Configuration Options

Option	Description	Required
`id`	Unique identifier (no spaces)	Yes
`label`	Display text in status bar	Yes
`command`	Command to execute in terminal	Yes
`icon`	Codicon name (e.g., "play", "rocket")	No
`shortcut`	Keyboard shortcut (e.g., "ctrl+shift+d")	No
`terminal`	Terminal name for grouping	No
`cwd`	Working directory path	No
`enabled`	Enable/disable without deleting	No

Available Icons

play, debug-start, debug-stop, terminal, rocket, beaker, package
server, database, cloud, gear, wrench, hammer, sync, refresh
add, remove, edit, copy, clippy, save, folder, file, symbol-misc
github, git-branch, git-commit, git-pull-request, chrome, grabber

Examples

NPM Commands

{
  "id": "npm-dev",
  "label": "Dev",
  "command": "npm run dev",
  "icon": "play",
  "shortcut": "ctrl+shift+d"
}

Docker

{
  "id": "docker-up",
  "label": "Docker Up",
  "command": "docker-compose up",
  "icon": "container",
  "terminal": "docker"
}

Python

{
  "id": "python-server",
  "label": "Flask",
  "command": "python app.py",
  "icon": "beaker",
  "cwd": "${workspaceFolder}/backend"
}

Commands

Command	Description
`QCT: Open Manager`	Opens the visual manager panel
`QCT: Add New Button`	Opens add button form
`QCT: Refresh Toolbar`	Reloads all buttons

Keyboard Shortcuts

To add a keyboard shortcut for your button:

Go to File → Preferences → Keyboard Shortcuts
Search for your button's command (e.g., qct.run.npm-dev)
Set your preferred keybinding

File Structure

quick-command-toolbar/
├── extension.ts      # Main extension code
├── package.json       # Extension manifest
├── resources/
│   ├── icon.png       # Extension icon (128x128)
│   ├── codicon.css    # Icon font
│   └── codicon.ttf    # Icon font
└── out/
    └── extension.js   # Compiled code

Troubleshooting

Buttons not showing?

Reload VS Code window
Run QCT: Refresh Toolbar command
Check if button is enabled in settings

Icons not loading?

Make sure you're using valid codicon names
Try reinstalling the extension

Commands not running?

Check the command is valid
Verify the working directory exists
Check VS Code's terminal output

License

MIT License - See LICENSE.md

Contributing

Contributions welcome! Please open an issue or pull request.

Patel Chirag