Merge branch 'ux/make-package-name-selectable' of https://github.com/Adebesin-Cell/npmx.dev into ux/make-package-name-selectable

Author: Adebesin-Cell

app/components/CollapsibleSection.vue

@@ -123,7 +123,7 @@ useHead({
       :id="contentId"
       class="grid ms-6 transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
     >
-      <div class="min-h-0">
+      <div class="min-h-0 min-w-0">
         <slot />
       </div>
     </div>

app/components/MarkdownText.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { decodeHtmlEntities } from '~/utils/formatters'
+
 const props = defineProps<{
   text: string
   /** When true, renders link text without the anchor tag (useful when inside another link) */
@@ -21,8 +23,11 @@ function stripMarkdownImages(text: string): string {
 
 // Strip HTML tags and escape remaining HTML to prevent XSS
 function stripAndEscapeHtml(text: string): string {
-  // First strip markdown image badges
-  let stripped = stripMarkdownImages(text)
+  // First decode any HTML entities in the input
+  let stripped = decodeHtmlEntities(text)
+
+  // Then strip markdown image badges
+  stripped = stripMarkdownImages(stripped)
 
   // Then strip actual HTML tags (keep their text content)
   // Only match tags that start with a letter or / (to avoid matching things like "a < b > c")

app/components/OgImage/Package.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-withDefaults(
+import { computed, toRefs } from 'vue'
+
+const props = withDefaults(
   defineProps<{
     name: string
     version: string
+    stars: number
     downloads?: string
     license?: string
     primaryColor?: string
@@ -13,6 +16,15 @@ withDefaults(
     primaryColor: '#60a5fa',
   },
 )
+
+const { name, version, stars, downloads, license, primaryColor } = toRefs(props)
+
+const formattedStars = computed(() =>
+  Intl.NumberFormat('en', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(stars.value),
+)
 </script>
 
 <template>
@@ -88,6 +100,18 @@ withDefaults(
           </span>
         </span>
         <span v-if="license"> • {{ license }}</span>
+        <span class="flex items-center gap-2">
+          <span>•</span>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px">
+            <path
+              fill="currentColor"
+              d="m16 6.52l2.76 5.58l.46 1l1 .15l6.16.89l-4.38 4.3l-.75.73l.18 1l1.05 6.13l-5.51-2.89L16 23l-.93.49l-5.51 2.85l1-6.13l.18-1l-.74-.77l-4.42-4.35l6.16-.89l1-.15l.46-1zM16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z"
+            />
+          </svg>
+          <span>
+            {{ formattedStars }}
+          </span>
+        </span>
       </div>
     </div>
 

app/components/PackageCard.vue

@@ -7,7 +7,6 @@ const props = defineProps<{
   /** Whether to show the publisher username */
   showPublisher?: boolean
   prefetch?: boolean
-  selected?: boolean
   index?: number
   /** Search query for highlighting exact matches */
   searchQuery?: string
@@ -20,17 +19,12 @@ const isExactMatch = computed(() => {
   const name = props.result.package.name.toLowerCase()
   return query === name
 })
-
-const emit = defineEmits<{
-  focus: [index: number]
-}>()
 </script>
 
 <template>
   <article
-    class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
+    class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
-      'bg-bg-muted border-border-hover': selected,
       'border-accent/30 bg-accent/5': isExactMatch,
     }"
   >
@@ -50,8 +44,6 @@ const emit = defineEmits<{
           :prefetch-on="prefetch ? 'visibility' : 'interaction'"
           class="decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"
           :data-result-index="index"
-          @focus="index != null && emit('focus', index)"
-          @mouseenter="index != null && emit('focus', index)"
           >{{ result.package.name }}</NuxtLink
         >
         <span

app/components/PackageList.vue

@@ -29,8 +29,6 @@ const props = defineProps<{
   pageSize?: PageSize
   /** Initial page to scroll to (1-indexed) */
   initialPage?: number
-  /** Selected result index (for keyboard navigation) */
-  selectedIndex?: number
   /** Search query for highlighting exact matches */
   searchQuery?: string
   /** View mode: cards or table */
@@ -48,8 +46,6 @@ const emit = defineEmits<{
   'loadMore': []
   /** Emitted when the visible page changes */
   'pageChange': [page: number]
-  /** Emitted when a result is hovered/focused */
-  'select': [index: number]
   /** Emitted when sort option changes (table view) */
   'update:sortOption': [option: SortOption]
   /** Emitted when a keyword is clicked */
@@ -153,9 +149,7 @@ defineExpose({
         :results="displayedResults"
         :columns="columns"
         v-model:sort-option="sortOption"
-        :selected-index="selectedIndex"
         :is-loading="isLoading"
-        @select="emit('select', $event)"
         @click-keyword="emit('clickKeyword', $event)"
       />
     </template>
@@ -179,12 +173,10 @@ defineExpose({
                 :result="item as NpmSearchResult"
                 :heading-level="headingLevel"
                 :show-publisher="showPublisher"
-                :selected="index === (selectedIndex ?? -1)"
                 :index="index"
                 :search-query="searchQuery"
                 class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
                 :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
-                @focus="emit('select', $event)"
               />
             </div>
           </template>
@@ -199,7 +191,6 @@ defineExpose({
                   :result="item"
                   :heading-level="headingLevel"
                   :show-publisher="showPublisher"
-                  :selected="index === (selectedIndex ?? -1)"
                   :index="index"
                   :search-query="searchQuery"
                 />
@@ -230,12 +221,10 @@ defineExpose({
             :result="item"
             :heading-level="headingLevel"
             :show-publisher="showPublisher"
-            :selected="index === (selectedIndex ?? -1)"
             :index="index"
             :search-query="searchQuery"
             class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
             :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
-            @focus="emit('select', $event)"
           />
         </li>
       </ol>

app/components/PackagePlaygrounds.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PlaygroundLink } from '#shared/types'
+import { decodeHtmlEntities } from '~/utils/formatters'
 
 const props = defineProps<{
   links: PlaygroundLink[]
@@ -126,7 +127,7 @@ function focusMenuItem(index: number) {
             :class="[getIcon(firstLink.provider), getColor(firstLink.provider), 'w-4 h-4 shrink-0']"
             aria-hidden="true"
           />
-          <span class="truncate text-fg-muted">{{ firstLink.label }}</span>
+          <span class="truncate text-fg-muted">{{ decodeHtmlEntities(firstLink.label) }}</span>
         </a>
       </AppTooltip>
 
@@ -182,7 +183,7 @@ function focusMenuItem(index: number) {
                 :class="[getIcon(link.provider), getColor(link.provider), 'w-4 h-4 shrink-0']"
                 aria-hidden="true"
               />
-              <span class="truncate">{{ link.label }}</span>
+              <span class="truncate">{{ decodeHtmlEntities(link.label) }}</span>
             </a>
           </AppTooltip>
         </div>

app/components/PackageTable.vue

@@ -6,14 +6,12 @@ import { buildSortOption, parseSortOption, toggleDirection } from '#shared/types
 const props = defineProps<{
   results: NpmSearchResult[]
   columns: ColumnConfig[]
-  selectedIndex?: number
   isLoading?: boolean
 }>()
 
 const sortOption = defineModel<SortOption>('sortOption')
 
 const emit = defineEmits<{
-  select: [index: number]
   clickKeyword: [keyword: string]
 }>()
 
@@ -318,9 +316,7 @@ function getColumnLabelKey(id: ColumnId): string {
             :key="result.package.name"
             :result="result"
             :columns="columns"
-            :selected="selectedIndex === index"
             :index="index"
-            @focus="emit('select', index)"
             @click-keyword="emit('clickKeyword', $event)"
           />
         </template>

app/components/PackageTableRow.vue

@@ -5,12 +5,10 @@ import type { ColumnConfig } from '#shared/types/preferences'
 const props = defineProps<{
   result: NpmSearchResult
   columns: ColumnConfig[]
-  selected?: boolean
   index?: number
 }>()
 
 const emit = defineEmits<{
-  focus: []
   clickKeyword: [keyword: string]
 }>()
 
@@ -45,10 +43,9 @@ const allMaintainersText = computed(() => {
 
 <template>
   <tr
-    class="border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
-    :class="{ 'bg-bg-muted': selected }"
+    class="border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
     tabindex="0"
-    @focus="emit('focus')"
+    :data-result-index="index"
   >
     <!-- Name (always visible) -->
     <td class="py-2 px-3">

app/components/PackageVersions.vue

@@ -356,11 +356,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
 
           <!-- Version info -->
           <div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
-            <div>
+            <div class="overflow-hidden">
               <div>
                 <NuxtLink
                   :to="versionRoute(row.primaryVersion.version)"
-                  class="font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
+                  class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
                   :class="
                     row.primaryVersion.deprecated
                       ? 'text-red-400 hover:text-red-300'
@@ -421,7 +421,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <NuxtLink
                 :to="versionRoute(v.version)"
-                class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
                 :class="
                   v.deprecated
                     ? 'text-red-400 hover:text-red-300'
@@ -524,7 +524,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <NuxtLink
                 :to="versionRoute(row.primaryVersion.version)"
-                class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
                 :class="
                   row.primaryVersion.deprecated
                     ? 'text-red-400 hover:text-red-300'
@@ -600,7 +600,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <NuxtLink
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
@@ -661,7 +661,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <NuxtLink
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
@@ -683,7 +683,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       {{ group.versions[0]?.version }}
                     </NuxtLink>
                   </div>
-                  <div class="flex items-center gap-2 shrink-0">
+                  <div class="flex items-center gap-2 shrink-0 pe-2">
                     <DateTime
                       v-if="group.versions[0]?.time"
                       :datetime="group.versions[0]?.time"
@@ -720,7 +720,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <div class="flex items-center justify-between gap-2">
                     <NuxtLink
                       :to="versionRoute(v.version)"
-                      class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
                       :class="
                         v.deprecated
                           ? 'text-red-400 hover:text-red-300'
@@ -739,7 +739,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       />
                       {{ v.version }}
                     </NuxtLink>
-                    <div class="flex items-center gap-2 shrink-0">
+                    <div class="flex items-center gap-2 shrink-0 pe-2">
                       <DateTime
                         v-if="v.time"
                         :datetime="v.time"

app/components/SearchSuggestionCard.vue

@@ -4,24 +4,17 @@ defineProps<{
   type: 'user' | 'org'
   /** The name (username or org name) */
   name: string
-  /** Whether this suggestion is currently selected (keyboard nav) */
-  selected?: boolean
   /** Whether this is an exact match for the query */
   isExactMatch?: boolean
   /** Index for keyboard navigation */
   index?: number
 }>()
-
-const emit = defineEmits<{
-  focus: [index: number]
-}>()
 </script>
 
 <template>
   <article
-    class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
+    class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
-      'bg-bg-muted border-border-hover': selected,
       'border-accent/30 bg-accent/5': isExactMatch,
     }"
   >
@@ -35,8 +28,6 @@ const emit = defineEmits<{
       :to="type === 'user' ? `/~${name}` : `/@${name}`"
       :data-suggestion-index="index"
       class="flex items-center gap-4 focus-visible:outline-none after:content-[''] after:absolute after:inset-0"
-      @focus="index != null && emit('focus', index)"
-      @mouseenter="index != null && emit('focus', index)"
     >
       <!-- Avatar placeholder -->
       <div