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

@@ -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()
 })

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()
       })
   }