Use desktop file

This commit is contained in:
Nicola Benaglia 2025-04-20 13:53:57 +02:00
parent 2f7a04c6b1
commit b5a9620dc4
2 changed files with 67 additions and 53 deletions

View File

@ -1,3 +1,4 @@
import React, { useEffect, useMemo, useState } from 'react';
import { import {
AppCircle, AppCircle,
AppCircleContainer, AppCircleContainer,
@ -17,9 +18,11 @@ import {
AppsLibraryContainer, AppsLibraryContainer,
AppsWidthLimiter, AppsWidthLimiter,
} from './Apps-styles'; } from './Apps-styles';
import { Avatar, Box } from '@mui/material'; import { Avatar, Box, ButtonBase, InputBase } from '@mui/material';
import { getBaseApiReact } from '../../App'; import { Add } from '@mui/icons-material';
import { getBaseApiReact, isMobile } from '../../App';
import LogoSelected from '../../assets/svgs/LogoSelected.svg'; import LogoSelected from '../../assets/svgs/LogoSelected.svg';
import { Spacer } from '../../common/Spacer'; import { Spacer } from '../../common/Spacer';
import { executeEvent } from '../../utils/events'; import { executeEvent } from '../../utils/events';
import { AppRating } from './AppRating'; import { AppRating } from './AppRating';
@ -27,7 +30,7 @@ import {
settingsLocalLastUpdatedAtom, settingsLocalLastUpdatedAtom,
sortablePinnedAppsAtom, sortablePinnedAppsAtom,
} from '../../atoms/global'; } from '../../atoms/global';
import { saveToLocalStorage } from './AppsNavBar'; import { saveToLocalStorage } from './AppsNavBarDesktop';
import { useRecoilState, useSetRecoilState } from 'recoil'; import { useRecoilState, useSetRecoilState } from 'recoil';
export const AppInfo = ({ app, myName }) => { export const AppInfo = ({ app, myName }) => {
@ -46,8 +49,9 @@ export const AppInfo = ({ app, myName }) => {
return ( return (
<AppsLibraryContainer <AppsLibraryContainer
sx={{ sx={{
height: '100%', height: !isMobile && '100%',
justifyContent: 'flex-start', justifyContent: !isMobile && 'flex-start',
alignItems: isMobile && 'center',
}} }}
> >
<Box <Box
@ -58,8 +62,7 @@ export const AppInfo = ({ app, myName }) => {
width: '90%', width: '90%',
}} }}
> >
<Spacer height="30px" /> {!isMobile && <Spacer height="30px" />}
<AppsWidthLimiter> <AppsWidthLimiter>
<AppInfoSnippetContainer> <AppInfoSnippetContainer>
<AppInfoSnippetLeft <AppInfoSnippetLeft
@ -167,9 +170,15 @@ export const AppInfo = ({ app, myName }) => {
}} }}
> >
<AppDownloadButtonText> <AppDownloadButtonText>
{isSelectedAppPinned {!isMobile ? (
? 'Unpin from dashboard' <>
: 'Pin to dashboard'} {isSelectedAppPinned
? 'Unpin from dashboard'
: 'Pin to dashboard'}
</>
) : (
<>{isSelectedAppPinned ? 'Unpin' : 'Pin'}</>
)}
</AppDownloadButtonText> </AppDownloadButtonText>
</AppDownloadButton> </AppDownloadButton>
<AppDownloadButton <AppDownloadButton

View File

@ -1,3 +1,4 @@
import React from 'react';
import { import {
AppCircle, AppCircle,
AppCircleContainer, AppCircleContainer,
@ -11,8 +12,9 @@ import {
AppInfoUserName, AppInfoUserName,
} from './Apps-styles'; } from './Apps-styles';
import { Avatar, ButtonBase } from '@mui/material'; import { Avatar, ButtonBase } from '@mui/material';
import { getBaseApiReact } from '../../App'; import { getBaseApiReact, isMobile } from '../../App';
import LogoSelected from '../../assets/svgs/LogoSelected.svg'; import LogoSelected from '../../assets/svgs/LogoSelected.svg';
import { Spacer } from '../../common/Spacer'; import { Spacer } from '../../common/Spacer';
import { executeEvent } from '../../utils/events'; import { executeEvent } from '../../utils/events';
import { AppRating } from './AppRating'; import { AppRating } from './AppRating';
@ -21,7 +23,7 @@ import {
settingsLocalLastUpdatedAtom, settingsLocalLastUpdatedAtom,
sortablePinnedAppsAtom, sortablePinnedAppsAtom,
} from '../../atoms/global'; } from '../../atoms/global';
import { saveToLocalStorage } from './AppsNavBar'; import { saveToLocalStorage } from './AppsNavBarDesktop';
export const AppInfoSnippet = ({ export const AppInfoSnippet = ({
app, app,
@ -122,49 +124,52 @@ export const AppInfoSnippet = ({
gap: '10px', gap: '10px',
}} }}
> >
<AppDownloadButton {!isMobile && (
onClick={() => { <AppDownloadButton
setSortablePinnedApps((prev) => { onClick={() => {
let updatedApps; setSortablePinnedApps((prev) => {
let updatedApps;
if (isSelectedAppPinned) { if (isSelectedAppPinned) {
// Remove the selected app if it is pinned // Remove the selected app if it is pinned
updatedApps = prev.filter( updatedApps = prev.filter(
(item) => (item) =>
!( !(
item?.name === app?.name && item?.service === app?.service item?.name === app?.name &&
) item?.service === app?.service
)
);
} else {
// Add the selected app if it is not pinned
updatedApps = [
...prev,
{
name: app?.name,
service: app?.service,
},
];
}
saveToLocalStorage(
'ext_saved_settings',
'sortablePinnedApps',
updatedApps
); );
} else { return updatedApps;
// Add the selected app if it is not pinned });
updatedApps = [ setSettingsLocalLastUpdated(Date.now());
...prev, }}
{ sx={{
name: app?.name, backgroundColor: '#359ff7ff',
service: app?.service, opacity: isSelectedAppPinned ? 0.6 : 1,
}, }}
]; >
} <AppDownloadButtonText>
{' '}
saveToLocalStorage( {isSelectedAppPinned ? 'Unpin' : 'Pin'}
'ext_saved_settings', </AppDownloadButtonText>
'sortablePinnedApps', </AppDownloadButton>
updatedApps )}
);
return updatedApps;
});
setSettingsLocalLastUpdated(Date.now());
}}
sx={{
backgroundColor: '#359ff7ff',
opacity: isSelectedAppPinned ? 0.6 : 1,
}}
>
<AppDownloadButtonText>
{' '}
{isSelectedAppPinned ? 'Unpin' : 'Pin'}
</AppDownloadButtonText>
</AppDownloadButton>
<AppDownloadButton <AppDownloadButton
onClick={() => { onClick={() => {