Merge branch 'main' into feat/org-packages-fancy

Author: serhalp

.gitattributes

@@ -0,0 +1 @@
+* text eol=lf

README.md

@@ -21,7 +21,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 ## Shortcuts
 
 > [!IMPORTANT]  
-> We're keeping the website, repository, and our discord community low-profile until the browser is polished enough. We'll do a formal announcement at that point. Please avoid sharing the website or the invite link to discord on social media directly. The repo is public, so people who care about the project can easily find it and join us. Anyone who wants to help is more than welcome to [join the community](https://chat.npm.dev). If you know others who would be interested, please invite them too!
+> We're keeping the website, repository, and our discord community low-profile until the browser is polished enough. We'll do a formal announcement at that point. Please avoid sharing the website or the invite link to discord on social media directly. The repo is public, so people who care about the project can easily find it and join us. Anyone who wants to help is more than welcome to [join the community](https://chat.npmx.dev). If you know others who would be interested, please invite them too!
 
 - [chat.npmx.dev](https://chat.npmx.dev) - Discord Server
 - [social.npmx.dev](https://social.npmx.dev) - Bluesky Profile

app/assets/main.css

@@ -157,6 +157,16 @@ button {
   top: 0;
 }
 
+/* Shiki theme colors */
+html.light .shiki,
+html.light .shiki span {
+  color: var(--shiki-light) !important;
+  background-color: var(--shiki-light-bg) !important;
+  font-style: var(--shiki-light-font-style) !important;
+  font-weight: var(--shiki-light-font-weight) !important;
+  text-decoration: var(--shiki-light-text-decoration) !important;
+}
+
 /* README prose styling */
 .readme-content {
   color: var(--fg-muted);
@@ -238,7 +248,7 @@ button {
 .readme-content pre,
 .readme-content .shiki {
   background: oklch(0.145 0 0) !important;
-  border: 1px solid oklch(0.2686 0 0);
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 1rem;
   overflow-x: auto;

app/components/AccentColorPicker.vue

@@ -5,7 +5,7 @@ const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 </script>
 
 <template>
-  <div role="listbox" aria-label="Accent colors" class="flex items-center justify-between">
+  <div role="listbox" aria-label="Accent colors" class="flex items-center gap-4">
     <button
       v-for="color in accentColors"
       :key="color.id"

app/components/AppFooter.vue

@@ -89,6 +89,14 @@ onMounted(() => {
         <!-- On mobile, show disclaimer here instead of tagline -->
         <p class="text-xs text-fg-muted m-0 sm:hidden">{{ $t('non_affiliation_disclaimer') }}</p>
         <div class="flex items-center gap-4 sm:gap-6">
+          <a
+            href="https://docs.npmx.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link-subtle font-mono text-xs min-h-11 min-w- flex items-center"
+          >
+            {{ $t('footer.docs') }}
+          </a>
           <a
             href="https://repo.npmx.dev"
             target="_blank"

app/components/AppHeader.vue

@@ -11,6 +11,18 @@ withDefaults(
 )
 
 const { isConnected, npmUser } = useConnector()
+
+const router = useRouter()
+onKeyStroke(',', e => {
+  // Don't trigger if user is typing in an input
+  const target = e.target as HTMLElement
+  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+    return
+  }
+
+  e.preventDefault()
+  router.push('/settings')
+})
 </script>
 
 <template>
@@ -64,9 +76,19 @@ const { isConnected, npmUser } = useConnector()
 
       <!-- Right: User status + GitHub -->
       <div class="flex-shrink-0 flex items-center gap-6">
-        <ClientOnly>
-          <SettingsMenu />
-        </ClientOnly>
+        <NuxtLink
+          to="/settings"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-2"
+          aria-keyshortcuts=","
+        >
+          {{ $t('nav.settings') }}
+          <kbd
+            class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
+            aria-hidden="true"
+          >
+            ,
+          </kbd>
+        </NuxtLink>
 
         <div v-if="showConnector">
           <ConnectorStatus />

app/components/ChartModal.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 const open = defineModel<boolean>('open', { default: false })
 
+function close() {
+  open.value = false
+}
+
 function handleKeydown(event: KeyboardEvent) {
   if (event.key === 'Escape') {
-    open.value = false
+    close()
   }
 }
 </script>
@@ -53,6 +57,8 @@ function handleKeydown(event: KeyboardEvent) {
               <slot />
             </div>
           </div>
+
+          <slot name="after" v-bind="{ close }" />
         </div>
       </div>
     </Transition>

app/components/ClaimPackageModal.vue

@@ -160,7 +160,7 @@ const connectorModalOpen = shallowRef(false)
               <button
                 type="button"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                :aria-label="$t('claim.modal.close')"
+                :aria-label="$t('common.close')"
                 @click="open = false"
               >
                 <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
@@ -203,7 +203,7 @@ const connectorModalOpen = shallowRef(false)
                   class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                   @click="open = false"
                 >
-                  {{ $t('claim.modal.close') }}
+                  {{ $t('common.close') }}
                 </button>
               </div>
             </div>
@@ -370,7 +370,7 @@ const connectorModalOpen = shallowRef(false)
                     >
                       {{ $t('claim.modal.preview_json') }}
                     </summary>
-                    <pre class="p-3 text-xs font-mono text-fg-muted bg-[#0d0d0d] overflow-x-auto">{{
+                    <pre class="p-3 text-xs font-mono text-fg-muted bg-bg-muted overflow-x-auto">{{
                       JSON.stringify(previewPackageJson, null, 2)
                     }}</pre>
                   </details>
@@ -395,7 +395,7 @@ const connectorModalOpen = shallowRef(false)
                 class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                 @click="open = false"
               >
-                {{ $t('claim.modal.close') }}
+                {{ $t('common.close') }}
               </button>
             </div>
 
@@ -412,7 +412,7 @@ const connectorModalOpen = shallowRef(false)
                 class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                 @click="checkAvailability"
               >
-                {{ $t('claim.modal.retry') }}
+                {{ $t('common.retry') }}
               </button>
             </div>
           </div>

app/components/ConnectorModal.vue

@@ -83,7 +83,7 @@ watch(open, isOpen => {
               <button
                 type="button"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                :aria-label="$t('connector.modal.close')"
+                :aria-label="$t('common.close')"
                 @click="open = false"
               >
                 <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
@@ -125,10 +125,10 @@ watch(open, isOpen => {
               </p>
 
               <div
-                class="flex items-center p-3 bg-[#0d0d0d] border border-border rounded-lg font-mono text-sm"
+                class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
               >
                 <span class="text-fg-subtle">$</span>
-                <span class="text-fg ml-2">{{ executeNpmxConnectorCommand }}</span>
+                <span class="text-fg-subtle ml-2">{{ executeNpmxConnectorCommand }}</span>
                 <button
                   type="button"
                   :aria-label="

app/components/DateTime.vue

@@ -29,6 +29,8 @@ const props = withDefaults(
   },
 )
 
+const { locale } = useI18n()
+
 const relativeDates = useRelativeDates()
 
 // Compute the title - always show full date for accessibility
@@ -41,7 +43,13 @@ const titleValue = computed(() => {
 
 <template>
   <ClientOnly>
-    <NuxtTime v-if="relativeDates" :datetime="datetime" :title="titleValue" relative />
+    <NuxtTime
+      v-if="relativeDates"
+      :datetime="datetime"
+      :title="titleValue"
+      relative
+      :locale="locale"
+    />
     <NuxtTime
       v-else
       :datetime="datetime"
@@ -50,6 +58,7 @@ const titleValue = computed(() => {
       :year="year"
       :month="month"
       :day="day"
+      :locale="locale"
     />
     <template #fallback>
       <NuxtTime
@@ -59,6 +68,7 @@ const titleValue = computed(() => {
         :year="year"
         :month="month"
         :day="day"
+        :locale="locale"
       />
     </template>
   </ClientOnly>