refactor: merge button and tag button

Author: essenmitsosse

app/components/Button/Base.vue

@@ -3,7 +3,7 @@ const props = withDefaults(
   defineProps<{
     disabled?: boolean
     type?: 'button' | 'submit'
-    variant?: 'primary' | 'secondary'
+    variant?: 'primary' | 'secondary' | 'tag'
   }>(),
   {
     type: 'button',
@@ -21,12 +21,14 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed)"
-    :class="[
-      variant === 'primary'
-        ? 'text-bg bg-fg hover:enabled:(bg-fg/90)'
-        : 'bg-transparent text-fg hover:enabled:(bg-fg text-bg border-fg)',
-    ]"
+    class="cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
+    :class="{
+      'text-sm px-4 py-2': variant !== 'tag',
+      'text-xs px-2 py-0.5': variant === 'tag',
+      'bg-bg-muted text-fg-muted hover:enabled:(text-fg border-border-hover)': variant === 'tag',
+      'text-bg bg-fg hover:enabled:(bg-fg/90)': variant === 'primary',
+      'bg-transparent text-fg hover:enabled:(bg-fg text-bg border-fg)': variant === 'secondary',
+    }"
     :type="props.type"
     :disabled="disabled ? true : undefined"
   >

app/components/Filter/Panel.vue

@@ -307,14 +307,15 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             {{ $t('filters.keywords') }}
           </legend>
           <div class="flex flex-wrap gap-1.5" role="group" :aria-label="$t('filters.keywords')">
-            <TagButton
+            <ButtonBase
               v-for="keyword in displayedKeywords"
               :key="keyword"
+              variant="tag"
               :aria-pressed="filters.keywords.includes(keyword)"
               @click="emit('toggleKeyword', keyword)"
             >
               {{ keyword }}
-            </TagButton>
+            </ButtonBase>
             <button
               v-if="hasMoreKeywords"
               type="button"

app/components/Package/Card.vue

@@ -162,16 +162,17 @@ const pkgDescription = useMarkdown(() => ({
       :aria-label="$t('package.card.keywords')"
       class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none items-center"
     >
-      <TagButton
+      <ButtonBase
         v-for="keyword in result.package.keywords.slice(0, 5)"
         class="pointer-events-auto"
+        variant="tag"
         :key="keyword"
         :aria-pressed="props.filters?.keywords.includes(keyword)"
         :title="`Filter by ${keyword}`"
         @click.stop="emit('clickKeyword', keyword)"
       >
         {{ keyword }}
-      </TagButton>
+      </ButtonBase>
       <span
         v-if="result.package.keywords.length > 5"
         class="text-fg-subtle text-xs pointer-events-auto"

app/components/Package/TableRow.vue

@@ -126,16 +126,17 @@ const allMaintainersText = computed(() => {
         class="flex flex-wrap gap-1 justify-end"
         :aria-label="$t('package.card.keywords')"
       >
-        <TagButton
+        <ButtonBase
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
+          variant="tag"
           :aria-pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
           :class="{ 'group-hover:bg-bg-elevated': !props.filters?.keywords.includes(keyword) }"
         >
           {{ keyword }}
-        </TagButton>
+        </ButtonBase>
         <span
           v-if="pkg.keywords.length > 3"
           class="text-fg-subtle text-xs"