Active display of a timer

src/App.svelte

@@ -3,56 +3,11 @@
  SPDX-License-Identifier: 	AGPL-3.0-or-later
 -->
 <script type="ts">
-  import { onDestroy, onMount } from "svelte";
-  import type { UnlistenFn } from "@tauri-apps/api/event";
-  import { invoke } from "@tauri-apps/api";
-  import { listen } from "@tauri-apps/api/event";
-
-  let seconds = 5;
-  let timerTickUnlisten: Promise<UnlistenFn> | null = null;
-  let timerDoneUnlisten: Promise<UnlistenFn> | null = null;
-
-  type Timer = {
-    id: string;
-    elapsed: {
-      secs: number;
-      nsecs: number;
-    };
-  };
-
-  onMount(() => {
-    timerTickUnlisten = listen<Timer>("timer-tick", (event) => {
-      console.log("Tick!", event.payload.id, event.payload.elapsed);
-    });
-
-    timerDoneUnlisten = listen<Timer>("timer-done", (event) => {
-      console.log("Done!", event.payload.id);
-    });
-  });
-
-  onDestroy(() => {
-    timerTickUnlisten?.then((ttu) => ttu());
-    timerDoneUnlisten?.then((tdu) => tdu());
-  });
-
-  async function startTimer() {
-    let timer = await invoke<Timer>("plugin:timers|make", {
-      duration: { secs: seconds, nanos: 0 },
-      message: "Hi!",
-    });
-    invoke("plugin:timers|start", { timerId: timer.id });
-  }
+  import Timer from "./components/Timer.svelte";
 </script>
 
 <main>
-  <div id="timer" />
-  <div id="controls">
-    <label>
-      Fire after
-      <input type="number" bind:value={seconds} />
-    </label>
-    <button on:click={startTimer}>Fire!</button>
-  </div>
+  <Timer />
 </main>
 
 <style>
@@ -65,13 +20,4 @@
     display: flex;
     flex-direction: column;
   }
-  #timer {
-    flex-grow: 1;
-    margin: 0.5em;
-  }
-
-  #controls {
-    margin: 0.5em;
-    padding: 0.5em;
-  }
 </style>