New settings pages

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>
 	);