Hook up the online/offline button to the new events

src/App.svelte

@@ -2,7 +2,6 @@
   import { onMount } from "svelte";
 
   import { invoke } from "@tauri-apps/api/core";
-  import { listen } from "@tauri-apps/api/event";
 
   import * as router from "@app/lib/router";
   import { theme } from "@app/components/ThemeSwitch.svelte";
@@ -16,14 +15,6 @@
 
   subscribeToNodeEvents();
 
-  void listen("event", event => {
-    console.log(event.payload);
-  });
-
-  void listen("node_status", event => {
-    console.log(`Node: ${event.payload}`);
-  });
-
   const activeRouteStore = router.activeRouteStore;
 
   onMount(async () => {

src/components/Header.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { nodeState } from "@app/lib/events";
+
   import Border from "./Border.svelte";
   import Icon from "./Icon.svelte";
   import NakedButton from "./NakedButton.svelte";
@@ -71,8 +73,13 @@
 
       <div class="global-flex" style:gap="0.5rem">
         <OutlineButton variant="ghost">
-          <Icon name="offline" />
-          Offline
+          {#if $nodeState === "running"}
+            <Icon name="online" />
+            Online
+          {:else}
+            <Icon name="offline" />
+            Offline
+          {/if}
         </OutlineButton>
         <Popover popoverPositionRight="0" popoverPositionTop="3rem">
           <NakedButton

src/components/Icon.svelte

@@ -20,6 +20,7 @@
     | "moon"
     | "more-vertical"
     | "offline"
+    | "online"
     | "patch"
     | "plus"
     | "repo"
@@ -262,6 +263,34 @@
     <path d="M4 11L5 11V12L4 12L4 11Z" />
     <path d="M3 12H4L4 13H3L3 12Z" />
     <path d="M2 13L3 13L3 14H2V13Z" />
+  {:else if name === "online"}
+    <path d="M3 5.99999L3 7.99999H2L2 5.99999H3Z" />
+    <path d="M13 9.99998V7.99998H14V9.99998H13Z" />
+    <path d="M5 8.99998L5 6.99998H4L4 8.99998H5Z" />
+    <path d="M11 6.99999V8.99999H12V6.99999H11Z" />
+    <path d="M4 12H5V13H4V12Z" />
+    <path d="M12 3.99998L11 3.99998V2.99998L12 2.99998V3.99998Z" />
+    <path d="M4 3.99999V5.99999L3 5.99999L3 3.99999H4Z" />
+    <path d="M12 12V9.99998H13V12H12Z" />
+    <path d="M4 9.99998L4 12H3L3 9.99998H4Z" />
+    <path d="M12 5.99999V3.99998L13 3.99999V5.99999H12Z" />
+    <path d="M5 3.99999H4L4 2.99999L5 2.99999V3.99999Z" />
+    <path d="M11 12H12V13H11V12Z" />
+    <path d="M3 7.99999L3 9.99998H2L2 7.99999H3Z" />
+    <path d="M13 7.99998V5.99999L14 5.99998V7.99998H13Z" />
+    <path d="M6 11H5L5 8.99998H6L6 11Z" />
+    <path d="M10 4.99998H11L11 6.99999L10 6.99998L10 4.99998Z" />
+    <path d="M6 6.99998H5L5 4.99998L6 4.99998L6 6.99998Z" />
+    <path d="M10 8.99998L11 8.99999L11 11H10L10 8.99998Z" />
+    <path d="M7 6.99998H9V8.99998H7V6.99998Z" />
+    <path d="M6 11H7V12H6V11Z" />
+    <path d="M10 4.99998L9 4.99998V3.99998L10 3.99998V4.99998Z" />
+    <path d="M6 3.99999H7V4.99999L6 4.99998L6 3.99999Z" />
+    <path d="M10 12H9V11H10L10 12Z" />
+    <path d="M5 1.99999H6V2.99999L5 2.99999L5 1.99999Z" />
+    <path d="M11 14H10V13H11V14Z" />
+    <path d="M5 13H6V14H5V13Z" />
+    <path d="M11 2.99998L10 2.99998V1.99998L11 1.99998V2.99998Z" />
   {:else if name === "patch"}
     <path d="M2 3H3V13H2V3Z" />
     <path d="M3 13H12V14H3L3 13Z" />

src/lib/events.ts

@@ -1,9 +1,24 @@
 import { emit } from "@tauri-apps/api/event";
+import { listen } from "@tauri-apps/api/event";
+import { writable } from "svelte/store";
 
 let interval: ReturnType<typeof setInterval> | undefined = undefined;
 
+type NodeState = "stopped" | "running";
+export let nodeState = writable<NodeState>("stopped");
+
 export function subscribeToNodeEvents() {
+  void listen("event", event => {
+    console.log(event.payload);
+  });
+
+  void listen("node_status", event => {
+    nodeState.set(event.payload as NodeState);
+  });
+
   if (interval === undefined) {
+    void emit("subscribe_events");
+
     interval = setInterval(() => {
       // In case there is a running subscription this won't launch a new one.
       void emit("subscribe_events");