Add announce preference to settings

src/components/AnnounceSwitch.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" module>
+  export const announce = writable<boolean>(loadAnnounce());
+
+  function loadAnnounce(): boolean {
+    const storedAnnounce = localStorage
+      ? localStorage.getItem("announce")
+      : null;
+
+    if (storedAnnounce === null) {
+      return true;
+    } else {
+      return storedAnnounce === "true";
+    }
+  }
+
+  export function storeAnnounce(newAnnounce: boolean): void {
+    announce.set(newAnnounce);
+    if (localStorage) {
+      localStorage.setItem("announce", newAnnounce.toString());
+    } else {
+      console.warn(
+        "localStorage isn't available, not able to persist the selected announce preference without it.",
+      );
+    }
+  }
+</script>
+
+<script lang="ts">
+  import { writable } from "svelte/store";
+</script>
+
+<style>
+  .container {
+    background-color: var(--color-fill-ghost);
+    clip-path: var(--2px-corner-fill);
+    display: flex;
+    height: 32px;
+    align-items: center;
+    padding: 0 2px;
+  }
+  button {
+    height: 28px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    border: none;
+    white-space: nowrap;
+    touch-action: manipulation;
+    clip-path: var(--1px-corner-fill);
+    font-size: var(--font-size-small);
+    margin: 0;
+    padding: 0 1rem;
+    color: var(--color-foreground-contrast);
+    background-color: var(--color-fill-ghost);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .active {
+    color: var(--color-foreground-emphasized);
+    background-color: var(--color-background-dip);
+  }
+</style>
+
+<div class="container">
+  <button
+    class:active={$announce}
+    onclick={() => {
+      storeAnnounce(true);
+    }}>
+    Right away
+  </button>
+
+  <button
+    class:active={!$announce}
+    onclick={() => {
+      storeAnnounce(false);
+    }}>
+    Periodically
+  </button>
+</div>

src/components/Header.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { nodeRunning } from "@app/lib/events";
 
+  import AnnounceSwitch from "./AnnounceSwitch.svelte";
   import Border from "./Border.svelte";
   import Icon from "./Icon.svelte";
   import NakedButton from "./NakedButton.svelte";
@@ -87,11 +88,31 @@
             slot="toggle"
             let:toggle
             onclick={toggle}>
-            <Icon name="more-vertical" />
+            <Icon name="settings" />
           </NakedButton>
-          <Border variant="ghost" slot="popover" stylePadding="0.5rem 1rem">
-            <div style="display: flex; gap: 2rem; align-items: center;">
-              Theme <ThemeSwitch />
+          <Border
+            variant="ghost"
+            slot="popover"
+            stylePadding="0.5rem 1rem"
+            styleWidth="27rem">
+            <div
+              class="global-flex"
+              style:flex-direction="column"
+              style:align-items="flex-start"
+              style:gap="1rem"
+              style:width="100%">
+              <div
+                class="global-flex"
+                style:justify-content="space-between"
+                style:width="100%">
+                Theme <ThemeSwitch />
+              </div>
+              <div
+                class="global-flex"
+                style:justify-content="space-between"
+                style:width="100%">
+                Announce changes <AnnounceSwitch />
+              </div>
             </div>
           </Border>
         </Popover>

src/components/ThemeSwitch.svelte

@@ -28,13 +28,20 @@
 
 <script lang="ts">
   import { writable } from "svelte/store";
-
-  import Border from "./Border.svelte";
   import Icon from "./Icon.svelte";
 </script>
 
 <style>
+  .container {
+    background-color: var(--color-fill-ghost);
+    clip-path: var(--2px-corner-fill);
+    display: flex;
+    height: 32px;
+    align-items: center;
+    padding: 0 2px;
+  }
   button {
+    height: 28px;
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -42,40 +49,37 @@
     white-space: nowrap;
     touch-action: manipulation;
     clip-path: var(--1px-corner-fill);
-    height: 24px;
     font-size: var(--font-size-small);
     margin: 0;
+    padding: 0 1rem;
+    color: var(--color-foreground-contrast);
+    background-color: var(--color-fill-ghost);
+    font-weight: var(--font-weight-semibold);
+    gap: 6px;
+  }
+
+  .active {
+    color: var(--color-foreground-emphasized);
+    background-color: var(--color-background-dip);
   }
 </style>
 
-<Border variant="secondary">
+<div class="container">
   <button
-    style:background-color={$theme === "dark"
-      ? "var(--color-fill-secondary)"
-      : "transparent"}
+    class:active={$theme === "dark"}
     onclick={() => {
       storeTheme("dark");
     }}>
-    <span style="display: flex; align-items: center; gap: 0.5rem">
-      <Icon name="moon" />
-      Dark
-    </span>
+    <Icon name="moon" />
+    Dark
   </button>
 
   <button
-    style:background-color={$theme === "light"
-      ? "var(--color-fill-secondary)"
-      : "transparent"}
+    class:active={$theme === "light"}
     onclick={() => {
       storeTheme("light");
     }}>
-    <span
-      style="display: flex; align-items: center; gap: 0.5rem"
-      style:color={$theme === "light"
-        ? "var(--color-foreground-white)"
-        : "var(--color-foreground-contrast)"}>
-      <Icon name="sun" />
-      Light
-    </span>
+    <Icon name="sun" />
+    Light
   </button>
-</Border>
+</div>