Search updates

2025-09-04 16:43:03 -05:00
parent aef60a40c8
commit 2e05002c63
4 changed files with 223 additions and 98 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,9 +14,9 @@
 				"@mantine/form": "^8.2.8",
 				"@mantine/hooks": "^8.2.8",
 				"@mantine/notifications": "^8.2.8",
-				"@tanstack/react-query": "^5.85.9",
-				"@tanstack/react-query-devtools": "^5.85.9",
-				"@tanstack/react-query-persist-client": "^5.85.9",
+				"@tanstack/react-query": "^5.86.0",
+				"@tanstack/react-query-devtools": "^5.86.0",
+				"@tanstack/react-query-persist-client": "^5.86.0",
 				"idb-keyval": "^6.2.2",
 				"jotai": "^2.13.1",
 				"react": "^19.1.1",
@@ -26,7 +26,7 @@
 				"recharts": "^3.1.2"
 			},
 			"devDependencies": {
-				"@types/node": "^24.3.0",
+				"@types/node": "^24.3.1",
 				"@types/react": "^19.1.12",
 				"@types/react-dom": "^19.1.9",
 				"@vitejs/plugin-react": "^5.0.2",
@@ -1642,9 +1642,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@tanstack/query-core": {
-			"version": "5.85.9",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.9.tgz",
-			"integrity": "sha512-5fxb9vwyftYE6KFLhhhDyLr8NO75+Wpu7pmTo+TkwKmMX2oxZDoLwcqGP8ItKSpUMwk3urWgQDZfyWr5Jm9LsQ==",
+			"version": "5.86.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.86.0.tgz",
+			"integrity": "sha512-Y6ibQm6BXbw6w1p3a5LrPn8Ae64M0dx7hGmnhrm9P+XAkCCKXOwZN0J5Z1wK/0RdNHtR9o+sWHDXd4veNI60tQ==",
 			"license": "MIT",
 			"funding": {
 				"type": "github",
@@ -1652,9 +1652,9 @@
 			}
 		},
 		"node_modules/@tanstack/query-devtools": {
-			"version": "5.84.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.84.0.tgz",
-			"integrity": "sha512-fbF3n+z1rqhvd9EoGp5knHkv3p5B2Zml1yNRjh7sNXklngYI5RVIWUrUjZ1RIcEoscarUb0+bOvIs5x9dwzOXQ==",
+			"version": "5.86.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.86.0.tgz",
+			"integrity": "sha512-/JDw9BP80eambEK/EsDMGAcsL2VFT+8F5KCOwierjPU7QP8Wt1GT32yJpn3qOinBM8/zS3Jy36+F0GiyJp411A==",
 			"license": "MIT",
 			"funding": {
 				"type": "github",
@@ -1662,12 +1662,12 @@
 			}
 		},
 		"node_modules/@tanstack/query-persist-client-core": {
-			"version": "5.85.9",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.85.9.tgz",
-			"integrity": "sha512-er7HfMjn6TQanWG5nudjRNZbo7ahf7IIdWN5kU7L2qRZ2kcw89TQZAZ74GIQsumOXZD7sUcHG2dylveFZNxlZA==",
+			"version": "5.86.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.86.0.tgz",
+			"integrity": "sha512-EHHfmqkqHd1Rak2xv4ZT3SwZuSAZ09D6WzuqA8DIXsB/Ir3H9HB/3O1jJe2/LhmgIYSf6k8jYiblK14dvqhd0w==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.85.9"
+				"@tanstack/query-core": "5.86.0"
 			},
 			"funding": {
 				"type": "github",
@@ -1675,12 +1675,12 @@
 			}
 		},
 		"node_modules/@tanstack/react-query": {
-			"version": "5.85.9",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.9.tgz",
-			"integrity": "sha512-2T5zgSpcOZXGkH/UObIbIkGmUPQqZqn7esVQFXLOze622h4spgWf5jmvrqAo9dnI13/hyMcNsF1jsoDcb59nJQ==",
+			"version": "5.86.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.86.0.tgz",
+			"integrity": "sha512-jgS/v0oSJkGHucv9zxOS8rL7mjATh1XO3K4eqAV4WMpAly8okcBrGi1YxRZN5S4B59F54x9JFjWrK5vMAvJYqA==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.85.9"
+				"@tanstack/query-core": "5.86.0"
 			},
 			"funding": {
 				"type": "github",
@@ -1691,36 +1691,36 @@
 			}
 		},
 		"node_modules/@tanstack/react-query-devtools": {
-			"version": "5.85.9",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.85.9.tgz",
-			"integrity": "sha512-BAdhgwpzxkC1vdyCfiPbbC7FU/t/x6q2d9ZyhON/WykVUdznD69nlppuWpSIlIGipdRG7sF6tRZ6x3GtSq0EUQ==",
+			"version": "5.86.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.86.0.tgz",
+			"integrity": "sha512-+50IcXI+54qHx3IDccbTala4tkToKxa0WKqP4XWlTnP1mQNfHO3dJj8wwnzpG50os69kpSbnU8C98Q/i8b6lyA==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-devtools": "5.84.0"
+				"@tanstack/query-devtools": "5.86.0"
 			},
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.85.9",
+				"@tanstack/react-query": "^5.86.0",
 				"react": "^18 || ^19"
 			}
 		},
 		"node_modules/@tanstack/react-query-persist-client": {
-			"version": "5.85.9",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.85.9.tgz",
-			"integrity": "sha512-h75Xyt/XDtk1oRmli5znQRXclT/iZpseTK7ScqEjaiZmPSREgg2mJb1blo2SB1swSidDNsCtnENLNH43PP0/9w==",
+			"version": "5.86.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.86.0.tgz",
+			"integrity": "sha512-XoRmykJk1KiEjaEG4BiCOcNVg6bPGVkNFckRwN4vigNKDhrDhAG35cZbqIjflCJWz2CzpjdFwkrdoum4y4pG2g==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-persist-client-core": "5.85.9"
+				"@tanstack/query-persist-client-core": "5.86.0"
 			},
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.85.9",
+				"@tanstack/react-query": "^5.86.0",
 				"react": "^18 || ^19"
 			}
 		},
@@ -1859,9 +1859,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@types/node": {
-			"version": "24.3.0",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.0.tgz",
-			"integrity": "sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==",
+			"version": "24.3.1",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.1.tgz",
+			"integrity": "sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
--- a/package.json
+++ b/package.json
@@ -16,9 +16,9 @@
 		"@mantine/form": "^8.2.8",
 		"@mantine/hooks": "^8.2.8",
 		"@mantine/notifications": "^8.2.8",
-		"@tanstack/react-query": "^5.85.9",
-		"@tanstack/react-query-devtools": "^5.85.9",
-		"@tanstack/react-query-persist-client": "^5.85.9",
+		"@tanstack/react-query": "^5.86.0",
+		"@tanstack/react-query-devtools": "^5.86.0",
+		"@tanstack/react-query-persist-client": "^5.86.0",
 		"idb-keyval": "^6.2.2",
 		"jotai": "^2.13.1",
 		"react": "^19.1.1",
@@ -28,7 +28,7 @@
 		"recharts": "^3.1.2"
 	},
 	"devDependencies": {
-		"@types/node": "^24.3.0",
+		"@types/node": "^24.3.1",
 		"@types/react": "^19.1.12",
 		"@types/react-dom": "^19.1.9",
 		"@vitejs/plugin-react": "^5.0.2",
--- a/src/pages/homepage/Homepage.tsx
+++ b/src/pages/homepage/Homepage.tsx
@@ -1,4 +1,4 @@
-import { Grid, Stack } from '@mantine/core';
+import { Box, Grid, Stack } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import CurrentWeather from 'components/WeatherModal/CurrentWeather';
 import { useCommonHooks, useOSMAPI, useQueryAPI, useWeatherAPI } from 'hooks';
@@ -219,6 +219,7 @@ export function Homepage() {
 						weatherModalOpened={weatherModalOpened}
 						closeWeatherModal={closeWeatherModal}
 						openWeatherModal={openWeatherModal}
+						position='top'
 					/>
 					<Header
 						greet={displayedGreeting}
@@ -230,10 +231,10 @@ export function Homepage() {
 					<Bookmarks contentType={bookmarkFilter} />
 				</>
 			) : (
-				<>
+				<Box h={'100%'} w={'100%'}>
 					<Stack align='center'>
 						<LargeHeader greet={displayedGreeting} date={date} />
-						<Grid grow columns={24} pos={'absolute'} bottom={'1rem'} w={'50%'}>
+						<Grid grow columns={24} pos={'absolute'} bottom={'1rem'}>
 							<CurrentWeather current={current} />
 						</Grid>
 					</Stack>
@@ -243,8 +244,9 @@ export function Homepage() {
 						weatherModalOpened={weatherModalOpened}
 						closeWeatherModal={closeWeatherModal}
 						openWeatherModal={openWeatherModal}
+						position='center'
 					/>
-				</>
+				</Box>
 			)}
 			<SettingsButton />
 		</Stack>
--- a/src/pages/homepage/components/Search/Search.tsx
+++ b/src/pages/homepage/components/Search/Search.tsx
@@ -8,7 +8,7 @@ import {
 	Text,
 } from '@mantine/core';
 import { useDisclosure, useElementSize } from '@mantine/hooks';
-import { HelpModal, WeatherModal } from 'components';
+import { AppItem, HelpModal, WeatherModal } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import * as fa6 from 'react-icons/fa6';
@@ -31,12 +31,14 @@ export default function Search({
 	weatherModalOpened,
 	closeWeatherModal,
 	openWeatherModal,
+	position,
 }: {
 	current: CurrentWeather;
 	extendedForecast: ExtendedForecast[];
 	weatherModalOpened: boolean;
 	closeWeatherModal: () => void;
 	openWeatherModal: () => void;
+	position: string;
 }) {
 	const { ref, height } = useElementSize();
 	const allIcons: any = { ...fa6, ...vsc, ...si };
@@ -55,6 +57,7 @@ export default function Search({
 			endpoint: 'api/providers/default',
 		});
 	const [applications, setApplications] = useState<Application[]>([]);
+	const [filteredApplications, setFilteredApplications] = useState<Application[]>([]);
 	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
 	const searchEndpoint = 'api/searchHistory';
 	const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
@@ -296,7 +299,7 @@ export default function Search({
 					};
 				});
 		}
-		return [
+		const historyOptions = [
 			...options
 				.filter((option: any) => {
 					return splittedSearch.every((searchWord) =>
@@ -308,6 +311,11 @@ export default function Search({
 					);
 				})
 				.slice(0, 10 * historyMult),
+		];
+
+		if (historyOptions.length >= 10 * historyMult) {
+			return [
+				...historyOptions,
 				{
 					label: 'Load more history...',
 					value: 'load',
@@ -318,6 +326,8 @@ export default function Search({
 					searchTerm: '',
 				},
 			];
+		}
+		return historyOptions;
 	};

 	useEffect(() => {
@@ -332,6 +342,16 @@ export default function Search({
 		}
 	}, [applicationData, isApplicationDataFetching]);

+	useEffect(() => {
+		if (applications) {
+			setFilteredApplications(
+				applications.filter((app: Application) =>
+					app.name.toLowerCase().includes(searchValue.toLowerCase()),
+				),
+			);
+		}
+	}, [applications, searchValue]);
+
 	useEffect(() => {
 		if (bookmarkData && bookmarksIsFetched) {
 			setBookmarks(
@@ -384,25 +404,25 @@ export default function Search({
 			setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search');
 		}
 	}, [defaultProviderData, defaultProviderDataIsFetched]);
+
 	return (
 		<>
-			{dropdownOpened && <Overlay blur={5} />}
+			{dropdownOpened && <Overlay blur={5} onClick={closeDropdown} />}
 			<Stack
 				style={{
-					height: '100px',
+					height: position === 'center' ? '100%' : '100px',
 					backgroundColor: 'transparent',
 					textAlign: 'center',
 					position: 'relative',
 					padding: '.3rem',
-					display: 'inline-block',
-					gap: 0,
+					display: position === 'center' ? 'inline-flex' : 'inline-block',
+					transition: 'margin-top .5s ease',
 				}}
 				align='center'
 				justify='center'
 				w={'100%'}
 			>
 				<Select
-					ref={ref}
 					classNames={selectClasses}
 					data={searchHistory.map((item: SearchHistoryItem) => ({
 						label: `${item.provider}`,
@@ -416,7 +436,7 @@ export default function Search({
 					nothingFoundMessage={
 						<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
 					}
-					data-active={placeholderValue !== ''}
+					data-active={dropdownOpened}
 					dropdownOpened={dropdownOpened}
 					comboboxProps={{
 						transitionProps: { transition: 'fade', duration: 200 },
@@ -425,6 +445,9 @@ export default function Search({
 						wrapper: {
 							zIndex: 1000,
 						},
+						root: {
+							width: '100%',
+						},
 					}}
 					spellCheck={true}
 					searchable
@@ -506,7 +529,6 @@ export default function Search({
 					onBlur={() => {
 						setPlaceholderValue('');
 						setListIndex(-1);
-						closeDropdown();
 					}}
 					onFocus={() => {
 						if (searchValue !== '') {
@@ -524,43 +546,53 @@ export default function Search({
 					onInput={onInput}
 					onKeyUp={handleKeyUp}
 				/>
-				{dropdownOpened && (
+				{dropdownOpened && searchValue !== '' && (
 					<Group w={'100%'} justify='center'>
 						<Card
 							w={'100%'}
-							mt={`calc(${height}px + 1.5rem)`}
+							mt={height > 0 ? `calc(${height}px + 1.5rem)` : '3.75rem'}
 							pos={'relative'}
 							style={{
 								zIndex: 1000,
-								opacity: searchValue && dropdownOpened && bookmarks.length > 0 ? 1 : 0,
+								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}>
+							<Stack gap={8} w={'100%'}>
 								<Group
 									w={'100%'}
 									p={'1rem'}
 									style={{
 										backgroundColor: 'var(--mantine-color-search-0)',
 										backdropFilter: 'blur(15px) brightness(1.75)',
-										borderRadius: '10px',
+										borderRadius: '4px',
 									}}
 								>
 									<Text c={'var(--mantine-color-primary-0)'} fz={'1.5rem'}>
 										Recommended items:
 									</Text>
 								</Group>
+								<Group align='start' justify='space-between'>
 									<Group
-									w={'50%'}
+										w={'49%'}
 										p={'1rem'}
 										justify='center'
 										style={{
 											backgroundColor: 'var(--mantine-color-search-0)',
 											backdropFilter: 'blur(15px) brightness(1.75)',
-										borderRadius: '10px',
+											borderRadius: '4px',
+											opacity:
+												searchValue && dropdownOpened && bookmarks.length > 0 ? 1 : 0,
 										}}
 									>
-									<Stack>
+										<Stack w={'100%'} mah={'636px'}>
 											<Text
 												c={'var(--mantine-color-primary-0)'}
 												fz={'1.25rem'}
@@ -568,6 +600,16 @@ export default function Search({
 											>
 												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
@@ -579,6 +621,9 @@ export default function Search({
 																	backgroundColor: 'var(--mantine-color-search-0)',
 																	padding: '.5rem',
 																	borderRadius: '10px',
+																	overflow: 'ellipsis',
+																	whiteSpace: 'nowrap',
+																	textOverflow: 'ellipsis',
 																}}
 															>
 																{bookmark.name}
@@ -587,6 +632,84 @@ export default function Search({
 														.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>