fix: tabs closing, and appearance

src-tauri/src/types.rs

@@ -91,19 +91,24 @@ 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()?;
+
         Ok(())
     }
 
     pub fn remove_tab(&mut self, index: usize) -> Result<(), VigiError> {
-        if self.tabs.len() == 1 {
+        if self.tabs.len() - 1 == index && self.current_tab_index == index {
-            self.current_tab_index = 0;
+            if self.current_tab_index > 0 {
-        } else {
+                self.current_tab_index -= 1;
-            self.current_tab_index = self.current_tab_index + 1;
+
+                self.write_current_tab_index()?;
+            }
         }
 
         self.tabs.remove(index);
         write_tabs(&self.local_tabs_path, &self.tabs)?;
-        self.write_current_tab_index()?;
 
         Ok(())
     }

src/app.css

@@ -97,7 +97,7 @@ input::placeholder {
 
   @apply hover:px-4;
 
-  @apply flex items-center justify-between gap-2 w-full;
+  @apply flex items-center justify-between gap-2 w-full truncate;
 }
 
 .close-button {
@@ -121,10 +121,6 @@ input::placeholder {
   @apply hover:bg-vigi-45;
 }
 
-.tab-title {
-  @apply truncate;
-}
-
 ::selection {
   @apply bg-vigi-60;
 }

src/lib/components/Sidebar.svelte

@@ -16,7 +16,7 @@
   let currentTabIndex = 0;
 
   state.subscribe(async (state) => {
-    tabs = state.tabs;
+    tabs = state.tabs.toReversed();
     currentTabIndex = state.current_tab_index;
 
     if (tabs.length === 0) {
@@ -38,7 +38,11 @@
 
     <div class="tabs">
       {#each tabs as tab, i (tab.id)}
-        <Tab {tab} active={currentTabIndex === i} id={i} />
+        <Tab
+          {tab}
+          active={currentTabIndex === tabs.length - 1 - i}
+          id={tabs.length - 1 - i}
+        />
       {/each}
     </div>
   {/if}

src/lib/components/Tab.svelte

@@ -3,7 +3,6 @@
   import { removeTab, selectTab } from "$lib/utils";
   import { slide } from "svelte/transition";
   import Close from "$lib/icons/Close.svelte";
-  import Button from "./Button.svelte";
 
   export let active = false;
   export let tab: StateTab;
@@ -16,12 +15,20 @@
 </script>
 
 <div
-  class="flex gap-1 items-center"
+  class="flex gap-1 items-center shrink"
   on:mouseenter={() => (hovered = true)}
   on:mouseleave={() => (hovered = false)}
   role="tab"
   tabindex={id}
 >
+  {#if hovered}
+    <button
+      class="close-button"
+      transition:slide={{ duration: 100, axis: "x" }}
+      on:click={() => removeTab(id)}><Close /></button
+    >
+  {/if}
+
   <button
     class="tab"
     class:active
@@ -31,16 +38,6 @@
       selectTab(id);
     }}
   >
-    <div class="tab-title">
     {tab.title}
-    </div>
   </button>
-
-  {#if hovered}
-    <button
-      class="close-button"
-      transition:slide={{ duration: 100, axis: "x" }}
-      on:click={() => removeTab(id)}><Close /></button
-    >
-  {/if}
 </div>

src/lib/components/TopBar.svelte

@@ -20,6 +20,7 @@
 
   topBarInput.subscribe((val) => {
     input = val;
+    currentInput = val;
   });
 
   let iEl: HTMLInputElement;