Merge branch 'main' into feat/atproto-blog-fe

Author: whitep4nth3r

app/components/AppFooter.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
+
+const modalRef = useTemplateRef('modalRef')
+const showModal = () => modalRef.value?.showModal?.()
 </script>
 
 <template>
@@ -36,6 +39,73 @@ const isHome = computed(() => route.name === 'index')
           <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"
+            @click.prevent="showModal"
+            aria-haspopup="dialog"
+          >
+            {{ $t('footer.keyboard_shortcuts') }}
+          </button>
+
+          <Modal
+            ref="modalRef"
+            :modalTitle="$t('footer.keyboard_shortcuts')"
+            class="w-auto max-w-lg"
+          >
+            <p class="mb-2 font-mono text-fg-subtle">
+              {{ $t('shortcuts.section.global') }}
+            </p>
+            <ul class="mb-6 flex flex-col gap-2">
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">/</kbd>
+                <span>{{ $t('shortcuts.focus_search') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">?</kbd>
+                <span>{{ $t('shortcuts.show_kbd_hints') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">,</kbd>
+                <span>{{ $t('shortcuts.settings') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">c</kbd>
+                <span>{{ $t('shortcuts.compare') }}</span>
+              </li>
+            </ul>
+            <p class="mb-2 font-mono text-fg-subtle">
+              {{ $t('shortcuts.section.search') }}
+            </p>
+            <ul class="mb-6 flex flex-col gap-2">
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
+                <span>{{ $t('shortcuts.navigate_results') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">Enter</kbd>
+                <span>{{ $t('shortcuts.go_to_result') }}</span>
+              </li>
+            </ul>
+            <p class="mb-2 font-mono text-fg-subtle">
+              {{ $t('shortcuts.section.package') }}
+            </p>
+            <ul class="mb-6 flex flex-col gap-2">
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">.</kbd>
+                <span>{{ $t('shortcuts.open_code_view') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">d</kbd>
+                <span>{{ $t('shortcuts.open_docs') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">c</kbd>
+                <span>{{ $t('shortcuts.compare_from_package') }}</span>
+              </li>
+            </ul>
+          </Modal>
         </div>
       </div>
       <p class="text-xs text-fg-muted text-center sm:text-start m-0">
@@ -45,3 +115,9 @@ const isHome = computed(() => route.name === 'index')
     </div>
   </footer>
 </template>
+
+<style scoped>
+.kbd {
+  @apply items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2;
+}
+</style>

app/components/AppHeader.vue

@@ -122,8 +122,12 @@ onKeyStroke(
 
       <!-- Center: Search bar + nav items -->
       <div
-        class="flex-1 flex items-center justify-center md:gap-6"
-        :class="{ 'hidden sm:flex': !isSearchExpanded }"
+        class="flex-1 flex items-center md:gap-6"
+        :class="{
+          'hidden sm:flex': !isSearchExpanded,
+          'justify-end': isOnHomePage,
+          'justify-center': !isOnHomePage,
+        }"
       >
         <!-- Search bar (hidden on mobile unless expanded) -->
         <HeaderSearchBox

app/components/Compare/PackageSelector.vue

@@ -139,17 +139,16 @@ function handleBlur() {
 
     <!-- Add package input -->
     <div v-if="packages.length < maxPackages" class="relative">
-      <div class="relative group">
+      <div class="relative group flex items-center">
         <label for="package-search" class="sr-only">
           {{ $t('compare.selector.search_label') }}
         </label>
         <span
-          class="absolute inset-y-0 start-3 flex items-center text-fg-subtle pointer-events-none group-focus-within:text-accent"
-          aria-hidden="true"
+          class="absolute inset-is-3 text-fg-subtle font-mono text-md pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
         >
-          <span class="i-carbon:search w-4 h-4" />
+          /
         </span>
-        <input
+        <InputBase
           id="package-search"
           v-model="inputValue"
           type="text"
@@ -158,7 +157,9 @@ function handleBlur() {
               ? $t('compare.selector.search_first')
               : $t('compare.selector.search_add')
           "
-          class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+          no-correct
+          size="medium"
+          class="w-full min-w-25 ps-7"
           aria-autocomplete="list"
           @focus="isInputFocused = true"
           @blur="handleBlur"

app/components/Filter/Panel.vue

@@ -239,13 +239,15 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               </button>
             </div>
           </div>
-          <input
+          <InputBase
             id="filter-search"
             type="text"
             :value="filters.text"
             :placeholder="searchPlaceholder"
             autocomplete="off"
-            class="w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+            class="w-full min-w-25"
+            size="medium"
+            no-correct
             @input="handleTextInput"
           />
         </div>

app/components/Header/AuthModal.client.vue

@@ -89,14 +89,15 @@ watch(handleInput, newHandleInput => {
           >
             {{ $t('auth.modal.handle_label') }}
           </label>
-          <input
+          <InputBase
             id="handle-input"
             v-model="handleInput"
             type="text"
             name="handle"
             :placeholder="$t('auth.modal.handle_placeholder')"
-            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)"
+            no-correct
+            class="w-full"
+            size="medium"
           />
           <p v-if="errorMessage" class="text-red-500 text-xs mt-1" role="alert">
             {{ errorMessage }}

app/components/Header/ConnectorModal.vue

@@ -161,14 +161,15 @@ function handleDisconnect() {
           >
             {{ $t('connector.modal.token_label') }}
           </label>
-          <input
+          <InputBase
             id="connector-token"
             v-model="tokenInput"
             type="password"
             name="connector-token"
             :placeholder="$t('connector.modal.token_placeholder')"
-            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-visible:outline-none focus-visible:ring-2 focus-visible:outline-accent/70"
+            no-correct
+            class="w-full"
+            size="medium"
           />
         </div>
 
@@ -183,14 +184,15 @@ function handleDisconnect() {
             >
               {{ $t('connector.modal.port_label') }}
             </label>
-            <input
+            <InputBase
               id="connector-port"
               v-model="portInput"
               type="text"
               name="connector-port"
               inputmode="numeric"
               autocomplete="off"
-              class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 hover:border-fg-subtle focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:outline-accent/70"
+              class="w-full"
+              size="medium"
             />
           </div>
         </details>

app/components/Header/SearchBox.vue

@@ -70,15 +70,6 @@ watch(
   },
 )
 
-function handleSearchBlur() {
-  isSearchFocused.value = false
-  emit('blur')
-}
-function handleSearchFocus() {
-  isSearchFocused.value = true
-  emit('focus')
-}
-
 function handleSubmit() {
   if (pagesWithLocalFilter.has(route.name as string)) {
     router.push({
@@ -114,17 +105,18 @@ defineExpose({ focus })
             /
           </span>
 
-          <input
+          <InputBase
             id="header-search"
             ref="inputRef"
             v-model="searchQuery"
             type="search"
             name="q"
             :placeholder="$t('search.placeholder')"
-            v-bind="noCorrect"
-            class="w-full min-w-25 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,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
-            @focus="handleSearchFocus"
-            @blur="handleSearchBlur"
+            no-correct
+            class="w-full min-w-25 ps-7"
+            @focus="isSearchFocused = true"
+            @blur="isSearchFocused = false"
+            size="small"
           />
           <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
         </div>

app/components/Input/Base.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { noCorrect } from '~/utils/input'
+
+const model = defineModel<string>({ default: '' })
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    size?: 'small' | 'medium' | 'large'
+    noCorrect?: boolean
+  }>(),
+  {
+    size: 'medium',
+    noCorrect: true,
+  },
+)
+
+const emit = defineEmits<{
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+}>()
+
+const el = useTemplateRef('el')
+
+defineExpose({
+  focus: () => el.value?.focus(),
+  blur: () => el.value?.blur(),
+})
+</script>
+
+<template>
+  <input
+    ref="el"
+    v-model="model"
+    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="{
+      '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',
+    }"
+    :disabled="
+      /** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */
+      disabled ? true : undefined
+    "
+  />
+</template>

app/components/Org/MembersPanel.vue

@@ -331,14 +331,15 @@ watch(lastExecutionTime, () => {
           aria-hidden="true"
         />
         <label for="members-search" class="sr-only">{{ $t('org.members.filter_label') }}</label>
-        <input
+        <InputBase
           id="members-search"
           v-model="searchQuery"
           type="search"
           name="members-search"
           :placeholder="$t('org.members.filter_placeholder')"
-          v-bind="noCorrect"
-          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+          no-correct
+          class="w-full min-w-25 ps-7"
+          size="small"
         />
       </div>
       <div
@@ -516,14 +517,15 @@ watch(lastExecutionTime, () => {
           <label for="new-member-username" class="sr-only">{{
             $t('org.members.username_label')
           }}</label>
-          <input
+          <InputBase
             id="new-member-username"
             v-model="newUsername"
             type="text"
             name="new-member-username"
             :placeholder="$t('org.members.username_placeholder')"
-            v-bind="noCorrect"
-            class="w-full px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
+            no-correct
+            class="w-full min-w-25"
+            size="small"
           />
           <div class="flex items-center gap-2">
             <label for="new-member-role" class="sr-only">{{ $t('org.members.role_label') }}</label>
@@ -553,7 +555,7 @@ watch(lastExecutionTime, () => {
             <button
               type="submit"
               :disabled="!newUsername.trim() || isAddingMember"
-              class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
+              class="px-3 py-2 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
             >
               {{ isAddingMember ? '…' : $t('org.members.add_button') }}
             </button>

app/components/Org/OperationsQueue.vue

@@ -242,7 +242,7 @@ watch(isExecuting, executing => {
       </div>
       <form class="flex items-center gap-2" @submit.prevent="handleRetryWithOtp">
         <label for="otp-input" class="sr-only">{{ $t('operations.queue.otp_label') }}</label>
-        <input
+        <InputBase
           id="otp-input"
           v-model="otpInput"
           type="text"
@@ -252,12 +252,13 @@ watch(isExecuting, executing => {
           :placeholder="$t('operations.queue.otp_placeholder')"
           autocomplete="one-time-code"
           spellcheck="false"
-          class="flex-1 px-3 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
+          class="flex-1 min-w-25"
+          size="small"
         />
         <button
           type="submit"
           :disabled="!otpInput.trim() || isExecuting"
-          class="px-3 py-1.5 font-mono text-xs text-bg bg-amber-500 rounded transition-all duration-200 hover:bg-amber-400 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/50"
+          class="px-3 py-2 font-mono text-xs text-bg bg-amber-500 rounded transition-all duration-200 hover:bg-amber-400 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/50"
         >
           {{ isExecuting ? $t('operations.queue.retrying') : $t('operations.queue.retry_otp') }}
         </button>