feat: follow requests in sidebar

src/lib/ui/Navigation.svelte

@@ -6,8 +6,9 @@
     import { playSound } from '$lib/sound.js';
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, onMount } from 'svelte';
     import { unread_notif_count } from '$lib/notifications.js';
+    import { fetchFollowRequests, followRequests } from '$lib/followRequests.js'
     import Lang from '$lib/lang';
 
     import Logo from '$lib/../img/campfire-logo.svg';
@@ -24,6 +25,7 @@
     import InfoIcon from '../../img/icons/info.svg';
     import SettingsIcon from '../../img/icons/settings.svg';
     import LogoutIcon from '../../img/icons/logout.svg';
+    import FollowersIcon from '../../img/icons/followers.svg';
 
     const VERSION = APP_VERSION;
     const lang = Lang('en_GB');
@@ -40,7 +42,7 @@
         goto(`/${$server.host}/${$account.username}`);
     }
 
-    async function log_out() {
+    async function logOut() {
         if (!confirm("This will log you out. Are you sure?")) return;
         
         const res = await api.revokeToken(
@@ -59,6 +61,10 @@
 
         goto("/");
     }
+
+    onMount(async () => {
+        await fetchFollowRequests(true)
+    })
 </script>
 
 <div id="navigation">
@@ -91,6 +97,19 @@
                 </span>
             {/if}
         </Button>
+        {#if $followRequests.length > 0}
+            <Button label="Follow requests"
+                    href="/follow-requests"}
+                    active={$page.url.pathname === "/follow-requests"}>
+                <svelte:fragment slot="icon">
+                    <FollowersIcon/>
+                </svelte:fragment>
+                {lang.string('navigation.follow_requests')}
+                <span class="notification-count">
+                    {$followRequests.length}
+                </span>
+            </Button>
+        {/if}
         <Button label="Explore" disabled>
             <svelte:fragment slot="icon">
                 <ExploreIcon height="auto"/>
@@ -142,7 +161,7 @@
                     <SettingsIcon/>
                 </svelte:fragment>
             </Button>
-            <Button centered label="{lang.string('navigation.log_out')}" on:click={() => log_out()}>
+            <Button centered label="{lang.string('navigation.log_out')}" on:click={() => logOut()}>
                 <svelte:fragment slot="icon">
                     <LogoutIcon/>
                 </svelte:fragment>

src/lib/ui/core/PageHeader.svelte

@@ -0,0 +1,34 @@
+<script>
+    export let title;
+</script>
+
+<header>
+    <h1>{title}</h1>
+    <slot name="icon" />
+</header>
+
+<style>
+    header {
+        width: 100%;
+        height: 64px;
+        margin: 16px 0;
+        padding: 0 8px;
+        display: flex;
+        flex-direction: row;
+        user-select: none;
+        box-sizing: border-box;
+
+    }
+
+    header h1 {
+        font-size: 1.5em;
+    }
+
+    nav {
+        margin-left: auto;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+    }
+</style>