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

Updates to styles; misc bugfixes

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-10 14:37:44 -05:00
parent 9ef9cde336
commit c0b020a569
34 changed files with 475 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/pages/settings/components/Applications/AppSettingsItem.tsx
View File

@@ -1,109 +0,0 @@
import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import { FiAlertCircle } from 'react-icons/fi';
import { actionIconClasses, boxClasses, textClasses } from 'styles';
function AppSettingsItem({
url,
icon,
name,
enabled,
allIcons,
}: {
url: string;
icon: string;
name: string;
enabled: number;
allIcons: any;
}) {
const Icon = allIcons[icon];
const [textDecoration, setTextDecoration] = useState<string>('none');
const [hover, setHover] = useState<boolean>(false);
const { isMobile } = useCommonHooks();
return (
<Box pos={'relative'}>
{enabled === 0 && (
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
label='This app is disabled.'
>
<ActionIcon
className={actionIconClasses.settingsTooltip}
classNames={actionIconClasses}
pos={'absolute'}
right={0}
size={'xl'}
variant='subtle'
style={{ zIndex: 1 }}
>
<FiAlertCircle color='red' />
</ActionIcon>
</Tooltip>
)}
<Box
component='a'
onMouseOver={() => {
setTextDecoration('underline');
setHover(true);
}}
onMouseOut={() => {
setTextDecoration('none');
setHover(false);
}}
className={boxClasses.appItemBox}
>
{hover && (
<svg
style={{ position: 'absolute', borderRadius: '6px' }}
height='100%'
width='100%'
xmlns='http://www.w3.org/2000/svg'
>
<rect rx='16' ry='16' height='100%' width='100%' strokeLinejoin='round' />
</svg>
)}
<Stack
align={isMobile ? 'center' : undefined}
justify={isMobile ? 'center' : undefined}
style={{
height: '128px',
width: isMobile ? '100%' : undefined,
marginRight: isMobile ? '0' : '1rem',
marginLeft: isMobile ? '0' : '2rem',
paddingTop: isMobile ? '0' : '2rem',
}}
>
{Icon && <Icon style={{ height: '4rem', width: '4rem' }} />}
</Stack>
<Stack
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
overflow: 'hidden',
gap: 0,
}}
>
<Text fz={'1.5rem'} className={textClasses.appName} classNames={textClasses}>
{name}
</Text>
<Text
fz={'1rem'}
className={textClasses.appUrl}
classNames={textClasses}
style={{
textDecoration: textDecoration,
}}
>
{url}
</Text>
</Stack>
</Box>
</Box>
);
}
export default AppSettingsItem;

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

@@ -15,6 +15,7 @@ import {
} from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AppItem } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import * as fa6 from 'react-icons/fa6';
@@ -25,7 +26,6 @@ import type { Application } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import AppSettingsItem from './AppSettingsItem';
import DebouncedApplication from './DebouncedApplication';
const ApplicationSettings = () => {
@@ -267,7 +267,11 @@ const ApplicationSettings = () => {
}
/>
<DragDropContext onDragEnd={onDragEnd}>
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
align='center'
>
{applications.length > 0 ? (
<Droppable droppableId={'groupList'}>
{(provided) => (
@@ -303,12 +307,14 @@ const ApplicationSettings = () => {
>
#{index + 1}
</Text>
<AppSettingsItem
<AppItem
key={application.name}
name={application.name}
url={application.url}
icon={application.icon}
name={application.name}
enabled={application.enabled}
allIcons={allIcons}
scale={2}
linksActive={false}
/>
</Box>
</Box>
@@ -331,12 +337,14 @@ const ApplicationSettings = () => {
e.stopPropagation();
}}
>
<AppSettingsItem
<AppItem
key={application.name}
name={application.name}
url={application.url}
icon={application.icon}
name={application.name}
enabled={application.enabled}
allIcons={allIcons}
scale={2}
linksActive={false}
/>
</Box>
</Popover.Target>

79
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -1,23 +1,20 @@
import {
ActionIcon,
Card,
type ComboboxItem,
type ComboboxLikeRenderOptionInput,
Group,
Select,
Stack,
Switch,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiPower, FiTrash } from 'react-icons/fi';
import { cardClasses, selectClasses, switchClasses, textInputClasses } from 'styles';
import { cardClasses, selectClasses, textInputClasses } from 'styles';
import type { Application } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
import ManagementPill from '../Shared/ManagementPill';
function DebouncedApplication({
application,
@@ -79,70 +76,16 @@ function DebouncedApplication({
</Stack>
}
/>
<Group
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
width: 'fit-content',
backgroundColor:
'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
padding: '.5rem',
borderRadius: '10px',
color: 'var(--mantine-color-search-0)',
backdropFilter: 'brightness(0.5)',
<ManagementPill
enabled={app.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
}}
>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Enabled'}
refProp='rootRef'
styles={{
tooltip: { marginTop: '-.5rem' },
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
}}
withArrow
>
<Switch
className={switchClasses.enable}
classNames={switchClasses}
defaultChecked={app.enabled === 1}
defaultValue={app.enabled}
thumbIcon={
<FiPower
style={{
color: app.enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
}}
/>
}
onChange={(event) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
}}
/>
</Tooltip>
|
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
>
<ActionIcon
color='red'
onClick={() => {
setIsOpen(true);
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
</Group>
openModal={openModal}
/>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'Name'}

2
src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx
View File

@@ -10,7 +10,7 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
style={{
cursor: 'pointer',
borderRadius: '4px',
color: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-search-0)',
padding: '.5rem',
}}

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

@@ -203,7 +203,11 @@ const BookmarkSettings = () => {
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
align='center'
>
<Droppable droppableId={'groupList'}>
{(provided) => (
<Stack
@@ -279,7 +283,11 @@ const BookmarkSettings = () => {
</Stack>
</DragDropContext>
) : (
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
align='center'
>
<Group w={isMobile ? undefined : '80%'} align='start' justify='center'>
{groups.length > 0 ? (
groups?.map((group: BookmarkGroup) => (

89
src/pages/settings/components/Messages/DebouncedMessage.tsx
View File

@@ -1,19 +1,10 @@
import {
ActionIcon,
Card,
Group,
Stack,
Switch,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { Card, Stack, Text, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks } from 'hooks';
import { FiPower, FiTrash } from 'react-icons/fi';
import { cardClasses, switchClasses, textInputClasses } from 'styles';
import { cardClasses, textInputClasses } from 'styles';
import type { Message } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
import ManagementPill from '../Shared/ManagementPill';
function DebouncedMessage({
label,
@@ -56,72 +47,16 @@ function DebouncedMessage({
</Stack>
}
/>
<Group
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
width: 'fit-content',
backgroundColor:
'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
padding: '.5rem',
borderRadius: '10px',
color: 'var(--mantine-color-search-0)',
backdropFilter: 'brightness(0.5)',
<ManagementPill
enabled={message.customGreeting}
onChange={() => {
setMessage({
...message,
customGreeting: message.customGreeting === 1 ? 0 : 1,
});
}}
>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={message.customGreeting === 1 ? 'Enabled' : 'Disabled'}
refProp='rootRef'
styles={{
tooltip: { marginTop: '-.5rem' },
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
}}
withArrow
>
<Switch
className={switchClasses.enable}
classNames={switchClasses}
defaultChecked={message.customGreeting === 1}
defaultValue={message.customGreeting}
thumbIcon={
<FiPower
style={{
color:
message.customGreeting === 1
? 'var(--mantine-color-accent-0)'
: 'red',
}}
/>
}
onChange={(event) => {
setMessage({
...message,
customGreeting: event.target.checked ? 1 : 0,
});
}}
/>
</Tooltip>
|
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
>
<ActionIcon
color='red'
onClick={() => {
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
</Group>
openModal={openModal}
/>
<TextInput
label={label}
disabled={message.customGreeting === 0}

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

@@ -120,7 +120,11 @@ const MessageSettings = () => {
</Stack>
}
/>
<Stack mb={isMobile ? '6rem' : undefined} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : undefined}
align='center'
>
<Grid w={'75%'}>
{messages.length > 0 ? (
messages?.map((message: Message) => (

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

@@ -66,7 +66,7 @@ const PersonalizationSettings = () => {
isLoading={false}
setIsLoading={() => {}}
/>
<Stack align='center'>
<Stack align='center' mt={'6rem'}>
<Grid w={'75%'}>
{personalIsFetching && (
<Overlay

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

@@ -152,7 +152,12 @@ const SearchProviderSettings = () => {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid columns={18} w={'75%'}>
{providers.length > 0 ? (
providers?.map((provider: Provider) => (

76
src/pages/settings/components/Shared/ManagementPill.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { ActionIcon, Group, Switch, Tooltip } from '@mantine/core';
import { FiPower, FiTrash } from 'react-icons/fi';
import { switchClasses } from 'styles';
function ManagementPill({
enabled,
onChange,
openModal,
}: {
enabled: number;
onChange: any;
openModal: () => void;
}) {
return (
<Group
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
width: 'fit-content',
backgroundColor:
'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
padding: '.5rem',
borderRadius: '10px',
color: 'var(--mantine-color-search-0)',
backdropFilter: 'brightness(0.5)',
}}
>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={enabled === 1 ? 'Enabled' : 'Disabled'}
refProp='rootRef'
styles={{
tooltip: { marginTop: '-.5rem' },
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
}}
withArrow
>
<Switch
className={switchClasses.enable}
classNames={switchClasses}
defaultChecked={enabled === 1}
defaultValue={enabled}
thumbIcon={
<FiPower
style={{
color: enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
}}
/>
}
onChange={onChange}
/>
</Tooltip>
|
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
>
<ActionIcon
color='red'
onClick={() => {
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
</Group>
);
}
export default ManagementPill;

4
src/pages/settings/components/Shared/SettingsHeader.tsx
View File

@@ -58,6 +58,10 @@ function SettingsHeader({
paddingTop: '1.5rem',
paddingBottom: '1.5rem',
paddingLeft: '1rem',
height: 'min-content',
width: '100%',
marginTop: 0,
position: 'absolute',
}}
>
<Group w={isMobile ? undefined : '100%'}>

11
src/pages/settings/components/Theming/BackgroundModal.tsx
View File

@@ -12,7 +12,7 @@ import {
Text,
TextInput,
} from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks';
import { useDebouncedValue, useElementSize } from '@mantine/hooks';
import { useCommonHooks } from 'hooks';
import { useFileUploadAPI } from 'hooks/useAPI';
import { useEffect, useState } from 'react';
@@ -38,6 +38,7 @@ function BackgroundModal({
backgroundList: string[];
inUseBackgrounds: string[];
}) {
const { ref, width } = useElementSize();
const [background, setBackground] = useState<File | null>(null);
const [fileName, setFileName] = useState<string>('');
const [newFileName, setNewFileName] = useState<string>('');
@@ -173,7 +174,7 @@ function BackgroundModal({
backgroundFilter: 'blur(5px)',
}}
>
<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
<SimpleGrid w={'100%'} cols={3} p={'.75rem'}>
{backgroundList
.filter((background) => background !== 'None')
.filter(
@@ -195,11 +196,17 @@ function BackgroundModal({
top: '-.5rem',
left: 0,
zIndex: 3,
boxShadow: '2px -2px var(--mantine-color-primary-0)',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
maxWidth: width,
}}
>
{background}
</Text>
<Card
ref={ref}
style={{
aspectRatio: '16/9',
width: '100%',

11
src/pages/settings/components/Theming/ThemeCard.tsx
View File

@@ -1,5 +1,5 @@
import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useDisclosure, useElementSize } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useState } from 'react';
import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
@@ -18,6 +18,7 @@ function ThemeCard({
allThemes: Theme[];
themePlaylists: ThemePlaylist[];
}) {
const { ref, width } = useElementSize();
const [hover, setHover] = useState(false);
const [shiftEdit, setShiftEdit] = useState<number>(0);
const [shiftShuffle, setShiftShuffle] = useState<number>(0);
@@ -73,18 +74,24 @@ function ThemeCard({
left: 6,
paddingRight: '.25rem',
paddingLeft: '.25rem',
backgroundColor: cardTheme.borderColor,
backgroundColor: cardTheme.backgroundColor,
borderRadius: '4px',
color:
cardTheme.borderColor === cardTheme.primaryColor
? cardTheme.accentColor
: cardTheme.primaryColor,
zIndex: 3,
boxShadow: `2px -2px ${cardTheme.borderColor}`,
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
maxWidth: width,
}}
>
{cardTheme.name}
</Text>
<Button
ref={ref}
w={'275px'}
h={'115px'}
disabled={currentTheme === 'random'}

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

@@ -171,7 +171,7 @@ function ThemeModal({
</Modal.Header>
<Modal.Body>
<Group p={'2rem'} w={'100%'} align='flex-start' justify='space-between'>
<Stack display={'flex'} pos={'relative'} w={'70%'}>
<Stack display={'flex'} pos={'relative'} w={isMobile ? '100%' : '70%'}>
<ThemeModalContent selectedTheme={designerTheme} />
<Tooltip
label={'Change Primary Color'}
@@ -242,7 +242,7 @@ function ThemeModal({
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
top={'4.5rem'}
right={'7rem'}
right={'15%'}
/>
</Tooltip>
<Tooltip
@@ -260,7 +260,7 @@ function ThemeModal({
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
top={'3.25rem'}
left={'14.5rem'}
left={'6.5rem'}
/>
</Tooltip>
<Tooltip
@@ -282,7 +282,7 @@ function ThemeModal({
</Tooltip>
</Stack>
<Stack
w={'28%'}
w={isMobile ? '100%' : '28%'}
h={'436px'}
p={'1rem'}
style={{

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

@@ -97,7 +97,7 @@ function ThemePlaylists() {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack>
<Stack mt={isMobile ? '10rem' : '6rem'}>
{allThemeData && (
<>
<Group justify='center' align='center' pos={'relative'}>

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

@@ -170,7 +170,7 @@ function ThemesSettings() {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack mt={'1rem'} align='center'>
<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
<Group
w={'85%'}
justify='center'
@@ -258,24 +258,34 @@ function ThemesSettings() {
bottom: isMobile ? '3.25rem' : 0,
}}
>
<Group w={isMobile ? undefined : '100%'} justify='space-between'>
<Group w={'100%'} justify={isMobile ? 'center' : 'space-between'}>
<Text
miw={isMobile ? 100 : undefined}
w={'fit-content'}
className={textClasses.settingsSubTitle}
classNames={textClasses}
fz={isMobile ? '1rem' : undefined}
style={
isMobile
? {
position: 'absolute',
top: -16,
left: 4,
padding: '.25rem',
backgroundColor: 'var(--mantine-color-background-0)',
backdropFilter: 'blur(5px) brightness(.25)',
borderRadius: '10px',
boxShadow: '2px -2px var(--mantine-color-accent-0)',
}
: undefined
}
>
Current Settings:
</Text>
<Group
pos={isMobile ? undefined : 'absolute'}
w={isMobile ? undefined : '100%'}
justify='center'
>
<Group>
<Group>
<Text
style={{
color: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-primary-0)',
fontWeight: 'bold',
}}
>

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

@@ -127,7 +127,12 @@ const WolClientSettings = () => {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid columns={18} w={'75%'}>
{wolClients.length > 0 ? (
wolClients?.map((client: WolClient) => (
@@ -143,12 +148,7 @@ const WolClientSettings = () => {
offset={isMobile ? -100 : 0}
>
<Popover.Target>
<Group
onClick={(e) => {
e.stopPropagation();
}}
justify='center'
>
<Group justify='center'>
<WolClientSettingsItem client={client} />
</Group>
</Popover.Target>