Fullscreen test

src/pages/homepage/Homepage.tsx

@@ -1,13 +1,15 @@
-import { Stack } from '@mantine/core';
+import { Grid, Stack } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import CurrentWeather from 'components/WeatherModal/CurrentWeather';
 import { useCommonHooks, useOSMAPI, useQueryAPI, useWeatherAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { stackClasses } from 'styles';
-import type { CurrentWeather, OutlookWeather } from 'types';
-import type { ExtendedForecast } from 'types/weather';
+import type { CurrentWeather as CW, OutlookWeather } from 'types';
+import type { ExtendedForecast as EF } from 'types/weather';
 import Applications from './components/Applications/Applications';
 import Bookmarks from './components/Bookmarks/Bookmarks';
 import Header from './components/Header/Header';
+import LargeHeader from './components/Header/LargeHeader';
 import Search from './components/Search/Search';
 import SettingsButton from './components/SettingsButton';
 
@@ -105,7 +107,7 @@ export function Homepage() {
 		x: points?.properties.gridX || currentLocation.x,
 		y: points?.properties.gridY || currentLocation.y,
 	});
-	const [current, setCurrent] = useState<CurrentWeather>({
+	const [current, setCurrent] = useState<CW>({
 		icon: '',
 		textDescription: '',
 		temperature: 0,
@@ -130,7 +132,7 @@ export function Homepage() {
 			windDirection: 'N',
 		},
 	]);
-	const [extendedForecast, setExtendedForecast] = useState<ExtendedForecast[]>([
+	const [extendedForecast, setExtendedForecast] = useState<EF[]>([
 		{
 			detailedForecast: '',
 			isDaytime: true,
@@ -224,34 +226,73 @@ export function Homepage() {
 			});
 		}
 	}, [forecast]);
-
 	return (
-		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
-			<Search
-				current={current}
-				outlook={outlook}
-				extendedForecast={extendedForecast}
-				weather={weather}
-				basicWeather={basicWeather}
-				weatherModalOpened={weatherModalOpened}
-				closeWeatherModal={closeWeatherModal}
-				openWeatherModal={openWeatherModal}
-			/>
-			<Header
-				date={date}
-				greet={displayedGreeting}
-				current={current}
-				setCurrent={setCurrent}
-				outlook={outlook}
-				extendedForecast={extendedForecast}
-				weather={weather}
-				basicWeather={basicWeather}
-				weatherModalOpened={weatherModalOpened}
-				closeWeatherModal={closeWeatherModal}
-				openWeatherModal={openWeatherModal}
-			/>
-			<Applications contentType={appFilter} />
-			<Bookmarks contentType={bookmarkFilter} />
+		<Stack
+			gap={0}
+			h={appFilter.length > 0 || bookmarkFilter.length > 0 ? undefined : '100%'}
+			className={stackClasses.containerStack}
+			justify='center'
+		>
+			{appFilter.length > 0 || bookmarkFilter.length > 0 ? (
+				<>
+					<Search
+						current={current}
+						outlook={outlook}
+						extendedForecast={extendedForecast}
+						weather={weather}
+						basicWeather={basicWeather}
+						weatherModalOpened={weatherModalOpened}
+						closeWeatherModal={closeWeatherModal}
+						openWeatherModal={openWeatherModal}
+					/>
+					<Header
+						date={date}
+						greet={displayedGreeting}
+						current={current}
+						setCurrent={setCurrent}
+						outlook={outlook}
+						extendedForecast={extendedForecast}
+						weather={weather}
+						basicWeather={basicWeather}
+						weatherModalOpened={weatherModalOpened}
+						closeWeatherModal={closeWeatherModal}
+						openWeatherModal={openWeatherModal}
+					/>
+					<Applications contentType={appFilter} />
+					<Bookmarks contentType={bookmarkFilter} />
+				</>
+			) : (
+				<>
+					<Stack align='center'>
+						<LargeHeader
+							date={date}
+							greet={displayedGreeting}
+							current={current}
+							setCurrent={setCurrent}
+							outlook={outlook}
+							extendedForecast={extendedForecast}
+							weather={weather}
+							basicWeather={basicWeather}
+							weatherModalOpened={weatherModalOpened}
+							closeWeatherModal={closeWeatherModal}
+							openWeatherModal={openWeatherModal}
+						/>
+						<Grid grow columns={24} pos={'absolute'} bottom={'1rem'} w={'50%'}>
+							<CurrentWeather span={18} current={current} />
+						</Grid>
+					</Stack>
+					<Search
+						current={current}
+						outlook={outlook}
+						extendedForecast={extendedForecast}
+						weather={weather}
+						basicWeather={basicWeather}
+						weatherModalOpened={weatherModalOpened}
+						closeWeatherModal={closeWeatherModal}
+						openWeatherModal={openWeatherModal}
+					/>
+				</>
+			)}
 			<SettingsButton />
 		</Stack>
 	);