refactor: add more comments

src/lib/components/atoms/TerminalWindow.svelte

@@ -1,29 +0,0 @@
-<div class="terminal-container">
-hhh
-</div>
-
-<style>
-    .terminal-container {
-        padding: 1rem;
-        height: 500px;
-        width: 700px;
-        background-color: var(--grey-six);
-        position: fixed;
-        z-index: -2;
-		backdrop-filter: blur(10px);
-		-webkit-backdrop-filter: blur(10px);    
-        right: 100px;
-        border-radius: 1rem;
-        border: 1px solid var(--grey-three)
-    }
-
-    @media (max-width: 1700px) {
-		.terminal-container {
-			position: fixed;
-			height: 100vh;
-            overflow: hidden;
-			top: 115px;
-			right: 6rem;
-		}
-	}
-</style>

src/lib/components/atoms/TreeMenuButton.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-	export let current: string | boolean;
+	export let selectedPkg: string | boolean;
 	export let name: string;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	class="package"
-	class:selected={current === name}
+	class:selected={selectedPkg === name}
 	on:click={() =>
-		(current = current === name ? false : name) && window.scrollTo({ top: 0, behavior: 'smooth' })}
+		(selectedPkg = selectedPkg === name ? false : name) &&
+		window.scrollTo({ top: 0, behavior: 'smooth' })}
 >
 	<h5>{name}</h5>
 </div>

src/lib/components/molecules/ContributorHost.svelte

@@ -2,7 +2,7 @@
 	import type { Contributor } from 'src/data/types';
 	import ContributorButton from '../atoms/ContributorPerson.svelte';
 
-	export let contribs: Contributor[];
+	export let contributors: Contributor[];
 	export let repo: string;
 
 	let repo_name = repo
@@ -12,6 +12,7 @@
 		.replace(/api/g, 'API')
 		.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase());
 
+	// Yes
 	let usersIwantToExplodeSoBadly = ['semantic-release-bot'];
 </script>
 
@@ -24,7 +25,7 @@
 <hr />
 
 <div class="contrib-host">
-	{#each contribs as { login, avatar_url, html_url }}
+	{#each contributors as { login, avatar_url, html_url }}
 		{#if !usersIwantToExplodeSoBadly.includes(login)}
 			<ContributorButton name={login} pfp={avatar_url} url={html_url} />
 		{/if}

src/lib/components/molecules/PatchCell.svelte

@@ -4,7 +4,6 @@
 	import type { CompatiblePackage, Patch } from 'src/data/types';
 
 	export let patch: Patch;
-	export let current;
 	const hasPatchOptions = !!patch.options.length;
 	let expanded: boolean = false;
 </script>
@@ -109,7 +108,7 @@
 		transition: all 2s var(--bezier-one);
 		background-color: var(--grey-six);
 		padding: 1.25rem;
-		border-radius: 8px;
+		border-radius: 12px;
 	}
 
 	.patch-container:active {

src/routes/contributors/+page.svelte

@@ -21,9 +21,9 @@
 			<h4>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h4>
 		</div>
 		<div class="contrib-grid">
-			{#each $repositories as { contributors: contribs, name }}
+			{#each $repositories as { contributors, name: repo }}
 				<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-					<ContributorHost {contribs} repo={name} />
+					<ContributorHost {contributors} {repo} />
 				</div>
 			{/each}
 		</div>

src/routes/patches/+page.svelte

@@ -13,26 +13,24 @@
 
 	$: ({ patches, packages } = $api_patches);
 
-	let current: boolean = false;
+	let selectedPkg: boolean = false;
 	let searchTerm: string;
 	let searchTermFiltered: string;
 	let timeout: any = null;
 
-	const debounce = () => {
+	function filterByPackage(selectedPkg: string | boolean, packageList: any) {
-		clearTimeout(timeout);
+		for (let i = 0; i < packageList.length; i++) {
-		timeout = setTimeout(() => {
+			if (packageList[i].name === selectedPkg) {
-			searchTermFiltered = searchTerm
+				return true;
-				?.replace(/\./g, '')
+			}
-				.replace(/\s/g, '')
+		}
-				.replace(/-/g, '')
+	}
-				.toLowerCase();
-		}, 500);
-	};
 
 	function search(patch: Patch) {
-		function checkPkgName(findTerm: string | boolean, array: any) {
+		function checkPkgName(selectedPkg: string | boolean, packageList: any) {
-			for (let i = 0; i < array.length; i++) {
+			// Basically the same function as before lol
-				if (array[i].name.replace(/\./g, '').includes(findTerm)) {
+			for (let i = 0; i < packageList.length; i++) {
+				if (packageList[i].name.replace(/\./g, '').includes(selectedPkg)) {
 					return true;
 				}
 			}
@@ -45,14 +43,18 @@
 		);
 	}
 
-	function filterByPackage(findTerm: string | boolean, array: any) {
+	// Make sure we don't have filter the patches after every key press
-		for (let i = 0; i < array.length; i++) {
+	const debounce = () => {
-			if (array[i].name === findTerm) {
+		clearTimeout(timeout);
-				return true;
+		timeout = setTimeout(() => {
-			}
+			// Filter search term for better results (i.e. "  Unl O-ck" and "unlock" gives the same results)
-		}
+			searchTermFiltered = searchTerm
-		return false;
+				?.replace(/\./g, '')
-	}
+				.replace(/\s/g, '')
+				.replace(/-/g, '')
+				.toLowerCase();
+		}, 500);
+	};
 </script>
 
 <svelte:head>
@@ -64,10 +66,12 @@
 <main>
 	<aside in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
 		<TreeMenu>
+			<!-- Must bind both variables: we get searchTerm from the text input, -->
+			<!-- and searchTermFiltered gets cleared with the clear button -->
 			<Search bind:searchTerm bind:searchTermFiltered title="Search patches" on:keyup={debounce} />
 			<span>
 				{#each packages as pkg}
-					<TreeMenuButton bind:current name={pkg} />
+					<TreeMenuButton bind:selectedPkg name={pkg} />
 				{/each}
 			</span>
 		</TreeMenu>
@@ -75,11 +79,14 @@
 
 	<div class="patches-container">
 		{#each patches as patch}
-			{#key current || searchTermFiltered}
+			<!-- Trigger new animations when package or search changes (I love Svelte) -->
-				{#if filterByPackage(current, patch.compatiblePackages) || !current}
+			{#key selectedPkg || searchTermFiltered}
+				<!-- Show patch if it supports the selected package, or if no package has been selected -->
+				{#if filterByPackage(selectedPkg, patch.compatiblePackages) || !selectedPkg}
+					<!-- ...same with search -->
 					{#if search(patch) || !searchTermFiltered}
 						<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: 100 }}>
-							<PatchCell bind:current {patch} />
+							<PatchCell {patch} />
 						</div>
 					{/if}
 				{/if}
@@ -94,7 +101,7 @@
 		margin-inline: auto;
 		display: grid;
 		grid-template-columns: 300px 3fr;
-		width: min(98%, 90rem);
+		width: min(98%, 82rem);
 		gap: 1.5rem;
 	}