feat: add ATimeEditInfo component

src/components/generic/ATimeEditInfo.vue

+<template>
+  <ATime :time="datetime">
+    {{
+      t(type === 'modified' ? 'editingMetadata.lastModified' : 'editingMetadata.created', {
+        time: timeString,
+        author: editInfo.author,
+      })
+    }}
+  </ATime>
+</template>
+
+<script lang="ts" setup>
+import { ensureDate, useIsToday, useRelativeDistanceToNow } from '@/util'
+import { computed } from 'vue'
+import { useNow } from '@vueuse/core'
+import { useI18n } from '@/i18n'
+import { usePretty } from '@/mixins/prettyDate'
+import ATime from '@/components/generic/ATime.vue'
+
+const props = defineProps<{
+  editInfo: { author: string; time: string | Date }
+  type: 'modified' | 'created'
+}>()
+
+const { t } = useI18n()
+const { prettyDate, prettyTime } = usePretty()
+const now = useNow({ interval: 60 * 1000 })
+const datetime = computed(() => ensureDate(props.editInfo.time))
+const isToday = useIsToday(datetime, now)
+const datetimeFormattedRelative = useRelativeDistanceToNow(datetime, { addSuffix: true })
+const timeString = computed(() =>
+  isToday.value
+    ? datetimeFormattedRelative.value
+    : t('editingMetadata.timeSpecific', {
+        date: prettyDate(datetime.value),
+        time: prettyTime(datetime.value),
+      }),
+)
+</script>

src/i18n/de.js

@@ -558,6 +558,12 @@ export default {
     },
   },
 
+  editingMetadata: {
+    timeSpecific: 'am %{date} um %{time} Uhr',
+    lastModified: 'Letzte Änderung %{time} von %{author}.',
+    created: 'Angelegt %{time} von %{author}.',
+  },
+
   calendar: {
     today: 'Heute',
     empty: 'Keine Playlist',

src/i18n/en.js

@@ -549,6 +549,12 @@ export default {
     },
   },
 
+  editingMetadata: {
+    timeSpecific: 'on %{date} at %{time}',
+    lastModified: 'Last modified %{time} by %{author}.',
+    created: 'Created %{time} by %{author}.',
+  },
+
   calendar: {
     today: 'Today',
     empty: 'No playlist',