improve threshold setting visuals

src/components/bar.svelte

@@ -11,7 +11,7 @@
 	export let onSetpointChange = (e: number) => {};
 
 	let bar;
-	const tweenedProgress = tweened(0, { duration: 200, easing: quintOut });
+	const tweenedProgress = tweened(0, { duration: 100, easing: quintOut });
 
 	$: $tweenedProgress = progress;
 </script>

src/components/tube.svelte

@@ -4,8 +4,8 @@
 	import { appWindow } from "@tauri-apps/api/window";
 
 	let src = "";
-	let buf = 0;
-	let open = false;
+	export let buf = 0;
+	export let open = false;
 	let closed = false;
 	let blink = false;
 	let inAnim = "jump-in";

src/views/main.svelte

@@ -1,32 +1,37 @@
+<script lang="ts" context="module">
+  import { writable } from "svelte/store";
+  const transparent = writable(false);
+  let threshold = writable(0);
+  let level = writable(0);
+</script>
+
 <script lang="ts">
   import { appWindow, PhysicalSize } from "@tauri-apps/api/window";
-  import { onMount } from "svelte";
+  import { onMount, beforeUpdate, afterUpdate } from "svelte";
   import { fly } from "svelte/transition";
   import FramePreview from "../components/FramePreview.svelte";
   import Tuber from "../components/tube.svelte";
   import { invoke } from "@tauri-apps/api/tauri";
   import Bar from "../components/bar.svelte";
 
-  let transparent = false;
-  let threshold = 0.0;
-  let level = 0.0;
+  let active = false;
 
   onMount(async () => {
     await appWindow.setMinSize(new PhysicalSize(720, 600));
     await appWindow.onFocusChanged(({ payload: focused }) => {
-      transparent = !focused;
+      $transparent = !focused;
     });
-    threshold = await invoke("get_mic_threshold");
+    setInterval(async () => ($level = await invoke("get_audio_level")), 10);
+  });
 
-    setInterval(async () => {
-      level = await invoke("get_audio_level");
-    }, 50);
+  beforeUpdate(async () => {
+    $threshold = await invoke("get_mic_threshold");
   });
 </script>
 
-<div class="container" class:transparent>
+<div class="container" class:transparent={$transparent}>
   <Tuber />
-  {#if !transparent}
+  {#if !$transparent}
     <div
       transition:fly={{ duration: 200, x: -200, opacity: 100 }}
       class="frames"
@@ -38,12 +43,14 @@
 
     <div transition:fly={{ duration: 200, x: 200, opacity: 100 }} class="audio">
       <Bar
-        progress={level * 100}
-        setpoint={threshold * 100}
+        progress={$level * 100}
+        setpoint={$threshold * 100}
         withSetpoint
         onSetpointChange={async (e) => {
+          // $threshold = e;
           await invoke("set_mic_threshold", { threshold: e });
         }}
+        --bar-color={active ? "green" : "blue"}
       />
     </div>
   {/if}