feat(vscode-extension): add new wireframe button to status bar

Author: Ivanruii

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

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