feat: add the ability to toggle the preview's visibility (#14)

* chore: use prettier to format svelte files in vscode

* feat: add the ability to toggle the preview's visibility

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.documentSelectors": ["**/*.svelte"]
+}

src-tauri/src/ipc/events/mod.rs

@@ -0,0 +1 @@
+pub mod view;

src-tauri/src/ipc/events/view.rs

@@ -0,0 +1,11 @@
+use serde::Serialize;
+use tauri::{Runtime, Window};
+
+// For some reason, Tauri requires an event payload...
+#[derive(Debug, Clone, Serialize)]
+struct EmptyPayload {}
+
+// Instructs the front-end to hide or show the preview
+pub fn toggle_preview_visibility<R: Runtime>(window: &Window<R>) {
+    let _ = window.emit("toggle_preview_visibility", EmptyPayload {});
+}

src-tauri/src/ipc/mod.rs

@@ -1,4 +1,5 @@
 pub mod commands;
+pub mod events;
 
 mod model;
 pub use model::*;

src-tauri/src/main.rs

@@ -57,7 +57,10 @@ fn build_menu() -> Menu {
             .add_item(CustomMenuItem::new("file_quit", "Quit")),
     );
     let edit_submenu = Submenu::new("Edit", Menu::new());
-    let view_submenu = Submenu::new("View", Menu::new());
+    let view_submenu = Submenu::new(
+        "View",
+        Menu::new().add_item(CustomMenuItem::new("view_toggle_preview", "Toggle Preview")),
+    );
 
     Menu::new()
         .add_submenu(file_submenu)

src-tauri/src/menu.rs

@@ -1,3 +1,4 @@
+use crate::ipc::events::view;
 use crate::project::{Project, ProjectManager};
 use std::fs;
 use std::sync::Arc;
@@ -39,6 +40,9 @@ pub fn handle_menu_event<R: Runtime>(e: WindowMenuEvent<R>) {
         "file_quit" => {
             e.window().app_handle().exit(0);
         }
+        "view_toggle_preview" => {
+            view::toggle_preview_visibility(e.window());
+        }
         _ => {}
     }
 }

src/components/Preview.svelte

@@ -21,6 +21,8 @@
   let width: number;
   let height: number;
 
+  let isVisible: boolean = true;
+
   const handleMouseDown = (event: MouseEvent) => {
     event.preventDefault();
     isMouseDown = true;
@@ -72,41 +74,54 @@
   };
 
   onMount(async () => {
-    const unsubscribe = await appWindow.listen<TypstCompileEvent>("typst_compile", ({ _, payload }) => {
-      const { document } = payload;
-      if (document) {
-        pages = document.pages;
-        hash = document.hash;
-        width = document.width;
-        height = document.height;
+    const unsubscribeCompile = await appWindow.listen<TypstCompileEvent>(
+      "typst_compile",
+      ({ _, payload }) => {
+        const { document } = payload;
+        if (document) {
+          pages = document.pages;
+          hash = document.hash;
+          width = document.width;
+          height = document.height;
+        }
+      }
+    );
+
+    const unsubscribeToggleVisibility = await appWindow.listen<never>(
+      "toggle_preview_visibility",
+      () => {
+        isVisible = !isVisible;
       }
-    });
+    );
 
     window.addEventListener("keydown", handleKeyDown);
 
     return () => {
-      unsubscribe();
+      unsubscribeCompile();
+      unsubscribeToggleVisibility();
       window.removeEventListener("keydown", handleKeyDown);
     };
   });
 </script>
 
-<div
-  bind:this={container}
-  on:mousemove={handleMove}
-  on:mousedown={handleMouseDown}
-  on:mouseup={handleMouseUp}
-  on:mouseleave={handleMouseUp}
-  on:wheel={handleWheel}
-  class={clsx("flex flex-col overflow-auto bg-neutral-700 p-4 gap-4", $$props.class)}
->
-  {#each Array(pages) as _, i}
-    <PreviewPage
-      page={i}
-      hash={hash}
-      width={Math.floor(width * scale)}
-      height={Math.floor(height * scale)}
-      scale={scale}
-    />
-  {/each}
-</div>
+{#if isVisible}
+  <div
+    bind:this={container}
+    on:mousemove={handleMove}
+    on:mousedown={handleMouseDown}
+    on:mouseup={handleMouseUp}
+    on:mouseleave={handleMouseUp}
+    on:wheel={handleWheel}
+    class={clsx("flex flex-col overflow-auto bg-neutral-700 p-4 gap-4", $$props.class)}
+  >
+    {#each Array(pages) as _, i}
+      <PreviewPage
+        page={i}
+        {hash}
+        width={Math.floor(width * scale)}
+        height={Math.floor(height * scale)}
+        {scale}
+      />
+    {/each}
+  </div>
+{/if}