display link to the last commit

ui/build.mjs

@@ -12,7 +12,7 @@ const bs = browserSync.create()
 const production = process.env.NODE_ENV == 'production'
 const watchMode = process.argv[2] == 'watch'
 
-const ENVIRONMENT_VARIABLES = ['NODE_ENV', 'PHOTOVIEW_API_ENDPOINT', 'VERSION', 'BUILD_DATE']
+const ENVIRONMENT_VARIABLES = ['NODE_ENV', 'PHOTOVIEW_API_ENDPOINT', 'VERSION', 'BUILD_DATE', 'COMMIT_SHA']
 
 const defineEnv = ENVIRONMENT_VARIABLES.reduce((acc, key) => {
   acc[`process.env.${key}`] = process.env[key] ? `"${process.env[key]}"` : null

ui/src/Pages/SettingsPage/VersionInfo.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import {
@@ -10,6 +10,20 @@ import {
 const VERSION = process.env.VERSION ? process.env.VERSION : 'undefined'
 const BUILD_DATE = process.env.BUILD_DATE ? process.env.BUILD_DATE : 'undefined'
 
+const COMMIT_SHA = process.env.COMMIT_SHA
+let commitLink: ReactElement
+
+if (COMMIT_SHA) {
+  commitLink = React.createElement(
+    'a',
+    {
+      href: 'https://github.com/photoview/photoview/commit/' + COMMIT_SHA,
+      title: COMMIT_SHA,
+    },
+    COMMIT_SHA.substring(0, 8)
+  )
+}
+
 const VersionInfoWrapper = styled.div`
   margin-bottom: 24px;
 `
@@ -25,7 +39,9 @@ const VersionInfo = () => {
       <InputLabelTitle>
         {t('settings.version_info.version_title', 'Release Version')}
       </InputLabelTitle>
-      <InputLabelDescription>{VERSION}</InputLabelDescription>
+      <InputLabelDescription>
+        {VERSION} ({commitLink})
+      </InputLabelDescription>
       <InputLabelTitle>
         {t('settings.version_info.build_date_title', 'Build date')}
       </InputLabelTitle>