Merge branch 'main' into vt/nullvoxpopuli

Author: vinnymac

app/components/AppFooter.vue

@@ -23,22 +23,9 @@ const showModal = () => modalRef.value?.showModal?.()
           <LinkBase :to="{ name: 'privacy' }">
             {{ $t('privacy_policy.title') }}
           </LinkBase>
-          <LinkBase to="https://docs.npmx.dev">
-            {{ $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="https://chat.npmx.dev">
-            {{ $t('footer.chat') }}
-          </LinkBase>
-
           <button
             type="button"
-            class="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="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"
             @click.prevent="showModal"
             aria-haspopup="dialog"
           >
@@ -102,6 +89,18 @@ const showModal = () => modalRef.value?.showModal?.()
               </li>
             </ul>
           </Modal>
+          <LinkBase to="https://docs.npmx.dev">
+            {{ $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="https://chat.npmx.dev">
+            {{ $t('footer.chat') }}
+          </LinkBase>
         </div>
       </div>
       <BuildEnvironment v-if="!isHome" footer />

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/Compare/PackageSelector.vue

@@ -92,10 +92,17 @@ function handleKeydown(e: KeyboardEvent) {
   }
 }
 
+const { start, stop } = useTimeoutFn(() => {
+  isInputFocused.value = false
+}, 200)
+
 function handleBlur() {
-  useTimeoutFn(() => {
-    isInputFocused.value = false
-  }, 200)
+  start()
+}
+
+function handleFocus() {
+  stop()
+  isInputFocused.value = true
 }
 </script>
 
@@ -151,7 +158,7 @@ function handleBlur() {
           size="medium"
           class="w-full min-w-25 ps-7"
           aria-autocomplete="list"
-          @focus="isInputFocused = true"
+          @focus="handleFocus"
           @blur="handleBlur"
           @keydown="handleKeydown"
         />

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"

app/components/Package/AccessControls.vue

@@ -243,41 +243,39 @@ watch(
     <div v-if="showGrantAccess">
       <form class="space-y-2" @submit.prevent="handleGrantAccess">
         <div class="flex items-center gap-2">
-          <label for="grant-team-select" class="sr-only">{{
-            $t('package.access.select_team_label')
-          }}</label>
-          <select
+          <SelectField
+            :label="$t('package.access.select_team_label')"
+            hidden-label
             id="grant-team-select"
             v-model="selectedTeam"
             name="grant-team"
-            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
+            block
+            size="sm"
             :disabled="isLoadingTeams"
-          >
-            <option value="" disabled>
-              {{
-                isLoadingTeams
+            :items="[
+              {
+                label: isLoadingTeams
                   ? $t('package.access.loading_teams')
-                  : $t('package.access.select_team')
-              }}
-            </option>
-            <option v-for="team in teams" :key="team" :value="team">
-              {{ orgName }}:{{ team }}
-            </option>
-          </select>
-        </div>
-        <div class="flex items-center gap-2">
-          <label for="grant-permission-select" class="sr-only">{{
-            $t('package.access.permission_label')
-          }}</label>
-          <select
+                  : $t('package.access.select_team'),
+                value: '',
+                disabled: true,
+              },
+              ...teams.map(team => ({ label: `${orgName}:${team}`, value: team })),
+            ]"
+          />
+          <SelectField
+            :label="$t('package.access.permission_label')"
+            hidden-label
             id="grant-permission-select"
             v-model="permission"
             name="grant-permission"
-            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
-          >
-            <option value="read-only">{{ $t('package.access.permission.read_only') }}</option>
-            <option value="read-write">{{ $t('package.access.permission.read_write') }}</option>
-          </select>
+            block
+            size="sm"
+            :items="[
+              { label: $t('package.access.permission.read_only'), value: 'read-only' },
+              { label: $t('package.access.permission.read_write'), value: 'read-write' },
+            ]"
+          />
           <button
             type="submit"
             :disabled="!selectedTeam || isGranting"

app/components/Package/Dependencies.vue

@@ -85,7 +85,7 @@ const numberFormatter = useNumberFormatter()
         )
       "
     >
-      <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
+      <ul class="px-1 space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
           :key="dep"
@@ -168,7 +168,10 @@ const numberFormatter = useNumberFormatter()
         })
       "
     >
-      <ul class="space-y-1 list-none m-0" :aria-label="$t('package.peer_dependencies.list_label')">
+      <ul
+        class="px-1 space-y-1 list-none m-0"
+        :aria-label="$t('package.peer_dependencies.list_label')"
+      >
         <li
           v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
           :key="peer.name"
@@ -225,7 +228,7 @@ const numberFormatter = useNumberFormatter()
       "
     >
       <ul
-        class="space-y-1 list-none m-0"
+        class="px-1 space-y-1 list-none m-0"
         :aria-label="$t('package.optional_dependencies.list_label')"
       >
         <li