smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

More performance updates

Browse Source
This commit is contained in:
Sean Edmunds
2026-01-09 12:45:40 -06:00
parent 3307bcefc9
commit 924b42a567
31 changed files with 227 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -22,7 +22,7 @@ import { useEffect, useState } from 'react';
import * as fa6 from 'react-icons/fa6';
import * as si from 'react-icons/si';
import * as vsc from 'react-icons/vsc';
import { popoverClasses, selectClasses, textInputClasses } from 'styles';
import { buttonClasses, popoverClasses, selectClasses, textInputClasses } from 'styles';
import type { Application } from 'types';
import DebouncedApplication from './DebouncedApplication';
@@ -281,12 +281,16 @@ const ApplicationSettings = () => {
/>
</Group>
<Group mt={'1rem'}>
<Button type='submit' color={'green'}>
<Button
type='submit'
className={buttonClasses.saveButton}
classNames={buttonClasses}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
className={buttonClasses.cancelButton}
classNames={buttonClasses}
onClick={handleClose}
>
Cancel

12
src/pages/settings/components/Bookmarks/Bookmarks.tsx
View File

@@ -14,7 +14,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textInputClasses } from 'styles';
import { buttonClasses, textInputClasses } from 'styles';
import type { Bookmark, BookmarkGroup } from 'types';
import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem';
@@ -175,12 +175,16 @@ const BookmarkSettings = () => {
/>
</Group>
<Group mt={'1rem'}>
<Button type='submit' color={'green'}>
<Button
type='submit'
className={buttonClasses.saveButton}
classNames={buttonClasses}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
className={buttonClasses.cancelButton}
classNames={buttonClasses}
onClick={handleClose}
>
Cancel

10
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -420,12 +420,16 @@ function DebouncedGroupSettingsItem({
align='center'
justify='center'
>
<Button type='submit' color={'green'}>
<Button
type='submit'
className={buttonClasses.saveButton}
classNames={buttonClasses}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
className={buttonClasses.cancelButton}
classNames={buttonClasses}
onClick={() => {
setPopoverOpened(false);
form.reset();

20
src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx
View File

@@ -15,10 +15,10 @@ import { isNotEmpty, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { FaTerminal } from 'react-icons/fa';
import { FaComputer, FaDesktop } from 'react-icons/fa6';
import { popoverClasses, selectClasses, textInputClasses } from 'styles';
import { buttonClasses, popoverClasses, selectClasses, textInputClasses } from 'styles';
import type { GuacamoleClient } from 'types';
import DebouncedGuacamoleClient from './DebouncedGuacamoleClient';
import GuacamoleClientSettingsItem from './GuacamoleClientSettingsItem';
@@ -65,6 +65,12 @@ const GuacamoleClients = () => {
form.reset();
};
useEffect(() => {
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [debouncedSearch]);
return (
<Stack>
<AddItemModal
@@ -169,12 +175,16 @@ const GuacamoleClients = () => {
/>
</Group>
<Group mt={'1rem'}>
<Button type='submit' color={'green'}>
<Button
type='submit'
className={buttonClasses.saveButton}
classNames={buttonClasses}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
className={buttonClasses.cancelButton}
classNames={buttonClasses}
onClick={handleClose}
>
Cancel

18
src/pages/settings/components/Messages/Messages.tsx
View File

@@ -12,7 +12,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textInputClasses } from 'styles';
import { buttonClasses, textInputClasses } from 'styles';
import type { Message } from 'types';
import DebouncedMessage from './DebouncedMessage';
@@ -53,6 +53,12 @@ const MessageSettings = () => {
}
}, [debounced]);
useEffect(() => {
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [debouncedSearch]);
return (
<Stack w={'100%'}>
<SettingsHeader
@@ -112,12 +118,16 @@ const MessageSettings = () => {
}
/>
<Group mt={'1rem'}>
<Button type='submit' color={'green'}>
<Button
type='submit'
className={buttonClasses.saveButton}
classNames={buttonClasses}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
className={buttonClasses.cancelButton}
classNames={buttonClasses}
onClick={handleClose}
>
Cancel

14
src/pages/settings/components/Personalization/Personalization.tsx
View File

@@ -17,25 +17,15 @@ import type { PersonalData } from 'types';
const PersonalizationSettings = () => {
const endpoint = 'api/personalData';
const {
data: personalData,
isFetched: personalDataIsFetched,
isFetching: personalDataIsFetching,
} = useQueryAPI({
const { data: personalData, isFetching: personalDataIsFetching } = useQueryAPI({
endpoint: endpoint,
});
const [personal, setPersonal] = useState<PersonalData>();
const [personal, setPersonal] = useState<PersonalData>(personalData?.[0] || {});
const [update, setUpdate] = useState<any>({});
const [debounced] = useDebouncedValue(update, 1000);
const { mutateAsync } = useMutationAPI();
const { isMobile, theme } = useCommonHooks();
useEffect(() => {
if (personalData && personalDataIsFetched) {
setPersonal(personalData[0]);
}
}, [personalData, personalDataIsFetched]);
useEffect(() => {
if (Object.keys(debounced).length) {
setPersonal(update);

1
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
View File

@@ -77,6 +77,7 @@ function DebouncedSearchProvider({
position: 'absolute',
right: '1rem',
top: '.5rem',
zIndex: 1,
}}
>
<ManagementPill

11
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -24,6 +24,7 @@ import { FiPower } from 'react-icons/fi';
import * as si from 'react-icons/si';
import * as vsc from 'react-icons/vsc';
import {
buttonClasses,
popoverClasses,
selectClasses,
switchClasses,
@@ -236,12 +237,16 @@ const SearchProviderSettings = () => {
</Group>
<Group mt={'1rem'}>
<Button type='submit' color={'green'}>
<Button
type='submit'
className={buttonClasses.saveButton}
classNames={buttonClasses}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
className={buttonClasses.cancelButton}
classNames={buttonClasses}
onClick={handleClose}
>
Cancel

4
src/pages/settings/components/Theming/Backgrounds/components/AddBackground.tsx
View File

@@ -1,5 +1,6 @@
import { Button, Card, FileInput, Group, Image, Stack, TextInput } from '@mantine/core';
import { useFileUploadAPI } from 'hooks/useAPI';
import { buttonClasses } from 'styles';
export function AddBackground({
fileName,
@@ -131,7 +132,8 @@ export function AddBackground({
Upload
</Button>
<Button
color='var(--mantine-color-red-6)'
className={buttonClasses.cancelButton}
classNames={buttonClasses}
onClick={() => {
handleAddBackgroundModalClose();
}}

8
src/pages/settings/components/Theming/Backgrounds/components/DeleteBackground.tsx
View File

@@ -1,5 +1,6 @@
import { Button, Card, Group, Stack, Text } from '@mantine/core';
import { useMutationAPI } from 'hooks';
import { buttonClasses } from 'styles';
export function DeleteBackground({
fileName,
@@ -63,7 +64,12 @@ export function DeleteBackground({
>
DELETE
</Button>
<Button mt={'auto'} onClick={handleDeleteBackgroundModalClose}>
<Button
className={buttonClasses.cancelButton}
classNames={buttonClasses}
mt={'auto'}
onClick={handleDeleteBackgroundModalClose}
>
Cancel
</Button>
</Group>

8
src/pages/settings/components/Theming/Backgrounds/components/EditBackground.tsx
View File

@@ -1,7 +1,7 @@
import { Button, Group, Image, Stack, Text, TextInput } from '@mantine/core';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useState } from 'react';
import { textInputClasses } from 'styles';
import { buttonClasses, textInputClasses } from 'styles';
export function EditBackground({
fileName,
@@ -54,7 +54,8 @@ export function EditBackground({
<Group>
<Button
mt={'auto'}
color='green'
className={buttonClasses.saveButton}
classNames={buttonClasses}
onClick={() => {
if (
!rename.endsWith('.png') &&
@@ -88,8 +89,9 @@ export function EditBackground({
Save
</Button>
<Button
className={buttonClasses.cancelButton}
classNames={buttonClasses}
mt={'auto'}
color={'var(--mantine-color-red-6)'}
onClick={handleEditBackgroundModalClose}
>
Cancel

13
src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistModal.tsx
View File

@@ -2,7 +2,7 @@ import { Button, Group, Modal, Text, TextInput } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useEffect, useState } from 'react';
import { FaTag } from 'react-icons/fa';
import { modalClasses, textInputClasses } from 'styles';
import { buttonClasses, modalClasses, textInputClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import { ThemePreviewMiddleware } from '../../Themes';
import { TimeOfDay } from './TimeOfDay';
@@ -115,12 +115,17 @@ export function ThemePlaylistModal({
})}
</Group>
<Group mt={'1rem'}>
<Button color={'green'} onClick={handleSavePlaylist}>
<Button
color={'green'}
className={buttonClasses.saveButton}
classNames={buttonClasses}
onClick={handleSavePlaylist}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
className={buttonClasses.cancelButton}
classNames={buttonClasses}
onClick={() => {
handleClose();
setThemeList('[]');

8
src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeEditor.tsx
View File

@@ -19,6 +19,7 @@ import { useRef, useState } from 'react';
import { FaShuffle } from 'react-icons/fa6';
import { FiImage, FiSave, FiShuffle, FiX } from 'react-icons/fi';
import {
buttonClasses,
colorSwatchClasses,
scrollAreaClasses,
textClasses,
@@ -657,14 +658,15 @@ export function ThemeEditor({
<Group>
<Button
disabled={JSON.stringify(defaultTheme) === JSON.stringify(selectedTheme)}
color={'green'}
className={buttonClasses.saveButton}
classNames={buttonClasses}
onClick={handleSaveTheme}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
className={buttonClasses.cancelButton}
classNames={buttonClasses}
onClick={() => {
handleClose();
closeBackgroundPicker();

20
src/pages/settings/components/Theming/Themes/Themes.tsx
View File

@@ -33,11 +33,7 @@ export function Themes() {
const allThemes: Theme[] = allThemeData?.filter((a: Theme) =>
a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
);
const {
data: backgroundData,
isFetched: backgroundDataIsFetched,
isFetching: backgroundDataIsFetching,
} = useQueryAPI({
const { data: backgroundData, isFetching: backgroundDataIsFetching } = useQueryAPI({
endpoint: backgroundsEndpoint,
});
const { data: themePlaylistData } = useQueryAPI({
@@ -50,7 +46,9 @@ export function Themes() {
backgroundModalOpened,
{ open: openBackgroundModal, close: closeBackgroundModal },
] = useDisclosure(false);
const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
const backgroundList = backgroundData
? ['None', ...backgroundData.sort((a: string, b: string) => a.localeCompare(b))]
: ['None'];
const inUseBackgrounds: string[] = [
...new Set(
allThemes
@@ -76,6 +74,7 @@ export function Themes() {
textShadowsEnabled: 0,
appShadowsEnabled: 0,
});
const [isLoading, setIsLoading] = useState(false);
const [isNew, setIsNew] = useState(false);
const navigate = useNavigate();
@@ -93,15 +92,6 @@ export function Themes() {
openThemeModal();
};
useEffect(() => {
if (backgroundData && backgroundDataIsFetched) {
setBackgroundList([
'None',
...backgroundData.sort((a: string, b: string) => a.localeCompare(b)),
]);
}
}, [backgroundData, backgroundDataIsFetched]);
useEffect(() => {
if (debouncedSearch === searchValue) {
setIsLoading(false);

12
src/pages/settings/components/WoL/WolClients.tsx
View File

@@ -13,7 +13,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { popoverClasses, textInputClasses } from 'styles';
import { buttonClasses, popoverClasses, textInputClasses } from 'styles';
import type { WolClient } from 'types';
import DebouncedWolClient from './DebouncedWolClient';
import WolClientSettingsItem from './WolClientSettingsItem';
@@ -116,12 +116,16 @@ const WolClientSettings = () => {
/>
</Group>
<Group mt={'1rem'}>
<Button type='submit' color={'green'}>
<Button
type='submit'
className={buttonClasses.saveButton}
classNames={buttonClasses}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
className={buttonClasses.cancelButton}
classNames={buttonClasses}
onClick={handleClose}
>
Cancel