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

Updated Settings pages

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-21 15:15:18 -05:00
parent ff7a78e44f
commit 8a16ee2c58
9 changed files with 319 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -29,4 +29,6 @@ sudo pm2 start server.cjs
# TODO
- Image uploads for backgrounds
- Improve mobile
- Improve mobile
- Reorder/Rearrange Bookmarks/Groups

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

@@ -210,15 +210,24 @@ const ApplicationSettings = () => {
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
width: '500px',
}}
>
<Stack>
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
{'Applications are the apps that will be displayed in the homepage.'}
{'Applications are the apps that will be displayed on the homepage.'}
</Text>
<Highlight
ta={'center'}
highlight={''}
highlight={[
'Applications',
'apps',
'application',
'name',
'base url',
'url',
'icon',
'filter',
]}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
@@ -229,7 +238,9 @@ const ApplicationSettings = () => {
WebkitTextFillColor: 'transparent',
}}
>
{''}
{
'Applications contain a name, base url, url, icon and filter. Currently the icon must be the mdi icon name. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.'
}
</Highlight>
</Stack>
</Popover.Dropdown>

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

@@ -162,6 +162,7 @@ const BookmarkSettings = () => {
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
width: '500px',
}}
>
<Stack>
@@ -169,8 +170,16 @@ const BookmarkSettings = () => {
{'Bookmarks are the links that will be displayed on the homepage.'}
</Text>
<Highlight
ta={'center'}
highlight={''}
highlight={[
'Bookmark',
'Bookmarks',
'Group',
'Groups',
'Link',
'Links',
'Category',
'Categories',
]}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
@@ -181,7 +190,9 @@ const BookmarkSettings = () => {
WebkitTextFillColor: 'transparent',
}}
>
{''}
{
'Bookmarks can only belong to a single category, and will be displayed under that category on the homepage.'
}
</Highlight>
</Stack>
</Popover.Dropdown>

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

@@ -151,14 +151,14 @@ const MessageSettings = () => {
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
width: '500px',
}}
>
<Stack>
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
{'Messages may contain any unicode text.'}
{'These custom messages will be displayed in the header on the homepage.'}
</Text>
<Highlight
ta={'center'}
highlight={['$firstName', '$lastName', '$^firstName', '$^lastName']}
className={textClasses.settingsTooltip}
classNames={textClasses}
@@ -171,7 +171,7 @@ const MessageSettings = () => {
}}
>
{
'Built-in variables include $firstName and $lastName. To force the text to upper case, use a carat (^), ie, $^firstName.'
'Built-in variables include $firstName and $lastName. To force the text to upper case, use a carat (^), ie, $^firstName. Messages may contain any unicode text.'
}
</Highlight>
</Stack>

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

@@ -174,6 +174,7 @@ const SearchProviderSettings = () => {
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
width: '500px',
}}
>
<Stack>
@@ -181,7 +182,6 @@ const SearchProviderSettings = () => {
{'Search providers and shortcuts can be configured here.'}
</Text>
<Highlight
ta={'center'}
highlight={['Providers', 'search']}
className={textClasses.settingsTooltip}
classNames={textClasses}
@@ -193,7 +193,9 @@ const SearchProviderSettings = () => {
WebkitTextFillColor: 'transparent',
}}
>
{'Providers can be used in the search bar.'}
{
'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.'
}
</Highlight>
</Stack>
</Popover.Dropdown>

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

@@ -1,30 +1,40 @@
import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
import { useCommonHooks, useQueryAPI } from 'hooks';
import {
ActionIcon,
Box,
Button,
Group,
Modal,
Overlay,
Stack,
Text,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useState } from 'react';
import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
import { actionIconClasses } from 'styles';
import { actionIconClasses, modalClasses } from 'styles';
function ThemeCard({
cardTheme,
handleOpen,
handleDeleteTheme,
createTheme,
allThemes,
}: any) {
function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
const { data: themePlaylists } = useQueryAPI({
endpoint: 'api/themePlaylists',
});
const [hover, setHover] = useState(false);
const [shiftEdit, setShiftEdit] = useState<number>(0);
const [shiftShuffle, setShiftShuffle] = useState<number>(0);
const { mutateAsync } = useMutationAPI();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const {
handleThemeChange,
currentTheme,
setCurrentTheme,
theme,
isMobile,
currentThemePlaylist,
setCurrentThemePlaylist,
} = useCommonHooks();
const handleDelete = (application: any) => {
mutateAsync({ method: 'DELETE', endpoint: 'api/themes', body: application });
};
return (
<Group
@@ -36,6 +46,72 @@ function ThemeCard({
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<Modal.Root
size={'60%'}
fullScreen={isMobile}
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
closeOnEscape
closeOnClickOutside
>
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Delete Theme</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text>Are you sure you want to delete this theme?</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: '20px',
padding: '8px',
margin: '8px',
borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)',
color: 'var(--color-background)',
}}
>{`"${cardTheme.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(cardTheme);
closeModal();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
</Modal.Body>
</Modal.Content>
</Modal.Root>
<Text
style={{
position: 'absolute',
@@ -279,7 +355,7 @@ function ThemeCard({
},
}}
onClick={() => {
createTheme({
mutateAsync({
method: 'PATCH',
endpoint: 'api/themes',
body: { ...cardTheme, randomEnabled: !cardTheme.randomEnabled },
@@ -299,7 +375,7 @@ function ThemeCard({
<ActionIcon
className={actionIconClasses.themeEditButton}
classNames={actionIconClasses}
onClick={() => handleDeleteTheme(cardTheme)}
onClick={openModal}
>
<FiTrash color='red' />
</ActionIcon>

97
src/pages/settings/components/Theming/ThemePlaylistCard.tsx
View File

@@ -2,30 +2,31 @@ import {
ActionIcon,
Button,
Group,
Modal,
Overlay,
ScrollArea,
Stack,
Text,
} from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useState } from 'react';
import { FiEdit, FiRefreshCcw, FiTrash } from 'react-icons/fi';
import { modalClasses } from 'styles';
import ThemeMiniCard from './ThemeMiniCard';
function ThemePlaylistCard({
cardPlaylist,
handleOpen,
handleDeletePlaylist,
createPlaylist,
allThemes,
}: any) {
function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
const [hover, setHover] = useState(false);
const { setThemeName, setCurrentThemePlaylist, theme } = useCommonHooks();
const { setThemeName, setCurrentThemePlaylist, theme, isMobile } = useCommonHooks();
const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
const { mutateAsync } = useMutationAPI();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const themeList = JSON.parse(
cardPlaylist.themeList.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
);
const handleDelete = (application: any) => {
mutateAsync({ method: 'DELETE', endpoint: 'api/themePlaylists', body: application });
};
return (
<Group
gap={0}
@@ -36,6 +37,72 @@ function ThemePlaylistCard({
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<Modal.Root
size={'60%'}
fullScreen={isMobile}
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
closeOnEscape
closeOnClickOutside
>
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Delete Theme Playlist</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text>Are you sure you want to delete this Theme Playlist?</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: '20px',
padding: '8px',
margin: '8px',
borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)',
color: 'var(--color-background)',
}}
>{`"${cardPlaylist.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(cardPlaylist);
closeModal();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
</Modal.Body>
</Modal.Content>
</Modal.Root>
<Text
style={{
position: 'absolute',
@@ -73,7 +140,7 @@ function ThemePlaylistCard({
onClick={(event) => {
event.stopPropagation();
if (cardPlaylist.name === 'All') {
createPlaylist({
mutateAsync({
method: 'PATCH',
endpoint: 'api/themePlaylists',
body: {
@@ -84,7 +151,7 @@ function ThemePlaylistCard({
});
}
if (cardPlaylist.name === 'Backgrounds') {
createPlaylist({
mutateAsync({
method: 'PATCH',
endpoint: 'api/themePlaylists',
body: {
@@ -101,7 +168,7 @@ function ThemePlaylistCard({
});
}
if (cardPlaylist.name === 'No Backgrounds') {
createPlaylist({
mutateAsync({
method: 'PATCH',
endpoint: 'api/themePlaylists',
body: {
@@ -160,7 +227,9 @@ function ThemePlaylistCard({
: theme.primaryColor,
zIndex: 3,
}}
onClick={() => handleDeletePlaylist(cardPlaylist)}
onClick={() => {
openModal();
}}
>
<FiTrash />
</ActionIcon>

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

@@ -1,10 +1,18 @@
import { Box, Button, Group, Stack, Text } from '@mantine/core';
import {
ActionIcon,
Box,
Button,
Group,
Highlight,
Popover,
Stack,
Text,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { modals } from '@mantine/modals';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useState } from 'react';
import { FiChevronRight, FiPlus } from 'react-icons/fi';
import { buttonClasses, textClasses } from 'styles';
import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
import { actionIconClasses, buttonClasses, textClasses } from 'styles';
import ThemePlaylistCard from './ThemePlaylistCard';
import ThemePlaylistModal from './ThemePlaylistModal';
@@ -15,8 +23,7 @@ function ThemePlaylists() {
const { data: themePlaylists } = useQueryAPI({
endpoint: 'api/themePlaylists',
});
const { mutateAsync: createPlaylist } = useMutationAPI();
const { mutateAsync: deletePlaylist } = useMutationAPI();
const { mutateAsync } = useMutationAPI();
const [opened, { open, close }] = useDisclosure(false);
const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
@@ -31,7 +38,7 @@ function ThemePlaylists() {
};
const handleSavePlaylist = () => {
createPlaylist({
mutateAsync({
method: selectedPlaylist.id === undefined ? 'POST' : 'PATCH',
endpoint: 'api/themePlaylists',
body: selectedPlaylist,
@@ -39,24 +46,6 @@ function ThemePlaylists() {
close();
};
const openDeleteConfirmModal = (playlist: any) =>
modals.openConfirmModal({
title: 'Are you sure you want to delete this theme playlist?',
labels: { confirm: 'Delete', cancel: 'Cancel' },
confirmProps: { color: 'red' },
onConfirm: () =>
deletePlaylist({
method: 'DELETE',
endpoint: 'api/themePlaylists',
body: playlist,
}),
});
const handleDeletePlaylist = (playlist: any) => {
openDeleteConfirmModal(playlist);
close();
};
return (
<>
<ThemePlaylistModal
@@ -66,7 +55,7 @@ function ThemePlaylists() {
setSelectedPlaylist={setSelectedPlaylist}
handleSavePlaylist={handleSavePlaylist}
allThemes={allThemes}
createPlaylist={createPlaylist}
createPlaylist={mutateAsync}
/>
<Stack h={'100%'} w={'100%'}>
<Group w={'100%'} justify='space-between'>
@@ -74,6 +63,45 @@ function ThemePlaylists() {
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Theme Playlists
</Text>
<Popover withArrow withOverlay withinPortal={false}>
<Popover.Target>
<ActionIcon
className={actionIconClasses.settingsTooltip}
classNames={actionIconClasses}
>
<FiHelpCircle />
</ActionIcon>
</Popover.Target>
<Popover.Dropdown
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
width: '500px',
}}
>
<Stack>
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
{'Theme playlists can be created here and applied to the homepage.'}
</Text>
<Highlight
highlight={['Theme', 'Themes', 'Playlist', 'Playlists']}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
{
'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.'
}
</Highlight>
</Stack>
</Popover.Dropdown>
</Popover>
<Button
className={buttonClasses.tableButton}
classNames={buttonClasses}
@@ -123,9 +151,7 @@ function ThemePlaylists() {
handleOpen={handleOpen}
currentThemePlaylist={currentThemePlaylist}
setCurrentThemePlaylist={setCurrentThemePlaylist}
handleDeletePlaylist={handleDeletePlaylist}
allThemes={allThemes}
createPlaylist={createPlaylist}
/>
</Box>
</Group>
@@ -164,11 +190,7 @@ function ThemePlaylists() {
<ThemePlaylistCard
cardPlaylist={cardPlaylist}
handleOpen={handleOpen}
currentThemePlaylist={currentThemePlaylist}
setCurrentThemePlaylist={setCurrentThemePlaylist}
handleDeletePlaylist={handleDeletePlaylist}
allThemes={allThemes}
createPlaylist={createPlaylist}
/>
</Box>
</Group>

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

@@ -1,12 +1,22 @@
import { Box, Button, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
import {
ActionIcon,
Box,
Button,
Group,
Highlight,
Overlay,
Popover,
Stack,
Switch,
Text,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiChevronRight, FiPlus } from 'react-icons/fi';
import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
import '@mantine/core/styles/ModalBase.css';
import '@mantine/core/styles/Modal.css';
import { modals } from '@mantine/modals';
import { buttonClasses, textClasses } from 'styles';
import { actionIconClasses, buttonClasses, textClasses } from 'styles';
import ThemeCard from './ThemeCard';
import ThemeModal from './ThemeModal';
function ThemesSettings() {
@@ -16,8 +26,7 @@ function ThemesSettings() {
const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
endpoint: 'api/backgrounds',
});
const { mutateAsync: createTheme } = useMutationAPI();
const { mutateAsync: deleteTheme } = useMutationAPI();
const { mutateAsync } = useMutationAPI();
const [opened, { open, close }] = useDisclosure(false);
const [colorId, setColorId] = useState<string>('');
const [colorValue, setColorValue] = useState('#000000');
@@ -38,7 +47,7 @@ function ThemesSettings() {
};
const handleSaveTheme = () => {
createTheme({
mutateAsync({
method: selectedTheme.id === undefined ? 'POST' : 'PATCH',
endpoint: 'api/themes',
body: selectedTheme,
@@ -46,20 +55,6 @@ function ThemesSettings() {
close();
};
const openDeleteConfirmModal = (theme: any) =>
modals.openConfirmModal({
title: 'Are you sure you want to delete this theme?',
labels: { confirm: 'Delete', cancel: 'Cancel' },
confirmProps: { color: 'red' },
onConfirm: () =>
deleteTheme({ method: 'DELETE', endpoint: 'api/themes', body: theme }),
});
const handleDeleteTheme = (theme: any) => {
openDeleteConfirmModal(theme);
close();
};
useEffect(() => {
if (backgroundData && isBackgroundFetched) {
setBackgroundList(['None', ...backgroundData]);
@@ -89,6 +84,45 @@ function ThemesSettings() {
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
Themes
</Text>
<Popover withArrow withOverlay withinPortal={false}>
<Popover.Target>
<ActionIcon
className={actionIconClasses.settingsTooltip}
classNames={actionIconClasses}
>
<FiHelpCircle />
</ActionIcon>
</Popover.Target>
<Popover.Dropdown
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
width: '500px',
}}
>
<Stack>
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
{'Themes can be created here and applied to the homepage.'}
</Text>
<Highlight
highlight={['Theme', 'Themes', 'Playlist', 'Playlists']}
className={textClasses.settingsTooltip}
classNames={textClasses}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
{
'Themes are combinations of 5 colors and a background image, and can be added to a playlist. If a theme has been disabled, it will only be disabled with random/shuffle is enabled. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.'
}
</Highlight>
</Stack>
</Popover.Dropdown>
</Popover>
<Button
className={buttonClasses.tableButton}
classNames={buttonClasses}
@@ -161,8 +195,6 @@ function ThemesSettings() {
allThemes={allThemes}
cardTheme={cardTheme}
handleOpen={handleOpen}
handleDeleteTheme={handleDeleteTheme}
createTheme={createTheme}
/>
</Box>
</Group>