feat(BuildInfo): show build date and commit (commaai#574)

Author: incognitojam

.github/workflows/build.yaml

@@ -38,10 +38,14 @@ jobs:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
 
+      - name: get commit date
+        run: echo "VITE_APP_GIT_TIMESTAMP=$(git show -s --format=%cI)" >> $GITHUB_ENV
+
       - run: bun install --frozen-lockfile
       - run: bun run build
         env:
           VITE_SENTRY_ENVIRONMENT: ${{ github.ref == 'refs/heads/master' && 'production' || 'staging' }}
+          VITE_APP_GIT_SHA: ${{ github.event_name == 'push' && github.sha || github.event.pull_request.head.sha }}
 
       - name: Bundle size breakdown
         run: bun dependency-report | column -t -s ":"
@@ -93,7 +97,7 @@ jobs:
         env:
           DOCKER_METADATA_PR_HEAD_SHA: true
 
-      - name: get date
+      - name: get commit date
         run: echo "GIT_TIMESTAMP=$(git show -s --format=%cI)" >> $GITHUB_ENV
 
       - uses: docker/build-push-action@v6

src/components/BuildInfo.tsx

@@ -0,0 +1,21 @@
+import type { VoidComponent } from 'solid-js'
+import clsx from 'clsx'
+
+import { dayjs } from '~/utils/format'
+
+const sha = import.meta.env.VITE_APP_GIT_SHA || 'develop'
+const timestamp = import.meta.env.VITE_APP_GIT_TIMESTAMP
+const formattedTimestamp = timestamp ? dayjs(timestamp).format('YYYY-MM-DD HH:mm') : 'local'
+console.debug('BuildInfo', { sha, timestamp, formattedTimestamp })
+
+const BuildInfo: VoidComponent<{ class?: string }> = (props) => {
+  return (
+    <div class={clsx('text-xs text-on-surface opacity-25 select-text', props.class)}>
+      <span class="font-mono cursor-text select-all selection:bg-primary-container">{sha.substring(0, 7)}</span>
+      <span class="mx-1">•</span>
+      <span>{formattedTimestamp}</span>
+    </div>
+  )
+}
+
+export default BuildInfo

src/pages/dashboard/Dashboard.tsx

@@ -21,6 +21,7 @@ import DeviceList from './components/DeviceList'
 import DeviceActivity from './activities/DeviceActivity'
 import RouteActivity from './activities/RouteActivity'
 import SettingsActivity from './activities/SettingsActivity'
+import BuildInfo from '~/components/BuildInfo'
 
 const PairActivity = lazy(() => import('./activities/PairActivity'))
 
@@ -170,6 +171,7 @@ const Dashboard: Component<RouteSectionProps> = () => {
                     <div class="hidden size-full flex-col items-center justify-center gap-4 md:flex">
                       <Icon name="search" size="48" />
                       <span class="text-md">Select a route to view</span>
+                      <BuildInfo class="absolute bottom-4" />
                     </div>
                   }
                 >