srink the version and align to left (#950)

Author: longshuicy

frontend/src/app.config.ts

@@ -2,6 +2,7 @@ import { V2 } from "./openapi";
 import { EventListenerJobStatus } from "./types/data";
 
 interface Config {
+	appVersion: string;
 	hostname: string;
 	apikey: string;
 	GHIssueBaseURL: string;
@@ -34,7 +35,7 @@ const hostname =
 
 // TODO when add auth piece remove this env
 const apikey = process.env.APIKEY || "";
-
+config["appVersion"] = "v2.0.0-beta.2";
 config["hostname"] = hostname;
 config["apikey"] = apikey;
 

frontend/src/components/Layout.tsx

@@ -16,14 +16,7 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import {
-	Badge,
-	Link,
-	Menu,
-	MenuItem,
-	MenuList,
-	Typography,
-} from "@mui/material";
+import { Badge, Link, Menu, MenuItem, MenuList } from "@mui/material";
 import { Link as RouterLink, useLocation } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../types/data";
@@ -45,6 +38,7 @@ import {
 import { AdminPanelSettings } from "@mui/icons-material";
 import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
 import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings";
+import { AppVersion } from "./versions/AppVersion";
 
 const drawerWidth = 240;
 
@@ -423,18 +417,7 @@ export default function PersistentDrawerLeft(props) {
 			<Main open={open}>
 				<DrawerHeader />
 				{children}
-				<Box
-					sx={{
-						position: "fixed",
-						bottom: "0px",
-						minHeight: "30px",
-						width: "100%",
-					}}
-				>
-					<Typography variant="body2" color="primary.light">
-						v2.0.0-beta.2
-					</Typography>
-				</Box>
+				<AppVersion />
 			</Main>
 		</Box>
 	);

frontend/src/components/PublicLayout.tsx

@@ -16,7 +16,7 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import { Link, Menu, MenuItem, MenuList, Typography } from "@mui/material";
+import { Link, Menu, MenuItem, MenuList } from "@mui/material";
 import { Link as RouterLink, useLocation } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { RootState } from "../types/data";
@@ -25,6 +25,7 @@ import PersonIcon from "@mui/icons-material/Person";
 import VpnKeyIcon from "@mui/icons-material/VpnKey";
 import LogoutIcon from "@mui/icons-material/Logout";
 import { EmbeddedSearch } from "./search/EmbeddedSearch";
+import { AppVersion } from "./versions/AppVersion";
 
 const drawerWidth = 240;
 
@@ -239,18 +240,7 @@ export default function PersistentDrawerLeft(props) {
 			<Main open={open}>
 				<DrawerHeader />
 				{children}
-				<Box
-					sx={{
-						position: "fixed",
-						bottom: "0px",
-						minHeight: "30px",
-						width: "100%",
-					}}
-				>
-					<Typography variant="body2" color="primary.light">
-						v2.0.0-beta.2
-					</Typography>
-				</Box>
+				<AppVersion />
 			</Main>
 		</Box>
 	);

frontend/src/components/versions/AppVersion.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Tooltip from "@mui/material/Tooltip";
+import IconButton from "@mui/material/IconButton";
+import InfoIcon from "@mui/icons-material/Info";
+import { theme } from "../../theme";
+import config from "../../app.config";
+
+export function AppVersion() {
+	return (
+		<Box
+			sx={{
+				position: "fixed",
+				bottom: 0,
+				right: 0,
+				width: "100%",
+				textAlign: "right", // Centers the icon button
+			}}
+		>
+			<Tooltip title={config.appVersion} placement="top" arrow>
+				<IconButton>
+					<InfoIcon sx={{ color: theme.palette.primary.main }} />
+				</IconButton>
+			</Tooltip>
+		</Box>
+	);
+}