refactor: use button and link components on compare page

Author: essenmitsosse

app/components/Compare/ComparisonGrid.vue

@@ -40,13 +40,13 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
         <!-- Package columns -->
         <div v-for="col in columns" :key="col.name" class="comparison-cell comparison-cell-header">
           <span class="inline-flex items-center gap-1.5 truncate">
-            <NuxtLink
+            <LinkBase
               :to="packageRoute(col.name, col.version)"
-              class="link-subtle font-mono text-sm font-medium text-fg truncate"
+              class="text-sm"
               :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
               {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
-            </NuxtLink>
+            </LinkBase>
             <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
               <span
                 class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
@@ -79,13 +79,9 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
                 <p class="text-xs text-fg-muted">
                   <i18n-t keypath="compare.no_dependency.tooltip_description" tag="span">
                     <template #link>
-                      <a
-                        href="https://e18e.dev/docs/replacements/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-accent hover:underline"
-                        >{{ $t('compare.no_dependency.e18e_community') }}</a
-                      >
+                      <LinkBase to="https://e18e.dev/docs/replacements/">{{
+                        $t('compare.no_dependency.e18e_community')
+                      }}</LinkBase>
                     </template>
                   </i18n-t>
                 </p>

app/components/Compare/FacetSelector.vue

@@ -32,47 +32,39 @@ function isCategoryNoneSelected(category: string): boolean {
         <span class="text-3xs text-fg-subtle uppercase tracking-wider">
           {{ getCategoryLabel(category) }}
         </span>
-        <button
-          type="button"
-          class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
-          :class="
-            isCategoryAllSelected(category)
-              ? 'text-fg-muted'
-              : 'text-fg-muted/60 hover:text-fg-muted'
-          "
+        <!-- TODO: These should be radios, since they are mutually exclusive, and currently this behavior is faked with buttons -->
+        <ButtonBase
           :aria-label="
             $t('compare.facets.select_category', { category: getCategoryLabel(category) })
           "
+          :aria-pressed="isCategoryAllSelected(category)"
           :disabled="isCategoryAllSelected(category)"
           @click="selectCategory(category)"
+          size="small"
         >
           {{ $t('compare.facets.all') }}
-        </button>
+        </ButtonBase>
         <span class="text-2xs text-fg-muted/40">/</span>
-        <button
-          type="button"
-          class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
-          :class="
-            isCategoryNoneSelected(category)
-              ? 'text-fg-muted'
-              : 'text-fg-muted/60 hover:text-fg-muted'
-          "
+        <ButtonBase
           :aria-label="
             $t('compare.facets.deselect_category', { category: getCategoryLabel(category) })
           "
+          :aria-pressed="isCategoryNoneSelected(category)"
           :disabled="isCategoryNoneSelected(category)"
           @click="deselectCategory(category)"
+          size="small"
         >
           {{ $t('compare.facets.none') }}
-        </button>
+        </ButtonBase>
       </div>
 
       <!-- Facet buttons -->
       <div class="flex items-center gap-1.5 flex-wrap" role="group">
-        <button
+        <!-- TODO: These should be checkboxes -->
+        <ButtonBase
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
-          type="button"
+          size="small"
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
           :disabled="facet.comingSoon"
           :aria-pressed="isFacetSelected(facet.id)"
@@ -86,18 +78,19 @@ function isCategoryNoneSelected(category: string): boolean {
                 : 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border'
           "
           @click="!facet.comingSoon && toggleFacet(facet.id)"
+          :classicon="
+            facet.comingSoon
+              ? undefined
+              : isFacetSelected(facet.id)
+                ? 'i-carbon:checkmark'
+                : 'i-carbon:add'
+          "
         >
-          <span
-            v-if="!facet.comingSoon"
-            class="w-3 h-3"
-            :class="isFacetSelected(facet.id) ? 'i-carbon:checkmark' : 'i-carbon:add'"
-            aria-hidden="true"
-          />
           {{ facet.label }}
           <span v-if="facet.comingSoon" class="text-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
-        </button>
+        </ButtonBase>
       </div>
     </div>
   </div>

app/components/Compare/PackageSelector.vue

@@ -103,38 +103,28 @@ function handleBlur() {
   <div class="space-y-3">
     <!-- Selected packages -->
     <div v-if="packages.length > 0" class="flex flex-wrap gap-2">
-      <div
-        v-for="pkg in packages"
-        :key="pkg"
-        class="inline-flex items-center gap-2 px-3 py-1.5 bg-bg-subtle border border-border rounded-md"
-      >
+      <TagStatic v-for="pkg in packages" :key="pkg">
         <!-- No dependency display -->
         <template v-if="pkg === NO_DEPENDENCY_ID">
           <span class="text-sm text-accent italic flex items-center gap-1.5">
             <span class="i-carbon:clean w-3.5 h-3.5" aria-hidden="true" />
             {{ $t('compare.no_dependency.label') }}
           </span>
         </template>
-        <NuxtLink
-          v-else
-          :to="packageRoute(pkg)"
-          class="font-mono text-sm text-fg hover:text-accent transition-colors"
-        >
+        <LinkBase v-else :to="packageRoute(pkg)" class="text-sm">
           {{ pkg }}
-        </NuxtLink>
-        <button
-          type="button"
-          class="text-fg-subtle hover:text-fg transition-colors rounded"
+        </LinkBase>
+        <ButtonBase
+          size="small"
           :aria-label="
             $t('compare.selector.remove_package', {
               package: pkg === NO_DEPENDENCY_ID ? $t('compare.no_dependency.label') : pkg,
             })
           "
           @click="removePackage(pkg)"
-        >
-          <span class="i-carbon:close flex items-center w-3.5 h-3.5" aria-hidden="true" />
-        </button>
-      </div>
+          classicon="i-carbon:close"
+        />
+      </TagStatic>
     </div>
 
     <!-- Add package input -->
@@ -181,10 +171,9 @@ function handleBlur() {
           class="absolute top-full inset-x-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto"
         >
           <!-- No dependency option (easter egg with James) -->
-          <button
+          <ButtonBase
             v-if="showNoDependencyOption"
-            type="button"
-            class="w-full text-start px-4 py-2.5 hover:bg-bg-muted transition-colors focus-visible:outline-none focus-visible:bg-bg-muted border-b border-border/50"
+            class="block w-full text-start"
             :aria-label="$t('compare.no_dependency.add_column')"
             @click="addPackage(NO_DEPENDENCY_ID)"
           >
@@ -195,23 +184,22 @@ function handleBlur() {
             <div class="text-xs text-fg-muted truncate mt-0.5">
               {{ $t('compare.no_dependency.typeahead_description') }}
             </div>
-          </button>
+          </ButtonBase>
 
           <div v-if="isSearching" class="px-4 py-3 text-sm text-fg-muted">
             {{ $t('compare.selector.searching') }}
           </div>
-          <button
+          <ButtonBase
             v-for="result in filteredResults"
             :key="result.name"
-            type="button"
-            class="w-full text-start px-4 py-2.5 hover:bg-bg-muted transition-colors focus-visible:outline-none focus-visible:bg-bg-muted"
+            class="block w-full text-start"
             @click="addPackage(result.name)"
           >
             <div class="font-mono text-sm text-fg">{{ result.name }}</div>
             <div v-if="result.description" class="text-xs text-fg-muted truncate mt-0.5">
               {{ result.description }}
             </div>
-          </button>
+          </ButtonBase>
         </div>
       </Transition>
     </div>

app/components/Compare/ReplacementSuggestion.vue

@@ -64,26 +64,18 @@ const docUrl = computed(() => {
     </div>
 
     <!-- No dependency action button -->
-    <button
+    <ButtonBase
       v-if="variant === 'nodep' && showAction !== false"
-      type="button"
-      class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-amber-500/20 hover:bg-amber-500/30 rounded transition-colors"
+      size="small"
       :aria-label="$t('compare.no_dependency.add_column')"
       @click="emit('addNoDep')"
     >
       {{ $t('package.replacement.consider_no_dep') }}
-    </button>
+    </ButtonBase>
 
     <!-- Info link -->
-    <a
-      v-else-if="docUrl"
-      :href="docUrl"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-blue-500/20 hover:bg-blue-500/30 rounded transition-colors inline-flex items-center gap-1"
-    >
+    <LinkBase v-else-if="docUrl" :to="docUrl" variant="button-secondary" size="small">
       {{ $t('package.replacement.learn_more') }}
-      <span class="i-carbon:launch w-3 h-3" />
-    </a>
+    </LinkBase>
   </div>
 </template>

app/composables/useCompareReplacements.ts

@@ -74,6 +74,8 @@ export function useCompareReplacements(packageNames: MaybeRefOrGetter<string[]>)
   const allSuggestions = computed(() => {
     const result: ReplacementSuggestion[] = []
 
+    console.log({ packages })
+
     for (const pkg of packages.value) {
       const replacement = replacements.value.get(pkg)
       if (!replacement) continue

app/pages/compare.vue

@@ -168,27 +168,25 @@ useSeoMeta({
           <h2 id="facets-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
             {{ $t('compare.packages.section_facets') }}
           </h2>
-          <button
-            type="button"
-            class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
-            :class="isAllSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
+          <ButtonBase
+            size="small"
+            :aria-pressed="isAllSelected"
             :disabled="isAllSelected"
             :aria-label="$t('compare.facets.select_all')"
             @click="selectAll"
           >
             {{ $t('compare.facets.all') }}
-          </button>
+          </ButtonBase>
           <span class="text-3xs text-fg-muted/40" aria-hidden="true">/</span>
-          <button
-            type="button"
-            class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
-            :class="isNoneSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
+          <ButtonBase
+            size="small"
+            :aria-pressed="isNoneSelected"
             :disabled="isNoneSelected"
             :aria-label="$t('compare.facets.deselect_all')"
             @click="deselectAll"
           >
             {{ $t('compare.facets.none') }}
-          </button>
+          </ButtonBase>
         </div>
         <CompareFacetSelector />
       </section>