From 4b4e0e20d4d75e8296a824810e3957560f241e2f Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Mon, 9 Dec 2024 14:45:26 -0800
Subject: [PATCH] Make the version number a badge, rather than an independent
 item in the nav dropdown

---
 .../web/app/components/navMenu/navMenu.tsx    | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/interface/web/app/components/navMenu/navMenu.tsx b/src/interface/web/app/components/navMenu/navMenu.tsx
index f9af7ff1..01215863 100644
--- a/src/interface/web/app/components/navMenu/navMenu.tsx
+++ b/src/interface/web/app/components/navMenu/navMenu.tsx
@@ -37,6 +37,15 @@ function SubscriptionBadge({ is_active }: { is_active: boolean }) {
     );
 }
 
+function VersionBadge({ version }: { version: string }) {
+    return (
+        <div className="flex flex-row items-center">
+            <div className="w-3 h-3 rounded-full bg-green-500 mr-1"></div>
+            <p className="text-xs">{version}</p>
+        </div>
+    );
+}
+
 export default function NavMenu() {
     const userData = useAuthenticatedData();
     const [darkMode, setDarkMode] = useState(false);
@@ -99,6 +108,9 @@ export default function NavMenu() {
                             <div className="flex flex-col">
                                 <p className="font-semibold">{userData?.email}</p>
                                 <SubscriptionBadge is_active={userData?.is_active ?? false} />
+                                {userData?.khoj_version && (
+                                    <VersionBadge version={userData?.khoj_version} />
+                                )}
                             </div>
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
@@ -170,9 +182,7 @@ export default function NavMenu() {
                                 >
                                     <div className="flex flex-rows">
                                         <Code className="w-6 h-6" />
-                                        <p className="ml-3 font-semibold">
-                                            {userData ? userData.khoj_version : "Releases"}
-                                        </p>
+                                        <p className="ml-3 font-semibold">Releases</p>
                                     </div>
                                 </Link>
                             </DropdownMenuItem>
@@ -220,6 +230,9 @@ export default function NavMenu() {
                                 <div className="flex flex-col">
                                     <p className="font-semibold">{userData?.email}</p>
                                     <SubscriptionBadge is_active={userData?.is_active ?? false} />
+                                    {userData?.khoj_version && (
+                                        <VersionBadge version={userData?.khoj_version} />
+                                    )}
                                 </div>
                             </MenubarItem>
                             <MenubarSeparator className="dark:bg-white height-[2px] bg-black" />
@@ -295,9 +308,7 @@ export default function NavMenu() {
                                     >
                                         <div className="flex flex-rows">
                                             <Code className="w-6 h-6" />
-                                            <p className="ml-3 font-semibold">
-                                                {userData ? userData.khoj_version : "Releases"}
-                                            </p>
+                                            <p className="ml-3 font-semibold">Releases</p>
                                         </div>
                                     </Link>
                                 </MenubarItem>