diff --git a/package-lock.json b/package-lock.json index fe43916..1e8c9c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,6 +45,7 @@ "react-countdown-circle-timer": "^3.2.1", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", + "react-frame-component": "^5.2.7", "react-infinite-scroller": "^1.2.6", "react-intersection-observer": "^9.13.0", "react-qr-code": "^2.0.15", @@ -9256,6 +9257,16 @@ "react": ">= 16.8 || 18.0.0" } }, + "node_modules/react-frame-component": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-5.2.7.tgz", + "integrity": "sha512-ROjHtSLoSVYUBfTieazj/nL8jIX9rZFmHC0yXEU+dx6Y82OcBEGgU9o7VyHMrBFUN9FuQ849MtIPNNLsb4krbg==", + "peerDependencies": { + "prop-types": "^15.5.9", + "react": ">= 16.3", + "react-dom": ">= 16.3" + } + }, "node_modules/react-infinite-scroller": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz", diff --git a/package.json b/package.json index 4d0fa0c..07e3164 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "react-countdown-circle-timer": "^3.2.1", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", + "react-frame-component": "^5.2.7", "react-infinite-scroller": "^1.2.6", "react-intersection-observer": "^9.13.0", "react-qr-code": "^2.0.15", diff --git a/src/assets/svgs/NavAdd.svg b/src/assets/svgs/NavAdd.svg new file mode 100644 index 0000000..1d38c05 --- /dev/null +++ b/src/assets/svgs/NavAdd.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svgs/NavBack.svg b/src/assets/svgs/NavBack.svg new file mode 100644 index 0000000..07df29e --- /dev/null +++ b/src/assets/svgs/NavBack.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svgs/NavCloseTab.svg b/src/assets/svgs/NavCloseTab.svg new file mode 100644 index 0000000..a4595df --- /dev/null +++ b/src/assets/svgs/NavCloseTab.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svgs/NavMoreMenu.svg b/src/assets/svgs/NavMoreMenu.svg new file mode 100644 index 0000000..f64cdab --- /dev/null +++ b/src/assets/svgs/NavMoreMenu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Apps/AppInfo.tsx b/src/components/Apps/AppInfo.tsx index 0e3be5a..eb1c686 100644 --- a/src/components/Apps/AppInfo.tsx +++ b/src/components/Apps/AppInfo.tsx @@ -1,22 +1,102 @@ import React, { useEffect, useMemo, useState } from "react"; import { - + AppCircle, + AppCircleContainer, + AppCircleLabel, + AppDownloadButton, + AppDownloadButtonText, + AppInfoAppName, + AppInfoSnippetContainer, + AppInfoSnippetLeft, + AppInfoSnippetMiddle, + AppInfoSnippetRight, + AppInfoUserName, AppsLibraryContainer, - + AppsParent, } from "./Apps-styles"; import { Avatar, Box, ButtonBase, InputBase } from "@mui/material"; import { Add } from "@mui/icons-material"; import { getBaseApiReact } from "../../App"; import LogoSelected from "../../assets/svgs/LogoSelected.svg"; - import { Spacer } from "../../common/Spacer"; +import { executeEvent } from "../../utils/events"; export const AppInfo = ({ app }) => { - + + + const isInstalled = app?.status?.status === 'READY' return ( + + + + + + + center-icon + + + + - + + {app?.metadata?.title || app?.name} + + + + { app?.name} + + + + + + + + + + + + + {isInstalled ? 'Open' : 'Download'} + + + + ); }; diff --git a/src/components/Apps/AppInfoSnippet.tsx b/src/components/Apps/AppInfoSnippet.tsx new file mode 100644 index 0000000..26d0935 --- /dev/null +++ b/src/components/Apps/AppInfoSnippet.tsx @@ -0,0 +1,100 @@ +import React, { useEffect, useMemo, useState } from "react"; +import { + AppCircle, + AppCircleContainer, + AppCircleLabel, + AppDownloadButton, + AppDownloadButtonText, + AppInfoAppName, + AppInfoSnippetContainer, + AppInfoSnippetLeft, + AppInfoSnippetMiddle, + AppInfoSnippetRight, + AppInfoUserName, + AppsLibraryContainer, +} from "./Apps-styles"; +import { Avatar, Box, ButtonBase, InputBase } from "@mui/material"; +import { Add } from "@mui/icons-material"; +import { getBaseApiReact } from "../../App"; +import LogoSelected from "../../assets/svgs/LogoSelected.svg"; + +import { Spacer } from "../../common/Spacer"; +import { executeEvent } from "../../utils/events"; + +export const AppInfoSnippet = ({ app }) => { + + + const isInstalled = app?.status?.status === 'READY' + return ( + + + { + executeEvent("selectedAppInfo", { + data: app, + }); + }} + > + + + + center-icon + + + + + + { + executeEvent("selectedAppInfo", { + data: app, + }); + }}> + + {app?.metadata?.title || app?.name} + + + + + { app?.name} + + + + + + + {isInstalled ? 'Open' : 'Download'} + + + + ); +}; diff --git a/src/components/Apps/AppViewer.tsx b/src/components/Apps/AppViewer.tsx new file mode 100644 index 0000000..6992127 --- /dev/null +++ b/src/components/Apps/AppViewer.tsx @@ -0,0 +1,46 @@ +import React, { useContext, useEffect, useMemo, useRef, useState } from "react"; +import { + AppCircle, + AppCircleContainer, + AppCircleLabel, + AppDownloadButton, + AppDownloadButtonText, + AppInfoAppName, + AppInfoSnippetContainer, + AppInfoSnippetLeft, + AppInfoSnippetMiddle, + AppInfoSnippetRight, + AppInfoUserName, + AppsLibraryContainer, + AppsParent, +} from "./Apps-styles"; +import { Avatar, Box, ButtonBase, InputBase } from "@mui/material"; +import { Add } from "@mui/icons-material"; +import { MyContext, getBaseApiReact } from "../../App"; +import LogoSelected from "../../assets/svgs/LogoSelected.svg"; + +import { Spacer } from "../../common/Spacer"; +import { executeEvent } from "../../utils/events"; + +export const AppViewer = ({ app }) => { + const { rootHeight } = useContext(MyContext); + const iframeRef = useRef(null); + + + const url = useMemo(()=> { + return `${getBaseApiReact()}/render/${app?.service}/${app?.name}${app?.path != null ? app?.path : ''}?theme=dark&identifier=${(app?.identifier != null && app?.identifier != 'null') ? app?.identifier : ''}` + }, [app?.service, app?.name, app?.identifier, app?.path]) + + + + + return ( + + ); +}; diff --git a/src/components/Apps/AppViewerContainer.tsx b/src/components/Apps/AppViewerContainer.tsx new file mode 100644 index 0000000..ef04760 --- /dev/null +++ b/src/components/Apps/AppViewerContainer.tsx @@ -0,0 +1,40 @@ +import React, { useContext, useRef } from 'react' +import { AppViewer } from './AppViewer' +import Frame from 'react-frame-component'; +import { MyContext } from '../../App'; + +const AppViewerContainer = ({app, isSelected}) => { + const { rootHeight } = useContext(MyContext); + const frameRef = useRef(null); + + return ( + + {/* Inject styles directly into the iframe */} + + + } style={{ + height: `calc(${rootHeight} - 60px - 45px)`, + border: 'none', + width: '100%', + display: !isSelected && 'none' + }} > + ) +} + +export default AppViewerContainer \ No newline at end of file diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index 1549596..6f67658 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/src/components/Apps/Apps-styles.tsx @@ -6,6 +6,7 @@ import { Box, TextField, InputLabel, + ButtonBase, } from "@mui/material"; import { styled } from "@mui/system"; @@ -15,7 +16,7 @@ import { flexDirection: "column", height: "100%", alignItems: "center", - overflow: 'auto', + overflow: 'auto', // For WebKit-based browsers (Chrome, Safari, etc.) "::-webkit-scrollbar": { width: "0px", // Set the width to 0 to hide the scrollbar @@ -35,6 +36,7 @@ import { gap: '24px', flexWrap: 'wrap', alignItems: 'flex-start', + alignSelf: 'center' })); export const AppsLibraryContainer = styled(Box)(({ theme }) => ({ @@ -59,13 +61,16 @@ import { width: "90%", justifyContent: 'flex-start', alignItems: 'center', - gap: '10px' + gap: '10px', + flexGrow: 1, + flexShrink: 0 })); export const AppsSearchRight = styled(Box)(({ theme }) => ({ display: "flex", width: "90%", justifyContent: 'flex-end', alignItems: 'center', + flexShrink: 1 })); export const AppCircleContainer = styled(Box)(({ theme }) => ({ display: "flex", @@ -105,4 +110,85 @@ import { borderRadius: '50%', backgroundColor: "var(--apps-circle)", border: '1px solid #FFFFFF' + })); + + export const AppInfoSnippetContainer = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: 'space-between', + alignItems: 'center', + width: '100%' + })); + + export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: 'flex-start', + alignItems: 'center', + gap: '12px' + })); + export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: 'flex-end', + alignItems: 'center', + })); + + export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({ + backgroundColor: "#247C0E", + width: '101px', + height: '29px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + borderRadius: '25px' + })); + + export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({ + fontSize: '14px', + fontWeight: 500, + lineHeight: 1.2, + })); + + + + export const AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + justifyContent: 'center', + alignItems: 'flex-start', + })); + + export const AppInfoAppName = styled(Typography)(({ theme }) => ({ + fontSize: '16px', + fontWeight: 500, + lineHeight: 1.2, + })); + export const AppInfoUserName = styled(Typography)(({ theme }) => ({ + fontSize: '13px', + fontWeight: 400, + lineHeight: 1.2, + color: '#8D8F93' + })); + + + export const AppsNavBarParent = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + height: '60px', + backgroundColor: '#1F2023', + padding: '0px 10px', + position: "fixed", + bottom: 0, + zIndex: 1, + })); + + export const AppsNavBarLeft = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: 'flex-start', + alignItems: 'center', + })); + export const AppsNavBarRight = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: 'flex-end', + alignItems: 'center', })); \ No newline at end of file diff --git a/src/components/Apps/Apps.tsx b/src/components/Apps/Apps.tsx index 9ffe412..0f4a1f0 100644 --- a/src/components/Apps/Apps.tsx +++ b/src/components/Apps/Apps.tsx @@ -1,14 +1,26 @@ -import React, { useEffect, useState } from 'react' +import React, { useContext, useEffect, useRef, useState } from 'react' import { AppsHome } from './AppsHome' import { Spacer } from '../../common/Spacer' -import { getBaseApiReact } from '../../App' +import { MyContext, getBaseApiReact } from '../../App' import { AppsLibrary } from './AppsLibrary' +import { AppInfo } from './AppInfo' +import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events' +import { AppsNavBar } from './AppsNavBar' +import { AppsParent } from './Apps-styles' +import { AppViewer } from './AppViewer' +import AppViewerContainer from './AppViewerContainer' +import ShortUniqueId from "short-unique-id"; -export const Apps = () => { - const [mode, setMode] = useState('home') +const uid = new ShortUniqueId({ length: 8 }); + +export const Apps = ({mode, setMode}) => { const [availableQapps, setAvailableQapps] = useState([]) const [downloadedQapps, setDownloadedQapps] = useState([]) + const [selectedAppInfo, setSelectedAppInfo] = useState(null) + const [tabs, setTabs] = useState([]) + const [selectedTab, setSelectedTab] = useState(null) + const getQapps = React.useCallback( async () => { @@ -52,11 +64,95 @@ export const Apps = () => { getQapps() }, [getQapps]) + + const selectedAppInfoFunc = (e) => { + const data = e.detail?.data; + setSelectedAppInfo(data) + setMode('appInfo') + }; + + useEffect(() => { + subscribeToEvent("selectedAppInfo", selectedAppInfoFunc); + + return () => { + unsubscribeFromEvent("selectedAppInfo", selectedAppInfoFunc); + }; + }, []); + + const navigateBackFunc = (e) => { + if(mode === 'appInfo'){ + setMode('library') + } else if(mode === 'library'){ + setMode('home') + } else { + + const iframe = document.getElementById('browser-iframe2'); + console.log('iframe', iframe) +// Go Back in the iframe's history +if (iframe) { + console.log(iframe.contentWindow) + if (iframe && iframe.contentWindow) { + const iframeWindow = iframe.contentWindow; + if (iframeWindow && iframeWindow.history) { + iframeWindow.history.back(); + } + } + } + + } + }; + + useEffect(() => { + subscribeToEvent("navigateBack", navigateBackFunc); + + return () => { + unsubscribeFromEvent("navigateBack", navigateBackFunc); + }; + }, [mode]); + + + const addTabFunc = (e) => { + const data = e.detail?.data; + const newTab = { + ...data, + tabId: uid.rnd() + } + setTabs((prev)=> [...prev, newTab]) + setSelectedTab(newTab) + }; + + useEffect(() => { + subscribeToEvent("addTab", addTabFunc); + + return () => { + unsubscribeFromEvent("addTab", addTabFunc); + }; + }, [mode]); + + + + return ( - <> - + + {mode !== 'viewer' && ( + + + )} {mode === 'home' && } {mode === 'library' && } - + {mode === 'appInfo' && } + {mode === 'viewer' && ( + <> + {tabs.map((tab)=> { + return + })} + + ) } + + {mode !== 'viewer' && ( + + + )} + ) } diff --git a/src/components/Apps/AppsHome.tsx b/src/components/Apps/AppsHome.tsx index 775d7e0..ab5dc31 100644 --- a/src/components/Apps/AppsHome.tsx +++ b/src/components/Apps/AppsHome.tsx @@ -1,56 +1,81 @@ -import React, { useMemo, useState } from 'react' -import { AppCircle, AppCircleContainer, AppCircleLabel, AppsContainer, AppsParent } from './Apps-styles' -import { Avatar, ButtonBase } from '@mui/material' -import { Add } from '@mui/icons-material' -import { getBaseApiReact } from '../../App' +import React, { useMemo, useState } from "react"; +import { + AppCircle, + AppCircleContainer, + AppCircleLabel, + AppsContainer, + AppsParent, +} from "./Apps-styles"; +import { Avatar, ButtonBase } from "@mui/material"; +import { Add } from "@mui/icons-material"; +import { getBaseApiReact } from "../../App"; import LogoSelected from "../../assets/svgs/LogoSelected.svg"; +import { executeEvent } from "../../utils/events"; -export const AppsHome = ({downloadedQapps, setMode}) => { - - +export const AppsHome = ({ downloadedQapps, setMode }) => { return ( - - - { - setMode('library') - }}> - + + { + setMode("library"); + }} + > + - + + + Add - + + + {downloadedQapps?.map((app) => { + return ( + { + executeEvent("addTab", { + data: app + }) + }} + > + + + + center-icon + + + + {app?.name} + + - {downloadedQapps?.map((qapp)=> { - return ( - - - - - center-icon - - - {qapp?.metadata?.title || qapp?.name} - - - ) - })} - - - ) -} + ); + })} + + ); +}; diff --git a/src/components/Apps/AppsLibrary.tsx b/src/components/Apps/AppsLibrary.tsx index d801bc0..03a8b47 100644 --- a/src/components/Apps/AppsLibrary.tsx +++ b/src/components/Apps/AppsLibrary.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from "react"; +import React, { useContext, useEffect, useMemo, useRef, useState } from "react"; import { AppCircle, AppCircleContainer, @@ -11,14 +11,16 @@ import { AppsSearchLeft, AppsSearchRight, } from "./Apps-styles"; -import { Avatar, Box, ButtonBase, InputBase } from "@mui/material"; +import { Avatar, Box, ButtonBase, InputBase, styled } from "@mui/material"; import { Add } from "@mui/icons-material"; -import { getBaseApiReact } from "../../App"; +import { MyContext, getBaseApiReact } from "../../App"; import LogoSelected from "../../assets/svgs/LogoSelected.svg"; import IconSearch from "../../assets/svgs/Search.svg"; import IconClearInput from "../../assets/svgs/ClearInput.svg"; import { Spacer } from "../../common/Spacer"; +import { AppInfoSnippet } from "./AppInfoSnippet"; +import { Virtuoso } from "react-virtuoso"; const officialAppList = [ "q-tube", "q-blog", @@ -30,21 +32,41 @@ const officialAppList = [ "q-shop", ]; +const ScrollerStyled = styled('div')({ + // Hide scrollbar for WebKit browsers (Chrome, Safari) + "::-webkit-scrollbar": { + width: "0px", + height: "0px", + }, + + // Hide scrollbar for Firefox + scrollbarWidth: "none", + + // Hide scrollbar for IE and older Edge + "-ms-overflow-style": "none", + }); + + export const AppsLibrary = ({ downloadedQapps, availableQapps }) => { - const [searchValue, setSearchValue] = useState('') + const [searchValue, setSearchValue] = useState(""); + const virtuosoRef = useRef(); + const { rootHeight } = useContext(MyContext); + const officialApps = useMemo(() => { - return availableQapps.filter((app) => app.service === 'APP' && - officialAppList.includes(app?.name?.toLowerCase()) + return availableQapps.filter( + (app) => + app.service === "APP" && + officialAppList.includes(app?.name?.toLowerCase()) ); }, [availableQapps]); - const [debouncedValue, setDebouncedValue] = useState(''); // Debounced value + const [debouncedValue, setDebouncedValue] = useState(""); // Debounced value // Debounce logic useEffect(() => { const handler = setTimeout(() => { - setDebouncedValue(searchValue); // Update debounced value after delay - }, 500); // 500ms debounce time (adjustable) + setDebouncedValue(searchValue); + }, 250); // Cleanup timeout if searchValue changes before the timeout completes return () => { @@ -53,111 +75,147 @@ export const AppsLibrary = ({ downloadedQapps, availableQapps }) => { }, [searchValue]); // Runs effect when searchValue changes // Example: Perform search or other actions based on debouncedValue - - const searchedList = useMemo(()=> { - if(!debouncedValue) return [] - return availableQapps.filter((app)=> app.name.toLowerCase().includes(debouncedValue.toLowerCase())) - }, [debouncedValue]) - console.log('officialApps', searchedList) - - - return ( - - - - - - - setSearchValue(e.target.value)} - sx={{ ml: 1, flex: 1 }} - placeholder="Search for apps" - inputProps={{ 'aria-label': 'Search for apps', fontSize: '16px', fontWeight: 400 }} - /> - - - {searchValue && ( - { - setSearchValue('') - }}> - - - )} - - - - - - {searchedList?.length > 0 ? ( - <> - {searchedList.map((app)=> { - return ( - - ) - })} - - ) : ( - <> - Official Apps - - - {officialApps?.map((qapp) => { - return ( - { + if (!debouncedValue) return []; + return availableQapps.filter((app) => + app.name.toLowerCase().includes(debouncedValue.toLowerCase()) + ); + }, [debouncedValue]); + console.log("officialApps", searchedList); + + const rowRenderer = (index) => { + + let app = searchedList[index]; + console.log('appi', app) + return ; + }; + + const StyledVirtuosoContainer = styled('div')({ + position: 'relative', + height: rootHeight, + width: '100%', + display: 'flex', + flexDirection: 'column', + + // Hide scrollbar for WebKit browsers (Chrome, Safari) + "::-webkit-scrollbar": { + width: "0px", + height: "0px", + }, + + // Hide scrollbar for Firefox + scrollbarWidth: "none", + + // Hide scrollbar for IE and older Edge + "-ms-overflow-style": "none", + }); + + return ( + + + + + + setSearchValue(e.target.value)} + sx={{ ml: 1, flex: 1 }} + placeholder="Search for apps" + inputProps={{ + "aria-label": "Search for apps", + fontSize: "16px", + fontWeight: 400, }} - > - - + + + {searchValue && ( + { + setSearchValue(""); + }} + > + + + )} + + + + + {searchedList?.length > 0 ? ( + + + + ) : ( + <> + Official Apps + + + {officialApps?.map((qapp) => { + return ( + - - + - - - - {qapp?.metadata?.title || qapp?.name} - - - - ); - })} - - - Featured + > + + center-icon + + + + {qapp?.metadata?.title || qapp?.name} + + + + ); + })} + + + Featured - - Categories - + + Categories + )} - - ); }; diff --git a/src/components/Apps/AppsNavBar.tsx b/src/components/Apps/AppsNavBar.tsx new file mode 100644 index 0000000..01dc0e6 --- /dev/null +++ b/src/components/Apps/AppsNavBar.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { + AppsNavBarLeft, + AppsNavBarParent, + AppsNavBarRight, +} from "./Apps-styles"; +import NavBack from "../../assets/svgs/NavBack.svg"; +import NavCloseTab from "../../assets/svgs/NavCloseTab.svg"; +import NavAdd from "../../assets/svgs/NavAdd.svg"; +import NavMoreMenu from "../../assets/svgs/NavMoreMenu.svg"; +import { ButtonBase } from "@mui/material"; +import { executeEvent } from "../../utils/events"; + +export const AppsNavBar = () => { + return ( + + + { + executeEvent("navigateBack", { + }); + }}> + + + + + + + + + + + + + ); +}; diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index 3e09a3a..719ebe9 100644 --- a/src/components/Group/Group.tsx +++ b/src/components/Group/Group.tsx @@ -89,6 +89,7 @@ import { HomeDesktop } from "./HomeDesktop"; import { DesktopFooter } from "../Desktop/DesktopFooter"; import { DesktopHeader } from "../Desktop/DesktopHeader"; import { Apps } from "../Apps/Apps"; +import { AppsNavBar } from "../Apps/AppsNavBar"; // let touchStartY = 0; // let disablePullToRefresh = false; @@ -432,6 +433,7 @@ export const Group = ({ const { clearStatesMessageQueueProvider } = useMessageQueue(); const initiatedGetMembers = useRef(false); const [groupChatTimestamps, setGroupChatTimestamps] = React.useState({}); + const [appsMode, setAppsMode] = useState('viewer') useEffect(()=> { timestampEnterDataRef.current = timestampEnterData @@ -2229,7 +2231,7 @@ export const Group = ({ isThin={ mobileViewMode === "groups" || mobileViewMode === "group" || - mobileViewModeKeepOpen === "messaging" + mobileViewModeKeepOpen === "messaging" || (mobileViewMode === "apps" && appsMode !== 'home') } logoutFunc={logoutFunc} goToHome={goToHome} @@ -2735,7 +2737,7 @@ export const Group = ({ /> )} {isMobile && mobileViewMode === "apps" && ( - + )} { !isMobile && !selectedGroup && @@ -2962,7 +2964,7 @@ export const Group = ({ /> - {(isMobile && mobileViewMode === "home" || isMobile && mobileViewMode === "apps") && !mobileViewModeKeepOpen && ( + {(isMobile && mobileViewMode === "home" || (isMobile && mobileViewMode === "apps" && appsMode === 'home')) && !mobileViewModeKeepOpen && ( <>
)} + {(isMobile && isMobile && mobileViewMode === "apps" && appsMode !== 'home') && !mobileViewModeKeepOpen && ( + <> + + + )} ); };