feat: nicer patches + filtering, use stores again

src/lib/components/molecules/ContributorHost.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Contributor } from '$lib/types';
+	import type { Contributor } from '$lib/types';
 	import ContributorButton from '../atoms/ContributorPerson.svelte';
 
 	export let contribs: Contributor[];
@@ -17,18 +17,14 @@
 
 {#if contribs}
 	<div class="container">
-		<a href="https://github.com/{repo}" target="_blank">
+		<a href="https://github.com/{repo}" rel="noreferrer" target="_blank">
 			<h2>{repo_name}</h2>
 		</a>
 
 		<div class="contrib-host">
 			{#each contribs as contrib}
 				{#if !usersIwantToExplodeSoBadly.includes(contrib.login)}
-					<ContributorButton 
-                        name={contrib.login} 
-                        pfp={contrib.avatar_url} 
-                        url={contrib.html_url} 
-                    />
+					<ContributorButton name={contrib.login} pfp={contrib.avatar_url} url={contrib.html_url} />
 				{/if}
 			{/each}
 		</div>

src/lib/components/molecules/Footer.svelte

@@ -1,4 +1,16 @@
-<script>
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import type { ContribData } from '../../../data/ContributorsStore';
+	import { ContributorsStore } from '../../../data/ContributorsStore';
+	
+	let data: ContribData;
+
+	onMount(() => {
+		ContributorsStore.subscribe(async (e: Promise<ContribData>) => {
+			data = await e;
+		});
+	});
 </script>
 
 <hr />
@@ -17,31 +29,39 @@
 	<section class="links-container">
 		<div class="link-column">
 			<h5>Pages</h5>
-			<h6>Home</h6>
-			<h6>Download</h6>
-			<h6>Docs</h6>
-			<h6>Patches</h6>
-			<h6>Credits</h6>
+			<a href="/"><h6>Home</h6></a>
+			<a href="/download"><h6>Download</h6></a>
+			<a href="/docs"><h6>Docs</h6></a>
+			<a href="/patches"><h6>Patches</h6></a>
+			<a href="/credits"><h6>Credits</h6></a>
 		</div>
 		<div class="link-column">
 			<h5>Repos</h5>
-			<h6>CLI</h6>
-			<h6>Patcher</h6>
-			<h6>Patches</h6>
-			<h6>Integrations</h6>
-			<h6>Manager</h6>
-			<h6>Website</h6>
-			<h6>API</h6>
+			{#if data}
+				{#each data.repositories as { name }}
+				<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
+					<div>
+						<h6>{name
+							.replace(/-/g, ' ')
+							.replace(/revanced\/revanced/g, '')
+							.replace(/cli/g, 'CLI')
+							.replace(/api/g, 'API')
+							.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())}
+						</h6>
+					</div>
+				</a>
+				{/each}
+			{/if}
 		</div>
 		<div class="link-column">
-			<h5>Repos</h5>
-			<h6>CLI</h6>
-			<h6>Patcher</h6>
-			<h6>Patches</h6>
-			<h6>Integrations</h6>
-			<h6>Manager</h6>
-			<h6>Website</h6>
-			<h6>API</h6>
+			<!-- to replace -->
+			<h5>Socials</h5>
+			<a href="/"><h6>Github</h6></a>
+			<a href="/"><h6>Discord</h6></a>
+			<a href="/"><h6>Reddit</h6></a>
+			<a href="/"><h6>Twitter</h6></a>
+			<a href="/"><h6>Telegram</h6></a>
+			<a href="/"><h6>Video Site</h6></a>
 		</div>
 	</section>
 </footer>
@@ -74,6 +94,10 @@
 		height: 3rem;
 	}
 
+	a {
+		text-decoration: none;
+	}
+
 	.links-container {
 		display: flex;
 		gap: 5rem;

src/lib/components/molecules/TreeMenu.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	export let title: string;
+</script>
+
+<div class="menu">
+	<h5>{title.toUpperCase()}</h5>
+	<hr />
+	<div class="package-list">
+		<slot />
+	</div>
+</div>
+
+<style>
+	.menu {
+		height: calc(100vh - 7.5rem);
+		width: 100%;
+		padding: 0px 10px 30px 10px;
+		display: flex;
+		flex-direction: column;
+		position: sticky;
+		top: 7.5rem;
+		overflow-y: scroll;
+	}
+
+	h5 {
+		font-weight: 500;
+	}
+
+	hr {
+		margin-top: 0.75rem;
+		display: block;
+		height: 1px;
+		border: 0;
+		border-top: 1px solid var(--grey-three);
+	}
+
+	.package-list {
+		margin-top: 0.75rem;
+		display: flex;
+		flex-direction: column;
+		white-space: normal;
+		word-break: break-all;
+	}
+
+	/* .package-list:has(.loading) {
+        padding-top: 7.5rem;
+    } */
+</style>