feat: Add banner for when the API is down

src/app.scss

@@ -34,7 +34,7 @@ body {
 .wrapper {
 	margin-inline: auto;
 	width: min(90%, 80rem);
-	margin-top: 7rem;
+	margin-top: 1rem;
 }
 
 :root {
@@ -73,6 +73,9 @@ body {
 	--surface-nine: hsl(calc(var(--hue, 206) + 24), 9.5%, 17.5%);
 
 	--red-one: hsl(333, 84%, 62%);
+	--red-two: hsl(357, 74%, 60%);
+
+	--yellow-one: hsl(59, 100%, 72%);
 
 	--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 	--drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),

src/data/api/index.ts

@@ -65,6 +65,11 @@ async function about(): Promise<AboutData> {
 	return { about: json };
 }
 
+async function ping(): Promise<boolean> {
+	const res = await fetch(`${settings.api_base_url()}/v3/ping`, { method: 'HEAD' });
+	return res.ok;
+}
+
 export const staleTime = 5 * 60 * 1000;
 export const queries = {
 	manager: {
@@ -91,5 +96,10 @@ export const queries = {
 		queryKey: ['info'],
 		queryFn: about,
 		staleTime
+	},
+	ping: {
+		queryKey: ['ping'],
+		queryFn: ping,
+		staleTime
 	}
 };

src/layout/Navbar/NavHost.svelte

@@ -3,14 +3,18 @@
 	import { horizontalSlide } from '$util/horizontalSlide';
 	import { fade } from 'svelte/transition';
 	import { expoOut } from 'svelte/easing';
+	import { createQuery } from '@tanstack/svelte-query';
 
 	import Navigation from './NavButton.svelte';
 	import Svg from '$lib/components/Svg.svelte';
 	import Modal from '$lib/components/Dialogue.svelte';
 	import Button from '$lib/components/Button.svelte';
+	import Banner from '$lib/components/Banner.svelte';
+	import Query from '$lib/components/Query.svelte';
 
 	import * as settings from '$data/api/settings';
 	import RouterEvents from '$data/RouterEvents';
+	import { queries } from '$data/api';
 
 	import { useQueryClient } from '@tanstack/svelte-query';
 
@@ -42,6 +46,7 @@
 	let menuOpen = false;
 	let modalOpen = false;
 	let y: number;
+	const pingQuery = () => createQuery(['ping'], queries.ping);
 
 	onMount(() => {
 		return RouterEvents.subscribe((event) => {
@@ -54,57 +59,88 @@
 
 <svelte:window bind:scrollY={y} />
 
-<nav class:scrolled={y > 10}>
-	<a class="menu-btn skiptab-btn" href="#skiptab">Skip navigation</a>
-
-	<button
-		class="menu-btn mobile-only"
-		on:click={() => (menuOpen = !menuOpen)}
-		class:open={menuOpen}
-		aria-label="Menu"
-	>
-		<span class="menu-btn__burger" />
-	</button>
-	<a href="/" id="logo"><img src="/logo.svg" alt="ReVanced Logo" /></a>
-
-	{#key menuOpen}
-		<div
-			class="nav-wrapper"
-			class:desktop-only={!menuOpen}
-			transition:horizontalSlide={{ direction: 'inline', easing: expoOut, duration: 400 }}
+<div id="nav-container">
+	<Query query={pingQuery()} let:data>
+		{#if !data}
+			<Banner level="caution" permanent>
+				The API is currently unresponsive and some services may not work correctly. Check the <a
+					href="https://status.revanced.app/"
+					target="_blank"
+					rel="noopener noreferrer">status page</a
+				> for updates.
+			</Banner>
+		{/if}
+	</Query>
+
+	<nav class:scrolled={y > 10}>
+		<a class="menu-btn skiptab-btn" href="#skiptab">Skip navigation</a>
+
+		<button
+			class="menu-btn mobile-only"
+			on:click={() => (menuOpen = !menuOpen)}
+			class:open={menuOpen}
+			aria-label="Menu"
 		>
-			<div id="main-navigation">
-				<ul class="nav-buttons">
-					<Navigation href="/" label="Home">Home</Navigation>
-					<Navigation queryKey="manager" href="/download" label="Download">Download</Navigation>
-					<Navigation queryKey="patches" href="/patches" label="Patches">Patches</Navigation>
-					<Navigation queryKey="contributors" href="/contributors" label="Contributors">
-						Contributors
-					</Navigation>
-					<Navigation queryKey={['about', 'team']} href="/donate" label="Donate">Donate</Navigation>
-				</ul>
-			</div>
-			<div id="secondary-navigation">
-				<button on:click={() => (modalOpen = !modalOpen)} aria-label="Settings">
-					<Svg viewBoxHeight={24} svgHeight={20}>
-						<path
-							d="M 19.1 12.9 C 19.1 12.6 19.2 12.3 19.2 12 C 19.2 11.7 19.2 11.4 19.1 11.1 L 21.1 9.5 C 21.3 9.4 21.3 9.1 21.2 8.9 L 19.3 5.6 C 19.2 5.4 18.9 5.3 18.7 5.4 L 16.3 6.4 C 15.8 6 15.3 5.7 14.7 5.5 L 14.3 3 C 14.3 2.8 14.1 2.6 13.8 2.6 L 10 2.6 C 9.8 2.6 9.6 2.8 9.5 3 L 9.2 5.3 C 8.7 5.6 8.1 5.9 7.6 6.3 L 5.2 5.3 C 5 5.2 4.8 5.3 4.6 5.5 L 2.7 8.9 C 2.6 9.1 2.7 9.3 2.9 9.5 L 4.9 11.1 C 4.9 11.4 4.8 11.7 4.8 12 C 4.8 12.3 4.8 12.6 4.9 12.9 L 2.9 14.5 C 2.7 14.6 2.7 14.9 2.8 15.1 L 4.7 18.4 C 4.8 18.6 5.1 18.7 5.3 18.6 L 7.7 17.6 C 8.2 18 8.7 18.3 9.3 18.5 L 9.7 21 C 9.8 21.2 9.9 21.4 10.2 21.4 L 14 21.4 C 14.2 21.4 14.4 21.2 14.5 21 L 14.9 18.5 C 15.5 18.3 16 17.9 16.5 17.6 L 18.9 18.6 C 19.1 18.7 19.4 18.6 19.5 18.4 L 21.4 15.1 C 21.5 14.9 21.5 14.6 21.3 14.5 L 19.1 12.9 Z M 12 15.6 C 10 15.6 8.4 14 8.4 12 C 8.4 10 10 8.4 12 8.4 C 14 8.4 15.6 10 15.6 12 C 15.6 14 14 15.6 12 15.6 Z"
-						/>
-					</Svg>
-				</button>
+			<span class="menu-btn__burger" />
+		</button>
+		<a href="/" id="logo"><img src="/logo.svg" alt="ReVanced Logo" /></a>
+
+		{#key menuOpen}
+			<div
+				id="nav-wrapper-container"
+				class:desktop-only={!menuOpen}
+				transition:horizontalSlide={{ direction: 'inline', easing: expoOut, duration: 400 }}
+			>
+				<div id="banner-pad">
+					<Query query={pingQuery()} let:data>
+						{#if !data}
+							<Banner level="caution" permanent>
+								The API is currently unresponsive and some services may not work correctly. Check
+								the <a href="https://status.revanced.app/" target="_blank" rel="noopener noreferrer"
+									>status page</a
+								> for updates.
+							</Banner>
+						{/if}
+					</Query>
+				</div>
+
+				<div class="nav-wrapper">
+					<div id="main-navigation">
+						<ul class="nav-buttons">
+							<Navigation href="/" label="Home">Home</Navigation>
+							<Navigation queryKey="manager" href="/download" label="Download">Download</Navigation>
+							<Navigation queryKey="patches" href="/patches" label="Patches">Patches</Navigation>
+							<Navigation queryKey="contributors" href="/contributors" label="Contributors">
+								Contributors
+							</Navigation>
+							<Navigation queryKey={['about', 'team']} href="/donate" label="Donate"
+								>Donate</Navigation
+							>
+						</ul>
+					</div>
+					<div id="secondary-navigation">
+						<button on:click={() => (modalOpen = !modalOpen)} aria-label="Settings">
+							<Svg viewBoxHeight={24} svgHeight={20}>
+								<path
+									d="M 19.1 12.9 C 19.1 12.6 19.2 12.3 19.2 12 C 19.2 11.7 19.2 11.4 19.1 11.1 L 21.1 9.5 C 21.3 9.4 21.3 9.1 21.2 8.9 L 19.3 5.6 C 19.2 5.4 18.9 5.3 18.7 5.4 L 16.3 6.4 C 15.8 6 15.3 5.7 14.7 5.5 L 14.3 3 C 14.3 2.8 14.1 2.6 13.8 2.6 L 10 2.6 C 9.8 2.6 9.6 2.8 9.5 3 L 9.2 5.3 C 8.7 5.6 8.1 5.9 7.6 6.3 L 5.2 5.3 C 5 5.2 4.8 5.3 4.6 5.5 L 2.7 8.9 C 2.6 9.1 2.7 9.3 2.9 9.5 L 4.9 11.1 C 4.9 11.4 4.8 11.7 4.8 12 C 4.8 12.3 4.8 12.6 4.9 12.9 L 2.9 14.5 C 2.7 14.6 2.7 14.9 2.8 15.1 L 4.7 18.4 C 4.8 18.6 5.1 18.7 5.3 18.6 L 7.7 17.6 C 8.2 18 8.7 18.3 9.3 18.5 L 9.7 21 C 9.8 21.2 9.9 21.4 10.2 21.4 L 14 21.4 C 14.2 21.4 14.4 21.2 14.5 21 L 14.9 18.5 C 15.5 18.3 16 17.9 16.5 17.6 L 18.9 18.6 C 19.1 18.7 19.4 18.6 19.5 18.4 L 21.4 15.1 C 21.5 14.9 21.5 14.6 21.3 14.5 L 19.1 12.9 Z M 12 15.6 C 10 15.6 8.4 14 8.4 12 C 8.4 10 10 8.4 12 8.4 C 14 8.4 15.6 10 15.6 12 C 15.6 14 14 15.6 12 15.6 Z"
+								/>
+							</Svg>
+						</button>
+					</div>
+				</div>
 			</div>
-		</div>
-	{/key}
-
-	{#if menuOpen}
-		<div
-			class="overlay mobile-only"
-			transition:fade={{ duration: 350 }}
-			on:click={() => (menuOpen = !menuOpen)}
-			on:keypress={() => (menuOpen = !menuOpen)}
-		/>
-	{/if}
-</nav>
+		{/key}
+
+		{#if menuOpen}
+			<div
+				class="overlay mobile-only"
+				transition:fade={{ duration: 350 }}
+				on:click={() => (menuOpen = !menuOpen)}
+				on:keypress={() => (menuOpen = !menuOpen)}
+			/>
+		{/if}
+	</nav>
+</div>
 
 <!-- settings -->
 <Modal bind:modalOpen>
@@ -179,15 +215,19 @@
 		top: 30px;
 	}
 
-	nav {
-		position: fixed;
+	#nav-container {
+		position: sticky;
 		top: 0;
+		z-index: 666;
+		width: 100%;
+	}
+
+	nav {
 		display: flex;
 		gap: 2rem;
 		justify-content: space-between;
 		align-items: center;
 		padding: 1rem 2rem;
-		z-index: 666;
 		height: 70px;
 		background-color: var(--surface-eight);
 		width: 100%;
@@ -200,10 +240,6 @@
 		gap: 2rem;
 	}
 
-	a {
-		display: flex;
-	}
-
 	img {
 		height: 22px;
 	}
@@ -239,21 +275,41 @@
 		}
 	}
 
+	#banner-pad {
+		display: none;
+	}
+
+	#nav-wrapper-container {
+		width: 100%;
+	}
+
 	@media (max-width: 767px) {
+		#banner-pad {
+			display: block;
+			width: 100vw;
+			visibility: hidden;
+		}
+
+		#nav-wrapper-container {
+			overflow: hidden;
+			position: fixed;
+			width: 20rem;
+			top: 0;
+			left: 0;
+			height: 100%;
+			background-color: var(--surface-eight);
+			z-index: 100;
+		}
+
 		.nav-wrapper {
 			flex-direction: column;
 			gap: 0.5rem;
 			height: 100%;
 			margin: 0 auto;
-			position: fixed;
 			width: 20rem;
-			top: 0px;
 			border-radius: 0px 24px 24px 0px;
-			left: 0px;
-			background-color: var(--surface-eight);
 			padding: 1rem;
 			padding-top: 6rem;
-			z-index: 100;
 		}
 
 		.desktop-only {