feat: build editable transcription modal

src/app.test.ts

@@ -0,0 +1,98 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { createTranscriptionApp, type AppSnapshot, type NativeClient } from './app';
+
+const baseSnapshot: AppSnapshot = {
+  recordingStatus: 'idle',
+  transcript: {
+    text: 'Texto inicial',
+    lastMessage: 'Revise o texto antes de inserir.',
+  },
+  settings: {
+    transcription: {
+      mode: 'localFirst',
+      modelId: 'parakeet-tdt-0.6b-v3-q8_0',
+      language: null,
+      openaiCompatible: {
+        endpoint: 'https://api.openai.com/v1/audio/transcriptions',
+        apiKeyConfigured: false,
+        model: 'whisper-1',
+      },
+    },
+    insertion: {
+      method: 'clipboardPaste',
+      restoreClipboard: true,
+      waylandManualFallback: true,
+    },
+    storage: {
+      keepAudio: false,
+      audioFormat: 'wav',
+    },
+  },
+  models: [
+    {
+      model: {
+        id: 'parakeet-tdt-0.6b-v3-q8_0',
+        displayName: 'Parakeet TDT 0.6B v3 Q8',
+        repository: 'cstr/parakeet-tdt-0.6b-v3-GGUF',
+        filename: 'parakeet-tdt-0.6b-v3-q8_0.gguf',
+        quantization: 'Q8_0',
+        sizeBytes: 745_121_600,
+        languages: ['pt'],
+        recommendedForSimplePc: true,
+      },
+      status: 'notInstalled',
+    },
+  ],
+};
+
+function createFakeClient(): NativeClient & { calls: string[] } {
+  const calls: string[] = [];
+
+  return {
+    calls,
+    async invoke<T>(command: string): Promise<T> {
+      calls.push(command);
+      return baseSnapshot as T;
+    },
+  };
+}
+
+async function flushPromises(): Promise<void> {
+  await new Promise((resolve) => window.setTimeout(resolve, 0));
+}
+
+describe('createTranscriptionApp', () => {
+  beforeEach(() => {
+    document.body.textContent = '';
+  });
+
+  it('renders editable transcript modal with offline model details', async () => {
+    const mount = document.createElement('main');
+    const client = createFakeClient();
+
+    createTranscriptionApp(mount, client);
+    await flushPromises();
+
+    const editor = mount.querySelector<HTMLTextAreaElement>('#transcript-editor');
+
+    expect(editor?.value).toBe('Texto inicial');
+    expect(mount.textContent).toContain('Parakeet TDT 0.6B v3 Q8');
+    expect(mount.textContent).toContain('Offline primeiro');
+  });
+
+  it('calls native start command when record button is pressed', async () => {
+    const mount = document.createElement('main');
+    const client = createFakeClient();
+
+    createTranscriptionApp(mount, client);
+    await flushPromises();
+
+    const button = mount.querySelector<HTMLButtonElement>('.primary-button');
+    button?.click();
+    await flushPromises();
+
+    expect(client.calls).toContain('get_app_snapshot');
+    expect(client.calls).toContain('start_recording');
+  });
+});