feat: cooler info chips, minor refactoring

src/data/ContributorsStore.ts

@@ -1,5 +1,5 @@
 import { readable } from 'svelte/store';
-import type { Repository } from '$lib/types';
+import type { Repository } from 'src/data/types';
 
 export type ContribData = { repositories: Repository[] };
 
@@ -10,5 +10,3 @@ const fetchContributors = async (): Promise<ContribData> => {
 };
 
 export const ContributorsStore = readable(fetchContributors());
-
-

src/data/PatchesStore.ts

@@ -1,5 +1,5 @@
 import { readable } from 'svelte/store';
-import type { Patch } from '$lib/types';
+import type { Patch } from 'src/data/types';
 
 export type PatchesData = { patches: Patch[]; packages: string[] };
 

src/lib/components/atoms/PatchCell.svelte

@@ -1,29 +1,25 @@
 <script lang="ts">
 	import { slide, fade } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
-	import type { CompatiblePackage, PatchOption } from '$lib/types';
+	import type { CompatiblePackage, Patch } from 'src/data/types';
 
-	export let name: string;
+	export let patch: Patch;
-	export let description: string;
-	export let version: string;
-	export let options: PatchOption[];
-	export let compatiblePackages: CompatiblePackage[];
-	export let hasPatchOptions: boolean;
 	export let current: boolean;
-
+	const hasPatchOptions = !!patch.options.length;
 	let expanded: boolean = false;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	class="patch-container {hasPatchOptions ? 'expanded' : ''}"
+	class="patch-container"
-	class:rotate={expanded === true}
+	class:expanded={hasPatchOptions}
+	class:rotate={expanded}
 	on:click={() => (expanded = !expanded)}
 >
 	<div class="things">
 		<div class="title">
 			<h1>
-				{name
+				{patch.name
 					// im sorry
 					.replace(/-/g, ' ')
 					.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())
@@ -40,25 +36,30 @@
 	</div>
 
 	<div class="info-container">
-		{#each compatiblePackages as pkg, i}
+		{#each patch.compatiblePackages as pkg, i}
 			{#if current === false}
-				<h2>{pkg.name}</h2>
+				<h2>📦 {pkg.name}</h2>
 			{/if}
-			<!-- gets only the last supported version (cant get 'any' to work without duplicates help) -->
+			<!-- gets only the lastest supported version (cant get 'any' to work without duplicates help) -->
 			{#if i < pkg.versions.length - 1}
 				<h2>
-					Target Package Version: {pkg.versions.slice(-1)[0] || 'Any'}
+					🎯 {pkg.versions.slice(-1)[0] || 'Any'}
 				</h2>
 			{/if}
 		{/each}
-		<h2>Patch Version: {version}</h2>
+
+		<h2>🧩 {patch.version}</h2>
+
+		{#if hasPatchOptions}
+			<h2>⚙️ Patch Options</h2>
+		{/if}
 	</div>
-	<h4>{description}</h4>
+	<h4>{patch.description}</h4>
 
 	{#if expanded && hasPatchOptions}
 		<span transition:fade|local={{ easing: quintOut, duration: 1000 }}>
 			<div class="options" transition:slide|local={{ easing: quintOut, duration: 500 }}>
-				{#each options as option}
+				{#each patch.options as option}
 					<div class="option">
 						<h3>{option.title}</h3>
 						<h4>{option.description}</h4>
@@ -117,7 +118,6 @@
 		border-radius: 12px;
 	}
 
-
 	.patch-container:active {
 		background-color: var(--grey-three);
 	}

src/lib/components/atoms/TreeMenuButton.svelte

@@ -7,12 +7,12 @@
 <div
 	class="package"
 	class:selected={current === name}
-	on:click={() => (current = (current === name) ? false : name) && window.scrollTo({ top: 0, behavior: 'smooth' })}
+	on:click={() =>
+		(current = current === name ? false : name) && window.scrollTo({ top: 0, behavior: 'smooth' })}
 >
 	<h3>{name}</h3>
 </div>
 
-
 <style>
 	.package {
 		padding: 0.6rem;

src/lib/components/molecules/ContributorHost.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Contributor } from '$lib/types';
+	import type { Contributor } from 'src/data/types';
 	import ContributorButton from '../atoms/ContributorPerson.svelte';
 
 	export let contribs: Contributor[];

src/lib/components/molecules/Footer.svelte

@@ -41,7 +41,8 @@
 				{#each data.repositories as { name }}
 					<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
 						<div>
-						<h6>{name
+							<h6>
+								{name
 									.replace(/-/g, ' ')
 									.replace(/revanced\/revanced/g, '')
 									.replace(/cli/g, 'CLI')
@@ -67,7 +68,6 @@
 </footer>
 
 <style>
-
 	footer {
 		margin: 4rem 0 5rem 0;
 		margin-inline: auto;

src/routes/patches/+page.svelte

@@ -3,7 +3,7 @@
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
-	import type { Patch } from '$lib/types';
+	import type { CompatiblePackage, Patch } from 'src/data/types';
 	import type { PatchesData } from '../../data/PatchesStore';
 	import { PatchesStore } from '../../data/PatchesStore';
 
@@ -12,7 +12,7 @@
 	import PatchCell from '$lib/components/atoms/PatchCell.svelte';
 	import Footer from '$lib/components/molecules/Footer.svelte';
 
-	let patches: Patch[]
+	let patches: Patch[];
 	let packages: string[];
 	let current: boolean = false;
 
@@ -22,14 +22,14 @@
 		});
 	});
 
-    function search(findTerm, array){
+	function search(findTerm: string | boolean, array: CompatiblePackage[]) {
 		for (let i = 0; i < array.length; i++) {
 			if (array[i].name === findTerm) {
 				return true;
-            };
+			}
-        };
+		}
 		return false;
-    };
+	}
 </script>
 
 <svelte:head>
@@ -51,18 +51,10 @@
 
 	<div class="patches-container">
 		{#if patches}
-			{#each patches as { name, description, version, options, compatiblePackages }, i}
+			{#each patches as patch, i}
-                {#if search(current, compatiblePackages) || !current}
+				{#if search(current, patch.compatiblePackages) || !current}
 					<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: -(300 * 0.85 ** i) + 300 }}>
-                        <PatchCell
+						<PatchCell bind:current {patch} />
-                            bind:current
-                            {name}
-                            {description}
-                            {version}
-                            {options}
-                            {compatiblePackages}
-                            hasPatchOptions={!!options.length}
-                        />
 					</div>
 				{/if}
 			{/each}