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

Formatting and typos

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-21 14:20:18 -05:00
parent 2b972afa68
commit ff7a78e44f
19 changed files with 596 additions and 902 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1361
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

53
package.json
View File

@@ -12,46 +12,45 @@
"dependencies": {
"@emotion/react": "^11.14.0",
"@iconify/react": "^5.2.0",
"@mantine/core": "^7.16.3",
"@mantine/dates": "^7.16.3",
"@mantine/form": "^7.16.3",
"@mantine/hooks": "^7.16.3",
"@mantine/modals": "^7.16.3",
"@tabler/icons-react": "^3.30.0",
"@tanstack/react-query": "^5.66.0",
"@tanstack/react-query-devtools": "^5.66.0",
"@tanstack/react-query-persist-client": "^5.66.0",
"@mantine/core": "^7.17.2",
"@mantine/dates": "^7.17.2",
"@mantine/form": "^7.17.2",
"@mantine/hooks": "^7.17.2",
"@mantine/modals": "^7.17.2",
"@tabler/icons-react": "^3.31.0",
"@tanstack/react-query": "^5.69.0",
"@tanstack/react-query-devtools": "^5.69.0",
"@tanstack/react-query-persist-client": "^5.69.0",
"clsx": "^2.1.1",
"dayjs": "^1.11.13",
"dotenv": "^16.4.7",
"idb-keyval": "^6.2.1",
"jotai": "^2.12.0",
"mantine-react-table": "^2.0.0-beta.6",
"jotai": "^2.12.2",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^5.4.0",
"react-icons": "^5.5.0",
"react-query": "^3.39.3",
"react-router-dom": "^7.1.5",
"react-toastify": "^11.0.3",
"react-router-dom": "^7.4.0",
"react-toastify": "^11.0.5",
"recharts": "^2.15.1"
},
"devDependencies": {
"@types/node": "^22.13.1",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@typescript-eslint/eslint-plugin": "^8.24.0",
"@typescript-eslint/parser": "^8.24.0",
"@types/node": "^22.13.11",
"@types/react": "^19.0.12",
"@types/react-dom": "^19.0.4",
"@typescript-eslint/eslint-plugin": "^8.27.0",
"@typescript-eslint/parser": "^8.27.0",
"@vitejs/plugin-react": "^4.3.4",
"@vitest/coverage-v8": "^3.0.5",
"@vitest/ui": "^3.0.5",
"eslint": "^9.20.1",
"eslint-plugin-react-hooks": "^5.1.0",
"@vitest/coverage-v8": "^3.0.9",
"@vitest/ui": "^3.0.9",
"eslint": "^9.22.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19",
"typescript": "^5.7.3",
"vite": "^6.1.0",
"vite-plugin-dts": "~4.5.0",
"typescript": "^5.8.2",
"vite": "^6.2.2",
"vite-plugin-dts": "~4.5.3",
"vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.0.5"
"vitest": "^3.0.9"
}
}

2
src/App.tsx
View File

@@ -16,8 +16,6 @@ import {
} from 'react-router-dom';
import { MainLayout, ThemeProvider } from './components';
import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //import MRT styles
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import './index.css';
import { Homepage, Settings } from 'pages';

3
src/components/HelpModal/HelpModal.tsx
View File

@@ -12,13 +12,14 @@ export function HelpModal({
applicationData,
providerData,
}: any) {
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
return (
<Modal.Root
size={'60%'}
className={modalClasses.helpModal}
classNames={modalClasses}
opened={providerModalOpened}
fullScreen={isMobile}
onClose={() => {
setSearchValue('');
setProviderLabel('Google Search');

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

@@ -33,7 +33,7 @@ const ApplicationSettings = () => {
endpoint: endpoint,
});
const [applicationData, setApplicationData] = useState<any>([]);
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const [newApplication, setNewApplication] = useState<any>({
name: '',
url: '',
@@ -66,6 +66,7 @@ const ApplicationSettings = () => {
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}
fullScreen={isMobile}
onClose={() => {
closeModal();
}}
@@ -120,7 +121,6 @@ const ApplicationSettings = () => {
<TextInput
label={'URL'}
className={textInputClasses.settingsItem}
w={'59%'}
pt={16}
classNames={textInputClasses}
defaultValue={newApplication.url}

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

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
import { cardClasses, modalClasses, textInputClasses } from 'styles';
function DebouncedApplication({ application, handleDelete }: any) {
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -40,6 +40,7 @@ function DebouncedApplication({ application, handleDelete }: any) {
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Modal.Root
size={'60%'}
fullScreen={isMobile}
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}

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

@@ -32,7 +32,7 @@ const BookmarkSettings = () => {
});
const [groups, setGroups] = useState([]);
const [newGroup, setNewGroup] = useState<any>({});
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [searchValue, setSearchValue] = useState('');
const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
@@ -61,6 +61,7 @@ const BookmarkSettings = () => {
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}
fullScreen={isMobile}
onClose={() => {
closeModal();
}}
@@ -78,7 +79,7 @@ const BookmarkSettings = () => {
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Add a new Group</Modal.Title>
<Modal.Title>Add a new Bookmark Group</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>

3
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
import { cardClasses, modalClasses, textInputClasses } from 'styles';
function DebouncedBookmarkItem({ bookmarkItem, handleDelete }: any) {
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -43,6 +43,7 @@ function DebouncedBookmarkItem({ bookmarkItem, handleDelete }: any) {
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}
fullScreen={isMobile}
onClose={() => {
closeModal();
}}

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

@@ -20,7 +20,7 @@ import BookmarkSettingsItem from './BookmarkSettingsItem';
import DebouncedBookmarkItem from './DebouncedBookmarkItem';
function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [popoverOpened, setPopoverOpened] = useState(false);
const { mutateAsync } = useMutationAPI();
@@ -54,6 +54,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}
fullScreen={isMobile}
onClose={() => {
closeModal();
}}
@@ -71,12 +72,12 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Delete Application</Modal.Title>
<Modal.Title>Delete Group</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 application?</Text>
<Text>Are you sure you want to delete this bookmark group?</Text>
<Text
style={{
fontWeight: 'bold',
@@ -124,7 +125,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
color: theme.primaryColor,
},
}}
w={'58%'}
w={isMobile ? undefined : '58%'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
defaultValue={group.categoryName}
@@ -142,7 +143,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
color: theme.primaryColor,
},
}}
w={'28%'}
w={isMobile ? undefined : '28%'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
defaultValue={group.filterName}
@@ -178,7 +179,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
borderRadius: '100%',
backgroundColor: theme.accentColor,
position: 'absolute',
top: 78,
top: isMobile ? 164 : 78,
right: 18,
zIndex: 10,
fontSize: 20,

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

@@ -15,7 +15,7 @@ import { useCommonHooks } from 'hooks';
import { cardClasses, modalClasses, textInputClasses } from 'styles';
function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
return (
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
@@ -24,6 +24,7 @@ function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}
fullScreen={isMobile}
onClose={() => {
closeModal();
}}

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

@@ -29,7 +29,7 @@ const MessageSettings = () => {
const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({
endpoint: 'api/messages',
});
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [messages, setMessages] = useState<any>([]);
const [newMessage, setNewMessage] = useState('');
@@ -67,6 +67,7 @@ const MessageSettings = () => {
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}
fullScreen={isMobile}
onClose={() => {
closeModal();
}}
@@ -197,7 +198,7 @@ const MessageSettings = () => {
<Stack w={'100%'} align='center'>
<Grid w={'75%'}>
{messages?.map((message: any) => (
<GridCol span={6} key={message.id}>
<GridCol span={isMobile ? 12 : 6} key={message.id}>
<DebouncedMessage
label={`ID# ${message.id}`}
message={message}

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

@@ -1,6 +1,6 @@
import { Card, Grid, GridCol, Overlay, Stack, Text, TextInput } from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks';
import { useMutationAPI, useQueryAPI } from 'hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, textClasses, textInputClasses } from 'styles';
const PersonalizationSettings = () => {
@@ -16,6 +16,7 @@ const PersonalizationSettings = () => {
const [update, setUpdate] = useState({});
const [debounced] = useDebouncedValue(update, 1000);
const { mutateAsync: editRow } = useMutationAPI();
const { isMobile } = useCommonHooks();
useEffect(() => {
if (personalData && personalIsFetched) {
setPersonal(personalData[0]);
@@ -52,7 +53,7 @@ const PersonalizationSettings = () => {
}}
/>
)}
<GridCol span={4}>
<GridCol span={isMobile ? 12 : 4}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<TextInput
label={'First Name'}
@@ -69,7 +70,7 @@ const PersonalizationSettings = () => {
/>
</Card>
</GridCol>
<GridCol span={4}>
<GridCol span={isMobile ? 12 : 4}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<TextInput
label={'Last Name'}
@@ -86,7 +87,7 @@ const PersonalizationSettings = () => {
/>
</Card>
</GridCol>
<GridCol span={4}>
<GridCol span={isMobile ? 12 : 4}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<TextInput
label={'Email'}

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

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
import { cardClasses, modalClasses, textInputClasses } from 'styles';
function DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -43,6 +43,7 @@ function DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}
fullScreen={isMobile}
onClose={() => {
closeModal();
}}
@@ -60,7 +61,7 @@ function DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Delete Client</Modal.Title>
<Modal.Title>Delete Search Provider</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>

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

@@ -33,7 +33,7 @@ const SearchProviderSettings = () => {
endpoint: endpoint,
});
const [providerData, setProviderData] = useState<any>([]);
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [newProvider, setNewProvider] = useState<any>({});
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
@@ -59,6 +59,7 @@ const SearchProviderSettings = () => {
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}
fullScreen={isMobile}
onClose={() => {
closeModal();
}}
@@ -76,7 +77,7 @@ const SearchProviderSettings = () => {
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Add a new application</Modal.Title>
<Modal.Title>Add a new Search Provider</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>
@@ -218,7 +219,7 @@ const SearchProviderSettings = () => {
<Stack w={'100%'} align='center'>
<Grid columns={18} w={'75%'}>
{providerData?.map((provider: any) => (
<GridCol span={6} key={provider.id}>
<GridCol span={isMobile ? 18 : 6} key={provider.id}>
<Popover withArrow withOverlay withinPortal={false}>
<Popover.Target>
<Box

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

@@ -32,7 +32,7 @@ function ThemeModal({
closePicker,
handleSaveTheme,
}: any) {
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const viewportRef = useRef<HTMLDivElement>(null);
const [query, setQuery] = useState('');
const [hovered, setHovered] = useState(-1);
@@ -112,6 +112,7 @@ function ThemeModal({
classNames={modalClasses}
opened={opened}
onClose={handleClose}
fullScreen={isMobile}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,

3
src/pages/settings/components/Theming/ThemePlaylistModal.tsx
View File

@@ -23,7 +23,7 @@ function ThemePlaylistModal({
handleSavePlaylist,
allThemes,
}: any) {
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const [themeList, setThemeList] = useState<any>('[]');
useEffect(() => {
if (selectedPlaylist.themeList) {
@@ -36,6 +36,7 @@ function ThemePlaylistModal({
className={modalClasses.editThemeModal}
classNames={modalClasses}
opened={opened}
fullScreen={isMobile}
onClose={() => {
handleClose();
setThemeList('[]');

5
src/pages/settings/components/WoL/DebouncedWolClient.tsx
View File

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
import { cardClasses, modalClasses, textInputClasses } from 'styles';
function DebouncedWolClient({ wolClient, handleDelete }: any) {
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -43,6 +43,7 @@ function DebouncedWolClient({ wolClient, handleDelete }: any) {
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}
fullScreen={isMobile}
onClose={() => {
closeModal();
}}
@@ -60,7 +61,7 @@ function DebouncedWolClient({ wolClient, handleDelete }: any) {
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Delete Client</Modal.Title>
<Modal.Title>Delete WoL Client</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>

4
src/pages/settings/components/WoL/WolClientSettingsItem.tsx
View File

@@ -1,14 +1,16 @@
import { Card, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { FaLaptop } from 'react-icons/fa';
import { cardClasses } from 'styles';
function WolClientSettingsItem({ client }: any) {
const { isMobile } = useCommonHooks();
return (
<Card
className={cardClasses.settingsItemHover}
classNames={cardClasses}
h={200}
w={200}
w={isMobile ? '100%' : 200}
>
<Stack align='center' gap={0}>
<FaLaptop fontSize={100} />

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

@@ -34,7 +34,7 @@ const WolClientSettings = () => {
});
const [wolClients, setWolClients] = useState<any>([]);
const { mutateAsync } = useMutationAPI();
const { theme } = useCommonHooks();
const { theme, isMobile } = useCommonHooks();
const [newWolClient, setNewWolClient] = useState<any>({
hostname: '',
macAddress: '',
@@ -62,6 +62,7 @@ const WolClientSettings = () => {
className={modalClasses.helpModal}
classNames={modalClasses}
opened={modalOpened}
fullScreen={isMobile}
onClose={() => {
closeModal();
}}
@@ -79,7 +80,7 @@ const WolClientSettings = () => {
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Add a new application</Modal.Title>
<Modal.Title>Add a new WoL Client</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>
@@ -206,7 +207,7 @@ const WolClientSettings = () => {
<Stack w={'100%'} align='center'>
<Grid columns={18} w={'75%'}>
{wolClients?.map((client: any) => (
<GridCol span={6} key={client.id}>
<GridCol span={isMobile ? 18 : 6} key={client.id}>
<Popover withArrow withOverlay withinPortal={false}>
<Popover.Target>
<Box