From a2eaa919c5e9269354fe73b164856d5eeccceab8 Mon Sep 17 00:00:00 2001
From: MacFJA <macfja@gmail.com>
Date: Thu, 1 Sep 2022 20:40:06 +0200
Subject: [PATCH] Simplfy sorting + simply package manager

---
 src/lib/components/ComponentIndex/Card.svelte |  6 +++---
 src/lib/components/Select.svelte              |  3 +--
 src/lib/stores/packageManager.ts              |  9 +++++++++
 src/routes/components/+page.svelte            |  2 +-
 ...hableJson.svelte => searchableJson.svelte} | 19 ++++++++-----------
 src/routes/templates/+page.svelte             |  2 +-
 src/routes/tools/+page.svelte                 |  2 +-
 7 files changed, 24 insertions(+), 19 deletions(-)
 create mode 100644 src/lib/stores/packageManager.ts
 rename src/routes/{_searchableJson.svelte => searchableJson.svelte} (77%)

diff --git a/src/lib/components/ComponentIndex/Card.svelte b/src/lib/components/ComponentIndex/Card.svelte
index a84fcb9..b9cf27a 100644
--- a/src/lib/components/ComponentIndex/Card.svelte
+++ b/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>
diff --git a/src/lib/components/Select.svelte b/src/lib/components/Select.svelte
index 2e9ae50..b639264 100644
--- a/src/lib/components/Select.svelte
+++ b/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;
diff --git a/src/lib/stores/packageManager.ts b/src/lib/stores/packageManager.ts
new file mode 100644
index 0000000..aa0527a
--- /dev/null
+++ b/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'
+);
diff --git a/src/routes/components/+page.svelte b/src/routes/components/+page.svelte
index e70f47a..495fca0 100644
--- a/src/routes/components/+page.svelte
+++ b/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',
diff --git a/src/routes/_searchableJson.svelte b/src/routes/searchableJson.svelte
similarity index 77%
rename from src/routes/_searchableJson.svelte
rename to src/routes/searchableJson.svelte
index 140ec05..906d01e 100644
--- a/src/routes/_searchableJson.svelte
+++ b/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 { writable } from 'svelte/store';
+	import { packageManager } from '$stores/packageManager';
 
 	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: 'Oldest first', ascending: true },
-					{ identifier: 'title', title: 'Name (A-Z)', ascending: true },
-					{ identifier: 'title', title: 'Name (Z-A)', ascending: false },
-					{ identifier: 'stars', title: 'Most stars first', ascending: false }
+					{ identifier: 'addedOn', title: 'Most recent', ascending: false },
+					{ identifier: 'addedOn', title: 'Oldest', ascending: true },
+					{ identifier: 'title', title: 'Name', ascending: true },
+					{ identifier: 'stars', title: 'Stars', 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' },
diff --git a/src/routes/templates/+page.svelte b/src/routes/templates/+page.svelte
index ac91a64..c6899cf 100644
--- a/src/routes/templates/+page.svelte
+++ b/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',
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index 0b290bc..f3d65d6 100644
--- a/src/routes/tools/+page.svelte
+++ b/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',