diff --git a/front/packages/ui/src/admin/index.tsx b/front/packages/ui/src/admin/index.tsx
index ff0031d5..73ff5498 100644
--- a/front/packages/ui/src/admin/index.tsx
+++ b/front/packages/ui/src/admin/index.tsx
@@ -18,151 +18,11 @@
* along with Kyoo. If not, see .
*/
-import { QueryIdentifier, QueryPage, User, UserP, queryFn } from "@kyoo/models";
-import { Alert, Avatar, Icon, IconButton, Menu, P, Skeleton, tooltip, ts } from "@kyoo/primitives";
-import { ScrollView, View } from "react-native";
+import { QueryPage } from "@kyoo/models";
+import { ts } from "@kyoo/primitives";
+import { ScrollView } from "react-native";
import { DefaultLayout } from "../layout";
-import { SettingsContainer } from "../settings/base";
-import { useTranslation } from "react-i18next";
-import { InfiniteFetch } from "../fetch-infinite";
-import { Layout, WithLoading } from "../fetch";
-import { px, useYoshiki } from "yoshiki/native";
-
-import UserI from "@material-symbols/svg-400/rounded/account_circle.svg";
-import Admin from "@material-symbols/svg-400/rounded/shield_person.svg";
-import MoreVert from "@material-symbols/svg-400/rounded/more_vert.svg";
-import Delete from "@material-symbols/svg-400/rounded/delete.svg";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-
-const UserGrid = ({
- isLoading,
- id,
- username,
- avatar,
- isAdmin,
- ...props
-}: WithLoading<{ id: string; username: string; avatar: string; isAdmin: boolean }>) => {
- const { css } = useYoshiki();
- const { t } = useTranslation();
- const queryClient = useQueryClient();
- const { mutateAsync } = useMutation({
- mutationFn: async (update: Partial) =>
- await queryFn({
- path: ["users", id],
- method: "PATCH",
- body: update,
- }),
- onSettled: async () => await queryClient.invalidateQueries({ queryKey: ["users"] }),
- });
-
- return (
-
-
-
-
-
- {username}
-
-
-
-
- );
-};
-
-UserGrid.layout = {
- size: px(150),
- numColumns: { xs: 2, sm: 3, md: 5, lg: 6, xl: 7 },
- gap: { xs: ts(1), sm: ts(2), md: ts(4) },
- layout: "grid",
-} satisfies Layout;
-
-const UserList = () => {
- const { t } = useTranslation();
-
- return (
-
-
- {(user) => (
-
- )}
-
-
- );
-};
-
-UserList.query = (): QueryIdentifier => ({
- parser: UserP,
- path: ["users"],
- infinite: true,
-});
+import { UserList } from "./users";
export const AdminPage: QueryPage = () => {
return (
diff --git a/front/packages/ui/src/admin/users.tsx b/front/packages/ui/src/admin/users.tsx
new file mode 100644
index 00000000..328762df
--- /dev/null
+++ b/front/packages/ui/src/admin/users.tsx
@@ -0,0 +1,164 @@
+/*
+ * 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 .
+ */
+
+import { QueryIdentifier, User, UserP, queryFn } from "@kyoo/models";
+import { Alert, Avatar, Icon, IconButton, Menu, P, Skeleton, tooltip, ts } from "@kyoo/primitives";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { px, useYoshiki } from "yoshiki/native";
+import { Layout, WithLoading } from "../fetch";
+import { InfiniteFetch } from "../fetch-infinite";
+import { SettingsContainer } from "../settings/base";
+
+import UserI from "@material-symbols/svg-400/rounded/account_circle.svg";
+import Delete from "@material-symbols/svg-400/rounded/delete.svg";
+import MoreVert from "@material-symbols/svg-400/rounded/more_vert.svg";
+import Admin from "@material-symbols/svg-400/rounded/shield_person.svg";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+export const UserGrid = ({
+ isLoading,
+ id,
+ username,
+ avatar,
+ isAdmin,
+ ...props
+}: WithLoading<{ id: string; username: string; avatar: string; isAdmin: boolean }>) => {
+ const { css } = useYoshiki();
+ const { t } = useTranslation();
+ const queryClient = useQueryClient();
+ const { mutateAsync } = useMutation({
+ mutationFn: async (update: Partial) =>
+ await queryFn({
+ path: ["users", id],
+ method: "PATCH",
+ body: update,
+ }),
+ onSettled: async () => await queryClient.invalidateQueries({ queryKey: ["users"] }),
+ });
+
+ return (
+
+
+
+
+
+ {username}
+
+
+
+
+ );
+};
+
+UserGrid.layout = {
+ size: px(150),
+ numColumns: { xs: 2, sm: 3, md: 5, lg: 6, xl: 7 },
+ gap: { xs: ts(1), sm: ts(2), md: ts(4) },
+ layout: "grid",
+} satisfies Layout;
+
+export const UserList = () => {
+ const { t } = useTranslation();
+
+ return (
+
+
+ {(user) => (
+
+ )}
+
+
+ );
+};
+
+UserList.query = (): QueryIdentifier => ({
+ parser: UserP,
+ path: ["users"],
+ infinite: true,
+});