Minor Search updates

src/pages/homepage/components/Search/Search.tsx

@@ -8,7 +8,7 @@ import {
 	Text,
 } from '@mantine/core';
 import { useDisclosure, useElementSize } from '@mantine/hooks';
-import { AppItem, HelpModal, WeatherModal } from 'components';
+import { HelpModal, WeatherModal } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import * as fa6 from 'react-icons/fa6';
@@ -23,7 +23,9 @@ import type {
 	Provider,
 	SearchHistoryItem,
 } from 'types';
-import SearchSelectItem from './SearchSelectItem';
+import RecommendedApplications from './components/RecommendedApplications';
+import RecommendedBookmarks from './components/RecommendedBookmarks';
+import SearchSelectItem from './components/SearchSelectItem';
 
 export default function Search({
 	current,
@@ -90,12 +92,12 @@ export default function Search({
 	} = useCommonHooks();
 	const [placeholderValue, setPlaceholderValue] = useState<string>('');
 	const [value, setValue] = useState(0);
-	const [historyMult, setHistoryMult] = useState(1);
+	const [historyMultiplier, setHistoryMultiplier] = useState(1);
 
 	const handleResetSearch = () => {
 		setSearchValue('');
 		setListIndex(-1);
-		setHistoryMult(1);
+		setHistoryMultiplier(1);
 		setProviderLabel(defaultProviderLabel);
 		setProviderURL(defaultProviderURL);
 	};
@@ -310,10 +312,10 @@ export default function Search({
 							.some((word: string) => word.includes(searchWord)),
 					);
 				})
-				.slice(0, 10 * historyMult),
+				.slice(0, 10 * historyMultiplier),
 		];
 
-		if (historyOptions.length >= 10 * historyMult) {
+		if (historyOptions.length >= 10 * historyMultiplier) {
 			return [
 				...historyOptions,
 				{
@@ -330,6 +332,72 @@ export default function Search({
 		return historyOptions;
 	};
 
+	const renderItem: any = (item: any) => {
+		const Icon = allIcons[item.option.icon];
+		return !searchValue.startsWith('!') ? (
+			item.option.value === 'load' ? (
+				<Group
+					pos={'relative'}
+					m={0}
+					p={0}
+					gap={0}
+					w={'100%'}
+					h={'2rem'}
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						setHistoryMultiplier((prev: number) => prev + 1);
+					}}
+				>
+					<Text
+						w={'100%'}
+						c={'var(--mantine-color-accent-0)'}
+						style={{ textAlign: 'center' }}
+					>
+						{item.option.label}
+					</Text>
+				</Group>
+			) : (
+				<SearchSelectItem
+					item={item}
+					handleSearchHistoryItem={handleSearchHistoryItem}
+					searchEndpoint={searchEndpoint}
+					setSearchValue={setSearchValue}
+				/>
+			)
+		) : (
+			<Group
+				pos={'relative'}
+				m={0}
+				p={0}
+				gap={0}
+				justify='center'
+				w={'100%'}
+				onClick={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					handleAppLaunchItem(item);
+				}}
+			>
+				<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
+					Launch
+				</Text>
+				{Icon && (
+					<Icon
+						style={{
+							color: 'var(--mantine-color-primary-0)',
+							height: '2rem',
+							width: '2rem',
+						}}
+					/>
+				)}
+				<Text pos={'absolute'} right={'1rem'} c={'var(--mantine-color-accent-0)'}>
+					{item.option.name}
+				</Text>
+			</Group>
+		);
+	};
+
 	useEffect(() => {
 		if (providerData && providerDataIsFetched) {
 			setProviders(providerData);
@@ -368,7 +436,7 @@ export default function Search({
 		if (historyData && historyDataIsFetched) {
 			setSearchHistory(historyData);
 			if (filteredHistory.length === 0) {
-				setFilteredHistory(historyData.slice(0, 10 * historyMult));
+				setFilteredHistory(historyData.slice(0, 10 * historyMultiplier));
 			}
 		}
 	}, [historyData, historyDataIsFetched]);
@@ -417,10 +485,10 @@ export default function Search({
 					padding: '.3rem',
 					display: position === 'center' ? 'inline-flex' : 'inline-block',
 					transition: 'margin-top .5s ease',
+					width: '100%',
 				}}
 				align='center'
 				justify='center'
-				w={'100%'}
 			>
 				<Select
 					classNames={selectClasses}
@@ -461,71 +529,7 @@ export default function Search({
 						style: { color: 'var(--mantine-color-accent-0)', marginRight: '.5rem' },
 					}}
 					scrollAreaProps={{ viewportRef: ref }}
-					renderOption={(item: any) => {
-						const Icon = allIcons[item.option.icon];
-						return !searchValue.startsWith('!') ? (
-							item.option.value === 'load' ? (
-								<Group
-									pos={'relative'}
-									m={0}
-									p={0}
-									gap={0}
-									w={'100%'}
-									h={'2rem'}
-									onClick={(e) => {
-										e.preventDefault();
-										e.stopPropagation();
-										setHistoryMult((prev: number) => prev + 1);
-									}}
-								>
-									<Text
-										w={'100%'}
-										c={'var(--mantine-color-accent-0)'}
-										style={{ textAlign: 'center' }}
-									>
-										{item.option.label}
-									</Text>
-								</Group>
-							) : (
-								<SearchSelectItem
-									item={item}
-									handleSearchHistoryItem={handleSearchHistoryItem}
-									searchEndpoint={searchEndpoint}
-									setSearchValue={setSearchValue}
-								/>
-							)
-						) : (
-							<Group
-								pos={'relative'}
-								m={0}
-								p={0}
-								gap={0}
-								justify='center'
-								w={'100%'}
-								onClick={(e) => {
-									e.preventDefault();
-									e.stopPropagation();
-									handleAppLaunchItem(item);
-								}}
-							>
-								<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
-									Launch
-								</Text>
-								{Icon && (
-									<Icon
-										style={{
-											color: 'var(--mantine-color-primary-0)',
-											height: '2rem',
-											width: '2rem',
-										}}
-									/>
-								)}
-								<Text pos={'absolute'} right={'1rem'} c={'var(--mantine-color-accent-0)'}>
-									{item.option.name}
-								</Text>
-							</Group>
-						);
-					}}
+					renderOption={(item: any) => renderItem(item)}
 					onBlur={() => {
 						setPlaceholderValue('');
 						setListIndex(-1);
@@ -546,190 +550,68 @@ export default function Search({
 					onInput={onInput}
 					onKeyUp={handleKeyUp}
 				/>
-				{dropdownOpened && searchValue !== '' && (
-					<Group w={'100%'} justify='center'>
-						<Card
-							w={'100%'}
-							mt={height > 0 ? `calc(${height}px + 1.5rem)` : '3.75rem'}
-							pos={'relative'}
-							style={{
-								zIndex: 1000,
-								opacity:
-									searchValue &&
-									dropdownOpened &&
-									(bookmarks.length > 0 || filteredApplications.length > 0)
-										? 1
-										: 0,
-								background: 'transparent',
-								padding: '0px',
-								transition: 'margin-top .5s ease-in-out, opacity .5s ease-in-out .5s',
-							}}
-						>
-							<Stack gap={8} w={'100%'}>
-								<Group
-									w={'100%'}
-									p={'1rem'}
-									style={{
-										backgroundColor: 'var(--mantine-color-search-0)',
-										backdropFilter: 'blur(15px) brightness(1.75)',
-										borderRadius: '4px',
-									}}
-								>
-									<Text c={'var(--mantine-color-primary-0)'} fz={'1.5rem'}>
-										Recommended items:
-									</Text>
-								</Group>
-								<Group align='start' justify='space-between'>
-									<Group
-										w={'49%'}
-										p={'1rem'}
-										justify='center'
-										style={{
-											backgroundColor: 'var(--mantine-color-search-0)',
-											backdropFilter: 'blur(15px) brightness(1.75)',
-											borderRadius: '4px',
-											opacity:
-												searchValue && dropdownOpened && bookmarks.length > 0 ? 1 : 0,
-										}}
-									>
-										<Stack w={'100%'} mah={'636px'}>
-											<Text
-												c={'var(--mantine-color-primary-0)'}
-												fz={'1.25rem'}
-												style={{ fontWeight: 'bold', textDecoration: 'underline' }}
-											>
-												Bookmarks
-											</Text>
-											<Group
-												w={'100%'}
-												gap={8}
-												justify='space-between'
-												style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}
-											>
-												<Stack
-													w={bookmarks.length <= 5 ? '98%' : '48%'}
-													style={{ transition: 'all .4s ease-in-out' }}
-												>
-													{bookmarks
-														.map((bookmark: Bookmark) => (
-															<Text
-																key={bookmark.name}
-																component='a'
-																href={bookmark.url}
-																c={'var(--mantine-color-primary-0)'}
-																style={{
-																	backgroundColor: 'var(--mantine-color-search-0)',
-																	padding: '.5rem',
-																	borderRadius: '10px',
-																	overflow: 'ellipsis',
-																	whiteSpace: 'nowrap',
-																	textOverflow: 'ellipsis',
-																}}
-															>
-																{bookmark.name}
-															</Text>
-														))
-														.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1))
-														.slice(0, 5)}
-												</Stack>
-												<Stack
-													w={bookmarks.length <= 5 ? '0%' : '48%'}
-													style={{ transition: 'all .4s ease-in-out' }}
-												>
-													{bookmarks.length > 5 &&
-														bookmarks
-															.map((bookmark: Bookmark) => (
-																<Text
-																	key={bookmark.name}
-																	component='a'
-																	href={bookmark.url}
-																	c={'var(--mantine-color-primary-0)'}
-																	style={{
-																		backgroundColor: 'var(--mantine-color-search-0)',
-																		padding: '.5rem',
-																		borderRadius: '10px',
-																		overflow: 'ellipsis',
-																		whiteSpace: 'nowrap',
-																		textOverflow: 'ellipsis',
-																	}}
-																>
-																	{bookmark.name}
-																</Text>
-															))
-															.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1))
-															.slice(5, 10)}
-												</Stack>
-											</Group>
-										</Stack>
-									</Group>
-									<Group
-										w={'49%'}
-										p={'1rem'}
-										justify='center'
-										style={{
-											backgroundColor: 'var(--mantine-color-search-0)',
-											backdropFilter: 'blur(15px) brightness(1.75)',
-											borderRadius: '4px',
-											opacity:
-												searchValue && dropdownOpened && filteredApplications.length > 0
-													? 1
-													: 0,
-										}}
-									>
-										<Stack w={'100%'} mah={'636px'}>
-											<Text
-												c={'var(--mantine-color-primary-0)'}
-												fz={'1.25rem'}
-												style={{ fontWeight: 'bold', textDecoration: 'underline' }}
-											>
-												Applications
-											</Text>
-
-											<Group
-												w={'100%'}
-												gap={8}
-												justify='space-between'
-												style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}
-											>
-												<Stack w={'98%'} style={{ transition: 'all .4s ease-in-out' }}>
-													{filteredApplications
-														.map((application: Application) => (
-															<AppItem
-																key={application.name}
-																url={application.url}
-																name={application.name}
-																icon={application.icon}
-																enabled={application.enabled}
-																scale={1}
-																linksActive={true}
-															/>
-														))
-														.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1))
-														.slice(0, 5)}
-												</Stack>
-											</Group>
-										</Stack>
-									</Group>
-								</Group>
-							</Stack>
-						</Card>
-					</Group>
+				{dropdownOpened && (
+					<Card
+						w={'100%'}
+						mt={height > 0 ? `calc(${height}px + 1.5rem)` : '3.75rem'}
+						pos={'relative'}
+						style={{
+							zIndex: 1000,
+							opacity:
+								searchValue &&
+								dropdownOpened &&
+								(bookmarks.length > 0 || filteredApplications.length > 0)
+									? 1
+									: 0,
+							background: 'transparent',
+							padding: '0px',
+							transition: 'margin-top .5s ease-in-out, opacity .5s ease-in-out .5s',
+						}}
+					>
+						<Stack gap={8} w={'100%'}>
+							<Text
+								w={'100%'}
+								p={'1rem'}
+								c={'var(--mantine-color-primary-0)'}
+								fz={'1.5rem'}
+								style={{
+									backgroundColor: 'var(--mantine-color-search-0)',
+									backdropFilter: 'blur(15px) brightness(1.75)',
+									borderRadius: '4px',
+								}}
+							>
+								Recommended items:
+							</Text>
+							<Group align='start' justify='space-between'>
+								<RecommendedBookmarks
+									bookmarks={bookmarks}
+									searchValue={searchValue}
+									dropdownOpened={dropdownOpened}
+								/>
+								<RecommendedApplications
+									searchValue={searchValue}
+									dropdownOpened={dropdownOpened}
+									filteredApplications={filteredApplications}
+								/>
+							</Group>
+						</Stack>
+					</Card>
 				)}
-				<HelpModal
-					handleResetSearch={handleResetSearch}
-					applicationData={applications}
-					providerData={providers}
-					providerModalOpened={providerModalOpened}
-					closeProviderModal={closeProviderModal}
-				/>
-				<WeatherModal
-					current={current}
-					extendedForecast={extendedForecast}
-					weatherModalOpened={weatherModalOpened}
-					handleResetSearch={handleResetSearch}
-					closeWeatherModal={closeWeatherModal}
-				/>
 			</Stack>
+			<HelpModal
+				handleResetSearch={handleResetSearch}
+				applicationData={applications}
+				providerData={providers}
+				providerModalOpened={providerModalOpened}
+				closeProviderModal={closeProviderModal}
+			/>
+			<WeatherModal
+				current={current}
+				extendedForecast={extendedForecast}
+				weatherModalOpened={weatherModalOpened}
+				handleResetSearch={handleResetSearch}
+				closeWeatherModal={closeWeatherModal}
+			/>
 		</>
 	);
 }

src/pages/homepage/components/Search/components/RecommendedApplications.tsx

@@ -0,0 +1,61 @@
+import { Group, Stack, Text } from '@mantine/core';
+import { AppItem } from 'components';
+import type { Application } from 'types';
+
+export default function RecommendedApplications({
+	searchValue,
+	dropdownOpened,
+	filteredApplications,
+}: {
+	searchValue: string;
+	dropdownOpened: boolean;
+	filteredApplications: Application[];
+}) {
+	return (
+		<Group
+			w={'49%'}
+			p={'1rem'}
+			justify='center'
+			style={{
+				backgroundColor: 'var(--mantine-color-search-0)',
+				backdropFilter: 'blur(15px) brightness(1.75)',
+				borderRadius: '4px',
+				opacity: searchValue && dropdownOpened && filteredApplications.length > 0 ? 1 : 0,
+			}}
+		>
+			<Stack w={'100%'} mah={'636px'}>
+				<Text
+					c={'var(--mantine-color-primary-0)'}
+					fz={'1.25rem'}
+					style={{ fontWeight: 'bold', textDecoration: 'underline' }}
+				>
+					Applications
+				</Text>
+
+				<Group
+					w={'100%'}
+					gap={8}
+					justify='space-between'
+					style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}
+				>
+					<Stack w={'98%'} style={{ transition: 'all .4s ease-in-out' }}>
+						{filteredApplications
+							.map((application: Application) => (
+								<AppItem
+									key={application.name}
+									url={application.url}
+									name={application.name}
+									icon={application.icon}
+									enabled={application.enabled}
+									scale={1}
+									linksActive={true}
+								/>
+							))
+							.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1))
+							.slice(0, 5)}
+					</Stack>
+				</Group>
+			</Stack>
+		</Group>
+	);
+}

src/pages/homepage/components/Search/components/RecommendedBookmarks.tsx

@@ -0,0 +1,98 @@
+import { Group, Stack, Text } from '@mantine/core';
+import type { Bookmark } from 'types';
+
+export default function RecommendedBookmarks({
+	bookmarks,
+	searchValue,
+	dropdownOpened,
+}: {
+	bookmarks: Bookmark[];
+	searchValue: string;
+	dropdownOpened: boolean;
+}) {
+	return (
+		<Group
+			w={'49%'}
+			p={'1rem'}
+			justify='center'
+			style={{
+				backgroundColor: 'var(--mantine-color-search-0)',
+				backdropFilter: 'blur(15px) brightness(1.75)',
+				borderRadius: '4px',
+				opacity: searchValue && dropdownOpened && bookmarks.length > 0 ? 1 : 0,
+			}}
+		>
+			<Stack w={'100%'} mah={'636px'}>
+				<Text
+					c={'var(--mantine-color-primary-0)'}
+					fz={'1.25rem'}
+					style={{ fontWeight: 'bold', textDecoration: 'underline' }}
+				>
+					Bookmarks
+				</Text>
+				<Group
+					w={'100%'}
+					h={'100%'}
+					gap={8}
+					justify='space-between'
+					align='start'
+					style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}
+				>
+					<Stack
+						w={bookmarks.length <= 5 ? '98%' : '48%'}
+						style={{ transition: 'all .4s ease-in-out' }}
+					>
+						{bookmarks
+							.map((bookmark: Bookmark) => (
+								<Text
+									key={bookmark.name}
+									component='a'
+									href={bookmark.url}
+									c={'var(--mantine-color-primary-0)'}
+									style={{
+										backgroundColor: 'var(--mantine-color-search-0)',
+										padding: '.5rem',
+										borderRadius: '10px',
+										overflow: 'ellipsis',
+										whiteSpace: 'nowrap',
+										textOverflow: 'ellipsis',
+									}}
+								>
+									{bookmark.name}
+								</Text>
+							))
+							.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1))
+							.slice(0, 5)}
+					</Stack>
+					<Stack
+						w={bookmarks.length <= 5 ? '0%' : '48%'}
+						style={{ transition: 'all .4s ease-in-out' }}
+					>
+						{bookmarks.length > 5 &&
+							bookmarks
+								.map((bookmark: Bookmark) => (
+									<Text
+										key={bookmark.name}
+										component='a'
+										href={bookmark.url}
+										c={'var(--mantine-color-primary-0)'}
+										style={{
+											backgroundColor: 'var(--mantine-color-search-0)',
+											padding: '.5rem',
+											borderRadius: '10px',
+											overflow: 'ellipsis',
+											whiteSpace: 'nowrap',
+											textOverflow: 'ellipsis',
+										}}
+									>
+										{bookmark.name}
+									</Text>
+								))
+								.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1))
+								.slice(5, 10)}
+					</Stack>
+				</Group>
+			</Stack>
+		</Group>
+	);
+}