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>

frontend/layouts/default.vue

@@ -16,6 +16,7 @@ const route = useRoute()
 const auth = useAuthStore()
 const labelPrinter = useLabelPrinterStore()
 const calculatorStore = useCalculatorStore()
+const { hasUnread, refresh: refreshChangelog } = useChangelog()
 
 const month = dayjs().format("MM")
 
@@ -114,7 +115,7 @@ const groups = computed(() => [
 ].filter(Boolean))
 
 // --- Footer Links nutzen jetzt den zentralen Calculator Store ---
-const footerLinks = computed(() => [
+const footerItems = computed(() => [
   {
     label: 'Taschenrechner',
     icon: 'i-heroicons-calculator',
@@ -123,10 +124,15 @@ const footerLinks = computed(() => [
   {
     label: 'Hilfe & Info',
     icon: 'i-heroicons-question-mark-circle',
+    badge: hasUnread.value ? 'Neu' : null,
     click: () => isHelpSlideoverOpen.value = true
   }
 ])
 
+onMounted(() => {
+  void refreshChangelog()
+})
+
 </script>
 
 <template>
@@ -256,7 +262,25 @@ const footerLinks = computed(() => [
               <UColorModeToggle class="ml-3"/>
               <LabelPrinterButton class="w-full"/>
 
-              <UDashboardSidebarLinks :links="footerLinks" class="w-full"/>
+              <div class="flex flex-col gap-1">
+                <UButton
+                    v-for="item in footerItems"
+                    :key="item.label"
+                    color="gray"
+                    variant="ghost"
+                    class="w-full"
+                    :icon="item.icon"
+                    @click="item.click ? item.click() : null"
+                >
+                  {{ item.label }}
+
+                  <template #trailing>
+                    <UBadge v-if="item.badge" color="primary" variant="solid" size="xs">
+                      {{ item.badge }}
+                    </UBadge>
+                  </template>
+                </UButton>
+              </div>
 
               <UDivider class="sticky bottom-0 w-full"/>
               <UserDropdown style="margin-bottom: env(safe-area-inset-bottom, 10px) !important;" class="w-full"/>