From be151fd6f7e7860cc60bee67bab815c155e86fcd Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.net>
Date: Fri, 29 May 2026 23:05:37 +0000
Subject: feat(analytics): track umami events across core actions

Add a guarded track() wrapper (src/lib/analytics.ts) so programmatic
events no-op instead of throwing when umami is absent (localhost),
lazily loaded, or ad-blocked. Instrument the core loop (progress
increment, roulette, list filter, force refresh), the auth funnel
(log in/out, command palette), settings toggles/selects at the wrapper
level, sync/debug/feed actions, and tool/sharing actions.
---
 src/lib/Settings/Categories/Debug.svelte       |  6 +++++-
 src/lib/Settings/Categories/Display.svelte     | 27 ++++++++++++++++++++++----
 src/lib/Settings/Categories/RSSFeeds.svelte    |  1 +
 src/lib/Settings/Categories/SettingSync.svelte |  4 ++++
 4 files changed, 33 insertions(+), 5 deletions(-)

(limited to 'src/lib/Settings/Categories')

diff --git a/src/lib/Settings/Categories/Debug.svelte b/src/lib/Settings/Categories/Debug.svelte
index a2cb35c5..a18eea9d 100644
--- a/src/lib/Settings/Categories/Debug.svelte
+++ b/src/lib/Settings/Categories/Debug.svelte
@@ -25,11 +25,14 @@ import { get } from "svelte/store";
 </SettingHint>
 <br />
 
-<button onclick={invalidateListCaches}>{$locale().debug.clearCaches}</button>
+<button onclick={invalidateListCaches} data-umami-event="Clear List Caches"
+  >{$locale().debug.clearCaches}</button
+>
 
 <Spacer />
 
 <button
+  data-umami-event="Reset Settings"
   onclick={() => {
     settings.reset();
     addNotification(
@@ -48,6 +51,7 @@ import { get } from "svelte/store";
 <Spacer />
 
 <button
+  data-umami-event="Clear Local Database"
   onclick={async () => {
     await localforage.clear();
     addNotification(
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index 80f21fde..b2acd270 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -7,8 +7,20 @@ import root from "$lib/Utility/root";
 import locale from "$stores/locale";
 import { requestNotifications } from "$lib/Utility/notifications";
 import { getFingerprint } from "$lib/Utility/fingerprint";
+import { track } from "$lib/analytics";
+
+const trackSetting = (key: string) => (event: Event) =>
+	track("Change Setting", {
+		key,
+		value: (event.currentTarget as HTMLSelectElement).value,
+	});
 
 const onHelperChange = () => {
+	track("Change Setting", {
+		key: "displayAoButa",
+		value: $settings.displayAoButa,
+	});
+
 	const mai = document.getElementById("mai") as HTMLImageElement;
 
 	if (!mai) return;
@@ -182,7 +194,11 @@ const onHelperChange = () => {
   text={$locale().settings.display.categories.dataSaver}
   tooltipText={$locale().settings.display.tooltips.dataSaver}
 />
-<select bind:value={$settings.displayLanguage} class="no-shadow">
+<select
+  bind:value={$settings.displayLanguage}
+  class="no-shadow"
+  onchange={trackSetting('displayLanguage')}
+>
   <option value="en">
     {$locale({
       locale: 'en'
@@ -309,7 +325,7 @@ const onHelperChange = () => {
 <Spacer />
 
 <b>{$locale().settings.display.categories.listSortFilterTitle}</b><br />
-<select bind:value={$settings.displayAnimeSort}>
+<select bind:value={$settings.displayAnimeSort} onchange={trackSetting('displayAnimeSort')}>
   <option value="time_remaining"
     >{$locale().settings.display.categories.sortOptions?.timeRemaining}</option
   >
@@ -375,7 +391,7 @@ const onHelperChange = () => {
   text={$locale().settings.display.categories.media.fields.scheduleFilterList}
   id="schedule-filter-list"
 />
-<select bind:value={$settings.displayTitleFormat}>
+<select bind:value={$settings.displayTitleFormat} onchange={trackSetting('displayTitleFormat')}>
   <option value="english">
     {$locale().settings.display.categories.media.fields.mediaTitleFormat.options.english}
   </option>
@@ -399,7 +415,10 @@ const onHelperChange = () => {
 
 <Spacer />
 
-<select bind:value={$settings.displayOutboundLinksTo}>
+<select
+  bind:value={$settings.displayOutboundLinksTo}
+  onchange={trackSetting('displayOutboundLinksTo')}
+>
   <option value="anilist">AniList</option>
   <option value="livechartme">LiveChart.me</option>
   <option value="animeschedule">AnimeSchedule</option>
diff --git a/src/lib/Settings/Categories/RSSFeeds.svelte b/src/lib/Settings/Categories/RSSFeeds.svelte
index 08ba7292..eaf21345 100644
--- a/src/lib/Settings/Categories/RSSFeeds.svelte
+++ b/src/lib/Settings/Categories/RSSFeeds.svelte
@@ -11,6 +11,7 @@ export let user: { accessToken: string; refreshToken: string };
 </script>
 
 <button
+  data-umami-event="Copy RSS Feed URL"
   onclick={() => {
     addNotification(
       options({
diff --git a/src/lib/Settings/Categories/SettingSync.svelte b/src/lib/Settings/Categories/SettingSync.svelte
index dd19db49..e45fdfb9 100644
--- a/src/lib/Settings/Categories/SettingSync.svelte
+++ b/src/lib/Settings/Categories/SettingSync.svelte
@@ -13,6 +13,7 @@ import { get } from "svelte/store";
 
 {#if !$settings.settingsSync}
   <button
+    data-umami-event="Pull Settings"
     onclick={() => {
       $settings.settingsSync = true;
 
@@ -53,6 +54,7 @@ import { get } from "svelte/store";
   </SettingHint>
   <Spacer />
   <button
+    data-umami-event="Push Settings"
     onclick={() => {
       $settings.settingsSync = true;
 
@@ -78,6 +80,7 @@ import { get } from "svelte/store";
   </SettingHint>
 {:else}
   <button
+    data-umami-event="Disable Settings Sync"
     onclick={() => {
       $settings.settingsSync = false;
 
@@ -91,6 +94,7 @@ import { get } from "svelte/store";
     {$locale().settings.settingsSync.buttons.disable}
   </button>
   <button
+    data-umami-event="Delete Remote Settings"
     onclick={() => {
       fetch(root(`/api/configuration?id=${$identity.id}`), {
         method: 'DELETE'
-- 
cgit v1.2.3