feat: patches page

src/app.css

@@ -29,7 +29,7 @@ html, body{
 
 .wrapper{
     margin-inline: auto;
-    width: min(87%, 100rem);
+    width: min(90%, 100rem);
     margin-top: 7rem;
 }
 
@@ -56,8 +56,8 @@ html, body{
 h1{
     color: var(--white);
     font-weight: 700;
-	line-height: 0.75em;
-    font-size: 1.75rem;
+	line-height: 1.5rem;
+    font-size: 1.5rem;
 }
 
 h2{
@@ -86,7 +86,7 @@ h5{
     letter-spacing: 0.02rem;
 }
 
-h6{
+h6 {
     color:var(--grey-five);
     font-weight: 300;
     font-size: 1rem;

src/lib/components/atoms/Patch.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { fly } from 'svelte/transition';
+    import { quintOut } from 'svelte/easing';
+
+    export let name: string;
+    export let desc: string;
+    export let ver: string;
+    // export let pkgName: string;
+    export let hasPatchOptions: boolean;
+
+    function handleClick() {
+        const el = document.getElementById('arrow');
+        if (!el) return;
+        el!.style.transform = "rotate(180deg)"
+    }
+    
+</script>
+
+<div 
+    class="patch-container {hasPatchOptions ? 'expanded' : ''}"
+    on:click={hasPatchOptions ? handleClick : ''}>
+    <div class="things">  
+        <div class="title">
+            <h1>{name}</h1>
+            <h3>{ver}</h3>
+        </div>
+        
+        {#if hasPatchOptions}
+            <img id="arrow" src="/icons/arrow.svg" alt="dropdown">
+        {/if}
+    </div>
+    <!-- <h3>{pkgName}</h3> -->
+
+    <h4>{desc}</h4>
+</div>
+
+<style>
+    h1 {
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        margin-right: 0.5rem;
+        font-size: 1.25rem;
+    }
+
+    h3 {
+        color: var(--grey-five);
+        font-size: 0.8rem;
+        margin-bottom: 0.1rem;
+    }
+
+    h4 {
+        color: var(--grey-five);
+        font-size: 0.8rem;
+        font-weight: 400;
+
+    }
+
+    .patch-container {
+        background-color: var(--grey-six);
+        padding: 1.5rem;
+        border-radius: 8px;
+    }
+
+    .title {
+        display: flex;
+        align-items: center;
+
+    }
+
+    .things {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    img {
+        height: 1.5rem;
+    }
+
+    .expanded {
+
+    }
+
+</style>
+

src/lib/components/molecules/NavHost.svelte

@@ -27,8 +27,6 @@
 
 			{#if $page.url.pathname !== '/'}
 				<h1 
-				in:fly="{{ y: 10, easing: quintOut, duration: 700 }}"
-				out:fly="{{ y: 10, easing: quintOut, duration: 500 }}"
 				>
 					<span>Re</span>Vanced
 				</h1>
@@ -39,6 +37,7 @@
 		<Navigation href="/">Home</Navigation>
 		<Navigation href="/download">Download</Navigation>
 		<Navigation href="/docs">Docs</Navigation>
+		<Navigation href="/patches">Patches</Navigation>
 		<Navigation href="/credits">Credits</Navigation>
 	</ul>
 	<div class="menu-btn" class:open={menuOpen} bind:this={menuBtn}>

src/lib/stores/PatchesStore.js

@@ -0,0 +1,11 @@
+import { readable } from "svelte/store";
+
+const fetchPatches = async () => {
+    const response = await fetch('https://releases.rvcd.win/patches');
+    const json = await response.json();
+    console.log(typeof json)
+    return json;
+};
+
+const PatchesStore = readable(fetchPatches());
+export default PatchesStore;

src/routes/+page.svelte

@@ -5,7 +5,7 @@
 	import Wave from '$lib/components/atoms/Wave.svelte';
 </script>
 
-<div class="wrapper">
+<div class="wrap">
 	<div class="wrappezoid">
 		<Home />
 		<div id="heroimg"><HeroImage /></div>
@@ -15,6 +15,11 @@
 <Wave />
 
 <style>
+	.wrap {
+		margin-inline: auto;
+		width: min(87%, 100rem);
+		margin-top: 7rem;
+	}
 	.wrappezoid {
 		height: calc(100vh - 120px);
 		display: flex;

src/routes/patches/+page.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+    import Patch from "$lib/components/atoms/Patch.svelte";
+    import PatchesStore from "$lib/stores/PatchesStore";
+    import { onMount } from "svelte";
+    import { fly } from 'svelte/transition';
+    import { quintOut } from 'svelte/easing';
+
+    let patches: any;
+    let pkg_list = [];
+
+    let current = 'all';
+
+    onMount (async () => {
+        PatchesStore.subscribe(async (e) => {
+            patches = await e;
+            console.log(patches);
+
+            for (let i = 0; i < patches.length; i++) {
+                patches[i].compatiblePackages.forEach(pkg => {
+                    let index = pkg_list.findIndex(x => x == pkg.name); 
+                    if (index === -1) {
+                        pkg_list.push(pkg.name);
+                        pkg_list = pkg_list;
+                    };
+                });
+            };
+        });
+
+    });
+
+    
+</script>
+
+<section>
+    <div 
+        class="menu" 
+        in:fly="{{ y: 10, easing: quintOut, duration: 750}}"
+    >
+        <h3>PACKAGES</h3>
+        {#if pkg_list}
+            <div class="package-list">
+                {#each pkg_list as pkg, i }
+                    <div 
+                        class="package"
+                        class:selected={current === pkg}
+                        on:click={() => current = pkg}
+                    > 
+                        <h3>{pkg}</h3>
+                    </div>
+                {/each}
+            </div>
+        {/if}
+    </div>
+
+        {#if patches}
+            <div class="patches-list patches-container">
+                {#each patches as patch, i}
+                    <div in:fly="{{ x: 10, easing: quintOut, duration: 750, delay: (75 * i)}}">
+                        <Patch
+                            name={patch.name
+                                // im sorry
+                                .replace(/-/g, ' ')
+                                .replace(/(?:^|\s)\S/g, x => x.toUpperCase())
+                                .replace(/Microg/g, 'MicroG')
+                                .replace(/Hdr/g, 'HDR')
+                                .replace(/Sponsorblock/g, 'SponsorBlock')
+                                .replace(/Tiktok/g, 'TikTok')
+                            }
+                            desc={patch.description}
+                            ver={patch.version}
+                            hasPatchOptions={!!patch.options.length}
+                        />
+                    </div>
+                {/each}
+            </div>
+        {/if}
+</section>
+
+<style>
+    section {
+        padding-top: 4.25rem;
+        margin-inline: auto;
+        width: min(95%, 100rem);
+        display:grid;
+        grid-template-columns: 300px 3fr;
+        gap: 1rem;
+    }
+
+    .patches-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        padding-bottom: 3rem;
+        overflow-y: scroll;
+        height: calc(100vh - 4.25rem);
+        width:100%;
+        padding-top: 3rem;
+        padding-right: 1rem;
+    }
+
+    .menu {
+        height: calc(100vh - 10rem);
+        width:100%;
+        margin-top: 3rem;
+        padding: 0px 15px 0px 15px;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .package-list {
+        display: flex;
+        flex-direction: column;
+        white-space: normal;
+        word-break: break-all;
+    }
+
+    .package {
+        padding: 0.6rem;
+        border-radius: 8px;
+        cursor: pointer;
+        display: flex;
+        gap: 0.6rem;
+        width: 100%;
+        user-select: none;
+        transition: all 0.4s var(--bezier-one);
+    }
+
+    .package::before {
+        content: '';
+        inline-size: 4px;
+        border-radius: 200px;
+        background-color: var(--red);
+        opacity: 0;
+    }
+
+    .selected::before{
+        opacity: 1;
+    }
+
+    .package > h3 {
+        color: var(--grey-five);
+    }
+
+    .selected {
+        background-color: var(--grey-three);
+    }
+    .selected > h3 {
+        color: var(--red);
+    }
+
+    .package:not(.selected):hover {
+        background-color: var(--grey-six);
+    }
+</style>

static/icons/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m24 30-10-9.95h20Z" fill="#ACC1D2"/></svg>