extract release card as component

next-ui/src/components.d.ts

@@ -30,6 +30,7 @@ declare module 'vue' {
     LayoutAppDrawerMenuLogout: typeof import('./fragments/layout/app/drawer/menu/Logout.vue')['default']
     LayoutAppDrawerMenuMedia: typeof import('./fragments/layout/app/drawer/menu/Media.vue')['default']
     LayoutAppDrawerMenuServer: typeof import('./fragments/layout/app/drawer/menu/Server.vue')['default']
+    ReleaseCard: typeof import('./components/release/Card.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     UserDeletionWarning: typeof import('./components/user/DeletionWarning.vue')['default']

next-ui/src/components/release/Card.stories.ts

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import Card from './Card.vue'
+
+const meta = {
+  component: Card,
+  render: (args: object) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: '<Card :release="args.release"/>',
+  }),
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+  },
+  args: {},
+} satisfies Meta<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    release: {
+      version: '1.21.1',
+      releaseDate: new Date('2025-03-06T07:31:00Z'),
+      url: 'https://github.com/gotson/komga/releases/tag/1.21.1',
+      latest: false,
+      preRelease: false,
+      description:
+        "## Changelog\n\n## 🐛 Fixes\n**api**\n- book import would return incorrect matched series ([10e0bde](https://github.com/gotson/komga/commits/10e0bde))\n\n\n## Contributors\nWe'd like to thank the following people for their contributions:\nGauthier Roebroeck",
+    },
+  },
+}
+
+export const Latest: Story = {
+  args: {
+    ...Default.args,
+    latest: true,
+  },
+}
+
+export const Current: Story = {
+  args: {
+    ...Default.args,
+    current: true,
+  },
+}
+
+export const LatestAndCurrent: Story = {
+  args: {
+    ...Default.args,
+    latest: true,
+    current: true,
+  },
+}

next-ui/src/components/release/Card.vue

@@ -0,0 +1,86 @@
+<template>
+  <v-card>
+    <template #title>
+      <div>
+        <a
+          :href="release.url"
+          target="_blank"
+          class="text-h4 font-weight-medium link-underline me-2"
+          >{{ release.version }}</a
+        >
+        <v-chip
+          v-if="current"
+          class="mx-2 mt-n3"
+          size="small"
+          rounded
+          color="info"
+        >
+          {{
+            $formatMessage({
+              description:
+                'Updates view: badge showing next to the currently installed release number',
+              defaultMessage: 'Currently installed',
+              id: '3jrAF6',
+            })
+          }}
+        </v-chip>
+        <v-chip
+          v-if="latest"
+          class="mx-2 mt-n3"
+          size="small"
+          rounded
+        >
+          {{
+            $formatMessage({
+              description: 'Updates view: badge showing next to the latest release number',
+              defaultMessage: 'Latest',
+              id: '2Bh8F2',
+            })
+          }}
+        </v-chip>
+      </div>
+    </template>
+
+    <template #subtitle>
+      {{ $formatDate(release.releaseDate, { dateStyle: 'long' }) }}
+    </template>
+
+    <template #text>
+      <!-- eslint-disable vue/no-v-html -->
+      <div
+        class="release"
+        v-html="marked(release.description)"
+      />
+      <!-- eslint-enable vue/no-v-html -->
+    </template>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import type { components } from '@/generated/openapi/komga'
+import { marked } from 'marked'
+
+const {
+  release,
+  latest = false,
+  current = false,
+} = defineProps<{
+  release: components['schemas']['ReleaseDto']
+  latest?: boolean
+  current?: boolean
+}>()
+</script>
+
+<style lang="scss">
+.release p {
+  margin-bottom: 16px;
+}
+
+.release ul {
+  padding-left: 24px;
+}
+
+.release a {
+  color: var(--v-anchor-base);
+}
+</style>

next-ui/src/pages/server/announcements.vue

@@ -22,6 +22,7 @@
         @mark-read="markRead"
       />
 
+      <!--  Bottom spacing for the FAB  -->
       <div
         v-if="index == announcements.items.length - 1"
         class="mb-16"

next-ui/src/pages/server/updates.vue

@@ -49,68 +49,18 @@
       v-for="(release, index) in releases"
       :key="index"
     >
-      <v-card class="my-4">
-        <template #title>
-          <div>
-            <a
-              :href="release.url"
-              target="_blank"
-              class="text-h4 font-weight-medium link-underline me-2"
-              >{{ release.version }}</a
-            >
-            <v-chip
-              v-if="release.version == currentVersion"
-              class="mx-2 mt-n3"
-              size="small"
-              rounded
-              color="info"
-            >
-              {{
-                $formatMessage({
-                  description:
-                    'Updates view: badge showing next to the currently installed release number',
-                  defaultMessage: 'Currently installed',
-                  id: '3jrAF6',
-                })
-              }}
-            </v-chip>
-            <v-chip
-              v-if="release.version == latest?.version"
-              class="mx-2 mt-n3"
-              size="small"
-              rounded
-            >
-              {{
-                $formatMessage({
-                  description: 'Updates view: badge showing next to the latest release number',
-                  defaultMessage: 'Latest',
-                  id: '2Bh8F2',
-                })
-              }}
-            </v-chip>
-          </div>
-        </template>
-
-        <template #subtitle>
-          {{ $formatDate(release.releaseDate, { dateStyle: 'long' }) }}
-        </template>
-
-        <template #text>
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            class="release"
-            v-html="marked(release.description)"
-          />
-          <!-- eslint-enable vue/no-v-html -->
-        </template>
-      </v-card>
+      <ReleaseCard
+        :release="release"
+        :current="release.version == currentVersion"
+        :latest="release.version == latest?.version"
+        class="my-4"
+      />
     </div>
   </template>
 </template>
 
 <script lang="ts" setup>
 import { useAppReleases } from '@/colada/queries/app-releases'
-import { marked } from 'marked'
 import { commonMessages } from '@/utils/i18n/common-messages'
 
 const {
@@ -123,20 +73,6 @@ const {
 } = useAppReleases()
 </script>
 
-<style lang="scss">
-.release p {
-  margin-bottom: 16px;
-}
-
-.release ul {
-  padding-left: 24px;
-}
-
-.release a {
-  color: var(--v-anchor-base);
-}
-</style>
-
 <route lang="yaml">
 meta:
   requiresRole: ADMIN