0693f4f Add announce preference to settings — radicle-desktop

Radicle desktop app

Add announce preference to settings

Rūdolfs Ošiņš committed 1 year ago

commit 0693f4f806eaad431fbbbf8b695b0bd26d52bb3d
parent c01a48939e19a06a42587ab8e7bca8e0aa4b0eb5

4 files changed +138 -32

added 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>

modified 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>

modified 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>

modified 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) {