feat: txt rendering

src/app.css

@@ -27,8 +27,7 @@ body {
 }
 
 .browser-window {
-  @apply grow shadow-inner;
-  user-select: text;
+  @apply grow shadow-inner overflow-auto select-text;
 }
 
 .window-controls {
@@ -50,7 +49,7 @@ body {
 }
 
 .sidebar {
-  @apply basis-1/5;
+  @apply basis-1/5 shrink-0;
   @apply ease-out duration-100;
 }
 

src/lib/components/DaletlRenderer/tags/Element.svelte

@@ -5,4 +5,12 @@
   export let body: Body;
 </script>
 
-<section class="el"><BodyRenderer {body} /></section>
+<section class="el">
+  {#if typeof body === "string"}
+    {#each body.split("\n") as line}
+      {line} <br />
+    {/each}
+  {:else}
+    <BodyRenderer {body} />
+  {/if}
+</section>

src/routes/+page.svelte

@@ -6,7 +6,11 @@
   import BrowserWindow from "$lib/components/BrowserWindow.svelte";
   import type { Root } from "@txtdot/dalet";
 
+  import { invoke } from "@tauri-apps/api/tauri";
+
   let sidebarOpen = true;
+  let inputValue = "";
+
   let data: Root = [];
 
   document.addEventListener("keypress", (e: KeyboardEvent) => {
@@ -16,13 +20,23 @@
     }
     if (e.key === "q") sidebarOpen = !sidebarOpen;
   });
+
+  function processInput() {
+    invoke("process_input", { input: inputValue })
+      .then((res) => {
+        data = res as Root;
+      })
+      .catch((err) => {
+        data = [{ id: 0, body: "Error: " + err, argument: null }];
+      });
+  }
 </script>
 
 <div class="common-window" data-tauri-drag-region>
   <Sidebar bind:sidebarOpen />
 
   <div class="main-window">
-    <TopBar bind:sidebarOpen />
+    <TopBar bind:sidebarOpen bind:inputValue onInput={processInput} />
     <BrowserWindow {data} />
   </div>
 </div>