feat(hooks): add console warning | task CU-86c19zx2q

src/hooks/index.ts

@@ -6,3 +6,4 @@ export { default as useInternetChecker } from './useInternetChecker';
 export { default as useUserAutoLogin } from './useUserAutoLogin';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useCurrentUser } from './useCurrentUser';
+export { default as useConsoleWarning } from './useConsoleWarning';

src/hooks/useConsoleWarning.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import useAppTranslation from './useAppTranslation';
+
+const useConsoleWarning = () => {
+  const { t } = useAppTranslation();
+
+  const warningShownRef = useRef(false);
+
+  useEffect(() => {
+    const consoleWarningTitleStyle = ` 
+        background: #DD8C2C; 
+        color: #FFFFFF; 
+        font-size: 48px; 
+        font-weight: 700;
+    `;
+
+    const consoleWarningDescStyle = `
+        font-weight: 500; 
+        font-size: 32px;
+    `;
+
+    if (!warningShownRef.current) {
+      console.log(`%c${t('tr_consoleWarningTitle')}`, consoleWarningTitleStyle);
+      console.log(`%c${t('tr_consoleWarningDesc')}`, consoleWarningDescStyle);
+
+      warningShownRef.current = true;
+    }
+  }, [t]);
+};
+
+export default useConsoleWarning;

src/layouts/root_layout/index.tsx

@@ -29,10 +29,13 @@ import WhatsNew from '@features/whats_new';
 import Typography from '@components/typography';
 import NetlifyLight from '@assets/img/netlify_lightmode.png';
 import NetlifyDark from '@assets/img/netlify_darkmode.png';
+import useConsoleWarning from '@hooks/useConsoleWarning';
 
 const RootLayout = ({ updatePwa }: { updatePwa: VoidFunction }) => {
   const { isSupported } = useGlobal();
 
+  useConsoleWarning();
+
   const {
     isAppLoad,
     isOpenAbout,

src/locales/en/general.json

@@ -137,5 +137,7 @@
   "tr_manageUserProfileSettings": "Manage user account settings",
   "tr_createUserProfile": "Create user account",
   "tr_download": "Download",
-  "tr_import": "Import"
+  "tr_import": "Import",
+  "tr_consoleWarningTitle": "!WARNING!",
+  "tr_consoleWarningDesc": "This console is a powerful tool intended for developers. If you're not a developer, please avoid entering or pasting commands here – even if someone asks you to. This ensures your Organized app data always stay safe."
 }

src/pages/persons/all_persons/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { Box, Slide } from '@mui/material';
 import { Button, PageTitle } from '@components/index';
 import {
@@ -18,7 +19,7 @@ import PersonsSearch from '@features/persons/search';
 const PersonsAll = () => {
   const { t } = useAppTranslation();
 
-  const { desktopUp } = useBreakpoints();
+  const { desktopUp, tablet500Down } = useBreakpoints();
 
   const { isPersonEditor } = useCurrentUser();
 
@@ -105,6 +106,7 @@ const PersonsAll = () => {
                     <PersonsSearch />
                     <Button
                       variant="secondary"
+                      sx={tablet500Down && { width: '35%' }}
                       onClick={() => setIsPanelOpen((prev) => !prev)}
                       endIcon={
                         isPanelOpen ? <IconPanelOpen /> : <IconPanelClose />