feat: improve diagnostics and add preview state indicator

package.json

@@ -44,6 +44,7 @@
     "@tauri-apps/api": "^1.3.0",
     "clsx": "^1.2.1",
     "lodash": "^4.17.21",
+    "lucide-svelte": "^0.279.0",
     "monaco-editor": "^0.38.0",
     "vscode-oniguruma": "^1.7.0",
     "vscode-textmate": "^9.0.0"

src-tauri/src/ipc/commands/typst.rs

@@ -1,7 +1,9 @@
 use super::{Error, Result};
 use crate::ipc::commands::project;
 use crate::ipc::model::TypstRenderResponse;
-use crate::ipc::{TypstCompileEvent, TypstDocument, TypstSourceError};
+use crate::ipc::{
+    TypstCompileEvent, TypstDiagnosticSeverity, TypstDocument, TypstSourceDiagnostic,
+};
 use crate::project::ProjectManager;
 use base64::Engine;
 use log::debug;
@@ -13,6 +15,7 @@ use std::path::PathBuf;
 use std::sync::Arc;
 use std::time::Instant;
 use tauri::Runtime;
+use typst::diag::Severity;
 use typst::eval::Tracer;
 use typst::geom::Color;
 use typst::ide::{Completion, CompletionKind};
@@ -118,28 +121,36 @@ pub async fn typst_compile<R: Runtime>(
                         width: width.to_pt(),
                         height: height.to_pt(),
                     }),
-                    errors: None,
+                    diagnostics: None,
                 },
             );
         }
-        Err(errors) => {
-            debug!("compilation failed with {:?} errors", errors.len());
+        Err(diagnostics) => {
+            debug!(
+                "compilation failed with {:?} diagnostics",
+                diagnostics.len()
+            );
 
             let source = world.source(source_id);
-            let errors: Vec<TypstSourceError> = match source {
-                Ok(source) => errors
+            let diagnostics: Vec<TypstSourceDiagnostic> = match source {
+                Ok(source) => diagnostics
                     .iter()
-                    .filter(|e| e.span.id() == Some(source_id))
-                    .filter_map(|e| {
-                        let span = source.find(e.span)?;
+                    .filter(|d| d.span.id() == Some(source_id))
+                    .filter_map(|d| {
+                        let span = source.find(d.span)?;
                         let range = span.range();
                         let start = content[..range.start].chars().count();
                         let size = content[range.start..range.end].chars().count();
 
-                        let message = e.message.to_string();
-                        Some(TypstSourceError {
+                        let message = d.message.to_string();
+                        Some(TypstSourceDiagnostic {
                             range: start..start + size,
+                            severity: match d.severity {
+                                Severity::Error => TypstDiagnosticSeverity::Error,
+                                Severity::Warning => TypstDiagnosticSeverity::Warning,
+                            },
                             message,
+                            hints: d.hints.iter().map(|hint| hint.to_string()).collect(),
                         })
                     })
                     .collect(),
@@ -150,7 +161,7 @@ pub async fn typst_compile<R: Runtime>(
                 "typst_compile",
                 TypstCompileEvent {
                     document: None,
-                    errors: Some(errors),
+                    diagnostics: Some(diagnostics),
                 },
             );
         }

src-tauri/src/ipc/model.rs

@@ -5,7 +5,7 @@ use std::path::PathBuf;
 #[derive(Serialize, Clone, Debug)]
 pub struct TypstCompileEvent {
     pub document: Option<TypstDocument>,
-    pub errors: Option<Vec<TypstSourceError>>,
+    pub diagnostics: Option<Vec<TypstSourceDiagnostic>>,
 }
 
 #[derive(Serialize, Clone, Debug)]
@@ -17,9 +17,18 @@ pub struct TypstDocument {
 }
 
 #[derive(Serialize, Clone, Debug)]
-pub struct TypstSourceError {
+#[serde(rename_all = "snake_case")]
+pub enum TypstDiagnosticSeverity {
+    Error,
+    Warning,
+}
+
+#[derive(Serialize, Clone, Debug)]
+pub struct TypstSourceDiagnostic {
     pub range: Range<usize>,
+    pub severity: TypstDiagnosticSeverity,
     pub message: String,
+    pub hints: Vec<String>,
 }
 
 #[derive(Serialize, Clone, Debug)]

src/components/Editor.svelte

@@ -13,6 +13,7 @@
   import IMarkerData = editorType.IMarkerData;
   import { paste } from "$lib/ipc/clipboard";
   import { throttle } from "$lib/fn";
+  import { PreviewState, shell } from "$lib/stores";
 
   let divEl: HTMLDivElement;
   let editor: ICodeEditor;
@@ -23,6 +24,8 @@
   const handleCompile = async () => {
     const model = editor.getModel();
     if (model) {
+      shell.setPreviewState(PreviewState.Compiling);
+
       // Removing the preceding slash
       await compile(model.uri.path, model.getValue());
     }
@@ -44,9 +47,9 @@
 
     // @ts-ignore
     self.MonacoEnvironment = {
-      getWorker: function(_moduleId: any, label: string) {
+      getWorker: function (_moduleId: any, label: string) {
         return new EditorWorker.default();
-      }
+      },
     };
 
     editor = (await monacoImport).editor.create(divEl, {
@@ -56,7 +59,7 @@
       folding: true,
       quickSuggestions: false,
       wordWrap: "on",
-      unicodeHighlight: { ambiguousCharacters: false }
+      unicodeHighlight: { ambiguousCharacters: false },
     });
 
     editor.onDidChangeModel((e: IModelChangedEvent) => {
@@ -79,24 +82,31 @@
 
     // Returns an unlisten function
     return appWindow.listen<TypstCompileEvent>("typst_compile", ({ event, payload }) => {
-      const { errors } = payload;
+      const { document, diagnostics } = payload;
       const model = editor.getModel();
       if (model) {
-        const markers: IMarkerData[] = errors?.map(({ range, message }) => {
-          const start = model.getPositionAt(range.start);
-          const end = model.getPositionAt(range.end);
-          return {
-            startLineNumber: start.lineNumber,
-            startColumn: start.column,
-            endLineNumber: end.lineNumber,
-            endColumn: end.column,
-            message,
-            severity: monaco.MarkerSeverity.Error
-          };
-        }) ?? [];
+        const markers: IMarkerData[] =
+          diagnostics?.map(({ range, severity, message, hints }) => {
+            const start = model.getPositionAt(range.start);
+            const end = model.getPositionAt(range.end);
+            return {
+              startLineNumber: start.lineNumber,
+              startColumn: start.column,
+              endLineNumber: end.lineNumber,
+              endColumn: end.column,
+              message: message + "\n" + hints.map((hint) => `hint: ${hint}`).join("\n"),
+              severity:
+                severity === "error" ? monaco.MarkerSeverity.Error : monaco.MarkerSeverity.Warning,
+            };
+          }) ?? [];
 
         monaco.editor.setModelMarkers(model, "owner", markers);
       }
+      if (document) {
+        shell.setPreviewState(PreviewState.Idle);
+      } else {
+        shell.setPreviewState(PreviewState.CompileError);
+      }
     });
   });
 
@@ -140,17 +150,21 @@
       const range = editor.getSelection();
       const model = editor.getModel();
       if (range && model) {
-        model.pushEditOperations([], [
-          {
-            range: range,
-            text: `\n#figure(\n  image("${res.path}"),\n  caption: []\n)\n`
-          }
-        ], () => null);
+        model.pushEditOperations(
+          [],
+          [
+            {
+              range: range,
+              text: `\n#figure(\n  image("${res.path}"),\n  caption: []\n)\n`,
+            },
+          ],
+          () => null
+        );
       }
     }
   };
 
   $: fetchContent(editor, path);
 </script>
 
-<div bind:this={divEl} on:paste={handlePaste} class={$$props.class}></div>
+<div bind:this={divEl} on:paste={handlePaste} class={$$props.class} />

src/components/ExplorerNode.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
   import clsx from "clsx";
-  import FileIcon from "./icons/FileIcon.svelte";
-  import FolderIcon from "./icons/FolderIcon.svelte";
-  import ArrowDropDownIcon from "./icons/ArrowDropDownIcon.svelte";
-  import ArrowRightIcon from "./icons/ArrowRightIcon.svelte";
   import type { FileItem, FileType, FSRefreshEvent } from "../lib/ipc";
   import { project, shell } from "../lib/stores";
   import { listDir } from "../lib/ipc";
   import { onMount } from "svelte";
+  import { ChevronDownIcon, ChevronRightIcon, FileIcon, FolderIcon } from "lucide-svelte";
   import { appWindow } from "@tauri-apps/api/window";
 
   export let type: FileType;
@@ -57,17 +54,17 @@
   >
     {#if type === "directory"}
       <svelte:component
-        this={expanded ? ArrowDropDownIcon : ArrowRightIcon}
+        this={expanded ? ChevronDownIcon : ChevronRightIcon}
         class="w-4 h-4 inline fill-neutral-500 mr-1"
       />
     {/if}
     <svelte:component
       this={type === "file" ? FileIcon : FolderIcon}
-      class={clsx("w-4 h-4 inline fill-neutral-500 mr-2", type === "file" && "ml-5")}
+      class={clsx("w-4 h-4 inline stroke-neutral-400 mr-2", type === "file" && "ml-5")}
     />
     <span class="flex-1 truncate">
-    {path === "/" ? "root" : path.slice(path.lastIndexOf("/") + 1)}
-  </span>
+      {path === "/" ? "root" : path.slice(path.lastIndexOf("/") + 1)}
+    </span>
   </div>
 {/if}
 {#if expanded}

src/components/ExplorerTree.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-
   import clsx from "clsx";
   import ExplorerNode from "./ExplorerNode.svelte";
-  import AddIcon from "./icons/AddIcon.svelte";
   import { project, shell } from "$lib/stores";
   import { createFile } from "$lib/ipc";
+  import { PlusIcon } from "lucide-svelte";
 
   const handleCreate = () => {
     shell.createModal({
@@ -14,7 +13,7 @@
         if (path) {
           createFile(path);
         }
-      }
+      },
     });
   };
 </script>
@@ -25,7 +24,7 @@
       <span class="text-lg font-bold block flex-1">Project</span>
       <div class="flex flex-row rounded-md border border-neutral-700 overflow-clip">
         <button class="p-1 transition-colors hover:bg-neutral-700" on:click={handleCreate}>
-          <AddIcon class="w-4 h-4" />
+          <PlusIcon class="w-4 h-4" />
         </button>
       </div>
     </div>

src/components/ShellModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Modal } from "../lib/stores";
   import { shell } from "../lib/stores";
-  import CloseIcon from "./icons/CloseIcon.svelte";
+  import { XIcon } from "lucide-svelte";
 
   let modal: Modal | undefined;
   $: modal = $shell.modals[0];
@@ -36,17 +36,17 @@
         </span>
         <button
           class="rounded-md border border-neutral-700 p-1 transition-colors hover:bg-neutral-700"
-          on:click={handleClose}
+          on:click={() => handleClose()}
         >
-          <CloseIcon class="w-4 h-4" />
+          <XIcon class="w-4 h-4" />
         </button>
       </div>
       {#if modal.type === "input"}
         <input
           class="w-full rounded-md bg-neutral-600 px-2 py-1 mt-2 text-sm"
           on:keyup={handleInputKeyUp}
           autofocus
-        >
+        />
       {/if}
     </div>
   </div>

src/components/SidePanel.svelte

@@ -1,6 +1,6 @@
 <script>
-  import FolderIcon from "./icons/FolderIcon.svelte";
   import ExplorerTree from "./ExplorerTree.svelte";
+  import { FolderIcon } from "lucide-svelte";
   import clsx from "clsx";
 
   // TODO: Implement a modular side panel system?
@@ -13,7 +13,10 @@
 
 <div class="p-1.5 border-r border-neutral-700">
   <button
-    class={clsx("rounded-md p-1 transition-colors hover:bg-neutral-700/60", explorerVisible && "bg-neutral-700/80")}
+    class={clsx(
+      "rounded-md p-1 transition-colors hover:bg-neutral-700/60",
+      explorerVisible && "bg-neutral-700/80"
+    )}
     on:click={toggleExplorer}
   >
     <FolderIcon class="w-5 h-5 text-neutral-300" />
@@ -22,4 +25,3 @@
 {#if explorerVisible}
   <ExplorerTree class="w-80" />
 {/if}
-