Merge branch 'main' into fix-search

Author: gameroman

.lighthouserc.cjs

@@ -35,14 +35,18 @@ module.exports = {
       chromePath: findChrome(),
       puppeteerScript: './lighthouse-setup.cjs',
       settings: {
-        onlyCategories: ['accessibility'],
+        onlyCategories: process.env.LH_PERF ? ['performance'] : ['accessibility'],
         skipAudits: ['valid-source-maps'],
       },
     },
     assert: {
-      assertions: {
-        'categories:accessibility': ['error', { minScore: 1 }],
-      },
+      assertions: process.env.LH_PERF
+        ? {
+            'cumulative-layout-shift': ['error', { maxNumericValue: 0 }],
+          }
+        : {
+            'categories:accessibility': ['error', { minScore: 1 }],
+          },
     },
     upload: {
       target: 'temporary-public-storage',

CONTRIBUTING.md

@@ -54,6 +54,7 @@ This focus helps guide our project decisions as a community and what we choose t
   - [Unit tests](#unit-tests)
   - [Component accessibility tests](#component-accessibility-tests)
   - [Lighthouse accessibility tests](#lighthouse-accessibility-tests)
+  - [Lighthouse performance tests](#lighthouse-performance-tests)
   - [End to end tests](#end-to-end-tests)
   - [Test fixtures (mocking external APIs)](#test-fixtures-mocking-external-apis)
 - [Submitting changes](#submitting-changes)
@@ -114,6 +115,7 @@ pnpm test:unit        # Unit tests only
 pnpm test:nuxt        # Nuxt component tests
 pnpm test:browser     # Playwright E2E tests
 pnpm test:a11y        # Lighthouse accessibility audits
+pnpm test:perf        # Lighthouse performance audits (CLS)
 ```
 
 ### Project structure
@@ -641,18 +643,38 @@ pnpm test:a11y:prebuilt
 
 # Or run a single color mode manually
 pnpm build:test
-LIGHTHOUSE_COLOR_MODE=dark ./scripts/lighthouse-a11y.sh
+LIGHTHOUSE_COLOR_MODE=dark ./scripts/lighthouse.sh
 ```
 
 This requires Chrome or Chromium to be installed. The script will auto-detect common installation paths. Results are printed to the terminal and saved in `.lighthouseci/`.
 
 #### Configuration
 
-| File                         | Purpose                                                   |
-| ---------------------------- | --------------------------------------------------------- |
-| `.lighthouserc.cjs`          | Lighthouse CI config (URLs, assertions, Chrome path)      |
-| `lighthouse-setup.cjs`       | Puppeteer script for color mode + client-side API mocking |
-| `scripts/lighthouse-a11y.sh` | Shell wrapper that runs the audit for a given color mode  |
+| File                    | Purpose                                                   |
+| ----------------------- | --------------------------------------------------------- |
+| `.lighthouserc.cjs`     | Lighthouse CI config (URLs, assertions, Chrome path)      |
+| `lighthouse-setup.cjs`  | Puppeteer script for color mode + client-side API mocking |
+| `scripts/lighthouse.sh` | Shell wrapper that runs the audit for a given color mode  |
+
+### Lighthouse performance tests
+
+The project also runs Lighthouse performance audits to enforce zero Cumulative Layout Shift (CLS). These run separately from the accessibility audits and test the same set of URLs.
+
+#### How it works
+
+The same `.lighthouserc.cjs` config is shared between accessibility and performance audits. When the `LH_PERF` environment variable is set, the config switches from the `accessibility` category to the `performance` category and asserts that CLS is exactly 0.
+
+#### Running locally
+
+```bash
+# Build + run performance audit
+pnpm test:perf
+
+# Or against an existing test build
+pnpm test:perf:prebuilt
+```
+
+Unlike the accessibility audits, performance audits do not run in separate light/dark modes.
 
 ### End to end tests
 

app/components/BuildEnvironment.vue

@@ -6,9 +6,9 @@ const { footer = false, buildInfo: buildInfoProp } = defineProps<{
   buildInfo?: BuildInfo
 }>()
 
-const { locale } = useI18n()
 const appConfig = useAppConfig()
 const buildInfo = computed(() => buildInfoProp || appConfig.buildInfo)
+const buildTime = computed(() => new Date(buildInfo.value.time))
 </script>
 
 <template>
@@ -18,7 +18,7 @@ const buildInfo = computed(() => buildInfoProp || appConfig.buildInfo)
     style="animation-delay: 0.05s"
   >
     <i18n-t keypath="built_at" scope="global">
-      <NuxtTime :datetime="buildInfo.time" :locale="locale" relative />
+      <DateTime :datetime="buildTime" year="numeric" month="short" day="numeric" />
     </i18n-t>
     <span>&middot;</span>
     <LinkBase

app/components/Code/Viewer.vue

@@ -57,6 +57,31 @@ watch(
   },
   { immediate: true },
 )
+
+// Use Nuxt's `navigateTo` for the rendered import links
+function handleImportLinkNavigate() {
+  if (!codeRef.value) return
+
+  const anchors = codeRef.value.querySelectorAll('a.import-link')
+  anchors.forEach(anchor => {
+    // NOTE: We do not need to remove previous listeners because we re-create the entire HTML content on each html update
+    anchor.addEventListener('click', event => {
+      const href = anchor.getAttribute('href')
+      if (href) {
+        event.preventDefault()
+        navigateTo(href)
+      }
+    })
+  })
+}
+
+watch(
+  () => props.html,
+  () => {
+    nextTick(handleImportLinkNavigate)
+  },
+  { immediate: true },
+)
 </script>
 
 <template>

app/components/Compare/PackageSelector.vue

@@ -185,7 +185,7 @@ function handleFocus() {
             :aria-label="$t('compare.no_dependency.add_column')"
             @click="addPackage(NO_DEPENDENCY_ID)"
           >
-            <span class="text-sm text-accent italic flex items-center gap-2 block">
+            <span class="text-sm text-accent italic flex items-center gap-2">
               <span class="i-carbon:clean w-4 h-4" aria-hidden="true" />
               {{ $t('compare.no_dependency.typeahead_title') }}
             </span>

app/components/Header/AccountMenu.client.vue

@@ -56,7 +56,7 @@ function openAuthModal() {
 </script>
 
 <template>
-  <div ref="accountMenuRef" class="relative flex min-w-24 justify-end">
+  <div ref="accountMenuRef" class="relative flex min-w-28 justify-end">
     <ButtonBase
       type="button"
       :aria-expanded="isOpen"

app/components/Header/AccountMenu.server.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex min-w-24 justify-end">
+  <div class="relative flex min-w-28 justify-end">
     <div
       class="inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md text-sm px-4 py-2 bg-transparent text-fg border-none"
     >

app/components/Header/AuthModal.client.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { authRedirect } from '~/utils/atproto/helpers'
-import { ensureValidAtIdentifier } from '@atproto/syntax'
+import { isAtIdentifierString } from '@atproto/lex'
 
 const handleInput = shallowRef('')
 const errorMessage = shallowRef('')
@@ -28,20 +28,15 @@ async function handleCreateAccount() {
 
 async function handleLogin() {
   if (handleInput.value) {
-    // URLS to PDSs are valid for oauth redirects
-    if (!handleInput.value.startsWith('https://')) {
-      try {
-        ensureValidAtIdentifier(handleInput.value)
-      } catch (error) {
-        errorMessage.value =
-          error instanceof Error ? error.message : $t('auth.modal.default_input_error')
-        return
-      }
+    // URLS to PDSs are valid for initiating oauth flows
+    if (handleInput.value.startsWith('https://') || isAtIdentifierString(handleInput.value)) {
+      await authRedirect(handleInput.value, {
+        redirectTo: route.fullPath,
+        locale: locale.value,
+      })
+    } else {
+      errorMessage.value = $t('auth.modal.default_input_error')
     }
-    await authRedirect(handleInput.value, {
-      redirectTo: route.fullPath,
-      locale: locale.value,
-    })
   }
 }
 

app/components/Input/Base.vue

@@ -35,11 +35,11 @@ defineExpose({
     v-bind="props.noCorrect ? noCorrect : undefined"
     @focus="emit('focus', $event)"
     @blur="emit('blur', $event)"
-    class="bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
+    class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
     :class="{
       'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'small',
       'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'medium',
-      'text-base leading-none px-6 py-3.5 h-14 rounded-xl': size === 'large',
+      'text-base leading-[1.4] px-6 py-4 rounded-xl': size === 'large',
     }"
     :disabled="
       /** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */

app/components/Org/MembersPanel.vue

@@ -35,7 +35,7 @@ const isLoadingTeams = shallowRef(false)
 // Search/filter
 const searchQuery = shallowRef('')
 const filterRole = shallowRef<MemberRoleFilter>('all')
-const filterTeam = shallowRef<string | null>(null)
+const filterTeam = shallowRef<string>('')
 const sortBy = shallowRef<'name' | 'role'>('name')
 const sortOrder = shallowRef<'asc' | 'desc'>('asc')
 
@@ -362,18 +362,19 @@ watch(lastExecutionTime, () => {
       </div>
       <!-- Team filter -->
       <div v-if="teamNames.length > 0">
-        <label for="team-filter" class="sr-only">{{ $t('org.members.filter_by_team') }}</label>
-        <select
+        <SelectField
+          :label="$t('org.members.filter_by_team')"
+          hidden-label
           id="team-filter"
           v-model="filterTeam"
           name="team-filter"
-          class="px-2 py-1 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
-        >
-          <option :value="null">{{ $t('org.members.all_teams') }}</option>
-          <option v-for="team in teamNames" :key="team" :value="team">
-            {{ team }}
-          </option>
-        </select>
+          block
+          size="sm"
+          :items="[
+            { label: $t('org.members.all_teams'), value: '' },
+            ...teamNames.map(team => ({ label: team, value: team })),
+          ]"
+        />
       </div>
       <div
         class="flex items-center gap-1 text-xs"
@@ -462,22 +463,22 @@ watch(lastExecutionTime, () => {
             <label :for="`role-${member.name}`" class="sr-only">{{
               $t('org.members.change_role_for', { name: member.name })
             }}</label>
-            <select
+            <SelectField
+              :label="$t('org.members.change_role_for', { name: member.name })"
+              hidden-label
               :id="`role-${member.name}`"
-              :value="member.role"
+              :model-value="member.role"
               :name="`role-${member.name}`"
-              class="px-1.5 py-0.5 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
-              @change="
-                handleChangeRole(
-                  member.name,
-                  ($event.target as HTMLSelectElement).value as 'developer' | 'admin' | 'owner',
-                )
-              "
-            >
-              <option value="developer">{{ getRoleLabel('developer') }}</option>
-              <option value="admin">{{ getRoleLabel('admin') }}</option>
-              <option value="owner">{{ getRoleLabel('owner') }}</option>
-            </select>
+              block
+              size="sm"
+              :items="[
+                { label: getRoleLabel('developer'), value: 'developer' },
+                { label: getRoleLabel('admin'), value: 'admin' },
+                { label: getRoleLabel('owner'), value: 'owner' },
+              ]"
+              :value="member.role"
+              @update:modelValue="value => handleChangeRole(member.name, value as MemberRole)"
+            />
             <!-- Remove button -->
             <button
               type="button"
@@ -528,30 +529,36 @@ watch(lastExecutionTime, () => {
             size="small"
           />
           <div class="flex items-center gap-2">
-            <label for="new-member-role" class="sr-only">{{ $t('org.members.role_label') }}</label>
-            <select
+            <SelectField
+              :label="$t('org.members.role_label')"
+              hidden-label
               id="new-member-role"
               v-model="newRole"
               name="new-member-role"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
-            >
-              <option value="developer">{{ $t('org.members.role.developer') }}</option>
-              <option value="admin">{{ $t('org.members.role.admin') }}</option>
-              <option value="owner">{{ $t('org.members.role.owner') }}</option>
-            </select>
+              block
+              class="flex-1"
+              size="sm"
+              :items="[
+                { label: $t('org.members.role.developer'), value: 'developer' },
+                { label: $t('org.members.role.admin'), value: 'admin' },
+                { label: $t('org.members.role.owner'), value: 'owner' },
+              ]"
+            />
             <!-- Team selection -->
-            <label for="new-member-team" class="sr-only">{{ $t('org.members.team_label') }}</label>
-            <select
+            <SelectField
+              :label="$t('org.members.team_label')"
+              hidden-label
               id="new-member-team"
               v-model="newTeam"
               name="new-member-team"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
-            >
-              <option value="">{{ $t('org.members.no_team') }}</option>
-              <option v-for="team in teamNames" :key="team" :value="team">
-                {{ team }}
-              </option>
-            </select>
+              block
+              class="flex-1"
+              size="sm"
+              :items="[
+                { label: $t('org.members.no_team'), value: '' },
+                ...teamNames.map(team => ({ label: team, value: team })),
+              ]"
+            />
             <button
               type="submit"
               :disabled="!newUsername.trim() || isAddingMember"