Simplfy sorting + simply package manager

src/lib/components/ComponentIndex/Card.svelte

@@ -1,6 +1,7 @@
 <script>
 	import Tag from '../Tag.svelte';
 	import { copyToClipboard } from '$lib/utils/clipboard';
+	import { packageManager as manager } from '$stores/packageManager';
 
 	export let active = false;
 	export let title = '';
@@ -10,12 +11,11 @@
 	export let url = '';
 	export let npm = '';
 	export let repo = '';
-	export let manager = 'npm';
 
 	let clipboardCopy = false;
 
 	const copy = () => {
-		copyToClipboard(`${packageManagers[manager]} ${cleanupNpm(npm)}`).then(
+		copyToClipboard(`${packageManagers[$manager]} ${cleanupNpm(npm)}`).then(
 			() => (clipboardCopy = false)
 		);
 		clipboardCopy = true;
@@ -38,7 +38,7 @@
 		{#if npm}<Tag
 				click={() => copy()}
 				variant="copy"
-				title={clipboardCopy ? 'copied!' : `${packageManagers[manager]} ${cleanupNpm(npm)}`}
+				title={clipboardCopy ? 'copied!' : `${packageManagers[$manager]} ${cleanupNpm(npm)}`}
 			/>{/if}
 	</h3>
 	<p class="flex-grow">{description}</p>

src/lib/components/Select.svelte

@@ -9,7 +9,7 @@
 	{#if label}
 		<span>{label}</span>
 	{/if}
-	<SvelteSelect containerClasses="select-container" bind:value {...$$restProps} />
+	<SvelteSelect containerClasses="select-container" bind:value {...$$restProps} on:select />
 </div>
 
 <style>
@@ -33,7 +33,6 @@
 		cursor: pointer;
 		flex: 1;
 		align-items: center;
-		padding: var(--s-2);
 		gap: 10px;
 		min-width: 150px;
 		min-height: 3rem;

src/lib/stores/packageManager.ts

@@ -0,0 +1,9 @@
+import { localStorage, persist } from '@macfja/svelte-persistent-store';
+import type { PersistentStore } from '@macfja/svelte-persistent-store';
+import { writable } from 'svelte/store';
+
+export const packageManager: PersistentStore<string> = persist(
+	writable('npm'),
+	localStorage(),
+	'packageManager'
+);

src/routes/components/+page.svelte

@@ -1,6 +1,6 @@
 <script>
 	import components from './components.json';
-	import SearchableJson from '../_searchableJson.svelte';
+	import SearchableJson from '../searchableJson.svelte';
 
 	const categoryId = {
 		Animations: 'animations',

src/routes/searchableJson.svelte

@@ -6,20 +6,16 @@
 	import Seo from '$lib/components/Seo.svelte';
 	import Search from '$lib/components/Search.svelte';
 	import Select from '../lib/components/Select.svelte';
-	import { localStorage, persist } from '@macfja/svelte-persistent-store';
+	import { packageManager } from '$stores/packageManager';
-	import { writable } from 'svelte/store';
 
 	export let data;
 	export let displayTitle = '';
 	export let displayTitleSingular = '';
 	export let submittingType = '';
 
-	let selectedPackageManager = { value: 'npm' };
-	const packageManager = persist(writable('npm'), localStorage(), 'packageManager');
 	let searchValue;
 	let dataToDisplay = [];
 
-	$: $packageManager = selectedPackageManager.value;
 	$: categories = extractUnique(dataToDisplay, 'category');
 
 	export let categoryId = {};
@@ -35,11 +31,10 @@
 				dataDefault={{ category: '' }}
 				bind:query={searchValue}
 				sortableFields={[
-					{ identifier: 'addedOn', title: 'Last added first', ascending: false },
+					{ identifier: 'addedOn', title: 'Most recent', ascending: false },
-					{ identifier: 'addedOn', title: 'Oldest first', ascending: true },
+					{ identifier: 'addedOn', title: 'Oldest', ascending: true },
-					{ identifier: 'title', title: 'Name (A-Z)', ascending: true },
+					{ identifier: 'title', title: 'Name', ascending: true },
-					{ identifier: 'title', title: 'Name (Z-A)', ascending: false },
+					{ identifier: 'stars', title: 'Stars', ascending: false }
-					{ identifier: 'stars', title: 'Most stars first', ascending: false }
 				]}
 				searchableFields={['title', 'description']}
 				facetsConfig={[
@@ -60,8 +55,10 @@
 			<Select
 				label="Package manager"
 				isClearable={false}
+				isSearchable={false}
 				showIndicator
-				bind:value={selectedPackageManager}
+				value={{ value: $packageManager }}
+				on:select={({ detail }) => ($packageManager = detail.value)}
 				items={[
 					{ label: 'NPM', value: 'npm' },
 					{ label: 'PNPM', value: 'pnpm' },

src/routes/templates/+page.svelte

@@ -1,6 +1,6 @@
 <script>
 	import templates from './templates.json';
-	import SearchableJson from '../_searchableJson.svelte';
+	import SearchableJson from '../searchableJson.svelte';
 
 	const categoryId = {
 		Sapper: 'sapper',

src/routes/tools/+page.svelte

@@ -1,6 +1,6 @@
 <script>
 	import tools from '../tools/tools.json';
-	import SearchableJson from '../_searchableJson.svelte';
+	import SearchableJson from '../searchableJson.svelte';
 
 	const categoryId = {
 		'Bundler Plugins': 'bundling',