Use a transparent navbar

front/apps/mobile/app/(app)/_layout.tsx

@@ -43,12 +43,11 @@ export default function SignGuard() {
 	return (
 		<Stack
 			screenOptions={{
-				navigationBarColor: theme.variant.background,
+				navigationBarColor: "transparent",
 				headerTitle: () => <NavbarTitle />,
 				headerRight: () => <NavbarRight />,
 				contentStyle: {
 					backgroundColor: theme.background,
-					paddingBottom: insets.bottom,
 					paddingLeft: insets.left,
 					paddingRight: insets.right,
 				},

front/packages/primitives/src/utils/index.tsx

@@ -24,3 +24,4 @@ export * from "./head";
 export * from "./spacing";
 export * from "./capitalize";
 export * from "./touchonly";
+export * from "./page-style";

front/packages/primitives/src/utils/page-style.tsx

@@ -0,0 +1,26 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export const usePageStyle = () => {
+	const insets = useSafeAreaInsets();
+	return { paddingBottom: insets.bottom } as const;
+};

front/packages/primitives/src/utils/page-style.web.tsx

@@ -0,0 +1,23 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export const usePageStyle = () => {
+	return {} as const;
+};

front/packages/ui/src/collection/index.tsx

@@ -29,7 +29,7 @@ import {
 	getDisplayDate,
 } from "@kyoo/models";
 import { Header as ShowHeader, TitleLine } from "../details/header";
-import { Container, Head, ImageBackground, P, Skeleton, ts } from "@kyoo/primitives";
+import { Container, Head, ImageBackground, P, Skeleton, ts, usePageStyle } from "@kyoo/primitives";
 import { percent, px, useYoshiki } from "yoshiki/native";
 import { useTranslation } from "react-i18next";
 import { forwardRef } from "react";
@@ -122,6 +122,7 @@ const CollectionHeader = forwardRef<View, ViewProps & { slug: string }>(function
 			<View {...css({ bg: theme.background, paddingTop: { xs: ts(8), md: 0 } })}>
 				<View
 					{...css({
+						width: percent(100),
 						maxWidth: { xs: percent(100), lg: px(1170) },
 						alignSelf: "center",
 					})}
@@ -137,10 +138,13 @@ const query = (slug: string): QueryIdentifier<LibraryItem> => ({
 	parser: LibraryItemP,
 	path: ["collections", slug, "items"],
 	infinite: true,
+	params: {
+		fields: ["firstEpisode", "episodesCount", "watchStatus"],
+	},
 });
 
 export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
-	const { css } = useYoshiki();
+	const pageStyle = usePageStyle();
 
 	return (
 		<InfiniteFetch
@@ -149,7 +153,7 @@ export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
 			layout={{ ...ItemDetails.layout, numColumns: { xs: 1, md: 2 } }}
 			Header={CollectionHeader}
 			headerProps={{ slug }}
-			{...css({ padding: { xs: ts(1), sm: ts(8) } })}
+			contentContainerStyle={pageStyle}
 		>
 			{(x) => (
 				<ItemDetails
@@ -162,6 +166,12 @@ export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
 					genres={"genres" in x ? x.genres : null}
 					href={x.href}
 					playHref={x.kind !== ItemKind.Collection && !x.isLoading ? x.playHref : undefined}
+					watchStatus={
+						!x.isLoading && x.kind !== ItemKind.Collection ? x.watchStatus?.status ?? null : null
+					}
+					unseenEpisodesCount={
+						x.kind === ItemKind.Show ? x.watchStatus?.unseenEpisodesCount ?? x.episodesCount! : null
+					}
 				/>
 			)}
 		</InfiniteFetch>

front/packages/ui/src/details/movie.tsx

@@ -24,6 +24,7 @@ import { useYoshiki } from "yoshiki/native";
 import { DefaultLayout } from "../layout";
 import { Header } from "./header";
 import { DetailsCollections } from "./collection";
+import { usePageStyle } from "@kyoo/primitives";
 
 const query = (slug: string): QueryIdentifier<Movie> => ({
 	parser: MovieP,
@@ -35,10 +36,11 @@ const query = (slug: string): QueryIdentifier<Movie> => ({
 
 export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
 	const { css } = useYoshiki();
+	const pageStyle = usePageStyle();
 
 	return (
 		<ScrollView
-			{...css(
+			{...css([
 				Platform.OS === "web" && {
 					// @ts-ignore Web only property
 					overflow: "auto" as any,
@@ -47,7 +49,8 @@ export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
 					// @ts-ignore Web only property
 					overflowY: "overlay",
 				},
-			)}
+				pageStyle,
+			])}
 		>
 			<Header type="movie" query={query(slug)} />
 			<DetailsCollections type="movie" slug={slug} />

front/packages/ui/src/details/season.tsx

@@ -26,7 +26,7 @@ import {
 	SeasonP,
 	useInfiniteFetch,
 } from "@kyoo/models";
-import { Skeleton, H6, HR, P, ts, Menu, IconButton, tooltip } from "@kyoo/primitives";
+import { Skeleton, H6, HR, P, ts, Menu, IconButton, tooltip, usePageStyle } from "@kyoo/primitives";
 import { rem, useYoshiki } from "yoshiki/native";
 import { View } from "react-native";
 import { InfiniteFetch } from "../fetch-infinite";
@@ -114,6 +114,7 @@ export const EpisodeList = <Props,>({
 	Header: ComponentType<Props & { children: JSX.Element }>;
 	headerProps: Props;
 }) => {
+	const pageStyle = usePageStyle();
 	const { t } = useTranslation();
 	const { items: seasons, error } = useInfiniteFetch(SeasonHeader.query(slug));
 
@@ -128,6 +129,7 @@ export const EpisodeList = <Props,>({
 			Header={Header}
 			headerProps={headerProps}
 			getItemType={(item) => (item.firstOfSeason ? "withHeader" : "normal")}
+			contentContainerStyle={pageStyle}
 		>
 			{(item) => {
 				const sea = item?.firstOfSeason

front/packages/ui/src/home/recommanded.tsx

@@ -31,7 +31,6 @@ import {
 import {
 	Chip,
 	H3,
-	Icon,
 	IconFab,
 	imageBorderRadius,
 	Link,

front/packages/ui/src/search/index.tsx

@@ -25,10 +25,11 @@ import { createParam } from "solito";
 import { DefaultLayout } from "../layout";
 import { InfiniteFetch } from "../fetch-infinite";
 import { itemMap } from "../browse";
-import { SearchSort, SortOrd, SortBy, Layout } from "../browse/types";
+import { SearchSort, SortOrd, Layout } from "../browse/types";
 import { BrowseSettings } from "../browse/header";
 import { ItemGrid } from "../browse/grid";
 import { ItemList } from "../browse/list";
+import { usePageStyle } from "@kyoo/primitives";
 
 const { useParam } = createParam<{ sortBy?: string }>();
 
@@ -48,6 +49,7 @@ const query = (
 });
 
 export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {
+	const pageStyle = usePageStyle();
 	const { t } = useTranslation();
 	const [sort, setSort] = useParam("sortBy");
 	const sortKey = (sort?.split(":")[0] as SearchSort) || SearchSort.Relevance;
@@ -74,6 +76,7 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {
 					setLayout={setLayout}
 				/>
 			}
+			contentContainerStyle={pageStyle}
 		>
 			{(item) => <LayoutComponent {...itemMap(item)} />}
 		</InfiniteFetch>