Simplify code

src/lib/SearchableJson.svelte

@@ -4,7 +4,7 @@
 	import Seo from '$lib/components/Seo.svelte';
 	import Select from '$lib/components/Select.svelte';
 	import { packageManager } from '$stores/packageManager';
-	import TagsFilter from '$lib/TagsFilter.svelte';
+	import TagFilters from '$lib/TagFilters.svelte';
 	import { filterArray, sortArray } from '$utils/arrayUtils';
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -27,7 +27,7 @@
 
 <h1>{displayTitle}</h1>
 
-<TagsFilter {tags} {selectedTags} />
+<TagFilters {tags} {selectedTags} />
 <br />
 <section class="controls">
 	<input

src/lib/TagsFilter.svelte → src/lib/TagFilters.svelte

@@ -5,30 +5,25 @@
 	export let selectedTags: string[];
 </script>
 
-<div>
+<div data-sveltekit-noscroll>
 	{#each selectedTags as tag}
 		{@const newTags = selectedTags.filter((t) => t !== tag)}
+		{@const title = tag.replaceAll('-', ' ')}
 		{#if newTags.length === 0}
-			<a data-sveltekit-noscroll class="active" href={`${$page.url.pathname}`}>{tag}</a>
+			<a class="active" href={`${$page.url.pathname}`}>{title}</a>
 		{:else}
-			<a
-				data-sveltekit-noscroll
-				class="active"
-				href={`${$page.url.pathname}?${newTags.map((t) => `tag=${t}`).join('&')}`}
-			>
-				{tag}
+			<a class="active" href={`${$page.url.pathname}?${newTags.map((t) => `tag=${t}`).join('&')}`}>
+				{title}
 			</a>
 		{/if}
 	{/each}
 
 	{#each tags as tag}
 		{#if !selectedTags.includes(tag)}
 			{@const newTags = [...selectedTags, tag]}
-			<a
-				data-sveltekit-noscroll
-				href={`${$page.url.pathname}?${newTags.map((t) => `tag=${t}`).join('&')}`}
-			>
-				{tag}
+			{@const title = tag.replaceAll('-', ' ')}
+			<a href={`${$page.url.pathname}?${newTags.map((t) => `tag=${t}`).join('&')}`}>
+				{title}
 			</a>
 		{/if}
 	{/each}