refactor: use radio button

Author: essenmitsosse

app/components/Filter/Panel.vue

@@ -217,26 +217,20 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             </label>
             <!-- Search scope toggle -->
             <div
-              class="inline-flex rounded-md border border-border p-0.5 bg-bg"
-              role="group"
-              :aria-label="$t('filters.search_scope')"
+              class="flex flex-wrap gap-2"
+              role="radiogroup"
+              :aria-label="$t('filters.weekly_downloads')"
             >
-              <button
+              <TagRadioButton
                 v-for="scope in SEARCH_SCOPE_VALUES"
                 :key="scope"
-                type="button"
-                class="px-2 py-0.5 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-                :class="
-                  filters.searchScope === scope
-                    ? 'bg-bg-muted text-fg'
-                    : 'text-fg-muted hover:text-fg'
-                "
-                :aria-pressed="filters.searchScope === scope"
-                :title="getScopeDescriptionKey(scope)"
-                @click="emit('update:searchScope', scope)"
+                :model-value="filters.searchScope"
+                :value="scope"
+                name="searchScope"
+                @update:modelValue="emit('update:searchScope', scope)"
               >
                 {{ getScopeLabelKey(scope) }}
-              </button>
+              </TagRadioButton>
             </div>
           </div>
           <InputBase