Feature/#840 integrate new file functionality

.changeset/wise-hornets-post.md

@@ -0,0 +1,5 @@
+---
+'quickmock': minor
+---
+
+Toolbar's **New** button now creates a real `.qm` file when running inside the VS Code extension instead of just clearing the canvas.

apps/web/src/pods/toolbar/components/new-button/new-button.tsx

@@ -1,13 +1,20 @@
 import { NewIcon } from '#common/components/icons/new-button.components';
-import classes from '#pods/toolbar/toolbar.pod.module.css';
+import { isVSCodeEnv } from '#common/utils/env.utils';
+import { sendToExtension } from '#common/utils/vscode-bridge.utils';
 import { useCanvasContext } from '#core/providers';
-import { ToolbarButton } from '../toolbar-button';
+import classes from '#pods/toolbar/toolbar.pod.module.css';
+import { APP_MESSAGE_TYPE } from '@lemoncode/quickmock-bridge-protocol';
 import { SHORTCUTS } from '../../shortcut/shortcut.const';
+import { ToolbarButton } from '../toolbar-button';
 
 export const NewButton = () => {
   const { createNewFullDocument: clearCanvas } = useCanvasContext();
 
   const handleClick = () => {
+    if (isVSCodeEnv()) {
+      sendToExtension({ type: APP_MESSAGE_TYPE.NEW_FILE });
+      return;
+    }
     clearCanvas();
   };
 

packages/bridge-protocol/src/constant.ts

@@ -10,4 +10,5 @@ export const APP_MESSAGE_TYPE = {
   SAVE: 'qm:save',
   RENDER_COMPLETE: 'qm:render-complete',
   WEBVIEW_READY: 'WEBVIEW_READY',
+  NEW_FILE: 'qm:new-file',
 } as const;

packages/bridge-protocol/src/model.ts

@@ -34,7 +34,8 @@ export type AppMessage =
   | {
       type: typeof APP_MESSAGE_TYPE.RENDER_COMPLETE;
       payload?: ContentBbox;
-    };
+    }
+  | { type: typeof APP_MESSAGE_TYPE.NEW_FILE };
 
 export type PayloadOf<U extends { type: string }, T extends U['type']> =
   Extract<U, { type: T }> extends { payload: infer P } ? P : undefined;

packages/vscode-extension/src/commands/new-wireframe/index.ts

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

packages/vscode-extension/src/commands/new-wireframe/new-wireframe.command.ts

@@ -0,0 +1,14 @@
+import * as vscode from 'vscode';
+import { QUICKMOCK_NEW_WIREFRAME_COMMAND_ID } from './new-wireframe.id';
+import { handleNewWireframe } from './new-wireframe.handler';
+
+export const registerNewWireframeCommand = (
+  context: vscode.ExtensionContext
+): void => {
+  context.subscriptions.push(
+    vscode.commands.registerCommand(
+      QUICKMOCK_NEW_WIREFRAME_COMMAND_ID,
+      handleNewWireframe
+    )
+  );
+};

packages/vscode-extension/src/commands/new-wireframe/new-wireframe.handler.ts

@@ -0,0 +1,45 @@
+import { getPrimaryWorkspaceFolder } from '#core';
+import { writeFile } from '#editor/document';
+import {
+  createEmptyQuickMockContent,
+  DEFAULT_QUICKMOCK_FILE_NAME,
+  QUICKMOCK_FILE_EXTENSION,
+} from '#editor/template';
+import * as vscode from 'vscode';
+
+const CUSTOM_EDITOR_VIEW_TYPE = 'quickmock.editor';
+
+const pickSaveTarget = async (): Promise<vscode.Uri | undefined> => {
+  const folder = getPrimaryWorkspaceFolder();
+  const defaultUri = folder
+    ? vscode.Uri.joinPath(folder.uri, DEFAULT_QUICKMOCK_FILE_NAME)
+    : undefined;
+
+  return vscode.window.showSaveDialog({
+    defaultUri,
+    filters: { 'QuickMock Wireframe': [QUICKMOCK_FILE_EXTENSION] },
+    saveLabel: 'Create',
+    title: 'Create QuickMock File',
+  });
+};
+
+export const handleNewWireframe = async (): Promise<void> => {
+  const target = await pickSaveTarget();
+  if (!target) return;
+
+  try {
+    await writeFile(target, createEmptyQuickMockContent());
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    vscode.window.showErrorMessage(
+      `Failed to create QuickMock file: ${message}`
+    );
+    return;
+  }
+
+  await vscode.commands.executeCommand(
+    'vscode.openWith',
+    target,
+    CUSTOM_EDITOR_VIEW_TYPE
+  );
+};

packages/vscode-extension/src/commands/new-wireframe/new-wireframe.id.ts

@@ -0,0 +1 @@
+export const QUICKMOCK_NEW_WIREFRAME_COMMAND_ID = 'quickmock.newWireframe';

packages/vscode-extension/src/editor/handlers.ts

@@ -5,6 +5,8 @@ import {
   HOST_MESSAGE_TYPE,
   type HostMessage,
 } from '@lemoncode/quickmock-bridge-protocol';
+import * as vscode from 'vscode';
+import { QUICKMOCK_NEW_WIREFRAME_COMMAND_ID } from '#commands';
 import { type QuickMockDocument, writeFile } from './document';
 
 type PostMessageFn = (msg: HostMessage) => void;
@@ -41,5 +43,9 @@ export const handleWebviewMessage = async (
       await writeFile(doc.uri, doc.content);
       postMessage({ type: HOST_MESSAGE_TYPE.SAVED });
       break;
+
+    case APP_MESSAGE_TYPE.NEW_FILE:
+      await vscode.commands.executeCommand(QUICKMOCK_NEW_WIREFRAME_COMMAND_ID);
+      break;
   }
 };

packages/vscode-extension/src/editor/index.ts

@@ -2,3 +2,4 @@ export * from './document';
 export * from './handlers';
 export * from './panel';
 export * from './provider';
+export * from './template';

packages/vscode-extension/src/editor/template.ts

@@ -0,0 +1,17 @@
+const TEMPLATE_VERSION = '0.1';
+const DEFAULT_CANVAS_SIZE = { width: 1920, height: 1080 };
+
+export const QUICKMOCK_FILE_EXTENSION = 'qm';
+export const DEFAULT_QUICKMOCK_FILE_NAME = `untitled.${QUICKMOCK_FILE_EXTENSION}`;
+
+export const createEmptyQuickMockContent = (): string =>
+  JSON.stringify(
+    {
+      version: TEMPLATE_VERSION,
+      pages: [{ id: 'page-1', name: 'Page 1', shapes: [] }],
+      customColors: [],
+      size: DEFAULT_CANVAS_SIZE,
+    },
+    null,
+    2
+  );