From 9d18ba236fd05420c185a72a7e5b1a307389e5e2 Mon Sep 17 00:00:00 2001
From: kolaente <hello@kolaente.de>
Date: Thu, 18 Jun 2026 23:52:52 +0200
Subject: [PATCH] feat(time-tracking): add favicon indicator for active time
 tracking sessions (#2937)

---
 .../images/icons/favicon-tracking-32x32.png   | Bin 0 -> 2089 bytes
 frontend/src/App.vue                          |   2 ++
 .../src/composables/useTimeTrackingFavicon.ts |  32 ++++++++++++++++++
 3 files changed, 34 insertions(+)
 create mode 100644 frontend/public/images/icons/favicon-tracking-32x32.png
 create mode 100644 frontend/src/composables/useTimeTrackingFavicon.ts

diff --git a/frontend/public/images/icons/favicon-tracking-32x32.png b/frontend/public/images/icons/favicon-tracking-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3867376f0a6999adc2c308a585d6b442df293dc
GIT binary patch
literal 2089
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
T8oe2T00000NkvXXu0mjfxNY?I

literal 0
HcmV?d00001

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 08688b1bb..760c18edc 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -61,6 +61,7 @@ import {useAuthStore} from '@/stores/auth'
 import {useBaseStore} from '@/stores/base'
 
 import {useColorScheme} from '@/composables/useColorScheme'
+import {useTimeTrackingFavicon} from '@/composables/useTimeTrackingFavicon'
 import {useBodyClass} from '@/composables/useBodyClass'
 import QuickAddOverlay from '@/components/quick-actions/QuickAddOverlay.vue'
 import AddToHomeScreen from '@/components/home/AddToHomeScreen.vue'
@@ -107,6 +108,7 @@ watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
 
 setLanguage(authStore.settings.language ?? DEFAULT_LANGUAGE)
 useColorScheme()
+useTimeTrackingFavicon()
 </script>
 
 <style src="@/styles/tailwind.css" />
diff --git a/frontend/src/composables/useTimeTrackingFavicon.ts b/frontend/src/composables/useTimeTrackingFavicon.ts
new file mode 100644
index 000000000..43f24b8a7
--- /dev/null
+++ b/frontend/src/composables/useTimeTrackingFavicon.ts
@@ -0,0 +1,32 @@
+import {watch} from 'vue'
+import {createSharedComposable, tryOnMounted} from '@vueuse/core'
+import {storeToRefs} from 'pinia'
+
+import {useTimeTrackingStore} from '@/stores/timeTracking'
+import {getFullBaseUrl} from '@/helpers/getFullBaseUrl'
+
+const TRACKING_FAVICON = `${getFullBaseUrl()}images/icons/favicon-tracking-32x32.png`
+
+function getFaviconLink(): HTMLLinkElement | null {
+	return document.querySelector<HTMLLinkElement>('link[rel="icon"]')
+}
+
+// Swaps in a favicon with a small red dot in the lower left corner while a timer
+// is running, so an active time tracking session is visible even when the tab
+// isn't focused.
+export const useTimeTrackingFavicon = createSharedComposable(() => {
+	const {hasActiveTimer} = storeToRefs(useTimeTrackingStore())
+
+	const originalHref = getFaviconLink()?.getAttribute('href') ?? '/favicon.ico'
+
+	function update(active: boolean) {
+		const link = getFaviconLink()
+		if (link === null) {
+			return
+		}
+		link.href = active ? TRACKING_FAVICON : originalHref
+	}
+
+	watch(hasActiveTimer, update, {flush: 'post'})
+	tryOnMounted(() => update(hasActiveTimer.value))
+})