From 8d02c3ecfe0f0514f8e878abdd467a296f54b307 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:50:27 -0400
Subject: [PATCH 1/5] feat: reorganize footer links into
 product/legal/community columns (#1364)

---
 app/components/AppFooter.vue | 56 ++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 32 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 6955352350..250e61fd91 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -20,27 +20,17 @@ const closeModal = () => modalRef.value?.close?.()
           </p>
           <BuildEnvironment v-if="!isHome" footer />
         </div>
-        <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
-        <div class="hidden sm:flex flex-col lg:items-end gap-3 min-h-11 text-xs">
-          <div class="flex items-center gap-5">
-            <LinkBase :to="{ name: 'about' }">
-              {{ $t('footer.about') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'blog' }">
-              {{ $t('footer.blog') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'privacy' }">
-              {{ $t('privacy_policy.title') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'accessibility' }">
-              {{ $t('a11y.footer_title') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'translation-status' }">
-              {{ $t('translation_status.title') }}
-            </LinkBase>
+        <!-- Desktop: Show all links in columns. Mobile: Links are in MobileMenu -->
+        <div class="hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-1 min-h-11 text-xs">
+          <!-- Column 1: Product -->
+          <div class="flex flex-col gap-1">
+            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.product') }}</span>
+            <LinkBase :to="{ name: 'about' }">{{ $t('footer.about') }}</LinkBase>
+            <LinkBase :to="{ name: 'blog' }">{{ $t('footer.blog') }}</LinkBase>
+            <LinkBase :to="NPMX_DOCS_SITE">{{ $t('footer.docs') }}</LinkBase>
             <button
               type="button"
-              class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+              class="text-start cursor-pointer inline-flex gap-x-1 items-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
               @click.prevent="showModal"
               aria-haspopup="dialog"
             >
@@ -126,19 +116,21 @@ const closeModal = () => modalRef.value?.close?.()
               </p>
             </Modal>
           </div>
-          <div class="flex items-center gap-5">
-            <LinkBase :to="NPMX_DOCS_SITE">
-              {{ $t('footer.docs') }}
-            </LinkBase>
-            <LinkBase to="https://repo.npmx.dev">
-              {{ $t('footer.source') }}
-            </LinkBase>
-            <LinkBase to="https://social.npmx.dev">
-              {{ $t('footer.social') }}
-            </LinkBase>
-            <LinkBase :to="discord.url">
-              {{ discord.label }}
-            </LinkBase>
+
+          <!-- Column 2: Legal & Info -->
+          <div class="flex flex-col gap-1">
+            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.legal') }}</span>
+            <LinkBase :to="{ name: 'privacy' }">{{ $t('privacy_policy.title') }}</LinkBase>
+            <LinkBase :to="{ name: 'accessibility' }">{{ $t('a11y.footer_title') }}</LinkBase>
+            <LinkBase :to="{ name: 'translation-status' }">{{ $t('translation_status.title') }}</LinkBase>
+          </div>
+
+          <!-- Column 3: Community -->
+          <div class="flex flex-col gap-1">
+            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.community') }}</span>
+            <LinkBase to="https://repo.npmx.dev">{{ $t('footer.source') }}</LinkBase>
+            <LinkBase to="https://social.npmx.dev">{{ $t('footer.social') }}</LinkBase>
+            <LinkBase :to="discord.url">{{ discord.label }}</LinkBase>
           </div>
         </div>
       </div>

From 0aa31b17c570177fc22a9cf53397641e388564b8 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 14:57:19 -0400
Subject: [PATCH 2/5] fix: use tracking-wide on column labels (CI fix)

---
 app/components/AppFooter.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 250e61fd91..d39f252dfd 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -24,7 +24,7 @@ const closeModal = () => modalRef.value?.close?.()
         <div class="hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-1 min-h-11 text-xs">
           <!-- Column 1: Product -->
           <div class="flex flex-col gap-1">
-            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.product') }}</span>
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{ $t('footer.product') }}</span>
             <LinkBase :to="{ name: 'about' }">{{ $t('footer.about') }}</LinkBase>
             <LinkBase :to="{ name: 'blog' }">{{ $t('footer.blog') }}</LinkBase>
             <LinkBase :to="NPMX_DOCS_SITE">{{ $t('footer.docs') }}</LinkBase>
@@ -119,7 +119,7 @@ const closeModal = () => modalRef.value?.close?.()
 
           <!-- Column 2: Legal & Info -->
           <div class="flex flex-col gap-1">
-            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.legal') }}</span>
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{ $t('footer.legal') }}</span>
             <LinkBase :to="{ name: 'privacy' }">{{ $t('privacy_policy.title') }}</LinkBase>
             <LinkBase :to="{ name: 'accessibility' }">{{ $t('a11y.footer_title') }}</LinkBase>
             <LinkBase :to="{ name: 'translation-status' }">{{ $t('translation_status.title') }}</LinkBase>
@@ -127,7 +127,7 @@ const closeModal = () => modalRef.value?.close?.()
 
           <!-- Column 3: Community -->
           <div class="flex flex-col gap-1">
-            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.community') }}</span>
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{ $t('footer.community') }}</span>
             <LinkBase to="https://repo.npmx.dev">{{ $t('footer.source') }}</LinkBase>
             <LinkBase to="https://social.npmx.dev">{{ $t('footer.social') }}</LinkBase>
             <LinkBase :to="discord.url">{{ discord.label }}</LinkBase>

From 8dc2b3adedb799b67b0f68da082bda274e261b87 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 14:57:50 -0400
Subject: [PATCH 3/5] test: add AppFooter column label regression tests

---
 test/nuxt/components/AppFooter.spec.ts | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/test/nuxt/components/AppFooter.spec.ts b/test/nuxt/components/AppFooter.spec.ts
index f799f74235..c2498fffbf 100644
--- a/test/nuxt/components/AppFooter.spec.ts
+++ b/test/nuxt/components/AppFooter.spec.ts
@@ -4,6 +4,31 @@ import AppFooter from '~/components/AppFooter.vue'
 
 /* check nuxt module at modules/build-env.ts */
 describe('AppFooter', () => {
+  it('renders three labeled columns: Product, Legal, Community', async () => {
+    const component = await mountSuspended(AppFooter, {
+      route: '/',
+    })
+
+    // All three column label spans should be present
+    const columnLabels = component.findAll('span.tracking-wide')
+    expect(columnLabels.length).toBeGreaterThanOrEqual(3)
+
+    const labelTexts = columnLabels.map(span => span.text().toLowerCase())
+    expect(labelTexts.some(t => t.includes('product'))).toBe(true)
+    expect(labelTexts.some(t => t.includes('legal'))).toBe(true)
+    expect(labelTexts.some(t => t.includes('community'))).toBe(true)
+  })
+
+  it('footer contains links expected in the Product column', async () => {
+    const component = await mountSuspended(AppFooter, {
+      route: '/about',
+    })
+
+    // The Product column should link to /about and /blog
+    const aboutLink = component.find('a[href="/about"]')
+    expect(aboutLink.exists()).toBe(true)
+  })
+
   it('BuildEnvironment is properly displayed at settings', async () => {
     const buildInfo = useAppConfig().buildInfo
     const component = await mountSuspended(AppFooter, {

From 86a7ac318a9251b1efbd30905ef39783db37823d Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 22 Mar 2026 18:59:15 +0000
Subject: [PATCH 4/5] [autofix.ci] apply automated fixes

---
 app/components/AppFooter.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index d39f252dfd..3548b118aa 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -24,7 +24,9 @@ const closeModal = () => modalRef.value?.close?.()
         <div class="hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-1 min-h-11 text-xs">
           <!-- Column 1: Product -->
           <div class="flex flex-col gap-1">
-            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{ $t('footer.product') }}</span>
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{
+              $t('footer.product')
+            }}</span>
             <LinkBase :to="{ name: 'about' }">{{ $t('footer.about') }}</LinkBase>
             <LinkBase :to="{ name: 'blog' }">{{ $t('footer.blog') }}</LinkBase>
             <LinkBase :to="NPMX_DOCS_SITE">{{ $t('footer.docs') }}</LinkBase>
@@ -119,15 +121,21 @@ const closeModal = () => modalRef.value?.close?.()
 
           <!-- Column 2: Legal & Info -->
           <div class="flex flex-col gap-1">
-            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{ $t('footer.legal') }}</span>
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{
+              $t('footer.legal')
+            }}</span>
             <LinkBase :to="{ name: 'privacy' }">{{ $t('privacy_policy.title') }}</LinkBase>
             <LinkBase :to="{ name: 'accessibility' }">{{ $t('a11y.footer_title') }}</LinkBase>
-            <LinkBase :to="{ name: 'translation-status' }">{{ $t('translation_status.title') }}</LinkBase>
+            <LinkBase :to="{ name: 'translation-status' }">{{
+              $t('translation_status.title')
+            }}</LinkBase>
           </div>
 
           <!-- Column 3: Community -->
           <div class="flex flex-col gap-1">
-            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{ $t('footer.community') }}</span>
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{
+              $t('footer.community')
+            }}</span>
             <LinkBase to="https://repo.npmx.dev">{{ $t('footer.source') }}</LinkBase>
             <LinkBase to="https://social.npmx.dev">{{ $t('footer.social') }}</LinkBase>
             <LinkBase :to="discord.url">{{ discord.label }}</LinkBase>

From 0dba940158a4105f69c435d741b9ca5306f0122d Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 15:38:33 -0400
Subject: [PATCH 5/5] fix: add missing footer column i18n keys and regenerate
 schema

---
 i18n/locales/en.json | 5 ++++-
 i18n/schema.json     | 9 +++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 02c1af000f..f1518faec9 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -19,7 +19,10 @@
     "social": "social",
     "chat": "chat",
     "builders_chat": "builders",
-    "keyboard_shortcuts": "keyboard shortcuts"
+    "keyboard_shortcuts": "keyboard shortcuts",
+    "product": "Product",
+    "legal": "Legal",
+    "community": "Community"
   },
   "shortcuts": {
     "section": {
diff --git a/i18n/schema.json b/i18n/schema.json
index 885bd6eb5e..acc8bb80ad 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -63,6 +63,15 @@
         },
         "keyboard_shortcuts": {
           "type": "string"
+        },
+        "product": {
+          "type": "string"
+        },
+        "legal": {
+          "type": "string"
+        },
+        "community": {
+          "type": "string"
         }
       },
       "additionalProperties": false