From 9dfd66c14a1c8e5d1f8f013bb8377dfdcfa5efca Mon Sep 17 00:00:00 2001
From: Artemy Egorov <artegoser@gmail.com>
Date: Mon, 29 Jul 2024 16:53:15 +0300
Subject: [PATCH] fix: add input store, refactor color system

---
 src/app.css                      | 30 ++++++++++++++----------------
 src/lib/components/TopBar.svelte | 27 ++++++++++++++++++---------
 src/lib/stores.ts                |  3 +++
 src/routes/+page.svelte          |  9 +++++----
 tailwind.config.js               | 19 ++++++++-----------
 5 files changed, 48 insertions(+), 40 deletions(-)
 create mode 100644 src/lib/stores.ts

diff --git a/src/app.css b/src/app.css
index c932f42..bbd8b8e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,17 +3,15 @@
 @tailwind utilities;
 
 :root {
-  --c0: #274f21;
-  --c1: #448939;
-  --c2: #73bf67;
+  --min: #96e28a;
+  --max: #193815;
 
-  --c3: #193815;
-  --c4: #56aa49;
-  --c5: #96e28a;
+  /* --min: #8a9fe2;
+  --max: #151a38; */
 }
 
 body {
-  @apply bg-main text-main;
+  @apply bg-vigi-90 text-vigi-10;
   user-select: none;
 }
 
@@ -44,14 +42,14 @@ body {
   @apply p-1 rounded-lg;
   @apply ease-out duration-150;
 
-  @apply hover:bg-main;
+  @apply hover:bg-vigi-90;
   @apply hover:px-2 hover:mx-1 hover:scale-125 hover:cursor-pointer;
 
-  @apply active:bg-dark;
+  @apply active:bg-vigi-100;
 }
 
 .block {
-  @apply p-2 rounded-xl bg-block;
+  @apply p-2 rounded-xl bg-vigi-60;
 }
 
 .sidebar {
@@ -72,18 +70,18 @@ body {
 .search-input {
   @apply ms-2 px-2 py-1 rounded-xl grow;
 
-  @apply bg-block outline-none;
-  @apply focus:bg-blockLight focus:text-light;
+  @apply bg-vigi-60 outline-none;
+  @apply focus:bg-vigi-50 focus:text-vigi-0 hover:bg-vigi-55;
 
   @apply ease-out duration-100;
 }
 
 input::placeholder {
-  @apply text-main focus:text-light;
+  @apply text-vigi-40 focus:text-vigi-20;
 }
 
 ::selection {
-  @apply bg-block;
+  @apply bg-vigi-60;
 }
 
 /* width */
@@ -98,12 +96,12 @@ input::placeholder {
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  @apply rounded-xl bg-main bg-clip-content;
+  @apply rounded-xl bg-vigi-90 bg-clip-content;
   border: 6px solid transparent;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-dark;
+  @apply bg-vigi-100;
   border: 5px solid transparent;
 }
diff --git a/src/lib/components/TopBar.svelte b/src/lib/components/TopBar.svelte
index e58015e..0628366 100644
--- a/src/lib/components/TopBar.svelte
+++ b/src/lib/components/TopBar.svelte
@@ -4,6 +4,8 @@
   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 { get } from "svelte/store";
   import Block from "./Block.svelte";
   import Button from "./Button.svelte";
 
@@ -12,11 +14,15 @@
   export let onInput = () => {};
 
   export let sidebarOpen = true;
-  export let inputValue = "";
 
-  let currentInputValue = "";
+  let currentInput = "";
+  let input = "";
 
-  let input: HTMLInputElement;
+  topBarInput.subscribe((val) => {
+    input = val;
+  });
+
+  let iEl: HTMLInputElement;
 </script>
 
 <div class="top-bar">
@@ -37,20 +43,23 @@
     type="text"
     placeholder="Search or enter URL"
     class="search-input"
-    bind:value={currentInputValue}
-    bind:this={input}
+    bind:value={currentInput}
+    bind:this={iEl}
     on:keypress={(e) => {
       if (e.key === "Enter") {
-        inputValue = currentInputValue;
+        topBarInput.set(currentInput);
         onInput();
       }
     }}
     on:focus={() => {
-      currentInputValue = inputValue;
-      setTimeout(() => input.select(), 1);
+      currentInput = input;
+      setTimeout(() => {
+        iEl.select();
+        iEl.scrollLeft = iEl.scrollWidth;
+      }, 1);
     }}
     on:focusout={() => {
-      currentInputValue = decodeURIComponent(inputValue);
+      currentInput = decodeURIComponent(input);
     }}
   />
 </div>
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
new file mode 100644
index 0000000..460929e
--- /dev/null
+++ b/src/lib/stores.ts
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const topBarInput = writable("");
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7ee107b..3b116b0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,6 +7,7 @@
   import type { Root } from "@txtdot/dalet";
 
   import { invoke } from "@tauri-apps/api/tauri";
+  import { topBarInput } from "$lib/stores";
 
   let sidebarOpen = true;
 
@@ -23,9 +24,9 @@
     if (e.key === "q") sidebarOpen = !sidebarOpen;
   });
 
-  function processInput() {
+  topBarInput.subscribe((input) => {
     isLoading = true;
-    invoke("process_input", { input: inputValue })
+    invoke("process_input", { input })
       .then((res) => {
         data = res as Root;
         isLoading = false;
@@ -34,7 +35,7 @@
         data = [{ id: 0, body: "Error: " + err, argument: null }];
         isLoading = false;
       });
-  }
+  });
 </script>
 
 <div
@@ -44,7 +45,7 @@
   <Sidebar bind:sidebarOpen />
 
   <div class="main-window">
-    <TopBar bind:sidebarOpen bind:inputValue onInput={processInput} />
+    <TopBar bind:sidebarOpen />
     <BrowserWindow {data} bind:isLoading />
   </div>
 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 31c080d..81433ef 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,19 +1,16 @@
+let colors = {};
+
+for (let i = 0; i <= 100; i += 5) {
+  colors[`vigi-${i}`] = `color-mix(in hsl, var(--max) ${i}%, var(--min))`;
+}
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{html,js,svelte,ts}"],
   theme: {
     extend: {
-      colors: {
-        main: "var(--c0)",
-        block: "var(--c1)",
-        light: "var(--c2)",
-        dark: "var(--c3)",
-        blockLight: "var(--c4)",
-      },
-      textColor: {
-        main: "var(--c2)",
-        light: "var(--c5)",
-      },
+      colors,
+      textColor: colors,
     },
   },
   plugins: [],