feat: text-color

.github/workflows/publish.yaml

@@ -58,7 +58,7 @@ jobs:
           TAURI_KEY_PASSWORD: ""
         with:
           tagName: v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version.
-          releaseName: "Vigi v__VERSION__"
+          releaseName: "vigi v__VERSION__"
           releaseBody: "See the assets to download this version and install."
           releaseDraft: true
           prerelease: false

.vscode/extensions.json

@@ -1,7 +0,0 @@
-{
-  "recommendations": [
-    "svelte.svelte-vscode",
-    "tauri-apps.tauri-vscode",
-    "rust-lang.rust-analyzer"
-  ]
-}

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "svelte.enable-ts-plugin": true
-}

src-tauri/src/types.rs

@@ -140,7 +140,7 @@ impl VigiState {
                     )],
                 )
             } else {
-                todo!();
+                Err(VigiError::Parse)?
             }
         };
 

src/app.css

@@ -2,14 +2,99 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+/* Theme */
-  --min: #96e28a;
-  --max: #193815;
 
+:root {
+    /* Theme Colors */
+    /* Green */
+    --min-bg: #96e28a;
+    --max-bg: #193815;
+
+    --max-text: #bef5b5;
+    --min-text: #fff;
+
+    /* Dark */
+    /* --min: #818181;
+    --max: #000; */
+
+    /* Blue */
     /* --min: #8a9fe2;
     --max: #151a38; */
+
+    /* Red */
+    /* --min: #e28a8a;
+    --max: #641515; */
+    /* End Theme Colors */
 }
 
+/* Theme Classes */
+.color-vigi-0 {
+    @apply text-vigi-0 bg-vigi-0;
+}
+.color-vigi-5 {
+    @apply text-vigi-5 bg-vigi-5;
+}
+.color-vigi-10 {
+    @apply text-vigi-10 bg-vigi-10;
+}
+.color-vigi-15 {
+    @apply text-vigi-15 bg-vigi-15;
+}
+.color-vigi-20 {
+    @apply text-vigi-20 bg-vigi-20;
+}
+.color-vigi-25 {
+    @apply text-vigi-25 bg-vigi-25;
+}
+.color-vigi-30 {
+    @apply text-vigi-30 bg-vigi-30;
+}
+.color-vigi-35 {
+    @apply text-vigi-35 bg-vigi-35;
+}
+.color-vigi-40 {
+    @apply text-vigi-40 bg-vigi-40;
+}
+.color-vigi-45 {
+    @apply text-vigi-45 bg-vigi-45;
+}
+.color-vigi-50 {
+    @apply text-vigi-50 bg-vigi-50;
+}
+.color-vigi-55 {
+    @apply text-vigi-55 bg-vigi-55;
+}
+.color-vigi-60 {
+    @apply text-vigi-60 bg-vigi-60;
+}
+.color-vigi-65 {
+    @apply text-vigi-65 bg-vigi-65;
+}
+.color-vigi-70 {
+    @apply text-vigi-70 bg-vigi-70;
+}
+.color-vigi-75 {
+    @apply text-vigi-75 bg-vigi-75;
+}
+.color-vigi-80 {
+    @apply text-vigi-80 bg-vigi-80;
+}
+.color-vigi-85 {
+    @apply text-vigi-85 bg-vigi-85;
+}
+.color-vigi-90 {
+    @apply text-vigi-90 bg-vigi-90;
+}
+.color-vigi-95 {
+    @apply text-vigi-95 bg-vigi-95;
+}
+.color-vigi-100 {
+    @apply text-vigi-100 bg-vigi-100;
+}
+/* End Theme Classes */
+/* End theme */
+/* Components */
+
 body {
     @apply bg-vigi-90 text-vigi-10 cursor-default;
     user-select: none;
@@ -31,7 +116,7 @@ body {
 }
 
 .browser-window {
-  @apply grow shadow-inner overflow-auto select-text cursor-auto;
+    @apply grow overflow-auto select-text cursor-auto;
 }
 
 .window-controls {
@@ -58,13 +143,14 @@ body {
 
 .sidebar {
     @apply shrink-0 grow-0 flex flex-col w-1/5;
-  @apply ease-out duration-100;
+    @apply ease-out duration-300;
 }
 
 .sidebar.collapsed {
     @apply basis-0;
 
-  @apply p-0 m-0 bg-transparent;
+    @apply p-0 m-0;
+    @apply overflow-hidden;
 }
 
 .top-bar {
@@ -85,7 +171,7 @@ input::placeholder {
 }
 
 .tabs {
-  @apply flex flex-col gap-1 mt-2 grow overflow-auto;
+    @apply flex flex-col-reverse gap-1 mt-2 grow overflow-auto justify-end;
 }
 
 .tab {

src/lib/components/BrowserWindow.svelte

@@ -30,7 +30,6 @@
 </script>
 
 <Block className="browser-window">
-  <div>
   {#if loading}
     <div transition:slide>
       <GooLoadSpin />
@@ -38,5 +37,4 @@
   {/if}
 
   <Renderer {data} />
-  </div>
 </Block>

src/lib/components/Sidebar.svelte

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

src/lib/components/Tab.svelte

@@ -9,7 +9,7 @@
     export let active = false;
     export let tab: StateTab;
 
-  export let id: number;
+    export let index: number;
 
     let tabElement: HTMLButtonElement;
 
@@ -26,13 +26,13 @@
     on:mouseenter={() => (hovered = true)}
     on:mouseleave={() => (hovered = false)}
     role="tab"
-  tabindex={id}
+    tabindex={index}
 >
     {#if hovered}
         <button
             class="close-button"
             transition:slide={{ duration: 100, axis: "x" }}
-      on:click={() => removeTab(id)}
+            on:click={() => removeTab(index)}
         >
             <Close />
         </button>
@@ -45,7 +45,7 @@
         bind:this={tabElement}
         on:click={() => {
             if (!active) {
-        selectTab(id);
+                selectTab(index);
             }
         }}
     >

src/lib/components/TopBar.svelte

@@ -48,6 +48,7 @@
         on:keypress={(e) => {
             if (e.key === "Enter") {
                 updateInput(currentInput);
+                iEl.blur();
             }
         }}
         on:focus={() => {

src/lib/utils.ts

@@ -7,7 +7,7 @@ export async function updateVigiState() {
     let st = await invoke("get_js_state");
     state.set(st as VigiState);
   } catch (e) {
-    console.log(e);
+    writeError(e);
   }
 }
 
@@ -16,10 +16,10 @@ export async function updateInput(input: string) {
 
   try {
     await invoke("update_input", { input });
-  } catch (e) {
-    console.log(e);
-  } finally {
     await updateVigiState();
+  } catch (e) {
+    writeError(e, input);
+  } finally {
     isLoading.set(false);
   }
 }
@@ -45,8 +45,22 @@ export async function removeTab(index: number) {
 export async function loadTab() {
   isLoading.set(true);
 
+  try {
     await invoke("load_tab");
     await updateVigiState();
-
+  } catch (e) {
+    writeError(e);
+  } finally {
     isLoading.set(false);
+  }
+}
+
+function writeError(e: unknown, input?: string) {
+  state.update((st) => {
+    st.current_data = [{ id: 0, body: `Error: ${e}`, argument: null }];
+
+    if (input) st.top_bar_input = input;
+
+    return st;
+  });
 }

src/routes/+page.svelte

@@ -27,7 +27,7 @@
     ) {
       return;
     }
-    if (e.key === "q") sidebarOpen = !sidebarOpen;
+    if (e.code === "KeyQ") sidebarOpen = !sidebarOpen;
   });
 </script>
 

src/theme-classes.css

@@ -0,0 +1,63 @@
+.color-vigi-0 {
+    @apply text-vigi-0 bg-vigi-0;
+}
+.color-vigi-5 {
+    @apply text-vigi-5 bg-vigi-5;
+}
+.color-vigi-10 {
+    @apply text-vigi-10 bg-vigi-10;
+}
+.color-vigi-15 {
+    @apply text-vigi-15 bg-vigi-15;
+}
+.color-vigi-20 {
+    @apply text-vigi-20 bg-vigi-20;
+}
+.color-vigi-25 {
+    @apply text-vigi-25 bg-vigi-25;
+}
+.color-vigi-30 {
+    @apply text-vigi-30 bg-vigi-30;
+}
+.color-vigi-35 {
+    @apply text-vigi-35 bg-vigi-35;
+}
+.color-vigi-40 {
+    @apply text-vigi-40 bg-vigi-40;
+}
+.color-vigi-45 {
+    @apply text-vigi-45 bg-vigi-45;
+}
+.color-vigi-50 {
+    @apply text-vigi-50 bg-vigi-50;
+}
+.color-vigi-55 {
+    @apply text-vigi-55 bg-vigi-55;
+}
+.color-vigi-60 {
+    @apply text-vigi-60 bg-vigi-60;
+}
+.color-vigi-65 {
+    @apply text-vigi-65 bg-vigi-65;
+}
+.color-vigi-70 {
+    @apply text-vigi-70 bg-vigi-70;
+}
+.color-vigi-75 {
+    @apply text-vigi-75 bg-vigi-75;
+}
+.color-vigi-80 {
+    @apply text-vigi-80 bg-vigi-80;
+}
+.color-vigi-85 {
+    @apply text-vigi-85 bg-vigi-85;
+}
+.color-vigi-90 {
+    @apply text-vigi-90 bg-vigi-90;
+}
+.color-vigi-95 {
+    @apply text-vigi-95 bg-vigi-95;
+}
+.color-vigi-100 {
+    @apply text-vigi-100 bg-vigi-100;
+}

tailwind.config.js

@@ -1,7 +1,12 @@
-let colors = {};
+let bgColors = {};
+let textColors = {};
 
 for (let i = 0; i <= 100; i += 5) {
-  colors[`vigi-${i}`] = `color-mix(in hsl, var(--max) ${i}%, var(--min))`;
+  bgColors[`vigi-${i}`] =
+    `color-mix(in oklch, var(--max-bg) ${i}%, var(--min-bg))`;
+
+  textColors[`vigi-${i}`] =
+    `color-mix(in oklch, var(--max-text) ${i}%, var(--min-text))`;
 }
 
 /** @type {import('tailwindcss').Config} */
@@ -9,8 +14,8 @@ export default {
   content: ["./src/**/*.{html,js,svelte,ts}"],
   theme: {
     extend: {
-      colors,
+      colors: bgColors,
-      textColor: colors,
+      textColor: textColors,
     },
   },
   plugins: [],