Fix browse settings & infinite list

front/src/components/items/context-menus.tsx

@@ -15,14 +15,14 @@ import { watchListIcon } from "./watchlist-info";
 // import { useDownloader } from "../../packages/ui/src/downloadses/ui/src/downloads";
 
 export const EpisodesContext = ({
-	type = "episode",
+	kind = "episode",
 	slug,
 	showSlug,
 	status,
 	force,
 	...props
 }: {
-	type?: "serie" | "movie" | "episode";
+	kind?: "serie" | "movie" | "episode";
 	showSlug?: string | null;
 	slug: string;
 	status: WatchStatusV | null;
@@ -34,17 +34,17 @@ export const EpisodesContext = ({
 	const { t } = useTranslation();
 
 	const mutation = useMutation({
-		path: [type, slug, "watchStatus"],
+		path: [kind, slug, "watchStatus"],
 		compute: (newStatus: WatchStatusV | null) => ({
 			method: newStatus ? "POST" : "DELETE",
 			params: newStatus ? { status: newStatus } : undefined,
 		}),
-		invalidate: [type, slug],
+		invalidate: [kind, slug],
 	});
 
 	const metadataRefreshMutation = useMutation({
 		method: "POST",
-		path: [type, slug, "refresh"],
+		path: [kind, slug, "refresh"],
 		invalidate: null,
 	});
 
@@ -54,7 +54,10 @@ export const EpisodesContext = ({
 				Trigger={IconButton}
 				icon={MoreVert}
 				{...tooltip(t("misc.more"))}
-				{...(css([Platform.OS !== "web" && !force && { display: "none" }], props) as any)}
+				{...(css(
+					[Platform.OS !== "web" && !force && { display: "none" }],
+					props,
+				) as any)}
 			>
 				{showSlug && (
 					<Menu.Item
@@ -71,7 +74,9 @@ export const EpisodesContext = ({
 					{Object.values(WatchStatusV).map((x) => (
 						<Menu.Item
 							key={x}
-							label={t(`show.watchlistMark.${x.toLowerCase() as Lowercase<WatchStatusV>}`)}
+							label={t(
+								`show.watchlistMark.${x.toLowerCase() as Lowercase<WatchStatusV>}`,
+							)}
 							onSelect={() => mutation.mutate(x)}
 							selected={x === status}
 						/>
@@ -83,7 +88,7 @@ export const EpisodesContext = ({
 						/>
 					)}
 				</Menu.Sub>
-				{type !== "serie" && (
+				{kind !== "serie" && (
 					<>
 						{/* <Menu.Item */}
 						{/* 	label={t("home.episodeMore.download")} */}
@@ -93,7 +98,7 @@ export const EpisodesContext = ({
 						<Menu.Item
 							label={t("home.episodeMore.mediainfo")}
 							icon={MovieInfo}
-							href={`/${type}/${slug}/info`}
+							href={`/${kind}/${slug}/info`}
 						/>
 					</>
 				)}
@@ -113,20 +118,20 @@ export const EpisodesContext = ({
 };
 
 export const ItemContext = ({
-	type,
+	kind,
 	slug,
 	status,
 	force,
 	...props
 }: {
-	type: "movie" | "serie";
+	kind: "movie" | "serie";
 	slug: string;
 	status: WatchStatusV | null;
 	force?: boolean;
 } & Partial<ComponentProps<typeof Menu<typeof IconButton>>>) => {
 	return (
 		<EpisodesContext
-			type={type}
+			kind={kind}
 			slug={slug}
 			status={status}
 			showSlug={null}

front/src/components/items/index.ts

@@ -14,9 +14,11 @@ export const itemMap = (
 	href: item.href,
 	poster: item.poster,
 	thumbnail: item.thumbnail,
-	watchStatus: item.kind !== "collection" ? (item.watchStatus?.status ?? null) : null,
-	watchPercent: item.kind === "movie" ? (item.watchStatus?.percent ?? null) : null,
-	// unseenEpisodesCount:
+	watchStatus:
+		item.kind !== "collection" ? (item.watchStatus?.status ?? null) : null,
+	watchPercent:
+		item.kind === "movie" ? (item.watchStatus?.percent ?? null) : null,
+	unseenEpisodesCount: 0,
 	// 	item.kind === "serie" ? (item.watchStatus?.unseenEpisodesCount ?? item.episodesCount!) : null,
 });
 

front/src/components/items/item-grid.tsx

@@ -1,21 +1,27 @@
 import { useState } from "react";
 import { type ImageStyle, Platform, View } from "react-native";
-import { type Stylable, type Theme, percent, px, useYoshiki } from "yoshiki/native";
+import {
+	percent,
+	px,
+	type Stylable,
+	type Theme,
+	useYoshiki,
+} from "yoshiki/native";
 import type { KImage, WatchStatusV } from "~/models";
 import {
+	focusReset,
+	important,
 	Link,
 	P,
 	Poster,
 	PosterBackground,
 	Skeleton,
 	SubP,
-	focusReset,
-	important,
 	ts,
 } from "~/primitives";
 import type { Layout } from "~/query";
-import { ItemWatchStatus } from "./item-helpers";
 import { ItemContext } from "./context-menus";
+import { ItemWatchStatus } from "./item-helpers";
 
 export const ItemProgress = ({ watchPercent }: { watchPercent: number }) => {
 	const { css } = useYoshiki("episodebox");
@@ -48,7 +54,7 @@ export const ItemGrid = ({
 	href,
 	slug,
 	name,
-	type,
+	kind,
 	subtitle,
 	poster,
 	watchStatus,
@@ -63,7 +69,7 @@ export const ItemGrid = ({
 	poster: KImage | null;
 	watchStatus: WatchStatusV | null;
 	watchPercent: number | null;
-	type: "movie" | "serie" | "collection";
+	kind: "movie" | "serie" | "collection";
 	unseenEpisodesCount: number | null;
 } & Stylable<"text">) => {
 	const [moreOpened, setMoreOpened] = useState(false);
@@ -111,11 +117,16 @@ export const ItemGrid = ({
 				layout={{ width: percent(100) }}
 				{...(css("poster") as { style: ImageStyle })}
 			>
-				<ItemWatchStatus watchStatus={watchStatus} unseenEpisodesCount={unseenEpisodesCount} />
-				{type === "movie" && watchPercent && <ItemProgress watchPercent={watchPercent} />}
-				{type !== "collection" && (
+				<ItemWatchStatus
+					watchStatus={watchStatus}
+					unseenEpisodesCount={unseenEpisodesCount}
+				/>
+				{kind === "movie" && watchPercent && (
+					<ItemProgress watchPercent={watchPercent} />
+				)}
+				{kind !== "collection" && (
 					<ItemContext
-						type={type}
+						kind={kind}
 						slug={slug}
 						status={watchStatus}
 						isOpen={moreOpened}
@@ -128,12 +139,16 @@ export const ItemGrid = ({
 								bg: (theme) => theme.dark.background,
 							},
 							"more",
-							Platform.OS === "web" && moreOpened && { display: important("flex") },
+							Platform.OS === "web" &&
+								moreOpened && { display: important("flex") },
 						])}
 					/>
 				)}
 			</PosterBackground>
-			<P numberOfLines={subtitle ? 1 : 2} {...css([{ marginY: 0, textAlign: "center" }, "title"])}>
+			<P
+				numberOfLines={subtitle ? 1 : 2}
+				{...css([{ marginY: 0, textAlign: "center" }, "title"])}
+			>
 				{name}
 			</P>
 			{subtitle && (

front/src/components/items/item-list.tsx

@@ -1,26 +1,26 @@
 import { useState } from "react";
 import { Platform, View } from "react-native";
 import { percent, px, rem, useYoshiki } from "yoshiki/native";
-import type { KyooImage, WatchStatusV } from "~/models";
+import type { KImage, WatchStatusV } from "~/models";
 import {
 	GradientImageBackground,
 	Heading,
+	important,
 	Link,
 	P,
 	Poster,
 	PosterBackground,
 	Skeleton,
-	imageBorderRadius,
-	important,
 	ts,
 } from "~/primitives";
 import type { Layout } from "~/query";
+import { ItemContext } from "./context-menus";
 import { ItemWatchStatus } from "./item-helpers";
 
 export const ItemList = ({
 	href,
 	slug,
-	type,
+	kind,
 	name,
 	subtitle,
 	thumbnail,
@@ -31,11 +31,11 @@ export const ItemList = ({
 }: {
 	href: string;
 	slug: string;
-	type: "movie" | "show" | "collection";
+	kind: "movie" | "serie" | "collection";
 	name: string;
 	subtitle: string | null;
-	poster: KyooImage | null;
-	thumbnail: KyooImage | null;
+	poster: KImage | null;
+	thumbnail: KImage | null;
 	watchStatus: WatchStatusV | null;
 	unseenEpisodesCount: number | null;
 }) => {
@@ -43,98 +43,110 @@ export const ItemList = ({
 	const [moreOpened, setMoreOpened] = useState(false);
 
 	return (
-		<GradientImageBackground
-			src={thumbnail}
-			alt={name}
-			quality="medium"
-			as={Link}
+		<Link
 			href={moreOpened ? undefined : href}
 			onLongPress={() => setMoreOpened(true)}
-			{...css(
-				{
-					alignItems: "center",
-					justifyContent: "space-evenly",
-					flexDirection: "row",
-					height: ItemList.layout.size,
-					borderRadius: px(imageBorderRadius),
-					overflow: "hidden",
-					marginX: ItemList.layout.gap,
-					child: {
-						more: {
-							opacity: 0,
-						},
-					},
-					fover: {
-						title: {
-							textDecorationLine: "underline",
-						},
-						more: {
-							opacity: 100,
-						},
+			{...css({
+				child: {
+					more: {
+						opacity: 0,
 					},
 				},
-				props,
-			)}
+				fover: {
+					title: {
+						textDecorationLine: "underline",
+					},
+					more: {
+						opacity: 100,
+					},
+				},
+			})}
 		>
-			<View
-				{...css({
-					width: { xs: "50%", lg: "30%" },
-				})}
+			<GradientImageBackground
+				src={thumbnail}
+				alt={name}
+				quality="medium"
+				layout={{ width: percent(100), height: ItemList.layout.size }}
+				{...(css(
+					{
+						alignItems: "center",
+						justifyContent: "space-evenly",
+						flexDirection: "row",
+						borderRadius: px(10),
+						overflow: "hidden",
+					},
+					props,
+				) as any)}
 			>
 				<View
 					{...css({
-						flexDirection: "row",
-						justifyContent: "center",
+						width: { xs: "50%", lg: "30%" },
 					})}
 				>
-					<Heading
-						{...css([
-							"title",
-							{
-								textAlign: "center",
-								fontSize: rem(2),
-								letterSpacing: rem(0.002),
-								fontWeight: "900",
-								textTransform: "uppercase",
-							},
-						])}
-					>
-						{name}
-					</Heading>
-					{type !== "collection" && (
-						<ItemContext
-							type={type}
-							slug={slug}
-							status={watchStatus}
-							isOpen={moreOpened}
-							setOpen={(v) => setMoreOpened(v)}
-							{...css([
-								{
-									// I dont know why marginLeft gets overwritten by the margin: px(2) so we important
-									marginLeft: important(ts(2)),
-									bg: (theme) => theme.darkOverlay,
-								},
-								"more",
-								Platform.OS === "web" && moreOpened && { opacity: important(100) },
-							])}
-						/>
-					)}
-				</View>
-				{subtitle && (
-					<P
+					<View
 						{...css({
-							textAlign: "center",
-							marginRight: ts(4),
+							flexDirection: "row",
+							justifyContent: "center",
 						})}
 					>
-						{subtitle}
-					</P>
-				)}
-			</View>
-			<PosterBackground src={poster} alt="" quality="low" layout={{ height: percent(80) }}>
-				<ItemWatchStatus watchStatus={watchStatus} unseenEpisodesCount={unseenEpisodesCount} />
-			</PosterBackground>
-		</GradientImageBackground>
+						<Heading
+							{...css([
+								"title",
+								{
+									textAlign: "center",
+									fontSize: rem(2),
+									letterSpacing: rem(0.002),
+									fontWeight: "900",
+									textTransform: "uppercase",
+								},
+							])}
+						>
+							{name}
+						</Heading>
+						{kind !== "collection" && (
+							<ItemContext
+								kind={kind}
+								slug={slug}
+								status={watchStatus}
+								isOpen={moreOpened}
+								setOpen={(v) => setMoreOpened(v)}
+								{...css([
+									{
+										// I dont know why marginLeft gets overwritten by the margin: px(2) so we important
+										marginLeft: important(ts(2)),
+										bg: (theme) => theme.darkOverlay,
+									},
+									"more",
+									Platform.OS === "web" &&
+										moreOpened && { opacity: important(100) },
+								])}
+							/>
+						)}
+					</View>
+					{subtitle && (
+						<P
+							{...css({
+								textAlign: "center",
+								marginRight: ts(4),
+							})}
+						>
+							{subtitle}
+						</P>
+					)}
+				</View>
+				<PosterBackground
+					src={poster}
+					alt=""
+					quality="low"
+					layout={{ height: percent(80) }}
+				>
+					<ItemWatchStatus
+						watchStatus={watchStatus}
+						unseenEpisodesCount={unseenEpisodesCount}
+					/>
+				</PosterBackground>
+			</GradientImageBackground>
+		</Link>
 	);
 };
 
@@ -149,7 +161,7 @@ ItemList.Loader = (props: object) => {
 					justifyContent: "space-evenly",
 					flexDirection: "row",
 					height: ItemList.layout.size,
-					borderRadius: px(imageBorderRadius),
+					borderRadius: px(10),
 					overflow: "hidden",
 					bg: (theme) => theme.dark.background,
 					marginX: ItemList.layout.gap,