Added Repository Changelog

frontend/components/HelpSlideover.vue

@@ -1,6 +1,9 @@
 <script setup>
+import dayjs from 'dayjs'
+
 const { isHelpSlideoverOpen } = useDashboard()
 const { metaSymbol } = useShortcuts()
+const { entries, pending, error, seenState, refresh, markAsSeen } = useChangelog()
 
 const shortcuts = ref(false)
 const query = ref('')
@@ -133,6 +136,21 @@ const resetContactRequest = () => {
     title: "",
   }
 }
+
+const lastOpenedLabel = computed(() => {
+  if (!seenState.value.lastOpenedAt) return 'Noch nicht geöffnet'
+
+  return dayjs(seenState.value.lastOpenedAt).format('DD.MM.YYYY HH:mm')
+})
+
+const changelogEntries = computed(() => entries.value.slice(0, 12))
+
+watch(isHelpSlideoverOpen, async (isOpen) => {
+  if (!isOpen || shortcuts.value) return
+
+  await refresh(true)
+  markAsSeen()
+})
 </script>
 
 <template>
@@ -171,8 +189,71 @@ const resetContactRequest = () => {
         </div>
       </div>
     </div>
-    <div v-else class="flex flex-col gap-y-3">
-      <UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
+    <div v-else class="flex flex-col gap-y-6">
+      <div class="flex flex-col gap-y-3">
+        <UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
+      </div>
+
+      <UCard>
+        <div class="flex items-center justify-between gap-3">
+          <div>
+            <p class="text-base font-semibold text-gray-900 dark:text-white">
+              Changelog
+            </p>
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+              Zuletzt geöffnet: {{ lastOpenedLabel }}
+            </p>
+          </div>
+
+          <UButton
+              icon="i-heroicons-arrow-path"
+              color="gray"
+              variant="ghost"
+              :loading="pending"
+              @click="refresh(true)"
+          />
+        </div>
+
+        <UAlert
+            v-if="error"
+            class="mt-4"
+            color="red"
+            variant="soft"
+            title="Changelog konnte nicht geladen werden"
+            :description="error"
+        />
+
+        <div v-else-if="pending && !changelogEntries.length" class="mt-4">
+          <UProgress animation="carousel"/>
+        </div>
+
+        <div v-else-if="changelogEntries.length" class="mt-4 flex flex-col gap-3">
+          <div
+              v-for="entry in changelogEntries"
+              :key="entry.hash"
+              class="rounded-lg border border-gray-200 dark:border-gray-800 p-3"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <p class="font-medium text-gray-900 dark:text-white break-words">
+                  {{ entry.subject }}
+                </p>
+                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                  {{ entry.authorName }} · {{ dayjs(entry.committedAt).format('DD.MM.YYYY HH:mm') }}
+                </p>
+              </div>
+
+              <UBadge color="gray" variant="subtle">
+                {{ entry.shortHash }}
+              </UBadge>
+            </div>
+          </div>
+        </div>
+
+        <p v-else class="mt-4 text-sm text-gray-500 dark:text-gray-400">
+          Es sind noch keine Changelog-Einträge verfügbar.
+        </p>
+      </UCard>
     </div>
 <!--    <div class="mt-5" v-if="!loadingContactRequest">
       <h1 class="font-semibold">Kontaktanfrage:</h1>