feat: show all compatible versions (#152)

* feat: show all versions

* fix: proper alignment for chip content

* fix: expand chip size

* fix: remove duplicate version

* feat: change the order of the chips

* fix: dont show expand if there's no other versions

* feat: sort versions by latest to oldest

package.json

@@ -25,6 +25,7 @@
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
 		"sass": "^1.55.0",
+		"semver": "^7.5.4",
 		"sirv-cli": "^2.0.2",
 		"svelte": "^3.54.0",
 		"svelte-check": "^2.9.2",

src/routes/patches/+page.svelte

@@ -39,6 +39,7 @@
 
 	let timeout: ReturnType<typeof setTimeout>;
 	let mobilePackages = false;
+	let showAllVersions = false;
 
 	function checkCompatibility(patch: Patch, pkg: string) {
 		if (pkg === '') {
@@ -169,7 +170,7 @@
 				<!-- Trigger new animations when package or search changes (I love Svelte) -->
 				{#key selectedPkg || searchTermFiltered}
 					<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-						<PatchItem {patch} />
+						<PatchItem {patch} bind:showAllVersions />
 					</div>
 				{/key}
 			{/each}

src/routes/patches/PatchItem.svelte

@@ -2,9 +2,10 @@
 	import { slide, fade } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 	import type { Patch } from '$lib/types';
-	import { friendlyName } from '$util/friendlyName';
+	import { compare, coerce } from 'semver';
 
 	export let patch: Patch;
+	export let showAllVersions: boolean;
 	const hasPatchOptions = !!patch.options.length;
 	let expanded: boolean = false;
 </script>
@@ -21,7 +22,7 @@
 			<h3>{patch.name}</h3>
 		</div>
 		{#if hasPatchOptions}
-			<img id="arrow" src="/icons/arrow.svg" alt="dropdown" />
+			<img class="expand-arrow" id="expand-card" src="/icons/arrow.svg" alt="dropdown" />
 		{/if}
 	</div>
 	<h5>{patch.description}</h5>
@@ -36,13 +37,6 @@
 			</a>
 		{/each}
 
-		<!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
-		{#if patch.compatiblePackages.length && patch.compatiblePackages[0].versions.length}
-			<li class="patch-info">
-				🎯 {patch.compatiblePackages[0].versions.slice(-1)}
-			</li>
-		{/if}
-
 		{#if !patch.compatiblePackages.length}
 			<li class="patch-info">🌎 Universal patch</li>
 		{/if}
@@ -50,6 +44,41 @@
 		{#if hasPatchOptions}
 			<li class="patch-info">⚙️ Patch options</li>
 		{/if}
+
+		<!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
+		{#if patch.compatiblePackages.length && patch.compatiblePackages[0].versions.length}
+			{#if showAllVersions}
+				{#each patch.compatiblePackages[0].versions
+					.slice()
+					.sort((a, b) => {
+						const coercedA = coerce(a);
+						const coercedB = coerce(b);
+						if (coercedA && coercedB) return compare(coercedA, coercedB);
+						else if (!coercedA && !coercedB) return 0;
+						else return !coercedA ? 1 : -1;
+					})
+					.reverse() as version}
+					<li class="patch-info">
+						🎯 {version}
+					</li>
+				{/each}
+			{:else}
+				<li class="patch-info">
+					🎯 {patch.compatiblePackages[0].versions.slice(-1)}
+				</li>
+			{/if}
+			{#if patch.compatiblePackages[0].versions.length > 1}
+				<li class="patch-info button" on:click={() => (showAllVersions = !showAllVersions)}>
+					<img
+						class="expand-arrow"
+						id="expand-versions"
+						style:transform={showAllVersions ? 'rotate(90deg)' : 'rotate(-90deg)'}
+						src="/icons/expand_more.svg"
+						alt="dropdown"
+					/>
+				</li>
+			{/if}
+		{/if}
 	</ul>
 
 	{#if expanded && hasPatchOptions}
@@ -78,6 +107,9 @@
 	}
 
 	.patch-info {
+		display: flex;
+		justify-content: center;
+		align-items: center;
 		list-style: none;
 		font-size: 0.8rem;
 		font-weight: 500;
@@ -134,13 +166,18 @@
 		justify-content: space-between;
 	}
 
-	#arrow {
-		height: 1.5rem;
+	.expand-arrow {
 		transition: all 0.2s var(--bezier-one);
 		user-select: none;
+		&#expand-versions {
+			height: 1.125rem;
+		}
+		&#expand-card {
+			height: 1.5rem;
+		}
 	}
 
-	.rotate #arrow {
+	.rotate .expand-arrow {
 		transform: rotate(180deg);
 	}