fix(footer): use commit-sha when not in stable release

Dockerfile

@@ -1,8 +1,14 @@
 FROM oven/bun:1 AS builder
 
+ARG VERSION
+ARG COMMIT
+
 WORKDIR /app
 COPY . .
 
+ENV APP_VERSION=${VERSION} \
+    APP_COMMIT=${COMMIT}
+
 RUN bun install --frozen-lockfile && \
     bun run build
 

src/components/layout/AppFooter.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { useVersion } from "@/composables/useHealth"
+import {
+  appVersion,
+  commitSha,
+  commitUrl,
+  isStableBuild,
+  releaseUrl,
+  shortCommitSha,
+} from "@/lib/buildInfo"
 
-const appVersion = __APP_VERSION__
 const { data: versionData } = useVersion()
 </script>
 
@@ -12,13 +19,29 @@ const { data: versionData } = useVersion()
     >
       <div class="flex items-center gap-2">
         <a
-          :href="`https://github.com/licenseware/ory-admin-ui/releases/tag/v${appVersion}`"
+          v-if="isStableBuild"
+          :href="releaseUrl"
           target="_blank"
           rel="noopener noreferrer"
           class="hover:text-text-secondary transition-colors"
         >
-          Ory Admin UI v{{ appVersion }}
+          Ory Admin UI {{ appVersion }}
         </a>
+        <span v-else>
+          Ory Admin UI {{ appVersion }}
+          <template v-if="shortCommitSha">
+            &middot;
+            <a
+              :href="commitUrl"
+              :title="commitSha"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="hover:text-text-secondary font-mono transition-colors"
+            >
+              {{ shortCommitSha }}
+            </a>
+          </template>
+        </span>
         <span v-if="versionData?.version" class="text-text-muted">
           &middot;
           <a

src/lib/buildInfo.ts

@@ -0,0 +1,17 @@
+const REPO = "licenseware/ory-admin-ui"
+
+const rawVersion = __APP_VERSION__
+const rawCommit = __APP_COMMIT__
+
+export const isStableBuild = /^\d+\.\d+\.\d+$/.test(rawVersion)
+
+export const commitSha = rawCommit
+export const shortCommitSha = rawCommit.slice(0, 7)
+
+export const appVersion = isStableBuild ? `v${rawVersion}` : "edge"
+
+export const repoUrl = `https://github.com/${REPO}`
+
+export const releaseUrl = `${repoUrl}/releases/tag/v${rawVersion}`
+
+export const commitUrl = `${repoUrl}/commit/${rawCommit}`

src/views/SettingsView.vue

@@ -4,6 +4,14 @@ import { useProfileStore, nameToSlug } from "@/stores/profile"
 import { useThemeStore } from "@/stores/theme"
 import { useHealthAlive, usePublicHealthAlive, useVersion } from "@/composables/useHealth"
 import { useOathkeeperHealth, useOathkeeperVersion } from "@/composables/useOathkeeper"
+import {
+  appVersion,
+  commitSha,
+  commitUrl,
+  isStableBuild,
+  releaseUrl,
+  shortCommitSha,
+} from "@/lib/buildInfo"
 import Card from "@/components/ui/Card.vue"
 import CardHeader from "@/components/ui/CardHeader.vue"
 import CardTitle from "@/components/ui/CardTitle.vue"
@@ -34,7 +42,12 @@ import {
 } from "@lucide/vue"
 import { toast } from "vue-sonner"
 
-const appVersion = __APP_VERSION__
+const buildLabel = isStableBuild
+  ? appVersion
+  : shortCommitSha
+    ? `${appVersion} · ${shortCommitSha}`
+    : appVersion
+const buildUrl = isStableBuild ? releaseUrl : commitUrl
 const profileStore = useProfileStore()
 const themeStore = useThemeStore()
 
@@ -638,12 +651,13 @@ watch(theme, (newTheme) => {
         <div class="border-border-subtle flex justify-between border-b py-2">
           <span class="text-text-muted text-sm">Admin UI Version</span>
           <a
-            :href="`https://github.com/licenseware/ory-admin-ui/releases/tag/v${appVersion}`"
+            :href="buildUrl"
+            :title="isStableBuild ? undefined : commitSha"
             target="_blank"
             rel="noopener noreferrer"
             class="text-accent hover:text-accent-hover font-mono text-sm"
           >
-            {{ appVersion }}
+            {{ buildLabel }}
           </a>
         </div>
         <div class="border-border-subtle flex justify-between border-b py-2">

src/vite-env.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="vite/client" />
 
 declare const __APP_VERSION__: string
+declare const __APP_COMMIT__: string
 
 declare module "*.vue" {
   import type { DefineComponent } from "vue"

vite.config.ts

@@ -9,7 +9,8 @@ export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "")
   return {
     define: {
-      __APP_VERSION__: JSON.stringify(version),
+      __APP_VERSION__: JSON.stringify(env.APP_VERSION || version),
+      __APP_COMMIT__: JSON.stringify(env.APP_COMMIT || ""),
     },
     plugins: [
       vue(),