From b30338de37ed3c6c09dc2fffa58ba1258d1f0336 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Wed, 5 Mar 2025 21:02:31 +0100
Subject: [PATCH] Add extension version to settings page (#647)

---
 .../chrome/src/app/components/Layout/BottomNav.tsx        | 8 +++++---
 browser-extensions/chrome/src/app/pages/AuthSettings.tsx  | 4 ++++
 browser-extensions/chrome/src/app/pages/Settings.tsx      | 5 +++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/browser-extensions/chrome/src/app/components/Layout/BottomNav.tsx b/browser-extensions/chrome/src/app/components/Layout/BottomNav.tsx
index 3404ca086..5309ac00a 100644
--- a/browser-extensions/chrome/src/app/components/Layout/BottomNav.tsx
+++ b/browser-extensions/chrome/src/app/components/Layout/BottomNav.tsx
@@ -3,6 +3,8 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import { useDb } from '../../context/DbContext';
 
+type TabName = 'credentials' | 'emails' | 'settings';
+
 /**
  * Bottom nav component.
  */
@@ -11,11 +13,11 @@ const BottomNav: React.FC = () => {
   const dbContext = useDb();
   const navigate = useNavigate();
   const location = useLocation();
-  const [currentTab, setCurrentTab] = useState<'credentials' | 'emails' | 'settings'>('credentials');
+  const [currentTab, setCurrentTab] = useState<TabName>('credentials');
 
   // Add effect to update currentTab based on route
   useEffect(() => {
-    const path = location.pathname.substring(1) as 'credentials' | 'emails' | 'settings';
+    const path = location.pathname.substring(1) as TabName;
     if (['credentials', 'emails', 'settings'].includes(path)) {
       setCurrentTab(path);
     }
@@ -24,7 +26,7 @@ const BottomNav: React.FC = () => {
   /**
    * Handle tab change.
    */
-  const handleTabChange = (tab: 'credentials' | 'emails' | 'settings') : void => {
+  const handleTabChange = (tab: TabName) : void => {
     setCurrentTab(tab);
     navigate(`/${tab}`);
   };
diff --git a/browser-extensions/chrome/src/app/pages/AuthSettings.tsx b/browser-extensions/chrome/src/app/pages/AuthSettings.tsx
index d97e32fed..6e75400e5 100644
--- a/browser-extensions/chrome/src/app/pages/AuthSettings.tsx
+++ b/browser-extensions/chrome/src/app/pages/AuthSettings.tsx
@@ -119,6 +119,10 @@ const AuthSettings: React.FC = () => {
           </div>
         </>
       )}
+
+      <div className="text-center text-gray-400 dark:text-gray-600">
+        Version: {AppInfo.VERSION}
+      </div>
     </div>
   );
 };
diff --git a/browser-extensions/chrome/src/app/pages/Settings.tsx b/browser-extensions/chrome/src/app/pages/Settings.tsx
index 1c3399245..7a58b28c6 100644
--- a/browser-extensions/chrome/src/app/pages/Settings.tsx
+++ b/browser-extensions/chrome/src/app/pages/Settings.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { DISABLED_SITES_KEY, GLOBAL_POPUP_ENABLED_KEY } from '../../contentScript/Popup';
+import { AppInfo } from '../../shared/AppInfo';
 
 /**
  * Popup settings type.
@@ -177,6 +178,10 @@ const Settings: React.FC = () => {
           </div>
         </div>
       </section>
+
+      <div className="text-center text-gray-400 dark:text-gray-600">
+        Version: {AppInfo.VERSION}
+      </div>
     </div>
   );
 };