Merge branch 'main' into main

Author: abhi123vj

.storybook/handlers.ts

@@ -91,3 +91,68 @@ 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',
+      },
+    ],
+  })
+})

.storybook/preview-head.html

@@ -61,3 +61,19 @@
     background-color: var(--bg, oklch(0.171 0 0)) !important;
   }
 </style>
+<script>
+  // related: https://github.com/npmx-dev/npmx.dev/blob/1431d24be555bca5e1ae6264434d49ca15173c43/test/nuxt/setup.ts#L12-L26
+  // Stub Nuxt specific globals
+  // @nuxtjs/color-mode's plugin.client.js reads window[globalName] at module
+  // evaluation time — before any Storybook setup() callback runs — so the
+  // global must exist in the HTML head, not in preview.ts.
+  window.__NUXT_COLOR_MODE__ ??= {
+    preference: 'system',
+    value: 'dark',
+    getColorScheme: function () {
+      return 'dark'
+    },
+    addColorScheme: function () {},
+    removeColorScheme: function () {},
+  }
+</script>

.storybook/preview.ts

@@ -10,16 +10,6 @@ import npmxDark from './theme'
 
 initialize()
 
-// related: https://github.com/npmx-dev/npmx.dev/blob/1431d24be555bca5e1ae6264434d49ca15173c43/test/nuxt/setup.ts#L12-L26
-// Stub Nuxt specific globals
-// @ts-expect-error - dynamic global name
-globalThis['__NUXT_COLOR_MODE__'] ??= {
-  preference: 'system',
-  value: 'dark',
-  getColorScheme: fn(() => 'dark'),
-  addColorScheme: fn(),
-  removeColorScheme: fn(),
-}
 // @ts-expect-error - dynamic global name
 globalThis.defineOgImageComponent = fn()
 

app/pages/settings.stories.ts

@@ -0,0 +1,55 @@
+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/handlers'
+
+const meta = {
+  component: Settings,
+  globals: {
+    locale: 'en-US',
+  },
+  beforeEach: () => localStorage.removeItem('npmx-settings'),
+  parameters: {
+    layout: 'fullscreen',
+    msw: {
+      handlers: [i18nStatusHandler],
+    },
+  },
+  decorators: [pageDecorator],
+} satisfies Meta<typeof Settings>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** English locale (default). The Language section shows a GitHub link to help translate the site. */
+export const Default: Story = {}
+
+export const NpmRegistryDataSource: Story = {
+  play: async ({ canvas, step }) => {
+    await step('Select npm registry as the data source', async () => {
+      const select = await canvas.findByRole('combobox', { name: /data source/i })
+      await userEvent.selectOptions(select, 'npm')
+      await expect(select).toHaveValue('npm')
+    })
+  },
+}
+
+/** Non-English locale with incomplete translations. The Language section shows `SettingsTranslationHelper` with a progress bar and list of missing translation keys. `/lunaria/status.json` is intercepted by MSW to provide mock translation status data. */
+export const NonEnglishTranslationHelper: Story = {
+  globals: {
+    locale: 'fr-FR',
+  },
+}
+
+/** Non-English locale without translations API response. The Language section shows a GitHub link to help translate the site. */
+export const WithoutTranslationHelper: Story = {
+  globals: {
+    locale: 'fr-FR',
+  },
+  parameters: {
+    msw: {
+      handlers: [],
+    },
+  },
+}

i18n/locales/fr-FR.json

@@ -252,6 +252,7 @@
     "hide_platform_packages_description": "Masquer les paquets binaires natifs comme {'@'}esbuild/linux-x64 des résultats",
     "enable_graph_pulse_loop": "Activer la boucle de l'effet de pulsation sur le mini-graphe",
     "enable_graph_pulse_loop_description": "Activer une animation de pulsation continue sur le graphique des téléchargements hebdomadaires. Cette animation peut être gênante pour certaines personnes.",
+    "enable_code_ligatures": "Activer les ligatures de code",
     "theme": "Thème",
     "theme_light": "Clair",
     "theme_dark": "Sombre",
@@ -339,7 +340,9 @@
       "tangled": "Voir sur Tangled"
     },
     "collapse": "Réduire",
-    "expand": "Développer"
+    "expand": "Développer",
+    "collapse_with_name": "Réduire {name}",
+    "expand_with_name": "Développer {name}"
   },
   "profile": {
     "display_name": "Nom d'affichage",
@@ -960,6 +963,7 @@
       "preview": "aperçu",
       "code": "code"
     },
+    "open_path_dropdown": "Ouvrir le menu du chemin",
     "file_path": "Chemin du fichier",
     "binary_file": "Fichier binaire",
     "binary_rendering_warning": "Le type de fichier \"{contentType}\" n'est pas pris en charge pour l'aperçu."
@@ -1318,6 +1322,18 @@
         "vulnerabilities": {
           "label": "Vulnérabilités",
           "description": "Vulnérabilités de sécurité connues"
+        },
+        "githubStars": {
+          "label": "Étoiles GitHub",
+          "description": "Nombre d’étoiles du dépôt GitHub"
+        },
+        "githubIssues": {
+          "label": "Issues GitHub",
+          "description": "Nombre d’issues ouvertes sur GitHub"
+        },
+        "createdAt": {
+          "label": "Date de création",
+          "description": "Date de création du paquet"
         }
       },
       "values": {