chore: fix conflict

Author: graphieros

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["oxc.oxc-vscode", "Vue.volar"]
+  "recommendations": ["oxc.oxc-vscode", "Vue.volar", "lokalise.i18n-ally"]
 }

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "i18n-ally.localesPaths": ["./i18n/locales"],
+  "i18n-ally.keystyle": "nested"
+}

CONTRIBUTING.md

@@ -208,6 +208,89 @@ const props = defineProps<{
 
 Ideally, extract utilities into separate files so they can be unit tested. 🙏
 
+## Localization (i18n)
+
+npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization. We aim to make the UI accessible to users in their preferred language.
+
+### Approach
+
+- All user-facing strings should use translation keys via `$t()` in templates or `t()` in script
+- Translation files live in `i18n/locales/` (e.g., `en.json`)
+- We use the `no_prefix` strategy (no `/en/` or `/fr/` in URLs)
+- Locale preference is stored in cookies and respected on subsequent visits
+
+### Adding translations
+
+1. Add your translation key to `i18n/locales/en.json` first (English is the source of truth)
+2. Use the key in your component:
+
+   ```vue
+   <template>
+     <p>{{ $t('my.translation.key') }}</p>
+   </template>
+   ```
+
+   Or in script:
+
+   ```typescript
+   const { t } = useI18n()
+   const message = t('my.translation.key')
+   ```
+
+3. For dynamic values, use interpolation:
+
+   ```json
+   { "greeting": "Hello, {name}!" }
+   ```
+
+   ```vue
+   <p>{{ $t('greeting', { name: userName }) }}</p>
+   ```
+
+### Translation key conventions
+
+- Use dot notation for hierarchy: `section.subsection.key`
+- Keep keys descriptive but concise
+- Group related keys together
+- Use `common.*` for shared strings (loading, retry, close, etc.)
+- Use component-specific prefixes: `package.card.*`, `settings.*`, `nav.*`
+
+### Using i18n-ally (recommended)
+
+We recommend the [i18n-ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) VSCode extension for a better development experience:
+
+- Inline translation previews in your code
+- Auto-completion for translation keys
+- Missing translation detection
+- Easy navigation to translation files
+
+The extension is included in our workspace recommendations, so VSCode should prompt you to install it.
+
+### Adding a new locale
+
+1. Create a new JSON file in `i18n/locales/` (e.g., `fr.json`)
+2. Add the locale to `nuxt.config.ts`:
+
+   ```typescript
+   i18n: {
+     locales: [
+       { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
+       { code: 'fr', language: 'fr-FR', name: 'Francais', file: 'fr.json' },
+     ],
+   }
+   ```
+
+3. Translate all keys from `en.json`
+
+### Formatting with locale
+
+When formatting numbers or dates that should respect the user's locale, pass the locale:
+
+```typescript
+const { locale } = useI18n()
+const formatted = formatNumber(12345, locale.value) // "12,345" in en-US
+```
+
 ## Testing
 
 ### Unit tests

app/components/AppFooter.vue

@@ -85,35 +85,35 @@ onMounted(() => {
   >
     <div class="container py-2 sm:py-6 flex flex-col gap-1 sm:gap-3 text-fg-subtle text-sm">
       <div class="flex flex-row items-center justify-between gap-2 sm:gap-4">
-        <p class="font-mono m-0 hidden sm:block">a better browser for the npm registry</p>
+        <p class="font-mono m-0 hidden sm:block">{{ $t('tagline') }}</p>
         <!-- On mobile, show disclaimer here instead of tagline -->
-        <p class="text-xs text-fg-muted m-0 sm:hidden">not affiliated with npm, Inc.</p>
+        <p class="text-xs text-fg-muted m-0 sm:hidden">{{ $t('non_affiliation_disclaimer') }}</p>
         <div class="flex items-center gap-4 sm:gap-6">
           <a
             href="https://repo.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w- flex items-center"
           >
-            source
+            {{ $t('footer.source') }}
           </a>
           <a
             href="https://social.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
           >
-            social
+            {{ $t('footer.social') }}
           </a>
           <a
             href="https://chat.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
           >
-            chat
+            {{ $t('footer.chat') }}
           </a>
         </div>
       </div>
       <p class="text-xs text-fg-muted text-center sm:text-left m-0 hidden sm:block">
-        npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.
+        {{ $t('trademark_disclaimer') }}
       </p>
     </div>
   </footer>

app/components/AppHeader.vue

@@ -9,30 +9,36 @@ withDefaults(
     showConnector: true,
   },
 )
+
+const { isConnected, npmUser } = useConnector()
 </script>
 
 <template>
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
-    <nav aria-label="Main navigation" class="container h-14 flex items-center justify-between">
-      <NuxtLink
-        v-if="showLogo"
-        to="/"
-        aria-label="npmx home"
-        class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
-      >
-        <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
-      </NuxtLink>
-      <!-- Spacer when logo is hidden -->
-      <span v-else class="w-1" />
+    <nav aria-label="Main navigation" class="container h-14 flex items-center">
+      <!-- Left: Logo -->
+      <div class="flex-shrink-0">
+        <NuxtLink
+          v-if="showLogo"
+          to="/"
+          :aria-label="$t('header.home')"
+          class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+        >
+          <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
+        </NuxtLink>
+        <!-- Spacer when logo is hidden -->
+        <span v-else class="w-1" />
+      </div>
 
-      <ul class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0">
+      <!-- Center: Main nav items -->
+      <ul class="flex-1 flex items-center justify-center gap-4 sm:gap-6 list-none m-0 p-0">
         <li class="flex items-center">
           <NuxtLink
             to="/search"
             class="link-subtle font-mono text-sm inline-flex items-center gap-2"
             aria-keyshortcuts="/"
           >
-            search
+            {{ $t('nav.search') }}
             <kbd
               class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
               aria-hidden="true"
@@ -41,26 +47,38 @@ withDefaults(
             </kbd>
           </NuxtLink>
         </li>
-        <li class="flex items-center">
-          <ClientOnly>
-            <SettingsMenu />
-          </ClientOnly>
-        </li>
-        <li v-if="showConnector" class="flex items-center">
-          <ConnectorStatus />
+
+        <!-- Packages dropdown (when connected) -->
+        <li v-if="isConnected && npmUser" class="flex items-center">
+          <HeaderPackagesDropdown :username="npmUser" />
         </li>
-        <li v-else class="flex items-center">
-          <a
-            href="https://github.com/npmx-dev/npmx.dev"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-            aria-label="GitHub"
-          >
-            <span class="i-carbon-logo-github w-4 h-4" aria-hidden="true" />
-            <span class="hidden sm:inline" aria-hidden="true">github</span>
-          </a>
+
+        <!-- Orgs dropdown (when connected) -->
+        <li v-if="isConnected && npmUser" class="flex items-center">
+          <HeaderOrgsDropdown :username="npmUser" />
         </li>
       </ul>
+
+      <!-- Right: User status + GitHub -->
+      <div class="flex-shrink-0 flex items-center gap-6">
+        <ClientOnly>
+          <SettingsMenu />
+        </ClientOnly>
+
+        <div v-if="showConnector">
+          <ConnectorStatus />
+        </div>
+
+        <a
+          href="https://github.com/npmx-dev/npmx.dev"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="link-subtle"
+          :aria-label="$t('header.github')"
+        >
+          <span class="i-carbon-logo-github w-5 h-5" aria-hidden="true" />
+        </a>
+      </div>
     </nav>
   </header>
 </template>