Merge branch 'develop' into feature/large-files-and-names

src/App.tsx

@@ -3866,8 +3866,8 @@ function App() {
                 }}
               >
                 <CustomButtonAccept
-                  color="black"
+                  customColor="black"
-                  bgColor={theme.palette.other.positive}
+                  customBgColor={theme.palette.other.positive}
                   sx={{
                     minWidth: '102px',
                     opacity:
@@ -3903,8 +3903,8 @@ function App() {
                 </CustomButtonAccept>
 
                 <CustomButtonAccept
-                  color="black"
+                  customColor="black"
-                  bgColor={theme.palette.other.danger}
+                  customBgColor={theme.palette.other.danger}
                   sx={{
                     minWidth: '102px',
                   }}

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}
       />

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]);

src/components/Apps/AppViewerContainer.tsx

@@ -2,8 +2,19 @@ import { forwardRef } from 'react';
 import { AppViewer } from './AppViewer';
 import Frame from 'react-frame-component';
 
-const AppViewerContainer = forwardRef(
+type AppViewerContainerProps = {
-  ({ app, isSelected, hide, isDevMode, customHeight, skipAuth }, ref) => {
+  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}`}
@@ -40,15 +51,14 @@ const AppViewerContainer = forwardRef(
       }}
     >
       <AppViewer
-          skipAuth={skipAuth}
         app={app}
-          ref={ref}
         hide={!isSelected || hide}
         isDevMode={isDevMode}
+        ref={ref}
+        skipAuth={skipAuth}
       />
     </Frame>
   );
-  }
+});
-);
 
 export default AppViewerContainer;

src/components/Apps/AppsDesktop.tsx

@@ -530,12 +530,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]}
           />
         );
       })}
@@ -545,21 +545,21 @@ 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}
               myAddress={myAddress}
+              setMode={setMode}
             />
           </Box>
         </>

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', {
+          aria-label={t('core:basic_tabs_example')}
-            postProcess: 'capitalizeFirstChar',
-          })}
           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>
 

src/components/Apps/AppsPrivate.tsx

@@ -632,7 +632,7 @@ export const AppsPrivate = ({ myName, myAddress }) => {
                   </Label>
 
                   <Label>
-                    {t('group:amessage.generic.admin_only', {
+                    {t('group:message.generic.admin_only', {
                       postProcess: 'capitalizeFirstChar',
                     })}
                   </Label>

src/components/GlobalActions/JoinGroup.tsx

@@ -276,8 +276,8 @@ export const JoinGroup = () => {
             disabled={isInGroup}
           >
             <CustomButtonAccept
-              color="black"
+              customColor="black"
-              bgColor={theme.palette.other.positive}
+              customBgColor={theme.palette.other.positive}
               sx={{
                 minWidth: '102px',
                 height: '45px',
@@ -292,8 +292,8 @@ export const JoinGroup = () => {
           </ButtonBase>
 
           <CustomButtonAccept
-            color="black"
+            customColor="black"
-            bgColor={theme.palette.other.danger}
+            customBgColor={theme.palette.other.danger}
             sx={{
               minWidth: '102px',
               height: '45px',

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

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",

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",
+    "refresh": "refresca",
-    "remove_reaction": "eliminar la reacción",
+    "remove": "elimina",
+    "remove_reaction": "elimina la reacción",
     "return_apps_dashboard": "volver al tablero de aplicaciones",
-    "save": "ahorrar",
+    "save": "ahorra",
-    "save_disk": "guardar en el disco",
+    "save_disk": "guarda en el disco",
-    "search": "buscar",
+    "search": "busca",
-    "search_apps": "buscar aplicaciones",
+    "search_apps": "busca aplicaciones",
-    "search_groups": "buscar grupos",
+    "search_groups": "busca grupos",
-    "search_chat_text": "search Chat Text",
+    "search_chat_text": "busca Chat Text",
-    "select_app_type": "seleccionar el tipo de aplicación",
+    "select_app_type": "selecciona el tipo de aplicación",
-    "select_category": "seleccionar categoría",
+    "select_category": "selecciona categoría",
-    "select_name_app": "seleccionar nombre/aplicación",
+    "select_name_app": "selecciona nombre/aplicación",
-    "send": "enviar",
+    "send": "envia",
-    "send_qort": "enviar Qort",
+    "send_qort": "envia Qort",
-    "set_avatar": "establecer avatar",
+    "set_avatar": "establece avatar",
     "show": "espectáculo",
     "show_poll": "encuesta",
     "start_minting": "empiece a acuñar",

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",

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",

src/i18n/locales/ja/core.json

@@ -67,6 +67,7 @@
     "publish": "公開",
     "publish_app": "アプリを公開します",
     "publish_comment": "コメントを公開します",
+    "refresh": "リフレッシュ",
     "register_name": "登録名",
     "remove": "取り除く",
     "remove_reaction": "反応を取り除きます",

src/i18n/locales/ru/core.json

@@ -67,6 +67,7 @@
     "publish": "публиковать",
     "publish_app": "Публикуйте свое приложение",
     "publish_comment": "Публикуйте комментарий",
+    "refresh": "освежить",
     "register_name": "зарегистрировать имя",
     "remove": "удалять",
     "remove_reaction": "удалить реакцию",

src/i18n/locales/zh/core.json

@@ -67,6 +67,7 @@
     "publish": "发布",
     "publish_app": "发布您的应用",
     "publish_comment": "发布评论",
+    "refresh": "刷新",
     "register_name": "登记名称",
     "remove": "消除",
     "remove_reaction": "删除反应",

src/styles/App-styles.ts

@@ -134,20 +134,21 @@ export const CustomButton = styled(Box)(({ theme }) => ({
 }));
 
 interface CustomButtonProps {
-  bgColor?: string;
+  customBgColor?: string;
-  color?: string;
+  customColor?: string;
 }
 
-export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
+export const CustomButtonAccept = styled(Box)<CustomButtonProps>((props) => {
-  ({ bgColor, color, theme }) => ({
+  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,
+      backgroundColor: customBgColor || theme.palette.background.default,
-      color: color || '#fff',
+      color: customColor || '#fff',
       svg: {
         path: {
-          fill: color || '#fff',
+          fill: customColor || '#fff',
         },
       },
     },
-  })
+  };
-);
+});
 
 export const CustomInput = styled(TextField)(({ theme }) => ({
   backgroundColor: theme.palette.background.default,