display vault name on the frontend

ui/src/types/base.ts

@@ -23,4 +23,9 @@ export interface IFile {
   added: string;
   size: number;
   mtime: string;
+}
+
+export interface VaultInfo {
+  name: string | null;
+  location: string;
 }

ui/src/views/Home.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="home">
-    <h1>Welcome to UpEnd!</h1>
+    <h1>
+      Welcome to
+      <em v-if="infoData?.name"> "{{ infoData.name }}" </em>
+      <template v-else> UpEnd </template>
+      !
+    </h1>
     <ul v-if="latestFiles">
       <li v-for="file in latestFiles" :key="file.hash">
         <router-link :to="{ name: 'inspect', params: { address: file.hash } }">
@@ -12,10 +17,9 @@
 </template>
 
 <script lang="ts">
-import { IFile } from "@/types/base";
+import { IFile, VaultInfo } from "@/types/base";
 import useSWRV from "swrv";
 import { computed, defineComponent } from "vue";
-import { useRoute } from "vue-router";
 import { fetcher } from "../utils";
 import { parseISO } from "date-fns";
 
@@ -23,7 +27,11 @@ export default defineComponent({
   name: "Home",
 
   setup() {
-    const route = useRoute();
+    const { data: infoData } = useSWRV<VaultInfo, unknown>(
+      "/api/info",
+      fetcher
+    );
+
     const { data: latestFilesRaw } = useSWRV<IFile[], unknown>(
       "/api/files/latest",
       fetcher
@@ -42,10 +50,16 @@ export default defineComponent({
     });
 
     return {
+      infoData,
       latestFiles,
     };
   },
 });
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+h1 {
+  text-align: center;
+  font-weight: normal;
+}
+</style>