Add a basic settings page

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

@@ -28,7 +28,7 @@ export default function PublicLayout() {
 	const theme = useTheme();
 	const account = useAccount();
 	const { error } = useContext(ConnectionErrorContext);
-	const oldAccount = useRef<Account | null>(null);
+	const oldAccount = useRef<Account | null>(account);
 
 	if (account && !error && account != oldAccount.current) return <Redirect href="/" />;
 	oldAccount.current = account;

front/apps/mobile/app/(public)/settings/index.tsx

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

front/apps/web/src/pages/settings/index.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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 { SettingsPage } from "@kyoo/ui";
+import { withRoute } from "~/router";
+
+export default withRoute(SettingsPage);

front/packages/ui/src/index.ts

@@ -27,3 +27,4 @@ export { Player } from "./player";
 export { SearchPage } from "./search";
 export { LoginPage, RegisterPage } from "./login";
 export { DownloadPage, DownloadProvider } from "./downloads";
+export { SettingsPage } from "./settings";

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

@@ -41,6 +41,7 @@ import Login from "@material-symbols/svg-400/rounded/login.svg";
 import Register from "@material-symbols/svg-400/rounded/app_registration.svg";
 import Logout from "@material-symbols/svg-400/rounded/logout.svg";
 import Delete from "@material-symbols/svg-400/rounded/delete.svg";
+import Settings from "@material-symbols/svg-400/rounded/settings.svg";
 import { KyooLongLogo } from "./icon";
 import { forwardRef, useEffect, useRef, useState } from "react";
 
@@ -118,6 +119,7 @@ export const NavbarProfile = () => {
 				/>
 			))}
 			{accounts.length > 0 && <HR />}
+			<Menu.Item label={t("misc.settings")} icon={Settings} href="/settings" />
 			{!account ? (
 				<>
 					<Menu.Item label={t("login.login")} icon={Login} href="/login" />
@@ -178,7 +180,7 @@ export const NavbarRight = () => {
 };
 
 export const Navbar = (props: Stylable) => {
-	const { css, theme } = useYoshiki();
+	const { css } = useYoshiki();
 	const { t } = useTranslation();
 
 	return (

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

@@ -0,0 +1,78 @@
+/*
+ * 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 { QueryIdentifier, QueryPage, User, UserP } from "@kyoo/models";
+import { Container, P, Select, ts } from "@kyoo/primitives";
+import { DefaultLayout } from "../layout";
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { ScrollView, View } from "react-native";
+import { useYoshiki } from "yoshiki/native";
+
+const Preference = ({ label, children, ...props }: { label: string; children: ReactNode }) => {
+	const { css } = useYoshiki();
+
+	return (
+		<View
+			{...css(
+				{
+					margin: ts(1),
+					flexGrow: 1,
+					flexDirection: "row",
+					justifyContent: "space-between",
+					alignItems: "center",
+				},
+				props,
+			)}
+		>
+			<P>{label}</P>
+			{children}
+		</View>
+	);
+};
+
+const query: QueryIdentifier<User> = {
+	parser: UserP,
+	path: ["auth", "me"],
+};
+
+export const SettingsPage: QueryPage = () => {
+	const { t } = useTranslation();
+
+	return (
+		<ScrollView>
+			<Container>
+				<Preference label={t("settings.theme.label")}>
+					<Select
+						label={t("settings.theme.label")}
+						value="system"
+						onValueChange={() => {}}
+						values={["system", "light", "dark"]}
+						getLabel={(key) => t(`settings.theme.${key}`)}
+					/>
+				</Preference>
+			</Container>
+		</ScrollView>
+	);
+};
+
+SettingsPage.getLayout = DefaultLayout;
+
+SettingsPage.getFetchUrls = () => [query];

front/translations/en.json

@@ -59,6 +59,7 @@
 		"switchToList": "Switch to list view"
 	},
 	"misc": {
+		"settings": "Settings",
 		"prev-page": "Previous page",
 		"next-page": "Next page",
 		"delete": "Delete",
@@ -71,6 +72,14 @@
 		"search": "Search",
 		"login": "Login"
 	},
+	"settings": {
+		"theme": {
+			"label": "Theme",
+			"system": "System",
+			"light": "Light",
+			"dark": "Dark"
+		}
+	},
 	"player": {
 		"back": "Back",
 		"previous": "Previous episode",

front/translations/fr.json

@@ -59,6 +59,7 @@
 		"switchToList": "Passer en vue liste"
 	},
 	"misc": {
+		"settings": "Paramètres",
 		"prev-page": "Page précédente",
 		"next-page": "Page suivante",
 		"delete": "Supprimer",
@@ -71,6 +72,14 @@
 		"search": "Rechercher",
 		"login": "Connexion"
 	},
+	"settings": {
+		"theme": {
+			"label": "Thème",
+			"system": "Système",
+			"light": "Clair",
+			"dark": "Sombre"
+		}
+	},
 	"player": {
 		"back": "Retour",
 		"previous": "Episode précédent",