Add footer bar with git commit metadata

src/App.svelte

@@ -37,17 +37,6 @@
     <h1>🍉 Admin Panel</h1>
   </div>
   <div class="flex-gap" />
-  <div>
-    <label>
-      <span>Domain:</span>
-      <select bind:value={$domainOption}>
-        <option value="*">All</option>
-        {#each domainOptions as domain}
-          <option value={domain}>{domain}</option>
-        {/each}
-      </select>
-    </label>
-  </div>
   <div class="nav-link">
     <a href="https://status.1f349.com" target="_blank">Status</a>
   </div>
@@ -84,6 +73,26 @@
     </div>
   {/if}
 </main>
+<footer>
+  <div class="meta-version">
+    Version: <code>{import.meta.env.VITE_APP_VERSION}</code>
+    , {import.meta.env.VITE_APP_LASTMOD}
+  </div>
+  <div>
+    <a href="https://github.com/1f349/admin.1f349.com" target="_blank">Source</a>
+  </div>
+  <div>
+    <label>
+      <span>Domain:</span>
+      <select bind:value={$domainOption}>
+        <option value="*">All</option>
+        {#each domainOptions as domain}
+          <option value={domain}>{domain}</option>
+        {/each}
+      </select>
+    </label>
+  </div>
+</footer>
 
 <style lang="scss">
   header {
@@ -144,7 +153,7 @@
     display: flex;
     flex-grow: 1;
     align-items: stretch;
-    height: calc(100% - 70px);
+    height: 0;
 
     #sidebar {
       width: 150px;
@@ -184,4 +193,13 @@
       flex-grow: 1;
     }
   }
+
+  footer {
+    padding: 8px;
+    background-color: #2c2c2c;
+    box-shadow: 0 -4px 8px #0003, 0 -6px 20px #00000030;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 </style>

src/views/TargetManagementView.svelte

@@ -19,7 +19,6 @@
   export let equality: (a: T | null, b: T | null) => boolean;
 
   let tableKeys: string[] = [];
-
   $: tableKeys = Object.entries($tableData)
     .filter(x => x[1].client != null || x[1].server != null)
     .map(x => x[0])
@@ -27,7 +26,6 @@
     .sort((a, b) => a.localeCompare(b));
 
   let rowStats: CountStats = {created: 0, modified: 0, removed: 0};
-
   $: rowStats = tableCountStats($tableData, tableKeys, equality);
 
   function domainFilter(src: string, domain: string) {
@@ -177,7 +175,7 @@
 
     :global(th),
     :global(td) {
-      padding: 11px 8px 11px 8px;
+      padding: 6px 8px 6px 8px;
       text-align: center;
     }
   }

tsconfig.node.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ESNext",
     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",

vite.config.ts

@@ -1,5 +1,19 @@
 import {defineConfig} from "vite";
 import {svelte} from "@sveltejs/vite-plugin-svelte";
+import {exec} from "child_process";
+import {promisify} from "util";
+
+// Get current tag/commit and last commit date from git
+const pexec = promisify(exec);
+let [version, lastmod] = (
+  await Promise.allSettled([
+    pexec("git describe --tags || git rev-parse --short HEAD"),
+    pexec('git log -1 --format=%cd --date=format:"%Y-%m-%d %H:%M"'),
+  ])
+).map(v => (v as {value?: {stdout: string}}).value?.stdout.trim());
+
+process.env.VITE_APP_VERSION = version;
+process.env.VITE_APP_LASTMOD = lastmod;
 
 // https://vitejs.dev/config/
 export default defineConfig({