wip: Add browse page

front/app.config.ts

@@ -21,10 +21,11 @@ export const expo: ExpoConfig = {
 			foregroundImage: "./public/icon-256x256.png",
 			backgroundColor: "#eff1f5",
 		},
+		edgeToEdgeEnabled: true,
 	},
 	web: {
 		favicon: "./public/icon-256x256.png",
-		bundler: "metro"
+		bundler: "metro",
 	},
 	updates: {
 		url: "https://u.expo.dev/55de6b52-c649-4a15-9a45-569ff5ed036c",

front/app/(app)/(tabs)/_layout.tsx

@@ -1,29 +1,9 @@
-/*
- * 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 { Icon } from "@kyoo/primitives";
 import Browse from "@material-symbols/svg-400/rounded/browse-fill.svg";
 import Downloading from "@material-symbols/svg-400/rounded/downloading-fill.svg";
 import Home from "@material-symbols/svg-400/rounded/home-fill.svg";
 import { Tabs } from "expo-router";
 import { useTranslation } from "react-i18next";
+import { Icon } from "~/primitives";
 
 export default function TabsLayout() {
 	const { t } = useTranslation();

front/app/(app)/(tabs)/browse.tsx

@@ -0,0 +1,3 @@
+import { BrowsePage } from "~/ui/browse";
+
+export default BrowsePage;

front/app/(app)/_layout.tsx

@@ -12,8 +12,10 @@ export default function Layout() {
 		<ErrorConsumer scope="app">
 			<Stack
 				screenOptions={{
-					navigationBarColor: "transparent",
+					// navigationBarColor: "transparent",
-					navigationBarTranslucent: true,
+					// navigationBarTranslucent: true,
+					// statusBarTranslucent: true,
+					// statusBarBackgroundColor: theme.accent,
 					headerTitle: () => <NavbarTitle />,
 					headerRight: () => <NavbarRight />,
 					contentStyle: {

front/apps/mobile/app/(app)/(tabs)/browse.tsx

@@ -1,23 +0,0 @@
-/*
- * 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 { BrowsePage } from "@kyoo/ui";
-
-export default BrowsePage;

front/i18n-d.d.ts

@@ -1,5 +1,5 @@
 import "i18next";
-import type en from "./public/translations/en.json";
+import type en from "../public/translations/en.json";
 
 declare module "i18next" {
 	interface CustomTypeOptions {

front/packages/ui/src/index.ts

@@ -1,32 +0,0 @@
-/*
- * 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 * from "../../../src/ui/navbar";
-export { HomePage } from "./home";
-export { BrowsePage } from "./browse";
-export { MovieDetails, ShowDetails } from "./details";
-export { CollectionPage } from "./collection";
-export { Player } from "./player";
-export { SearchPage } from "./search";
-export { ServerUrlPage, LoginPage, RegisterPage, OidcCallbackPage } from "../../../src/ui/login";
-export { DownloadPage, DownloadProvider } from "./downloads";
-export { SettingsPage } from "./settings";
-export { AdminPage } from "./admin";
-export * from "../../../src/ui/errors";

front/packages/ui/src/svg.d.ts

@@ -1,26 +0,0 @@
-/*
- * 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/>.
- */
-
-declare module "*.svg" {
-	import type React from "react";
-	import type { SvgProps } from "react-native-svg";
-	const content: React.FC<SvgProps>;
-	export default content;
-}

front/src/i18n-d.d.ts

@@ -1,5 +1,5 @@
 import "i18next";
-import type en from "./public/translations/en.json";
+import type en from "../public/translations/en.json";
 
 declare module "i18next" {
 	interface CustomTypeOptions {

front/src/query/query.tsx

@@ -106,13 +106,13 @@ export const createQueryClient = () =>
 				retry: false,
 			},
 			mutations: {
-				mutationFn: (({ method, path, body, params }: MutationParam) => {
+				// mutationFn: (({ method, path, body, params }: MutationParam) => {
-					return queryFn({
+				// 	return queryFn({
-						method,
+				// 		method,
-						path: toQueryKey({ path, params }),
+				// 		url: keyToUrl(toQueryKey({ path, params })),
-						body,
+				// 		body,
-					});
+				// 	});
-				}) as any,
+				// }) as any,
 			},
 		},
 	});
@@ -147,6 +147,10 @@ export const toQueryKey = (query: {
 	].filter((x) => x);
 };
 
+export const keyToUrl = (key: ReturnType<typeof toQueryKey>) => {
+	return key.join("/").replace("/?", "?");
+};
+
 export const useFetch = <Data,>(query: QueryIdentifier<Data>) => {
 	const { apiUrl, authToken } = useContext(AccountContext);
 	const key = toQueryKey({ apiUrl, path: query.path, params: query.params });
@@ -155,7 +159,7 @@ export const useFetch = <Data,>(query: QueryIdentifier<Data>) => {
 		queryKey: key,
 		queryFn: (ctx) =>
 			queryFn({
-				url: key.join("/").replace("/?", "?"),
+				url: keyToUrl(key),
 				parser: query.parser,
 				signal: ctx.signal,
 				authToken: authToken?.access_token ?? null,
@@ -174,7 +178,7 @@ export const useInfiniteFetch = <Data, Ret>(query: QueryIdentifier<Data, Ret>) =
 		queryKey: key,
 		queryFn: (ctx) =>
 			queryFn({
-				url: (ctx.pageParam as string) ?? key.join("/").replace("/?", "?"),
+				url: (ctx.pageParam as string) ?? keyToUrl(key),
 				parser: Paged(query.parser),
 				signal: ctx.signal,
 				authToken: authToken?.access_token ?? null,
@@ -214,7 +218,7 @@ export const prefetch = async (...queries: QueryIdentifier[]) => {
 						queryKey: key,
 						queryFn: (ctx) =>
 							queryFn({
-								url: key.join("/").replace("/?", "?"),
+								url: keyToUrl(key),
 								parser: Paged(query.parser),
 								signal: ctx.signal,
 								authToken: authToken?.access_token ?? null,
@@ -227,7 +231,7 @@ export const prefetch = async (...queries: QueryIdentifier[]) => {
 					queryKey: key,
 					queryFn: (ctx) =>
 						queryFn({
-							url: key.join("/").replace("/?", "?"),
+							url: keyToUrl(key),
 							parser: query.parser,
 							signal: ctx.signal,
 							authToken: authToken?.access_token ?? null,

front/src/ui/browse/grid.tsx

@@ -1,23 +1,3 @@
-/*
- * 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 { type KyooImage, WatchStatusV } from "@kyoo/models";
 import {
 	Icon,
@@ -35,7 +15,7 @@ import Done from "@material-symbols/svg-400/rounded/check-fill.svg";
 import { useState } from "react";
 import { type ImageStyle, Platform, View } from "react-native";
 import { type Stylable, type Theme, max, percent, px, rem, useYoshiki } from "yoshiki/native";
-import { ItemContext } from "../components/context-menus";
+import { ItemContext } from "../../../packages/ui/src/components/context-menus";
 import type { Layout } from "../fetch";
 
 export const ItemWatchStatus = ({

front/src/ui/browse/header.tsx

@@ -1,23 +1,3 @@
-/*
- * 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 { HR, Icon, IconButton, Menu, P, PressableFeedback, tooltip, ts } from "@kyoo/primitives";
 import ArrowDownward from "@material-symbols/svg-400/rounded/arrow_downward.svg";
 import ArrowUpward from "@material-symbols/svg-400/rounded/arrow_upward.svg";

front/src/ui/browse/index.tsx

@@ -1,34 +1,13 @@
-/*
+import { type ComponentProps, useState } from "react";
- * 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 {
 	type LibraryItem,
 	LibraryItemP,
 	type QueryIdentifier,
 	type QueryPage,
 	getDisplayDate,
-} from "@kyoo/models";
+} from "~/models";
-import { type ComponentProps, useState } from "react";
+import { InfiniteFetch } from "../../query/fetch-infinite"
-import { createParam } from "solito";
+import { DefaultLayout } from "../../../packages/ui/src/layout";
-import { InfiniteFetch } from "../fetch-infinite";
-import { DefaultLayout } from "../layout";
 import { ItemGrid } from "./grid";
 import { BrowseSettings } from "./header";
 import { ItemList } from "./list";

front/src/ui/browse/list.tsx

@@ -1,23 +1,3 @@
-/*
- * 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 type { KyooImage, WatchStatusV } from "@kyoo/models";
 import {
 	GradientImageBackground,
@@ -34,7 +14,7 @@ import {
 import { useState } from "react";
 import { Platform, View } from "react-native";
 import { percent, px, rem, useYoshiki } from "yoshiki/native";
-import { ItemContext } from "../components/context-menus";
+import { ItemContext } from "../../../packages/ui/src/components/context-menus";
 import type { Layout } from "../fetch";
 import { ItemWatchStatus } from "./grid";
 

front/src/ui/browse/types.ts

@@ -1,23 +1,3 @@
-/*
- * 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 Collection from "@material-symbols/svg-400/rounded/collections_bookmark.svg";
 import Movie from "@material-symbols/svg-400/rounded/movie.svg";
 import TV from "@material-symbols/svg-400/rounded/tv.svg";