Merge pull request #69 from nbenaglia/feature/i18n-minor-fixes

I18N: minor fixes
2025-06-14 20:11:22 +00:00 · 2025-05-30 17:50:28 +02:00 · 2025-05-30 17:50:28 +02:00 · 36175f57e9
commit 36175f57e9
parent ca4de3e251 b26c6ea7db
17 changed files with 119 additions and 92 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -3848,8 +3848,8 @@ function App() {
                }}
              >
                <CustomButtonAccept
-                  color="black"
-                  bgColor={theme.palette.other.positive}
+                  customColor="black"
+                  customBgColor={theme.palette.other.positive}
                  sx={{
                    minWidth: '102px',
                    opacity:
@ -3885,8 +3885,8 @@ function App() {
                </CustomButtonAccept>

                <CustomButtonAccept
-                  color="black"
-                  bgColor={theme.palette.other.danger}
+                  customColor="black"
+                  customBgColor={theme.palette.other.danger}
                  sx={{
                    minWidth: '102px',
                  }}
--- a/src/assets/Icons/NavCloseTab.tsx
+++ b/src/assets/Icons/NavCloseTab.tsx
@ -30,14 +30,14 @@ export const NavCloseTab: React.FC<SVGProps> = ({
      <path
        d="M5.66675 5.66669L11.3334 11.3334"
        stroke={theme.palette.text.primary}
-        stroke-width="2"
+        strokeWidth="2"
        fill={setColor}
        fillOpacity={setOpacity}
      />
      <path
        d="M11.3333 5.66675L5.66658 11.3334"
        stroke={theme.palette.text.primary}
-        stroke-width="2"
+        strokeWidth="2"
        fill={setColor}
        fillOpacity={setOpacity}
      />
--- a/src/components/Apps/AppViewer.tsx
+++ b/src/components/Apps/AppViewer.tsx
@ -7,7 +7,14 @@ import { useQortalMessageListener } from '../../hooks/useQortalMessageListener';
 import { useThemeContext } from '../Theme/ThemeContext';
 import { useTranslation } from 'react-i18next';

-export const AppViewer = forwardRef(
+type AppViewerProps = {
+  app: any;
+  hide: boolean;
+  isDevMode: boolean;
+  skipAuth?: boolean;
+};
+
+export const AppViewer = forwardRef<HTMLIFrameElement, AppViewerProps>(
  ({ app, hide, isDevMode, skipAuth }, iframeRef) => {
    const { window: frameWindow } = useFrame();
    const { path, history, changeCurrentIndex, resetHistory } =
@ -54,6 +61,7 @@ export const AppViewer = forwardRef(
        setUrl(app.url + `&theme=${themeMode}&lang=${currentLang}`);
      }
    }, [app?.url, app?.isPreview]);
+
    const defaultUrl = useMemo(() => {
      return url;
    }, [url, isDevMode]);
--- a/src/components/Apps/AppViewerContainer.tsx
+++ b/src/components/Apps/AppViewerContainer.tsx
@ -2,15 +2,26 @@ import { forwardRef } from 'react';
 import { AppViewer } from './AppViewer';
 import Frame from 'react-frame-component';

-const AppViewerContainer = forwardRef(
-  ({ app, isSelected, hide, isDevMode, customHeight, skipAuth }, ref) => {
-    return (
-      <Frame
-        id={`browser-iframe-${app?.tabId}`}
-        head={
-          <>
-            <style>
-              {`
+type AppViewerContainerProps = {
+  app: any;
+  isSelected: boolean;
+  hide: boolean;
+  isDevMode: boolean;
+  customHeight?: string;
+  skipAuth?: boolean;
+};
+
+const AppViewerContainer = forwardRef<
+  HTMLIFrameElement,
+  AppViewerContainerProps
+>(({ app, isSelected, hide, isDevMode, customHeight, skipAuth }, ref) => {
+  return (
+    <Frame
+      id={`browser-iframe-${app?.tabId}`}
+      head={
+        <>
+          <style>
+            {`
              body {
                margin: 0;
                padding: 0;
@ -27,28 +38,27 @@ const AppViewerContainer = forwardRef(
                height: 100vh;
              }
            `}
-            </style>
-          </>
-        }
-        style={{
-          border: 'none',
-          height: customHeight || '100vh',
-          left: (!isSelected || hide) && '-200vw',
-          overflow: 'hidden',
-          position: (!isSelected || hide) && 'fixed',
-          width: '100%',
-        }}
-      >
-        <AppViewer
-          skipAuth={skipAuth}
-          app={app}
-          ref={ref}
-          hide={!isSelected || hide}
-          isDevMode={isDevMode}
-        />
-      </Frame>
-    );
-  }
-);
+          </style>
+        </>
+      }
+      style={{
+        border: 'none',
+        height: customHeight || '100vh',
+        left: (!isSelected || hide) && '-200vw',
+        overflow: 'hidden',
+        position: (!isSelected || hide) && 'fixed',
+        width: '100%',
+      }}
+    >
+      <AppViewer
+        app={app}
+        hide={!isSelected || hide}
+        isDevMode={isDevMode}
+        ref={ref}
+        skipAuth={skipAuth}
+      />
+    </Frame>
+  );
+});

 export default AppViewerContainer;
--- a/src/components/Apps/AppsDesktop.tsx
+++ b/src/components/Apps/AppsDesktop.tsx
@ -524,12 +524,12 @@ export const AppsDesktop = ({
        }
        return (
          <AppViewerContainer
-            key={tab?.tabId}
-            hide={isNewTabWindow}
-            isSelected={tab?.tabId === selectedTab?.tabId}
            app={tab}
-            ref={iframeRefs.current[tab.tabId]}
+            hide={isNewTabWindow}
            isDevMode={tab?.service ? false : true}
+            isSelected={tab?.tabId === selectedTab?.tabId}
+            key={tab?.tabId}
+            ref={iframeRefs.current[tab.tabId]}
          />
        );
      })}
@ -539,20 +539,20 @@ export const AppsDesktop = ({
          <Box
            sx={{
              display: 'flex',
-              width: '100%',
              flexDirection: 'column',
              height: '100vh',
              overflow: 'auto',
+              width: '100%',
            }}
          >
            <Spacer height="30px" />

            <AppsHomeDesktop
-              myName={myName}
              availableQapps={availableQapps}
-              setMode={setMode}
              myApp={myApp}
+              myName={myName}
              myWebsite={myWebsite}
+              setMode={setMode}
            />
          </Box>
        </>
--- a/src/components/Apps/AppsNavBarDesktop.tsx
+++ b/src/components/Apps/AppsNavBarDesktop.tsx
@ -67,7 +67,7 @@ export function saveToLocalStorage(key, subKey, newValue) {

 export const AppsNavBarDesktop = ({ disableBack }) => {
  const [tabs, setTabs] = useState([]);
-  const [selectedTab, setSelectedTab] = useState(null);
+  const [selectedTab, setSelectedTab] = useState(0);
  const [navigationController, setNavigationController] = useAtom(
    navigationControllerAtom
  );
@ -125,7 +125,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
  const setTabsToNav = (e) => {
    const { tabs, selectedTab, isNewTabWindow } = e.detail?.data;
    setTabs([...tabs]);
-    setSelectedTab(!selectedTab ? null : { ...selectedTab });
+    setSelectedTab(!selectedTab ? 0 : { ...selectedTab });
    setIsNewTabWindow(isNewTabWindow);
  };

@ -190,9 +190,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
        <Tabs
          orientation="vertical"
          ref={tabsRef}
-          aria-label={t('core:basic_tabs_example', {
-            postProcess: 'capitalizeFirstChar',
-          })}
+          aria-label={t('core:basic_tabs_example')}
          variant="scrollable" // Make tabs scrollable
          scrollButtons={true}
          sx={{
@ -202,10 +200,11 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
            maxHeight: `275px`, // Ensure the tabs container fits within the available space
            overflow: 'hidden', // Prevents overflow on small screens
          }}
+          value={false}
        >
          {tabs?.map((tab) => (
            <Tab
-              key={tab.tabId}
+              key={tab?.tabId}
              label={
                <TabComponent
                  isSelected={
@ -237,7 +236,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
        >
          <ButtonBase
            onClick={() => {
-              setSelectedTab(null);
+              setSelectedTab(0);
              executeEvent('newTabWindow', {});
            }}
          >
@ -408,7 +407,6 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
                tabId: selectedTab?.tabId,
              });
            }
-
            handleClose();
          }}
        >
@ -434,7 +432,9 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
                color: theme.palette.text.primary,
              },
            }}
-            primary="Refresh"
+            primary={t('core:action.refresh', {
+              postProcess: 'capitalizeFirstChar',
+            })}
          />
        </MenuItem>

--- a/src/components/Apps/AppsPrivate.tsx
+++ b/src/components/Apps/AppsPrivate.tsx
@ -575,7 +575,7 @@ export const AppsPrivate = ({ myName }) => {
                  </Label>

                  <Label>
-                    {t('group:amessage.generic.admin_only', {
+                    {t('group:message.generic.admin_only', {
                      postProcess: 'capitalizeFirstChar',
                    })}
                  </Label>
--- a/src/components/GlobalActions/JoinGroup.tsx
+++ b/src/components/GlobalActions/JoinGroup.tsx
@ -276,8 +276,8 @@ export const JoinGroup = () => {
            disabled={isInGroup}
          >
            <CustomButtonAccept
-              color="black"
-              bgColor={theme.palette.other.positive}
+              customColor="black"
+              customBgColor={theme.palette.other.positive}
              sx={{
                minWidth: '102px',
                height: '45px',
@ -292,8 +292,8 @@ export const JoinGroup = () => {
          </ButtonBase>

          <CustomButtonAccept
-            color="black"
-            bgColor={theme.palette.other.danger}
+            customColor="black"
+            customBgColor={theme.palette.other.danger}
            sx={{
              minWidth: '102px',
              height: '45px',
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@ -1726,6 +1726,7 @@ export const Group = ({
        >
          {directs.map((direct: any) => (
            <List
+              key={direct?.timestamp + direct?.sender}
              sx={{
                width: '100%',
              }}
@ -1756,15 +1757,15 @@ export const Group = ({
                  }, 200);
                }}
                sx={{
-                  display: 'flex',
-                  width: '100%',
-                  flexDirection: 'column',
-                  cursor: 'pointer',
-                  padding: '2px',
-                  borderRadius: '2px',
                  background:
                    direct?.address === selectedDirect?.address &&
                    theme.palette.background.default,
+                  borderRadius: '2px',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  padding: '2px',
+                  width: '100%',
                }}
              >
                <Box
--- a/src/i18n/locales/en/core.json
+++ b/src/i18n/locales/en/core.json
@ -68,6 +68,7 @@
    "publish": "publish",
    "publish_app": "publish your app",
    "publish_comment": "publish comment",
+    "refresh": "refresh",
    "register_name": "register name",
    "remove": "remove",
    "remove_reaction": "remove reaction",
--- a/src/i18n/locales/es/core.json
+++ b/src/i18n/locales/es/core.json
@ -68,21 +68,22 @@
    "publish_app": "publica tu aplicación",
    "publish_comment": "publicar comentario",
    "register_name": "nombre de registro",
-    "remove": "eliminar",
-    "remove_reaction": "eliminar la reacción",
+    "refresh": "refresca",
+    "remove": "elimina",
+    "remove_reaction": "elimina la reacción",
    "return_apps_dashboard": "volver al tablero de aplicaciones",
-    "save": "ahorrar",
-    "save_disk": "guardar en el disco",
-    "search": "buscar",
-    "search_apps": "buscar aplicaciones",
-    "search_groups": "buscar grupos",
-    "search_chat_text": "search Chat Text",
-    "select_app_type": "seleccionar el tipo de aplicación",
-    "select_category": "seleccionar categoría",
-    "select_name_app": "seleccionar nombre/aplicación",
-    "send": "enviar",
-    "send_qort": "enviar Qort",
-    "set_avatar": "establecer avatar",
+    "save": "ahorra",
+    "save_disk": "guarda en el disco",
+    "search": "busca",
+    "search_apps": "busca aplicaciones",
+    "search_groups": "busca grupos",
+    "search_chat_text": "busca Chat Text",
+    "select_app_type": "selecciona el tipo de aplicación",
+    "select_category": "selecciona categoría",
+    "select_name_app": "selecciona nombre/aplicación",
+    "send": "envia",
+    "send_qort": "envia Qort",
+    "set_avatar": "establece avatar",
    "show": "espectáculo",
    "show_poll": "encuesta",
    "start_minting": "empiece a acuñar",
--- a/src/i18n/locales/fr/core.json
+++ b/src/i18n/locales/fr/core.json
@ -67,6 +67,7 @@
    "publish": "publier",
    "publish_app": "publiez votre application",
    "publish_comment": "publier un commentaire",
+    "refresh": "rafraîche",
    "register_name": "nom de registre",
    "remove": "retirer",
    "remove_reaction": "éliminer la réaction",
--- a/src/i18n/locales/it/core.json
+++ b/src/i18n/locales/it/core.json
@ -68,6 +68,7 @@
    "publish": "pubblica",
    "publish_app": "pubblica la tua app",
    "publish_comment": "pubblica un commento",
+    "refresh": "aggiorna",
    "register_name": "registra nome",
    "remove": "rimuovi",
    "remove_reaction": "rimuovi la reazione",
@ -114,7 +115,7 @@
  "apps_dashboard": "dashboard delle app",
  "apps_official": "app ufficiali",
  "attachment": "allegato",
-  "balance": "bilancia:",
+  "balance": "bilancio:",
  "basic_tabs_example": "esempio di schede base",
  "category": "categoria",
  "category_other": "categorie",
--- a/src/i18n/locales/ja/core.json
+++ b/src/i18n/locales/ja/core.json
@ -67,6 +67,7 @@
    "publish": "公開",
    "publish_app": "アプリを公開します",
    "publish_comment": "コメントを公開します",
+    "refresh": "リフレッシュ",
    "register_name": "登録名",
    "remove": "取り除く",
    "remove_reaction": "反応を取り除きます",
--- a/src/i18n/locales/ru/core.json
+++ b/src/i18n/locales/ru/core.json
@ -67,6 +67,7 @@
    "publish": "публиковать",
    "publish_app": "Публикуйте свое приложение",
    "publish_comment": "Публикуйте комментарий",
+    "refresh": "освежить",
    "register_name": "зарегистрировать имя",
    "remove": "удалять",
    "remove_reaction": "удалить реакцию",
--- a/src/i18n/locales/zh/core.json
+++ b/src/i18n/locales/zh/core.json
@ -67,6 +67,7 @@
    "publish": "发布",
    "publish_app": "发布您的应用",
    "publish_comment": "发布评论",
+    "refresh": "刷新",
    "register_name": "登记名称",
    "remove": "消除",
    "remove_reaction": "删除反应",
--- a/src/styles/App-styles.ts
+++ b/src/styles/App-styles.ts
@ -134,20 +134,21 @@ export const CustomButton = styled(Box)(({ theme }) => ({
 }));

 interface CustomButtonProps {
-  bgColor?: string;
-  color?: string;
+  customBgColor?: string;
+  customColor?: string;
 }

-export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
-  ({ bgColor, color, theme }) => ({
+export const CustomButtonAccept = styled(Box)<CustomButtonProps>((props) => {
+  const { customBgColor, customColor, theme } = props;
+  return {
    alignItems: 'center',
-    backgroundColor: bgColor || theme.palette.background.default,
+    backgroundColor: customBgColor || theme.palette.background.default,
    borderColor: theme.palette.background.paper,
    borderRadius: 5,
    borderStyle: 'solid',
    borderWidth: '0.5px',
    boxSizing: 'border-box',
-    color: color || theme.palette.background.default,
+    color: customColor || theme.palette.background.default,
    cursor: 'pointer',
    display: 'inline-flex',
    filter: 'drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))',
@ -163,16 +164,16 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
    width: 'fit-content',
    '&:hover': {
      opacity: 1,
-      backgroundColor: bgColor || theme.palette.background.default,
-      color: color || '#fff',
+      backgroundColor: customBgColor || theme.palette.background.default,
+      color: customColor || '#fff',
      svg: {
        path: {
-          fill: color || '#fff',
+          fill: customColor || '#fff',
        },
      },
    },
-  })
-);
+  };
+});

 export const CustomInput = styled(TextField)(({ theme }) => ({
  backgroundColor: theme.palette.background.default,