From 16a77cdf256375399b7da31afb98cf056323af2f Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Sat, 11 Feb 2023 20:46:15 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Add=20devel?=
 =?UTF-8?q?oper=20settings=20in=20customizations=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next-i18next.config.js                        |  5 ++--
 .../Customization/CustomizationAccordeon.tsx  | 24 ++++++++++++++++---
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/next-i18next.config.js b/next-i18next.config.js
index 9364e6b38..097721344 100644
--- a/next-i18next.config.js
+++ b/next-i18next.config.js
@@ -32,7 +32,8 @@ module.exports = {
     fallbackLng: 'en',
     localeDetection: true,
     returnEmptyString: false,
-    debug: process.env.NODE_ENV === 'development',
+    debug: false,
+    appendNamespaceToCIMode: true,
+    reloadOnPrerender: process.env.NODE_ENV === 'development',
   },
-  reloadOnPrerender: process.env.NODE_ENV === 'development',
 };
diff --git a/src/components/Settings/Customization/CustomizationAccordeon.tsx b/src/components/Settings/Customization/CustomizationAccordeon.tsx
index 5aab48bdc..86e7c1d38 100644
--- a/src/components/Settings/Customization/CustomizationAccordeon.tsx
+++ b/src/components/Settings/Customization/CustomizationAccordeon.tsx
@@ -1,6 +1,6 @@
-import { Accordion, Grid, Group, Stack, Text } from '@mantine/core';
-import { IconBrush, IconChartCandle, IconDragDrop, IconLayout } from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
+import { Accordion, Checkbox, Grid, Group, Stack, Switch, Text } from '@mantine/core';
+import { IconBrush, IconChartCandle, IconCode, IconDragDrop, IconLayout } from '@tabler/icons';
+import { i18n, useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
 import { GridstackConfiguration } from './Layout/GridstackConfiguration';
 import { LayoutSelector } from './Layout/LayoutSelector';
@@ -113,5 +113,23 @@ const getItems = () => {
         </>
       ),
     },
+    process.env.NODE_ENV === 'development' && {
+      id: 'dev',
+      image: <IconCode />,
+      label: 'Developer options',
+      description: 'Options to help when developing',
+      content: (
+        <Stack>
+          <Checkbox
+            label="Use debug language"
+            description="This will show the translation keys instead of the actual translations"
+            onChange={(e) =>
+              // Change to CI mode language
+              i18n?.changeLanguage(e.target.checked ? 'cimode' : 'en')
+            }
+          />
+        </Stack>
+      ),
+    },
   ];
 };