Clean up home page margins

front/apps/mobile/package.json

@@ -52,7 +52,7 @@
 		"react-native-svg": "13.9.0",
 		"react-native-uuid": "^2.0.1",
 		"react-native-video": "^6.0.0-alpha.7",
-		"yoshiki": "1.2.9"
+		"yoshiki": "1.2.12"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.22.10",

front/apps/web/package.json

@@ -39,7 +39,7 @@
 		"srt-webvtt": "^2.0.0",
 		"superjson": "^1.13.1",
 		"sweetalert2": "^11.7.20",
-		"yoshiki": "1.2.9",
+		"yoshiki": "1.2.12",
 		"zod": "^3.21.4"
 	},
 	"devDependencies": {

front/packages/primitives/src/icons.tsx

@@ -21,7 +21,7 @@
 import React, { ComponentProps, ComponentType, ForwardedRef, forwardRef } from "react";
 import { Platform, PressableProps, ViewStyle } from "react-native";
 import { SvgProps } from "react-native-svg";
-import { YoshikiStyle } from "yoshiki/src/type";
+import { YoshikiStyle } from "yoshiki";
 import { px, Theme, useYoshiki } from "yoshiki/native";
 import { PressableFeedback } from "./links";
 import { alpha } from "./themes";

front/packages/primitives/src/image/blurhash.web.tsx

@@ -21,7 +21,7 @@
 import { decode } from "blurhash";
 import { ReactElement } from "react";
 import { useYoshiki } from "yoshiki";
-import { Stylable } from "yoshiki/native";
+import { Stylable, nativeStyleToCss } from "yoshiki/native";
 import { StyleList, processStyleList } from "yoshiki/src/type";
 
 // The blurhashToUrl has been stolen from https://gist.github.com/mattiaz9/53cb67040fa135cb395b1d015a200aff
@@ -191,28 +191,19 @@ function generatePng(width: number, height: number, rgbaString: string) {
 	return pngString;
 }
 
-// Extract classnames from leftover props using yoshiki's internal.
-const extractClassNames = <Style,>(props: {
-	style?: StyleList<{ $$css?: true; yoshiki?: string } | Style>;
-}) => {
-	const inline = processStyleList(props.style);
-	return "$$css" in inline && inline.$$css ? inline.yoshiki : undefined;
-};
-
 export const BlurhashContainer = ({
 	blurhash,
 	children,
 	...props
-}: { blurhash: string; children?: ReactElement | ReactElement[] } & Stylable) => {
+}: {
+	blurhash: string;
+	children?: ReactElement | ReactElement[];
+}) => {
 	const { css } = useYoshiki();
 
 	return (
 		<div
 			style={{
-				// To reproduce view's behavior
-				boxSizing: "border-box",
-				overflow: "hidden",
-
 				// Use a blurhash here to nicely fade the NextImage when it is loaded completly
 				// (this prevents loading the image line by line which is ugly and buggy on firefox)
 				backgroundImage: `url(${blurHashToDataURL(blurhash)})`,
@@ -220,12 +211,14 @@ export const BlurhashContainer = ({
 				backgroundRepeat: "no-repeat",
 				backgroundPosition: "50% 50%",
 			}}
-			// This should be in yoshiki but this allows this component to be styled like a native component.
 			{...css(
-				{ position: "relative" },
 				{
-					className: extractClassNames(props),
+					// To reproduce view's behavior
+					boxSizing: "border-box",
+					overflow: "hidden",
+					position: "relative",
 				},
+				nativeStyleToCss(props),
 			)}
 		>
 			{children}

front/packages/ui/src/browse/list.tsx

@@ -65,6 +65,7 @@ export const ItemList = ({
 				flexDirection: "row",
 				height: ItemList.layout.size,
 				borderRadius: px(6),
+				marginX: ItemList.layout.gap,
 			})}
 		>
 			<View

front/packages/ui/src/fetch-infinite.web.tsx

@@ -29,7 +29,7 @@ import {
 	useEffect,
 	useRef,
 } from "react";
-import { Stylable, useYoshiki, ysMap } from "yoshiki";
+import { Stylable, nativeStyleToCss, useYoshiki, ysMap } from "yoshiki";
 import { EmptyView, ErrorView, Layout, WithLoading, addHeader } from "./fetch";
 
 const InfiniteScroll = <Props,>({
@@ -83,12 +83,12 @@ const InfiniteScroll = <Props,>({
 						gridAutoRows: "max-content",
 						// the as any is due to differencies between css types of native and web (already accounted for in yoshiki)
 						gridGap: layout.gap as any,
-						padding: layout.gap as any,
 					},
 					layout.layout == "vertical" && {
 						gridTemplateColumns: "1fr",
 						alignItems: "stretch",
 						overflowY: "auto",
+						paddingY: layout.gap as any,
 					},
 					layout.layout == "horizontal" && {
 						alignItems: "stretch",
@@ -97,16 +97,17 @@ const InfiniteScroll = <Props,>({
 						gridAutoFlow: "column",
 						gridAutoColumns: ysMap(layout.numColumns, (x) => `${100 / x}%`),
 						gridTemplateRows: "max-content",
+						paddingX: layout.gap as any,
 					},
 					layout.layout === "grid" && {
 						gridTemplateColumns: ysMap(layout.numColumns, (x) => `repeat(${x}, 1fr)`),
 						justifyContent: "center",
 						alignItems: "flex-start",
 						overflowY: "auto",
+						padding: layout.gap as any,
 					},
 				],
-
-				props,
+				nativeStyleToCss(props),
 			)}
 		>
 			{children}

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

@@ -29,7 +29,7 @@ import {
 import { H3, IconButton, ts } from "@kyoo/primitives";
 import { ReactElement, forwardRef, useRef } from "react";
 import { View } from "react-native";
-import { useYoshiki } from "yoshiki/native";
+import { px, useYoshiki } from "yoshiki/native";
 import { ItemGrid } from "../browse/grid";
 import ChevronLeft from "@material-symbols/svg-400/rounded/chevron_left-fill.svg";
 import ChevronRight from "@material-symbols/svg-400/rounded/chevron_right-fill.svg";
@@ -45,18 +45,26 @@ const Header = forwardRef<
 	return (
 		<View ref={ref}>
 			{!(empty && !displayEmpty) && (
-				<View {...css({ marginX: ts(1), flexDirection: "row", justifyContent: "space-between" })}>
+				<View
+					{...css({
+						marginTop: ItemGrid.layout.gap,
+						marginX: ItemGrid.layout.gap,
+						pX: ts(0.5),
+						flexDirection: "row",
+						justifyContent: "space-between",
+					})}
+				>
 					<H3>{genre}</H3>
-					<View {...css({ flexDirection: "row" })}>
-						<IconButton
-							icon={ChevronLeft}
-							// onPress={() => ref.current?.scrollTo({ x: 0, animated: true })}
-						/>
-						<IconButton
-							icon={ChevronRight}
-							// onPress={() => ref.current?.scrollTo({ x: 0, animated: true })}
-						/>
-					</View>
+					{/* <View {...css({ flexDirection: "row" })}> */}
+					{/* 	<IconButton */}
+					{/* 		icon={ChevronLeft} */}
+					{/* 		// onPress={() => ref.current?.scrollTo({ x: 0, animated: true })} */}
+					{/* 	/> */}
+					{/* 	<IconButton */}
+					{/* 		icon={ChevronRight} */}
+					{/* 		// onPress={() => ref.current?.scrollTo({ x: 0, animated: true })} */}
+					{/* 	/> */}
+					{/* </View> */}
 				</View>
 			)}
 			{children}

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

@@ -50,6 +50,7 @@ import { Theme, calc, percent, px, rem, useYoshiki } from "yoshiki/native";
 import { Fetch, Layout, WithLoading } from "../fetch";
 import { InfiniteFetch } from "../fetch-infinite";
 import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
+import { ItemGrid } from "../browse/grid";
 
 export const ItemDetails = ({
 	isLoading,
@@ -165,9 +166,13 @@ export const Recommanded = () => {
 	const { css } = useYoshiki();
 
 	return (
-		<View {...css({ marginX: ts(1) })}>
-			<H3>{t("home.recommanded")}</H3>
-			<InfiniteFetch query={Recommanded.query()} layout={ItemDetails.layout}>
+		<View {...css({ marginX: ItemGrid.layout.gap, marginTop: ItemGrid.layout.gap })}>
+			<H3 {...css({ pX: ts(0.5) })}>{t("home.recommanded")}</H3>
+			<InfiniteFetch
+				query={Recommanded.query()}
+				layout={ItemDetails.layout}
+				{...css({ padding: 0 })}
+			>
 				{(x, i) => (
 					<ItemDetails
 						key={x.id ?? i}

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

@@ -18,27 +18,22 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {
-	ItemKind,
-	LibraryItem,
-	LibraryItemP,
-	QueryIdentifier,
-	getDisplayDate,
-} from "@kyoo/models";
+import { ItemKind, LibraryItem, LibraryItemP, QueryIdentifier, getDisplayDate } from "@kyoo/models";
 import { H3, ts } from "@kyoo/primitives";
 import { View } from "react-native";
 import { useYoshiki } from "yoshiki/native";
 import { InfiniteFetch } from "../fetch-infinite";
 import { ItemList } from "../browse/list";
 import { useTranslation } from "react-i18next";
+import { ItemGrid } from "../browse/grid";
 
 export const VerticalRecommanded = () => {
 	const { t } = useTranslation();
 	const { css } = useYoshiki();
 
 	return (
-		<View>
-			<H3 {...css({ mX: ts(1) })}>{t("home.recommanded")}</H3>
+		<View {...css({ marginTop: ItemGrid.layout.gap })}>
+			<H3 {...css({ mX: ItemGrid.layout.gap })}>{t("home.recommanded")}</H3>
 			<InfiniteFetch
 				query={VerticalRecommanded.query()}
 				layout={{ ...ItemList.layout, layout: "vertical" }}

front/yarn.lock

@@ -10239,7 +10239,7 @@ __metadata:
     react-native-uuid: ^2.0.1
     react-native-video: ^6.0.0-alpha.7
     typescript: ^5.1.6
-    yoshiki: 1.2.9
+    yoshiki: 1.2.12
   languageName: unknown
   linkType: soft
 
@@ -13900,7 +13900,7 @@ __metadata:
     sweetalert2: ^11.7.20
     typescript: ^5.1.6
     webpack: ^5.88.2
-    yoshiki: 1.2.9
+    yoshiki: 1.2.12
     zod: ^3.21.4
   languageName: unknown
   linkType: soft
@@ -14282,9 +14282,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yoshiki@npm:1.2.9":
-  version: 1.2.9
-  resolution: "yoshiki@npm:1.2.9"
+"yoshiki@npm:1.2.12":
+  version: 1.2.12
+  resolution: "yoshiki@npm:1.2.12"
   dependencies:
     "@types/inline-style-prefixer": ^5.0.0
     "@types/node": 18.x.x
@@ -14299,7 +14299,7 @@ __metadata:
       optional: true
     react-native-web:
       optional: true
-  checksum: 1cd681cf9ba241f051c8e09a97b3a67ae5610fbba460ac506127c8d78bbcc069c07c727fb84a15a723a887ad58582bbcf57baba7020642ac6234d38d0c21116f
+  checksum: e5e59d8fa3df0039a19641f3d476cc7315cef31d0eb1a8a15fcff56f0a74f870b7d5d78b471b02a32dfab0582a02d33c6aa805a69035fa17ed621ecbe0f0c285
   languageName: node
   linkType: hard