feat: start dashboard

Catalogger.Frontend/src/routes/+layout.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Navbar from "$lib/components/Navbar.svelte";
+	import { toastStore } from "$lib/toast";
+	import { Toast, ToastHeader, ToastBody } from "@sveltestrap/sveltestrap";
+	import "../app.scss";
+	import type { LayoutData } from "./$types";
+
+	export let data: LayoutData;
+</script>
+
+<Navbar user={data.user} />
+
+<div class="container">
+	<slot />
+	<div class="position-absolute top-0 start-50 translate-middle-x">
+		{#each $toastStore as toast}
+			<Toast>
+				{#if toast.header}<ToastHeader>{toast.header}</ToastHeader>{/if}
+				<ToastBody>{toast.body}</ToastBody>
+			</Toast>
+		{/each}
+	</div>
+</div>

Catalogger.Frontend/src/routes/+layout.ts

@@ -0,0 +1,21 @@
+import { building } from "$app/environment";
+import apiFetch, { TOKEN_KEY, type CurrentUser } from "$lib/api";
+
+export const ssr = false;
+export const csr = true;
+export const prerender = true;
+
+export const load = async () => {
+	const token = localStorage.getItem(TOKEN_KEY);
+	let user: CurrentUser | null = null;
+	if (token && !building) {
+		try {
+			user = await apiFetch<CurrentUser>("GET", "/api/current-user");
+		} catch (e) {
+			console.error("Could not fetch user from API: ", e);
+			localStorage.removeItem(TOKEN_KEY);
+		}
+	}
+
+	return { user: user?.user || null, guilds: user?.guilds || null };
+};

Catalogger.Frontend/src/routes/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import apiFetch from "$lib/api";
+	import { onMount } from "svelte";
+
+	let guildCount: number | null = 0;
+
+	type MetaResponse = { guilds: number };
+
+	onMount(async () => {
+		const meta = await apiFetch<MetaResponse>("GET", "/api/meta");
+		guildCount = meta.guilds;
+	});
+</script>
+
+<h1>Welcome to SvelteKit</h1>
+<p>
+	Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
+</p>
+
+<p>
+	In {guildCount ?? "(loading)"} servers!
+</p>

Catalogger.Frontend/src/routes/+page.ts

@@ -0,0 +1 @@
+export const prerender = true;

Catalogger.Frontend/src/routes/callback/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import apiFetch, { TOKEN_KEY, type AuthCallback } from "$lib/api";
+	import { addToast } from "$lib/toast";
+	import { onMount } from "svelte";
+	import type { PageData } from "./$types";
+
+	let error = false;
+
+	export let data: PageData;
+
+	onMount(async () => {
+		const params = new URLSearchParams(window.location.search);
+		const code = params.get("code");
+		const state = params.get("state");
+
+		if (data.user) {
+			addToast({ header: "Cannot log in", body: "You are already logged in." });
+			await goto("/dash");
+			return;
+		}
+
+		if (!code || !state) {
+			addToast({
+				header: "Cannot log in",
+				body: "Missing 'code' or 'state' parameters.",
+			});
+			await goto("/");
+			return;
+		}
+
+		try {
+			const resp = await apiFetch<AuthCallback>("POST", "/api/callback", {
+				code,
+				state,
+			});
+
+			localStorage.setItem(TOKEN_KEY, resp.token);
+
+			await goto("/dash", { invalidateAll: true });
+		} catch (e) {
+			console.error("Callback request failed: ", e);
+			error = true;
+		}
+	});
+</script>
+
+{#if !error}
+	<h1>Loading...</h1>
+	<p>You should be redirected to the dashboard within a few seconds.</p>
+{:else}
+	<h1>Could not log in</h1>
+	<p>An error occurred while logging in with Discord. Please try again.</p>
+{/if}

Catalogger.Frontend/src/routes/dash/+layout.svelte

@@ -0,0 +1 @@
+<slot />

Catalogger.Frontend/src/routes/dash/+layout.ts

@@ -0,0 +1,12 @@
+import { addToast } from "$lib/toast";
+import { redirect } from "@sveltejs/kit";
+
+export const load = async ({ parent }) => {
+	const data = await parent();
+	if (!data.user) {
+		addToast({ body: "You are not logged in." });
+		redirect(303, "/");
+	}
+
+	return { user: data.user!, guilds: data.guilds! };
+};

Catalogger.Frontend/src/routes/dash/+page.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { ListGroup, ListGroupItem } from "@sveltestrap/sveltestrap";
+	import type { PageData } from "./$types";
+
+	export let data: PageData;
+
+	$: joinedGuilds = data.guilds.filter((g) => g.bot_in_guild);
+	$: unjoinedGuilds = data.guilds.filter((g) => !g.bot_in_guild);
+</script>
+
+<h1>Manage your servers</h1>
+
+<div class="row">
+	{#if joinedGuilds.length > 0}
+		<div class="col-lg">
+			<h2>Servers you can manage</h2>
+			<ListGroup>
+				{#each joinedGuilds as guild (guild.id)}
+					<ListGroupItem tag="a" href="/dash/{guild.id}">
+						<img
+							src={guild.icon_url}
+							alt="Icon for {guild.name}"
+							style="border-radius: 0.75em; height: 1.5em;"
+						/>
+						{guild.name}
+					</ListGroupItem>
+				{/each}
+			</ListGroup>
+		</div>
+	{/if}
+	{#if unjoinedGuilds.length > 0}
+		<div class="col-lg">
+			<h2>Servers you can add Catalogger to</h2>
+			<ListGroup>
+				{#each unjoinedGuilds as guild (guild.id)}
+					<ListGroupItem tag="a" href="/api/add-guild/{guild.id}">
+						<img
+							src={guild.icon_url}
+							alt="Icon for {guild.name}"
+							style="border-radius: 0.75em; height: 1.5em;"
+						/>
+						{guild.name}
+					</ListGroupItem>
+				{/each}
+			</ListGroup>
+		</div>
+	{/if}
+</div>