docs(ui): add stories for Translation Status page (#2559)

Author: cylewaitforit

app/pages/settings.stories.ts

@@ -2,7 +2,7 @@ import Settings from './settings.vue'
 import type { Meta, StoryObj } from '@storybook-vue/nuxt'
 import { userEvent, expect } from 'storybook/test'
 import { pageDecorator } from '../../.storybook/decorators'
-import { i18nStatusHandler } from '../storybook/mocks/handlers'
+import { i18nStatusHandler } from '../storybook/mocks/handlers/lunaria-status'
 
 const meta = {
   component: Settings,

app/pages/translation-status.stories.ts

@@ -0,0 +1,30 @@
+import TranslationStatus from './translation-status.vue'
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import { pageDecorator } from '../../.storybook/decorators'
+import { i18nStatusHandler } from '../storybook/mocks/handlers/lunaria-status'
+
+const meta = {
+  component: TranslationStatus,
+  parameters: {
+    layout: 'fullscreen',
+    msw: {
+      handlers: [i18nStatusHandler],
+    },
+  },
+  decorators: [pageDecorator],
+} satisfies Meta<typeof TranslationStatus>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** `/lunaria/status.json` is intercepted by MSW. Showing a variety of completion level translation statuses for a subset of locales. */
+export const Default: Story = {}
+
+/** No API response — the fetch never succeeds so `fetchStatus` stays as `'pending'`. Shows skeleton blocks in the locale list and skeleton inlines in body text. */
+export const WithoutTranslationData: Story = {
+  parameters: {
+    msw: {
+      handlers: [],
+    },
+  },
+}

app/storybook/mocks/handlers.ts

@@ -91,68 +91,3 @@ export const pdsUsersHandler = http.get('/api/atproto/pds-users', () => {
     },
   ])
 })
-
-export const i18nStatusHandler = http.get('/lunaria/status.json', () => {
-  return HttpResponse.json({
-    generatedAt: '2026-01-22T10:07:07.000Z',
-    sourceLocale: {
-      lang: 'en',
-      label: 'English',
-      totalKeys: 500,
-    },
-    locales: [
-      {
-        lang: 'en-GB',
-        label: 'English (UK)',
-        dir: 'ltr',
-        totalKeys: 500,
-        completedKeys: 423,
-        percentComplete: 84,
-        missingKeys: [
-          'settings.background_themes.label',
-          'settings.enable_graph_pulse_loop',
-          'settings.enable_graph_pulse_loop_description',
-          'settings.data_source.algolia_description',
-          'settings.data_source.npm_description',
-          'i18n.contribute_hint',
-          'i18n.copy_keys',
-        ],
-        githubEditUrl: 'https://github.com/npmx-dev/npmx.dev/edit/main/i18n/locales/en-GB.json',
-        githubHistoryUrl:
-          'https://github.com/npmx-dev/npmx.dev/commits/main/i18n/locales/en-GB.json',
-      },
-      {
-        lang: 'fr-FR',
-        label: 'Français',
-        dir: 'ltr',
-        totalKeys: 500,
-        completedKeys: 423,
-        percentComplete: 84,
-        missingKeys: [
-          'settings.background_themes.label',
-          'settings.enable_graph_pulse_loop',
-          'settings.enable_graph_pulse_loop_description',
-          'settings.data_source.algolia_description',
-          'settings.data_source.npm_description',
-          'i18n.contribute_hint',
-          'i18n.copy_keys',
-        ],
-        githubEditUrl: 'https://github.com/npmx-dev/npmx.dev/edit/main/i18n/locales/fr-FR.json',
-        githubHistoryUrl:
-          'https://github.com/npmx-dev/npmx.dev/commits/main/i18n/locales/fr-FR.json',
-      },
-      {
-        lang: 'de-DE',
-        label: 'Deutsch',
-        dir: 'ltr',
-        totalKeys: 500,
-        completedKeys: 500,
-        percentComplete: 100,
-        missingKeys: [],
-        githubEditUrl: 'https://github.com/npmx-dev/npmx.dev/edit/main/i18n/locales/de-DE.json',
-        githubHistoryUrl:
-          'https://github.com/npmx-dev/npmx.dev/commits/main/i18n/locales/de-DE.json',
-      },
-    ],
-  })
-})