fix: merge conflict

Author: Flo0806

app/app.vue

@@ -1,20 +1,38 @@
 <script setup lang="ts">
+import type { Directions } from '@nuxtjs/i18n'
 import { useEventListener } from '@vueuse/core'
 
 const route = useRoute()
 const router = useRouter()
+const { locale, locales } = useI18n()
 
 // Initialize accent color before hydration to prevent flash
 initAccentOnPrehydrate()
 
 const isHomepage = computed(() => route.name === 'index')
 
+const localeMap = locales.value.reduce(
+  (acc, l) => {
+    acc[l.code] = l.dir ?? 'ltr'
+    return acc
+  },
+  {} as Record<string, Directions>,
+)
+
 useHead({
+  htmlAttrs: {
+    lang: () => locale.value,
+    dir: () => localeMap[locale.value] ?? 'ltr',
+  },
   titleTemplate: titleChunk => {
     return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'
   },
 })
 
+if (import.meta.server) {
+  setJsonLd(createWebSiteSchema())
+}
+
 // Global keyboard shortcut: "/" focuses search or navigates to search page
 function handleGlobalKeydown(e: KeyboardEvent) {
   const target = e.target as HTMLElement

app/assets/main.css

@@ -154,7 +154,7 @@ button {
 
 /* Skip link */
 .skip-link {
-  position: absolute;
+  position: fixed;
   top: -100%;
   left: 0;
   padding: 0.5rem 1rem;
@@ -165,6 +165,15 @@ button {
   transition: top 0.2s ease;
 }
 
+html[dir='rtl'] .skip-link {
+  left: unset;
+  right: 0;
+}
+
+.skip-link:hover {
+  color: var(--bg);
+  text-decoration: underline;
+}
 .skip-link:focus {
   top: 0;
 }

app/components/AccentColorPicker.vue

@@ -2,28 +2,51 @@
 import { useAccentColor } from '~/composables/useSettings'
 
 const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
+
+onPrehydrate(el => {
+  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+  const id = settings.accentColorId
+  if (id) {
+    const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
+    if (input) {
+      input.checked = true
+    }
+  }
+})
 </script>
 
 <template>
-  <div role="listbox" :aria-label="$t('settings.accent_colors')" class="flex items-center gap-4">
-    <button
+  <fieldset class="flex items-center gap-4">
+    <legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
+    <label
       v-for="color in accentColors"
       :key="color.id"
-      type="button"
-      role="option"
-      :aria-selected="selectedAccentColor === color.id"
-      :aria-label="color.name"
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring aria-selected:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
       :style="{ backgroundColor: color.value }"
-      @click="setAccentColor(color.id)"
-    />
-    <button
-      type="button"
-      :aria-label="$t('settings.clear_accent')"
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring flex items-center justify-center bg-accent-fallback"
-      @click="setAccentColor(null)"
     >
+      <input
+        type="radio"
+        name="accent-color"
+        class="sr-only"
+        :value="color.id"
+        :checked="selectedAccentColor === color.id"
+        :aria-label="color.name"
+        @change="setAccentColor(color.id)"
+      />
+    </label>
+    <label
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-accent-fallback"
+    >
+      <input
+        type="radio"
+        name="accent-color"
+        class="sr-only"
+        value=""
+        :checked="selectedAccentColor === null"
+        :aria-label="$t('settings.clear_accent')"
+        @change="setAccentColor(null)"
+      />
       <span class="i-carbon-error size-4 text-bg" aria-hidden="true" />
-    </button>
-  </div>
+    </label>
+  </fieldset>
 </template>

app/components/AppHeader.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { debounce } from 'perfect-debounce'
-
 withDefaults(
   defineProps<{
     showLogo?: boolean
@@ -15,28 +13,8 @@ withDefaults(
 const { isConnected, npmUser } = useConnector()
 
 const router = useRouter()
-const route = useRoute()
-
-const searchQuery = ref('')
-const isSearchFocused = ref(false)
-
-const showSearchBar = computed(() => {
-  return route.name !== 'search' && route.name !== 'index'
-})
-
-const debouncedNavigate = debounce(async () => {
-  const query = searchQuery.value.trim()
-  await router.push({
-    name: 'search',
-    query: query ? { q: query } : undefined,
-  })
-  // allow time for the navigation to occur before resetting searchQuery
-  setTimeout(() => (searchQuery.value = ''), 1000)
-}, 100)
 
-async function handleSearchInput() {
-  debouncedNavigate()
-}
+const showFullSearch = ref(false)
 
 onKeyStroke(',', e => {
   // Don't trigger if user is typing in an input
@@ -57,7 +35,7 @@ onKeyStroke(',', e => {
       class="container h-14 flex items-center justify-start"
     >
       <!-- Start: Logo -->
-      <div class="flex-shrink-0">
+      <div :class="{ 'hidden sm:block': showFullSearch }" class="flex-shrink-0">
         <NuxtLink
           v-if="showLogo"
           to="/"
@@ -71,41 +49,17 @@ onKeyStroke(',', e => {
       </div>
 
       <!-- Center: Search bar + nav items -->
-      <div class="flex-1 flex items-center justify-center gap-4 sm:gap-6">
-        <!-- Search bar (shown on all pages except home and search) -->
-        <search v-if="showSearchBar" class="hidden sm:block flex-1 max-w-md">
-          <form method="GET" action="/search" class="relative" @submit.prevent="handleSearchInput">
-            <label for="header-search" class="sr-only">
-              {{ $t('search.label') }}
-            </label>
-
-            <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
-              <div class="search-box relative flex items-center">
-                <span
-                  class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
-                >
-                  /
-                </span>
-
-                <input
-                  id="header-search"
-                  v-model="searchQuery"
-                  type="search"
-                  name="q"
-                  :placeholder="$t('search.placeholder')"
-                  v-bind="noCorrect"
-                  class="w-full bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-                  @input="handleSearchInput"
-                  @focus="isSearchFocused = true"
-                  @blur="isSearchFocused = false"
-                />
-                <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
-              </div>
-            </div>
-          </form>
-        </search>
-
-        <ul class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0">
+      <div class="flex-1 flex items-center justify-center md:gap-6 mx-2">
+        <!-- Search bar (shown on all pages except home) -->
+        <SearchBox
+          :inputClass="showFullSearch ? '' : 'max-w[6rem]'"
+          @focus="showFullSearch = true"
+          @blur="showFullSearch = false"
+        />
+        <ul
+          :class="{ 'hidden sm:flex': showFullSearch }"
+          class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0"
+        >
           <!-- Packages dropdown (when connected) -->
           <li v-if="isConnected && npmUser" class="flex items-center">
             <HeaderPackagesDropdown :username="npmUser" />
@@ -119,11 +73,13 @@ onKeyStroke(',', e => {
       </div>
 
       <!-- End: Bookmarks + Settings + Connector -->
-      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ms-auto sm:ms-0">
+      <div
+        :class="{ 'hidden sm:flex': showFullSearch }"
+        class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ms-auto sm:ms-0"
+      >
         <ClientOnly>
           <HeaderBookmarksDropdown />
         </ClientOnly>
-
         <NuxtLink
           to="/about"
           class="sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"

app/components/ColumnPicker.vue

@@ -93,7 +93,7 @@ function handleReset() {
         v-if="isOpen"
         ref="menuRef"
         :id="menuId"
-        class="absolute right-0 mt-2 w-56 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
+        class="absolute right-0 mt-2 w-60 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
         role="group"
         :aria-label="$t('filters.columns.show')"
       >
@@ -109,7 +109,7 @@ function handleReset() {
             <label
               v-for="column in toggleableColumns"
               :key="column.id"
-              class="flex items-center px-3 py-2 transition-colors duration-200"
+              class="flex gap-2 items-center px-3 py-2 transition-colors duration-200"
               :class="
                 column.disabled
                   ? 'opacity-50 cursor-not-allowed'
@@ -124,16 +124,20 @@ function handleReset() {
                 class="w-4 h-4 accent-fg bg-bg-muted border-border rounded disabled:opacity-50"
                 @change="!column.disabled && emit('toggle', column.id)"
               />
-              <span class="ml-2 text-sm text-fg-muted font-mono flex-1">
+              <span class="text-sm text-fg-muted font-mono flex-1">
                 {{ getColumnLabel(column.id) }}
               </span>
-              <span
+              <AppTooltip
                 v-if="column.disabled"
                 :id="`${column.id}-disabled-reason`"
-                class="text-xs text-fg-subtle italic"
+                class="text-fg-subtle"
+                :text="$t('filters.columns.coming_soon')"
+                position="left"
               >
-                {{ $t('filters.columns.coming_soon') }}
-              </span>
+                <span class="size-4 flex justify-center items-center text-xs border rounded-full"
+                  >i</span
+                >
+              </AppTooltip>
             </label>
           </div>
 

app/components/DateTime.vue

@@ -51,26 +51,17 @@ const titleValue = computed(() => {
 </script>
 
 <template>
-  <ClientOnly>
-    <NuxtTime
-      v-if="relativeDates"
-      :datetime="datetime"
-      :title="titleValue"
-      relative
-      :locale="locale"
-    />
-    <NuxtTime
-      v-else
-      :datetime="datetime"
-      :title="titleValue"
-      :date-style="dateStyle"
-      :year="year"
-      :month="month"
-      :day="day"
-      :locale="locale"
-    />
-    <template #fallback>
+  <span>
+    <ClientOnly>
       <NuxtTime
+        v-if="relativeDates"
+        :datetime="datetime"
+        :title="titleValue"
+        relative
+        :locale="locale"
+      />
+      <NuxtTime
+        v-else
         :datetime="datetime"
         :title="titleValue"
         :date-style="dateStyle"
@@ -79,6 +70,17 @@ const titleValue = computed(() => {
         :day="day"
         :locale="locale"
       />
-    </template>
-  </ClientOnly>
+      <template #fallback>
+        <NuxtTime
+          :datetime="datetime"
+          :title="titleValue"
+          :date-style="dateStyle"
+          :year="year"
+          :month="month"
+          :day="day"
+          :locale="locale"
+        />
+      </template>
+    </ClientOnly>
+  </span>
 </template>

app/components/OrgMembersPanel.vue

@@ -286,11 +286,7 @@ watch(lastExecutionTime, () => {
 </script>
 
 <template>
-  <section
-    v-if="isConnected"
-    aria-labelledby="members-heading"
-    class="bg-bg-subtle border border-border rounded-lg overflow-hidden"
-  >
+  <section v-if="isConnected" class="bg-bg-subtle border border-border rounded-lg overflow-hidden">
     <!-- Header -->
     <div class="flex items-center justify-between p-4 border-b border-border">
       <h2 id="members-heading" class="font-mono text-sm font-medium flex items-center gap-2">