Merge pull request #854 from Lemoncode/feature/#852-create-wireframe-button-on-status-bar

Feature/#852 create wireframe button on status bar

Author: manudous

.changeset/three-mirrors-begin.md

@@ -0,0 +1,5 @@
+---
+'quickmock': minor
+---
+
+Added create new wireframe button on VSCode status bar.

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 = () => {};

packages/vscode-extension/src/status-bar/index.ts

@@ -0,0 +1,2 @@
+export * from './new-wireframe';
+export * from './register';

packages/vscode-extension/src/status-bar/new-wireframe/index.ts

@@ -0,0 +1 @@
+export * from './new-wireframe.status-bar';

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_THEME_TOKEN = 'statusBar.foreground';

packages/vscode-extension/src/status-bar/new-wireframe/new-wireframe.status-bar.ts

@@ -0,0 +1,24 @@
+import { QUICKMOCK_NEW_WIREFRAME_COMMAND_ID } from '#commands';
+import * as vscode from 'vscode';
+import {
+  ITEM_COLOR_THEME_TOKEN,
+  ITEM_TEXT,
+  ITEM_TOOLTIP,
+  STATUS_BAR_PRIORITY,
+} from './new-wireframe.consts';
+
+export const registerNewWireframeStatusBarItem = (
+  context: vscode.ExtensionContext
+): void => {
+  const item = vscode.window.createStatusBarItem(
+    vscode.StatusBarAlignment.Left,
+    STATUS_BAR_PRIORITY
+  );
+  item.text = ITEM_TEXT;
+  item.tooltip = ITEM_TOOLTIP;
+  item.color = new vscode.ThemeColor(ITEM_COLOR_THEME_TOKEN);
+  item.command = QUICKMOCK_NEW_WIREFRAME_COMMAND_ID;
+  item.show();
+
+  context.subscriptions.push(item);
+};

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);
+};