From 05209222b3cf14625ec4155e05a18b0ec7e876bc Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 13 Apr 2025 07:19:35 -0500
Subject: [PATCH] consolidate

---
 web/public/locales/en/common.json           |   2 +-
 web/src/components/menu/GeneralSettings.tsx | 142 +++++---------------
 2 files changed, 33 insertions(+), 111 deletions(-)

diff --git a/web/public/locales/en/common.json b/web/public/locales/en/common.json
index 6083c7950c..bc3d558cb3 100644
--- a/web/public/locales/en/common.json
+++ b/web/public/locales/en/common.json
@@ -107,7 +107,7 @@
     "configurationEditor": "Configuration Editor",
     "languages": "Languages",
     "language": {
-      "en": "English",
+      "en": "English (English)",
       "es": "Español (Spanish)",
       "zhCN": "简体中文 (Simplified Chinese)",
       "hi": "हिन्दी (Hindi)",
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index c825b0e005..dc8ea91ae2 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -73,6 +73,17 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const logoutUrl = config?.proxy?.logout_url || "/api/logout";
 
+  // languages
+
+  const languages = [
+    { code: "en", label: t("menu.language.en") },
+    { code: "es", label: t("menu.language.es") },
+    { code: "zh-CN", label: t("menu.language.zhCN") },
+    { code: "tr", label: t("menu.language.tr") },
+    { code: "nl", label: t("menu.language.nl") },
+    { code: "nb", label: t("menu.language.nb") },
+  ];
+
   // settings
 
   const { language, setLanguage } = useLanguage();
@@ -313,116 +324,27 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                   }
                 >
                   <span tabIndex={0} className="sr-only" />
-                  <MenuItem
-                    className={
-                      isDesktop
-                        ? "cursor-pointer"
-                        : "flex items-center p-2 text-sm"
-                    }
-                    aria-label={t("menu.language.en")}
-                    onClick={() => setLanguage("en")}
-                  >
-                    {language.trim() === "en" ? (
-                      <>
-                        <LuLanguages className="mr-2 size-4" />
-                        {t("menu.language.en")}
-                      </>
-                    ) : (
-                      <span className="ml-6 mr-2">{t("menu.language.en")}</span>
-                    )}
-                  </MenuItem>
-                  <MenuItem
-                    className={
-                      isDesktop
-                        ? "cursor-pointer"
-                        : "flex items-center p-2 text-sm"
-                    }
-                    aria-label={t("menu.language.es")}
-                    onClick={() => setLanguage("es")}
-                  >
-                    {language === "es" ? (
-                      <>
-                        <LuLanguages className="mr-2 size-4" />
-                        {t("menu.language.es")}
-                      </>
-                    ) : (
-                      <span className="ml-6 mr-2">{t("menu.language.es")}</span>
-                    )}
-                  </MenuItem>
-                  <MenuItem
-                    className={
-                      isDesktop
-                        ? "cursor-pointer"
-                        : "flex items-center p-2 text-sm"
-                    }
-                    aria-label={t("menu.language.zhCN")}
-                    onClick={() => setLanguage("zh-CN")}
-                  >
-                    {language === "zh-CN" ? (
-                      <>
-                        <LuLanguages className="mr-2 size-4" />
-                        {t("menu.language.zhCN")}
-                      </>
-                    ) : (
-                      <span className="ml-6 mr-2">
-                        {t("menu.language.zhCN")}
-                      </span>
-                    )}
-                  </MenuItem>
-                  <MenuItem
-                    className={
-                      isDesktop
-                        ? "cursor-pointer"
-                        : "flex items-center p-2 text-sm"
-                    }
-                    aria-label={t("menu.language.tr")}
-                    onClick={() => setLanguage("tr")}
-                  >
-                    {language === "tr" ? (
-                      <>
-                        <LuLanguages className="mr-2 size-4" />
-                        {t("menu.language.tr")}
-                      </>
-                    ) : (
-                      <span className="ml-6 mr-2">{t("menu.language.tr")}</span>
-                    )}
-                  </MenuItem>
-                  <MenuItem
-                    className={
-                      isDesktop
-                        ? "cursor-pointer"
-                        : "flex items-center p-2 text-sm"
-                    }
-                    aria-label={t("menu.language.nl")}
-                    onClick={() => setLanguage("nl")}
-                  >
-                    {language === "nl" ? (
-                      <>
-                        <LuLanguages className="mr-2 size-4" />
-                        {t("menu.language.nl")}
-                      </>
-                    ) : (
-                      <span className="ml-6 mr-2">{t("menu.language.nl")}</span>
-                    )}
-                  </MenuItem>
-                  <MenuItem
-                    className={
-                      isDesktop
-                        ? "cursor-pointer"
-                        : "flex items-center p-2 text-sm"
-                    }
-                    aria-label={t("menu.language.nb")}
-                    onClick={() => setLanguage("nb")}
-                  >
-                    {language === "nb" ? (
-                      <>
-                        <LuLanguages className="mr-2 size-4" />
-                        {t("menu.language.nb")}
-                      </>
-                    ) : (
-                      <span className="ml-6 mr-2">{t("menu.language.nb")}</span>
-                    )}
-                  </MenuItem>
+                  {languages.map(({ code, label }) => (
+                    <MenuItem
+                      key={code}
+                      className={
+                        isDesktop
+                          ? "cursor-pointer"
+                          : "flex items-center p-2 text-sm"
+                      }
+                      aria-label={label}
+                      onClick={() => setLanguage(code)}
+                    >
+                      {language.trim() === code ? (
+                        <>
+                          <LuLanguages className="mr-2 size-4" />
+                          {label}
+                        </>
+                      ) : (
+                        <span className="ml-6 mr-2">{label}</span>
+                      )}
+                    </MenuItem>
+                  ))}
                 </SubItemContent>
               </Portal>
             </SubItem>