From 0a36fd5703b3549ed1f25bb90919f58b48b258d2 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Thu, 20 Apr 2023 10:07:10 +0200
Subject: [PATCH] feat(frontend): add donate message to user settings page

Running a website is expensive :( and the existing link is a *little*
buried
---
 frontend/src/routes/+layout.svelte        |  4 +++
 frontend/src/routes/settings/+page.svelte | 41 ++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index ab6d371..32c55d3 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -8,6 +8,7 @@
   import { version } from "$app/environment";
   import { toastStore } from "$lib/toast";
   import Toast from "$lib/components/Toast.svelte";
+  import { Icon } from "sveltestrap";
 
   export let data: LayoutData;
 
@@ -48,6 +49,9 @@
           >)
         {/if} &middot;
         <a href="/page/about">About & contact</a> &middot;
+        <Icon name="cash" aria-hidden />
+        <a href="https://liberapay.com/u1f320/" target="_blank">Donate</a>
+        &middot;
         <a href="/page/terms">Terms of service</a> &middot;
         <a href="/page/privacy">Privacy policy</a>
       </p>
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index a112ef4..83fa159 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -7,8 +7,18 @@
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   import { userStore } from "$lib/store";
   import { addToast } from "$lib/toast";
-  import { Button, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Table } from "sveltestrap";
+  import {
+    Alert,
+    Button,
+    Icon,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalHeader,
+    Table,
+  } from "sveltestrap";
   import type { PageData } from "./$types";
+  import { onMount } from "svelte";
 
   export let data: PageData;
 
@@ -73,8 +83,37 @@
       invalidateError = e as APIError;
     }
   };
+
+  const DONATE_ALERT_STORE = "alert-1681976313";
+  let donateAlertOpen = false;
+  const closeDonateAlert = () => {
+    donateAlertOpen = false;
+    localStorage.setItem(DONATE_ALERT_STORE, "dismissed");
+  };
+
+  onMount(() => {
+    if (!localStorage.getItem(DONATE_ALERT_STORE)) {
+      donateAlertOpen = true;
+    }
+  });
 </script>
 
+<Alert color="secondary" fade={false} isOpen={donateAlertOpen} toggle={closeDonateAlert}>
+  If you find pronouns.cc useful and have the means, I would really appreciate a <a
+    href="https://liberapay.com/u1f320/"
+    target="_blank">donation</a
+  >
+  to keep the site running, fast, and ad-free!
+  <br />
+  It's not required and doesn't give you any perks, but running a website is expensive so it would really
+  help.
+  <br />
+  <span class="text-muted">
+    (If you want to hide this alert, press the <Icon name="x-lg" alt="X" /> in the top right to hide
+    it on this computer or phone)
+  </span>
+</Alert>
+
 <h1>Your profile</h1>
 
 <div class="grid">