SRO/ZO: Add footer to SR and ZZZ (#2833)

* Show commit hash in header for dev mode

* Revert "Show commit hash in header for dev mode"

This reverts commit 2083ab7.

* Add footer to zzz and sr

* Update strings

apps/sr-frontend/src/app/App.tsx

@@ -14,6 +14,7 @@ import {
 } from '@mui/material'
 import { Suspense, lazy } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
+import Footer from './Footer'
 import Header from './Header'
 import PageHome from './PageHome'
 
@@ -83,6 +84,9 @@ function Content() {
           </Routes>
         </Suspense>
       </Container>
+      {/* make sure footer is always at bottom */}
+      <Box flexGrow={1} />
+      <Footer />
     </Box>
   )
 }

apps/sr-frontend/src/app/Footer.tsx

@@ -0,0 +1,45 @@
+import { AppBar, Box, Skeleton, Typography } from '@mui/material'
+import { Suspense } from 'react'
+
+export default function Footer() {
+  return (
+    <Suspense fallback={<Skeleton variant="rectangular" height={64} />}>
+      <FooterContent />
+    </Suspense>
+  )
+}
+function FooterContent() {
+  return (
+    <AppBar
+      component="footer"
+      position="static"
+      sx={{ bgcolor: 'neutral800.main' }}
+      elevation={0}
+    >
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        sx={{ px: 2, py: 1 }}
+        gap={2}
+      >
+        <Typography variant="caption" sx={{ color: 'neutral400.main' }}>
+          Build:
+          <a
+            href={
+              process.env.NX_URL_GITHUB_GO_CURRENT_VERSION ||
+              `${process.env.NX_URL_GITHUB_GO}/releases`
+            }
+            target="_blank"
+            rel="noreferrer"
+            style={{ color: 'inherit' }}
+          >
+            {process.env.NX_URL_GITHUB_GO_CURRENT_VERSION?.replace(
+              /.*commit\//,
+              ''
+            ).substring(0, 7)}
+          </a>
+        </Typography>
+      </Box>
+    </AppBar>
+  )
+}

apps/zzz-frontend/src/app/App.tsx

@@ -16,6 +16,7 @@ import {
 import { Suspense, lazy } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import '../styles.scss'
+import Footer from './Footer'
 import Header from './Header'
 const PageDiscs = lazy(() => import('@genshin-optimizer/zzz/page-discs'))
 const PageOptimize = lazy(() => import('@genshin-optimizer/zzz/page-optimize'))
@@ -78,6 +79,9 @@ function Content() {
           </Routes>
         </Suspense>
       </Container>
+      {/* make sure footer is always at bottom */}
+      <Box flexGrow={1} />
+      <Footer />
     </Box>
   )
 }

apps/zzz-frontend/src/app/Footer.tsx

@@ -0,0 +1,45 @@
+import { AppBar, Box, Skeleton, Typography } from '@mui/material'
+import { Suspense } from 'react'
+
+export default function Footer() {
+  return (
+    <Suspense fallback={<Skeleton variant="rectangular" height={64} />}>
+      <FooterContent />
+    </Suspense>
+  )
+}
+function FooterContent() {
+  return (
+    <AppBar
+      component="footer"
+      position="static"
+      sx={{ bgcolor: 'neutral800.main' }}
+      elevation={0}
+    >
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        sx={{ px: 2, py: 1 }}
+        gap={2}
+      >
+        <Typography variant="caption" sx={{ color: 'neutral400.main' }}>
+          Build:
+          <a
+            href={
+              process.env.NX_URL_GITHUB_GO_CURRENT_VERSION ||
+              `${process.env.NX_URL_GITHUB_GO}/releases`
+            }
+            target="_blank"
+            rel="noreferrer"
+            style={{ color: 'inherit' }}
+          >
+            {process.env.NX_URL_GITHUB_GO_CURRENT_VERSION?.replace(
+              /.*commit\//,
+              ''
+            ).substring(0, 7)}
+          </a>
+        </Typography>
+      </Box>
+    </AppBar>
+  )
+}