Updates to help modal

src/components/HelpModal/HelpModal.tsx

@@ -43,9 +43,24 @@ export function HelpModal({
 					<Modal.CloseButton />
 				</Modal.Header>
 				<Modal.Body pb={'2rem'}>
+					<Stack
+						gap={0}
+						w={'100%'}
+						align='center'
+						style={{
+							width: '100%',
+							backgroundColor: 'var(--mantine-color-search-0)',
+							borderRadius: '8px',
+							padding: '1rem',
+							marginBottom: '1rem',
+						}}
+					>
+						Expand each of the sections below to find available Search Bar commands.
+					</Stack>
 					<Stack gap={0} w={'100%'} align='center'>
 						<HelpSection
 							name={'Search Providers'}
+							prefix={'/'}
 							items={providerData.map((provider: Provider) => {
 								return {
 									name: provider.name,
@@ -56,6 +71,7 @@ export function HelpModal({
 						<Stack my={'.5rem'} />
 						<HelpSection
 							name={'Available Applications'}
+							prefix={'!'}
 							items={applicationData.map((application: Application) => {
 								return {
 									name: application.url,
@@ -66,6 +82,7 @@ export function HelpModal({
 						<Stack my={'.5rem'} />
 						<HelpSection
 							name={'Available Clients'}
+							prefix={'>'}
 							items={clientData.map((client: GuacamoleClient) => {
 								return {
 									name: `${client.clientName} (${client.clientIdentifier})`,

src/components/HelpModal/HelpSection.tsx

@@ -1,13 +1,24 @@
-import { Group, Text } from '@mantine/core';
+import { ActionIcon, Group, Text } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
+import { useState } from 'react';
+import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
 import { textClasses } from 'styles';
 import type { SearchShortcut } from 'types';
 import HintItem from './HintItem';
 
-function HelpSection({ name, items }: { name: string; items: SearchShortcut[] }) {
+function HelpSection({
+	name,
+	prefix,
+	items,
+}: {
+	name: string;
+	prefix: string;
+	items: SearchShortcut[];
+}) {
 	const { theme } = useCommonHooks();
+	const [expand, setExpand] = useState(false);
 	return (
-		<Group gap={4}>
+		<Group gap={4} style={{ width: '100%' }}>
 			<Text
 				className={textClasses.helpTitle}
 				classNames={textClasses}
@@ -17,23 +28,50 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
 						: undefined,
 				}}
 			>
-				{name}
+				{name}{' '}
+				<ActionIcon onClick={() => setExpand(!expand)}>
+					{expand ? <FiChevronUp /> : <FiChevronDown />}
+				</ActionIcon>
 			</Text>
 			<Group
 				style={{
+					height: expand ? '100%' : '0px',
+					overflow: expand ? 'visible' : 'hidden',
 					width: '100%',
 					backgroundColor: 'var(--mantine-color-search-0)',
 					borderRadius: '8px',
 					padding: '1.5rem',
+					marginLeft: '1rem',
+					marginRight: '1rem',
 				}}
 			>
-				{items
-					?.toSorted((a: SearchShortcut, b: SearchShortcut) =>
-						a.command > b.command ? 1 : -1,
-					)
-					.map((item: SearchShortcut) => (
-						<HintItem key={item.command} command={item.command} name={item.name} />
-					))}
+				{expand ? (
+					items
+						?.toSorted((a: SearchShortcut, b: SearchShortcut) =>
+							a.command > b.command ? 1 : -1,
+						)
+						.map((item: SearchShortcut) => (
+							<HintItem key={item.command} command={item.command} name={item.name} />
+						))
+				) : (
+					<Group
+						style={{
+							width: '100%',
+							height: '100%',
+							justifyContent: 'center',
+							marginTop: '-1.5rem',
+						}}
+					>
+						<Text
+							style={{
+								color:
+									'color-mix(in srgb, var(--mantine-color-primary-0), transparent 75%)',
+							}}
+						>
+							Command prefix: {prefix}
+						</Text>
+					</Group>
+				)}
 			</Group>
 		</Group>
 	);