fix: tabs removing, state management, commands, loading animation

src-tauri/src/main.rs

@@ -10,13 +10,28 @@ use tauri::async_runtime::Mutex;
 use types::{VigiError, VigiJsState, VigiState};
 use utils::{read_or_create_jsonl, read_or_create_number};
 
-// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
 #[tauri::command]
 async fn update_input(
     input: String,
     state: tauri::State<'_, Mutex<VigiState>>,
 ) -> Result<(), VigiError> {
-    state.lock().await.update_input(input).await
+    state.lock().await.update_input(input);
+
+    Ok(())
+}
+
+#[tauri::command]
+async fn load_input(state: tauri::State<'_, Mutex<VigiState>>) -> Result<(), VigiError> {
+    state.lock().await.load_input().await?;
+
+    Ok(())
+}
+
+#[tauri::command]
+async fn load_input_force(state: tauri::State<'_, Mutex<VigiState>>) -> Result<(), VigiError> {
+    state.lock().await.load_input_force().await?;
+
+    Ok(())
 }
 
 #[tauri::command]
@@ -29,17 +44,12 @@ async fn select_tab(
     index: usize,
     state: tauri::State<'_, Mutex<VigiState>>,
 ) -> Result<(), VigiError> {
-    state.lock().await.select_tab(index).await
-}
-
-#[tauri::command]
-async fn load_tab(state: tauri::State<'_, Mutex<VigiState>>) -> Result<(), VigiError> {
-    state.lock().await.load_tab().await
+    state.lock().await.select_tab(index)
 }
 
 #[tauri::command]
 async fn add_tab(state: tauri::State<'_, Mutex<VigiState>>) -> Result<(), VigiError> {
-    state.lock().await.add_tab()
+    state.lock().await.add_tab().await
 }
 
 #[tauri::command]
@@ -57,10 +67,11 @@ fn main() {
             update_input,
             get_js_state,
             select_tab,
-            load_tab,
             add_tab,
             remove_tab,
-            setup
+            setup,
+            load_input,
+            load_input_force
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
@@ -120,7 +131,7 @@ async fn setup(
     state.current_tab_index_path = local_data_dir.join("current_tab_index");
     state.current_tab_index = read_or_create_number(&state.current_tab_index_path);
 
-    state.update_top_bar_input();
+    state.update_top_bar_input()?;
 
     println!("---Setup done---");
 

src-tauri/src/types.rs

@@ -12,6 +12,7 @@ pub enum VigiError {
     StateUpdate,
     Filesystem,
     Config,
+    GetTab,
 }
 
 #[derive(Serialize, Debug, Clone)]
@@ -77,24 +78,33 @@ impl VigiState {
         }
     }
 
-    pub async fn select_tab(&mut self, new_index: usize) -> Result<(), VigiError> {
-        self.current_tab_index = new_index;
-        self.write_current_tab_index()?;
-
-        self.update_top_bar_input();
+    pub fn select_tab(&mut self, new_index: usize) -> Result<(), VigiError> {
+        self.update_current_tab_index(new_index)?;
+        self.update_top_bar_input()?;
         Ok(())
     }
 
-    pub fn update_top_bar_input(&mut self) {
-        self.top_bar_input = self.tabs[self.current_tab_index].url.clone();
-    }
+    fn update_current_tab_index(&mut self, new_index: usize) -> Result<(), VigiError> {
+        self.current_tab_index = new_index;
 
-    fn write_current_tab_index(&mut self) -> Result<(), VigiError> {
         fs::write(
             &self.current_tab_index_path,
             self.current_tab_index.to_string(),
         )
-        .map_err(|_| VigiError::StateUpdate)
+        .map_err(|_| VigiError::StateUpdate)?;
+
+        Ok(())
+    }
+
+    pub fn update_top_bar_input(&mut self) -> Result<(), VigiError> {
+        self.top_bar_input = self
+            .tabs
+            .get(self.current_tab_index)
+            .ok_or(VigiError::StateUpdate)?
+            .url
+            .clone();
+
+        Ok(())
     }
 
     fn write_id_counter(&mut self) -> Result<(), VigiError> {
@@ -155,12 +165,15 @@ impl VigiState {
         Ok(())
     }
 
-    pub async fn update_input(&mut self, input: String) -> Result<(), VigiError> {
+    pub fn update_input(&mut self, input: String) {
         self.top_bar_input = input;
+    }
+
+    pub async fn load_input_force(&mut self) -> Result<(), VigiError> {
         self.process_input(true).await
     }
 
-    pub async fn load_tab(&mut self) -> Result<(), VigiError> {
+    pub async fn load_input(&mut self) -> Result<(), VigiError> {
         self.process_input(false).await
     }
 
@@ -177,7 +190,7 @@ impl VigiState {
         }
     }
 
-    pub fn add_tab(&mut self) -> Result<(), VigiError> {
+    pub async fn add_tab(&mut self) -> Result<(), VigiError> {
         self.tabs_id_counter += 1;
         self.tabs.push(Tab::new(
             "Home".to_string(),
@@ -188,23 +201,22 @@ impl VigiState {
         self.write_id_counter()?;
         write_tabs(&self.local_tabs_path, &self.tabs)?;
 
-        self.current_tab_index = self.tabs.len() - 1;
-        self.write_current_tab_index()?;
-
-        self.update_top_bar_input();
+        self.select_tab(self.tabs.len() - 1)?;
+        self.load_input().await?;
 
         Ok(())
     }
 
     pub fn remove_tab(&mut self, index: usize) -> Result<(), VigiError> {
-        if self.tabs.len() - 1 == index && self.current_tab_index == index {
+        if self.current_tab_index >= index {
             if self.current_tab_index > 0 {
-                self.current_tab_index -= 1;
-
-                self.write_current_tab_index()?;
+                self.select_tab(self.current_tab_index - 1)?;
             }
         }
 
+        self.cached_inputs
+            .remove(&self.tabs.get(index).ok_or(VigiError::GetTab)?.url);
+
         self.tabs.remove(index);
         write_tabs(&self.local_tabs_path, &self.tabs)?;
 

src/app.css

@@ -10,8 +10,10 @@
     --min-bg: #96e28a;
     --max-bg: #193815;
 
-    --max-text: #bef5b5;
-    --min-text: #fff;
+    --min-text: #bef5b5;
+    --max-text: #fff;
+
+    --colorspace: oklch;
 
     /* Dark */
     /* --min: #818181;

src/lib/components/Tab.svelte

@@ -39,7 +39,7 @@
     {/if}
 
     <button
-        class="tab"
+        class={`tab${loading && active ? " animate-pulse" : ""}`}
         class:active
         transition:slide={{ duration: 100 }}
         bind:this={tabElement}
@@ -49,11 +49,11 @@
             }
         }}
     >
-        <div>
+        <!-- <div class="static right-0">
             {#if loading && active}
                 <GooLoad />
             {/if}
-        </div>
+        </div> -->
 
         <div>
             {tab.title}

src/lib/components/TopBar.svelte

@@ -5,7 +5,7 @@
     import SidebarLeft from "$lib/icons/SidebarLeft.svelte";
     import SidebarRight from "$lib/icons/SidebarRight.svelte";
     import { state } from "$lib/stores";
-    import { updateInput } from "$lib/utils";
+    import { updateAndLoadInput } from "$lib/utils";
     import Block from "./Block.svelte";
     import Button from "./Button.svelte";
 
@@ -36,7 +36,7 @@
         </Button>
         <Button onClick={onBack}><ArrowLeft /></Button>
         <Button onClick={onForward}><ArrowRight /></Button>
-        <Button onClick={() => updateInput(input)}><Reload /></Button>
+        <Button onClick={() => updateAndLoadInput(input)}><Reload /></Button>
     </Block>
 
     <input
@@ -47,7 +47,7 @@
         bind:this={iEl}
         on:keypress={(e) => {
             if (e.key === "Enter") {
-                updateInput(currentInput);
+                updateAndLoadInput(currentInput);
                 iEl.blur();
             }
         }}

src/lib/utils.ts

@@ -11,11 +11,14 @@ export async function updateVigiState() {
   }
 }
 
-export async function updateInput(input: string) {
+export async function updateAndLoadInput(input: string) {
+  await invoke("update_input", { input });
+  await updateVigiState();
+
   isLoading.set(true);
 
   try {
-    await invoke("update_input", { input });
+    await invoke("load_input_force");
     await updateVigiState();
   } catch (e) {
     writeError(e, input);
@@ -27,26 +30,25 @@ export async function updateInput(input: string) {
 export async function addTab() {
   await invoke("add_tab");
   await updateVigiState();
-  await loadTab();
 }
 
 export async function selectTab(index: number) {
   await invoke("select_tab", { index });
   await updateVigiState();
-  await loadTab();
+  await loadInput();
 }
 
 export async function removeTab(index: number) {
   await invoke("remove_tab", { index });
   await updateVigiState();
-  await loadTab();
+  setTimeout(loadInput, 150);
 }
 
-export async function loadTab() {
+export async function loadInput() {
   isLoading.set(true);
 
   try {
-    await invoke("load_tab");
+    await invoke("load_input");
     await updateVigiState();
   } catch (e) {
     writeError(e);

src/routes/+page.svelte

@@ -1,44 +1,44 @@
 <script lang="ts">
-  import "../app.css";
+    import "../app.css";
 
-  import TopBar from "$lib/components/TopBar.svelte";
-  import Sidebar from "$lib/components/Sidebar.svelte";
-  import BrowserWindow from "$lib/components/BrowserWindow.svelte";
+    import TopBar from "$lib/components/TopBar.svelte";
+    import Sidebar from "$lib/components/Sidebar.svelte";
+    import BrowserWindow from "$lib/components/BrowserWindow.svelte";
 
-  import { invoke } from "@tauri-apps/api/tauri";
-  import { loadTab, updateVigiState } from "$lib/utils";
-  import { isLoading } from "$lib/stores";
+    import { invoke } from "@tauri-apps/api/tauri";
+    import { loadInput, updateVigiState } from "$lib/utils";
+    import { isLoading } from "$lib/stores";
 
-  let sidebarOpen = true;
+    let sidebarOpen = true;
 
-  (async () => {
-    isLoading.set(true);
-    await invoke("setup");
-    await updateVigiState();
-    await loadTab();
-    isLoading.set(false);
-  })();
+    (async () => {
+        isLoading.set(true);
+        await invoke("setup");
+        await updateVigiState();
+        await loadInput();
+        isLoading.set(false);
+    })();
 
-  document.addEventListener("keypress", (e: KeyboardEvent) => {
-    if (
-      ["INPUT", "TEXTAREA", "SELECT", "OPTION"].includes(
-        (e.target as Element).tagName
-      )
-    ) {
-      return;
-    }
-    if (e.code === "KeyQ") sidebarOpen = !sidebarOpen;
-  });
+    document.addEventListener("keypress", (e: KeyboardEvent) => {
+        if (
+            ["INPUT", "TEXTAREA", "SELECT", "OPTION"].includes(
+                (e.target as Element).tagName,
+            )
+        ) {
+            return;
+        }
+        if (e.code === "KeyQ") sidebarOpen = !sidebarOpen;
+    });
 </script>
 
 <div
-  class={`common-window${sidebarOpen ? "" : " collapsed"}`}
-  data-tauri-drag-region
+    class={`common-window${sidebarOpen ? "" : " collapsed"}`}
+    data-tauri-drag-region
 >
-  <Sidebar bind:collapsed={sidebarOpen} />
+    <Sidebar bind:collapsed={sidebarOpen} />
 
-  <div class="main-window">
-    <TopBar bind:sidebarOpen />
-    <BrowserWindow />
-  </div>
+    <div class="main-window">
+        <TopBar bind:sidebarOpen />
+        <BrowserWindow />
+    </div>
 </div>

tailwind.config.js

@@ -3,10 +3,10 @@ let textColors = {};
 
 for (let i = 0; i <= 100; i += 5) {
   bgColors[`vigi-${i}`] =
-    `color-mix(in oklch, var(--max-bg) ${i}%, var(--min-bg))`;
+    `color-mix(in var(--colorspace), var(--max-bg) ${i}%, var(--min-bg))`;
 
   textColors[`vigi-${i}`] =
-    `color-mix(in oklch, var(--max-text) ${i}%, var(--min-text))`;
+    `color-mix(in var(--colorspace), var(--min-text) ${i}%, var(--max-text))`;
 }
 
 /** @type {import('tailwindcss').Config} */
@@ -16,6 +16,9 @@ export default {
     extend: {
       colors: bgColors,
       textColor: textColors,
+      animation: {
+        pulse: "pulse 0.7s linear infinite",
+      },
     },
   },
   plugins: [],