From 5e7df2e07445ad76c08687072bfdb28de793c950 Mon Sep 17 00:00:00 2001
From: sam <sam@vulpine.solutions>
Date: Wed, 25 Dec 2024 11:04:20 -0500
Subject: [PATCH] feat(frontend): add footer

---
 Foxnouns.Frontend/src/app.scss                |  8 ++
 .../src/lib/components/Footer.svelte          | 83 +++++++++++++++++++
 Foxnouns.Frontend/src/routes/+layout.svelte   | 11 ++-
 3 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 Foxnouns.Frontend/src/lib/components/Footer.svelte

diff --git a/Foxnouns.Frontend/src/app.scss b/Foxnouns.Frontend/src/app.scss
index e1d59ab..c678355 100644
--- a/Foxnouns.Frontend/src/app.scss
+++ b/Foxnouns.Frontend/src/app.scss
@@ -64,3 +64,11 @@
 	max-width: 200px;
 	border-radius: 3px;
 }
+
+.big-footer {
+	@media (prefers-color-scheme: dark) {
+		background-color: bootstrap.shade-color(bootstrap.$dark, 20%);
+	}
+
+	background-color: bootstrap.shade-color(bootstrap.$light, 5%);
+}
diff --git a/Foxnouns.Frontend/src/lib/components/Footer.svelte b/Foxnouns.Frontend/src/lib/components/Footer.svelte
new file mode 100644
index 0000000..f3315f2
--- /dev/null
+++ b/Foxnouns.Frontend/src/lib/components/Footer.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { Meta } from "$api/models";
+	import Git from "svelte-bootstrap-icons/lib/Git.svelte";
+	import Reception4 from "svelte-bootstrap-icons/lib/Reception4.svelte";
+	import Newspaper from "svelte-bootstrap-icons/lib/Newspaper.svelte";
+	import CardText from "svelte-bootstrap-icons/lib/CardText.svelte";
+	import Shield from "svelte-bootstrap-icons/lib/Shield.svelte";
+	import Envelope from "svelte-bootstrap-icons/lib/Envelope.svelte";
+	import CashCoin from "svelte-bootstrap-icons/lib/CashCoin.svelte";
+	import Logo from "./Logo.svelte";
+
+	type Props = { meta: Meta };
+	let { meta }: Props = $props();
+</script>
+
+<footer class="big-footer mt-3 pt-3 pb-1 px-5">
+	<div class="d-flex flex-column flex-md-row mb-2">
+		<div class="align-start flex-grow-1">
+			<Logo />
+			<ul class="mt-2 list-unstyled">
+				<li><strong>Version</strong> {meta.version}</li>
+			</ul>
+		</div>
+		<div class="align-end">
+			<ul class="list-unstyled">
+				<li>{meta.users.total} <strong>users</strong></li>
+				<li>{meta.members} <strong>members</strong></li>
+			</ul>
+		</div>
+	</div>
+	<ul class="list-inline">
+		<a
+			class="list-inline-item link-underline link-underline-opacity-0"
+			target="_blank"
+			href={meta.repository}
+		>
+			<li class="list-inline-item">
+				<Git />
+				Source code
+			</li>
+		</a>
+		<a
+			class="list-inline-item link-underline link-underline-opacity-0"
+			target="_blank"
+			href="https://status.pronouns.cc"
+		>
+			<li class="list-inline-item">
+				<Reception4 />
+				Status
+			</li>
+		</a>
+		<a class="list-inline-item link-underline link-underline-opacity-0" href="/page/about">
+			<li class="list-inline-item">
+				<Envelope />
+				About and contact
+			</li>
+		</a>
+		<a class="list-inline-item link-underline link-underline-opacity-0" href="/page/tos">
+			<li class="list-inline-item">
+				<CardText />
+				Terms of service
+			</li>
+		</a>
+		<a class="list-inline-item link-underline link-underline-opacity-0" href="/page/privacy">
+			<li class="list-inline-item">
+				<Shield />
+				Privacy policy
+			</li>
+		</a>
+		<a class="list-inline-item link-underline link-underline-opacity-0" href="/page/changelog">
+			<li class="list-inline-item">
+				<Newspaper />
+				Changelog
+			</li>
+		</a>
+		<a class="list-inline-item link-underline link-underline-opacity-0" href="/page/donate">
+			<li class="list-inline-item">
+				<CashCoin />
+				Donate
+			</li>
+		</a>
+	</ul>
+</footer>
diff --git a/Foxnouns.Frontend/src/routes/+layout.svelte b/Foxnouns.Frontend/src/routes/+layout.svelte
index ceff270..e5be130 100644
--- a/Foxnouns.Frontend/src/routes/+layout.svelte
+++ b/Foxnouns.Frontend/src/routes/+layout.svelte
@@ -3,11 +3,16 @@
 	import "../app.scss";
 	import type { LayoutData } from "./$types";
 	import Navbar from "$components/Navbar.svelte";
+	import Footer from "$components/Footer.svelte";
 
 	type Props = { children: Snippet; data: LayoutData };
 	let { children, data }: Props = $props();
 </script>
 
-<Navbar user={data.meUser} meta={data.meta} />
-
-{@render children?.()}
+<div class="d-flex flex-column min-vh-100">
+	<div class="flex-grow-1">
+		<Navbar user={data.meUser} meta={data.meta} />
+		{@render children?.()}
+	</div>
+	<Footer meta={data.meta} />
+</div>