From e2ac132fb097798fc6bde8d988985c7d929d552b Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Thu, 26 Jun 2025 14:02:08 +0800
Subject: [PATCH] extract announcement card as component

---
 next-ui/.storybook/StoryWrapper.vue           |  4 ++
 next-ui/src/components.d.ts                   |  1 +
 .../components/announcement/Card.stories.ts   | 66 +++++++++++++++++++
 next-ui/src/components/announcement/Card.vue  | 64 ++++++++++++++++++
 next-ui/src/pages/server/announcements.vue    | 56 ++--------------
 5 files changed, 140 insertions(+), 51 deletions(-)
 create mode 100644 next-ui/src/components/announcement/Card.stories.ts
 create mode 100644 next-ui/src/components/announcement/Card.vue

diff --git a/next-ui/.storybook/StoryWrapper.vue b/next-ui/.storybook/StoryWrapper.vue
index 2659d78c..9ece9c85 100644
--- a/next-ui/.storybook/StoryWrapper.vue
+++ b/next-ui/.storybook/StoryWrapper.vue
@@ -15,3 +15,7 @@ export default {
   },
 }
 </script>
+
+<style>
+@import '../src/styles/global.scss';
+</style>
diff --git a/next-ui/src/components.d.ts b/next-ui/src/components.d.ts
index e122b8c2..8d92a267 100644
--- a/next-ui/src/components.d.ts
+++ b/next-ui/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AnnouncementCard: typeof import('./components/announcement/Card.vue')['default']
     AppFooter: typeof import('./components/AppFooter.vue')['default']
     DialogConfirm: typeof import('./components/dialog/Confirm.vue')['default']
     DialogConfirmEdit: typeof import('./components/dialog/ConfirmEdit.vue')['default']
diff --git a/next-ui/src/components/announcement/Card.stories.ts b/next-ui/src/components/announcement/Card.stories.ts
new file mode 100644
index 00000000..5d206ee4
--- /dev/null
+++ b/next-ui/src/components/announcement/Card.stories.ts
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import Card from './Card.vue'
+import { expect, fn } from 'storybook/test'
+
+const meta = {
+  component: Card,
+  render: (args: object) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: '<Card :item="args.item"/>',
+  }),
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+  },
+  args: {
+    onMarkRead: fn(),
+  },
+} satisfies Meta<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Unread: Story = {
+  args: {
+    item: {
+      id: 'https://komga.org/blog/ebook-drop2',
+      url: 'https://komga.org/blog/ebook-drop2',
+      title: 'eBook drop 2',
+      summary: 'Version 1.9.0 contains the second feature drop for Ebooks support.',
+      content_html:
+        '<p>Version <a href="https://github.com/gotson/komga/releases/tag/1.9.0" target="_blank" rel="noopener noreferrer">1.9.0</a> contains the second feature drop for Ebooks support.</p>\n<p>It brings nice additions to the initial release, most notably the read progress will be kept when reading and restored, same as with other books.</p>\n<p>The analysis process of EPUB files was also revamped, and some EPUB files that were not analyzed before should be working fine now.</p>\n<p>While the first release forced all the EPUB files through the Epub Reader, this release brings back compatibility with the Divina Reader for pre-paginated EPUB files containing only images. This also restores support for the Pages API, and thus the compatibility with Tachiyomi, or any OPDS-PSE client.</p>\n<p>Head over to the <a href="https://github.com/gotson/komga/releases/tag/1.9.0" target="_blank" rel="noopener noreferrer">Release Notes</a> for more details on all the new features and fixes.</p>',
+      date_modified: new Date('2023-12-15T00:00:00Z'),
+      author: {
+        name: 'gotson',
+        url: 'https://github.com/gotson',
+      },
+      tags: ['upgrade', 'komga'],
+      _komga: {
+        read: false,
+      },
+    },
+  },
+  play: async ({ args, canvas, userEvent }) => {
+    await expect(canvas.getByRole('button')).toBeEnabled()
+
+    await userEvent.click(canvas.getByRole('button'))
+    await expect(args.onMarkRead).toHaveBeenCalledWith(args.item.id)
+  },
+}
+
+export const Read: Story = {
+  args: {
+    item: {
+      ...Unread.args?.item,
+      _komga: {
+        read: true,
+      },
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole('button')).toBeDisabled()
+  },
+}
diff --git a/next-ui/src/components/announcement/Card.vue b/next-ui/src/components/announcement/Card.vue
new file mode 100644
index 00000000..5357da86
--- /dev/null
+++ b/next-ui/src/components/announcement/Card.vue
@@ -0,0 +1,64 @@
+<template>
+  <v-card>
+    <template #title>
+      <a
+        :href="item.url"
+        target="_blank"
+        class="text-h3 font-weight-medium link-underline"
+        >{{ item.title }}</a
+      >
+    </template>
+    <template #subtitle>
+      {{ $formatDate(item.date_modified, { dateStyle: 'long' }) }}
+    </template>
+
+    <template #text>
+      <!-- eslint-disable vue/no-v-html -->
+      <div
+        class="announcement"
+        v-html="item.content_html"
+      />
+      <!-- eslint-enable vue/no-v-html -->
+    </template>
+
+    <template #actions>
+      <v-spacer />
+      <v-btn
+        :text="
+          $formatMessage({
+            description: 'Announcements view: mark as read button tooltip',
+            defaultMessage: 'Mark as read',
+            id: 'sUSVQS',
+          })
+        "
+        :disabled="item._komga?.read"
+        @click="emit('markRead', item.id)"
+      />
+    </template>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import type { components } from '@/generated/openapi/komga'
+
+const { item } = defineProps<{
+  item: components['schemas']['ItemDto']
+}>()
+const emit = defineEmits<{
+  markRead: [id: string]
+}>()
+</script>
+
+<style lang="scss">
+.announcement p {
+  margin-bottom: 16px;
+}
+
+.announcement ul {
+  padding-left: 24px;
+}
+
+.announcement a {
+  color: var(--v-anchor-base);
+}
+</style>
diff --git a/next-ui/src/pages/server/announcements.vue b/next-ui/src/pages/server/announcements.vue
index 6e9504cd..49a75e55 100644
--- a/next-ui/src/pages/server/announcements.vue
+++ b/next-ui/src/pages/server/announcements.vue
@@ -16,43 +16,11 @@
       v-for="(item, index) in announcements.items"
       :key="index"
     >
-      <v-card class="mb-4">
-        <template #title>
-          <a
-            :href="item.url"
-            target="_blank"
-            class="text-h3 font-weight-medium link-underline"
-            >{{ item.title }}</a
-          >
-        </template>
-        <template #subtitle>
-          {{ $formatDate(item.date_modified, { dateStyle: 'long' }) }}
-        </template>
-
-        <template #text>
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            class="announcement"
-            v-html="item.content_html"
-          />
-          <!-- eslint-enable vue/no-v-html -->
-        </template>
-
-        <template #actions>
-          <v-spacer />
-          <v-btn
-            :text="
-              $formatMessage({
-                description: 'Announcements view: mark as read button tooltip',
-                defaultMessage: 'Mark as read',
-                id: 'sUSVQS',
-              })
-            "
-            :disabled="item._komga?.read"
-            @click="markRead(item.id)"
-          />
-        </template>
-      </v-card>
+      <AnnouncementCard
+        class="mb-4"
+        :item="item"
+        @mark-read="markRead"
+      />
 
       <div
         v-if="index == announcements.items.length - 1"
@@ -105,20 +73,6 @@ function markRead(id: string) {
 }
 </script>
 
-<style lang="scss">
-.announcement p {
-  margin-bottom: 16px;
-}
-
-.announcement ul {
-  padding-left: 24px;
-}
-
-.announcement a {
-  color: var(--v-anchor-base);
-}
-</style>
-
 <route lang="yaml">
 meta:
   requiresRole: ADMIN