diff --git a/package.json b/package.json index 7d5ddde..979fe8e 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "dev": "vite", "build": "vite build", - "lint": "npx @biomejs/biome lint . --write --unsafe && npx @biomejs/biome format . --write && npx @biomejs/biome check . --write --unsafe && npx @biomejs/biome ci . --formatter-enabled=true --linter-enabled=true --organize-imports-enabled=true", + "lint": "npx @biomejs/biome lint . --write --unsafe && npx @biomejs/biome format . --write && npx @biomejs/biome check . --write --unsafe && npx @biomejs/biome ci . --formatter-enabled=true --linter-enabled=true", "preview": "vite preview" }, "dependencies": { diff --git a/src/pages/homepage/components/Search/Search.tsx b/src/pages/homepage/components/Search/Search.tsx index fe36a4f..eed9711 100644 --- a/src/pages/homepage/components/Search/Search.tsx +++ b/src/pages/homepage/components/Search/Search.tsx @@ -1,8 +1,11 @@ -import { type OptionsFilter, Select, Stack, Text } from '@mantine/core'; +import { Group, type OptionsFilter, Select, Stack, Text } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import { HelpModal, WeatherModal } from 'components'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useEffect, useState } from 'react'; +import * as fa6 from 'react-icons/fa6'; +import * as si from 'react-icons/si'; +import * as vsc from 'react-icons/vsc'; import { selectClasses } from 'styles'; import type { Application, @@ -11,7 +14,7 @@ import type { Provider, SearchHistoryItem, } from 'types'; -import SearchSelectItem from './SearchHistoryItem'; +import SearchSelectItem from './SearchSelectItem'; export default function Search({ current, @@ -26,6 +29,7 @@ export default function Search({ closeWeatherModal: () => void; openWeatherModal: () => void; }) { + const allIcons: any = { ...fa6, ...vsc, ...si }; const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({ endpoint: 'api/providers', }); @@ -67,6 +71,14 @@ export default function Search({ open(`${url}${option.searchTerm}`, '_self'); }; + const handleAppLaunchItem = ({ option }: { option: any }) => { + const validUrl = + option.url.startsWith('http://') || option.url.startsWith('https://') + ? option.url + : `http://${option.url}`; + open(validUrl, '_self'); + }; + const handleKeyPress = (item: any) => { let option = ''; let subtext = ''; @@ -286,7 +298,7 @@ export default function Search({ }, [historyData, historyDataIsFetched]); useEffect(() => { - if (dropdownOpened) { + if (dropdownOpened && listIndex >= 0) { setPlaceholderValue( searchHistory.length > 0 ? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}` @@ -346,13 +358,46 @@ export default function Search({ autoFocus={!isMobile} leftSection={providerLabel} rightSection={} - renderOption={(item: any) => ( - - )} + renderOption={(item: any) => { + const Icon = allIcons[item.option.icon]; + return !searchValue.startsWith('!') ? ( + + ) : ( + { + e.preventDefault(); + e.stopPropagation(); + handleAppLaunchItem(item); + }} + > + + Launch + + {Icon && ( + + )} + + {item.option.name} + + + ); + }} onBlur={() => { setPlaceholderValue(''); setListIndex(0); diff --git a/src/pages/homepage/components/Search/SearchHistoryItem.tsx b/src/pages/homepage/components/Search/SearchSelectItem.tsx similarity index 100% rename from src/pages/homepage/components/Search/SearchHistoryItem.tsx rename to src/pages/homepage/components/Search/SearchSelectItem.tsx