Merge remote-tracking branch 'upstream/main' into fix-a11y-extract-btn-component

Author: essenmitsosse

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "i18n-ally.localesPaths": ["./i18n/locales"],
-  "i18n-ally.keystyle": "nested"
+  "i18n-ally.keystyle": "nested",
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

app/assets/main.css

@@ -5,6 +5,7 @@
   box-sizing: border-box;
 }
 
+:root:not([data-theme='light']),
 :root[data-theme='dark'] {
   /* background colors */
   --bg: var(--bg-color, oklch(0.145 0 0));

app/components/Modal.client.vue

@@ -5,6 +5,10 @@ const props = defineProps<{
 
 const dialogRef = useTemplateRef('dialogRef')
 
+const emit = defineEmits<{
+  (e: 'transitioned'): void
+}>()
+
 const modalTitleId = computed(() => {
   const id = getCurrentInstance()?.attrs.id
   return id ? `${id}-title` : undefined
@@ -14,6 +18,20 @@ function handleModalClose() {
   dialogRef.value?.close()
 }
 
+/**
+ * Emits `transitioned` once the dialog has finished its open opacity transition.
+ * This is used by consumers that need to run layout-sensitive logic (for example
+ * dispatching a resize) only after the modal is fully displayed.
+ */
+function onDialogTransitionEnd(event: TransitionEvent) {
+  const el = dialogRef.value
+  if (!el) return
+  if (!el.open) return
+  if (event.target !== el) return
+  if (event.propertyName !== 'opacity') return
+  emit('transitioned')
+}
+
 defineExpose({
   showModal: () => dialogRef.value?.showModal(),
   close: () => dialogRef.value?.close(),
@@ -28,6 +46,7 @@ defineExpose({
       class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg focus-visible:outline focus-visible:outline-accent/70"
       :aria-labelledby="modalTitleId"
       v-bind="$attrs"
+      @transitionend="onDialogTransitionEnd"
     >
       <!-- Modal top header section -->
       <div class="flex items-center justify-between mb-6">

app/components/Package/WeeklyDownloadStats.vue

@@ -9,16 +9,27 @@ const props = defineProps<{
 }>()
 
 const chartModal = useModal('chart-modal')
-
+const hasChartModalTransitioned = shallowRef(false)
 const isChartModalOpen = shallowRef(false)
+
 async function openChartModal() {
   isChartModalOpen.value = true
+  hasChartModalTransitioned.value = false
   // ensure the component renders before opening the dialog
   await nextTick()
   await nextTick()
   chartModal.open()
 }
 
+function handleModalClose() {
+  isChartModalOpen.value = false
+  hasChartModalTransitioned.value = false
+}
+
+function handleModalTransitioned() {
+  hasChartModalTransitioned.value = true
+}
+
 const { fetchPackageDownloadEvolution } = useCharts()
 
 const { accentColors, selectedAccentColor } = useAccentColor()
@@ -249,16 +260,45 @@ const config = computed(() => {
     </CollapsibleSection>
   </div>
 
-  <PackageChartModal v-if="isChartModalOpen" @close="isChartModalOpen = false">
-    <PackageDownloadAnalytics
-      :weeklyDownloads="weeklyDownloads"
-      :inModal="true"
-      :packageName="props.packageName"
-      :createdIso="createdIso"
+  <PackageChartModal @close="handleModalClose" @transitioned="handleModalTransitioned">
+    <!-- The Chart is mounted after the dialog has transitioned -->
+    <!-- This avoids flaky behavior that hides the chart's minimap half of the time -->
+    <Transition name="opacity" mode="out-in">
+      <PackageDownloadAnalytics
+        v-if="hasChartModalTransitioned"
+        :weeklyDownloads="weeklyDownloads"
+        :inModal="true"
+        :packageName="props.packageName"
+        :createdIso="createdIso"
+      />
+    </Transition>
+
+    <!-- This placeholder bears the same dimensions as the PackageDownloadAnalytics component -->
+    <!-- Avoids CLS when the dialog has transitioned -->
+    <div
+      v-if="!hasChartModalTransitioned"
+      class="w-full aspect-[390/634.5] sm:aspect-[718/622.797]"
     />
   </PackageChartModal>
 </template>
 
+<style scoped>
+.opacity-enter-active,
+.opacity-leave-active {
+  transition: opacity 200ms ease;
+}
+
+.opacity-enter-from,
+.opacity-leave-to {
+  opacity: 0;
+}
+
+.opacity-enter-to,
+.opacity-leave-from {
+  opacity: 1;
+}
+</style>
+
 <style>
 /** Overrides */
 .vue-ui-sparkline-title span {

app/components/SearchSuggestionCard.vue

@@ -14,7 +14,11 @@ defineProps<{
 <template>
   <BaseCard :isExactMatch="isExactMatch">
     <NuxtLink
-      :to="type === 'user' ? `/~${name}` : `/@${name}`"
+      :to="
+        type === 'user'
+          ? { name: '~username', params: { username: name } }
+          : { name: 'org', params: { org: name } }
+      "
       :data-suggestion-index="index"
       class="flex items-center gap-4 focus-visible:outline-none after:content-[''] after:absolute after:inset-0"
     >

app/pages/index.vue

@@ -56,7 +56,7 @@ defineOgImageComponent('Default', {
         </h1>
 
         <p
-          class="text-fg-muted text-lg sm:text-xl max-w-md mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both"
+          class="text-fg-muted text-lg sm:text-xl max-w-xl mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.1s"
         >
           {{ $t('tagline') }}

app/utils/input.ts

@@ -19,7 +19,7 @@ export function isEditableElement(target: EventTarget | null): boolean {
  */
 export function isKeyWithoutModifiers(event: KeyboardEvent, key: string): boolean {
   return (
-    event.key.toLowerCase() === key.toLowerCase() &&
+    event.key?.toLowerCase() === key.toLowerCase() &&
     !event.altKey &&
     !event.ctrlKey &&
     !event.metaKey &&

app/utils/package-name.ts

@@ -1,4 +1,5 @@
 import validatePackageName from 'validate-npm-package-name'
+import { encodePackageName } from '#shared/utils/npm'
 
 /**
  * Normalize a package name for comparison by removing common variations.
@@ -77,11 +78,7 @@ export async function checkPackageExists(
   options: Parameters<typeof $fetch>[1] = {},
 ): Promise<boolean> {
   try {
-    const encodedName = name.startsWith('@')
-      ? `@${encodeURIComponent(name.slice(1))}`
-      : encodeURIComponent(name)
-
-    await $fetch(`${NPM_REGISTRY}/${encodedName}`, {
+    await $fetch(`${NPM_REGISTRY}/${encodePackageName(name)}`, {
       ...options,
       method: 'HEAD',
     })

config/i18n.ts

@@ -156,6 +156,11 @@ const locales: (LocaleObjectData | (Omit<LocaleObjectData, 'code'> & { code: str
     file: 'hi-IN.json',
     name: 'हिंदी',
   },
+  {
+    code: 'te-IN',
+    file: 'te-IN.json',
+    name: 'తెలుగు',
+  },
   {
     code: 'mr-IN',
     file: 'mr-IN.json',
@@ -322,6 +327,11 @@ const locales: (LocaleObjectData | (Omit<LocaleObjectData, 'code'> & { code: str
       file: 'cy.json',
       name: 'Cymraeg',
     },*/
+  {
+    code: 'no-NO',
+    file: 'no-NO.json',
+    name: 'Norsk',
+  },
 ]
 
 const lunariaJSONFiles: Record<string, string> = {}

i18n/locales/de-DE.json

@@ -2,13 +2,13 @@
   "seo": {
     "home": {
       "title": "npmx - Paket-Browser für die npm Registry",
-      "description": "Ein besserer Browser für die npm Registry. Pakete suchen, durchstöbern und erkunden mit einer modernen Oberfläche."
+      "description": "Ein schnellerer, modernerer Browser für die npm Registry. Pakete suchen, durchstöbern und erkunden mit einer modernen Oberfläche."
     }
   },
   "version": "Version",
   "built_at": "erstellt {0}",
   "alt_logo": "npmx Logo",
-  "tagline": "ein besserer Browser für die npm Registry",
+  "tagline": "ein schnellerer, modernerer Browser für die npm Registry",
   "non_affiliation_disclaimer": "nicht verbunden mit npm, Inc.",
   "trademark_disclaimer": "npm ist eine eingetragene Marke von npm, Inc. Diese Seite ist nicht mit npm, Inc. verbunden.",
   "footer": {
@@ -319,7 +319,7 @@
     },
     "playgrounds": {
       "title": "Ausprobieren",
-      "choose": "Playground wählen"
+      "choose": "Testumgebung wählen"
     },
     "metrics": {
       "esm": "ES-Module unterstützt",
@@ -450,26 +450,26 @@
   },
   "operations": {
     "queue": {
-      "title": "Operations-Warteschlange",
+      "title": "Aktions-Warteschlange",
       "clear_all": "Alle löschen",
-      "refresh": "Operationen aktualisieren",
-      "empty": "Keine Operationen in der Warteschlange",
-      "empty_hint": "Füge Operationen von Paket- oder Org-Seiten hinzu",
-      "active_label": "Aktive Operationen",
+      "refresh": "Aktionen aktualisieren",
+      "empty": "Keine Aktionen in der Warteschlange",
+      "empty_hint": "Füge Aktionen von Paket- oder Org-Seiten hinzu",
+      "active_label": "Aktive Aktionen",
       "otp_required": "OTP erforderlich",
       "otp_prompt": "OTP eingeben, um fortzufahren",
       "otp_placeholder": "OTP-Code eingeben...",
       "otp_label": "Einmalpasswort",
       "retry_otp": "Mit OTP wiederholen",
       "retrying": "Wird wiederholt...",
-      "approve_operation": "Operation genehmigen",
-      "remove_operation": "Operation entfernen",
+      "approve_operation": "Aktion genehmigen",
+      "remove_operation": "Aktion entfernen",
       "approve_all": "Alle genehmigen",
       "execute": "Ausführen",
       "executing": "Wird ausgeführt...",
-      "log": "Log",
-      "log_label": "Log abgeschlossener Operationen",
-      "remove_from_log": "Aus Log entfernen"
+      "log": "Protokoll",
+      "log_label": "Protokoll abgeschlossener Aktionen",
+      "remove_from_log": "Aus Protokoll entfernen"
     }
   },
   "org": {
@@ -764,14 +764,14 @@
       "title": "Was wir sind",
       "better_ux_dx": "Bessere UX/DX",
       "admin_ui": "Admin-UI",
-      "description": "npmx ist eine {betterUxDx} für die npm-Paket-Registry und Tooling. Wir bieten eine schnelle, moderne Oberfläche zum Erkunden von Paketen mit Features wie Dark Mode, Tastaturnavigation, Code-Browsing und Verbindungen zu alternativen Registries wie {jsr}.",
+      "description": "npmx ist eine {betterUxDx} für die npm-Paket-Registry und Tooling. Wir bieten eine schnelle, moderne Oberfläche zum Erkunden von Paketen mit Funktionen wie Dark Mode, Tastaturnavigation, Code-Browsing und Verbindungen zu alternativen Registries wie {jsr}.",
       "admin_description": "Wir wollen auch eine bessere {adminUi} zum Verwalten deiner Pakete, Teams und Organisationen bieten — alles im Browser, angetrieben von deiner lokalen npm CLI."
     },
     "what_we_are_not": {
       "title": "Was wir nicht sind",
       "not_package_manager": "Kein Paketmanager.",
       "not_registry": "Keine Registry.",
-      "registry_description": "Wir hosten keine Pakete. Wir sind nur ein besserer Weg, sie zu durchstöbern.",
+      "registry_description": "Wir hosten keine Pakete. Wir sind nur ein schnellerer, modernerer Weg, sie zu durchstöbern.",
       "package_managers_exist": "{already} {people} {building} {really} {cool} {package} {managers}.",
       "words": {
         "already": "Es gibt",