update after some feedbacks

Author: HugoPerard

src/app/Document.tsx

@@ -7,7 +7,8 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { Providers } from '@/app/Providers';
 import { Viewport } from '@/components/Viewport';
-import { EnvHint } from '@/features/devtools/EnvHint';
+import { env } from '@/env.mjs';
+import { AppHint } from '@/features/devtools/AppHint';
 import { useLocale } from '@/lib/i18n/useLocale';
 import { TrpcProvider } from '@/lib/trpc/TrpcProvider';
 import theme, { COLOR_MODE_STORAGE_KEY } from '@/theme';
@@ -65,8 +66,10 @@ export const Document = ({ children }: { children: ReactNode }) => {
         <Providers>
           <TrpcProvider>
             <Viewport>{children}</Viewport>
-            <EnvHint />
-            <ReactQueryDevtools initialIsOpen={false} />
+            <AppHint />
+            {env.NEXT_PUBLIC_DEV_TOOLS_ENABLED && (
+              <ReactQueryDevtools initialIsOpen={false} />
+            )}
           </TrpcProvider>
         </Providers>
       </body>

src/app/layout.tsx

@@ -4,7 +4,7 @@ import { Metadata } from 'next';
 
 import { Document } from '@/app/Document';
 import { NextLoader } from '@/app/NextLoader';
-import { getEnvHintTitlePrefix } from '@/features/devtools/EnvHint';
+import { getEnvHintTitlePrefix } from '@/features/devtools/AppHint';
 
 export const metadata: Metadata = {
   title: {

src/env.mjs

@@ -62,6 +62,16 @@ export const env = createEnv({
           value ??
           (process.env.NODE_ENV === 'development' ? 'warning' : 'success')
       ),
+    NEXT_PUBLIC_DEV_TOOLS_ENABLED: z
+      .enum(['true', 'false'])
+      .optional()
+      .transform((value) => {
+        if (value) {
+          return value === 'true';
+        }
+
+        return process.env.NODE_ENV === 'development' ? true : false;
+      }),
     NEXT_PUBLIC_NODE_ENV: zNodeEnv(),
   },
 
@@ -83,6 +93,7 @@ export const env = createEnv({
     NEXT_PUBLIC_ENV_COLOR_SCHEME: process.env.NEXT_PUBLIC_ENV_COLOR_SCHEME,
     NEXT_PUBLIC_ENV_NAME: process.env.NEXT_PUBLIC_ENV_NAME,
     NEXT_PUBLIC_ENV_EMOJI: process.env.NEXT_PUBLIC_ENV_EMOJI,
+    NEXT_PUBLIC_DEV_TOOLS_ENABLED: process.env.NEXT_PUBLIC_DEV_TOOLS_ENABLED,
     NEXT_PUBLIC_IS_DEMO: process.env.NEXT_PUBLIC_IS_DEMO,
     NEXT_PUBLIC_NODE_ENV: process.env.NODE_ENV,
   },

src/features/devtools/AppHint.tsx

@@ -0,0 +1,78 @@
+import { Box, HStack, Text, useDisclosure } from '@chakra-ui/react';
+import { LuPencilRuler } from 'react-icons/lu';
+
+import { env } from '@/env.mjs';
+import { DevToolsDrawer } from '@/features/devtools/DevToolsDrawer';
+
+export const getEnvHintTitlePrefix = () => {
+  if (env.NEXT_PUBLIC_ENV_EMOJI) return `${env.NEXT_PUBLIC_ENV_EMOJI} `;
+  if (env.NEXT_PUBLIC_ENV_NAME) return `[${env.NEXT_PUBLIC_ENV_NAME}] `;
+  return '';
+};
+
+export const AppHint = () => {
+  if (!env.NEXT_PUBLIC_ENV_NAME && !env.NEXT_PUBLIC_DEV_TOOLS_ENABLED) {
+    return null;
+  }
+
+  return (
+    <Box
+      zIndex="9999"
+      position="fixed"
+      top="0"
+      insetStart="0"
+      insetEnd="0"
+      h="2px"
+      bg={`${env.NEXT_PUBLIC_ENV_COLOR_SCHEME}.400`}
+    >
+      <HStack
+        position="fixed"
+        top="0"
+        insetStart="4"
+        fontSize="0.6rem"
+        fontWeight="bold"
+        alignItems="start"
+      >
+        {env.NEXT_PUBLIC_ENV_NAME && <EnvHint />}
+        {env.NEXT_PUBLIC_DEV_TOOLS_ENABLED && <DevToolsHint />}
+      </HStack>
+    </Box>
+  );
+};
+
+const EnvHint = () => {
+  return (
+    <Text
+      bg={`${env.NEXT_PUBLIC_ENV_COLOR_SCHEME}.400`}
+      color={`${env.NEXT_PUBLIC_ENV_COLOR_SCHEME}.900`}
+      px="1"
+      borderBottomStartRadius="sm"
+      borderBottomEndRadius="sm"
+      textTransform="uppercase"
+    >
+      {env.NEXT_PUBLIC_ENV_NAME}
+    </Text>
+  );
+};
+const DevToolsHint = () => {
+  const devToolsDrawer = useDisclosure();
+
+  return (
+    <>
+      <Text
+        as="button"
+        onClick={devToolsDrawer.onToggle}
+        bg={`${env.NEXT_PUBLIC_ENV_COLOR_SCHEME}.400`}
+        color={`${env.NEXT_PUBLIC_ENV_COLOR_SCHEME}.900`}
+        px="1"
+        py="0.5"
+        borderBottomStartRadius="sm"
+        borderBottomEndRadius="sm"
+        textTransform="uppercase"
+      >
+        <LuPencilRuler />
+      </Text>
+      <DevToolsDrawer disclosure={devToolsDrawer} />
+    </>
+  );
+};

src/features/devtools/DevToolsDrawer.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import {
+  Checkbox,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  FormControl,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  Stack,
+  Wrap,
+  useColorMode,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+
+import { AVAILABLE_LANGUAGES } from '@/lib/i18n/constants';
+
+export const DevToolsDrawer = ({
+  disclosure,
+}: {
+  disclosure: ReturnType<typeof useDisclosure>;
+}) => {
+  const { colorMode, setColorMode } = useColorMode();
+
+  const { t, i18n } = useTranslation(['common']);
+
+  return (
+    <Drawer
+      onClose={disclosure.onClose}
+      isOpen={disclosure.isOpen}
+      size="xs"
+      placement="left"
+    >
+      <DrawerContent>
+        <DrawerCloseButton />
+        <DrawerHeader>Development panel</DrawerHeader>
+        <DrawerBody>
+          <Stack spacing={6}>
+            <Checkbox
+              isChecked={colorMode === 'dark'}
+              onChange={(e) =>
+                setColorMode(e.target.checked ? 'dark' : 'light')
+              }
+            >
+              Dark mode
+            </Checkbox>
+            <FormControl>
+              <FormLabel>Language</FormLabel>
+              <RadioGroup
+                value={i18n.language}
+                onChange={(newValue) => i18n.changeLanguage(newValue)}
+              >
+                <Wrap spacing={4}>
+                  {AVAILABLE_LANGUAGES.map((language) => (
+                    <Radio key={language.key} value={language.key}>
+                      {t(`common:languages.${language.key}`)}
+                    </Radio>
+                  ))}
+                </Wrap>
+              </RadioGroup>
+            </FormControl>
+          </Stack>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};