you know what let's just change frontend framework again

Foxnouns.Frontend/src/routes/+layout.server.ts

@@ -0,0 +1,21 @@
+import { clearToken, TOKEN_COOKIE_NAME } from "$lib";
+import { apiRequest } from "$api";
+import ApiError, { ErrorCode } from "$api/error";
+import type { Meta, User } from "$api/models";
+import log from "$lib/log";
+import type { LayoutServerLoad } from "./$types";
+
+export const load = (async ({ fetch, cookies }) => {
+	let meUser: User | null = null;
+	if (cookies.get(TOKEN_COOKIE_NAME)) {
+		try {
+			meUser = await apiRequest<User>("GET", "/users/@me", { fetch, cookies });
+		} catch (e) {
+			if (e instanceof ApiError && e.code === ErrorCode.AuthenticationRequired) clearToken(cookies);
+			else log.error("Could not fetch /users/@me and token has not expired:", e);
+		}
+	}
+
+	const meta = await apiRequest<Meta>("GET", "/meta", { fetch, cookies });
+	return { meta, meUser };
+}) satisfies LayoutServerLoad;

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import "../app.scss";
+	import type { LayoutData } from "./$types";
+	import Navbar from "$components/Navbar.svelte";
+
+	type Props = { children: Snippet; data: LayoutData };
+	let { children, data }: Props = $props();
+</script>
+
+<Navbar user={data.meUser} meta={data.meta} />
+
+{@render children?.()}

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+
+	type Props = { data: PageData };
+	let { data }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	<h1>pronouns.cc</h1>
+
+	<p>
+		{data.meta.repository}
+		{data.meta.version}
+		{data.meta.users.total}
+		{data.meta.limits.bio_length}
+	</p>
+</div>

Foxnouns.Frontend/src/routes/@[username]/+page.server.ts

@@ -0,0 +1,20 @@
+import { apiRequest } from "$api";
+import type { UserWithMembers } from "$api/models";
+
+export const load = async ({ params, fetch, cookies, url }) => {
+	const user = await apiRequest<UserWithMembers>("GET", `/users/${params.username}`, {
+		fetch,
+		cookies,
+	});
+
+	// Paginate members on the server side
+	let currentPage = Number(url.searchParams.get("page") || "0");
+	const pageCount = Math.ceil(user.members.length / 20);
+	let members = user.members.slice(currentPage * 20, (currentPage + 1) * 20);
+	if (members.length === 0) {
+		members = user.members.slice(0, 20);
+		currentPage = 0;
+	}
+
+	return { user, members, currentPage, pageCount };
+};

Foxnouns.Frontend/src/routes/@[username]/+page.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+	import ProfileHeader from "$components/profile/ProfileHeader.svelte";
+	import OwnProfileNotice from "$components/profile/OwnProfileNotice.svelte";
+	import { mergePreferences } from "$api/models";
+	import ProfileFields from "$components/profile/ProfileFields.svelte";
+	import { t } from "$lib/i18n";
+	import { Icon } from "@sveltestrap/sveltestrap";
+	import Paginator from "./Paginator.svelte";
+	import MemberCard from "$components/profile/user/MemberCard.svelte";
+
+	type Props = { data: PageData };
+	let { data }: Props = $props();
+
+	let allPreferences = $derived(mergePreferences(data.user.custom_preferences));
+	let isMeUser = $derived(data.meUser && data.meUser.id === data.user.id);
+</script>
+
+<svelte:head>
+	<title>@{data.user.username} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	{#if isMeUser}
+		<OwnProfileNotice editLink="/settings/profile" />
+	{/if}
+
+	<ProfileHeader name="@{data.user.username}" profile={data.user} lazyLoadAvatar={true} />
+	<ProfileFields profile={data.user} {allPreferences} />
+
+	{#if data.members.length > 0}
+		<hr />
+		<h2>
+			{data.user.member_title || $t("profile.default-members-header")}
+			{#if isMeUser}
+				<a class="btn btn-success" href="/settings/create-member">
+					<Icon name="person-plus-fill" aria-hidden={true} />
+					{$t("profile.create-member-button")}
+				</a>
+			{/if}
+			<Paginator
+				currentPage={data.currentPage}
+				pageCount={data.pageCount}
+				href="/@{data.user.username}"
+			/>
+		</h2>
+		<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 text-center">
+			{#each data.members as member (member.id)}
+				<MemberCard username={data.user.username} {member} {allPreferences} />
+			{/each}
+		</div>
+		<div class="text-center">
+			<Paginator
+				currentPage={data.currentPage}
+				pageCount={data.pageCount}
+				href="/@{data.user.username}"
+			/>
+		</div>
+	{/if}
+</div>

Foxnouns.Frontend/src/routes/@[username]/Paginator.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Pagination, PaginationItem, PaginationLink } from "@sveltestrap/sveltestrap";
+
+	type Props = { currentPage: number; pageCount: number; href: string };
+	let { currentPage, pageCount, href }: Props = $props();
+
+	let prevPage = $derived(currentPage > 0 ? currentPage - 1 : 0);
+	let prevLink = $derived(prevPage !== 0 ? `${href}?page=${prevPage}` : href);
+
+	let nextPage = $derived(currentPage < pageCount - 1 ? currentPage + 1 : pageCount - 1);
+</script>
+
+{#if pageCount > 1}
+	<Pagination>
+		<PaginationItem>
+			<PaginationLink first {href} />
+		</PaginationItem>
+		<PaginationItem>
+			<PaginationLink previous href={prevLink} />
+		</PaginationItem>
+		<PaginationItem active>
+			<PaginationLink href="{href}?page={currentPage}">{currentPage + 1}</PaginationLink>
+		</PaginationItem>
+		<PaginationItem>
+			<PaginationLink next href="{href}?page={nextPage}" />
+		</PaginationItem>
+		<PaginationItem>
+			<PaginationLink last href="{href}?page={pageCount - 1}" />
+		</PaginationItem>
+	</Pagination>
+{/if}

Foxnouns.Frontend/src/routes/auth/callback/mastodon/[instance]/+page.server.ts

@@ -0,0 +1,62 @@
+import { apiRequest } from "$api";
+import ApiError, { ErrorCode, type RawApiError } from "$api/error";
+import type { AuthResponse, CallbackResponse } from "$api/models/auth.js";
+import { setToken } from "$lib";
+import log from "$lib/log.js";
+import { isRedirect, redirect } from "@sveltejs/kit";
+
+export const load = async ({ parent, params, url, fetch, cookies }) => {
+	const { meUser } = await parent();
+	if (meUser) redirect(303, `/@${meUser.username}`);
+
+	const code = url.searchParams.get("code") as string | null;
+	const state = url.searchParams.get("state") as string | null;
+	if (!code || !state) throw new ApiError(undefined, ErrorCode.BadRequest).obj;
+
+	const resp = await apiRequest<CallbackResponse>("POST", "/auth/fediverse/callback", {
+		body: { code, state, instance: params.instance },
+		isInternal: true,
+		fetch,
+	});
+
+	if (resp.has_account) {
+		setToken(cookies, resp.token!);
+		redirect(303, `/@${resp.user!.username}`);
+	}
+
+	return {
+		hasAccount: false,
+		instance: params.instance,
+		ticket: resp.ticket!,
+		remoteUser: resp.remote_username!,
+	};
+};
+
+export const actions = {
+	default: async ({ request, fetch, cookies }) => {
+		const data = await request.formData();
+		const username = data.get("username") as string | null;
+		const ticket = data.get("ticket") as string | null;
+
+		if (!username || !ticket)
+			return {
+				error: { message: "Bad request", code: ErrorCode.BadRequest, status: 403 } as RawApiError,
+			};
+
+		try {
+			const resp = await apiRequest<AuthResponse>("POST", "/auth/fediverse/register", {
+				body: { username, ticket },
+				isInternal: true,
+				fetch,
+			});
+
+			setToken(cookies, resp.token);
+			redirect(303, "/auth/welcome");
+		} catch (e) {
+			if (isRedirect(e)) throw e;
+			log.error("Could not sign up user with username %s:", username, e);
+			if (e instanceof ApiError) return { error: e.obj };
+			throw e;
+		}
+	},
+};

Foxnouns.Frontend/src/routes/auth/callback/mastodon/[instance]/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Button, Input, Label } from "@sveltestrap/sveltestrap";
+	import type { ActionData, PageData } from "./$types";
+	import { t } from "$lib/i18n";
+	import { enhance } from "$app/forms";
+	import ErrorAlert from "$components/ErrorAlert.svelte";
+
+	type Props = { data: PageData; form: ActionData };
+	let { data, form }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{$t("auth.register-with-mastodon")} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	<h1>{$t("auth.register-with-mastodon")}</h1>
+
+	{#if form?.error}
+		<ErrorAlert error={form?.error} />
+	{/if}
+
+	<form method="POST" use:enhance>
+		<div class="mb-3">
+			<Label>{$t("auth.remote-fediverse-account-label")}</Label>
+			<Input type="text" readonly value={data.remoteUser} />
+		</div>
+		<div class="mb-3">
+			<Label>{$t("auth.register-username-label")}</Label>
+			<Input type="text" name="username" required />
+		</div>
+		<input type="hidden" name="ticket" value={data.ticket} />
+		<Button color="primary" type="submit">{$t("auth.register-button")}</Button>
+	</form>
+</div>

Foxnouns.Frontend/src/routes/auth/log-in/+page.server.ts

@@ -0,0 +1,79 @@
+import { isRedirect, redirect } from "@sveltejs/kit";
+
+import { apiRequest } from "$api";
+import type { AuthResponse, AuthUrls } from "$api/models/auth";
+import { setToken } from "$lib";
+import ApiError, { ErrorCode } from "$api/error";
+
+export const load = async ({ fetch, parent }) => {
+	const parentData = await parent();
+	if (parentData.meUser) redirect(303, `/@${parentData.meUser.username}`);
+
+	const urls = await apiRequest<AuthUrls>("POST", "/auth/urls", { fetch, isInternal: true });
+	return { urls };
+};
+
+export const actions = {
+	login: async ({ request, fetch, cookies }) => {
+		const body = await request.formData();
+		const email = body.get("email") as string | null;
+		const password = body.get("password") as string | null;
+
+		try {
+			const resp = await apiRequest<AuthResponse>("POST", "/auth/email/login", {
+				body: { email, password },
+				fetch,
+				isInternal: true,
+			});
+
+			setToken(cookies, resp.token);
+			redirect(303, `/@${resp.user.username}`);
+		} catch (e) {
+			if (isRedirect(e)) throw e;
+
+			if (e instanceof ApiError) return { error: e.obj };
+			throw e;
+		}
+	},
+	fediToggle: () => {
+		return { error: null, showFediBox: true };
+	},
+	fedi: async ({ request, fetch }) => {
+		const body = await request.formData();
+		const instance = body.get("instance") as string | null;
+		if (!instance) return { error: new ApiError(undefined, ErrorCode.BadRequest).obj };
+
+		try {
+			const resp = await apiRequest<{ url: string }>(
+				"GET",
+				`/auth/fediverse?instance=${encodeURIComponent(instance)}`,
+				{ fetch, isInternal: true },
+			);
+			redirect(303, resp.url);
+		} catch (e) {
+			if (isRedirect(e)) throw e;
+
+			if (e instanceof ApiError) return { error: e.obj };
+			throw e;
+		}
+	},
+	fediForceRefresh: async ({ request, fetch }) => {
+		const body = await request.formData();
+		const instance = body.get("instance") as string | null;
+		if (!instance) return { error: new ApiError(undefined, ErrorCode.BadRequest).obj };
+
+		try {
+			const resp = await apiRequest<{ url: string }>(
+				"GET",
+				`/auth/fediverse?instance=${encodeURIComponent(instance)}&forceRefresh=true`,
+				{ fetch, isInternal: true },
+			);
+			redirect(303, resp.url);
+		} catch (e) {
+			if (isRedirect(e)) throw e;
+
+			if (e instanceof ApiError) return { error: e.obj };
+			throw e;
+		}
+	},
+};

Foxnouns.Frontend/src/routes/auth/log-in/+page.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { ActionData, PageData } from "./$types";
+	import { t } from "$lib/i18n";
+	import { enhance } from "$app/forms";
+	import { Button, ButtonGroup, Input, InputGroup } from "@sveltestrap/sveltestrap";
+	import ErrorAlert from "$components/ErrorAlert.svelte";
+
+	type Props = { data: PageData; form: ActionData };
+	let { data, form }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{$t("title.log-in")} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	<div class="row">
+		{#if form?.error}
+			<ErrorAlert error={form.error} />
+		{/if}
+	</div>
+	<div class="row">
+		{#if data.urls.email_enabled}
+			<div class="col col-md mb-4">
+				<h2>{$t("auth.log-in-form-title")}</h2>
+				<form method="POST" action="?/login" use:enhance>
+					<div class="mb-2">
+						<label class="form-label" for="email">{$t("auth.log-in-form-email-label")}</label>
+						<Input type="email" id="email" name="email" placeholder="me@example.com" />
+					</div>
+					<div class="mb-2">
+						<label class="form-label" for="password">{$t("auth.log-in-form-password-label")}</label>
+						<Input type="password" id="password" name="password" />
+					</div>
+					<ButtonGroup>
+						<Button type="submit" color="primary">{$t("auth.log-in-button")}</Button>
+						<a class="btn btn-secondary" href="/auth/register">
+							{$t("auth.register-with-email-button")}
+						</a>
+					</ButtonGroup>
+				</form>
+			</div>
+		{:else}
+			<div class="col-lg-3"></div>
+		{/if}
+		<div class="col col-md">
+			<h3>{$t("auth.log-in-3rd-party-header")}</h3>
+			<p>{$t("auth.log-in-3rd-party-desc")}</p>
+			<form method="POST" action="?/fediToggle" use:enhance>
+				<div class="list-group">
+					{#if data.urls.discord}
+						<a href={data.urls.discord} class="list-group-item list-group-item-action">
+							{$t("auth.log-in-with-discord")}
+						</a>
+					{/if}
+					{#if data.urls.google}
+						<a href={data.urls.google} class="list-group-item list-group-item-action">
+							{$t("auth.log-in-with-google")}
+						</a>
+					{/if}
+					{#if data.urls.tumblr}
+						<a href={data.urls.tumblr} class="list-group-item list-group-item-action">
+							{$t("auth.log-in-with-tumblr")}
+						</a>
+					{/if}
+					<button type="submit" class="list-group-item list-group-item-action">
+						{$t("auth.log-in-with-the-fediverse")}
+					</button>
+				</div>
+			</form>
+			{#if form?.showFediBox}
+				<h4 class="mt-4">{$t("auth.log-in-with-the-fediverse")}</h4>
+				<form method="POST" action="?/fedi" use:enhance>
+					<InputGroup>
+						<Input name="instance" type="text" placeholder="Your instance (i.e. mastodon.social)" />
+						<Button type="submit" color="secondary">{$t("auth.log-in-button")}</Button>
+					</InputGroup>
+					<p>
+						{$t("auth.log-in-with-fediverse-error-blurb")}
+						<Button formaction="?/fediForceRefresh" type="submit" color="link">
+							{$t("auth.log-in-with-fediverse-force-refresh-button")}
+						</Button>
+					</p>
+				</form>
+			{/if}
+		</div>
+	</div>
+</div>

Foxnouns.Frontend/src/routes/auth/welcome/+page.server.ts

@@ -0,0 +1,6 @@
+import { redirect } from "@sveltejs/kit";
+
+export const load = async ({ parent }) => {
+	const { meUser } = await parent();
+	if (!meUser) redirect(303, "/auth/log-in");
+};

Foxnouns.Frontend/src/routes/auth/welcome/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { t } from "$lib/i18n";
+	import type { PageData } from "./$types";
+
+	type Props = { data: PageData };
+	let { data }: Props = $props();
+	let user = $derived(data.meUser!);
+</script>
+
+<svelte:head>
+	<title>{$t("title.welcome")} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	<h2>Welcome to pronouns.cc!</h2>
+
+	<div class="alert alert-secondary">
+		<a href="/@{user.username}">If you just want to go to your profile, click here</a>
+	</div>
+
+	<h3>Customize your profile</h3>
+	<!-- TODO: this needs actual content, obviously -->
+	<p>(todo)</p>
+
+	<h3>Create members</h3>
+	<p>(todo)</p>
+
+	<h3>Create custom preferences</h3>
+	<p>(todo)</p>
+
+	<p>
+		<a class="btn btn-primary btn-lg" href="/@{user.username}">Check out your profile</a>
+	</p>
+</div>