[ui] add version display

tools/upend_js/types.ts

@@ -7,7 +7,6 @@ export interface IEntry {
   value: IValue;
 }
 
-
 export type IValue =
   | {
       t: "Address";
@@ -50,4 +49,5 @@ export interface IJob {
 export interface VaultInfo {
   name: string | null;
   location: string;
+  version: string;
 }

webui/src/util/info.ts

@@ -0,0 +1,8 @@
+import { readable, Readable } from "svelte/store";
+import type { VaultInfo } from "upend/types";
+
+export const vaultInfo: Readable<VaultInfo> = readable(undefined, (set) => {
+  fetch("/api/info").then(async (response) => {
+    set(await response.json());
+  });
+});

webui/src/views/Home.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
   import { formatRelative, parseISO } from "date-fns";
-  import { last } from "lodash";
-
   import { Link } from "svelte-navigator";
   import { UpListing } from "upend";
   import type { IFile, ListingResult, VaultInfo } from "upend/types";
@@ -9,12 +7,7 @@
   import UpObjectCard from "../components/display/UpObjectCard.svelte";
   import Spinner from "../components/utils/Spinner.svelte";
   import { query } from "../lib/entity";
-
-  let infoData: VaultInfo | undefined;
-
-  fetch("/api/info").then(async (response) => {
-    infoData = await response.json();
-  });
+  import { vaultInfo } from "../util/info";
 
   const roots = (async () => {
     const response = await fetch("/api/hier_roots");
@@ -48,7 +41,7 @@
 
 <div class="home">
   <h1>
-    {infoData?.name || "UpEnd"}
+    {$vaultInfo?.name || "UpEnd"}
   </h1>
 
   <section class="roots">
@@ -101,6 +94,16 @@
       </table>
     {/await}
   </section>
+
+  <footer>
+    <div>
+      <strong>UpEnd</strong> - a database for the complex, the changing, and the
+      indeterminate
+    </div>
+    <div>
+      <a href="https://upendproject.net">v{$vaultInfo?.version || "???"}</a>
+    </div>
+  </footer>
 </div>
 
 <style lang="scss">
@@ -122,7 +125,6 @@
     }
   }
 
-
   .roots {
     ul {
       list-style: none;
@@ -138,4 +140,13 @@
       font-size: 24px;
     }
   }
+
+  footer {
+    border-top: 1px solid var(--foreground);
+    text-align: center;
+    margin: 3em 3em 1em 3em;
+    & > * {
+      margin: 0.5em;
+    }
+  }
 </style>

webui/yarn.lock

@@ -4008,8 +4008,8 @@ __metadata:
 
 "upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.":
   version: 0.0.1
-  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=716e2f&locator=svelte-app%40workspace%3A."
-  checksum: ee97601dc63227d132235456d3a5e13c45d4b30675647912362b04adee4f6374dd7e7ef49c155e775e6ffac85d56d4ed113241f21ef7bdfb6a7864878d282eb5
+  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=08bbf6&locator=svelte-app%40workspace%3A."
+  checksum: 1f19933b85edf9ade3a2b2bab296f70c0eb844fbfaa797d283cac269c040454e96443917f58432a4cea02f180acbbc46c5b3b63511ece5174bf1f993b28fba00
   languageName: node
   linkType: hard