From 110165b0ede2743773543bf1e0e433432e5c9221 Mon Sep 17 00:00:00 2001
From: NlightN22 <oncharterliz@gmail.com>
Date: Mon, 17 Mar 2025 02:30:23 +0700
Subject: [PATCH] add version tag to settings page

---
 Dockerfile                           |  1 +
 src/pages/LiveCameraPage.tsx         |  3 ++-
 src/pages/SettingsPage.tsx           |  2 ++
 src/shared/components/VersionTag.tsx | 24 ++++++++++++++++++++++++
 tsconfig.json                        |  2 +-
 5 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/shared/components/VersionTag.tsx

diff --git a/Dockerfile b/Dockerfile
index 5e000ab..ebd4456 100644
--- a/Dockerfile
+++ b/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
diff --git a/src/pages/LiveCameraPage.tsx b/src/pages/LiveCameraPage.tsx
index bb5eb09..1f08ddc 100644
--- a/src/pages/LiveCameraPage.tsx
+++ b/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} />
 
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index ed677f3..bb0c121 100644
--- a/src/pages/SettingsPage.tsx
+++ b/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
diff --git a/src/shared/components/VersionTag.tsx b/src/shared/components/VersionTag.tsx
new file mode 100644
index 0000000..ccad54c
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index ba5ff3c..f44849e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
   },
   "include": [
     "src",