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,
+	watchStatus:
-	watchPercent: item.kind === "movie" ? (item.watchStatus?.percent ?? null) : null,
+		item.kind !== "collection" ? (item.watchStatus?.status ?? null) : null,
-	// unseenEpisodesCount:
+	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} />
+				<ItemWatchStatus
-				{type === "movie" && watchPercent && <ItemProgress watchPercent={watchPercent} />}
+					watchStatus={watchStatus}
-				{type !== "collection" && (
+					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;
+	poster: KImage | null;
-	thumbnail: KyooImage | null;
+	thumbnail: KImage | null;
 	watchStatus: WatchStatusV | null;
 	unseenEpisodesCount: number | null;
 }) => {
@@ -43,98 +43,110 @@ export const ItemList = ({
 	const [moreOpened, setMoreOpened] = useState(false);
 
 	return (
-		<GradientImageBackground
+		<Link
-			src={thumbnail}
-			alt={name}
-			quality="medium"
-			as={Link}
 			href={moreOpened ? undefined : href}
 			onLongPress={() => setMoreOpened(true)}
-			{...css(
+			{...css({
-				{
+				child: {
-					alignItems: "center",
+					more: {
-					justifyContent: "space-evenly",
+						opacity: 0,
-					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,
-						},
 					},
 				},
-				props,
+				fover: {
-			)}
+					title: {
+						textDecorationLine: "underline",
+					},
+					more: {
+						opacity: 100,
+					},
+				},
+			})}
 		>
-			<View
+			<GradientImageBackground
-				{...css({
+				src={thumbnail}
-					width: { xs: "50%", lg: "30%" },
+				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",
+						width: { xs: "50%", lg: "30%" },
-						justifyContent: "center",
 					})}
 				>
-					<Heading
+					<View
-						{...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
 						{...css({
-							textAlign: "center",
+							flexDirection: "row",
-							marginRight: ts(4),
+							justifyContent: "center",
 						})}
 					>
-						{subtitle}
+						<Heading
-					</P>
+							{...css([
-				)}
+								"title",
-			</View>
+								{
-			<PosterBackground src={poster} alt="" quality="low" layout={{ height: percent(80) }}>
+									textAlign: "center",
-				<ItemWatchStatus watchStatus={watchStatus} unseenEpisodesCount={unseenEpisodesCount} />
+									fontSize: rem(2),
-			</PosterBackground>
+									letterSpacing: rem(0.002),
-		</GradientImageBackground>
+									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,

front/src/primitives/image-background.tsx

@@ -2,6 +2,7 @@ import { ImageBackground as EImageBackground } from "expo-image";
 import { LinearGradient, type LinearGradientProps } from "expo-linear-gradient";
 import type { ComponentProps, ReactNode } from "react";
 import type { ImageStyle } from "react-native";
+import { Platform } from "react-native";
 import { useYoshiki } from "yoshiki/native";
 import type { KImage } from "~/models";
 import { useToken } from "~/providers/account-context";
@@ -31,11 +32,13 @@ export const ImageBackground = ({
 		<EImageBackground
 			source={{
 				uri: src ? `${apiUrl}${src[quality ?? "high"]}` : null,
-				headers: authToken
+				// use cookies on web to allow `img` to make the call instead of js
-					? {
+				headers:
-							Authorization: authToken,
+					authToken && Platform.OS !== "web"
-						}
+						? {
-					: {},
+								Authorization: authToken,
+							}
+						: undefined,
 			}}
 			placeholder={{ blurhash: src?.blurhash }}
 			accessibilityLabel={alt}
@@ -57,7 +60,7 @@ export const PosterBackground = ({
 		<ImageBackground
 			alt={alt!}
 			layout={{ aspectRatio: 2 / 3, ...layout }}
-			{...css({ borderRadius: 6 }, props)}
+			{...css({ borderRadius: 10, overflow: "hidden" }, props)}
 		/>
 	);
 };

front/src/primitives/image.tsx

@@ -1,6 +1,6 @@
 import { Image as EImage } from "expo-image";
 import type { ComponentProps } from "react";
-import type { ImageStyle, ViewStyle } from "react-native";
+import { type ImageStyle, Platform, type ViewStyle } from "react-native";
 import { useYoshiki } from "yoshiki/native";
 import type { YoshikiStyle } from "yoshiki/src/type";
 import type { KImage } from "~/models";
@@ -41,11 +41,13 @@ export const Image = ({
 		<EImage
 			source={{
 				uri: src ? `${apiUrl}${src[quality ?? "high"]}` : null,
-				headers: authToken
+				// use cookies on web to allow `img` to make the call instead of js
-					? {
+				headers:
-							Authorization: authToken,
+					authToken && Platform.OS !== "web"
-						}
+						? {
-					: {},
+								Authorization: authToken,
+							}
+						: undefined,
 			}}
 			placeholder={{ blurhash: src?.blurhash }}
 			accessibilityLabel={alt}

front/src/primitives/utils/breakpoint.ts

@@ -1,5 +1,5 @@
 import { useWindowDimensions } from "react-native";
-import { type Breakpoints as YoshikiBreakpoint, breakpoints, isBreakpoints } from "yoshiki/native";
+import { breakpoints, isBreakpoints, type Breakpoints as YoshikiBreakpoint } from "yoshiki/native";
 
 type AtLeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U];
 export type Breakpoint<T> = T | AtLeastOne<YoshikiBreakpoint<T>>;
@@ -7,9 +7,9 @@ export type Breakpoint<T> = T | AtLeastOne<YoshikiBreakpoint<T>>;
 // copied from yoshiki.
 const useBreakpoint = () => {
 	const { width } = useWindowDimensions();
-	const idx = Object.values(breakpoints).findIndex((x) => width <= x);
+	const idx = Object.values(breakpoints).findLastIndex((x) => x <= width);
 	if (idx === -1) return 0;
-	return idx - 1;
+	return idx;
 };
 
 const getBreakpointValue = <T>(value: Breakpoint<T>, breakpoint: number): T => {

front/src/primitives/utils/spacing.tsx

@@ -1,12 +1,11 @@
 import { Platform } from "react-native";
-import { px } from "yoshiki/native";
 
 export const important = <T,>(value: T): T => {
 	return `${value} !important` as T;
 };
 
 export const ts = (spacing: number) => {
-	return px(spacing * 8);
+	return spacing * 8;
 };
 
 export const focusReset: object =

front/src/query/fetch-infinite.tsx

@@ -80,12 +80,10 @@ export const InfiniteFetch = <Data, Props, _, Kind extends number | string>({
 			onEndReachedThreshold={0.5}
 			onRefresh={layout.layout !== "horizontal" ? refetch : undefined}
 			refreshing={isRefetching}
-
 			ListHeaderComponent={Header}
 			ItemSeparatorComponent={divider === true ? HR : (divider as any) || undefined}
 			ListEmptyComponent={Empty}
-
+			contentContainerStyle={{ gap, marginHorizontal: gap }}
-			contentContainerStyle={{ gap, margin: gap }}
 			{...props}
 		/>
 	);

front/src/ui/browse/header.tsx

@@ -11,10 +11,22 @@ import ViewList from "@material-symbols/svg-400/rounded/view_list.svg";
 import { useTranslation } from "react-i18next";
 import { type PressableProps, View } from "react-native";
 import { useYoshiki } from "yoshiki/native";
-import { HR, Icon, IconButton, Menu, P, PressableFeedback, tooltip, ts } from "~/primitives";
+import {
-import { type SortBy, type SortOrd, availableSorts } from "./types";
+	HR,
+	Icon,
+	IconButton,
+	Menu,
+	P,
+	PressableFeedback,
+	tooltip,
+	ts,
+} from "~/primitives";
+import { availableSorts, type SortBy, type SortOrd } from "./types";
 
-const SortTrigger = ({ sortBy, ...props }: { sortBy: SortBy } & PressableProps) => {
+const SortTrigger = ({
+	sortBy,
+	...props
+}: { sortBy: SortBy } & PressableProps) => {
 	const { css } = useYoshiki();
 	const { t } = useTranslation();
 
@@ -48,8 +60,17 @@ const MediaTypeTrigger = ({
 			{...css({ flexDirection: "row", alignItems: "center" }, props as any)}
 			{...tooltip(t("browse.mediatype-tt"))}
 		>
-			<Icon icon={MediaTypeIcons[mediaType] ?? FilterList} {...css({ paddingX: ts(0.5) })} />
+			<Icon
-			<P>{t(mediaType !== "all" ? `browse.mediatypekey.${mediaType}` : "browse.mediatypelabel")}</P>
+				icon={MediaTypeIcons[mediaType] ?? FilterList}
+				{...css({ paddingX: ts(0.5) })}
+			/>
+			<P>
+				{t(
+					mediaType !== "all"
+						? `browse.mediatypekey.${mediaType}`
+						: "browse.mediatypelabel",
+				)}
+			</P>
 		</PressableFeedback>
 	);
 };
@@ -75,8 +96,9 @@ export const BrowseSettings = ({
 	const { t } = useTranslation();
 
 	// TODO: have a proper filter frontend
-	const mediaType = /kind eq (\w+)/.exec(filter)?.groups?.[0] ?? "all";
+	const mediaType = /kind eq (\w+)/.exec(filter)?.[1] ?? "all";
-	const setMediaType = (kind: string) => setFilter(kind !== "all " ? `kind eq ${kind}` : "");
+	const setMediaType = (kind: string) =>
+		setFilter(kind !== "all" ? `kind eq ${kind}` : "");
 
 	return (
 		<View
@@ -95,7 +117,9 @@ export const BrowseSettings = ({
 							label={t(`browse.sortkey.${x}`)}
 							selected={sortBy === x}
 							icon={sortOrd === "asc" ? ArrowUpward : ArrowDownward}
-							onSelect={() => setSort(x, sortBy === x && sortOrd === "asc" ? "desc" : "asc")}
+							onSelect={() =>
+								setSort(x, sortBy === x && sortOrd === "asc" ? "desc" : "asc")
+							}
 						/>
 					))}
 				</Menu>
@@ -115,8 +139,13 @@ export const BrowseSettings = ({
 					{...css({ padding: ts(0.5), marginY: "auto" })}
 				/>
 			</View>
-			<View {...css({ flexGrow: 1, flexDirection: "row", alignItems: "center" })}>
+			<View
-				<Menu Trigger={MediaTypeTrigger} mediaType={mediaType as keyof typeof MediaTypeIcons}>
+				{...css({ flexGrow: 1, flexDirection: "row", alignItems: "center" })}
+			>
+				<Menu
+					Trigger={MediaTypeTrigger}
+					mediaType={mediaType as keyof typeof MediaTypeIcons}
+				>
 					{Object.keys(MediaTypeIcons).map((x) => (
 						<Menu.Item
 							key={x}

front/src/ui/browse/index.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
-import { ItemGrid, itemMap } from "~/components/items";
+import { ItemGrid, ItemList, itemMap } from "~/components/items";
-import { ItemList } from "~/components/items";
 import { Show } from "~/models";
 import { InfiniteFetch, type QueryIdentifier } from "~/query";
 import { useQueryState } from "~/utils";
@@ -9,11 +8,11 @@ import type { SortBy, SortOrd } from "./types";
 
 export const BrowsePage = () => {
 	const [filter, setFilter] = useQueryState("filter", "");
-	const [sort, setSort] = useQueryState("sortBy", "");
+	const [sort, setSort] = useQueryState("sort", "name");
-	const sortBy = (sort?.split(":")[0] as SortBy) || "name";
+	const sortOrd = sort.startsWith("-") ? "desc" : "asc";
-	const sortOrd = (sort?.split(":")[1] as SortOrd) || "asc";
+	const sortBy = (sort.startsWith("-") ? sort.substring(1) : sort) as SortBy;
 
-	const [layout, setLayout] = useState<"grid" | "list">("grid");
+	const [layout, setLayout] = useQueryState<"grid" | "list">("layout", "grid");
 	const LayoutComponent = layout === "grid" ? ItemGrid : ItemList;
 
 	return (
@@ -25,7 +24,7 @@ export const BrowsePage = () => {
 					sortBy={sortBy}
 					sortOrd={sortOrd}
 					setSort={(key, ord) => {
-						setSort(`${key}:${ord}`);
+						setSort(ord === "desc" ? `-${key}` : key);
 					}}
 					filter={filter}
 					setFilter={setFilter}
@@ -41,7 +40,7 @@ export const BrowsePage = () => {
 
 BrowsePage.query = (
 	filter?: string,
-	sortKey?: SortBy,
+	sortBy?: SortBy,
 	sortOrd?: SortOrd,
 ): QueryIdentifier<Show> => {
 	return {
@@ -49,7 +48,7 @@ BrowsePage.query = (
 		path: ["shows"],
 		infinite: true,
 		params: {
-			sort: sortKey ? `${sortKey}:${sortOrd ?? "asc"}` : "name:asc",
+			sort: sortBy ? `${sortOrd === "desc" ? "-" : ""}${sortBy}` : "name",
 			filter,
 		},
 	};

front/src/utils.ts

@@ -1,5 +1,6 @@
 import { NavigationContext, useRoute } from "@react-navigation/native";
 import { useContext } from "react";
+import type { Movie, Show } from "~/models";
 
 export function setServerData(key: string, val: any) {}
 export function getServerData(key: string) {
@@ -35,4 +36,3 @@ export const getDisplayDate = (data: Show | Movie) => {
 	}
 	return null;
 };
-