Make analytics and error reporting optional

src/app/analytics.ts

@@ -1,6 +1,7 @@
 /* eslint prefer-rest-params: 0 */
 
 import {page} from "$app/stores"
+import {getSetting} from "@app/state"
 
 const w = window as any
 
@@ -12,7 +13,7 @@ w.plausible =
 
 export const setupAnalytics = () => {
   page.subscribe($page => {
-    if ($page.route) {
+    if ($page.route && getSetting("report_usage")) {
       w.plausible("pageview", {u: $page.route.id})
     }
   })

src/app/state.ts

@@ -305,6 +305,8 @@ export type Settings = {
   values: {
     show_media: boolean
     hide_sensitive: boolean
+    report_usage: boolean
+    report_errors: boolean
     send_delay: number
     upload_type: "nip96" | "blossom"
     nip96_urls: string[]
@@ -315,6 +317,8 @@ export type Settings = {
 export const defaultSettings = {
   show_media: true,
   hide_sensitive: true,
+  report_usage: true,
+  report_errors: false,
   send_delay: 3000,
   upload_type: "nip96",
   nip96_urls: ["https://nostr.build"],

src/app/tracking.ts

@@ -1,10 +1,17 @@
 import * as Sentry from "@sentry/browser"
+import {getSetting} from "@app/state"
 
 export const setupTracking = () => {
   if (import.meta.env.VITE_GLITCHTIP_API_KEY) {
     Sentry.init({
       dsn: import.meta.env.VITE_GLITCHTIP_API_KEY,
-      tracesSampleRate: 0.01,
+      beforeSend(event: any) {
+        if (!getSetting("report_errors")) {
+          return null
+        }
+
+        return event
+      },
       integrations(integrations) {
         return integrations.filter(integration => integration.name !== "Breadcrumbs")
       },

src/routes/settings/+page.svelte

@@ -39,7 +39,7 @@
 
 <form class="content column gap-4" {onsubmit}>
   <div class="card2 bg-alt col-4 shadow-xl">
-    <p class="text-lg">Content Settings</p>
+    <strong class="text-lg">Content Settings</strong>
     <FieldInline>
       {#snippet label()}
         <p>Hide sensitive content?</p>
@@ -77,7 +77,37 @@
         </div>
       {/snippet}
     </Field>
-    <p class="text-lg">Editor Settings</p>
+    <strong class="text-lg">Privacy Settings</strong>
+    <FieldInline>
+      {#snippet label()}
+        <p>Report errors?</p>
+      {/snippet}
+      {#snippet input()}
+        <input
+          type="checkbox"
+          class="toggle toggle-primary"
+          bind:checked={settings.report_errors} />
+      {/snippet}
+      {#snippet info()}
+        <p>
+          Allow {PLATFORM_NAME} to send error reports to help improve the app.
+        </p>
+      {/snippet}
+    </FieldInline>
+    <FieldInline>
+      {#snippet label()}
+        <p>Report usage?</p>
+      {/snippet}
+      {#snippet input()}
+        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.report_usage} />
+      {/snippet}
+      {#snippet info()}
+        <p>
+          Allow {PLATFORM_NAME} to collect anonymous usage data.
+        </p>
+      {/snippet}
+    </FieldInline>
+    <strong class="text-lg">Editor Settings</strong>
     <FieldInline>
       {#snippet label()}
         <p>Send Delay</p>
@@ -119,7 +149,7 @@
         </div>
       {/snippet}
       {#snippet info()}
-        <p>Choose a media server type and url for files you upload to flotilla.</p>
+        <p>Choose a media server type and url for files you upload to {PLATFORM_NAME}.</p>
       {/snippet}
     </Field>
     <div class="mt-4 flex flex-row items-center justify-between gap-4">

src/routes/settings/profile/+page.svelte

@@ -3,6 +3,7 @@
   import {hexToBytes} from "@noble/hashes/utils"
   import {displayPubkey, displayProfile} from "@welshman/util"
   import {pubkey, session, displayNip05, deriveProfile} from "@welshman/app"
+  import {slideAndFade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -29,6 +30,8 @@
   const startEject = () => pushModal(InfoKeys)
 
   const startDelete = () => pushModal(ProfileDelete)
+
+  let showAdvanced = false
 </script>
 
 <div class="content column gap-4">
@@ -122,10 +125,24 @@
     {/if}
   </div>
   <Alerts />
-  <div class="card2 bg-alt col-4 shadow-xl">
-    <Button class="btn btn-outline btn-error" onclick={startDelete}>
-      <Icon icon="trash-bin-2" />
-      Delete your profile
-    </Button>
+  <div class="card2 bg-alt shadow-xl">
+    <div class="flex items-center justify-between">
+      <strong>Advanced</strong>
+      <Button onclick={() => (showAdvanced = !showAdvanced)}>
+        {#if showAdvanced}
+          <Icon icon="alt-arrow-down" />
+        {:else}
+          <Icon icon="alt-arrow-up" />
+        {/if}
+      </Button>
+    </div>
+    {#if showAdvanced}
+      <div transition:slideAndFade class="pt-4">
+        <Button class="btn btn-outline btn-error" onclick={startDelete}>
+          <Icon icon="trash-bin-2" />
+          Delete your profile
+        </Button>
+      </div>
+    {/if}
   </div>
 </div>