From b8ad0cf77f243d4c5b6f4f62c70d44d0526c2340 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Thu, 24 Jul 2025 10:42:59 +0800
Subject: [PATCH] refactor empty state for network connection

---
 next-ui/src/components.d.ts                       |  1 +
 next-ui/src/components/EmptyStateNetworkError.vue | 11 +++++++++++
 next-ui/src/pages/account/api-keys.vue            |  8 ++------
 next-ui/src/pages/account/details.vue             |  8 ++------
 next-ui/src/pages/server/announcements.vue        |  8 ++------
 next-ui/src/pages/server/settings.vue             |  8 ++------
 next-ui/src/pages/server/updates.vue              |  8 ++------
 next-ui/src/pages/server/users.vue                |  7 +------
 8 files changed, 23 insertions(+), 36 deletions(-)
 create mode 100644 next-ui/src/components/EmptyStateNetworkError.vue

diff --git a/next-ui/src/components.d.ts b/next-ui/src/components.d.ts
index b4b8ec75..43c102e6 100644
--- a/next-ui/src/components.d.ts
+++ b/next-ui/src/components.d.ts
@@ -14,6 +14,7 @@ declare module 'vue' {
     AppFooter: typeof import('./components/AppFooter.vue')['default']
     DialogConfirm: typeof import('./components/dialog/Confirm.vue')['default']
     DialogConfirmEdit: typeof import('./components/dialog/ConfirmEdit.vue')['default']
+    EmptyStateNetworkError: typeof import('./components/EmptyStateNetworkError.vue')['default']
     FormattedMessage: typeof import('./components/FormattedMessage.ts')['default']
     FragmentApikeyGenerateDialog: typeof import('./fragments/fragment/apikey/GenerateDialog.vue')['default']
     FragmentApikeyTable: typeof import('./fragments/fragment/apikey/Table.vue')['default']
diff --git a/next-ui/src/components/EmptyStateNetworkError.vue b/next-ui/src/components/EmptyStateNetworkError.vue
new file mode 100644
index 00000000..eb2f237a
--- /dev/null
+++ b/next-ui/src/components/EmptyStateNetworkError.vue
@@ -0,0 +1,11 @@
+<template>
+  <v-empty-state
+    icon="i-mdi:connection"
+    :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
+    :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
+  />
+</template>
+
+<script setup lang="ts">
+import { commonMessages } from '@/utils/i18n/common-messages'
+</script>
diff --git a/next-ui/src/pages/account/api-keys.vue b/next-ui/src/pages/account/api-keys.vue
index 829e9dbb..7edef10e 100644
--- a/next-ui/src/pages/account/api-keys.vue
+++ b/next-ui/src/pages/account/api-keys.vue
@@ -3,12 +3,7 @@
     fluid
     class="pa-0 pa-sm-4"
   >
-    <v-empty-state
-      v-if="error"
-      icon="i-mdi:connection"
-      :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
-      :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
-    />
+    <EmptyStateNetworkError v-if="error" />
 
     <template v-else>
       <FragmentApikeyTable
@@ -42,6 +37,7 @@ import ForceSyncWarning from '@/components/apikey/ForceSyncWarning.vue'
 import { useApiKeys, useDeleteApiKey } from '@/colada/users'
 import { useDeleteSyncPoints } from '@/colada/syncpoints'
 import { useDisplay } from 'vuetify'
+import EmptyStateNetworkError from '@/components/EmptyStateNetworkError.vue'
 
 const intl = useIntl()
 const display = useDisplay()
diff --git a/next-ui/src/pages/account/details.vue b/next-ui/src/pages/account/details.vue
index 385128b6..42249427 100644
--- a/next-ui/src/pages/account/details.vue
+++ b/next-ui/src/pages/account/details.vue
@@ -3,12 +3,7 @@
     fluid
     class="pa-4"
   >
-    <v-empty-state
-      v-if="error"
-      icon="i-mdi:connection"
-      :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
-      :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
-    />
+    <EmptyStateNetworkError v-if="error" />
 
     <template v-else-if="currentUser">
       <UserDetails :user="currentUser">
@@ -40,6 +35,7 @@ import type { ErrorCause } from '@/api/komga-client'
 import { useMessagesStore } from '@/stores/messages'
 import { useIntl } from 'vue-intl'
 import { useDisplay } from 'vuetify'
+import EmptyStateNetworkError from '@/components/EmptyStateNetworkError.vue'
 
 const intl = useIntl()
 const display = useDisplay()
diff --git a/next-ui/src/pages/server/announcements.vue b/next-ui/src/pages/server/announcements.vue
index 80490e35..092b6bc8 100644
--- a/next-ui/src/pages/server/announcements.vue
+++ b/next-ui/src/pages/server/announcements.vue
@@ -5,12 +5,7 @@
       type="heading, text, paragraph@3"
     />
 
-    <v-empty-state
-      v-else-if="error"
-      icon="i-mdi:connection"
-      :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
-      :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
-    />
+    <EmptyStateNetworkError v-else-if="error" />
 
     <template v-else-if="announcements">
       <div
@@ -61,6 +56,7 @@
 <script lang="ts" setup>
 import { useAnnouncements, useMarkAnnouncementsRead } from '@/colada/announcements'
 import { commonMessages } from '@/utils/i18n/common-messages'
+import EmptyStateNetworkError from '@/components/EmptyStateNetworkError.vue'
 
 const { data: announcements, error, unreadCount, isPending } = useAnnouncements()
 
diff --git a/next-ui/src/pages/server/settings.vue b/next-ui/src/pages/server/settings.vue
index f40ece1f..92571b31 100644
--- a/next-ui/src/pages/server/settings.vue
+++ b/next-ui/src/pages/server/settings.vue
@@ -8,12 +8,8 @@
       v-if="isPending"
     />
 
-    <v-empty-state
-      v-else-if="error"
-      icon="i-mdi:connection"
-      :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
-      :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
-    />
+    <EmptyStateNetworkError v-else-if="error" />
+
     <template v-else-if="settings">
       <v-card max-width="600px">
         <v-card-text>
diff --git a/next-ui/src/pages/server/updates.vue b/next-ui/src/pages/server/updates.vue
index 63c9a84a..312ba74a 100644
--- a/next-ui/src/pages/server/updates.vue
+++ b/next-ui/src/pages/server/updates.vue
@@ -5,12 +5,7 @@
       type="heading, text, paragraph@3"
     />
 
-    <v-empty-state
-      v-else-if="error"
-      icon="i-mdi:connection"
-      :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
-      :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
-    />
+    <EmptyStateNetworkError v-else-if="error" />
 
     <template v-else-if="releases">
       <v-row>
@@ -64,6 +59,7 @@
 <script lang="ts" setup>
 import { useAppReleases } from '@/colada/app-releases'
 import { commonMessages } from '@/utils/i18n/common-messages'
+import EmptyStateNetworkError from '@/components/EmptyStateNetworkError.vue'
 
 const {
   data: releases,
diff --git a/next-ui/src/pages/server/users.vue b/next-ui/src/pages/server/users.vue
index bbbbd321..b50a5635 100644
--- a/next-ui/src/pages/server/users.vue
+++ b/next-ui/src/pages/server/users.vue
@@ -3,12 +3,7 @@
     fluid
     class="pa-0 pa-sm-4"
   >
-    <v-empty-state
-      v-if="error"
-      icon="i-mdi:connection"
-      :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
-      :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
-    />
+    <EmptyStateNetworkError v-if="error" />
 
     <template v-else>
       <FragmentUserTable