fix(ui): fix app footer layout and build environment on narrow screens

app/components/AppFooter.vue

@@ -11,7 +11,6 @@ const isHome = computed(() => route.name === 'index')
       >
         <div>
           <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
-          <BuildEnvironment v-if="!isHome" footer />
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
         <div class="hidden sm:flex items-center gap-6">
@@ -56,6 +55,7 @@ const isHome = computed(() => route.name === 'index')
           </a>
         </div>
       </div>
+      <BuildEnvironment v-if="!isHome" footer />
       <p class="text-xs text-fg-muted text-center sm:text-start m-0">
         <span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
         <span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>

app/components/BuildEnvironment.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
-defineProps<{
+import type { BuildInfo } from '#shared/types'
+
+const { footer = false, buildInfo: buildInfoProp } = defineProps<{
   footer?: boolean
+  buildInfo?: BuildInfo
 }>()
 
 const { locale } = useI18n()
-const buildInfo = useAppConfig().buildInfo
+const appConfig = useAppConfig()
+const buildInfo = computed(() => buildInfoProp || appConfig.buildInfo)
 </script>
 
 <template>
   <div
     class="font-mono text-xs text-fg-muted flex items-center gap-2 motion-safe:animate-fade-in motion-safe:animate-fill-both"
-    :class="footer ? 'mt-4 justify-start' : 'mb-8 justify-center'"
+    :class="footer ? 'my-1 justify-center sm:justify-start' : 'mb-8 justify-center'"
     style="animation-delay: 0.05s"
   >
     <i18n-t keypath="built_at" scope="global">

config/env.ts

@@ -41,6 +41,8 @@ export const isPreview =
   process.env.VERCEL_ENV === 'preview' ||
   process.env.VERCEL_ENV === 'development'
 
+export type EnvType = 'dev' | 'preview' | 'canary' | 'release'
+
 const git = Git()
 export async function getGitInfo() {
   let branch

modules/build-env.ts

@@ -1,3 +1,4 @@
+import type { EnvType } from '../config/env'
 import type { BuildInfo } from '../shared/types'
 import { createResolver, defineNuxtModule } from 'nuxt/kit'
 import { isCI } from 'std-env'
@@ -10,18 +11,31 @@ export default defineNuxtModule({
     name: 'npmx:build-env',
   },
   async setup(_options, nuxt) {
-    const { env, commit, shortCommit, branch } = await getEnv(nuxt.options.dev)
-
     nuxt.options.appConfig = nuxt.options.appConfig || {}
-    nuxt.options.appConfig.env = env
-    nuxt.options.appConfig.buildInfo = {
-      version,
-      time: +Date.now(),
-      commit,
-      shortCommit,
-      branch,
-      env,
-    } satisfies BuildInfo
+    let env: EnvType = 'dev'
+
+    if (process.env.TEST) {
+      nuxt.options.appConfig.buildInfo = {
+        env,
+        version: '0.0.0',
+        commit: '704987bba88909f3782d792c224bde989569acb9',
+        shortCommit: '704987b',
+        branch: 'xxx',
+        time: 1770237446424,
+      } satisfies BuildInfo
+    } else {
+      const { env: useEnv, commit, shortCommit, branch } = await getEnv(nuxt.options.dev)
+      env = useEnv
+      nuxt.options.appConfig.env = useEnv
+      nuxt.options.appConfig.buildInfo = {
+        version,
+        time: +Date.now(),
+        commit,
+        shortCommit,
+        branch,
+        env,
+      } satisfies BuildInfo
+    }
 
     nuxt.options.nitro.publicAssets = nuxt.options.nitro.publicAssets || []
     if (env === 'dev') nuxt.options.nitro.publicAssets.unshift({ dir: resolve('../public-dev') })

test/nuxt/components/AppFooter.spec.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import AppFooter from '~/components/AppFooter.vue'
+
+describe('AppFooter', () => {
+  it('BuildEnvironment is properly displayed at settings', async () => {
+    const component = await mountSuspended(AppFooter, {
+      route: '/settings',
+    })
+    const html = component.html()
+    expect(html).toContain('<span class="tracking-wider">dev</span>')
+    expect(html).toContain(
+      '<a href="https://github.com/npmx-dev/npmx.dev/commit/704987bba88909f3782d792c224bde989569acb9"',
+    )
+  })
+
+  it('BuildEnvironment is hidden at home', async () => {
+    const component = await mountSuspended(AppFooter, {
+      route: '/',
+    })
+    const html = component.html()
+    expect(html).not.toContain(
+      '<a href="https://github.com/npmx-dev/npmx.dev/commit/704987bba88909f3782d792c224bde989569acb9"',
+    )
+    expect(html).not.toContain('<span class="tracking-wider">dev</span>')
+  })
+})

test/nuxt/components/BuildEnvironment.spec.ts

@@ -0,0 +1,48 @@
+import type { BuildInfo } from '#shared/types'
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import BuildEnvironment from '~/components/BuildEnvironment.vue'
+
+describe('BuildEnvironment', () => {
+  it('renders dev environment correctly', async () => {
+    const buildInfo = useAppConfig().buildInfo as BuildInfo
+    const component = await mountSuspended(BuildEnvironment, {
+      props: {
+        buildInfo,
+      },
+    })
+    const html = component.html()
+
+    // In dev mode, it shows env name, not version link
+    expect(html).toContain('<span class="tracking-wider">dev</span>')
+    expect(html).toContain(
+      '<a href="https://github.com/npmx-dev/npmx.dev/commit/704987bba88909f3782d792c224bde989569acb9"',
+    )
+    expect(html).not.toContain('href="https://github.com/npmx-dev/npmx.dev/tag/v0.0.0"')
+  })
+
+  it('renders release environment correctly', async () => {
+    const buildInfo: BuildInfo = {
+      env: 'release',
+      version: '1.2.3',
+      time: 1234567890,
+      commit: 'abcdef',
+      shortCommit: 'abc',
+      branch: 'release',
+    }
+
+    const component = await mountSuspended(BuildEnvironment, {
+      props: {
+        buildInfo,
+      },
+    })
+    const html = component.html()
+
+    // In release mode, it shows tag version link, not env name
+    expect(html).not.toContain('<span class="tracking-wider">dev</span>')
+    expect(html).not.toContain(
+      '<a href="https://github.com/npmx-dev/npmx.dev/commit/704987bba88909f3782d792c224bde989569acb9"',
+    )
+    expect(html).toContain('href="https://github.com/npmx-dev/npmx.dev/tag/v1.2.3"')
+  })
+})