From acfc641663fc91e6359bf267768254a40881c4f3 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 09:29:10 +0200 Subject: [PATCH] Add theme --- src/components/Apps/AppsNavBarDesktop.tsx | 296 +++++++++++----------- src/components/Apps/TabComponent.tsx | 45 ++-- 2 files changed, 176 insertions(+), 165 deletions(-) diff --git a/src/components/Apps/AppsNavBarDesktop.tsx b/src/components/Apps/AppsNavBarDesktop.tsx index 8873e1a..2a22efd 100644 --- a/src/components/Apps/AppsNavBarDesktop.tsx +++ b/src/components/Apps/AppsNavBarDesktop.tsx @@ -1,12 +1,12 @@ -import React, { useEffect, useMemo, useRef, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from 'react'; import { AppsNavBarLeft, AppsNavBarParent, AppsNavBarRight, -} from "./Apps-styles"; -import NavBack from "../../assets/svgs/NavBack.svg"; -import NavAdd from "../../assets/svgs/NavAdd.svg"; -import NavMoreMenu from "../../assets/svgs/NavMoreMenu.svg"; +} from './Apps-styles'; +import { NavBack } from '../../assets/svgs/NavBack.tsx'; +import { NavAdd } from '../../assets/svgs/NavAdd.tsx'; +import { NavMoreMenu } from '../../assets/svgs/NavMoreMenu.tsx'; import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import { ButtonBase, @@ -16,21 +16,22 @@ import { MenuItem, Tab, Tabs, -} from "@mui/material"; + useTheme, +} from '@mui/material'; import { executeEvent, subscribeToEvent, unsubscribeFromEvent, -} from "../../utils/events"; -import TabComponent from "./TabComponent"; -import PushPinIcon from "@mui/icons-material/PushPin"; -import RefreshIcon from "@mui/icons-material/Refresh"; -import { useRecoilState, useSetRecoilState } from "recoil"; +} from '../../utils/events'; +import TabComponent from './TabComponent'; +import PushPinIcon from '@mui/icons-material/PushPin'; +import RefreshIcon from '@mui/icons-material/Refresh'; +import { useRecoilState, useSetRecoilState } from 'recoil'; import { navigationControllerAtom, settingsLocalLastUpdatedAtom, sortablePinnedAppsAtom, -} from "../../atoms/global"; +} from '../../atoms/global'; export function saveToLocalStorage(key, subKey, newValue) { try { @@ -59,14 +60,17 @@ export function saveToLocalStorage(key, subKey, newValue) { const serializedValue = JSON.stringify(combinedData); localStorage.setItem(key, serializedValue); } catch (error) { - console.error("Error saving to localStorage:", error); + console.error('Error saving to localStorage:', error); } } -export const AppsNavBarDesktop = ({disableBack}) => { +export const AppsNavBarDesktop = ({ disableBack }) => { const [tabs, setTabs] = useState([]); const [selectedTab, setSelectedTab] = useState(null); - const [navigationController, setNavigationController] = useRecoilState(navigationControllerAtom) + const [navigationController, setNavigationController] = useRecoilState( + navigationControllerAtom + ); + const theme = useTheme(); const [isNewTabWindow, setIsNewTabWindow] = useState(false); const tabsRef = useRef(null); @@ -76,7 +80,6 @@ export const AppsNavBarDesktop = ({disableBack}) => { sortablePinnedAppsAtom ); - const setSettingsLocalLastUpdated = useSetRecoilState( settingsLocalLastUpdatedAtom ); @@ -92,29 +95,26 @@ export const AppsNavBarDesktop = ({disableBack}) => { useEffect(() => { // Scroll to the last tab whenever the tabs array changes (e.g., when a new tab is added) if (tabsRef.current) { - const tabElements = tabsRef.current.querySelectorAll(".MuiTab-root"); + const tabElements = tabsRef.current.querySelectorAll('.MuiTab-root'); if (tabElements.length > 0) { const lastTab = tabElements[tabElements.length - 1]; lastTab.scrollIntoView({ - behavior: "smooth", - block: "nearest", - inline: "end", + behavior: 'smooth', + block: 'nearest', + inline: 'end', }); } } }, [tabs.length]); // Dependency on the number of tabs - - - const isDisableBackButton = useMemo(()=> { - if(disableBack) return true - if(selectedTab && navigationController[selectedTab?.tabId]?.hasBack) return false - if(selectedTab && !navigationController[selectedTab?.tabId]?.hasBack) return true - return false - }, [navigationController, selectedTab, disableBack]) - - - + const isDisableBackButton = useMemo(() => { + if (disableBack) return true; + if (selectedTab && navigationController[selectedTab?.tabId]?.hasBack) + return false; + if (selectedTab && !navigationController[selectedTab?.tabId]?.hasBack) + return true; + return false; + }, [navigationController, selectedTab, disableBack]); const setTabsToNav = (e) => { const { tabs, selectedTab, isNewTabWindow } = e.detail?.data; @@ -124,57 +124,61 @@ export const AppsNavBarDesktop = ({disableBack}) => { }; useEffect(() => { - subscribeToEvent("setTabsToNav", setTabsToNav); + subscribeToEvent('setTabsToNav', setTabsToNav); return () => { - unsubscribeFromEvent("setTabsToNav", setTabsToNav); + unsubscribeFromEvent('setTabsToNav', setTabsToNav); }; }, []); - - - const isSelectedAppPinned = useMemo(()=> { - if(selectedTab?.isPrivate){ + const isSelectedAppPinned = useMemo(() => { + if (selectedTab?.isPrivate) { return !!sortablePinnedApps?.find( (item) => - item?.privateAppProperties?.name === selectedTab?.privateAppProperties?.name && item?.privateAppProperties?.service === selectedTab?.privateAppProperties?.service && item?.privateAppProperties?.identifier === selectedTab?.privateAppProperties?.identifier + item?.privateAppProperties?.name === + selectedTab?.privateAppProperties?.name && + item?.privateAppProperties?.service === + selectedTab?.privateAppProperties?.service && + item?.privateAppProperties?.identifier === + selectedTab?.privateAppProperties?.identifier ); } else { return !!sortablePinnedApps?.find( (item) => - item?.name === selectedTab?.name && item?.service === selectedTab?.service + item?.name === selectedTab?.name && + item?.service === selectedTab?.service ); } - }, [selectedTab,sortablePinnedApps]) + }, [selectedTab, sortablePinnedApps]); return ( { - executeEvent("navigateBack", selectedTab?.tabId); + executeEvent('navigateBack', selectedTab?.tabId); }} disabled={isDisableBackButton} sx={{ opacity: !isDisableBackButton ? 1 : 0.1, - cursor: !isDisableBackButton ? 'pointer': 'default' + cursor: !isDisableBackButton ? 'pointer' : 'default', }} > - + { variant="scrollable" // Make tabs scrollable scrollButtons={true} sx={{ - "& .MuiTabs-indicator": { - backgroundColor: "white", + '& .MuiTabs-indicator': { + backgroundColor: theme.palette.background.default, }, maxHeight: `320px`, // Ensure the tabs container fits within the available space - overflow: "hidden", // Prevents overflow on small screens + overflow: 'hidden', // Prevents overflow on small screens }} > {tabs?.map((tab) => ( @@ -202,84 +206,83 @@ export const AppsNavBarDesktop = ({disableBack}) => { /> } // Pass custom component sx={{ - "&.Mui-selected": { - color: "white", + '&.Mui-selected': { + color: theme.palette.text.primary, }, - padding: "0px", - margin: "0px", - minWidth: "0px", - width: "50px", + padding: '0px', + margin: '0px', + minWidth: '0px', + width: '50px', }} /> ))} + {selectedTab && ( - { - setSelectedTab(null); - executeEvent("newTabWindow", {}); + sx={{ + gap: '10px', + flexDirection: 'column', }} > - { + setSelectedTab(null); + executeEvent('newTabWindow', {}); }} - src={NavAdd} - /> - - { - if (!selectedTab) return; - handleClick(e); - }} - > - + + + { + if (!selectedTab) return; + handleClick(e); }} - src={NavMoreMenu} - /> - - + > + + + )} - + { if (isSelectedAppPinned) { // Remove the selected app if it is pinned - if(selectedTab?.isPrivate){ + if (selectedTab?.isPrivate) { updatedApps = prev.filter( (item) => !( - item?.privateAppProperties?.name === selectedTab?.privateAppProperties?.name && - item?.privateAppProperties?.service === selectedTab?.privateAppProperties?.service && - item?.privateAppProperties?.identifier === selectedTab?.privateAppProperties?.identifier + item?.privateAppProperties?.name === + selectedTab?.privateAppProperties?.name && + item?.privateAppProperties?.service === + selectedTab?.privateAppProperties?.service && + item?.privateAppProperties?.identifier === + selectedTab?.privateAppProperties?.identifier ) ); } else { @@ -309,21 +315,19 @@ export const AppsNavBarDesktop = ({disableBack}) => { ) ); } - } else { // Add the selected app if it is not pinned - if(selectedTab?.isPrivate){ + if (selectedTab?.isPrivate) { updatedApps = [ - ...prev, - { - isPreview: true, - isPrivate: true, - privateAppProperties: { - ...(selectedTab?.privateAppProperties || {}) - } - - }, - ]; + ...prev, + { + isPreview: true, + isPrivate: true, + privateAppProperties: { + ...(selectedTab?.privateAppProperties || {}), + }, + }, + ]; } else { updatedApps = [ ...prev, @@ -333,12 +337,11 @@ export const AppsNavBarDesktop = ({disableBack}) => { }, ]; } - } saveToLocalStorage( - "ext_saved_settings", - "sortablePinnedApps", + 'ext_saved_settings', + 'sortablePinnedApps', updatedApps ); return updatedApps; @@ -350,70 +353,74 @@ export const AppsNavBarDesktop = ({disableBack}) => { > { if (selectedTab?.refreshFunc) { selectedTab.refreshFunc(selectedTab?.tabId); - } else { - executeEvent("refreshApp", { + executeEvent('refreshApp', { tabId: selectedTab?.tabId, }); } - + handleClose(); }} > + {!selectedTab?.isPrivate && ( - { - executeEvent("copyLink", { + executeEvent('copyLink', { tabId: selectedTab?.tabId, }); handleClose(); @@ -421,23 +428,24 @@ export const AppsNavBarDesktop = ({disableBack}) => { > + { + const theme = useTheme(); + return ( { if (isSelected) { - executeEvent("removeTab", { + executeEvent('removeTab', { data: app, }); return; } - executeEvent("setSelectedTab", { + executeEvent('setSelectedTab', { data: app, }); }} > {isSelected && ( - )} {app?.isPrivate && !app?.privateAppProperties?.logo ? ( ) : ( { >