fix: rewrite state system

src/app.css

@@ -11,7 +11,7 @@
 }
 
 body {
-  @apply bg-vigi-90 text-vigi-10;
+  @apply bg-vigi-90 text-vigi-10 cursor-default;
   user-select: none;
 }
 
@@ -31,7 +31,7 @@ body {
 }
 
 .browser-window {
-  @apply grow shadow-inner overflow-auto select-text;
+  @apply grow shadow-inner overflow-auto select-text cursor-auto;
 }
 
 .window-controls {
@@ -48,7 +48,7 @@ body {
   @apply active:bg-vigi-100;
 }
 
-.open-tabs {
+.tabs-category {
   @apply flex justify-between mt-2 mx-2;
 }
 

src/lib/components/BrowserWindow.svelte

@@ -2,13 +2,24 @@
   import type { Root } from "@txtdot/dalet";
   import Block from "./Block.svelte";
   import Renderer from "./DaletlRenderer/Renderer.svelte";
+  import { isLoading, state } from "$lib/stores";
+  import type { VigiState } from "$lib/types";
 
-  export let data: Root;
-  export let isLoading = false;
+  let loading = false;
+
+  let data: Root;
+
+  state.subscribe((st) => {
+    data = (st as VigiState).current_data;
+  });
+
+  isLoading.subscribe((val) => {
+    loading = val;
+  });
 </script>
 
 <Block className="browser-window">
-  {#if isLoading}
+  {#if loading}
     <div>Loading...</div>
   {:else}
     <Renderer {data} />

src/lib/components/Sidebar.svelte

@@ -29,7 +29,7 @@
   {#if collapsed}
     <WindowControls />
 
-    <div class="open-tabs">
+    <div class="tabs-category">
       Open tabs
       <Button onClick={addTab}>
         <Add />

src/lib/components/TopBar.svelte

@@ -4,21 +4,21 @@
   import Reload from "$lib/icons/Reload.svelte";
   import SidebarLeft from "$lib/icons/SidebarLeft.svelte";
   import SidebarRight from "$lib/icons/SidebarRight.svelte";
-  import { topBarInput } from "$lib/stores";
+  import { state } from "$lib/stores";
+  import { updateInput } from "$lib/utils";
   import Block from "./Block.svelte";
   import Button from "./Button.svelte";
 
   export let onBack = () => {};
   export let onForward = () => {};
-  export let onInput = () => {};
 
   export let sidebarOpen = true;
 
   let currentInput = "";
   let input = "";
 
-  topBarInput.subscribe((val) => {
-    input = val;
+  state.subscribe((val) => {
+    input = val.top_bar_input;
     currentInput = decodeURIComponent(input);
   });
 
@@ -36,7 +36,7 @@
     </Button>
     <Button onClick={onBack}><ArrowLeft /></Button>
     <Button onClick={onForward}><ArrowRight /></Button>
-    <Button onClick={onInput}><Reload /></Button>
+    <Button onClick={() => updateInput(input)}><Reload /></Button>
   </Block>
 
   <input
@@ -47,8 +47,7 @@
     bind:this={iEl}
     on:keypress={(e) => {
       if (e.key === "Enter") {
-        topBarInput.set(currentInput);
-        onInput();
+        updateInput(currentInput);
       }
     }}
     on:focus={() => {

src/lib/stores.ts

@@ -1,6 +1,12 @@
 import { writable, type Writable } from "svelte/store";
 import type { VigiState } from "./types";
 
-export const topBarInput: Writable<string> = writable("");
+export const state: Writable<VigiState> = writable({
+  current_tab_index: 0,
+  tabs: [{ id: 0, ty: "HomePage", title: "Home", url: "" }],
+  favorites_tabs: [],
+  top_bar_input: "",
+  current_data: [],
+});
 
-export const state: Writable<VigiState> = writable();
+export const isLoading: Writable<boolean> = writable(false);

src/lib/types.ts

@@ -1,7 +1,12 @@
+import type { Tag } from "@txtdot/dalet";
+
 export interface VigiState {
   current_tab_index: number;
   tabs: StateTab[];
   favorites_tabs: StateTab[];
+
+  top_bar_input: string;
+  current_data: Tag[];
 }
 
 type TabType = "HomePage" | "Text";

src/lib/utils.ts

@@ -1,32 +1,52 @@
 import { invoke } from "@tauri-apps/api";
-import { state, topBarInput } from "./stores";
-import type { StateTab, VigiState } from "./types";
+import { isLoading, state } from "./stores";
+import type { VigiState } from "./types";
 
-export function updateVigiState() {
-  invoke("get_state")
-    .then((r) => {
-      let st = r as VigiState;
+export async function updateVigiState() {
+  try {
+    let st = await invoke("get_js_state");
+    state.set(st as VigiState);
+  } catch (e) {
+    console.log(e);
+  }
+}
 
-      state.set(st);
+export async function updateInput(input: string) {
+  isLoading.set(true);
 
-      topBarInput.set(st.tabs[st.current_tab_index].url);
-    })
-    .catch((err) => console.log(err));
+  try {
+    await invoke("update_input", { input });
+  } catch (e) {
+    console.log(e);
+  } finally {
+    await updateVigiState();
+    isLoading.set(false);
+  }
 }
 
 export async function addTab() {
   await invoke("add_tab");
-
-  updateVigiState();
+  await updateVigiState();
+  await loadTab();
 }
 
 export async function selectTab(index: number) {
   await invoke("select_tab", { index });
-
-  updateVigiState();
+  await updateVigiState();
+  await loadTab();
 }
 
 export async function removeTab(index: number) {
   await invoke("remove_tab", { index });
-  updateVigiState();
+  await updateVigiState();
+  await loadTab();
+}
+
+export async function loadTab() {
+  isLoading.set(true);
+
+  await invoke("load_tab");
+  await updateVigiState();
+
+  isLoading.set(false);
 }

src/routes/+page.svelte

@@ -4,43 +4,31 @@
   import TopBar from "$lib/components/TopBar.svelte";
   import Sidebar from "$lib/components/Sidebar.svelte";
   import BrowserWindow from "$lib/components/BrowserWindow.svelte";
-  import type { Root } from "@txtdot/dalet";
 
   import { invoke } from "@tauri-apps/api/tauri";
-  import { topBarInput } from "$lib/stores";
-  import { updateVigiState } from "$lib/utils";
+  import { loadTab, updateVigiState } from "$lib/utils";
+  import { isLoading } from "$lib/stores";
 
   let sidebarOpen = true;
 
-  let isLoading = false;
-
-  let data: Root = [];
-
-  updateVigiState();
+  (async () => {
+    isLoading.set(true);
+    await invoke("setup");
+    await updateVigiState();
+    await loadTab();
+    isLoading.set(false);
+  })();
 
   document.addEventListener("keypress", (e: KeyboardEvent) => {
-    const formElements = ["INPUT", "TEXTAREA", "SELECT", "OPTION"];
-    if (formElements.includes((e.target as Element).tagName)) {
+    if (
+      ["INPUT", "TEXTAREA", "SELECT", "OPTION"].includes(
+        (e.target as Element).tagName
+      )
+    ) {
       return;
     }
     if (e.key === "q") sidebarOpen = !sidebarOpen;
   });
-
-  topBarInput.subscribe((input) => {
-    isLoading = true;
-    invoke("process_input", { input })
-      .then((res) => {
-        data = res as Root;
-        isLoading = false;
-      })
-      .catch((err) => {
-        data = [{ id: 0, body: "Error: " + err, argument: null }];
-        isLoading = false;
-      })
-      .finally(() => {
-        updateVigiState();
-      });
-  });
 </script>
 
 <div
@@ -51,6 +39,6 @@
 
   <div class="main-window">
     <TopBar bind:sidebarOpen />
-    <BrowserWindow {data} bind:isLoading />
+    <BrowserWindow />
   </div>
 </div>