web: add dynamic page titles

web/src/routes/+page.svelte

@@ -3,6 +3,10 @@
     import MeowbaltLoaf from "$components/meowbalt/MeowbaltLoaf.svelte";
 </script>
 
+<svelte:head>
+    <title>cobalt</title>
+</svelte:head>
+
 <div id="cobalt-save-container" class="center-column-container">
     <main id="cobalt-save">
         <MeowbaltLoaf />

web/src/routes/about/+page.svelte

@@ -2,4 +2,10 @@
     import Placeholder from "$components/misc/Placeholder.svelte";
 </script>
 
+<svelte:head>
+    <title>
+        cobalt: about
+    </title>
+</svelte:head>
+
 <Placeholder pageName="about" />

web/src/routes/donate/+page.svelte

@@ -2,4 +2,10 @@
     import Placeholder from "$components/misc/Placeholder.svelte";
 </script>
 
+<svelte:head>
+    <title>
+        cobalt: donate
+    </title>
+</svelte:head>
+
 <Placeholder pageName="donate" />

web/src/routes/settings/+layout.svelte

@@ -15,11 +15,19 @@
     let screenWidth: number;
 
     $: currentPageTitle = $page.url.pathname.split("/").at(-1);
+    $: stringPageTitle =
+        currentPageTitle !== "settings" ? `/ ${currentPageTitle}` : "";
 
     $: isMobile = screenWidth <= 750;
     $: isHome = $page.url.pathname === `/settings`;
 </script>
 
+<svelte:head>
+    <title>
+        cobalt: settings {stringPageTitle}
+    </title>
+</svelte:head>
+
 <svelte:window bind:innerWidth={screenWidth} />
 
 <div id="settings-page">

web/src/routes/updates/+page.svelte

@@ -2,4 +2,10 @@
     import Placeholder from "$components/misc/Placeholder.svelte";
 </script>
 
+<svelte:head>
+    <title>
+        cobalt: updates
+    </title>
+</svelte:head>
+
 <Placeholder pageName="updates" />