From e384635da5e52d1090647e0968d1cfa5af6eb792 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Mon, 5 May 2025 13:53:33 +0200
Subject: [PATCH] Refactor last updated handling and add tooltips for
 timestamps

Moved `lastUpdated` assignment to appropriate API call logic and replaced `lastUpdatedSeconds` with a computed property driven by a reactive `now` value. Added tooltips to display localized date formats for "Last updated" and "Last Mirror sync" timestamps, enhancing UX.
---
 frontend/src/components/CurrentlyBuilding.vue | 30 ++++++++++++++++---
 frontend/src/stores/packagesStore.ts          |  2 +-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/CurrentlyBuilding.vue b/frontend/src/components/CurrentlyBuilding.vue
index 8482d0e..cc671b4 100644
--- a/frontend/src/components/CurrentlyBuilding.vue
+++ b/frontend/src/components/CurrentlyBuilding.vue
@@ -51,10 +51,24 @@
             <span>
               Last updated
               {{ formatTimeAgo(lastUpdatedSeconds) }}
+              <v-tooltip activator="parent" location="start">
+                {{
+                  unixTimestampToLocalizedDate(
+                    Math.floor((packagesStore.state.lastUpdated || Date.now()) / 1000)
+                  )
+                }}
+              </v-tooltip>
             </span>
             <span>
               Last Mirror sync
               {{ formatTimeAgo(lastMirrorSync) }}
+              <v-tooltip activator="parent" location="start">
+                {{
+                  unixTimestampToLocalizedDate(
+                    statsStore.state.stats?.last_mirror_timestamp || Math.floor(Date.now() / 1000)
+                  )
+                }}
+              </v-tooltip>
             </span>
           </div>
 
@@ -96,19 +110,22 @@ const statsStore = useStatsStore()
 const packagesStore = usePackagesStore()
 
 const { mobile } = useDisplay()
-const lastUpdatedSeconds = ref(0)
 const rtf = new Intl.RelativeTimeFormat('en', {
   localeMatcher: 'best fit',
   numeric: 'always',
   style: 'long'
 })
 
+const now = ref(Math.floor(Date.now() / 1000))
+
 const updateFailed = computed(
   () => !!packagesStore.state.errorCurrentlyBuilding || !!statsStore.state.error
 )
+const lastUpdatedSeconds = computed(
+  () => now.value - Math.floor((packagesStore.state.lastUpdated || Date.now()) / 1000)
+)
 const lastMirrorSync = computed(
-  () =>
-    Math.floor(Date.now() / 1000) - (statsStore.state.stats?.last_mirror_timestamp || Date.now())
+  () => now.value - (statsStore.state.stats?.last_mirror_timestamp || Math.floor(Date.now() / 1000))
 )
 
 const packageArrays = reactive({
@@ -129,7 +146,7 @@ const packageArrays = reactive({
 let updateTimer: number | undefined
 const startLastUpdatedTimer = () => {
   updateTimer = window.setInterval(() => {
-    lastUpdatedSeconds.value++
+    now.value = Math.floor(Date.now() / 1000)
   }, 1000)
 }
 
@@ -143,6 +160,11 @@ const formatTimeAgo = (seconds: number): string => {
   }
 }
 
+function unixTimestampToLocalizedDate(timestamp: number): string {
+  const date = new Date(timestamp * 1000) // convert to milliseconds
+  return date.toLocaleString(navigator.language)
+}
+
 onMounted(() => {
   startLastUpdatedTimer()
 })
diff --git a/frontend/src/stores/packagesStore.ts b/frontend/src/stores/packagesStore.ts
index 157598c..28c46c6 100644
--- a/frontend/src/stores/packagesStore.ts
+++ b/frontend/src/stores/packagesStore.ts
@@ -80,7 +80,6 @@ export const usePackagesStore = defineStore('packages', () => {
       })
       .finally(() => {
         state.loading = false
-        state.lastUpdated = Date.now()
       })
   }
 
@@ -108,6 +107,7 @@ export const usePackagesStore = defineStore('packages', () => {
       })
       .finally(() => {
         state.loadingCurrentlyBuilding = false
+        state.lastUpdated = Date.now()
       })
   }