feat(app): display some git metadata in changelog

app/src/lib/sidebar/panels/Changelog.svelte

@@ -1,11 +1,6 @@
 <script lang="ts">
   type Change = { type: string; content: string };
 
-  async function fetchChangelog() {
-    const res = await fetch('/CHANGELOG.md');
-    return await res.text();
-  }
-
   const typeMap: Record<string, string> = {
     fix: 'bg-layer-2 bg-red-800',
     feat: 'bg-layer-2 bg-green-800',
@@ -15,6 +10,16 @@
     default: 'bg-layer-2 text-text'
   };
 
+  async function fetchChangelog() {
+    const res = await fetch('/CHANGELOG.md');
+    return await res.text();
+  }
+
+  async function fetchGitInfo() {
+    const res = await fetch('/git.json');
+    return await res.json();
+  }
+
   function parseChangelog(md: string) {
     const lines = md.split('\n');
     const parsed: (string | Change)[] = [];
@@ -45,8 +50,13 @@
       parsed.push({ type: 'default', content: line });
     }
 
+    // Remove trailing horizontal rule
     let lastLine = parsed.at(-1);
-    if (lastLine !== undefined && typeof lastLine !== 'string' && lastLine.type === 'hr') {
+    if (
+      lastLine !== undefined
+      && typeof lastLine !== 'string'
+      && lastLine.type === 'hr'
+    ) {
       parsed.pop();
     }
 
@@ -55,20 +65,37 @@
 </script>
 
 <div class="p-4 font-mono text-text">
-  {#await fetchChangelog()}
+  {#await Promise.all([fetchChangelog(), fetchGitInfo()])}
     <p>Loading...</p>
-  {:then md}
+  {:then [md, git]}
+    <div class="mb-4 p-3 bg-layer-2 text-xs">
+      <p><strong>Branch:</strong> {git.branch}</p>
+      <p>
+        <strong>Commit:</strong>
+        {git.sha.slice(0, 7)} – {git.commit_message}
+      </p>
+      <p>
+        <strong>Timestamp:</strong>
+        {new Date(git.commit_timestamp).toLocaleString()}
+      </p>
+    </div>
+
     {#each parseChangelog(md) as item (item)}
       {#if typeof item === 'string'}
         <h2 class="text-xl font-semibold mt-4 mb-4 text-layer-1">{item}</h2>
-      {:else if item.type === 'hr'}
-        <p></p>
-      {:else}
-        <p class="px-3 py-1 mb-1 leading-8 border-b-1 border-b-outline last:border-b-0">
+      {:else if item.type === 'hr'}{:else}
+        <p class="py-1 mb-1 leading-8 border-b border-b-outline last:border-b-0">
           {#if item.type !== 'default'}
-            <span class="p-1 rounded-sm font-semibold {typeMap[item.type]}">
+            <span
+              class="
+                p-1 rounded-sm opacity-80 font-semibold {typeMap[
+                item.type
+                ]}
+              "
+            >
               {item.content.split(':')[0]}
-            </span> {item.content.split(':').slice(1).join(':').trim()}
+            </span>
+            {item.content.split(':').slice(1).join(':').trim()}
           {:else}
             {item.content}
           {/if}