From 0693f4f806eaad431fbbbf8b695b0bd26d52bb3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Wed, 23 Oct 2024 15:46:19 +0200
Subject: [PATCH] Add announce preference to settings

---
 src/components/AnnounceSwitch.svelte | 80 ++++++++++++++++++++++++++++
 src/components/Header.svelte         | 29 ++++++++--
 src/components/ThemeSwitch.svelte    | 50 +++++++++--------
 src/views/repo/Issue.svelte          | 11 ++--
 4 files changed, 138 insertions(+), 32 deletions(-)
 create mode 100644 src/components/AnnounceSwitch.svelte

diff --git a/src/components/AnnounceSwitch.svelte b/src/components/AnnounceSwitch.svelte
new file mode 100644
index 000000000..3f8e42c27
--- /dev/null
+++ b/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>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index a26385667..4710ed0bd 100644
--- a/src/components/Header.svelte
+++ b/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>
diff --git a/src/components/ThemeSwitch.svelte b/src/components/ThemeSwitch.svelte
index 2f15404a9..065cb6e6e 100644
--- a/src/components/ThemeSwitch.svelte
+++ b/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>
diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte
index fd31a236a..c2ecfe077 100644
--- a/src/views/repo/Issue.svelte
+++ b/src/views/repo/Issue.svelte
@@ -16,6 +16,8 @@
   } from "@app/lib/utils";
   import { invoke } from "@tauri-apps/api/core";
 
+  import { announce } from "@app/components/AnnounceSwitch.svelte";
+
   import Border from "@app/components/Border.svelte";
   import CommentComponent from "@app/components/Comment.svelte";
   import CommentToggleInput from "@app/components/CommentToggleInput.svelte";
@@ -36,7 +38,6 @@
   export let issues: Issue[];
   export let config: Config;
 
-  const announce = false;
   let topLevelReplyOpen = false;
 
   // Close the comment textbox when switching between issues. The view doesn't
@@ -91,7 +92,7 @@
       await invoke("create_issue_comment", {
         rid: repo.rid,
         new: { id: issue.id, body, embeds },
-        opts: { announce },
+        opts: { announce: $announce },
       });
     } catch (error) {
       console.error("Comment creation failed: ", error);
@@ -105,7 +106,7 @@
       await invoke("create_issue_comment", {
         rid: repo.rid,
         new: { id: issue.id, body, embeds, replyTo },
-        opts: { announce },
+        opts: { announce: $announce },
       });
     } catch (error) {
       console.error("Comment reply creation failed", error);
@@ -125,7 +126,7 @@
           body,
           embeds,
         },
-        opts: { announce },
+        opts: { announce: $announce },
       });
     } catch (error) {
       if (error instanceof Error) {
@@ -154,7 +155,7 @@
             ({ did }) => publicKeyFromDid(did) === publicKey,
           ),
         },
-        opts: { announce },
+        opts: { announce: $announce },
       });
     } catch (error) {
       if (error instanceof Error) {