Merge branch 'main' of github.com:npmx-dev/npmx.dev into fix/build-time-locale

Author: shamilkotta

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

app/components/Package/DownloadAnalytics.vue

@@ -1580,44 +1580,24 @@ const chartConfig = computed(() => {
   <div class="w-full relative" id="download-analytics" :aria-busy="pending ? 'true' : 'false'">
     <div class="w-full mb-4 flex flex-col gap-3">
       <div class="flex flex-col sm:flex-row gap-3 sm:gap-2 sm:items-end">
-        <div class="flex flex-col gap-1 sm:shrink-0">
-          <label
-            for="granularity"
-            class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
-          >
-            {{ $t('package.trends.granularity') }}
-          </label>
-
-          <div
-            class="flex items-center bg-bg-subtle border border-border rounded-md overflow-hidden"
-          >
-            <select
-              id="granularity"
-              v-model="selectedGranularity"
-              :disabled="pending"
-              class="w-full px-4 py-3 leading-none bg-bg-subtle font-mono text-sm text-fg outline-none appearance-none focus-visible:outline-accent/70"
-            >
-              <option value="daily">
-                {{ $t('package.trends.granularity_daily') }}
-              </option>
-              <option value="weekly">
-                {{ $t('package.trends.granularity_weekly') }}
-              </option>
-              <option value="monthly">
-                {{ $t('package.trends.granularity_monthly') }}
-              </option>
-              <option value="yearly">
-                {{ $t('package.trends.granularity_yearly') }}
-              </option>
-            </select>
-          </div>
-        </div>
+        <SelectField
+          :label="$t('package.trends.granularity')"
+          id="granularity"
+          v-model="selectedGranularity"
+          :disabled="pending"
+          :items="[
+            { label: $t('package.trends.granularity_daily'), value: 'daily' },
+            { label: $t('package.trends.granularity_weekly'), value: 'weekly' },
+            { label: $t('package.trends.granularity_monthly'), value: 'monthly' },
+            { label: $t('package.trends.granularity_yearly'), value: 'yearly' },
+          ]"
+        />
 
         <div class="grid grid-cols-2 gap-2 flex-1">
           <div class="flex flex-col gap-1">
             <label
               for="startDate"
-              class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
+              class="text-2xs font-mono text-fg-subtle tracking-wide uppercase"
             >
               {{ $t('package.trends.start_date') }}
             </label>
@@ -1638,7 +1618,7 @@ const chartConfig = computed(() => {
           </div>
 
           <div class="flex flex-col gap-1">
-            <label for="endDate" class="text-3xs font-mono text-fg-subtle tracking-wide uppercase">
+            <label for="endDate" class="text-2xs font-mono text-fg-subtle tracking-wide uppercase">
               {{ $t('package.trends.end_date') }}
             </label>
             <div class="relative flex items-center">

app/components/Package/ListControls.vue

@@ -73,26 +73,14 @@ const showFilteredCount = computed(() => {
     </div>
 
     <!-- Sort select -->
-    <div class="relative shrink-0 flex">
-      <label for="package-sort" class="sr-only">{{ $t('package.list.sort_label') }}</label>
-      <div class="relative">
-        <select
-          id="package-sort"
-          v-model="sortValue"
-          class="appearance-none bg-bg-subtle border border-border rounded-lg ps-3 pe-8 py-3 leading-none font-mono text-sm text-fg transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
-        >
-          <option v-for="option in sortOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-        <div
-          class="absolute inset-ie-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
-          aria-hidden="true"
-        >
-          <div class="i-carbon:chevron-down w-4 h-4" />
-        </div>
-      </div>
-    </div>
+    <SelectField
+      :label="$t('package.list.sort_label')"
+      hidden-label
+      id="package-sort"
+      class="relative shrink-0"
+      v-model="sortValue"
+      :items="sortOptions.map(option => ({ label: option.label, value: option.value }))"
+    />
   </div>
 
   <!-- Filtered count indicator -->