fix: appearance

src-tauri/src/main.rs

@@ -14,10 +14,10 @@ async fn process_input(input: String) -> Result<Vec<Tag>, VigiError> {
 
     match reqwest::get(input).await {
         Ok(res) => match res.text().await {
-            Ok(res) => Ok(vec![dalet::Tag::new(0, Body::Text(res), Argument::Null)]),
-            Err(err) => Err(VigiError::ParseError(err.to_string())),
+            Ok(res) => Ok(vec![Tag::new(0, Body::Text(res), Argument::Null)]),
+            Err(_) => Err(VigiError::ParseError),
         },
-        Err(err) => Err(VigiError::NetworkError(err.to_string())),
+        Err(_) => Err(VigiError::NetworkError),
     }
 }
 

src-tauri/src/types.rs

@@ -2,6 +2,6 @@ use serde::{Deserialize, Serialize};
 
 #[derive(Serialize, Deserialize, Debug)]
 pub enum VigiError {
-    NetworkError(String),
-    ParseError(String),
+    NetworkError,
+    ParseError,
 }

src/app.css

@@ -20,6 +20,12 @@ body {
 .common-window {
   @apply p-3 gap-3 w-screen h-screen;
   @apply flex;
+
+  @apply ease-out duration-100;
+}
+
+.common-window.collapsed {
+  @apply gap-0;
 }
 
 .main-window {
@@ -64,10 +70,8 @@ body {
 }
 
 .search-input {
-  @apply ms-2 px-2 py-1 rounded-lg grow;
-}
+  @apply ms-2 px-2 py-1 rounded-xl grow;
 
-input {
   @apply bg-block outline-none;
   @apply focus:bg-blockLight focus:text-light;
 
@@ -81,3 +85,25 @@ input::placeholder {
 ::selection {
   @apply bg-block;
 }
+
+/* width */
+::-webkit-scrollbar {
+  width: 20px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  @apply rounded-xl bg-main bg-clip-content;
+  border: 6px solid transparent;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-dark;
+  border: 5px solid transparent;
+}

src/lib/components/BrowserWindow.svelte

@@ -8,10 +8,8 @@
 </script>
 
 <Block className="browser-window">
-  {#if isLoading && data.length === 0}
+  {#if isLoading}
     <div>Loading...</div>
-  {:else if !isLoading && data.length === 0}
-    <div>No data</div>
   {:else}
     <Renderer {data} />
   {/if}

src/lib/components/TopBar.svelte

@@ -14,6 +14,8 @@
   export let sidebarOpen = true;
   export let inputValue = "";
 
+  let currentInputValue = "";
+
   let input: HTMLInputElement;
 </script>
 
@@ -35,9 +37,20 @@
     type="text"
     placeholder="Search or enter URL"
     class="search-input"
-    bind:value={inputValue}
+    bind:value={currentInputValue}
     bind:this={input}
-    on:keypress={(e) => e.key === "Enter" && onInput()}
-    on:focus={() => setTimeout(() => input.select(), 1)}
+    on:keypress={(e) => {
+      if (e.key === "Enter") {
+        inputValue = currentInputValue;
+        onInput();
+      }
+    }}
+    on:focus={() => {
+      currentInputValue = inputValue;
+      setTimeout(() => input.select(), 1);
+    }}
+    on:focusout={() => {
+      currentInputValue = decodeURIComponent(inputValue);
+    }}
   />
 </div>

src/routes/+page.svelte

@@ -9,7 +9,9 @@
   import { invoke } from "@tauri-apps/api/tauri";
 
   let sidebarOpen = true;
+
   let inputValue = "";
+  let isLoading = false;
 
   let data: Root = [];
 
@@ -22,21 +24,27 @@
   });
 
   function processInput() {
+    isLoading = true;
     invoke("process_input", { input: inputValue })
       .then((res) => {
         data = res as Root;
+        isLoading = false;
       })
       .catch((err) => {
         data = [{ id: 0, body: "Error: " + err, argument: null }];
+        isLoading = false;
       });
   }
 </script>
 
-<div class="common-window" data-tauri-drag-region>
+<div
+  class={`common-window${sidebarOpen ? "" : " collapsed"}`}
+  data-tauri-drag-region
+>
   <Sidebar bind:sidebarOpen />
 
   <div class="main-window">
     <TopBar bind:sidebarOpen bind:inputValue onInput={processInput} />
-    <BrowserWindow {data} />
+    <BrowserWindow {data} bind:isLoading />
   </div>
 </div>