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

Standardization

Browse Source
This commit is contained in:
Sean Edmunds
2025-11-11 16:04:34 -06:00
parent 0397c0e1b0
commit 8794422a47
24 changed files with 365 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/homepage/components/SettingsButton/SettingsCard.tsx
View File

@@ -61,7 +61,7 @@ function SettingsCard({
{sectionTitle}
</Text>
<Group w={'100%'} justify='center'>
<Stack w={scale !== undefined ? '60%' : '90%'} align='center'>
<Stack w={scale === undefined ? '90%' : '60%'} align='center'>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>

12
src/pages/homepage/components/SettingsButton/ThemingCard.tsx
View File

@@ -58,11 +58,11 @@ function ThemingCard() {
});
useEffect(() => {
if (theme.name !== current) {
start();
} else {
if (theme.name === current) {
setCurrent(theme.name);
stop();
} else {
start();
}
}, [theme]);
@@ -215,9 +215,7 @@ function ThemingCard() {
}
onChange={(_value, option: ComboboxItem) => {
setCurrentThemePlaylist(option.value);
if (option.value !== 'Time of Day') {
setThemeName('random');
} else {
if (option.value === 'Time of Day') {
const themeList = JSON.parse(
themePlaylistData.find((t: ThemePlaylist) => t.name === 'Time of Day')
.themeList,
@@ -228,6 +226,8 @@ function ThemingCard() {
t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
).name,
);
} else {
setThemeName('random');
}
}}
/>

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

@@ -7,6 +7,7 @@ import {
Grid,
GridCol,
Group,
LoadingOverlay,
Popover,
Select,
Stack,
@@ -48,7 +49,11 @@ const ApplicationSettings = () => {
});
const appsEndpoint = 'api/applications';
const appsOrderEndpoint = 'api/applicationOrder';
const { data: applicationData, isFetching: isAppsFetching } = useQueryAPI({
const {
data: applicationData,
isFetched: applicationDataIsFetched,
isFetching: applicationDataIsFetching,
} = useQueryAPI({
endpoint: appsEndpoint,
});
const [applications, setApplications] = useState<Application[]>([]);
@@ -88,7 +93,7 @@ const ApplicationSettings = () => {
form.reset();
};
useEffect(() => {
if (applicationData && !isAppsFetching) {
if (applicationData && applicationDataIsFetched) {
setApplications(
applicationData
.filter(
@@ -103,7 +108,7 @@ const ApplicationSettings = () => {
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [applicationData, isAppsFetching, debouncedSearch]);
}, [applicationData, applicationDataIsFetched, debouncedSearch]);
useEffect(() => {
if (applicationList.length > 0 && applicationList !== applications) {
@@ -305,6 +310,16 @@ const ApplicationSettings = () => {
mb={isMobile ? '6rem' : '1rem'}
align='center'
>
<LoadingOverlay
visible={applicationDataIsFetching}
zIndex={180}
overlayProps={{ blur: 5 }}
loaderProps={{
color: 'var(--mantine-color-primary-0)',
type: 'bars',
size: 'xl',
}}
/>
{applications.length > 0 ? (
<Droppable droppableId={'groupList'}>
{(provided) => (

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

@@ -1,5 +1,14 @@
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import { Box, Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
import {
Box,
Button,
Card,
Group,
LoadingOverlay,
Stack,
Text,
TextInput,
} from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
@@ -24,7 +33,11 @@ const BookmarkSettings = () => {
},
});
const bookmarksEndpoint = 'api/bookmarks';
const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
const {
data: bookmarkData,
isFetched: bookmarkDataIsFetched,
isFetching: bookmarkDataIsFetching,
} = useQueryAPI({
endpoint: bookmarksEndpoint,
});
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
@@ -68,10 +81,10 @@ const BookmarkSettings = () => {
}
useEffect(() => {
if (bookmarkData && bookmarksIsFetched) {
if (bookmarkData && bookmarkDataIsFetched) {
setBookmarks(bookmarkData);
}
}, [bookmarksIsFetched, bookmarkData]);
}, [bookmarkDataIsFetched, bookmarkData]);
useEffect(() => {
if (groupData && groupsIsFetched) {
@@ -83,12 +96,11 @@ const BookmarkSettings = () => {
a.name.toLowerCase().includes(debouncedGroupSearch.toLowerCase()) ||
a.url.toLowerCase().includes(debouncedGroupSearch.toLowerCase()),
)
.map(
(a: Bookmark) =>
groupData.filter(
(b: BookmarkGroup) =>
b.categoryName.toLowerCase() === a.category.toLowerCase(),
)[0],
.map((a: Bookmark) =>
groupData.find(
(b: BookmarkGroup) =>
b.categoryName.toLowerCase() === a.category.toLowerCase(),
),
),
),
];
@@ -300,6 +312,16 @@ const BookmarkSettings = () => {
mb={isMobile ? '6rem' : '1rem'}
align='center'
>
<LoadingOverlay
visible={bookmarkDataIsFetching}
zIndex={180}
overlayProps={{ blur: 5 }}
loaderProps={{
color: 'var(--mantine-color-primary-0)',
type: 'bars',
size: 'xl',
}}
/>
<Group w={isMobile ? undefined : '80%'} align='start' justify='center'>
{groups.length > 0 ? (
groups?.map((group: BookmarkGroup) => (

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

@@ -1,4 +1,12 @@
import { Button, Grid, GridCol, Group, Stack, TextInput } from '@mantine/core';
import {
Button,
Grid,
GridCol,
Group,
LoadingOverlay,
Stack,
TextInput,
} from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
@@ -10,7 +18,11 @@ import DebouncedMessage from './DebouncedMessage';
const MessageSettings = () => {
const endpoint = 'api/messages';
const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({
const {
data: messageData,
isFetched: messageDataIsFetched,
isFetching: messageDataIsFetching,
} = useQueryAPI({
endpoint: endpoint,
});
const form = useForm({
@@ -37,7 +49,7 @@ const MessageSettings = () => {
};
useEffect(() => {
if (messageData && isMessagesFetched) {
if (messageData && messageDataIsFetched) {
setMessages(
messageData.filter((m: Message) =>
m.message.toLowerCase().includes(debouncedSearch.toLowerCase()),
@@ -47,7 +59,7 @@ const MessageSettings = () => {
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [messageData, isMessagesFetched, debouncedSearch]);
}, [messageData, messageDataIsFetched, debouncedSearch]);
useEffect(() => {
if (Object.keys(debounced).length) {
@@ -133,7 +145,18 @@ const MessageSettings = () => {
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : undefined}
align='center'
pos={'relative'}
>
<LoadingOverlay
visible={messageDataIsFetching}
zIndex={180}
overlayProps={{ blur: 5 }}
loaderProps={{
color: 'var(--mantine-color-primary-0)',
type: 'bars',
size: 'xl',
}}
/>
<Grid w={'75%'}>
{messages.length > 0 ? (
messages?.map((message: Message) => (

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

@@ -1,4 +1,4 @@
import { Card, Grid, GridCol, Overlay, Stack, TextInput } from '@mantine/core';
import { Card, Grid, GridCol, LoadingOverlay, Stack, TextInput } from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks';
import { SettingsHeader } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -10,8 +10,8 @@ const PersonalizationSettings = () => {
const endpoint = 'api/personalData';
const {
data: personalData,
isFetched: personalIsFetched,
isFetching: personalIsFetching,
isFetched: personalDataIsFetched,
isFetching: personalDataIsFetching,
} = useQueryAPI({
endpoint: endpoint,
});
@@ -22,10 +22,10 @@ const PersonalizationSettings = () => {
const { isMobile, theme } = useCommonHooks();
useEffect(() => {
if (personalData && personalIsFetched) {
if (personalData && personalDataIsFetched) {
setPersonal(personalData[0]);
}
}, [personalData, personalIsFetched]);
}, [personalData, personalDataIsFetched]);
useEffect(() => {
if (Object.keys(debounced).length) {
@@ -66,17 +66,18 @@ const PersonalizationSettings = () => {
isLoading={false}
setIsLoading={() => {}}
/>
<Stack align='center' mt={'6rem'}>
<Stack align='center' mt={'6rem'} pos={'relative'}>
<LoadingOverlay
visible={personalDataIsFetching}
zIndex={180}
overlayProps={{ blur: 5 }}
loaderProps={{
color: 'var(--mantine-color-primary-0)',
type: 'bars',
size: 'xl',
}}
/>
<Grid w={'75%'}>
{personalIsFetching && (
<Overlay
style={{
borderRadius: '10px',
margin: '-.5rem',
backdropFilter: 'blur(5px) brightness(1.2)',
}}
/>
)}
<GridCol span={isMobile ? 12 : 4}>
<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}>
<TextInput

9
src/pages/settings/components/Search/SearchHistory.tsx
View File

@@ -9,7 +9,11 @@ import type { SearchHistoryItem } from 'types';
const SearchHistory = () => {
const searchEndpoint = 'api/searchHistory';
const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
const {
data: historyData,
isFetched: historyDataIsFetched,
isFetching: historyDataIsFetching,
} = useQueryAPI({
endpoint: searchEndpoint,
});
const [searchHistory, setSearchHistory] = useState<SearchHistoryItem[]>([]);
@@ -92,7 +96,7 @@ const SearchHistory = () => {
align='center'
>
<Stack h={'calc(100vh - 14rem)'} w={'100%'} p={'1rem'} pt={0} mt={'1rem'} gap={0}>
<Stack style={{ overflow: 'scroll', whiteSpace: 'none' }}>
<Stack h={'inherit'} style={{ overflow: 'scroll', whiteSpace: 'none' }}>
<DataTable
data={searchHistory}
columns={SearchHistoryColumns(
@@ -106,6 +110,7 @@ const SearchHistory = () => {
filtersEnabled={filtersEnabled}
globalFilter={globalFilter}
setGlobalFilter={setGlobalFilter}
isRefreshing={historyDataIsFetching}
/>
</Stack>
</Stack>

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

@@ -6,6 +6,7 @@ import {
Grid,
GridCol,
Group,
LoadingOverlay,
Popover,
Select,
Stack,
@@ -51,11 +52,15 @@ const SearchProviderSettings = () => {
},
});
const endpoint = 'api/providers';
const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
const {
data: providerData,
isFetched: providerDataIsFetched,
isFetching: providerDataIsFetching,
} = useQueryAPI({
endpoint: endpoint,
});
const [providers, setProviders] = useState<Provider[]>([]);
const { isMobile, theme, filter } = useCommonHooks();
const { isMobile, theme, iconFilter } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [searchValue, setSearchValue] = useState('');
@@ -273,6 +278,16 @@ const SearchProviderSettings = () => {
w={'100%'}
align='center'
>
<LoadingOverlay
visible={providerDataIsFetching}
zIndex={180}
overlayProps={{ blur: 5 }}
loaderProps={{
color: 'var(--mantine-color-primary-0)',
type: 'bars',
size: 'xl',
}}
/>
<Grid columns={18} w={'75%'}>
{providers.length > 0 ? (
providers?.map((provider: Provider) => (
@@ -291,7 +306,7 @@ const SearchProviderSettings = () => {
<SearchProviderSettingsItem
provider={provider}
Icon={allIcons[provider.icon || '']}
filter={filter}
filter={iconFilter}
/>
</Box>
</Popover.Target>

22
src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
View File

@@ -1,4 +1,4 @@
import { Box, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { Box, Group, LoadingOverlay, SimpleGrid, Stack, Text } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { NoItemsFound, SettingsHeader } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -15,7 +15,11 @@ export function ThemePlaylists() {
endpoint: themesEndpoint,
});
const themePlaylistsEndpoint = 'api/themePlaylists';
const { data: themePlaylistData, isFetched: isThemePlaylistDataFetched } = useQueryAPI({
const {
data: themePlaylistData,
isFetched: themePlaylistDataIsFetched,
isFetching: themePlaylistDataIsFetching,
} = useQueryAPI({
endpoint: themePlaylistsEndpoint,
});
const [themePlaylists, setThemePlaylists] = useState<ThemePlaylist[]>([]);
@@ -54,7 +58,7 @@ export function ThemePlaylists() {
};
useEffect(() => {
if (themePlaylistData && isThemePlaylistDataFetched) {
if (themePlaylistData && themePlaylistDataIsFetched) {
setThemePlaylists(
themePlaylistData.filter(
(a: ThemePlaylist) =>
@@ -66,7 +70,7 @@ export function ThemePlaylists() {
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [themePlaylistData, isThemePlaylistDataFetched, debouncedSearch]);
}, [themePlaylistData, themePlaylistDataIsFetched, debouncedSearch]);
return (
<Stack>
@@ -97,6 +101,16 @@ export function ThemePlaylists() {
setIsLoading={setIsLoading}
/>
<Stack mt={isMobile ? '10rem' : '6rem'}>
<LoadingOverlay
visible={themePlaylistDataIsFetching}
zIndex={180}
overlayProps={{ blur: 5 }}
loaderProps={{
color: 'var(--mantine-color-primary-0)',
type: 'bars',
size: 'xl',
}}
/>
{allThemeData && (
<>
<Group justify='center' align='center' pos={'relative'}>

20
src/pages/settings/components/Theming/ThemePlaylists/components/ThemeSelect.tsx
View File

@@ -60,11 +60,11 @@ export function ThemeSelect({
height: '60px',
color: theme?.primaryColor,
backgroundImage:
theme?.backgroundImage.toLocaleLowerCase() !== 'none'
? `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(../../api/backgroundImages/thumbs/${theme?.backgroundImage})`
: undefined,
theme?.backgroundImage.toLocaleLowerCase() === 'none'
? undefined
: `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(../../api/backgroundImages/thumbs/${theme?.backgroundImage})`,
backgroundSize:
theme?.backgroundImage.toLocaleLowerCase() !== 'none' ? 'cover' : undefined,
theme?.backgroundImage.toLocaleLowerCase() === 'none' ? undefined : 'cover',
backgroundColor:
theme?.backgroundImage.toLocaleLowerCase() === 'none'
? theme?.backgroundColor
@@ -87,13 +87,13 @@ export function ThemeSelect({
h={'60px'}
style={{
backgroundImage:
theme?.backgroundImage.toLocaleLowerCase() !== 'none'
? `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(../../api/backgroundImages/thumbs/${theme?.backgroundImage})`
: undefined,
theme?.backgroundImage.toLocaleLowerCase() === 'none'
? undefined
: `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(../../api/backgroundImages/thumbs/${theme?.backgroundImage})`,
backgroundSize:
theme?.backgroundImage.toLocaleLowerCase() !== 'none'
? 'cover'
: undefined,
theme?.backgroundImage.toLocaleLowerCase() === 'none'
? undefined
: 'cover',
backgroundColor:
theme?.backgroundImage.toLocaleLowerCase() === 'none'
? theme?.backgroundColor

23
src/pages/settings/components/Theming/Themes/ThemeCard/ThemeCard.tsx
View File

@@ -1,10 +1,5 @@
import { Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
import {
useDebouncedState,
useDisclosure,
useElementSize,
useHover,
} from '@mantine/hooks';
import { useDebouncedState, useDisclosure, useHover } from '@mantine/hooks';
import { DeleteItemModal } from 'components';
import { useCommonHooks } from 'hooks';
import { textClasses } from 'styles';
@@ -29,7 +24,6 @@ export function ThemeCard({
enabled?: boolean;
}) {
const { hovered, ref: hoverRef } = useHover();
const { ref, width } = useElementSize();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { currentTheme, setCurrentTheme, setCurrentThemePlaylist, handleDelete } =
useCommonHooks();
@@ -83,7 +77,7 @@ export function ThemeCard({
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
maxWidth: width,
maxWidth: 275,
}}
>
{cardTheme.name}
@@ -111,19 +105,18 @@ export function ThemeCard({
/>
</Group>
<Button
ref={ref}
w={'275px'}
h={'115px'}
disabled={currentTheme === 'random'}
style={{
backgroundImage:
cardTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
? `linear-gradient(${cardTheme?.backgroundColor}33, ${cardTheme?.backgroundColor}33), url(../../api/backgroundImages/thumbs/${cardTheme?.backgroundImage})`
: undefined,
cardTheme?.backgroundImage.toLocaleLowerCase() === 'none'
? undefined
: `linear-gradient(${cardTheme?.backgroundColor}33, ${cardTheme?.backgroundColor}33), url(../../api/backgroundImages/thumbs/${cardTheme?.backgroundImage})`,
backgroundSize:
cardTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
? 'cover'
: undefined,
cardTheme?.backgroundImage.toLocaleLowerCase() === 'none'
? undefined
: 'cover',
backgroundColor:
cardTheme?.backgroundImage.toLocaleLowerCase() === 'none'
? cardTheme?.backgroundColor

2
src/pages/settings/components/Theming/Themes/ThemeCard/components/ThemeManagementPill.tsx
View File

@@ -147,7 +147,7 @@ export function ThemeManagementPill({
position: 'absolute',
right: 3,
top: 3,
marginRight: !hovered ? 0 : '-2.5rem',
marginRight: hovered ? '-2.5rem' : 0,
transition: 'all 0.2s',
}}
align='center'

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

@@ -13,11 +13,11 @@ export function ThemeMiniCard({ miniTheme }: { miniTheme: Theme | undefined }) {
h={'60px'}
style={{
backgroundImage:
miniTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
? `linear-gradient(${miniTheme?.backgroundColor}33, ${miniTheme?.backgroundColor}33), url(../../api/backgroundImages/thumbs/${miniTheme?.backgroundImage})`
: undefined,
miniTheme?.backgroundImage.toLocaleLowerCase() === 'none'
? undefined
: `linear-gradient(${miniTheme?.backgroundColor}33, ${miniTheme?.backgroundColor}33), url(../../api/backgroundImages/thumbs/${miniTheme?.backgroundImage})`,
backgroundSize:
miniTheme?.backgroundImage.toLocaleLowerCase() !== 'none' ? 'cover' : undefined,
miniTheme?.backgroundImage.toLocaleLowerCase() === 'none' ? undefined : 'cover',
backgroundColor:
miniTheme?.backgroundImage.toLocaleLowerCase() === 'none'
? miniTheme?.backgroundColor

162
src/pages/settings/components/Theming/Themes/ThemeModal/components/NewThemeStarter.tsx
View File

@@ -37,7 +37,87 @@ export function NewThemeStarter({
}, []);
return (
<Stack align='center' p={'2rem'}>
{!duplicate ? (
{duplicate ? (
<Stack align='center'>
<Group
w={'100%'}
justify='center'
style={{
backgroundColor:
'color-mix(in srgb, var(--mantine-color-accent-0), var(--mantine-color-background-0))',
padding: '1rem',
borderRadius: '8px',
}}
>
{allThemes?.map((miniTheme: Theme) => {
return (
<Box
{...handlers}
key={miniTheme.id}
onClick={() => {
!pressed && setSelectedTheme(miniTheme);
setPressed(false);
}}
>
<ThemePreviewMiddleware
newThemeList={[miniTheme.id as number]}
miniTheme={miniTheme}
themeList={[]}
selectedPlaylist={undefined}
setSelectedPlaylist={() => {}}
/>
</Box>
);
})}
</Group>
<Group>
<Group
style={{
backgroundColor:
'color-mix(in srgb, var(--mantine-color-primary-0), var(--mantine-color-background-0))',
padding: '1rem',
borderRadius: '8px',
}}
>
<ThemeMiniCard miniTheme={selectedTheme} />
<Button
disabled={selectedTheme.name === 'default'}
onClick={() => {
setSelectedTheme({
...selectedTheme,
name: `${selectedTheme.name} copy`,
});
setIsNew(false);
}}
>
Confirm
</Button>
</Group>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
setDuplicate(false);
setSelectedTheme({
id: undefined,
name: 'Default',
backgroundImage: 'none',
backgroundColor: '#EEEEEE',
searchColor: '#00000033',
primaryColor: '#222222',
accentColor: '#5c5c5c',
borderColor: '#5c5c5c',
randomEnabled: 1,
textShadowsEnabled: 0,
appShadowsEnabled: 0,
});
}}
>
Back
</Button>
</Group>
</Stack>
) : (
<>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Please choose an option:
@@ -189,86 +269,6 @@ export function NewThemeStarter({
</Stack>
</Group>
</>
) : (
<Stack align='center'>
<Group
w={'100%'}
justify='center'
style={{
backgroundColor:
'color-mix(in srgb, var(--mantine-color-accent-0), var(--mantine-color-background-0))',
padding: '1rem',
borderRadius: '8px',
}}
>
{allThemes?.map((miniTheme: Theme) => {
return (
<Box
{...handlers}
key={miniTheme.id}
onClick={() => {
!pressed && setSelectedTheme(miniTheme);
setPressed(false);
}}
>
<ThemePreviewMiddleware
newThemeList={[miniTheme.id as number]}
miniTheme={miniTheme}
themeList={[]}
selectedPlaylist={undefined}
setSelectedPlaylist={() => {}}
/>
</Box>
);
})}
</Group>
<Group>
<Group
style={{
backgroundColor:
'color-mix(in srgb, var(--mantine-color-primary-0), var(--mantine-color-background-0))',
padding: '1rem',
borderRadius: '8px',
}}
>
<ThemeMiniCard miniTheme={selectedTheme} />
<Button
disabled={selectedTheme.name === 'default'}
onClick={() => {
setSelectedTheme({
...selectedTheme,
name: `${selectedTheme.name} copy`,
});
setIsNew(false);
}}
>
Confirm
</Button>
</Group>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
setDuplicate(false);
setSelectedTheme({
id: undefined,
name: 'Default',
backgroundImage: 'none',
backgroundColor: '#EEEEEE',
searchColor: '#00000033',
primaryColor: '#222222',
accentColor: '#5c5c5c',
borderColor: '#5c5c5c',
randomEnabled: 1,
textShadowsEnabled: 0,
appShadowsEnabled: 0,
});
}}
>
Back
</Button>
</Group>
</Stack>
)}
</Stack>
);

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

@@ -84,7 +84,7 @@ export function ThemeEditor({
? `linear-gradient(${selectedTheme.backgroundColor}88, ${selectedTheme.backgroundColor}88), no-repeat center url(../../api/backgroundImages/thumbs/${item})`
: `no-repeat center url(../../api/backgroundImages/thumbs/${item})`
: 'repeating-linear-gradient(45deg, #33333366, #33333366 10px, #88888866 10px, #88888866 20px)',
backgroundSize: item !== 'none' ? 'cover' : undefined,
backgroundSize: item === 'none' ? undefined : 'cover',
backgroundColor: item === 'none' ? '#00000088' : undefined,
paddingLeft: '.5rem',
alignItems: 'center',
@@ -639,12 +639,12 @@ export function ThemeEditor({
</Tooltip>
<Button
onClick={() => {
!duplicate
? setSelectedTheme({ ...defaultTheme })
: setSelectedTheme({
duplicate
? setSelectedTheme({
...defaultTheme,
name: `${defaultTheme.name} copy`,
});
})
: setSelectedTheme({ ...defaultTheme });
}}
>
Reset Changes

12
src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx
View File

@@ -10,13 +10,13 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
<Stack
style={{
backgroundImage:
selectedTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
? `linear-gradient(${selectedTheme?.backgroundColor}33, ${selectedTheme?.backgroundColor}33), url(../../api/backgroundImages/thumbs/${selectedTheme?.backgroundImage})`
: undefined,
selectedTheme?.backgroundImage.toLocaleLowerCase() === 'none'
? undefined
: `linear-gradient(${selectedTheme?.backgroundColor}33, ${selectedTheme?.backgroundColor}33), url(../../api/backgroundImages/thumbs/${selectedTheme?.backgroundImage})`,
backgroundSize:
selectedTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
? 'cover'
: undefined,
selectedTheme?.backgroundImage.toLocaleLowerCase() === 'none'
? undefined
: 'cover',
backgroundColor:
selectedTheme?.backgroundImage.toLocaleLowerCase() === 'none'
? selectedTheme?.backgroundColor

6
src/pages/settings/components/Theming/Themes/ThemePreviewMiddleware.tsx
View File

@@ -40,7 +40,9 @@ export function ThemePreviewMiddleware({
: undefined,
}}
onClick={() => {
if (!pressed) {
if (pressed) {
setPressed(false);
} else {
const newSelectedPlaylist = { ...selectedPlaylist };
if (themeList?.includes(miniTheme.id)) {
newThemeList.splice(themeList.indexOf(miniTheme.id), 1);
@@ -49,8 +51,6 @@ export function ThemePreviewMiddleware({
}
newSelectedPlaylist.themeList = JSON.stringify(newThemeList);
setSelectedPlaylist(newSelectedPlaylist);
} else {
setPressed(false);
}
}}
>

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

@@ -3,6 +3,7 @@ import {
Button,
Divider,
Group,
LoadingOverlay,
Overlay,
Stack,
Switch,
@@ -24,11 +25,19 @@ import { ThemeModal } from './ThemeModal';
export function Themes() {
const backgroundsEndpoint = 'api/backgrounds';
const { data: allThemeData, isFetched: isAllThemeDataFetched } = useQueryAPI({
const {
data: allThemeData,
isFetched: allThemeDataIsFetched,
isFetching: allThemeDataIsFetching,
} = useQueryAPI({
endpoint: 'api/themes',
});
const [allThemes, setAllThemes] = useState<Theme[]>([]);
const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
const {
data: backgroundData,
isFetched: backgroundDataIsFetched,
isFetching: backgroundDataIsFetching,
} = useQueryAPI({
endpoint: backgroundsEndpoint,
});
const { data: themePlaylistData } = useQueryAPI({
@@ -76,13 +85,13 @@ export function Themes() {
};
useEffect(() => {
if (backgroundData && isBackgroundFetched) {
if (backgroundData && backgroundDataIsFetched) {
setBackgroundList([
'None',
...backgroundData.sort((a: string, b: string) => a.localeCompare(b)),
]);
}
}, [backgroundData, isBackgroundFetched]);
}, [backgroundData, backgroundDataIsFetched]);
useEffect(() => {
if (themePlaylistData) {
@@ -91,7 +100,7 @@ export function Themes() {
}, [themePlaylistData]);
useEffect(() => {
if (allThemeData && isAllThemeDataFetched) {
if (allThemeData && allThemeDataIsFetched) {
setAllThemes(
allThemeData.filter((a: Theme) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
@@ -101,7 +110,7 @@ export function Themes() {
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [allThemeData, isAllThemeDataFetched, debouncedSearch]);
}, [allThemeData, allThemeDataIsFetched, debouncedSearch]);
useEffect(() => {
if (allThemes) {
@@ -156,6 +165,16 @@ export function Themes() {
setIsLoading={setIsLoading}
/>
<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
<LoadingOverlay
visible={allThemeDataIsFetching || backgroundDataIsFetching}
zIndex={180}
overlayProps={{ blur: 5 }}
loaderProps={{
color: 'var(--mantine-color-primary-0)',
type: 'bars',
size: 'xl',
}}
/>
<Group
w={'85%'}
justify='center'
@@ -201,10 +220,10 @@ export function Themes() {
zIndex:
currentTheme === 'random' &&
(themePlaylists
.filter(
.find(
(t: ThemePlaylist) =>
t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
)[0]
)
?.themeList.includes(`${cardTheme.id}`) ||
cardTheme.name === theme.name)
? 195
@@ -222,10 +241,7 @@ export function Themes() {
</Group>
))
) : (
<Group
w={'100%'}
style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
>
<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
<NoItemsFound />
</Group>
)}

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

@@ -1,4 +1,13 @@
import { Button, Grid, GridCol, Group, Popover, Stack, TextInput } from '@mantine/core';
import {
Button,
Grid,
GridCol,
Group,
LoadingOverlay,
Popover,
Stack,
TextInput,
} from '@mantine/core';
import { isNotEmpty, matches, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
@@ -26,7 +35,11 @@ const WolClientSettings = () => {
},
});
const endpoint = 'api/wolClients';
const { data: wolClientsData, isFetched: wolClientsIsFetched } = useQueryAPI({
const {
data: wolClientsData,
isFetched: wolClientsIsFetched,
isFetching: wolClientsIsFetching,
} = useQueryAPI({
endpoint: endpoint,
});
const [wolClients, setWolClients] = useState<WolClient[]>([]);
@@ -145,6 +158,16 @@ const WolClientSettings = () => {
w={'100%'}
align='center'
>
<LoadingOverlay
visible={wolClientsIsFetching}
zIndex={180}
overlayProps={{ blur: 5 }}
loaderProps={{
color: 'var(--mantine-color-primary-0)',
type: 'bars',
size: 'xl',
}}
/>
<Grid columns={18} w={'75%'}>
{wolClients.length > 0 ? (
wolClients?.map((client: WolClient) => (