add version tag to settings page

Dockerfile

@@ -1,6 +1,7 @@
 # syntax=docker/dockerfile:1
 # Build commands:
 # - $VERSION="0.2.1"
+# - yarn update-browserslist-db@latest
 # - rm build -r -Force ; rm ./node_modules/.cache/babel-loader -r -Force ; yarn build
 # - docker build --pull --rm -t oncharterliz/multi-frigate:latest -t oncharterliz/multi-frigate:$VERSION "."
 # - docker save -o ./release/multi-frigate.$VERSION.tar oncharterliz/multi-frigate:$VERSION

src/pages/LiveCameraPage.tsx

@@ -9,6 +9,7 @@ import Player from '../widgets/Player';
 import CameraPageHeader from '../widgets/header/CameraPageHeader';
 import RetryErrorPage from './RetryErrorPage';
 import { LegacyRef, useRef } from 'react';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
 
 const LiveCameraPage = () => {
     const { t } = useTranslation()
@@ -21,7 +22,7 @@ const LiveCameraPage = () => {
         queryFn: () => frigateApi.getCameraWHost(cameraId!)
     })
 
-    if (isPending) return <OverlayCogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
 
     if (isError) return <RetryErrorPage onRetry={refetch} />
 

src/pages/SettingsPage.tsx

@@ -12,6 +12,7 @@ import { dimensions } from '../shared/dimensions/dimensions';
 import OIDPSettingsForm from '../widgets/OIDPSettingsForm';
 import RolesSettingsForm from '../widgets/RolesSettingsForm';
 import Forbidden from './403';
+import VersionTag from '../shared/components/VersionTag';
 
 const SettingsPage = () => {
     const { t } = useTranslation()
@@ -41,6 +42,7 @@ const SettingsPage = () => {
 
     return (
         <Flex h='100%'>
+            <VersionTag />
             {!isMobile ?
                 < Space w='20%' />
                 : null

src/shared/components/VersionTag.tsx

@@ -0,0 +1,24 @@
+import { Badge, Flex } from '@mantine/core';
+import React from 'react';
+
+import packageJson from '../../../package.json';
+
+const VersionTag = () => {
+    return (
+        <Flex
+        direction='column'
+        align='end'
+        >
+            <Badge
+                mt='0.2rem'
+                mr='0.3rem'
+                variant="outline"
+                pr={3}
+            >
+                v.{packageJson.version}
+            </Badge>
+        </Flex>
+    );
+};
+
+export default VersionTag;

tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
   },
   "include": [
     "src",