feat: improve preview webview UX

slidevjs · May 9, 2024 · 7305de3 · 7305de3
1 parent 731e4af
commit 7305de3
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 24 deletions.
diff --git a/packages/vscode/src/composables/usePreviewState.ts b/packages/vscode/src/composables/usePreviewState.ts
@@ -16,10 +16,10 @@ export const usePreviewState = createSingletonComposable(() => {
   const port = computed(() => activeServer.value?.port.value)
   const compatMode = useVscodeContext('slidev:preview:compat', () => !!activeServer.value?.state.compatMode)
   const ready = useVscodeContext('slidev:preview:ready', () => !!activeServer.value?.state.ready)
-  const message = computed(() => activeServer.value?.state.message ?? 'No active project')
+  const message = computed(() => activeServer.value?.state.message ?? '')
   const html = computed(() => ready.value
     ? generateReadyHtml(port.value!)
-    : generateErrorHtml(activeProject.value, message.value),
+    : generateErrorHtml(message.value),
   )
 
   function refresh() {

diff --git a/packages/vscode/src/html/error.ts b/packages/vscode/src/html/error.ts
@@ -1,18 +1,34 @@
-import type { SlidevProject } from '../projects'
+import { activeProject, projects } from '../projects'
 import { getSlidesTitle } from '../utils/getSlidesTitle'
 
-export function generateErrorHtml(project: SlidevProject | undefined, message: string) {
-  const infoText = project
+export function generateErrorHtml(message: string) {
+  const project = activeProject.value
+  const info = project
     ? `Slidev server for <i>${getSlidesTitle(project.data)}</i> ${project.port
       ? `not found on <code>http://localhost:${project.port}</code>`
       : `not started`
     }.`
-    : `No active project`
+    : projects.size
+      ? `No active project`
+      : `No projects found`
+  const errorMessage = message ? `(${message})` : ``
+  const instruction = project
+    ? `Please start the server first.`
+    : projects.size
+      ? `Please choose one first.`
+      : `Please add one first.`
+  const action = project
+    ? project.port
+      ? ``
+      : `<button onclick="sendCommand('start-dev')"> Start Dev Server </button>`
+    : projects.size
+      ? `<button onclick="sendCommand('choose-entry')"> Choose active project </button>`
+      : `<button onclick="sendCommand('add-entry')"> Add markdown file </button>`
   return `
   <head>
     <script>
       const vscode = acquireVsCodeApi()
-      window.sendCommand = (command) => void vscode.postMessage({ command })
+      window.sendCommand = (command) => void vscode.postMessage({ type: 'command', command })
     </script>
     <style>
     button {
@@ -45,17 +61,11 @@ export function generateErrorHtml(project: SlidevProject | undefined, message: s
   </head>
   <body>
     <div style="text-align: center">
-      <p>
-        ${infoText}
-      </p>
-      <p>
-        ${message ? `(${message})` : ''}
-      </p>
-      <p>
-        please start the server first.
-      </p>
+      <p> ${info} </p>
+      <p> ${errorMessage} </p>
+      <p> ${instruction} </p>
       <div class="action-container">
-        ${project?.port ? `<button onclick="sendCommand('start-dev')"> Start Dev Server </button>` : ''}
+        ${action}
         <button onclick="sendCommand('config-port')"> Configure Port </button>
       </div>
     </div>

diff --git a/packages/vscode/src/html/ready.ts b/packages/vscode/src/html/ready.ts
@@ -37,7 +37,7 @@ export function generateReadyHtml(port: number) {
           else
             vscode.postMessage({
               ...data,
-              command: 'update-state',
+              type: 'update-state',
             })
         }
       })

diff --git a/packages/vscode/src/views/previewWebview.ts b/packages/vscode/src/views/previewWebview.ts
@@ -36,13 +36,10 @@ export const usePreviewWebview = createSingletonComposable(() => {
           localResourceRoots: [extCtx.value.extensionUri],
         }
         view.value.webview.onDidReceiveMessage(async (data) => {
-          if (data.command === 'start-dev') {
-            commands.executeCommand('slidev.start-dev')
+          if (data.type === 'command') {
+            commands.executeCommand(`slidev.${data.command}`)
           }
-          else if (data.command === 'config-port') {
-            commands.executeCommand('slidev.config-port')
-          }
-          else if (data.command === 'update-state') {
+          else if (data.type === 'update-state') {
             Object.assign(previewNavState, data.navState)
             if (initializedClientId.value !== data.clientId) {
               initializedClientId.value = data.clientId