From eff9a4d3d0a2eedd73598b05cc039f5ac6630e82 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Thu, 14 May 2026 12:10:19 +0200 Subject: [PATCH 1/5] feat(vscode-extension): add new wireframe button to status bar --- packages/vscode-extension/src/index.ts | 2 ++ .../vscode-extension/src/status-bar/index.ts | 2 ++ .../src/status-bar/new-wireframe/index.ts | 1 + .../new-wireframe/new-wireframe.status-bar.ts | 20 +++++++++++++++++++ .../src/status-bar/register.ts | 12 +++++++++++ 5 files changed, 37 insertions(+) create mode 100644 packages/vscode-extension/src/status-bar/index.ts create mode 100644 packages/vscode-extension/src/status-bar/new-wireframe/index.ts create mode 100644 packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts create mode 100644 packages/vscode-extension/src/status-bar/register.ts diff --git a/packages/vscode-extension/src/index.ts b/packages/vscode-extension/src/index.ts index 233d9683..f3c15c85 100644 --- a/packages/vscode-extension/src/index.ts +++ b/packages/vscode-extension/src/index.ts @@ -2,6 +2,7 @@ import { registerCommands } from '#commands'; import { onAppUrlChange, syncAppUrlFile } from '#core'; import { QuickMockEditorProvider } from '#editor'; import { setupMcp } from '#mcp'; +import { registerStatusBarItems } from '#status-bar'; import * as vscode from 'vscode'; export const activate = (context: vscode.ExtensionContext) => { @@ -10,6 +11,7 @@ export const activate = (context: vscode.ExtensionContext) => { context.subscriptions.push(QuickMockEditorProvider.register(context)); setupMcp(context); registerCommands(context); + registerStatusBarItems(context); }; export const deactivate = () => {}; diff --git a/packages/vscode-extension/src/status-bar/index.ts b/packages/vscode-extension/src/status-bar/index.ts new file mode 100644 index 00000000..c4125238 --- /dev/null +++ b/packages/vscode-extension/src/status-bar/index.ts @@ -0,0 +1,2 @@ +export * from './new-wireframe'; +export * from './register'; diff --git a/packages/vscode-extension/src/status-bar/new-wireframe/index.ts b/packages/vscode-extension/src/status-bar/new-wireframe/index.ts new file mode 100644 index 00000000..e5ec3505 --- /dev/null +++ b/packages/vscode-extension/src/status-bar/new-wireframe/index.ts @@ -0,0 +1 @@ +export * from './new-wireframe.status-bar'; diff --git a/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts b/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts new file mode 100644 index 00000000..bd30313e --- /dev/null +++ b/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts @@ -0,0 +1,20 @@ +import { QUICKMOCK_NEW_WIREFRAME_COMMAND_ID } from '#commands'; +import * as vscode from 'vscode'; + +const STATUS_BAR_PRIORITY = 100; + +export const registerNewWireframeStatusBarItem = ( + context: vscode.ExtensionContext +): void => { + const item = vscode.window.createStatusBarItem( + vscode.StatusBarAlignment.Left, + STATUS_BAR_PRIORITY + ); + item.text = '$(lightbulb) Quickmock'; + item.tooltip = 'Create new Quickmock wireframe'; + item.color = '#309a8a'; + item.command = QUICKMOCK_NEW_WIREFRAME_COMMAND_ID; + item.show(); + + context.subscriptions.push(item); +}; diff --git a/packages/vscode-extension/src/status-bar/register.ts b/packages/vscode-extension/src/status-bar/register.ts new file mode 100644 index 00000000..cd2bc908 --- /dev/null +++ b/packages/vscode-extension/src/status-bar/register.ts @@ -0,0 +1,12 @@ +import * as vscode from 'vscode'; +import { registerNewWireframeStatusBarItem } from './new-wireframe'; + +/** + * Registers all VS Code status bar items exposed by the extension. + * @param context The VS Code extension context. + */ +export const registerStatusBarItems = ( + context: vscode.ExtensionContext +): void => { + registerNewWireframeStatusBarItem(context); +}; From a385bac05a39ec492509a199dc3edf4669d566fe Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Thu, 14 May 2026 12:13:37 +0200 Subject: [PATCH 2/5] chore: added changeset --- .changeset/three-mirrors-begin.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/three-mirrors-begin.md diff --git a/.changeset/three-mirrors-begin.md b/.changeset/three-mirrors-begin.md new file mode 100644 index 00000000..80ceb7f2 --- /dev/null +++ b/.changeset/three-mirrors-begin.md @@ -0,0 +1,5 @@ +--- +'quickmock': minor +--- + +Added create new wireframe button on VSCode status bar. From e9bd5bb2aaf610f553236a5b4416f2b7b4ae8be2 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 19 May 2026 10:12:29 +0200 Subject: [PATCH 3/5] feat: added constants files for new-wireframe button --- .../new-wireframe/new-wireframe.consts.ts | 4 ++++ .../new-wireframe/new-wireframe.status-bar.ts | 14 +++++++++----- 2 files changed, 13 insertions(+), 5 deletions(-) create mode 100644 packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.consts.ts diff --git a/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.consts.ts b/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.consts.ts new file mode 100644 index 00000000..269c3162 --- /dev/null +++ b/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.consts.ts @@ -0,0 +1,4 @@ +export const STATUS_BAR_PRIORITY = 100; +export const ITEM_TEXT = '$(lightbulb) Quickmock'; +export const ITEM_TOOLTIP = 'Create new Quickmock wireframe'; +export const ITEM_COLOR = '#309a8a'; diff --git a/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts b/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts index bd30313e..d6279459 100644 --- a/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts +++ b/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts @@ -1,7 +1,11 @@ import { QUICKMOCK_NEW_WIREFRAME_COMMAND_ID } from '#commands'; import * as vscode from 'vscode'; - -const STATUS_BAR_PRIORITY = 100; +import { + ITEM_COLOR, + ITEM_TEXT, + ITEM_TOOLTIP, + STATUS_BAR_PRIORITY, +} from './new-wireframe.consts'; export const registerNewWireframeStatusBarItem = ( context: vscode.ExtensionContext @@ -10,9 +14,9 @@ export const registerNewWireframeStatusBarItem = ( vscode.StatusBarAlignment.Left, STATUS_BAR_PRIORITY ); - item.text = '$(lightbulb) Quickmock'; - item.tooltip = 'Create new Quickmock wireframe'; - item.color = '#309a8a'; + item.text = ITEM_TEXT; + item.tooltip = ITEM_TOOLTIP; + item.color = ITEM_COLOR; item.command = QUICKMOCK_NEW_WIREFRAME_COMMAND_ID; item.show(); From ef7344719451303c0e31a5d98ae83ac5f58ab00e Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 19 May 2026 10:18:15 +0200 Subject: [PATCH 4/5] feat: update new wireframe status bar item to use theme color token --- .../src/status-bar/new-wireframe/new-wireframe.consts.ts | 2 +- .../src/status-bar/new-wireframe/new-wireframe.status-bar.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.consts.ts b/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.consts.ts index 269c3162..25a3ab4d 100644 --- a/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.consts.ts +++ b/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.consts.ts @@ -1,4 +1,4 @@ export const STATUS_BAR_PRIORITY = 100; export const ITEM_TEXT = '$(lightbulb) Quickmock'; export const ITEM_TOOLTIP = 'Create new Quickmock wireframe'; -export const ITEM_COLOR = '#309a8a'; +export const ITEM_COLOR_THEME_TOKEN = 'statusBarItem.prominentForeground'; diff --git a/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts b/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts index d6279459..e48936ef 100644 --- a/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts +++ b/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts @@ -1,7 +1,7 @@ import { QUICKMOCK_NEW_WIREFRAME_COMMAND_ID } from '#commands'; import * as vscode from 'vscode'; import { - ITEM_COLOR, + ITEM_COLOR_THEME_TOKEN, ITEM_TEXT, ITEM_TOOLTIP, STATUS_BAR_PRIORITY, @@ -16,7 +16,7 @@ export const registerNewWireframeStatusBarItem = ( ); item.text = ITEM_TEXT; item.tooltip = ITEM_TOOLTIP; - item.color = ITEM_COLOR; + item.color = new vscode.ThemeColor(ITEM_COLOR_THEME_TOKEN); item.command = QUICKMOCK_NEW_WIREFRAME_COMMAND_ID; item.show(); From 58f58958726ab585e55753c6a54b6798d5e81763 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 19 May 2026 10:22:09 +0200 Subject: [PATCH 5/5] feat: update ITEM_COLOR_THEME_TOKEN to use statusBar.foreground --- .../src/status-bar/new-wireframe/new-wireframe.consts.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.consts.ts b/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.consts.ts index 25a3ab4d..b7d3b270 100644 --- a/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.consts.ts +++ b/packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.consts.ts @@ -1,4 +1,4 @@ export const STATUS_BAR_PRIORITY = 100; export const ITEM_TEXT = '$(lightbulb) Quickmock'; export const ITEM_TOOLTIP = 'Create new Quickmock wireframe'; -export const ITEM_COLOR_THEME_TOKEN = 'statusBarItem.prominentForeground'; +export const ITEM_COLOR_THEME_TOKEN = 'statusBar.foreground';