Merge remote-tracking branch 'origin/main' into feat/algolia-search

Author: danielroe

app/assets/main.css

@@ -171,6 +171,26 @@
   }
 }
 
+/*
+ * Forced Colors Mode (WHCM) Override for Icons
+ *
+ * By default, `forced-color-adjust: preserve-parent-color` (from UnoConfig) works fine
+ * for most icons as they inherit the correct text color.
+ *
+ * However, if icons disappear in specific contexts (e.g., inside buttons with
+ * complex backgrounds or transparent states), uncomment the following block
+ * to enforce visibility using `CanvasText`.
+ */
+/* 
+@media (forced-colors: active) {
+  [class^='i-'],
+  [class*=' i-'] {
+    forced-color-adjust: none !important;
+    color: CanvasText !important;
+  }
+}
+*/
+
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

app/components/Header/AuthModal.client.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { authRedirect } from '~/utils/atproto/helpers'
+import { ensureValidAtIdentifier } from '@atproto/syntax'
 
 const handleInput = shallowRef('')
+const errorMessage = shallowRef('')
 const route = useRoute()
 const { user, logout } = useAtproto()
 
@@ -13,26 +15,41 @@ const localeSubPath = ['ko', 'pt', 'ja'].includes(currentLang) ? currentLang : '
 const atprotoLink = `https://atproto.com/${localeSubPath}`
 
 async function handleBlueskySignIn() {
-  await authRedirect('https://bsky.social', { redirectTo: route.fullPath })
+  await authRedirect('https://bsky.social', { redirectTo: route.fullPath, locale: locale.value })
 }
 
 async function handleCreateAccount() {
-  await authRedirect('https://npmx.social', { create: true, redirectTo: route.fullPath })
+  await authRedirect('https://npmx.social', {
+    create: true,
+    redirectTo: route.fullPath,
+    locale: locale.value,
+  })
 }
 
 async function handleLogin() {
   if (handleInput.value) {
-    await authRedirect(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
+      }
+    }
+    await authRedirect(handleInput.value, {
+      redirectTo: route.fullPath,
+      locale: locale.value,
+    })
   }
 }
 
 watch(handleInput, newHandleInput => {
+  errorMessage.value = ''
   if (!newHandleInput) return
 
-  const normalized = newHandleInput
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9.-]/g, '')
+  const normalized = newHandleInput.trim().toLowerCase().replace(/@/g, '')
 
   if (normalized !== newHandleInput) {
     handleInput.value = normalized
@@ -81,6 +98,9 @@ watch(handleInput, newHandleInput => {
             v-bind="noCorrect"
             class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 hover:border-fg-subtle focus:border-accent focus-visible:(outline-2 outline-accent/70)"
           />
+          <p v-if="errorMessage" class="text-red-500 text-xs mt-1" role="alert">
+            {{ errorMessage }}
+          </p>
         </div>
 
         <details class="text-sm">

app/components/Header/MobileMenu.client.vue

@@ -99,28 +99,84 @@ onUnmounted(deactivate)
               </button>
             </div>
 
-            <!-- Navigation links -->
-            <div class="flex-1 overflow-y-auto overscroll-contain py-2">
-              <!-- Main navigation -->
-              <div class="px-2 py-2">
-                <NuxtLink
-                  :to="{ name: 'about' }"
-                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                  @click="closeMenu"
+            <!-- Account section -->
+            <div class="px-2 py-2">
+              <span
+                class="px-3 py-2 block font-mono text-xs text-fg-subtle uppercase tracking-wider"
+              >
+                {{ $t('account_menu.account') }}
+              </span>
+
+              <!-- npm CLI connection status (only show if connected) -->
+              <button
+                v-if="isConnected && npmUser"
+                type="button"
+                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+                @click="handleShowConnector"
+              >
+                <img
+                  v-if="npmAvatar"
+                  :src="npmAvatar"
+                  :alt="npmUser"
+                  width="20"
+                  height="20"
+                  class="w-5 h-5 rounded-full object-cover"
+                />
+                <span
+                  v-else
+                  class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
                 >
-                  <span class="i-carbon:information w-5 h-5 text-fg-muted" aria-hidden="true" />
-                  {{ $t('footer.about') }}
-                </NuxtLink>
+                  <span class="i-carbon-terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
+                </span>
+                <span class="flex-1">~{{ npmUser }}</span>
+                <span class="w-2 h-2 rounded-full bg-green-500" aria-hidden="true" />
+              </button>
 
-                <NuxtLink
-                  :to="{ name: 'privacy' }"
-                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                  @click="closeMenu"
+              <!-- Atmosphere connection status -->
+              <button
+                v-if="atprotoUser"
+                type="button"
+                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+                @click="handleShowAuth"
+              >
+                <img
+                  v-if="atprotoUser.avatar"
+                  :src="atprotoUser.avatar"
+                  :alt="atprotoUser.handle"
+                  width="20"
+                  height="20"
+                  class="w-5 h-5 rounded-full object-cover"
+                />
+                <span
+                  v-else
+                  class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
                 >
-                  <span class="i-carbon:security w-5 h-5 text-fg-muted" aria-hidden="true" />
-                  {{ $t('privacy_policy.title') }}
-                </NuxtLink>
+                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
+                </span>
+                <span class="flex-1 truncate">@{{ atprotoUser.handle }}</span>
+              </button>
 
+              <!-- Connect Atmosphere button (show if not connected) -->
+              <button
+                v-else
+                type="button"
+                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+                @click="handleShowAuth"
+              >
+                <span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
+                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
+                </span>
+                <span class="flex-1">{{ $t('account_menu.connect_atmosphere') }}</span>
+              </button>
+            </div>
+
+            <!-- Divider -->
+            <div class="mx-4 my-2 border-t border-border" />
+
+            <!-- Navigation links -->
+            <div class="flex-1 overflow-y-auto overscroll-contain py-2">
+              <!-- App navigation -->
+              <div class="px-2 py-2">
                 <NuxtLink
                   :to="{ name: 'compare' }"
                   class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
@@ -164,7 +220,31 @@ onUnmounted(deactivate)
               <!-- Divider -->
               <div class="mx-4 my-2 border-t border-border" />
 
-              <!-- External links (from footer) -->
+              <!-- Informational links -->
+              <div class="px-2 py-2">
+                <NuxtLink
+                  :to="{ name: 'about' }"
+                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                  @click="closeMenu"
+                >
+                  <span class="i-carbon:information w-5 h-5 text-fg-muted" aria-hidden="true" />
+                  {{ $t('footer.about') }}
+                </NuxtLink>
+
+                <NuxtLink
+                  :to="{ name: 'privacy' }"
+                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                  @click="closeMenu"
+                >
+                  <span class="i-carbon:security w-5 h-5 text-fg-muted" aria-hidden="true" />
+                  {{ $t('privacy_policy.title') }}
+                </NuxtLink>
+              </div>
+
+              <!-- Divider -->
+              <div class="mx-4 my-2 border-t border-border" />
+
+              <!-- External links -->
               <div class="px-2 py-2">
                 <span class="px-3 py-2 font-mono text-xs text-fg-subtle uppercase tracking-wider">
                   {{ $t('nav.links') }}
@@ -227,80 +307,6 @@ onUnmounted(deactivate)
                 </a>
               </div>
             </div>
-
-            <!-- Divider -->
-            <div class="mx-4 my-2 border-t border-border" />
-
-            <!-- Account section -->
-            <div class="px-2 py-2">
-              <span
-                class="px-3 py-2 block font-mono text-xs text-fg-subtle uppercase tracking-wider"
-              >
-                {{ $t('account_menu.account') }}
-              </span>
-
-              <!-- npm CLI connection status (only show if connected) -->
-              <button
-                v-if="isConnected && npmUser"
-                type="button"
-                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
-                @click="handleShowConnector"
-              >
-                <img
-                  v-if="npmAvatar"
-                  :src="npmAvatar"
-                  :alt="npmUser"
-                  width="20"
-                  height="20"
-                  class="w-5 h-5 rounded-full object-cover"
-                />
-                <span
-                  v-else
-                  class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
-                >
-                  <span class="i-carbon-terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
-                </span>
-                <span class="flex-1">~{{ npmUser }}</span>
-                <span class="w-2 h-2 rounded-full bg-green-500" aria-hidden="true" />
-              </button>
-
-              <!-- Atmosphere connection status -->
-              <button
-                v-if="atprotoUser"
-                type="button"
-                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
-                @click="handleShowAuth"
-              >
-                <img
-                  v-if="atprotoUser.avatar"
-                  :src="atprotoUser.avatar"
-                  :alt="atprotoUser.handle"
-                  width="20"
-                  height="20"
-                  class="w-5 h-5 rounded-full object-cover"
-                />
-                <span
-                  v-else
-                  class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
-                >
-                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
-                </span>
-                <span class="flex-1 truncate">@{{ atprotoUser.handle }}</span>
-              </button>
-
-              <!-- Connect Atmosphere button (show if not connected) -->
-              <button
-                v-else
-                type="button"
-                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
-                @click="handleShowAuth"
-              >
-                <span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
-                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
-                </span>
-                <span class="flex-1">{{ $t('account_menu.connect_atmosphere') }}</span>
-              </button>
-            </div>
           </nav>
         </Transition>
       </div>

app/components/Package/ClaimPackageModal.vue

@@ -36,12 +36,12 @@ const isChecking = computed(() => {
 })
 
 const mergedError = computed(() => {
-  return (
-    publishError.value ??
-    (checkError.value instanceof Error
-      ? checkError.value.message
-      : $t('claim.modal.failed_to_check'))
-  )
+  return checkResult.value !== null
+    ? null
+    : (publishError.value ??
+        (checkError.value instanceof Error
+          ? checkError.value.message
+          : $t('claim.modal.failed_to_check')))
 })
 
 const connectorModal = useModal('connector-modal')

app/components/Package/Skeleton.vue

@@ -8,7 +8,7 @@
   >
     <!-- Package header — matches area-header in [...name].vue -->
     <header class="area-header sticky top-14 z-1 bg-[--bg] py-2">
-      <div class="flex items-baseline gap-2 sm:gap-3 flex-wrap min-w-0">
+      <div class="flex items-baseline gap-x-2 gap-y-1 sm:gap-x-3 flex-wrap min-w-0">
         <!-- Package name -->
         <div class="min-w-0">
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">
@@ -19,8 +19,8 @@
         <span class="inline-flex items-baseline font-mono text-base sm:text-lg shrink-0">
           <SkeletonInline class="h-6 w-20" />
         </span>
-        <!-- Metrics badges placeholder -->
-        <div class="flex items-center gap-1.5 relative top-[5px] self-baseline ms-1 sm:ms-2">
+        <!-- Metrics badges -->
+        <div class="basis-full flex items-center gap-1.5 self-baseline">
           <SkeletonBlock class="w-16 h-5.5 rounded" />
           <SkeletonBlock class="w-13 h-5.5 rounded" />
           <SkeletonBlock class="w-13 h-5.5 rounded" />