Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-05-08 10:47:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move qortal icon from right bar to top-left bar

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-19 16:48:23 +02:00
parent a2c0e3af25
commit 46e52ec738
8 changed files with 182 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@ -1817,10 +1817,6 @@ function App() {
<Spacer height="20px" /> <Spacer height="20px" />
<CoreSyncStatus />
<Spacer height="20px" />
<QMailStatus /> <QMailStatus />
<Spacer height="20px" /> <Spacer height="20px" />

2
src/assets/Icons/AppsIcon.tsx
View File

@ -1,4 +1,4 @@
import { useTheme } from "@mui/material"; import { useTheme } from '@mui/material';
export const AppsIcon = ({ height = 31, width = 31 }) => { export const AppsIcon = ({ height = 31, width = 31 }) => {
const theme = useTheme(); const theme = useTheme();

2
src/assets/Icons/HomeIcon.tsx
View File

@ -1,4 +1,4 @@
import { useTheme } from "@mui/material"; import { useTheme } from '@mui/material';
export const HomeIcon = ({ height = 20, width = 23 }) => { export const HomeIcon = ({ height = 20, width = 23 }) => {
const theme = useTheme(); const theme = useTheme();

231
src/components/Apps/AppsDesktop.tsx
View File

@ -1,34 +1,29 @@
import React, { import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
useContext, import { AppsHomeDesktop } from './AppsHomeDesktop';
useEffect, import { Spacer } from '../../common/Spacer';
useMemo, import { GlobalContext, getBaseApiReact } from '../../App';
useRef, import { AppInfo } from './AppInfo';
useState,
} from "react";
import { AppsHomeDesktop } from "./AppsHomeDesktop";
import { Spacer } from "../../common/Spacer";
import { GlobalContext, getBaseApiReact } from "../../App";
import { AppInfo } from "./AppInfo";
import { import {
executeEvent, executeEvent,
subscribeToEvent, subscribeToEvent,
unsubscribeFromEvent, unsubscribeFromEvent,
} from "../../utils/events"; } from '../../utils/events';
import { AppsParent } from "./Apps-styles"; import { AppsParent } from './Apps-styles';
import AppViewerContainer from "./AppViewerContainer"; import AppViewerContainer from './AppViewerContainer';
import ShortUniqueId from "short-unique-id"; import ShortUniqueId from 'short-unique-id';
import { AppPublish } from "./AppPublish"; import { AppPublish } from './AppPublish';
import { AppsLibraryDesktop } from "./AppsLibraryDesktop"; import { AppsLibraryDesktop } from './AppsLibraryDesktop';
import { AppsCategoryDesktop } from "./AppsCategoryDesktop"; import { AppsCategoryDesktop } from './AppsCategoryDesktop';
import { AppsNavBarDesktop } from "./AppsNavBarDesktop"; import { AppsNavBarDesktop } from './AppsNavBarDesktop';
import { Box, ButtonBase, useTheme } from "@mui/material"; import { Box, ButtonBase, useTheme } from '@mui/material';
import { HomeIcon } from "../../assets/Icons/HomeIcon"; import { HomeIcon } from '../../assets/Icons/HomeIcon';
import { MessagingIcon } from "../../assets/Icons/MessagingIcon"; import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
import { Save } from "../Save/Save"; import { Save } from '../Save/Save';
import { IconWrapper } from "../Desktop/DesktopFooter"; import { IconWrapper } from '../Desktop/DesktopFooter';
import { useRecoilState } from "recoil"; import { useRecoilState } from 'recoil';
import { enabledDevModeAtom } from "../../atoms/global"; import { enabledDevModeAtom } from '../../atoms/global';
import { AppsIcon } from "../../assets/Icons/AppsIcon"; import { AppsIcon } from '../../assets/Icons/AppsIcon';
import { CoreSyncStatus } from '../CoreSyncStatus';
const uid = new ShortUniqueId({ length: 8 }); const uid = new ShortUniqueId({ length: 8 });
@ -58,25 +53,25 @@ export const AppsDesktop = ({
const myApp = useMemo(() => { const myApp = useMemo(() => {
return availableQapps.find( return availableQapps.find(
(app) => app.name === myName && app.service === "APP" (app) => app.name === myName && app.service === 'APP'
); );
}, [myName, availableQapps]); }, [myName, availableQapps]);
const myWebsite = useMemo(() => { const myWebsite = useMemo(() => {
return availableQapps.find( return availableQapps.find(
(app) => app.name === myName && app.service === "WEBSITE" (app) => app.name === myName && app.service === 'WEBSITE'
); );
}, [myName, availableQapps]); }, [myName, availableQapps]);
useEffect(() => { useEffect(() => {
if (show) { if (show) {
showTutorial("qapps"); showTutorial('qapps');
} }
}, [show]); }, [show]);
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
executeEvent("setTabsToNav", { executeEvent('setTabsToNav', {
data: { data: {
tabs: tabs, tabs: tabs,
selectedTab: selectedTab, selectedTab: selectedTab,
@ -91,9 +86,9 @@ export const AppsDesktop = ({
const url = `${getBaseApiReact()}/arbitrary/categories`; const url = `${getBaseApiReact()}/arbitrary/categories`;
const response = await fetch(url, { const response = await fetch(url, {
method: "GET", method: 'GET',
headers: { headers: {
"Content-Type": "application/json", 'Content-Type': 'application/json',
}, },
}); });
if (!response?.ok) return; if (!response?.ok) return;
@ -115,9 +110,9 @@ export const AppsDesktop = ({
const url = `${getBaseApiReact()}/arbitrary/resources/search?service=APP&mode=ALL&limit=0&includestatus=true&includemetadata=true`; const url = `${getBaseApiReact()}/arbitrary/resources/search?service=APP&mode=ALL&limit=0&includestatus=true&includemetadata=true`;
const response = await fetch(url, { const response = await fetch(url, {
method: "GET", method: 'GET',
headers: { headers: {
"Content-Type": "application/json", 'Content-Type': 'application/json',
}, },
}); });
if (!response?.ok) return; if (!response?.ok) return;
@ -125,9 +120,9 @@ export const AppsDesktop = ({
const urlWebsites = `${getBaseApiReact()}/arbitrary/resources/search?service=WEBSITE&mode=ALL&limit=0&includestatus=true&includemetadata=true`; const urlWebsites = `${getBaseApiReact()}/arbitrary/resources/search?service=WEBSITE&mode=ALL&limit=0&includestatus=true&includemetadata=true`;
const responseWebsites = await fetch(urlWebsites, { const responseWebsites = await fetch(urlWebsites, {
method: "GET", method: 'GET',
headers: { headers: {
"Content-Type": "application/json", 'Content-Type': 'application/json',
}, },
}); });
if (!responseWebsites?.ok) return; if (!responseWebsites?.ok) return;
@ -150,9 +145,12 @@ export const AppsDesktop = ({
useEffect(() => { useEffect(() => {
getQapps(); getQapps();
const interval = setInterval(() => { const interval = setInterval(
() => {
getQapps(); getQapps();
}, 20 * 60 * 1000); // 20 minutes in milliseconds },
20 * 60 * 1000
); // 20 minutes in milliseconds
return () => clearInterval(interval); return () => clearInterval(interval);
}, [getQapps]); }, [getQapps]);
@ -160,29 +158,29 @@ export const AppsDesktop = ({
const selectedAppInfoFunc = (e) => { const selectedAppInfoFunc = (e) => {
const data = e.detail?.data; const data = e.detail?.data;
setSelectedAppInfo(data); setSelectedAppInfo(data);
setMode("appInfo"); setMode('appInfo');
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("selectedAppInfo", selectedAppInfoFunc); subscribeToEvent('selectedAppInfo', selectedAppInfoFunc);
return () => { return () => {
unsubscribeFromEvent("selectedAppInfo", selectedAppInfoFunc); unsubscribeFromEvent('selectedAppInfo', selectedAppInfoFunc);
}; };
}, []); }, []);
const selectedAppInfoCategoryFunc = (e) => { const selectedAppInfoCategoryFunc = (e) => {
const data = e.detail?.data; const data = e.detail?.data;
setSelectedAppInfo(data); setSelectedAppInfo(data);
setMode("appInfo-from-category"); setMode('appInfo-from-category');
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("selectedAppInfoCategory", selectedAppInfoCategoryFunc); subscribeToEvent('selectedAppInfoCategory', selectedAppInfoCategoryFunc);
return () => { return () => {
unsubscribeFromEvent( unsubscribeFromEvent(
"selectedAppInfoCategory", 'selectedAppInfoCategory',
selectedAppInfoCategoryFunc selectedAppInfoCategoryFunc
); );
}; };
@ -191,43 +189,43 @@ export const AppsDesktop = ({
const selectedCategoryFunc = (e) => { const selectedCategoryFunc = (e) => {
const data = e.detail?.data; const data = e.detail?.data;
setSelectedCategory(data); setSelectedCategory(data);
setMode("category"); setMode('category');
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("selectedCategory", selectedCategoryFunc); subscribeToEvent('selectedCategory', selectedCategoryFunc);
return () => { return () => {
unsubscribeFromEvent("selectedCategory", selectedCategoryFunc); unsubscribeFromEvent('selectedCategory', selectedCategoryFunc);
}; };
}, []); }, []);
const navigateBackFunc = (e) => { const navigateBackFunc = (e) => {
if ( if (
[ [
"category", 'category',
"appInfo-from-category", 'appInfo-from-category',
"appInfo", 'appInfo',
"library", 'library',
"publish", 'publish',
].includes(mode) ].includes(mode)
) { ) {
// Handle the various modes as needed // Handle the various modes as needed
if (mode === "category") { if (mode === 'category') {
setMode("library"); setMode('library');
setSelectedCategory(null); setSelectedCategory(null);
} else if (mode === "appInfo-from-category") { } else if (mode === 'appInfo-from-category') {
setMode("category"); setMode('category');
} else if (mode === "appInfo") { } else if (mode === 'appInfo') {
setMode("library"); setMode('library');
} else if (mode === "library") { } else if (mode === 'library') {
if (isNewTabWindow) { if (isNewTabWindow) {
setMode("viewer"); setMode('viewer');
} else { } else {
setMode("home"); setMode('home');
} }
} else if (mode === "publish") { } else if (mode === 'publish') {
setMode("library"); setMode('library');
} }
} else if (selectedTab?.tabId) { } else if (selectedTab?.tabId) {
executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {}); executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {});
@ -235,10 +233,10 @@ export const AppsDesktop = ({
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("navigateBack", navigateBackFunc); subscribeToEvent('navigateBack', navigateBackFunc);
return () => { return () => {
unsubscribeFromEvent("navigateBack", navigateBackFunc); unsubscribeFromEvent('navigateBack', navigateBackFunc);
}; };
}, [mode, selectedTab]); }, [mode, selectedTab]);
@ -250,16 +248,16 @@ export const AppsDesktop = ({
}; };
setTabs((prev) => [...prev, newTab]); setTabs((prev) => [...prev, newTab]);
setSelectedTab(newTab); setSelectedTab(newTab);
setMode("viewer"); setMode('viewer');
setIsNewTabWindow(false); setIsNewTabWindow(false);
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("addTab", addTabFunc); subscribeToEvent('addTab', addTabFunc);
return () => { return () => {
unsubscribeFromEvent("addTab", addTabFunc); unsubscribeFromEvent('addTab', addTabFunc);
}; };
}, [tabs]); }, [tabs]);
const setSelectedTabFunc = (e) => { const setSelectedTabFunc = (e) => {
@ -268,7 +266,7 @@ export const AppsDesktop = ({
setSelectedTab(data); setSelectedTab(data);
setTimeout(() => { setTimeout(() => {
executeEvent("setTabsToNav", { executeEvent('setTabsToNav', {
data: { data: {
tabs: tabs, tabs: tabs,
selectedTab: data, selectedTab: data,
@ -280,10 +278,10 @@ export const AppsDesktop = ({
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("setSelectedTab", setSelectedTabFunc); subscribeToEvent('setSelectedTab', setSelectedTabFunc);
return () => { return () => {
unsubscribeFromEvent("setSelectedTab", setSelectedTabFunc); unsubscribeFromEvent('setSelectedTab', setSelectedTabFunc);
}; };
}, [tabs, isNewTabWindow]); }, [tabs, isNewTabWindow]);
@ -291,14 +289,14 @@ export const AppsDesktop = ({
const data = e.detail?.data; const data = e.detail?.data;
const copyTabs = [...tabs].filter((tab) => tab?.tabId !== data?.tabId); const copyTabs = [...tabs].filter((tab) => tab?.tabId !== data?.tabId);
if (copyTabs?.length === 0) { if (copyTabs?.length === 0) {
setMode("home"); setMode('home');
} else { } else {
setSelectedTab(copyTabs[0]); setSelectedTab(copyTabs[0]);
} }
setTabs(copyTabs); setTabs(copyTabs);
setSelectedTab(copyTabs[0]); setSelectedTab(copyTabs[0]);
setTimeout(() => { setTimeout(() => {
executeEvent("setTabsToNav", { executeEvent('setTabsToNav', {
data: { data: {
tabs: copyTabs, tabs: copyTabs,
selectedTab: copyTabs[0], selectedTab: copyTabs[0],
@ -308,10 +306,10 @@ export const AppsDesktop = ({
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("removeTab", removeTabFunc); subscribeToEvent('removeTab', removeTabFunc);
return () => { return () => {
unsubscribeFromEvent("removeTab", removeTabFunc); unsubscribeFromEvent('removeTab', removeTabFunc);
}; };
}, [tabs]); }, [tabs]);
@ -321,10 +319,10 @@ export const AppsDesktop = ({
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("newTabWindow", setNewTabWindowFunc); subscribeToEvent('newTabWindow', setNewTabWindowFunc);
return () => { return () => {
unsubscribeFromEvent("newTabWindow", setNewTabWindowFunc); unsubscribeFromEvent('newTabWindow', setNewTabWindowFunc);
}; };
}, [tabs]); }, [tabs]);
@ -333,24 +331,33 @@ export const AppsDesktop = ({
sx={{ sx={{
position: !show && 'fixed', position: !show && 'fixed',
left: !show && '-200vw', left: !show && '-200vw',
flexDirection: 'row' flexDirection: 'row',
}} }}
> >
<Box <Box
sx={{ sx={{
width: "60px", alignItems: 'center',
flexDirection: "column", display: 'flex',
height: "100vh", flexDirection: 'column',
alignItems: "center", gap: '25px',
display: "flex", height: '100vh',
gap: "25px", width: '60px',
}} }}
> >
<ButtonBase <ButtonBase
sx={{ sx={{
width: "60px", width: '70px',
height: "60px", height: '70px',
paddingTop: "23px", paddingTop: '23px',
}}
>
<CoreSyncStatus />
</ButtonBase>
<ButtonBase
sx={{
width: '60px',
height: '60px',
}} }}
onClick={() => { onClick={() => {
goToHome(); goToHome();
@ -361,7 +368,7 @@ export const AppsDesktop = ({
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setDesktopViewMode("apps"); setDesktopViewMode('apps');
}} }}
> >
<IconWrapper label="Apps" disableWidth> <IconWrapper label="Apps" disableWidth>
@ -371,13 +378,13 @@ export const AppsDesktop = ({
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setDesktopViewMode("chat"); setDesktopViewMode('chat');
}} }}
> >
<IconWrapper <IconWrapper
color={ color={
hasUnreadDirects || hasUnreadGroups hasUnreadDirects || hasUnreadGroups
? "var(--unread)" ? 'var(--unread)'
: theme.palette.text.primary : theme.palette.text.primary
} }
label="Chat" label="Chat"
@ -387,7 +394,7 @@ export const AppsDesktop = ({
height={30} height={30}
color={ color={
hasUnreadDirects || hasUnreadGroups hasUnreadDirects || hasUnreadGroups
? "var(--unread)" ? 'var(--unread)'
: theme.palette.text.primary : theme.palette.text.primary
} }
/> />
@ -434,7 +441,7 @@ export const AppsDesktop = ({
{isEnabledDevMode && ( {isEnabledDevMode && (
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setDesktopViewMode("dev"); setDesktopViewMode('dev');
}} }}
> >
<IconWrapper label="Dev" disableWidth> <IconWrapper label="Dev" disableWidth>
@ -442,21 +449,21 @@ export const AppsDesktop = ({
</IconWrapper> </IconWrapper>
</ButtonBase> </ButtonBase>
)} )}
{mode !== "home" && ( {mode !== 'home' && (
<AppsNavBarDesktop <AppsNavBarDesktop
disableBack={isNewTabWindow && mode === "viewer"} disableBack={isNewTabWindow && mode === 'viewer'}
/> />
)} )}
</Box> </Box>
{mode === "home" && ( {mode === 'home' && (
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
width: "100%", width: '100%',
flexDirection: "column", flexDirection: 'column',
height: "100vh", height: '100vh',
overflow: "auto", overflow: 'auto',
}} }}
> >
<Spacer height="30px" /> <Spacer height="30px" />
@ -471,7 +478,7 @@ export const AppsDesktop = ({
)} )}
<AppsLibraryDesktop <AppsLibraryDesktop
isShow={mode === "library" && !selectedTab} isShow={mode === 'library' && !selectedTab}
availableQapps={availableQapps} availableQapps={availableQapps}
setMode={setMode} setMode={setMode}
myName={myName} myName={myName}
@ -480,19 +487,19 @@ export const AppsDesktop = ({
getQapps={getQapps} getQapps={getQapps}
/> />
{mode === "appInfo" && !selectedTab && ( {mode === 'appInfo' && !selectedTab && (
<AppInfo app={selectedAppInfo} myName={myName} /> <AppInfo app={selectedAppInfo} myName={myName} />
)} )}
{mode === "appInfo-from-category" && !selectedTab && ( {mode === 'appInfo-from-category' && !selectedTab && (
<AppInfo app={selectedAppInfo} myName={myName} /> <AppInfo app={selectedAppInfo} myName={myName} />
)} )}
<AppsCategoryDesktop <AppsCategoryDesktop
availableQapps={availableQapps} availableQapps={availableQapps}
isShow={mode === "category" && !selectedTab} isShow={mode === 'category' && !selectedTab}
category={selectedCategory} category={selectedCategory}
myName={myName} myName={myName}
/> />
{mode === "publish" && !selectedTab && ( {mode === 'publish' && !selectedTab && (
<AppPublish names={myName ? [myName] : []} categories={categories} /> <AppPublish names={myName ? [myName] : []} categories={categories} />
)} )}
{tabs.map((tab) => { {tabs.map((tab) => {
@ -511,15 +518,15 @@ export const AppsDesktop = ({
); );
})} })}
{isNewTabWindow && mode === "viewer" && ( {isNewTabWindow && mode === 'viewer' && (
<> <>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
width: "100%", width: '100%',
flexDirection: "column", flexDirection: 'column',
height: "100vh", height: '100vh',
overflow: "auto", overflow: 'auto',
}} }}
> >
<Spacer height="30px" /> <Spacer height="30px" />

12
src/components/Apps/AppsDevMode.tsx
View File

@ -31,6 +31,7 @@ import { HubsIcon } from '../../assets/Icons/HubsIcon';
import { AppsDevModeNavBar } from './AppsDevModeNavBar'; import { AppsDevModeNavBar } from './AppsDevModeNavBar';
import { AppsIcon } from '../../assets/Icons/AppsIcon'; import { AppsIcon } from '../../assets/Icons/AppsIcon';
import { IconWrapper } from '../Desktop/DesktopFooter'; import { IconWrapper } from '../Desktop/DesktopFooter';
import { CoreSyncStatus } from '../CoreSyncStatus';
const uid = new ShortUniqueId({ length: 8 }); const uid = new ShortUniqueId({ length: 8 });
@ -243,11 +244,20 @@ export const AppsDevMode = ({
gap: '25px', gap: '25px',
}} }}
> >
<ButtonBase
sx={{
width: '70px',
height: '70px',
paddingTop: '23px',
}}
>
<CoreSyncStatus />
</ButtonBase>
<ButtonBase <ButtonBase
sx={{ sx={{
width: '60px', width: '60px',
height: '60px', height: '60px',
paddingTop: '23px',
}} }}
onClick={() => { onClick={() => {
goToHome(); goToHome();

3
src/components/CoreSyncStatus.tsx
View File

@ -73,6 +73,7 @@ export const CoreSyncStatus = () => {
let imagePath = syncingImg; let imagePath = syncingImg;
let message = `Synchronizing`; let message = `Synchronizing`;
if (isMintingPossible && !isUsingGateway) { if (isMintingPossible && !isUsingGateway) {
imagePath = syncedMintingImg; imagePath = syncedMintingImg;
message = `${isSynchronizing ? 'Synchronizing' : 'Synchronized'} ${'(Minting)'}`; message = `${isSynchronizing ? 'Synchronizing' : 'Synchronized'} ${'(Minting)'}`;
@ -101,7 +102,7 @@ export const CoreSyncStatus = () => {
<span> <span>
<img <img
src={imagePath} src={imagePath}
style={{ height: 'auto', width: '24px' }} style={{ height: 'auto', width: '35px' }}
alt="sync status" alt="sync status"
/> />
</span> </span>

34
src/components/Desktop/DesktopFooter.tsx
View File

@ -22,27 +22,27 @@ export const IconWrapper = ({
return ( return (
<Box <Box
sx={{ sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
gap: '5px',
flexDirection: 'column',
height: customWidth ? customWidth : disableWidth ? 'auto' : '89px',
width: customWidth ? customWidth : disableWidth ? 'auto' : '89px',
borderRadius: '50%',
backgroundColor: selected backgroundColor: selected
? theme.palette.background.default ? theme.palette.background.default
: 'transparent', : 'transparent',
borderRadius: '50%',
color: color ? color : theme.palette.text.primary, color: color ? color : theme.palette.text.primary,
display: 'flex',
flexDirection: 'column',
gap: '5px',
height: customWidth ? customWidth : disableWidth ? 'auto' : '89px',
justifyContent: 'center',
width: customWidth ? customWidth : disableWidth ? 'auto' : '89px',
}} }}
> >
{children} {children}
<Typography <Typography
sx={{ sx={{
color: theme.palette.text.primary,
fontFamily: 'Inter', fontFamily: 'Inter',
fontSize: '12px', fontSize: '12px',
fontWeight: 500, fontWeight: 500,
color: theme.palette.text.primary,
}} }}
> >
{label} {label}
@ -68,18 +68,20 @@ export const DesktopFooter = ({
const [isEnabledDevMode, setIsEnabledDevMode] = const [isEnabledDevMode, setIsEnabledDevMode] =
useRecoilState(enabledDevModeAtom); useRecoilState(enabledDevModeAtom);
const theme = useTheme();
if (hide) return; if (hide) return;
return ( return (
<Box <Box
sx={{ sx={{
width: '100%', alignItems: 'center',
position: 'absolute',
bottom: 0, bottom: 0,
display: 'flex', display: 'flex',
alignItems: 'center',
height: '100px', // Footer height height: '100px', // Footer height
zIndex: 1,
justifyContent: 'center', justifyContent: 'center',
position: 'absolute',
width: '100%',
zIndex: 1,
}} }}
> >
<Box <Box
@ -122,8 +124,8 @@ export const DesktopFooter = ({
hasUnreadGroups hasUnreadGroups
? 'var(--danger)' ? 'var(--danger)'
: isGroups : isGroups
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
/> />
</IconWrapper> </IconWrapper>
@ -141,8 +143,8 @@ export const DesktopFooter = ({
hasUnreadDirects hasUnreadDirects
? 'var(--danger)' ? 'var(--danger)'
: isDirects : isDirects
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
/> />
</IconWrapper> </IconWrapper>

53
src/components/DesktopSideBar.tsx
View File

@ -7,6 +7,7 @@ import { useRecoilState } from 'recoil';
import { enabledDevModeAtom } from '../atoms/global'; import { enabledDevModeAtom } from '../atoms/global';
import { AppsIcon } from '../assets/Icons/AppsIcon'; import { AppsIcon } from '../assets/Icons/AppsIcon';
import ThemeSelector from './Theme/ThemeSelector'; import ThemeSelector from './Theme/ThemeSelector';
import { CoreSyncStatus } from './CoreSyncStatus';
export const DesktopSideBar = ({ export const DesktopSideBar = ({
goToHome, goToHome,
@ -30,19 +31,28 @@ export const DesktopSideBar = ({
return ( return (
<Box <Box
sx={{ sx={{
width: '60px',
flexDirection: 'column',
height: '100vh',
alignItems: 'center', alignItems: 'center',
display: 'flex', display: 'flex',
flexDirection: 'column',
gap: '25px', gap: '25px',
height: '100vh',
width: '60px',
}} }}
> >
<ButtonBase
sx={{
width: '70px',
height: '70px',
paddingTop: '23px',
}}
>
<CoreSyncStatus />
</ButtonBase>
<ButtonBase <ButtonBase
sx={{ sx={{
width: '60px', width: '60px',
height: '60px', height: '60px',
paddingTop: '23px',
}} }}
onClick={() => { onClick={() => {
goToHome(); goToHome();
@ -51,10 +61,13 @@ export const DesktopSideBar = ({
<HomeIcon <HomeIcon
height={34} height={34}
color={ color={
desktopViewMode === 'home' ? 'white' : 'rgba(250, 250, 250, 0.5)' desktopViewMode === 'home'
? theme.palette.text.primary
: theme.palette.text.secondary
} }
/> />
</ButtonBase> </ButtonBase>
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setDesktopViewMode('apps'); setDesktopViewMode('apps');
@ -63,17 +76,22 @@ export const DesktopSideBar = ({
}} }}
> >
<IconWrapper <IconWrapper
color={isApps ? 'white' : 'rgba(250, 250, 250, 0.5)'} color={
isApps ? theme.palette.text.primary : theme.palette.text.secondary
}
label="Apps" label="Apps"
selected={isApps} selected={isApps}
disableWidth disableWidth
> >
<AppsIcon <AppsIcon
color={isApps ? 'white' : 'rgba(250, 250, 250, 0.5)'} color={
isApps ? theme.palette.text.primary : theme.palette.text.secondary
}
height={30} height={30}
/> />
</IconWrapper> </IconWrapper>
</ButtonBase> </ButtonBase>
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setDesktopViewMode('chat'); setDesktopViewMode('chat');
@ -98,24 +116,7 @@ export const DesktopSideBar = ({
/> />
</IconWrapper> </IconWrapper>
</ButtonBase> </ButtonBase>
{/* <ButtonBase
onClick={() => {
setDesktopSideView("groups");
toggleSideViewGroups()
}}
>
<HubsIcon
height={30}
color={
hasUnreadGroups
? "var(--danger)"
: isGroups
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/>
</ButtonBase> */}
<Save isDesktop disableWidth myName={myName} /> <Save isDesktop disableWidth myName={myName} />
{/* <CoreSyncStatus imageSize="30px" position="left" /> */} {/* <CoreSyncStatus imageSize="30px" position="left" /> */}
{isEnabledDevMode && ( {isEnabledDevMode && (
@ -126,7 +127,9 @@ export const DesktopSideBar = ({
> >
<IconWrapper <IconWrapper
color={ color={
desktopViewMode === 'dev' ? 'white' : 'rgba(250, 250, 250, 0.5)' desktopViewMode === 'dev'
? theme.palette.text.primary
: theme.palette.text.secondary
} }
label="Dev" label="Dev"
disableWidth disableWidth