Merge branch 'main' into feat/mobile-bottom-bar-nav

Author: Adebesin-Cell

app/components/Readme.vue

@@ -487,6 +487,20 @@ function handleClick(event: MouseEvent) {
   summary {
     font-size: 1rem;
     color: var(--fg-muted);
+
+    /* Markdown often wraps headings/paragraphs inside <summary>, which
+       forces them onto new lines. Inline them so the disclosure marker
+       sits next to the label while preserving heading styles. */
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6,
+    > p {
+      display: inline;
+      margin: 0;
+    }
   }
 }
 </style>

app/error.stories.ts

@@ -0,0 +1,79 @@
+import Error from './error.vue'
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import type { NuxtError } from '#app'
+
+const meta = {
+  title: 'pages/error',
+  component: Error,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Error>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Package, org, or page not found. */
+export const NotFound: Story = {
+  args: {
+    error: {
+      status: 404,
+    } as NuxtError,
+  },
+}
+
+/** Unauthorized access - shown when authentication is required. */
+export const Unauthorized: Story = {
+  args: {
+    error: {
+      status: 401,
+    } as NuxtError,
+  },
+}
+
+/** Generic server error with default message. */
+export const ServerError: Story = {
+  args: {
+    error: {
+      status: 500,
+    } as NuxtError,
+  },
+}
+
+/** Service unavailable - occurs when external services (jsDelivr, npm registry) fail. */
+export const ServiceUnavailable: Story = {
+  args: {
+    error: {
+      status: 503,
+    } as NuxtError,
+  },
+}
+
+export const Teapot: Story = {
+  args: {
+    error: {
+      status: 418,
+    } as NuxtError,
+  },
+}
+
+/** Error with a message. */
+export const WithMessage: Story = {
+  args: {
+    error: {
+      status: 404,
+      message: 'The page you are looking for does not exist.',
+    } as NuxtError,
+  },
+}
+
+/** Error with a detailed message to test text wrapping and layout. */
+export const LongMessage: Story = {
+  args: {
+    error: {
+      status: 500,
+      message:
+        'Internal server error. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique ex ac nisi dapibus maximus. Curabitur feugiat lorem eros, sed eleifend purus facilisis at.',
+    } as NuxtError,
+  },
+}

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',
-      },
-    ],
-  })
-})