Add a basic footer.

source/options/app.tsx

@@ -1,4 +1,5 @@
 import {Component} from "preact";
+import {PageFooter} from "./components/page-footer.js";
 import {PageHeader} from "./components/page-header.js";
 import {Tours} from "./components/tours.js";
 
@@ -8,6 +9,7 @@ export class App extends Component {
       <>
         <PageHeader />
         <Tours />
+        <PageFooter />
       </>
     );
   }

source/options/components/page-footer.tsx

@@ -0,0 +1,41 @@
+import {Component} from "preact";
+import browser from "webextension-polyfill";
+
+export class PageFooter extends Component {
+  render() {
+    const manifest = browser.runtime.getManifest();
+
+    const copyright = (
+      <p>
+        &copy;{" "}
+        <a
+          target="_blank"
+          href="https://git.bauke.xyz/tildes-community/tildes-shepherd/src/branch/main/LICENSE"
+        >
+          AGPL-3.0-or-later
+        </a>
+      </p>
+    );
+
+    const messageCommunity = (
+      <a target="_blank" href="https://tildes.net/user/Community/new_message">
+        Message @Community
+      </a>
+    );
+
+    const version = (
+      <a
+        target="_blank"
+        href={`https://git.bauke.xyz/tildes-community/tildes-shepherd/releases/tag/${manifest.version}`}
+      >
+        v{manifest.version}
+      </a>
+    );
+
+    return (
+      <footer class="page-footer">
+        {messageCommunity} / {version} / {copyright}
+      </footer>
+    );
+  }
+}

source/scss/components/page-footer.scss

@@ -0,0 +1,7 @@
+.page-footer {
+  border-top: 2px solid var(--background-secondary);
+  display: flex;
+  gap: 8px;
+  margin: 16px;
+  padding: 16px;
+}

source/scss/global.scss

@@ -1,4 +1,5 @@
 @use "reset";
+@use "components/page-footer";
 @use "components/page-header";
 @use "components/tours";