smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Search updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-09-04 16:43:03 -05:00
parent aef60a40c8
commit 2e05002c63
4 changed files with 223 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
package-lock.json generated
View File

@@ -14,9 +14,9 @@
"@mantine/form": "^8.2.8", "@mantine/form": "^8.2.8",
"@mantine/hooks": "^8.2.8", "@mantine/hooks": "^8.2.8",
"@mantine/notifications": "^8.2.8", "@mantine/notifications": "^8.2.8",
"@tanstack/react-query": "^5.85.9", "@tanstack/react-query": "^5.86.0",
"@tanstack/react-query-devtools": "^5.85.9", "@tanstack/react-query-devtools": "^5.86.0",
"@tanstack/react-query-persist-client": "^5.85.9", "@tanstack/react-query-persist-client": "^5.86.0",
"idb-keyval": "^6.2.2", "idb-keyval": "^6.2.2",
"jotai": "^2.13.1", "jotai": "^2.13.1",
"react": "^19.1.1", "react": "^19.1.1",
@@ -26,7 +26,7 @@
"recharts": "^3.1.2" "recharts": "^3.1.2"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^24.3.0", "@types/node": "^24.3.1",
"@types/react": "^19.1.12", "@types/react": "^19.1.12",
"@types/react-dom": "^19.1.9", "@types/react-dom": "^19.1.9",
"@vitejs/plugin-react": "^5.0.2", "@vitejs/plugin-react": "^5.0.2",
@@ -1642,9 +1642,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@tanstack/query-core": { "node_modules/@tanstack/query-core": {
"version": "5.85.9", "version": "5.86.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.9.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.86.0.tgz",
"integrity": "sha512-5fxb9vwyftYE6KFLhhhDyLr8NO75+Wpu7pmTo+TkwKmMX2oxZDoLwcqGP8ItKSpUMwk3urWgQDZfyWr5Jm9LsQ==", "integrity": "sha512-Y6ibQm6BXbw6w1p3a5LrPn8Ae64M0dx7hGmnhrm9P+XAkCCKXOwZN0J5Z1wK/0RdNHtR9o+sWHDXd4veNI60tQ==",
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1652,9 +1652,9 @@
} }
}, },
"node_modules/@tanstack/query-devtools": { "node_modules/@tanstack/query-devtools": {
"version": "5.84.0", "version": "5.86.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.84.0.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.86.0.tgz",
"integrity": "sha512-fbF3n+z1rqhvd9EoGp5knHkv3p5B2Zml1yNRjh7sNXklngYI5RVIWUrUjZ1RIcEoscarUb0+bOvIs5x9dwzOXQ==", "integrity": "sha512-/JDw9BP80eambEK/EsDMGAcsL2VFT+8F5KCOwierjPU7QP8Wt1GT32yJpn3qOinBM8/zS3Jy36+F0GiyJp411A==",
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1662,12 +1662,12 @@
} }
}, },
"node_modules/@tanstack/query-persist-client-core": { "node_modules/@tanstack/query-persist-client-core": {
"version": "5.85.9", "version": "5.86.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.85.9.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.86.0.tgz",
"integrity": "sha512-er7HfMjn6TQanWG5nudjRNZbo7ahf7IIdWN5kU7L2qRZ2kcw89TQZAZ74GIQsumOXZD7sUcHG2dylveFZNxlZA==", "integrity": "sha512-EHHfmqkqHd1Rak2xv4ZT3SwZuSAZ09D6WzuqA8DIXsB/Ir3H9HB/3O1jJe2/LhmgIYSf6k8jYiblK14dvqhd0w==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.85.9" "@tanstack/query-core": "5.86.0"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1675,12 +1675,12 @@
} }
}, },
"node_modules/@tanstack/react-query": { "node_modules/@tanstack/react-query": {
"version": "5.85.9", "version": "5.86.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.9.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.86.0.tgz",
"integrity": "sha512-2T5zgSpcOZXGkH/UObIbIkGmUPQqZqn7esVQFXLOze622h4spgWf5jmvrqAo9dnI13/hyMcNsF1jsoDcb59nJQ==", "integrity": "sha512-jgS/v0oSJkGHucv9zxOS8rL7mjATh1XO3K4eqAV4WMpAly8okcBrGi1YxRZN5S4B59F54x9JFjWrK5vMAvJYqA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.85.9" "@tanstack/query-core": "5.86.0"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1691,36 +1691,36 @@
} }
}, },
"node_modules/@tanstack/react-query-devtools": { "node_modules/@tanstack/react-query-devtools": {
"version": "5.85.9", "version": "5.86.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.85.9.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.86.0.tgz",
"integrity": "sha512-BAdhgwpzxkC1vdyCfiPbbC7FU/t/x6q2d9ZyhON/WykVUdznD69nlppuWpSIlIGipdRG7sF6tRZ6x3GtSq0EUQ==", "integrity": "sha512-+50IcXI+54qHx3IDccbTala4tkToKxa0WKqP4XWlTnP1mQNfHO3dJj8wwnzpG50os69kpSbnU8C98Q/i8b6lyA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-devtools": "5.84.0" "@tanstack/query-devtools": "5.86.0"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
}, },
"peerDependencies": { "peerDependencies": {
"@tanstack/react-query": "^5.85.9", "@tanstack/react-query": "^5.86.0",
"react": "^18 || ^19" "react": "^18 || ^19"
} }
}, },
"node_modules/@tanstack/react-query-persist-client": { "node_modules/@tanstack/react-query-persist-client": {
"version": "5.85.9", "version": "5.86.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.85.9.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.86.0.tgz",
"integrity": "sha512-h75Xyt/XDtk1oRmli5znQRXclT/iZpseTK7ScqEjaiZmPSREgg2mJb1blo2SB1swSidDNsCtnENLNH43PP0/9w==", "integrity": "sha512-XoRmykJk1KiEjaEG4BiCOcNVg6bPGVkNFckRwN4vigNKDhrDhAG35cZbqIjflCJWz2CzpjdFwkrdoum4y4pG2g==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-persist-client-core": "5.85.9" "@tanstack/query-persist-client-core": "5.86.0"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
}, },
"peerDependencies": { "peerDependencies": {
"@tanstack/react-query": "^5.85.9", "@tanstack/react-query": "^5.86.0",
"react": "^18 || ^19" "react": "^18 || ^19"
} }
}, },
@@ -1859,9 +1859,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "24.3.0", "version": "24.3.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.0.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.1.tgz",
"integrity": "sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==", "integrity": "sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

8
package.json
View File

@@ -16,9 +16,9 @@
"@mantine/form": "^8.2.8", "@mantine/form": "^8.2.8",
"@mantine/hooks": "^8.2.8", "@mantine/hooks": "^8.2.8",
"@mantine/notifications": "^8.2.8", "@mantine/notifications": "^8.2.8",
"@tanstack/react-query": "^5.85.9", "@tanstack/react-query": "^5.86.0",
"@tanstack/react-query-devtools": "^5.85.9", "@tanstack/react-query-devtools": "^5.86.0",
"@tanstack/react-query-persist-client": "^5.85.9", "@tanstack/react-query-persist-client": "^5.86.0",
"idb-keyval": "^6.2.2", "idb-keyval": "^6.2.2",
"jotai": "^2.13.1", "jotai": "^2.13.1",
"react": "^19.1.1", "react": "^19.1.1",
@@ -28,7 +28,7 @@
"recharts": "^3.1.2" "recharts": "^3.1.2"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^24.3.0", "@types/node": "^24.3.1",
"@types/react": "^19.1.12", "@types/react": "^19.1.12",
"@types/react-dom": "^19.1.9", "@types/react-dom": "^19.1.9",
"@vitejs/plugin-react": "^5.0.2", "@vitejs/plugin-react": "^5.0.2",

10
src/pages/homepage/Homepage.tsx
View File

@@ -1,4 +1,4 @@
import { Grid, Stack } from '@mantine/core'; import { Box, Grid, Stack } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import CurrentWeather from 'components/WeatherModal/CurrentWeather'; import CurrentWeather from 'components/WeatherModal/CurrentWeather';
import { useCommonHooks, useOSMAPI, useQueryAPI, useWeatherAPI } from 'hooks'; import { useCommonHooks, useOSMAPI, useQueryAPI, useWeatherAPI } from 'hooks';
@@ -219,6 +219,7 @@ export function Homepage() {
weatherModalOpened={weatherModalOpened} weatherModalOpened={weatherModalOpened}
closeWeatherModal={closeWeatherModal} closeWeatherModal={closeWeatherModal}
openWeatherModal={openWeatherModal} openWeatherModal={openWeatherModal}
position='top'
/> />
<Header <Header
greet={displayedGreeting} greet={displayedGreeting}
@@ -230,10 +231,10 @@ export function Homepage() {
<Bookmarks contentType={bookmarkFilter} /> <Bookmarks contentType={bookmarkFilter} />
</> </>
) : ( ) : (
<> <Box h={'100%'} w={'100%'}>
<Stack align='center'> <Stack align='center'>
<LargeHeader greet={displayedGreeting} date={date} /> <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} /> <CurrentWeather current={current} />
</Grid> </Grid>
</Stack> </Stack>
@@ -243,8 +244,9 @@ export function Homepage() {
weatherModalOpened={weatherModalOpened} weatherModalOpened={weatherModalOpened}
closeWeatherModal={closeWeatherModal} closeWeatherModal={closeWeatherModal}
openWeatherModal={openWeatherModal} openWeatherModal={openWeatherModal}
position='center'
/> />
</> </Box>
)} )}
<SettingsButton /> <SettingsButton />
</Stack> </Stack>

241
src/pages/homepage/components/Search/Search.tsx
View File

@@ -8,7 +8,7 @@ import {
Text, Text,
} from '@mantine/core'; } from '@mantine/core';
import { useDisclosure, useElementSize } from '@mantine/hooks'; import { useDisclosure, useElementSize } from '@mantine/hooks';
import { HelpModal, WeatherModal } from 'components'; import { AppItem, HelpModal, WeatherModal } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import * as fa6 from 'react-icons/fa6'; import * as fa6 from 'react-icons/fa6';
@@ -31,12 +31,14 @@ export default function Search({
weatherModalOpened, weatherModalOpened,
closeWeatherModal, closeWeatherModal,
openWeatherModal, openWeatherModal,
position,
}: { }: {
current: CurrentWeather; current: CurrentWeather;
extendedForecast: ExtendedForecast[]; extendedForecast: ExtendedForecast[];
weatherModalOpened: boolean; weatherModalOpened: boolean;
closeWeatherModal: () => void; closeWeatherModal: () => void;
openWeatherModal: () => void; openWeatherModal: () => void;
position: string;
}) { }) {
const { ref, height } = useElementSize(); const { ref, height } = useElementSize();
const allIcons: any = { ...fa6, ...vsc, ...si }; const allIcons: any = { ...fa6, ...vsc, ...si };
@@ -55,6 +57,7 @@ export default function Search({
endpoint: 'api/providers/default', endpoint: 'api/providers/default',
}); });
const [applications, setApplications] = useState<Application[]>([]); const [applications, setApplications] = useState<Application[]>([]);
const [filteredApplications, setFilteredApplications] = useState<Application[]>([]);
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]); const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
const searchEndpoint = 'api/searchHistory'; const searchEndpoint = 'api/searchHistory';
const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({ const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
@@ -296,7 +299,7 @@ export default function Search({
}; };
}); });
} }
return [ const historyOptions = [
...options ...options
.filter((option: any) => { .filter((option: any) => {
return splittedSearch.every((searchWord) => return splittedSearch.every((searchWord) =>
@@ -308,16 +311,23 @@ export default function Search({
); );
}) })
.slice(0, 10 * historyMult), .slice(0, 10 * historyMult),
{
label: 'Load more history...',
value: 'load',
id: 0,
dateTimeStamp: '',
prefix: '',
provider: '',
searchTerm: '',
},
]; ];
if (historyOptions.length >= 10 * historyMult) {
return [
...historyOptions,
{
label: 'Load more history...',
value: 'load',
id: 0,
dateTimeStamp: '',
prefix: '',
provider: '',
searchTerm: '',
},
];
}
return historyOptions;
}; };
useEffect(() => { useEffect(() => {
@@ -332,6 +342,16 @@ export default function Search({
} }
}, [applicationData, isApplicationDataFetching]); }, [applicationData, isApplicationDataFetching]);
useEffect(() => {
if (applications) {
setFilteredApplications(
applications.filter((app: Application) =>
app.name.toLowerCase().includes(searchValue.toLowerCase()),
),
);
}
}, [applications, searchValue]);
useEffect(() => { useEffect(() => {
if (bookmarkData && bookmarksIsFetched) { if (bookmarkData && bookmarksIsFetched) {
setBookmarks( setBookmarks(
@@ -384,25 +404,25 @@ export default function Search({
setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search'); setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search');
} }
}, [defaultProviderData, defaultProviderDataIsFetched]); }, [defaultProviderData, defaultProviderDataIsFetched]);
return ( return (
<> <>
{dropdownOpened && <Overlay blur={5} />} {dropdownOpened && <Overlay blur={5} onClick={closeDropdown} />}
<Stack <Stack
style={{ style={{
height: '100px', height: position === 'center' ? '100%' : '100px',
backgroundColor: 'transparent', backgroundColor: 'transparent',
textAlign: 'center', textAlign: 'center',
position: 'relative', position: 'relative',
padding: '.3rem', padding: '.3rem',
display: 'inline-block', display: position === 'center' ? 'inline-flex' : 'inline-block',
gap: 0, transition: 'margin-top .5s ease',
}} }}
align='center' align='center'
justify='center' justify='center'
w={'100%'} w={'100%'}
> >
<Select <Select
ref={ref}
classNames={selectClasses} classNames={selectClasses}
data={searchHistory.map((item: SearchHistoryItem) => ({ data={searchHistory.map((item: SearchHistoryItem) => ({
label: `${item.provider}`, label: `${item.provider}`,
@@ -416,7 +436,7 @@ export default function Search({
nothingFoundMessage={ nothingFoundMessage={
<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text> <Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
} }
data-active={placeholderValue !== ''} data-active={dropdownOpened}
dropdownOpened={dropdownOpened} dropdownOpened={dropdownOpened}
comboboxProps={{ comboboxProps={{
transitionProps: { transition: 'fade', duration: 200 }, transitionProps: { transition: 'fade', duration: 200 },
@@ -425,6 +445,9 @@ export default function Search({
wrapper: { wrapper: {
zIndex: 1000, zIndex: 1000,
}, },
root: {
width: '100%',
},
}} }}
spellCheck={true} spellCheck={true}
searchable searchable
@@ -506,7 +529,6 @@ export default function Search({
onBlur={() => { onBlur={() => {
setPlaceholderValue(''); setPlaceholderValue('');
setListIndex(-1); setListIndex(-1);
closeDropdown();
}} }}
onFocus={() => { onFocus={() => {
if (searchValue !== '') { if (searchValue !== '') {
@@ -524,69 +546,170 @@ export default function Search({
onInput={onInput} onInput={onInput}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
/> />
{dropdownOpened && ( {dropdownOpened && searchValue !== '' && (
<Group w={'100%'} justify='center'> <Group w={'100%'} justify='center'>
<Card <Card
w={'100%'} w={'100%'}
mt={`calc(${height}px + 1.5rem)`} mt={height > 0 ? `calc(${height}px + 1.5rem)` : '3.75rem'}
pos={'relative'} pos={'relative'}
style={{ style={{
zIndex: 1000, zIndex: 1000,
opacity: searchValue && dropdownOpened && bookmarks.length > 0 ? 1 : 0, opacity:
searchValue &&
dropdownOpened &&
(bookmarks.length > 0 || filteredApplications.length > 0)
? 1
: 0,
background: 'transparent', 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 <Group
w={'100%'} w={'100%'}
p={'1rem'} p={'1rem'}
style={{ style={{
backgroundColor: 'var(--mantine-color-search-0)', backgroundColor: 'var(--mantine-color-search-0)',
backdropFilter: 'blur(15px) brightness(1.75)', backdropFilter: 'blur(15px) brightness(1.75)',
borderRadius: '10px', borderRadius: '4px',
}} }}
> >
<Text c={'var(--mantine-color-primary-0)'} fz={'1.5rem'}> <Text c={'var(--mantine-color-primary-0)'} fz={'1.5rem'}>
Recommended items: Recommended items:
</Text> </Text>
</Group> </Group>
<Group <Group align='start' justify='space-between'>
w={'50%'} <Group
p={'1rem'} w={'49%'}
justify='center' p={'1rem'}
style={{ justify='center'
backgroundColor: 'var(--mantine-color-search-0)', style={{
backdropFilter: 'blur(15px) brightness(1.75)', backgroundColor: 'var(--mantine-color-search-0)',
borderRadius: '10px', backdropFilter: 'blur(15px) brightness(1.75)',
}} borderRadius: '4px',
> opacity:
<Stack> searchValue && dropdownOpened && bookmarks.length > 0 ? 1 : 0,
<Text }}
c={'var(--mantine-color-primary-0)'} >
fz={'1.25rem'} <Stack w={'100%'} mah={'636px'}>
style={{ fontWeight: 'bold', textDecoration: 'underline' }} <Text
> c={'var(--mantine-color-primary-0)'}
Bookmarks fz={'1.25rem'}
</Text> style={{ fontWeight: 'bold', textDecoration: 'underline' }}
{bookmarks >
.map((bookmark: Bookmark) => ( Bookmarks
<Text </Text>
key={bookmark.name} <Group
component='a' w={'100%'}
href={bookmark.url} gap={8}
c={'var(--mantine-color-primary-0)'} justify='space-between'
style={{ style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}
backgroundColor: 'var(--mantine-color-search-0)', >
padding: '.5rem', <Stack
borderRadius: '10px', w={bookmarks.length <= 5 ? '98%' : '48%'}
}} style={{ transition: 'all .4s ease-in-out' }}
> >
{bookmark.name} {bookmarks
</Text> .map((bookmark: Bookmark) => (
)) <Text
.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1)) key={bookmark.name}
.slice(0, 5)} component='a'
</Stack> 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> </Group>
</Stack> </Stack>
</Card> </Card>