New settings pages

src/components/DataTable/columns/PersonalizationColumns.tsx

@@ -1,61 +0,0 @@
-import type { MRT_ColumnDef } from 'mantine-react-table';
-import { useMemo } from 'react';
-
-export function PersonalizationColumns() {
-	const columns = useMemo<MRT_ColumnDef<any>[]>(
-		() => [
-			{
-				accessorFn: (row: any) => {
-					if (row.firstName) {
-						return `${row.firstName}`;
-					}
-					return '';
-				},
-				id: 'firstName',
-				header: 'First Name',
-				size: 50,
-				Cell: ({ renderedCellValue }) => renderedCellValue,
-				Header: ({ column }) => column.columnDef.header,
-			},
-			{
-				accessorFn: (row: any) => {
-					if (row.lastName) {
-						return `${row.lastName}`;
-					}
-					return '';
-				},
-				id: 'lastName',
-				header: 'Last Name',
-				Cell: ({ renderedCellValue }) => renderedCellValue,
-				Header: ({ column }) => column.columnDef.header,
-			},
-			{
-				accessorFn: (row: any) => {
-					if (row.email) {
-						return `${row.email}`;
-					}
-					return '';
-				},
-				id: 'email',
-				header: 'Email',
-				Cell: ({ renderedCellValue }) => renderedCellValue,
-				Header: ({ column }) => column.columnDef.header,
-			},
-			{
-				accessorFn: (row: any) => {
-					if (row.physicalAddress) {
-						return `${row.physicalAddress}`;
-					}
-					return '';
-				},
-				id: 'physicalAddress',
-				header: 'Address',
-				Cell: ({ renderedCellValue }) => renderedCellValue,
-				Header: ({ column }) => column.columnDef.header,
-			},
-		],
-		[],
-	);
-
-	return columns;
-}

src/components/HelpModal/HelpModal.tsx

@@ -1,15 +1,18 @@
-import { Divider, Group, Modal, Stack } from '@mantine/core';
+import { Divider, Modal, Stack } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { modalClasses } from 'styles';
-import HintItem from './HintItem';
+import HelpSection from './HelpSection';
 
 export function HelpModal({
+	setSearchValue,
+	setProviderLabel,
+	setProviderURL,
 	providerModalOpened,
 	closeProviderModal,
 	applicationData,
 	providerData,
 }: any) {
-	const { theme, setSearchValue, setProviderLabel, setProviderURL } = useCommonHooks();
+	const { theme } = useCommonHooks();
 	return (
 		<Modal.Root
 			size={'60%'}
@@ -17,10 +20,10 @@ export function HelpModal({
 			classNames={modalClasses}
 			opened={providerModalOpened}
 			onClose={() => {
-				closeProviderModal();
 				setSearchValue('');
 				setProviderLabel('Google Search');
 				setProviderURL('https://www.google.com/search?q=');
+				closeProviderModal();
 			}}
 			style={{
 				'--color-text-pri': theme.primaryColor,
@@ -41,67 +44,25 @@ export function HelpModal({
 				</Modal.Header>
 				<Modal.Body pb={'2rem'}>
 					<Stack gap={0} w={'100%'} align='center'>
-						<h3
-							style={{
-								zIndex: 0,
-								padding: '8px',
-								marginTop: 0,
-								marginBottom: -32,
-								borderRadius: '8px',
-								color: theme.backgroundColor,
-								backgroundColor: theme.borderColor,
-							}}
-						>
-							Search Providers
-						</h3>
-						<Divider py={8} color={theme.accentColor} />
-						<Group
-							style={{
-								width: '100%',
-								backgroundColor: theme.searchColor,
-								borderRadius: '8px',
-								padding: '24px',
-								justifyItems: 'center',
-							}}
-						>
-							{providerData?.map((provider: any) => (
-								<HintItem
-									key={provider.prefix}
-									command={provider.prefix}
-									item={provider.name}
-								/>
-							))}
-						</Group>
-						<h3
-							style={{
-								zIndex: 0,
-								padding: '8px',
-								marginBottom: -32,
-								borderRadius: '8px',
-								color: theme.backgroundColor,
-								backgroundColor: theme.borderColor,
-							}}
-						>
-							Available Applications
-						</h3>
-						<Divider py={8} color={theme.accentColor} />
-						<Group
-							style={{
-								width: '100%',
-								backgroundColor: theme.searchColor,
-								borderRadius: '8px',
-								padding: '32px',
-								justifyItems: 'center',
-							}}
-						>
-							{applicationData?.map((application: any) => (
-								<HintItem
-									key={application.id}
-									command={`!${application.baseUrl.substr(1).toLowerCase()}`}
-									item={application.url}
-								/>
-							))}
-						</Group>
+						<HelpSection
+							name={'Search Providers'}
+							items={providerData.map((provider: any) => {
+								return {
+									name: provider.name,
+									command: provider.prefix,
+								};
+							})}
+						/>
+						<Divider my={8} color={theme.accentColor} />
+						<HelpSection
+							name={'Available Applications'}
+							items={applicationData.map((application: any) => {
+								return {
+									name: application.url,
+									command: `!${application.baseUrl.substring(1).toLowerCase()}`,
+								};
+							})}
+						/>
 					</Stack>
 				</Modal.Body>
 			</Modal.Content>

src/components/HelpModal/HelpSection.tsx

@@ -0,0 +1,42 @@
+import { Divider, Group } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import HintItem from './HintItem';
+
+function HelpSection({ name, items }: any) {
+	const { theme } = useCommonHooks();
+	return (
+		<>
+			<h3
+				style={{
+					zIndex: 0,
+					padding: '8px',
+					marginTop: 0,
+					marginBottom: -32,
+					borderRadius: '8px',
+					color: theme.backgroundColor,
+					backgroundColor: theme.borderColor,
+				}}
+			>
+				{name}
+			</h3>
+			<Divider py={8} color={theme.accentColor} />
+			<Group
+				style={{
+					width: '100%',
+					backgroundColor: theme.searchColor,
+					borderRadius: '8px',
+					padding: '24px',
+					justifyItems: 'center',
+				}}
+			>
+				{items
+					?.sort((a: any, b: any) => (a.command > b.command ? 1 : -1))
+					.map((item: any) => (
+						<HintItem key={item.command} command={item.command} name={item.name} />
+					))}
+			</Group>
+		</>
+	);
+}
+
+export default HelpSection;

src/components/HelpModal/HintItem.tsx

@@ -1,6 +1,6 @@
 import { Group, Text } from '@mantine/core';
 
-function HintItem({ command, item }: any) {
+function HintItem({ command, name }: any) {
 	return (
 		<Group
 			gap={0}
@@ -31,7 +31,7 @@ function HintItem({ command, item }: any) {
 					borderRadius: '10px',
 				}}
 			>
-				{item}
+				{name}
 			</Text>
 		</Group>
 	);

src/components/Shared/DebouncedMessage.tsx

@@ -0,0 +1,120 @@
+import {
+	ActionIcon,
+	Button,
+	Card,
+	Group,
+	Modal,
+	Stack,
+	Text,
+	TextInput,
+	Tooltip,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconTrash } from '@tabler/icons-react';
+import { useCommonHooks } from 'hooks';
+import { cardClasses, modalClasses, textInputClasses } from 'styles';
+
+function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
+	const { theme } = useCommonHooks();
+	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
+	return (
+		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+			<Modal.Root
+				size={'60%'}
+				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>Add a new message</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 message?</Text>
+							<Text
+								style={{
+									fontWeight: 'bold',
+									fontSize: '20px',
+									padding: '8px',
+									margin: '8px',
+									borderRadius: '10px',
+									backgroundColor: 'var(--color-text-acc)',
+									color: 'var(--color-background)',
+								}}
+							>{`"${message.message}"`}</Text>
+							<Text c='red'>This action cannot be undone!</Text>
+							<Group pos={'absolute'} bottom={8}>
+								<Button
+									color={'red'}
+									styles={{ label: { color: 'black' } }}
+									onClick={() => {
+										handleDelete(message);
+										closeModal();
+									}}
+								>
+									Delete
+								</Button>
+								<Button
+									color={'grey'}
+									styles={{ label: { color: 'black' } }}
+									onClick={() => {
+										closeModal();
+									}}
+								>
+									Cancel
+								</Button>
+							</Group>
+						</Stack>
+					</Modal.Body>
+				</Modal.Content>
+			</Modal.Root>
+			<Tooltip
+				color={theme.primaryColor}
+				bd={`solid 1px ${theme.borderColor}`}
+				label={'Delete'}
+			>
+				<ActionIcon
+					pos={'absolute'}
+					right={16}
+					color='red'
+					onClick={() => {
+						openModal();
+					}}
+				>
+					<IconTrash />
+				</ActionIcon>
+			</Tooltip>
+			<TextInput
+				label={label}
+				className={textInputClasses.settingsItem}
+				pt={16}
+				classNames={textInputClasses}
+				defaultValue={message.message}
+				onChange={(event) => {
+					setMessage({
+						...message,
+						message: event.target.value,
+					});
+				}}
+			/>
+		</Card>
+	);
+}
+
+export default DebouncedMessage;

src/components/index.ts

@@ -7,6 +7,5 @@ export { ApplicationColumns } from './DataTable/columns/ApplicationColumns';
 export { BookmarkColumns } from './DataTable/columns/BookmarkColumns';
 export { CategoryColumns } from './DataTable/columns/CategoryColumns';
 export { MessagesColumns } from './DataTable/columns/MessagesColumns';
-export { PersonalizationColumns } from './DataTable/columns/PersonalizationColumns';
 export { SearchProviderColumns } from './DataTable/columns/SearchProviderColumns';
 export { WolClientColumns } from './DataTable/columns/WolClientColumns';