From 407b304e0ba5cb5dd88c0b9ba67c65bd2728b120 Mon Sep 17 00:00:00 2001 From: itschip Date: Sun, 31 Mar 2024 23:42:53 +0200 Subject: [PATCH] refactor(apps/phone): remove dynamic loading of icons --- apps/phone/src/os/apps/config/apps.tsx | 27 ++++++++++++++++++++++++ apps/phone/src/os/apps/hooks/useApps.tsx | 12 +++-------- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/apps/phone/src/os/apps/config/apps.tsx b/apps/phone/src/os/apps/config/apps.tsx index bc382a5ef..e8bb1a7a9 100644 --- a/apps/phone/src/os/apps/config/apps.tsx +++ b/apps/phone/src/os/apps/config/apps.tsx @@ -42,6 +42,19 @@ import { DARKCHAT_APP_TEXT_COLOR, } from '@apps/darkchat/darkchat.theme'; import DarkChatApp from '../../../apps/darkchat/DarkChatApp'; +import DialerAppIcon from '../icons/material/app/DIALER'; +import BrowserIcon from '../icons/material/app/BROWSER'; +import MessagesIcon from '../icons/material/app/MESSAGES'; +import DarkchatIcon from '../icons/material/app/DARKCHAT'; +import ContactIcon from '../icons/material/app/CONTACTS'; +import Calculator from '../icons/material/app/CALCULATOR'; +import SettingsIcon from '../icons/material/app/SETTINGS'; +import MatchIcon from '../icons/material/app/MATCH'; +import TwitterIcon from '../icons/material/app/TWITTER'; +import MarketplaceIcon from '../icons/material/app/MARKETPLACE'; +import NotesIcon from '../icons/material/app/NOTES'; +import Camera from '../icons/material/app/CAMERA'; +import ExampleIcon from '../icons/material/app/EXAMPLE'; export interface IAppConfig { id: string; @@ -51,6 +64,7 @@ export interface IAppConfig { path: string; disable?: boolean; Route: React.FC<{ settings?: IPhoneSettings; i18n?: i18n; theme?: Theme }>; + icon: JSX.Element; } export type IApp = IAppConfig & { @@ -68,6 +82,7 @@ export const APPS: IAppConfig[] = [ id: 'DIALER', nameLocale: 'APPS_DIALER', backgroundColor: DIALER_APP_PRIMARY_COLOR, + icon: , color: DIALER_APP_TEXT_COLOR, path: '/phone', Route: () => , @@ -77,6 +92,7 @@ export const APPS: IAppConfig[] = [ nameLocale: 'BROWSER.NAME', backgroundColor: blue['300'], path: '/browser', + icon: , color: common.white, Route: () => ( @@ -85,6 +101,7 @@ export const APPS: IAppConfig[] = [ { id: 'MESSAGES', nameLocale: 'APPS_MESSAGES', + icon: , backgroundColor: MESSAGES_APP_PRIMARY_COLOR, color: MESSAGES_APP_TEXT_COLOR, path: '/messages', @@ -95,6 +112,7 @@ export const APPS: IAppConfig[] = [ { id: 'DARKCHAT', nameLocale: 'APPS_DARKCHAT', + icon: , backgroundColor: DARKCHAT_APP_PRIMARY_COLOR, color: DARKCHAT_APP_TEXT_COLOR, path: '/darkchat', @@ -106,6 +124,7 @@ export const APPS: IAppConfig[] = [ id: 'CONTACTS', nameLocale: 'APPS_CONTACTS', backgroundColor: CONTACTS_APP_PRIMARY_COLOR, + icon: , color: CONTACTS_APP_TEXT_COLOR, path: '/contacts', Route: () => ( @@ -115,6 +134,7 @@ export const APPS: IAppConfig[] = [ { id: 'CALCULATOR', nameLocale: 'APPS_CALCULATOR', + icon: , backgroundColor: purple[500], color: grey[50], path: '/calculator', @@ -125,6 +145,7 @@ export const APPS: IAppConfig[] = [ { id: 'SETTINGS', nameLocale: 'APPS_SETTINGS', + icon: , backgroundColor: '#383838', color: grey[50], path: '/settings', @@ -135,6 +156,7 @@ export const APPS: IAppConfig[] = [ { id: 'MATCH', nameLocale: 'APPS_MATCH', + icon: , backgroundColor: MATCH_APP_PRIMARY_COLOR, color: MATCH_APP_TEXT_COLOR, path: '/match', @@ -143,6 +165,7 @@ export const APPS: IAppConfig[] = [ { id: 'TWITTER', nameLocale: 'APPS_TWITTER', + icon: , backgroundColor: TWITTER_APP_PRIMARY_COLOR, color: TWITTER_APP_TEXT_COLOR, path: '/twitter', @@ -153,6 +176,7 @@ export const APPS: IAppConfig[] = [ { id: 'MARKETPLACE', nameLocale: 'APPS_MARKETPLACE', + icon: , backgroundColor: MARKETPLACE_APP_PRIMARY_COLOR, color: MARKETPLACE_APP_ICON_COLOR, path: '/marketplace', @@ -168,6 +192,7 @@ export const APPS: IAppConfig[] = [ { id: 'NOTES', nameLocale: 'APPS_NOTES', + icon: , backgroundColor: NOTES_APP_PRIMARY_COLOR, color: NOTES_APP_ICON_COLOR, path: '/notes', @@ -176,6 +201,7 @@ export const APPS: IAppConfig[] = [ { id: 'CAMERA', nameLocale: 'APPS_CAMERA', + icon: , backgroundColor: grey['A400'], color: common.white, path: '/camera', @@ -188,6 +214,7 @@ if (import.meta.env.DEV) { APPS.push({ id: 'EXAMPLE', nameLocale: 'APPS_EXAMPLE', + icon: , backgroundColor: blue[500], color: blue[50], path: '/example', diff --git a/apps/phone/src/os/apps/hooks/useApps.tsx b/apps/phone/src/os/apps/hooks/useApps.tsx index 8def3ed47..95b4fc610 100644 --- a/apps/phone/src/os/apps/hooks/useApps.tsx +++ b/apps/phone/src/os/apps/hooks/useApps.tsx @@ -6,16 +6,11 @@ import { SvgIconComponent } from '@mui/icons-material'; import { useTheme } from '@mui/material'; import { useSettingsValue } from '../../../apps/settings/hooks/useSettings'; import { IconSetObject } from '@typings/settings'; -import { useRecoilValue } from 'recoil'; -import { phoneState } from '@os/phone/hooks/state'; -import { usePhone } from '@os/phone/hooks'; export const useApps = () => { const { icons } = useNotifications(); const theme = useTheme(); const curIconSet = useSettingsValue().iconSet.value as IconSetObject; - const externalApps = useRecoilValue(phoneState.extApps); - const { ResourceConfig } = usePhone(); const apps: IApp[] = useMemo(() => { return APPS.map((app) => { @@ -52,13 +47,12 @@ export const useApps = () => { notification: icons.find((i) => i.key === app.id), NotificationIcon, notificationIcon: , - icon: , isDisabled: app.disable, }; }); }, [icons, curIconSet, theme]); - const allApps = useMemo(() => [...apps, ...externalApps], [apps, externalApps]); + const allApps = useMemo(() => [...apps], [apps]); const getApp = useCallback( (id: string): IApp => { return allApps.find((a) => a.id === id) || null; @@ -66,8 +60,8 @@ export const useApps = () => { [allApps], ); - const filteredApps = apps.filter((app) => !ResourceConfig?.disabledApps.includes(app.id)); - return { apps: filteredApps, getApp }; + //const filteredApps = apps.filter((app) => !ResourceConfig?.disabledApps.includes(app.id)); + return { apps, getApp }; }; export const useApp = (id: string): IApp => {