feat: cooler info chips, minor refactoring

src/data/ContributorsStore.ts

@@ -1,14 +1,12 @@
 import { readable } from 'svelte/store';
-import type { Repository } from '$lib/types';
+import type { Repository } from 'src/data/types';
 
 export type ContribData = { repositories: Repository[] };
 
 const fetchContributors = async (): Promise<ContribData> => {
 	const response = await fetch('https://releases.rvcd.win/contributors');
-  	const data = await response.json();
+	const data = await response.json();
-	return data; 
+	return data;
 };
 
 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

@@ -1,18 +1,18 @@
 <script lang="ts">
-    export let current: string | boolean;
+	export let current: string | boolean;
-    export let name: string;
+	export let name: string;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	class="package"
-	class:selected = {current === name} 
+	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>
+	<h3>{name}</h3>
 </div>
 
-
 <style>
 	.package {
 		padding: 0.6rem;
@@ -42,9 +42,9 @@
 		opacity: 1;
 	}
 
-    h3 {
+	h3 {
-        font-size: 0.9rem;
+		font-size: 0.9rem;
-    }
+	}
 
 	.package > h3 {
 		color: var(--grey-five);
@@ -64,4 +64,4 @@
 	.package:not(.selected):hover > h3 {
 		color: var(--white);
 	}
-</style>
+</style>

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

@@ -3,7 +3,7 @@
 
 	import type { ContribData } from '../../../data/ContributorsStore';
 	import { ContributorsStore } from '../../../data/ContributorsStore';
-	
+
 	let data: ContribData;
 
 	onMount(() => {
@@ -20,8 +20,8 @@
 		<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
 		<div>
 			<h1>
-                <span>Re</span>Vanced
+				<span>Re</span>Vanced
-            </h1>
+			</h1>
 			<h6>Copyright © 2022, we are very legal</h6>
 		</div>
 	</section>
@@ -39,17 +39,18 @@
 			<h5>Repos</h5>
 			{#if data}
 				{#each data.repositories as { name }}
-				<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
+					<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
-					<div>
+						<div>
-						<h6>{name
+							<h6>
-							.replace(/-/g, ' ')
+								{name
-							.replace(/revanced\/revanced/g, '')
+									.replace(/-/g, ' ')
-							.replace(/cli/g, 'CLI')
+									.replace(/revanced\/revanced/g, '')
-							.replace(/api/g, 'API')
+									.replace(/cli/g, 'CLI')
-							.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())}
+									.replace(/api/g, 'API')
-						</h6>
+									.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())}
-					</div>
+							</h6>
-				</a>
+						</div>
+					</a>
 				{/each}
 			{/if}
 		</div>
@@ -67,7 +68,6 @@
 </footer>
 
 <style>
-
 	footer {
 		margin: 4rem 0 5rem 0;
 		margin-inline: auto;
@@ -81,14 +81,14 @@
 		gap: 1rem;
 	}
 
-    .main-content span {
+	.main-content span {
-        color: var(--accent-color);
+		color: var(--accent-color);
-    }
+	}
 
-    .main-content h1 {
+	.main-content h1 {
-        letter-spacing: -0.04rem;
+		letter-spacing: -0.04rem;
-        margin-bottom: 0.5rem;
+		margin-bottom: 0.5rem;
-    }
+	}
 
 	img {
 		height: 3rem;

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,8 +12,8 @@
 	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 packages: string[];
 	let current: boolean = false;
 
 	onMount(() => {
@@ -22,14 +22,14 @@
 		});
 	});
 
-    function search(findTerm, array){
+	function search(findTerm: string | boolean, array: CompatiblePackage[]) {
-        for (let i = 0; i < array.length; i++) {
+		for (let i = 0; i < array.length; i++) {
-            if (array[i].name === findTerm) {
+			if (array[i].name === findTerm) {
-                return true;
+				return true;
-            };
+			}
-        };
+		}
-        return false;
+		return false;
-    };
+	}
 </script>
 
 <svelte:head>
@@ -51,20 +51,12 @@
 
 	<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 }}>
+					<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: -(300 * 0.85 ** i) + 300 }}>
-                        <PatchCell
+						<PatchCell bind:current {patch} />
-                            bind:current
+					</div>
-                            {name}
+				{/if}
-                            {description}
-                            {version}
-                            {options}
-                            {compatiblePackages}
-                            hasPatchOptions={!!options.length}
-                        />
-                    </div>
-                {/if}
 			{/each}
 		{/if}
 	</div>
@@ -89,7 +81,7 @@
 		width: 100%;
 		position: sticky;
 		z-index: 1;
-        min-height: calc(100vh - 7.5rem);
+		min-height: calc(100vh - 7.5rem);
 	}
 
 	/*