refactor: move basic styles into reusable tag component

Author: essenmitsosse

app/components/Filter/Panel.vue

@@ -249,11 +249,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               type="button"
               role="radio"
               :aria-checked="filters.downloadRange === range.value"
-              :class="
-                filters.downloadRange === range.value
-                  ? 'bg-fg text-bg border-fg hover:text-bg/50'
-                  : ''
-              "
+              :status="filters.downloadRange === range.value ? 'active' : 'default'"
               @click="emit('update:downloadRange', range.value)"
             >
               {{ $t(getDownloadRangeLabelKey(range.value)) }}
@@ -277,11 +273,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               type="button"
               role="radio"
               :aria-checked="filters.updatedWithin === option.value"
-              :class="
-                filters.updatedWithin === option.value
-                  ? 'bg-fg text-bg border-fg hover:text-bg/70'
-                  : ''
-              "
+              :status="filters.updatedWithin === option.value ? 'active' : 'default'"
               @click="emit('update:updatedWithin', option.value)"
             >
               {{ $t(getUpdatedWithinLabelKey(option.value)) }}
@@ -305,10 +297,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               role="radio"
               disabled
               :aria-checked="filters.security === option.value"
-              class="opacity-50 cursor-not-allowed"
-              :class="
-                filters.security === option.value ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
-              "
+              :status="filters.security === option.value ? 'active' : 'default'"
             >
               {{ $t(getSecurityLabelKey(option.value)) }}
             </TagClickable>
@@ -326,9 +315,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               :key="keyword"
               type="button"
               :aria-pressed="filters.keywords.includes(keyword)"
-              :class="
-                filters.keywords.includes(keyword) ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
-              "
+              :status="filters.keywords.includes(keyword) ? 'active' : 'default'"
               @click="emit('toggleKeyword', keyword)"
             >
               {{ keyword }}

app/components/Tag/Clickable.vue

@@ -1,11 +1,24 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{ as?: string | Component }>(),{ as: 'button' })
+const props = withDefaults(
+  defineProps<{ as?: string | Component; status?: 'default' | 'active'; disabled?: boolean }>(),
+  {
+    status: 'default',
+    as: 'button',
+  },
+)
 </script>
 
 <template>
   <component
     :is="props.as"
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+    :class="{
+      'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)':
+        props.status === 'default',
+      'bg-fg text-bg border-fg hover:(text-text-bg/50)': props.status === 'active',
+      'opacity-50 cursor-not-allowed': props.disabled,
+    }"
+    :disabled="props.disabled"
   >
     <slot />
   </component>

app/components/Tag/Static.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{ as?: string | Component }>(),{ as: 'span' })
+const props = withDefaults(defineProps<{ as?: string | Component }>(), { as: 'span' })
 </script>
 
 <template>