From 6832a59799234b219a70fe73c31558303235118e Mon Sep 17 00:00:00 2001
From: yasen5 <167659798+yasen5@users.noreply.github.com>
Date: Wed, 3 Dec 2025 22:48:55 -0800
Subject: [PATCH] Fix involved countries always showing, remove SVG generator
 except in dev mode

---
 src/Navbar.tsx | 44 +++++++++++++++++++++++++++-----------------
 src/popup.tsx  | 25 ++++++++++++++++---------
 2 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/Navbar.tsx b/src/Navbar.tsx
index c9691b9..0a30e63 100644
--- a/src/Navbar.tsx
+++ b/src/Navbar.tsx
@@ -2,6 +2,13 @@ import { useState } from "react";
 import { usePageTransitionContext } from "./page-transition-provider.tsx";
 import { AppPage, AppPageLabels } from "./AppPageLabels.ts";
 
+const isDev =
+  window.location.hostname === "localhost" ||
+  window.location.hostname === "127.0.0.1" ||
+  window.location.hostname.includes("dev") ||
+  window.location.hostname.includes("staging");
+
+const availablePages = isDev ? Object.entries(AppPageLabels) : Object.entries(AppPageLabels).filter(([key]) => Number(key) !== AppPage.SVG_GENERATOR);
 
 const Navbar = () => {
   const { goToPage } = usePageTransitionContext();
@@ -10,29 +17,32 @@ const Navbar = () => {
   return (
     <nav className="bg-green-800 text-white">
       <div className="flex items-center justify-between px-2 py-4">
-        <button className="md:hidden !bg-green-800 ml-auto" onClick={() => setOpen(!open)}>
+        <button
+          className="md:hidden !bg-green-800 ml-auto"
+          onClick={() => setOpen(!open)}
+        >
           ☰ Menu
         </button>
         <div className="hidden md:flex gap-6 mx-auto">
-        {Object.entries(AppPageLabels).map(([key, label]) => {
-          const page = Number(key) as AppPage;
-          return (
-            <a
-              className="min-w-[100px] px-2 py-4 hover:underline"
-              key={label}
-              href="#"
-              onClick={() => goToPage(page)}
-            >
-              {label}
-            </a>
-          );
-        })}
-      </div>
+          {availablePages.map(([key, label]) => {
+            const page = Number(key) as AppPage;
+            return (
+              <a
+                className="min-w-[100px] px-2 py-4 hover:underline"
+                key={label}
+                href="#"
+                onClick={() => goToPage(page)}
+              >
+                {label}
+              </a>
+            );
+          })}
+        </div>
       </div>
-      
+
       {open && (
         <div className="md:hidden flex flex-col gap-4 px-4 pb-4">
-          {Object.entries(AppPageLabels).map(([key, label]) => {
+          {availablePages.map(([key, label]) => {
             const page = Number(key) as AppPage;
             return (
               <a
diff --git a/src/popup.tsx b/src/popup.tsx
index b5e2b95..42e2ccd 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -76,8 +76,7 @@ export const AutoscalingPopup: React.FC<{
   );
 };
 
-const capitalize = (str: string) =>
-  str.charAt(0).toUpperCase() + str.slice(1);
+const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 
 export const CountryInfoLayout: React.FC<{
   countryName: string;
@@ -115,12 +114,19 @@ export const CountryInfoLayout: React.FC<{
               </Dropdown>
             )
         )}
-      <h3 className="!text-black font-semibold mt-4">Involved Countries:</h3>
-      {links &&
+      {links && (
+          <h3 className="!text-black font-semibold mt-4">
+            Involved Countries:
+          </h3>
+        ) &&
         links
           .filter(([title, _]) => title.length !== 0)
           .map(([title, onClick]) => (
-            <button className="border !border-gray-300 mx-2 my-1" onClick={onClick} style={{backgroundColor: "#f0f0f0", color: "black"}}>
+            <button
+              className="border !border-gray-300 mx-2 my-1"
+              onClick={onClick}
+              style={{ backgroundColor: "#f0f0f0", color: "black" }}
+            >
               {title}
             </button>
           ))}
@@ -148,11 +154,12 @@ const Dropdown: React.FC<{ title: string; children: React.ReactNode }> = ({
       <button
         style={{ backgroundColor: categoryColors[title] || "#f0f0f0" }}
         className="w-full flex justify-between items-center p-2"
-        onClick={() => {setIsOpen(!isOpen)
-          if(!isOpen) {
+        onClick={() => {
+          setIsOpen(!isOpen);
+          if (!isOpen) {
             trackEvent("dropdown_opened", {
-            dropdown: title
-          });
+              dropdown: title,
+            });
           }
         }}
       >