From 212d891fa12e8ed58a035c8f0160f9793a4ae2e0 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 8 Jun 2026 15:16:47 +0200
Subject: [PATCH] feat(time-tracking): show a running-elsewhere badge in the
 header

---
 frontend/src/components/home/AppHeader.vue | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/home/AppHeader.vue b/frontend/src/components/home/AppHeader.vue
index 24f50e09b..bdffb42bb 100644
--- a/frontend/src/components/home/AppHeader.vue
+++ b/frontend/src/components/home/AppHeader.vue
@@ -54,7 +54,15 @@
 			</ProjectSettingsDropdown>
 		</div>
 
+		<div
+			v-else-if="pageTitle"
+			class="project-title-wrapper"
+		>
+			<span class="project-title">{{ pageTitle }}</span>
+		</div>
+
 		<div class="navbar-end">
+			<TimerBadge />
 			<OpenQuickActions />
 			<Notifications />
 			<Dropdown>
@@ -121,13 +129,17 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 
 import { PERMISSIONS as Permissions } from '@/constants/permissions'
+import { PRO_FEATURE } from '@/constants/proFeatures'
 
 import ProjectSettingsDropdown from '@/components/project/ProjectSettingsDropdown.vue'
 import Dropdown from '@/components/misc/Dropdown.vue'
 import DropdownItem from '@/components/misc/DropdownItem.vue'
 import Notifications from '@/components/notifications/Notifications.vue'
+import TimerBadge from '@/components/time-tracking/TimerBadge.vue'
 import Logo from '@/components/home/Logo.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
@@ -151,12 +163,20 @@ const background = computed(() => baseStore.background)
 const canWriteCurrentProject = computed(() => baseStore.currentProject?.maxPermission !== null && baseStore.currentProject?.maxPermission !== undefined && baseStore.currentProject.maxPermission > Permissions.READ)
 const menuActive = computed(() => baseStore.menuActive)
 
+// Standalone pages (no project) surface their route's title in the header.
+const route = useRoute()
+const { t } = useI18n()
+const pageTitle = computed(() => {
+	const title = route.meta.title as string | undefined
+	return title ? t(title) : ''
+})
+
 const authStore = useAuthStore()
 
 const configStore = useConfigStore()
 const imprintUrl = computed(() => configStore.legal.imprintUrl)
 const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
-const adminPanelEnabled = computed(() => configStore.isProFeatureEnabled('admin_panel'))
+const adminPanelEnabled = computed(() => configStore.isProFeatureEnabled(PRO_FEATURE.ADMIN_PANEL))
 </script>
 
 <style lang="scss" scoped>