Sort imports

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

@@ -19,10 +19,10 @@
  */
 
 import { Icon } from "@kyoo/primitives";
-import { Tabs } from "expo-router";
-import Home from "@material-symbols/svg-400/rounded/home-fill.svg";
 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";
 
 export default function TabsLayout() {
 	return (

front/apps/mobile/app/_layout.tsx

@@ -20,39 +20,39 @@
 
 import "react-native-reanimated";
 
-import { PortalProvider } from "@gorhom/portal";
-import { SnackbarProvider, ThemeSelector } from "@kyoo/primitives";
-import { DownloadProvider } from "@kyoo/ui";
-import { AccountProvider, createQueryClient, storage, useUserTheme } from "@kyoo/models";
-import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
-import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
-import i18next from "i18next";
-import { Slot } from "expo-router";
-import { getLocales } from "expo-localization";
-import * as SplashScreen from "expo-splash-screen";
 import {
-	useFonts,
 	Poppins_300Light,
 	Poppins_400Regular,
 	Poppins_900Black,
+	useFonts,
 } from "@expo-google-fonts/poppins";
-import { type ReactNode, useEffect, useState } from "react";
-import { useColorScheme } from "react-native";
-import { initReactI18next } from "react-i18next";
-import { ThemeProvider as RNThemeProvider } from "@react-navigation/native";
-import "intl-pluralrules";
-import "@formatjs/intl-locale/polyfill";
-import "@formatjs/intl-displaynames/polyfill";
 import "@formatjs/intl-displaynames/locale-data/en";
 import "@formatjs/intl-displaynames/locale-data/fr";
+import "@formatjs/intl-displaynames/polyfill";
+import "@formatjs/intl-locale/polyfill";
+import { PortalProvider } from "@gorhom/portal";
+import { AccountProvider, createQueryClient, storage, useUserTheme } from "@kyoo/models";
+import { SnackbarProvider, ThemeSelector } from "@kyoo/primitives";
+import { DownloadProvider } from "@kyoo/ui";
+import { ThemeProvider as RNThemeProvider } from "@react-navigation/native";
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { getLocales } from "expo-localization";
+import { Slot } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
+import i18next from "i18next";
+import "intl-pluralrules";
+import { type ReactNode, useEffect, useState } from "react";
+import { initReactI18next } from "react-i18next";
+import { useColorScheme } from "react-native";
 
+import NetInfo from "@react-native-community/netinfo";
+import { onlineManager } from "@tanstack/react-query";
+import { useTheme } from "yoshiki/native";
 // TODO: use a backend to load jsons.
 import en from "../../../translations/en.json";
 import fr from "../../../translations/fr.json";
 import zh from "../../../translations/zh.json";
-import { useTheme } from "yoshiki/native";
-import NetInfo from "@react-native-community/netinfo";
-import { onlineManager } from "@tanstack/react-query";
 
 onlineManager.setEventListener((setOnline) => {
 	return NetInfo.addEventListener((state) => {

front/apps/mobile/app/utils.tsx

@@ -18,14 +18,14 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Stack, useLocalSearchParams } from "expo-router";
-import { type ComponentType, useEffect } from "react";
-import { StatusBar, type StatusBarProps } from "react-native";
-import * as ScreenOrientation from "expo-screen-orientation";
-import * as NavigationBar from "expo-navigation-bar";
-import arrayShuffle from "array-shuffle";
 import { type QueryPage, useHasPermission } from "@kyoo/models";
 import { Unauthorized } from "@kyoo/ui";
+import arrayShuffle from "array-shuffle";
+import * as NavigationBar from "expo-navigation-bar";
+import { Stack, useLocalSearchParams } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { type ComponentType, useEffect } from "react";
+import { StatusBar, type StatusBarProps } from "react-native";
 
 const FullscreenProvider = () => {
 	useEffect(() => {

front/apps/web/src/i18n.tsx

@@ -18,10 +18,10 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { type ComponentType, useMemo } from "react";
 import i18next, { type InitOptions } from "i18next";
-import { I18nextProvider } from "react-i18next";
 import type { AppContext, AppInitialProps, AppProps } from "next/app";
+import { type ComponentType, useMemo } from "react";
+import { I18nextProvider } from "react-i18next";
 
 import en from "../../../translations/en.json";
 import fr from "../../../translations/fr.json";

front/apps/web/src/pages/_app.tsx

@@ -20,42 +20,42 @@
 
 import "../polyfill";
 
-import { HydrationBoundary, QueryClientProvider, dehydrate } from "@tanstack/react-query";
+import { PortalProvider } from "@gorhom/portal";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import {
-	HiddenIfNoJs,
-	TouchOnlyCss,
-	SkeletonCss,
-	ThemeSelector,
-	SnackbarProvider,
-} from "@kyoo/primitives";
-import { WebTooltip } from "@kyoo/primitives/src/tooltip.web";
 import {
 	AccountP,
 	AccountProvider,
 	ConnectionErrorContext,
-	createQueryClient,
-	fetchQuery,
-	getTokenWJ,
 	type QueryIdentifier,
 	type QueryPage,
 	ServerInfoP,
-	setSsrApiUrl,
 	UserP,
+	createQueryClient,
+	fetchQuery,
+	getTokenWJ,
+	setSsrApiUrl,
 	useUserTheme,
 } from "@kyoo/models";
-import { type ComponentType, useContext, useState } from "react";
+import { getCurrentAccount, readCookie, updateAccount } from "@kyoo/models/src/account-internal";
+import {
+	HiddenIfNoJs,
+	SkeletonCss,
+	SnackbarProvider,
+	ThemeSelector,
+	TouchOnlyCss,
+} from "@kyoo/primitives";
+import { WebTooltip } from "@kyoo/primitives/src/tooltip.web";
+import { ConnectionError } from "@kyoo/ui";
+import { HydrationBoundary, QueryClientProvider, dehydrate } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import arrayShuffle from "array-shuffle";
 import NextApp, { type AppContext, type AppProps } from "next/app";
 import { Poppins } from "next/font/google";
-import { useTheme, useMobileHover, useStyleRegistry, StyleRegistryProvider } from "yoshiki/web";
-import superjson from "superjson";
 import Head from "next/head";
-import { withTranslations } from "../i18n";
+import { type ComponentType, useContext, useState } from "react";
-import arrayShuffle from "array-shuffle";
 import { Tooltip } from "react-tooltip";
-import { getCurrentAccount, readCookie, updateAccount } from "@kyoo/models/src/account-internal";
+import superjson from "superjson";
-import { PortalProvider } from "@gorhom/portal";
+import { StyleRegistryProvider, useMobileHover, useStyleRegistry, useTheme } from "yoshiki/web";
-import { ConnectionError } from "@kyoo/ui";
+import { withTranslations } from "../i18n";
 
 const font = Poppins({ weight: ["300", "400", "900"], subsets: ["latin"], display: "swap" });
 

front/apps/web/src/pages/_document.tsx

@@ -18,9 +18,9 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { type DocumentContext, Head, Html, Main, NextScript } from "next/document";
 import { AppRegistry } from "react-native";
-import { Html, Main, Head, NextScript, type DocumentContext } from "next/document";
+import { StyleRegistryProvider, createStyleRegistry } from "yoshiki/web";
-import { createStyleRegistry, StyleRegistryProvider } from "yoshiki/web";
 
 export const style = `
 /**

front/packages/models/src/account-internal.ts

@@ -18,10 +18,10 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { Platform } from "react-native";
+import { MMKV } from "react-native-mmkv";
 import { type ZodTypeAny, z } from "zod";
 import { type Account, AccountP } from "./accounts";
-import { MMKV } from "react-native-mmkv";
-import { Platform } from "react-native";
 
 export const storage = new MMKV();
 

front/packages/models/src/accounts.tsx

@@ -18,6 +18,8 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { useQueryClient } from "@tanstack/react-query";
+import { atom, getDefaultStore, useAtomValue, useSetAtom } from "jotai";
 import {
 	type ReactNode,
 	createContext,
@@ -27,16 +29,14 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { ServerInfoP, type User, UserP } from "./resources";
-import { z } from "zod";
-import { zdate } from "./utils";
-import { removeAccounts, setCookie, updateAccount } from "./account-internal";
-import { useMMKVString } from "react-native-mmkv";
 import { Platform } from "react-native";
-import { useQueryClient } from "@tanstack/react-query";
+import { useMMKVString } from "react-native-mmkv";
-import { atom, getDefaultStore, useAtomValue, useSetAtom } from "jotai";
+import { z } from "zod";
-import { useFetch } from "./query";
+import { removeAccounts, setCookie, updateAccount } from "./account-internal";
 import type { KyooErrors } from "./kyoo-errors";
+import { useFetch } from "./query";
+import { ServerInfoP, type User, UserP } from "./resources";
+import { zdate } from "./utils";
 
 export const TokenP = z.object({
 	token_type: z.literal("Bearer"),

front/packages/models/src/login.ts

@@ -18,13 +18,13 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { queryFn } from "./query";
-import type { KyooErrors } from "./kyoo-errors";
-import { type Account, type Token, TokenP, getCurrentApiUrl } from "./accounts";
-import { UserP } from "./resources";
-import { addAccount, getCurrentAccount, removeAccounts, updateAccount } from "./account-internal";
-import { Platform } from "react-native";
 import { useEffect, useRef, useState } from "react";
+import { Platform } from "react-native";
+import { addAccount, getCurrentAccount, removeAccounts, updateAccount } from "./account-internal";
+import { type Account, type Token, TokenP, getCurrentApiUrl } from "./accounts";
+import type { KyooErrors } from "./kyoo-errors";
+import { queryFn } from "./query";
+import { UserP } from "./resources";
 
 type Result<A, B> =
 	| { ok: true; value: A; error?: undefined }

front/packages/models/src/query.tsx

@@ -18,18 +18,18 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type { ComponentType, ReactElement } from "react";
 import {
 	QueryClient,
 	type QueryFunctionContext,
 	useInfiniteQuery,
 	useQuery,
 } from "@tanstack/react-query";
+import type { ComponentType, ReactElement } from "react";
 import type { z } from "zod";
-import type { KyooErrors } from "./kyoo-errors";
-import { type Page, Paged } from "./page";
-import { getToken, getTokenWJ } from "./login";
 import { getCurrentApiUrl } from ".";
+import type { KyooErrors } from "./kyoo-errors";
+import { getToken, getTokenWJ } from "./login";
+import { type Page, Paged } from "./page";
 
 export let lastUsedUrl: string = null!;
 

front/packages/models/src/resources/episode.base.ts

@@ -19,9 +19,9 @@
  */
 
 import { z } from "zod";
-import { zdate } from "../utils";
 import { ImagesP, imageFn } from "../traits";
 import { ResourceP } from "../traits/resource";
+import { zdate } from "../utils";
 
 export const BaseEpisodeP = ResourceP("episode")
 	.merge(ImagesP)

front/packages/models/src/resources/episode.ts

@@ -19,8 +19,8 @@
  */
 
 import { z } from "zod";
-import { ShowP } from "./show";
 import { BaseEpisodeP } from "./episode.base";
+import { ShowP } from "./show";
 import { WatchStatusP } from "./watch-status";
 
 export const EpisodeP = BaseEpisodeP.and(

front/packages/models/src/resources/movie.ts

@@ -19,13 +19,13 @@
  */
 
 import { z } from "zod";
-import { zdate } from "../utils";
 import { ImagesP, ResourceP, imageFn } from "../traits";
-import { Genre } from "./genre";
+import { zdate } from "../utils";
-import { StudioP } from "./studio";
-import { Status } from "./show";
 import { CollectionP } from "./collection";
+import { Genre } from "./genre";
 import { MetadataP } from "./metadata";
+import { Status } from "./show";
+import { StudioP } from "./studio";
 import { WatchStatusP } from "./watch-status";
 
 export const MovieP = ResourceP("movie")

front/packages/models/src/resources/news.ts

@@ -19,8 +19,8 @@
  */
 
 import { z } from "zod";
-import { MovieP } from "./movie";
 import { EpisodeP } from "./episode";
+import { MovieP } from "./movie";
 
 export const NewsP = z.union([
 	/*

front/packages/models/src/resources/season.ts

@@ -19,8 +19,8 @@
  */
 
 import { z } from "zod";
-import { zdate } from "../utils";
 import { ImagesP, ResourceP } from "../traits";
+import { zdate } from "../utils";
 
 export const SeasonP = ResourceP("season").merge(ImagesP).extend({
 	/**

front/packages/models/src/resources/server-info.ts

@@ -18,9 +18,9 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { Platform } from "react-native";
 import { z } from "zod";
 import { imageFn } from "..";
-import { Platform } from "react-native";
 
 export const OidcInfoP = z.object({
 	/*

front/packages/models/src/resources/show.ts

@@ -19,12 +19,12 @@
  */
 
 import { z } from "zod";
-import { zdate } from "../utils";
 import { ImagesP, ResourceP } from "../traits";
-import { Genre } from "./genre";
+import { zdate } from "../utils";
-import { StudioP } from "./studio";
 import { BaseEpisodeP } from "./episode.base";
+import { Genre } from "./genre";
 import { MetadataP } from "./metadata";
+import { StudioP } from "./studio";
 import { ShowWatchStatusP } from "./watch-status";
 
 /**

front/packages/models/src/resources/user.ts

@@ -19,8 +19,8 @@
  */
 
 import { z } from "zod";
-import { ResourceP } from "../traits/resource";
 import { imageFn } from "../traits/images";
+import { ResourceP } from "../traits/resource";
 
 export const UserP = ResourceP("user")
 	.extend({

front/packages/models/src/resources/watch-info.ts

@@ -18,9 +18,9 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import i18next from "i18next";
 import { z } from "zod";
 import { imageFn } from "../traits";
-import i18next from "i18next";
 import { QualityP } from "./quality";
 
 const getDisplayName = (sub: Track) => {

front/packages/models/src/theme.ts

@@ -18,9 +18,9 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { Platform } from "react-native";
 import { useMMKVString } from "react-native-mmkv";
 import { setCookie, storage } from "./account-internal";
-import { Platform } from "react-native";
 
 export const useUserTheme = (ssrTheme?: "light" | "dark" | "auto") => {
 	if (Platform.OS === "web" && typeof window === "undefined" && ssrTheme) return ssrTheme;

front/packages/models/src/utils.ts

@@ -19,10 +19,10 @@
  */
 
 import { Platform } from "react-native";
-import type { Movie, Show } from "./resources";
-import { z } from "zod";
 import { useMMKVString } from "react-native-mmkv";
+import { z } from "zod";
 import { storage } from "./account-internal";
+import type { Movie, Show } from "./resources";
 
 export const zdate = z.coerce.date;
 

front/packages/primitives/src/alert.tsx

@@ -20,7 +20,7 @@
 
 // Stolen from https://github.com/necolas/react-native-web/issues/1026#issuecomment-1458279681
 
-import { Alert as RNAlert, type AlertOptions, type AlertButton } from "react-native";
+import { type AlertButton, type AlertOptions, Alert as RNAlert } from "react-native";
 import type { SweetAlertIcon } from "sweetalert2";
 
 export interface ExtendedAlertStatic {

front/packages/primitives/src/avatar.tsx

@@ -18,12 +18,12 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { View, type ViewStyle, Image, type ImageProps } from "react-native";
+import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg";
-import { useYoshiki, px, type Stylable } from "yoshiki/native";
+import { type ComponentType, type RefAttributes, forwardRef } from "react";
+import { Image, type ImageProps, View, type ViewStyle } from "react-native";
+import { type Stylable, px, useYoshiki } from "yoshiki/native";
 import { Icon } from "./icons";
 import { P } from "./text";
-import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg";
-import { type ComponentType, forwardRef, type RefAttributes } from "react";
 
 const stringToColor = (string: string) => {
 	let hash = 0;

front/packages/primitives/src/button.tsx

@@ -19,11 +19,11 @@
  */
 
 import { type ComponentType, type ForwardedRef, type ReactElement, forwardRef } from "react";
+import { type Falsy, type PressableProps, View } from "react-native";
 import { type Theme, useYoshiki } from "yoshiki/native";
 import { PressableFeedback } from "./links";
 import { P } from "./text";
 import { ts } from "./utils";
-import { type Falsy, type PressableProps, View } from "react-native";
 
 export const Button = forwardRef(function Button<AsProps = PressableProps>(
 	{

front/packages/primitives/src/chip.tsx

@@ -18,12 +18,12 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { px, rem, type Theme, useYoshiki } from "yoshiki/native";
+import type { TextProps } from "react-native";
+import { type Theme, px, rem, useYoshiki } from "yoshiki/native";
 import { Link } from "./links";
+import { Skeleton } from "./skeleton";
 import { P } from "./text";
 import { capitalize, ts } from "./utils";
-import type { TextProps } from "react-native";
-import { Skeleton } from "./skeleton";
 
 export const Chip = ({
 	color,

front/packages/primitives/src/divider.tsx

@@ -19,7 +19,7 @@
  */
 
 import { HR as EHR } from "@expo/html-elements";
-import { px, type Stylable, useYoshiki } from "yoshiki/native";
+import { type Stylable, px, useYoshiki } from "yoshiki/native";
 import { ts } from "./utils";
 
 export const HR = ({

front/packages/primitives/src/icons.tsx

@@ -23,10 +23,10 @@ import { type ComponentProps, type ComponentType, type ForwardedRef, forwardRef
 import { Platform, type PressableProps } from "react-native";
 import type { SvgProps } from "react-native-svg";
 import type { YoshikiStyle } from "yoshiki";
-import { px, type Stylable, type Theme, useYoshiki } from "yoshiki/native";
+import { type Stylable, type Theme, px, useYoshiki } from "yoshiki/native";
 import { PressableFeedback } from "./links";
-import { type Breakpoint, focusReset, ts } from "./utils";
 import { P } from "./text";
+import { type Breakpoint, focusReset, ts } from "./utils";
 
 declare module "react" {
 	function forwardRef<T, P = {}>(

front/packages/primitives/src/image/image.tsx

@@ -18,14 +18,14 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { getCurrentToken } from "@kyoo/models";
 import { useState } from "react";
 import { type FlexStyle, type ImageStyle, View, type ViewStyle } from "react-native";
-import FastImage from "react-native-fast-image";
 import { Blurhash } from "react-native-blurhash";
+import FastImage from "react-native-fast-image";
 import { percent, useYoshiki } from "yoshiki/native";
-import type { Props, ImageLayout } from "./base-image";
 import { Skeleton } from "../skeleton";
-import { getCurrentToken } from "@kyoo/models";
+import type { ImageLayout, Props } from "./base-image";
 
 export const Image = ({
 	src,

front/packages/primitives/src/image/image.web.tsx

@@ -18,14 +18,14 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import NextImage from "next/image";
 import { useState } from "react";
 import { type ImageStyle, View, type ViewStyle } from "react-native";
 import { useYoshiki } from "yoshiki/native";
-import type { Props, ImageLayout } from "./base-image";
-import { BlurhashContainer } from "./blurhash.web";
-import { Skeleton } from "../skeleton";
-import NextImage from "next/image";
 import { imageBorderRadius } from "../constants";
+import { Skeleton } from "../skeleton";
+import type { ImageLayout, Props } from "./base-image";
+import { BlurhashContainer } from "./blurhash.web";
 
 export const Image = ({
 	src,

front/packages/primitives/src/input.tsx

@@ -18,11 +18,11 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { forwardRef, type ReactNode, useState } from "react";
+import { type ReactNode, forwardRef, useState } from "react";
 import { TextInput, type TextInputProps, View, type ViewStyle } from "react-native";
-import { px, type Theme, useYoshiki } from "yoshiki/native";
+import { type Theme, px, useYoshiki } from "yoshiki/native";
-import { focusReset, ts } from "./utils";
 import type { YoshikiEnhanced } from "./image/base-image";
+import { focusReset, ts } from "./utils";
 
 export const Input = forwardRef<
 	TextInput,

front/packages/primitives/src/links.tsx

@@ -18,20 +18,20 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { forwardRef, type ReactNode } from "react";
+import type { UrlObject } from "node:url";
+import { type ReactNode, forwardRef } from "react";
 import {
+	Linking,
 	Platform,
 	Pressable,
+	type PressableProps,
 	type TextProps,
 	type View,
-	type PressableProps,
-	Linking,
 } from "react-native";
 import { TextLink, useLink } from "solito/link";
-import { useTheme, useYoshiki } from "yoshiki/native";
-import type { UrlObject } from "node:url";
-import { alpha } from "./themes";
 import { parseNextPath } from "solito/router";
+import { useTheme, useYoshiki } from "yoshiki/native";
+import { alpha } from "./themes";
 
 export const A = ({
 	href,

front/packages/primitives/src/menu.tsx

@@ -19,29 +19,29 @@
  */
 
 import { Portal } from "@gorhom/portal";
+import Check from "@material-symbols/svg-400/rounded/check-fill.svg";
+import Close from "@material-symbols/svg-400/rounded/close-fill.svg";
 import { ScrollView } from "moti";
 import {
 	type ComponentType,
-	createContext,
 	type ReactElement,
 	type ReactNode,
+	createContext,
 	useContext,
 	useEffect,
 	useRef,
 	useState,
 } from "react";
-import { StyleSheet, Pressable, View } from "react-native";
+import { Pressable, StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { SvgProps } from "react-native-svg";
+import { useRouter } from "solito/router";
 import { percent, px, sm, useYoshiki, vh, xl } from "yoshiki/native";
-import Close from "@material-symbols/svg-400/rounded/close-fill.svg";
 import { Icon, IconButton } from "./icons";
 import { PressableFeedback } from "./links";
 import { P } from "./text";
 import { ContrastArea, SwitchVariant } from "./themes";
 import { ts } from "./utils";
-import Check from "@material-symbols/svg-400/rounded/check-fill.svg";
-import { useRouter } from "solito/router";
-import type { SvgProps } from "react-native-svg";
 
 const MenuContext = createContext<((open: boolean) => void) | undefined>(undefined);
 

front/packages/primitives/src/menu.web.tsx

@@ -18,24 +18,24 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import Dot from "@material-symbols/svg-400/rounded/fiber_manual_record-fill.svg";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import Link from "next/link";
 import {
 	type ComponentProps,
 	type ComponentType,
-	forwardRef,
 	type ReactElement,
 	type ReactNode,
+	forwardRef,
 } from "react";
-import Link from "next/link";
 import type { PressableProps } from "react-native";
-import { useYoshiki } from "yoshiki/web";
+import type { SvgProps } from "react-native-svg";
 import { useYoshiki as useNativeYoshiki } from "yoshiki/native";
+import { useYoshiki } from "yoshiki/web";
+import { Icon } from "./icons";
 import { P } from "./text";
 import { ContrastArea, SwitchVariant } from "./themes";
-import { Icon } from "./icons";
-import Dot from "@material-symbols/svg-400/rounded/fiber_manual_record-fill.svg";
 import { focusReset, ts } from "./utils";
-import type { SvgProps } from "react-native-svg";
 
 type YoshikiFunc<T> = (props: ReturnType<typeof useYoshiki>) => T;
 export const YoshikiProvider = ({ children }: { children: YoshikiFunc<ReactNode> }) => {

front/packages/primitives/src/popup.tsx

@@ -18,13 +18,13 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { type ReactNode, useCallback, useEffect, useState } from "react";
-import { Container } from "./container";
 import { usePortal } from "@gorhom/portal";
-import { ContrastArea, SwitchVariant, type YoshikiFunc } from "./themes";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
-import { View, ScrollView } from "react-native";
+import { ScrollView, View } from "react-native";
-import { imageBorderRadius } from "./constants";
 import { px, vh } from "yoshiki/native";
+import { imageBorderRadius } from "./constants";
+import { Container } from "./container";
+import { ContrastArea, SwitchVariant, type YoshikiFunc } from "./themes";
 import { ts } from "./utils";
 
 export const Popup = ({ children, ...props }: { children: ReactNode | YoshikiFunc<ReactNode> }) => {

front/packages/primitives/src/progress.tsx

@@ -20,7 +20,7 @@
 
 import { ActivityIndicator, Platform, View } from "react-native";
 import { Circle, Svg } from "react-native-svg";
-import { px, type Stylable, useYoshiki } from "yoshiki/native";
+import { type Stylable, px, useYoshiki } from "yoshiki/native";
 
 export const CircularProgress = ({
 	size = 48,

front/packages/primitives/src/select.tsx

@@ -18,10 +18,10 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Icon } from "./icons";
 import ExpandMore from "@material-symbols/svg-400/rounded/expand_more-fill.svg";
-import { Menu } from "./menu";
 import { Button } from "./button";
+import { Icon } from "./icons";
+import { Menu } from "./menu";
 
 export const Select = <Value extends string>({
 	label,

front/packages/primitives/src/select.web.tsx

@@ -18,20 +18,20 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import Check from "@material-symbols/svg-400/rounded/check-fill.svg";
+import ExpandLess from "@material-symbols/svg-400/rounded/expand_less-fill.svg";
+import ExpandMore from "@material-symbols/svg-400/rounded/expand_more-fill.svg";
 import * as RSelect from "@radix-ui/react-select";
 import { forwardRef } from "react";
-import { Icon } from "./icons";
-import Check from "@material-symbols/svg-400/rounded/check-fill.svg";
-import ExpandMore from "@material-symbols/svg-400/rounded/expand_more-fill.svg";
-import ExpandLess from "@material-symbols/svg-400/rounded/expand_less-fill.svg";
-import { ContrastArea, SwitchVariant } from "./themes";
-import { InternalTriger, YoshikiProvider } from "./menu.web";
-import { type Theme, px, useYoshiki as useNativeYoshiki } from "yoshiki/native";
-import { useYoshiki } from "yoshiki";
-import { PressableFeedback } from "./links";
-import { P } from "./text";
-import { focusReset, ts } from "./utils";
 import { View } from "react-native";
+import { useYoshiki } from "yoshiki";
+import { type Theme, px, useYoshiki as useNativeYoshiki } from "yoshiki/native";
+import { Icon } from "./icons";
+import { PressableFeedback } from "./links";
+import { InternalTriger, YoshikiProvider } from "./menu.web";
+import { P } from "./text";
+import { ContrastArea, SwitchVariant } from "./themes";
+import { focusReset, ts } from "./utils";
 
 export const Select = ({
 	label,

front/packages/primitives/src/skeleton.tsx

@@ -19,10 +19,10 @@
  */
 
 import { LinearGradient as LG } from "expo-linear-gradient";
-import { AnimatePresence, motify, MotiView } from "moti";
+import { AnimatePresence, MotiView, motify } from "moti";
 import { useState } from "react";
 import { Platform, View, type ViewProps } from "react-native";
-import { px, rem, useYoshiki, percent, em } from "yoshiki/native";
+import { em, percent, px, rem, useYoshiki } from "yoshiki/native";
 import { hiddenIfNoJs } from "./utils/nojs";
 
 const LinearGradient = motify(LG)();

front/packages/primitives/src/skeleton.web.tsx

@@ -20,7 +20,7 @@
 
 import { LinearGradient } from "expo-linear-gradient";
 import { View, type ViewProps } from "react-native";
-import { px, rem, useYoshiki, percent, em } from "yoshiki/native";
+import { em, percent, px, rem, useYoshiki } from "yoshiki/native";
 import { hiddenIfNoJs } from "./utils/nojs";
 
 export const SkeletonCss = () => (

front/packages/primitives/src/slider.tsx

@@ -20,9 +20,9 @@
 
 import { useRef, useState } from "react";
 import { type GestureResponderEvent, Platform, View } from "react-native";
-import { px, percent, Stylable, useYoshiki } from "yoshiki/native";
-import { focusReset } from "./utils";
 import type { ViewProps } from "react-native-svg/lib/typescript/fabric/utils";
+import { Stylable, percent, px, useYoshiki } from "yoshiki/native";
+import { focusReset } from "./utils";
 
 export const Slider = ({
 	progress,

front/packages/primitives/src/snackbar.tsx

@@ -20,13 +20,13 @@
 
 import { usePortal } from "@gorhom/portal";
 import { type ReactElement, createContext, useCallback, useContext, useRef } from "react";
-import { ContrastArea, SwitchVariant } from "./themes";
-import { P } from "./text";
 import { View } from "react-native";
 import { percent, px } from "yoshiki/native";
-import { ts } from "./utils";
 import { Button } from "./button";
 import { imageBorderRadius } from "./constants";
+import { P } from "./text";
+import { ContrastArea, SwitchVariant } from "./themes";
+import { ts } from "./utils";
 
 export type Snackbar = {
 	key?: string;

front/packages/primitives/src/text.tsx

@@ -18,9 +18,6 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type { ComponentType, ComponentProps } from "react";
-import { Platform, Text, type TextProps, type TextStyle, type StyleProp } from "react-native";
-import { percent, rem, useYoshiki } from "yoshiki/native";
 import {
 	H1 as EH1,
 	H2 as EH2,
@@ -30,6 +27,9 @@ import {
 	H6 as EH6,
 	P as EP,
 } from "@expo/html-elements";
+import type { ComponentProps, ComponentType } from "react";
+import { Platform, type StyleProp, Text, type TextProps, type TextStyle } from "react-native";
+import { percent, rem, useYoshiki } from "yoshiki/native";
 import { ts } from "./utils/spacing";
 
 const styleText = (

front/packages/primitives/src/themes/theme.tsx

@@ -18,14 +18,14 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type { ReactNode } from "react";
 import type { Property } from "csstype";
+import type { ReactNode } from "react";
+import { Platform } from "react-native";
 import { type Theme, ThemeProvider, useAutomaticTheme } from "yoshiki";
-import { useTheme, useYoshiki } from "yoshiki/native";
 import "yoshiki";
+import { useTheme, useYoshiki } from "yoshiki/native";
 import "yoshiki/native";
 import { catppuccin } from "./catppuccin";
-import { Platform } from "react-native";
 
 type FontList = Partial<
 	Record<

front/packages/primitives/src/tooltip.web.tsx

@@ -18,9 +18,9 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type { Theme } from "yoshiki/native";
-import { Tooltip as RTooltip } from "react-tooltip";
 import { forwardRef } from "react";
+import { Tooltip as RTooltip } from "react-tooltip";
+import type { Theme } from "yoshiki/native";
 import { ContrastArea } from "./themes";
 
 export const tooltip = (tooltip: string, up?: boolean) => ({

front/packages/primitives/src/utils/breakpoints.ts

@@ -19,7 +19,7 @@
  */
 
 import { useWindowDimensions } from "react-native";
-import { type Breakpoints as YoshikiBreakpoint, isBreakpoints, breakpoints } from "yoshiki/native";
+import { type Breakpoints as YoshikiBreakpoint, breakpoints, isBreakpoints } 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>>;

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

@@ -22,8 +22,8 @@ import type { QueryPage } from "@kyoo/models";
 import { ts } from "@kyoo/primitives";
 import { ScrollView } from "react-native";
 import { DefaultLayout } from "../layout";
-import { UserList } from "./users";
 import { Scanner } from "./scanner";
+import { UserList } from "./users";
 
 export const AdminPage: QueryPage = () => {
 	return (

front/packages/ui/src/admin/scanner.tsx

@@ -19,13 +19,13 @@
  */
 
 import { type Issue, IssueP, type QueryIdentifier, queryFn, useFetch } from "@kyoo/models";
-import { useTranslation } from "react-i18next";
-import { SettingsContainer } from "../settings/base";
 import { Button, Icon, P, Skeleton, tooltip, ts } from "@kyoo/primitives";
-import { ErrorView } from "../errors";
+import { useTranslation } from "react-i18next";
-import { z } from "zod";
 import { View } from "react-native";
 import { useYoshiki } from "yoshiki/native";
+import { z } from "zod";
+import { ErrorView } from "../errors";
+import { SettingsContainer } from "../settings/base";
 
 import Info from "@material-symbols/svg-400/outlined/info.svg";
 import Scan from "@material-symbols/svg-400/outlined/sensors.svg";

front/packages/ui/src/admin/users.tsx

@@ -29,10 +29,10 @@ 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 Verifed from "@material-symbols/svg-400/rounded/verified_user.svg";
 import Unverifed from "@material-symbols/svg-400/rounded/gpp_bad.svg";
+import MoreVert from "@material-symbols/svg-400/rounded/more_vert.svg";
 import Admin from "@material-symbols/svg-400/rounded/shield_person.svg";
+import Verifed from "@material-symbols/svg-400/rounded/verified_user.svg";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 export const UserGrid = ({

front/packages/ui/src/browse/grid.tsx

@@ -20,22 +20,22 @@
 
 import { type KyooImage, WatchStatusV } from "@kyoo/models";
 import {
-	Link,
-	Skeleton,
-	ts,
-	focusReset,
-	P,
-	SubP,
-	PosterBackground,
 	Icon,
+	Link,
+	P,
+	PosterBackground,
+	Skeleton,
+	SubP,
+	focusReset,
 	important,
+	ts,
 } from "@kyoo/primitives";
-import { type ImageStyle, Platform, View } from "react-native";
-import { max, percent, px, rem, type Stylable, type Theme, useYoshiki } from "yoshiki/native";
-import type { Layout, WithLoading } from "../fetch";
 import Done from "@material-symbols/svg-400/rounded/done-fill.svg";
-import { ItemContext } from "../components/context-menus";
 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 type { Layout, WithLoading } from "../fetch";
 
 export const ItemWatchStatus = ({
 	watchStatus,

front/packages/ui/src/browse/header.tsx

@@ -29,17 +29,17 @@ import {
 	tooltip,
 	ts,
 } from "@kyoo/primitives";
-import { useTranslation } from "react-i18next";
-import { useYoshiki } from "yoshiki/native";
-import Style from "@material-symbols/svg-400/rounded/style.svg";
-import GridView from "@material-symbols/svg-400/rounded/grid_view.svg";
-import ViewList from "@material-symbols/svg-400/rounded/view_list.svg";
-import Sort from "@material-symbols/svg-400/rounded/sort.svg";
-import ArrowUpward from "@material-symbols/svg-400/rounded/arrow_upward.svg";
 import ArrowDownward from "@material-symbols/svg-400/rounded/arrow_downward.svg";
-import { Layout, SearchSort, SortOrd } from "./types";
+import ArrowUpward from "@material-symbols/svg-400/rounded/arrow_upward.svg";
+import GridView from "@material-symbols/svg-400/rounded/grid_view.svg";
+import Sort from "@material-symbols/svg-400/rounded/sort.svg";
+import Style from "@material-symbols/svg-400/rounded/style.svg";
+import ViewList from "@material-symbols/svg-400/rounded/view_list.svg";
 import { forwardRef } from "react";
-import { View, type PressableProps } from "react-native";
+import { useTranslation } from "react-i18next";
+import { type PressableProps, View } from "react-native";
+import { useYoshiki } from "yoshiki/native";
+import { Layout, SearchSort, SortOrd } from "./types";
 
 const SortTrigger = forwardRef<View, PressableProps & { sortKey: string }>(function SortTrigger(
 	{ sortKey, ...props },

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

@@ -19,21 +19,21 @@
  */
 
 import {
-	type QueryIdentifier,
-	type QueryPage,
 	type LibraryItem,
 	LibraryItemP,
+	type QueryIdentifier,
+	type QueryPage,
 	getDisplayDate,
 } from "@kyoo/models";
 import { type ComponentProps, useState } from "react";
 import { createParam } from "solito";
-import { DefaultLayout } from "../layout";
 import type { WithLoading } from "../fetch";
 import { InfiniteFetch } from "../fetch-infinite";
+import { DefaultLayout } from "../layout";
 import { ItemGrid } from "./grid";
-import { ItemList } from "./list";
-import { SortBy, SortOrd, Layout } from "./types";
 import { BrowseSettings } from "./header";
+import { ItemList } from "./list";
+import { Layout, SortBy, SortOrd } from "./types";
 
 const { useParam } = createParam<{ sortBy?: string }>();
 

front/packages/ui/src/browse/list.tsx

@@ -20,22 +20,22 @@
 
 import type { KyooImage, WatchStatusV } from "@kyoo/models";
 import {
+	Heading,
+	ImageBackground,
 	Link,
 	P,
-	Skeleton,
-	ts,
-	ImageBackground,
-	Heading,
 	PosterBackground,
+	Skeleton,
 	imageBorderRadius,
 	important,
+	ts,
 } from "@kyoo/primitives";
 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 type { Layout, WithLoading } from "../fetch";
 import { ItemWatchStatus } from "./grid";
-import { ItemContext } from "../components/context-menus";
 
 export const ItemList = ({
 	href,

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

@@ -27,18 +27,18 @@ import {
 	type QueryPage,
 	getDisplayDate,
 } from "@kyoo/models";
-import { Header as ShowHeader, TitleLine } from "../details/header";
 import { Container, Head, ImageBackground, P, Skeleton, ts, usePageStyle } from "@kyoo/primitives";
-import { percent, px, useYoshiki } from "yoshiki/native";
-import { useTranslation } from "react-i18next";
 import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
+import { percent, px, useYoshiki } from "yoshiki/native";
+import { ItemGrid } from "../browse/grid";
+import { Header as ShowHeader, TitleLine } from "../details/header";
+import { SvgWave } from "../details/show";
 import { Fetch } from "../fetch";
 import { InfiniteFetch } from "../fetch-infinite";
-import { DefaultLayout } from "../layout";
 import { ItemDetails } from "../home/recommended";
-import { SvgWave } from "../details/show";
+import { DefaultLayout } from "../layout";
-import { ItemGrid } from "../browse/grid";
 
 const Header = ({ slug }: { slug: string }) => {
 	const { css } = useYoshiki();

front/packages/ui/src/components/media-info.tsx

@@ -26,11 +26,11 @@ import {
 	WatchInfoP,
 } from "@kyoo/models";
 import { Button, HR, P, Popup, Skeleton } from "@kyoo/primitives";
-import { Fetch } from "../fetch";
+import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { useYoshiki } from "yoshiki/native";
-import { Fragment } from "react";
+import { Fetch } from "../fetch";
 
 const MediaInfoTable = ({
 	mediaInfo: { path, video, container, audios, subtitles, duration, size },

front/packages/ui/src/components/rating.tsx

@@ -19,8 +19,8 @@
  */
 
 import { type Breakpoint, Icon, P, Skeleton, ts } from "@kyoo/primitives";
-import { View } from "react-native";
 import Star from "@material-symbols/svg-400/rounded/star-fill.svg";
+import { View } from "react-native";
 import { rem, useYoshiki } from "yoshiki/native";
 
 export const Rating = ({ rating, color }: { rating?: number; color: Breakpoint<string> }) => {

front/packages/ui/src/components/watchlist-info.tsx

@@ -18,15 +18,15 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { WatchStatusV, queryFn, useAccount } from "@kyoo/models";
 import { IconButton, Menu, tooltip } from "@kyoo/primitives";
-import type { ComponentProps } from "react";
-import { useTranslation } from "react-i18next";
-import BookmarkAdd from "@material-symbols/svg-400/rounded/bookmark_add.svg";
 import Bookmark from "@material-symbols/svg-400/rounded/bookmark-fill.svg";
+import BookmarkAdd from "@material-symbols/svg-400/rounded/bookmark_add.svg";
 import BookmarkAdded from "@material-symbols/svg-400/rounded/bookmark_added-fill.svg";
 import BookmarkRemove from "@material-symbols/svg-400/rounded/bookmark_remove.svg";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { WatchStatusV, queryFn, useAccount } from "@kyoo/models";
+import type { ComponentProps } from "react";
+import { useTranslation } from "react-i18next";
 
 export const watchListIcon = (status: WatchStatusV | null) => {
 	switch (status) {

front/packages/ui/src/details/episode.tsx

@@ -18,30 +18,30 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { type KyooImage, WatchStatusV } from "@kyoo/models";
 import {
-	focusReset,
 	H6,
 	IconButton,
 	ImageBackground,
 	type ImageProps,
-	important,
 	Link,
 	P,
 	Skeleton,
 	SubP,
+	focusReset,
+	important,
 	tooltip,
 	ts,
 } from "@kyoo/primitives";
+import ExpandLess from "@material-symbols/svg-400/rounded/expand_less-fill.svg";
+import ExpandMore from "@material-symbols/svg-400/rounded/expand_more-fill.svg";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { type ImageStyle, Platform, type PressableProps, View } from "react-native";
-import type { Layout, WithLoading } from "../fetch";
+import { type Stylable, type Theme, percent, rem, useYoshiki } from "yoshiki/native";
-import { percent, rem, type Stylable, type Theme, useYoshiki } from "yoshiki/native";
-import { type KyooImage, WatchStatusV } from "@kyoo/models";
 import { ItemProgress } from "../browse/grid";
 import { EpisodesContext } from "../components/context-menus";
-import { useState } from "react";
+import type { Layout, WithLoading } from "../fetch";
-import ExpandMore from "@material-symbols/svg-400/rounded/expand_more-fill.svg";
-import ExpandLess from "@material-symbols/svg-400/rounded/expand_less-fill.svg";
 
 export const episodeDisplayNumber = (
 	episode: {

front/packages/ui/src/details/movie.tsx

@@ -19,12 +19,12 @@
  */
 
 import { type Movie, MovieP, type QueryIdentifier, type QueryPage } from "@kyoo/models";
+import { usePageStyle } from "@kyoo/primitives";
 import { Platform, ScrollView } from "react-native";
 import { useYoshiki } from "yoshiki/native";
 import { DefaultLayout } from "../layout";
-import { Header } from "./header";
 import { DetailsCollections } from "./collection";
-import { usePageStyle } from "@kyoo/primitives";
+import { Header } from "./header";
 
 const query = (slug: string): QueryIdentifier<Movie> => ({
 	parser: MovieP,

front/packages/ui/src/details/season.tsx

@@ -26,14 +26,14 @@ import {
 	SeasonP,
 	useInfiniteFetch,
 } from "@kyoo/models";
-import { Skeleton, H6, HR, P, ts, Menu, IconButton, tooltip, usePageStyle } from "@kyoo/primitives";
+import { H6, HR, IconButton, Menu, P, Skeleton, tooltip, ts, usePageStyle } from "@kyoo/primitives";
-import { rem, useYoshiki } from "yoshiki/native";
-import { View } from "react-native";
-import { InfiniteFetch } from "../fetch-infinite";
-import { episodeDisplayNumber, EpisodeLine } from "./episode";
-import { useTranslation } from "react-i18next";
-import type { ComponentType } from "react";
 import MenuIcon from "@material-symbols/svg-400/rounded/menu-fill.svg";
+import type { ComponentType } from "react";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { rem, useYoshiki } from "yoshiki/native";
+import { InfiniteFetch } from "../fetch-infinite";
+import { EpisodeLine, episodeDisplayNumber } from "./episode";
 
 type SeasonProcessed = Season & { href: string };
 

front/packages/ui/src/details/show.tsx

@@ -25,17 +25,17 @@ import {
 	ShowP,
 	type ShowWatchStatus,
 } from "@kyoo/models";
-import { Platform, View, type ViewProps } from "react-native";
-import { percent, useYoshiki } from "yoshiki/native";
-import { DefaultLayout } from "../layout";
-import { EpisodeList, SeasonHeader } from "./season";
-import { Header } from "./header";
-import Svg, { Path, type SvgProps } from "react-native-svg";
 import { Container, H2, SwitchVariant, focusReset, ts } from "@kyoo/primitives";
 import { forwardRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, View, type ViewProps } from "react-native";
+import Svg, { Path, type SvgProps } from "react-native-svg";
+import { percent, useYoshiki } from "yoshiki/native";
+import { DefaultLayout } from "../layout";
 import { DetailsCollections } from "./collection";
 import { EpisodeLine, episodeDisplayNumber } from "./episode";
-import { useTranslation } from "react-i18next";
+import { Header } from "./header";
+import { EpisodeList, SeasonHeader } from "./season";
 
 export const SvgWave = (props: SvgProps) => {
 	const { css } = useYoshiki();

front/packages/ui/src/downloads/index.web.tsx

@@ -19,9 +19,9 @@
  */
 
 import { type WatchInfo, getCurrentApiUrl, queryFn, toQueryKey } from "@kyoo/models";
-import { Player } from "../player";
 import { getCurrentAccount } from "@kyoo/models/src/account-internal";
 import type { ReactNode } from "react";
+import { Player } from "../player";
 
 export const useDownloader = () => {
 	return async (type: "episode" | "movie", slug: string) => {

front/packages/ui/src/downloads/page.tsx

@@ -18,9 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { type State, downloadAtom } from "./state";
+import type { KyooImage } from "@kyoo/models";
-import { FlashList } from "@shopify/flash-list";
-import { type ImageStyle, View } from "react-native";
 import {
 	Alert,
 	H6,
@@ -34,17 +32,19 @@ import {
 	ts,
 	usePageStyle,
 } from "@kyoo/primitives";
-import { EpisodeLine, displayRuntime, episodeDisplayNumber } from "../details/episode";
-import { useTranslation } from "react-i18next";
-import { EmptyView } from "../fetch";
-import { percent, useYoshiki } from "yoshiki/native";
-import type { KyooImage } from "@kyoo/models";
-import { type Atom, useAtomValue } from "jotai";
 import DownloadForOffline from "@material-symbols/svg-400/rounded/download_for_offline.svg";
 import Downloading from "@material-symbols/svg-400/rounded/downloading.svg";
 import ErrorIcon from "@material-symbols/svg-400/rounded/error.svg";
 import NotStarted from "@material-symbols/svg-400/rounded/not_started.svg";
+import { FlashList } from "@shopify/flash-list";
 import { useRouter } from "expo-router";
+import { type Atom, useAtomValue } from "jotai";
+import { useTranslation } from "react-i18next";
+import { type ImageStyle, View } from "react-native";
+import { percent, useYoshiki } from "yoshiki/native";
+import { EpisodeLine, displayRuntime, episodeDisplayNumber } from "../details/episode";
+import { EmptyView } from "../fetch";
+import { type State, downloadAtom } from "./state";
 
 const DownloadedItem = ({
 	name,

front/packages/ui/src/downloads/state.tsx

@@ -21,7 +21,6 @@
 import RNBackgroundDownloader, {
 	type DownloadTask,
 } from "@kesha-antonov/react-native-background-downloader";
-import { deleteAsync } from "expo-file-system";
 import {
 	type Account,
 	type Episode,
@@ -34,14 +33,15 @@ import {
 	queryFn,
 	toQueryKey,
 } from "@kyoo/models";
-import { Player } from "../player";
-import { atom, useSetAtom, type PrimitiveAtom, useStore } from "jotai";
 import { getCurrentAccount, storage } from "@kyoo/models/src/account-internal";
+import { type QueryClient, useQueryClient } from "@tanstack/react-query";
+import { deleteAsync } from "expo-file-system";
+import type { Router } from "expo-router/build/types";
+import { type PrimitiveAtom, atom, useSetAtom, useStore } from "jotai";
 import { type ReactNode, useEffect } from "react";
 import { ToastAndroid } from "react-native";
-import { type QueryClient, useQueryClient } from "@tanstack/react-query";
-import type { Router } from "expo-router/build/types";
 import { z } from "zod";
+import { Player } from "../player";
 
 export type State = {
 	status: "DOWNLOADING" | "PAUSED" | "DONE" | "FAILED" | "STOPPED";

front/packages/ui/src/errors/connection.tsx

@@ -20,13 +20,13 @@
 
 import { ConnectionErrorContext, useAccount } from "@kyoo/models";
 import { Button, H1, Icon, Link, P, ts } from "@kyoo/primitives";
-import { useRouter } from "solito/router";
+import Register from "@material-symbols/svg-400/rounded/app_registration.svg";
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
+import { useRouter } from "solito/router";
 import { useYoshiki } from "yoshiki/native";
 import { DefaultLayout } from "../layout";
-import Register from "@material-symbols/svg-400/rounded/app_registration.svg";
 
 export const ConnectionError = () => {
 	const { css } = useYoshiki();

front/packages/ui/src/fetch-infinite.tsx

@@ -19,18 +19,18 @@
  */
 
 import { type Page, type QueryIdentifier, useInfiniteFetch } from "@kyoo/models";
-import { useBreakpointMap, HR } from "@kyoo/primitives";
+import { HR, useBreakpointMap } from "@kyoo/primitives";
 import { type ContentStyle, FlashList } from "@shopify/flash-list";
 import {
 	type ComponentProps,
 	type ComponentType,
-	isValidElement,
 	type ReactElement,
+	isValidElement,
 	useRef,
 } from "react";
-import { EmptyView, type Layout, OfflineView, type WithLoading, addHeader } from "./fetch";
-import { ErrorView } from "./errors";
 import { FlatList, View, type ViewStyle } from "react-native";
+import { ErrorView } from "./errors";
+import { EmptyView, type Layout, OfflineView, type WithLoading, addHeader } from "./fetch";
 
 const emulateGap = (
 	layout: "grid" | "vertical" | "horizontal",

front/packages/ui/src/fetch-infinite.web.tsx

@@ -20,20 +20,20 @@
 
 import { type Page, type QueryIdentifier, useInfiniteFetch } from "@kyoo/models";
 import { HR } from "@kyoo/primitives";
+import type { ContentStyle } from "@shopify/flash-list";
 import {
 	type ComponentProps,
 	type ComponentType,
 	Fragment,
-	isValidElement,
 	type ReactElement,
+	isValidElement,
 	useCallback,
 	useEffect,
 	useRef,
 } from "react";
 import { type Stylable, nativeStyleToCss, useYoshiki, ysMap } from "yoshiki";
-import { EmptyView, type Layout, type WithLoading, addHeader } from "./fetch";
 import { ErrorView } from "./errors";
-import type { ContentStyle } from "@shopify/flash-list";
+import { EmptyView, type Layout, type WithLoading, addHeader } from "./fetch";
 
 const InfiniteScroll = <Props,>({
 	children,

front/packages/ui/src/home/genre.tsx

@@ -27,12 +27,12 @@ import {
 } from "@kyoo/models";
 import { H3, ts } from "@kyoo/primitives";
 import { useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { useYoshiki } from "yoshiki/native";
+import { itemMap } from "../browse";
 import { ItemGrid } from "../browse/grid";
 import { InfiniteFetchList } from "../fetch-infinite";
-import { useTranslation } from "react-i18next";
-import { itemMap } from "../browse";
 
 export const Header = ({ title }: { title: string }) => {
 	const { css } = useYoshiki();

front/packages/ui/src/home/header.tsx

@@ -31,13 +31,13 @@ import {
 	tooltip,
 	ts,
 } from "@kyoo/primitives";
+import Info from "@material-symbols/svg-400/rounded/info.svg";
+import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
+import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { percent, rem, useYoshiki } from "yoshiki/native";
-import type { WithLoading } from "../fetch";
 import { Header as DetailsHeader } from "../details/header";
-import { useTranslation } from "react-i18next";
+import type { WithLoading } from "../fetch";
-import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
-import Info from "@material-symbols/svg-400/rounded/info.svg";
 
 export const Header = ({
 	isLoading,

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

@@ -19,17 +19,17 @@
  */
 
 import { Genre, type QueryPage, toQueryKey } from "@kyoo/models";
-import { Fetch } from "../fetch";
-import { Header } from "./header";
-import { DefaultLayout } from "../layout";
-import { RefreshControl, ScrollView } from "react-native";
-import { GenreGrid } from "./genre";
-import { Recommended } from "./recommended";
-import { VerticalRecommended } from "./vertical";
-import { NewsList } from "./news";
-import { WatchlistList } from "./watchlist";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
+import { RefreshControl, ScrollView } from "react-native";
+import { Fetch } from "../fetch";
+import { DefaultLayout } from "../layout";
+import { GenreGrid } from "./genre";
+import { Header } from "./header";
+import { NewsList } from "./news";
+import { Recommended } from "./recommended";
+import { VerticalRecommended } from "./vertical";
+import { WatchlistList } from "./watchlist";
 
 export const HomePage: QueryPage<{}, Genre> = ({ randomItems }) => {
 	const queryClient = useQueryClient();

front/packages/ui/src/home/news.tsx

@@ -19,12 +19,12 @@
  */
 
 import { type News, NewsP, type QueryIdentifier, getDisplayDate } from "@kyoo/models";
-import { ItemGrid } from "../browse/grid";
-import { InfiniteFetch } from "../fetch-infinite";
 import { useTranslation } from "react-i18next";
-import { Header } from "./genre";
-import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
 import { useYoshiki } from "yoshiki/native";
+import { ItemGrid } from "../browse/grid";
+import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
+import { InfiniteFetch } from "../fetch-infinite";
+import { Header } from "./genre";
 
 export const NewsList = () => {
 	const { t } = useTranslation();

front/packages/ui/src/home/recommended.tsx

@@ -31,25 +31,25 @@ import {
 	Chip,
 	H3,
 	IconFab,
-	imageBorderRadius,
 	Link,
 	P,
 	PosterBackground,
 	Skeleton,
 	SubP,
 	focusReset,
+	imageBorderRadius,
 	tooltip,
 	ts,
 } from "@kyoo/primitives";
+import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, View } from "react-native";
 import { type Theme, calc, percent, px, rem, useYoshiki } from "yoshiki/native";
+import { ItemGrid, ItemWatchStatus } from "../browse/grid";
+import { ItemContext } from "../components/context-menus";
 import type { Layout, WithLoading } from "../fetch";
 import { InfiniteFetch } from "../fetch-infinite";
-import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
-import { ItemGrid, ItemWatchStatus } from "../browse/grid";
-import { useState } from "react";
-import { ItemContext } from "../components/context-menus";
 
 export const ItemDetails = ({
 	isLoading,

front/packages/ui/src/home/vertical.tsx

@@ -20,13 +20,13 @@
 
 import { type LibraryItem, LibraryItemP, type QueryIdentifier } from "@kyoo/models";
 import { H3 } from "@kyoo/primitives";
+import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { useYoshiki } from "yoshiki/native";
-import { InfiniteFetch } from "../fetch-infinite";
-import { ItemList } from "../browse/list";
-import { useTranslation } from "react-i18next";
-import { ItemGrid } from "../browse/grid";
 import { itemMap } from "../browse";
+import { ItemGrid } from "../browse/grid";
+import { ItemList } from "../browse/list";
+import { InfiniteFetch } from "../fetch-infinite";
 
 export const VerticalRecommended = () => {
 	const { t } = useTranslation();

front/packages/ui/src/home/watchlist.tsx

@@ -25,14 +25,14 @@ import {
 	getDisplayDate,
 	useAccount,
 } from "@kyoo/models";
+import { Button, P, ts } from "@kyoo/primitives";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
 import { useYoshiki } from "yoshiki/native";
 import { ItemGrid } from "../browse/grid";
-import { InfiniteFetch } from "../fetch-infinite";
-import { useTranslation } from "react-i18next";
-import { Header } from "./genre";
 import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
-import { View } from "react-native";
+import { InfiniteFetch } from "../fetch-infinite";
-import { Button, P, ts } from "@kyoo/primitives";
+import { Header } from "./genre";
 
 export const WatchlistList = () => {
 	const { t } = useTranslation();

front/packages/ui/src/layout.tsx

@@ -18,10 +18,10 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type { ReactElement } from "react";
-import { Navbar } from "./navbar";
-import { useYoshiki, vw } from "yoshiki/native";
 import { Main } from "@kyoo/primitives";
+import type { ReactElement } from "react";
+import { useYoshiki, vw } from "yoshiki/native";
+import { Navbar } from "./navbar";
 
 export const DefaultLayout = ({
 	page,

front/packages/ui/src/login/form.tsx

@@ -21,9 +21,9 @@
 import { imageFn } from "@kyoo/models";
 import { ts } from "@kyoo/primitives";
 import type { ReactNode } from "react";
-import { ScrollView, ImageBackground, type ImageProps, Platform, View } from "react-native";
+import { ImageBackground, type ImageProps, Platform, ScrollView, View } from "react-native";
 import Svg, { type SvgProps, Path } from "react-native-svg";
-import { min, px, type Stylable, useYoshiki, vh } from "yoshiki/native";
+import { type Stylable, min, px, useYoshiki, vh } from "yoshiki/native";
 
 const SvgBlob = (props: SvgProps) => {
 	const { css, theme } = useYoshiki();

front/packages/ui/src/login/login.tsx

@@ -18,18 +18,18 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { login, type QueryPage } from "@kyoo/models";
+import { type QueryPage, login } from "@kyoo/models";
-import { Button, P, Input, ts, H1, A } from "@kyoo/primitives";
+import { A, Button, H1, Input, P, ts } from "@kyoo/primitives";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Trans } from "react-i18next";
+import { Platform } from "react-native";
 import { useRouter } from "solito/router";
 import { percent, px, useYoshiki } from "yoshiki/native";
 import { DefaultLayout } from "../layout";
 import { FormPage } from "./form";
-import { PasswordInput } from "./password-input";
 import { OidcLogin } from "./oidc";
-import { Platform } from "react-native";
+import { PasswordInput } from "./password-input";
 
 export const LoginPage: QueryPage<{ apiUrl?: string; error?: string }> = ({
 	apiUrl,

front/packages/ui/src/login/oidc.tsx

@@ -27,11 +27,11 @@ import {
 	useFetch,
 } from "@kyoo/models";
 import { Button, HR, Link, P, Skeleton, ts } from "@kyoo/primitives";
-import { View, ImageBackground } from "react-native";
-import { percent, rem, useYoshiki } from "yoshiki/native";
-import { useTranslation } from "react-i18next";
 import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { ImageBackground, View } from "react-native";
 import { useRouter } from "solito/router";
+import { percent, rem, useYoshiki } from "yoshiki/native";
 import { ErrorView } from "../errors";
 
 export const OidcLogin = ({ apiUrl }: { apiUrl?: string }) => {

front/packages/ui/src/login/password-input.tsx

@@ -19,10 +19,10 @@
  */
 
 import { IconButton, Input } from "@kyoo/primitives";
-import { type ComponentProps, useState } from "react";
-import { px, useYoshiki } from "yoshiki/native";
 import Visibility from "@material-symbols/svg-400/rounded/visibility-fill.svg";
 import VisibilityOff from "@material-symbols/svg-400/rounded/visibility_off-fill.svg";
+import { type ComponentProps, useState } from "react";
+import { px, useYoshiki } from "yoshiki/native";
 
 export const PasswordInput = (props: ComponentProps<typeof Input>) => {
 	const { css } = useYoshiki();

front/packages/ui/src/login/register.tsx

@@ -18,18 +18,18 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { login, type QueryPage } from "@kyoo/models";
+import { type QueryPage, login } from "@kyoo/models";
-import { Button, P, Input, ts, H1, A } from "@kyoo/primitives";
+import { A, Button, H1, Input, P, ts } from "@kyoo/primitives";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Trans } from "react-i18next";
+import { Platform } from "react-native";
 import { useRouter } from "solito/router";
 import { percent, px, useYoshiki } from "yoshiki/native";
 import { DefaultLayout } from "../layout";
 import { FormPage } from "./form";
-import { PasswordInput } from "./password-input";
 import { OidcLogin } from "./oidc";
-import { Platform } from "react-native";
+import { PasswordInput } from "./password-input";
 
 export const RegisterPage: QueryPage<{ apiUrl?: string }> = ({ apiUrl }) => {
 	const [email, setEmail] = useState("");

front/packages/ui/src/login/server-url.tsx

@@ -25,7 +25,7 @@ import {
 	ServerInfoP,
 	useFetch,
 } from "@kyoo/models";
-import { Button, P, Link, Input, ts, H1, HR } from "@kyoo/primitives";
+import { Button, H1, HR, Input, Link, P, ts } from "@kyoo/primitives";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ImageBackground, Platform, View } from "react-native";

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

@@ -20,31 +20,31 @@
 
 import { logout, useAccount, useAccounts, useHasPermission } from "@kyoo/models";
 import {
-	Input,
-	IconButton,
-	Header,
-	Avatar,
 	A,
-	tooltip,
+	Avatar,
-	ts,
+	HR,
+	Header,
+	IconButton,
+	Input,
+	Link,
 	Menu,
 	PressableFeedback,
-	HR,
+	tooltip,
-	Link,
+	ts,
 } from "@kyoo/primitives";
-import { Platform, type TextInput, View, type ViewProps } from "react-native";
+import Admin from "@material-symbols/svg-400/rounded/admin_panel_settings.svg";
+import Register from "@material-symbols/svg-400/rounded/app_registration.svg";
+import Login from "@material-symbols/svg-400/rounded/login.svg";
+import Logout from "@material-symbols/svg-400/rounded/logout.svg";
+import Search from "@material-symbols/svg-400/rounded/search-fill.svg";
+import Settings from "@material-symbols/svg-400/rounded/settings.svg";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, type TextInput, View, type ViewProps } from "react-native";
 import { useRouter } from "solito/router";
 import { type Stylable, useYoshiki } from "yoshiki/native";
-import Search from "@material-symbols/svg-400/rounded/search-fill.svg";
-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 Admin from "@material-symbols/svg-400/rounded/admin_panel_settings.svg";
-import Settings from "@material-symbols/svg-400/rounded/settings.svg";
-import { KyooLongLogo } from "./icon";
-import { forwardRef, useEffect, useRef, useState } from "react";
 import { AdminPage } from "../admin";
+import { KyooLongLogo } from "./icon";
 
 export const NavbarTitle = (props: Stylable & { onLayout?: ViewProps["onLayout"] }) => {
 	const { t } = useTranslation();

front/packages/ui/src/player/components/hover.tsx

@@ -18,32 +18,32 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import type { Audio, Chapter, KyooImage, Subtitle } from "@kyoo/models";
 import {
-	alpha,
 	CircularProgress,
 	ContrastArea,
 	H1,
 	H2,
 	IconButton,
-	imageBorderRadius,
 	Poster,
 	PressableFeedback,
 	Skeleton,
 	Slider,
 	Tooltip,
+	alpha,
+	imageBorderRadius,
 	tooltip,
 	ts,
 	useIsTouch,
 } from "@kyoo/primitives";
-import type { Chapter, KyooImage, Subtitle, Audio } from "@kyoo/models";
-import { useAtomValue, useSetAtom, useAtom } from "jotai";
-import { type ImageStyle, Platform, Pressable, View, type ViewProps } from "react-native";
-import { useTranslation } from "react-i18next";
-import { percent, rem, useYoshiki } from "yoshiki/native";
-import { useRouter } from "solito/router";
 import ArrowBack from "@material-symbols/svg-400/rounded/arrow_back-fill.svg";
-import { LeftButtons, TouchControls } from "./left-buttons";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { RightButtons } from "./right-buttons";
+import { atom } from "jotai";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { type ImageStyle, Platform, Pressable, View, type ViewProps } from "react-native";
+import { useRouter } from "solito/router";
+import { percent, rem, useYoshiki } from "yoshiki/native";
 import {
 	bufferedAtom,
 	durationAtom,
@@ -52,8 +52,8 @@ import {
 	playAtom,
 	progressAtom,
 } from "../state";
-import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { LeftButtons, TouchControls } from "./left-buttons";
-import { atom } from "jotai";
+import { RightButtons } from "./right-buttons";
 import { BottomScrubber, ScrubberTooltip } from "./scrubber";
 
 const hoverReasonAtom = atom({

front/packages/ui/src/player/components/left-buttons.tsx

@@ -19,19 +19,19 @@
  */
 
 import { IconButton, Link, P, Slider, noTouch, tooltip, touchOnly, ts } from "@kyoo/primitives";
+import Pause from "@material-symbols/svg-400/rounded/pause-fill.svg";
+import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
+import SkipNext from "@material-symbols/svg-400/rounded/skip_next-fill.svg";
+import SkipPrevious from "@material-symbols/svg-400/rounded/skip_previous-fill.svg";
+import VolumeDown from "@material-symbols/svg-400/rounded/volume_down-fill.svg";
+import VolumeMute from "@material-symbols/svg-400/rounded/volume_mute-fill.svg";
+import VolumeOff from "@material-symbols/svg-400/rounded/volume_off-fill.svg";
+import VolumeUp from "@material-symbols/svg-400/rounded/volume_up-fill.svg";
 import { useAtom, useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
-import SkipPrevious from "@material-symbols/svg-400/rounded/skip_previous-fill.svg";
-import SkipNext from "@material-symbols/svg-400/rounded/skip_next-fill.svg";
-import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
-import Pause from "@material-symbols/svg-400/rounded/pause-fill.svg";
-import VolumeOff from "@material-symbols/svg-400/rounded/volume_off-fill.svg";
-import VolumeMute from "@material-symbols/svg-400/rounded/volume_mute-fill.svg";
-import VolumeDown from "@material-symbols/svg-400/rounded/volume_down-fill.svg";
-import VolumeUp from "@material-symbols/svg-400/rounded/volume_up-fill.svg";
-import { durationAtom, mutedAtom, playAtom, progressAtom, volumeAtom } from "../state";
 import { type Stylable, px, useYoshiki } from "yoshiki/native";
+import { durationAtom, mutedAtom, playAtom, progressAtom, volumeAtom } from "../state";
 import { HoverTouch, hoverAtom } from "./hover";
 
 export const LeftButtons = ({

front/packages/ui/src/player/components/right-buttons.tsx

@@ -19,15 +19,15 @@
  */
 
 import type { Audio, Subtitle } from "@kyoo/models";
-import { IconButton, tooltip, Menu, ts } from "@kyoo/primitives";
+import { IconButton, Menu, tooltip, ts } from "@kyoo/primitives";
-import { useAtom } from "jotai";
-import { Platform, View } from "react-native";
-import { useTranslation } from "react-i18next";
 import ClosedCaption from "@material-symbols/svg-400/rounded/closed_caption-fill.svg";
 import Fullscreen from "@material-symbols/svg-400/rounded/fullscreen-fill.svg";
 import FullscreenExit from "@material-symbols/svg-400/rounded/fullscreen_exit-fill.svg";
-import SettingsIcon from "@material-symbols/svg-400/rounded/settings-fill.svg";
 import MusicNote from "@material-symbols/svg-400/rounded/music_note-fill.svg";
+import SettingsIcon from "@material-symbols/svg-400/rounded/settings-fill.svg";
+import { useAtom } from "jotai";
+import { useTranslation } from "react-i18next";
+import { Platform, View } from "react-native";
 import { type Stylable, useYoshiki } from "yoshiki/native";
 import { fullscreenAtom, subtitleAtom } from "../state";
 import { AudiosMenu, QualitiesMenu } from "../video";

front/packages/ui/src/player/components/scrubber.tsx

@@ -18,16 +18,16 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { useFetch, type QueryIdentifier, imageFn, type Chapter } from "@kyoo/models";
+import { type Chapter, type QueryIdentifier, imageFn, useFetch } from "@kyoo/models";
-import { Sprite, P, imageBorderRadius, ts } from "@kyoo/primitives";
+import { P, Sprite, imageBorderRadius, ts } from "@kyoo/primitives";
-import { View, Platform } from "react-native";
-import { percent, useYoshiki, px, type Theme, useForceRerender } from "yoshiki/native";
-import { useMemo } from "react";
 import { useAtomValue } from "jotai";
-import { durationAtom } from "../state";
+import { useMemo } from "react";
-import { toTimerString } from "./left-buttons";
+import { Platform, View } from "react-native";
-import { seekProgressAtom } from "./hover";
+import { type Theme, percent, px, useForceRerender, useYoshiki } from "yoshiki/native";
 import { ErrorView } from "../../errors";
+import { durationAtom } from "../state";
+import { seekProgressAtom } from "./hover";
+import { toTimerString } from "./left-buttons";
 
 type Thumb = {
 	from: number;

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

@@ -29,19 +29,19 @@ import {
 	useFetch,
 } from "@kyoo/models";
 import { Head } from "@kyoo/primitives";
-import { useState, useEffect, type ComponentProps } from "react";
-import { Platform, StyleSheet, View } from "react-native";
-import { useTranslation } from "react-i18next";
-import { useRouter } from "solito/router";
 import { useSetAtom } from "jotai";
+import { type ComponentProps, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, StyleSheet, View } from "react-native";
+import { useRouter } from "solito/router";
 import { useYoshiki } from "yoshiki/native";
-import { Back, Hover, LoadingIndicator } from "./components/hover";
-import { durationAtom, fullscreenAtom, Video } from "./state";
 import { episodeDisplayNumber } from "../details/episode";
+import { ErrorView } from "../errors";
+import { Back, Hover, LoadingIndicator } from "./components/hover";
 import { useVideoKeyboard } from "./keyboard";
 import { MediaSessionManager } from "./media-session";
+import { Video, durationAtom, fullscreenAtom } from "./state";
 import { WatchStatusObserver } from "./watch-status-observer";
-import { ErrorView } from "../errors";
 
 type Item = (Movie & { type: "movie" }) | (Episode & { type: "episode" });
 

front/packages/ui/src/player/keyboard.tsx

@@ -20,8 +20,9 @@
 
 import type { Subtitle } from "@kyoo/models";
 import { atom, useSetAtom } from "jotai";
-import { useRouter } from "solito/router";
 import { useEffect } from "react";
+import { Platform } from "react-native";
+import { useRouter } from "solito/router";
 import {
 	durationAtom,
 	fullscreenAtom,
@@ -31,7 +32,6 @@ import {
 	subtitleAtom,
 	volumeAtom,
 } from "./state";
-import { Platform } from "react-native";
 
 type Action =
 	| { type: "play" }

front/packages/ui/src/player/media-session.tsx

@@ -19,8 +19,8 @@
  */
 
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { useRouter } from "solito/router";
 import { useEffect } from "react";
+import { useRouter } from "solito/router";
 import { reducerAtom } from "./keyboard";
 import { durationAtom, playAtom, progressAtom } from "./state";
 

front/packages/ui/src/player/state.tsx

@@ -19,21 +19,21 @@
  */
 
 import { type Audio, type Episode, type Subtitle, getLocalSetting, useAccount } from "@kyoo/models";
+import { useSnackbar } from "@kyoo/primitives";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { useAtomCallback } from "jotai/utils";
 import {
 	type ElementRef,
 	memo,
+	useCallback,
 	useEffect,
 	useLayoutEffect,
 	useRef,
 	useState,
-	useCallback,
 } from "react";
-import NativeVideo, { type VideoProps } from "./video";
-import { Platform } from "react-native";
-import { useSnackbar } from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
+import NativeVideo, { type VideoProps } from "./video";
 
 export const playAtom = atom(true);
 export const loadAtom = atom(false);

front/packages/ui/src/player/video.tsx

@@ -35,8 +35,12 @@ export * from "react-native-video";
 
 import { type Audio, type Subtitle, useToken } from "@kyoo/models";
 import { type IconButton, Menu } from "@kyoo/primitives";
-import { type ComponentProps, forwardRef, useEffect } from "react";
+import "@kyoo/primitives/src/types.d.ts";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { type ComponentProps, forwardRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import uuid from "react-native-uuid";
 import NativeVideo, {
 	type VideoRef,
 	type OnLoadData,
@@ -44,12 +48,8 @@ import NativeVideo, {
 	SelectedTrackType,
 	SelectedVideoTrackType,
 } from "react-native-video";
-import { useTranslation } from "react-i18next";
-import { PlayMode, audioAtom, playModeAtom, subtitleAtom } from "./state";
-import uuid from "react-native-uuid";
-import { View } from "react-native";
-import "@kyoo/primitives/src/types.d.ts";
 import { useYoshiki } from "yoshiki/native";
+import { PlayMode, audioAtom, playModeAtom, subtitleAtom } from "./state";
 
 const MimeTypes: Map<string, string> = new Map([
 	["subrip", "application/x-subrip"],

front/packages/ui/src/player/video.web.tsx

@@ -18,25 +18,25 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { getToken, type Subtitle, type Audio } from "@kyoo/models";
+import { type Audio, type Subtitle, getToken } from "@kyoo/models";
+import { Menu, tooltip } from "@kyoo/primitives";
+import Hls, { type Level, type LoadPolicy } from "hls.js";
+import Jassub from "jassub";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
-	forwardRef,
+	type ComponentProps,
 	type RefObject,
+	forwardRef,
 	useEffect,
 	useImperativeHandle,
 	useLayoutEffect,
 	useRef,
-	type ComponentProps,
 } from "react";
-import type { VideoProps } from "react-native-video";
-import { useAtomValue, useSetAtom, useAtom } from "jotai";
-import { useForceRerender, useYoshiki } from "yoshiki";
-import Jassub from "jassub";
-import { audioAtom, playAtom, PlayMode, playModeAtom, progressAtom, subtitleAtom } from "./state";
-import Hls, { type Level, type LoadPolicy } from "hls.js";
 import { useTranslation } from "react-i18next";
-import { Menu, tooltip } from "@kyoo/primitives";
+import type { VideoProps } from "react-native-video";
 import toVttBlob from "srt-webvtt";
+import { useForceRerender, useYoshiki } from "yoshiki";
+import { PlayMode, audioAtom, playAtom, playModeAtom, progressAtom, subtitleAtom } from "./state";
 
 let hls: Hls | null = null;
 

front/packages/ui/src/player/watch-status-observer.tsx

@@ -20,9 +20,9 @@
 
 import { type MutationParam, WatchStatusV, useAccount } from "@kyoo/models";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useCallback } from "react";
 import { useAtomValue } from "jotai";
 import { useAtomCallback } from "jotai/utils";
+import { useCallback, useEffect } from "react";
 import { playAtom, progressAtom } from "./state";
 
 export const WatchStatusObserver = ({

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

@@ -19,17 +19,17 @@
  */
 
 import { type LibraryItem, LibraryItemP, type QueryIdentifier, type QueryPage } from "@kyoo/models";
+import { usePageStyle } from "@kyoo/primitives";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { createParam } from "solito";
-import { DefaultLayout } from "../layout";
-import { InfiniteFetch } from "../fetch-infinite";
 import { itemMap } from "../browse";
-import { SearchSort, SortOrd, Layout } from "../browse/types";
-import { BrowseSettings } from "../browse/header";
 import { ItemGrid } from "../browse/grid";
+import { BrowseSettings } from "../browse/header";
 import { ItemList } from "../browse/list";
-import { usePageStyle } from "@kyoo/primitives";
+import { Layout, SearchSort, SortOrd } from "../browse/types";
+import { InfiniteFetch } from "../fetch-infinite";
+import { DefaultLayout } from "../layout";
 
 const { useParam } = createParam<{ sortBy?: string }>();
 

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

@@ -28,18 +28,18 @@ import {
 } from "@kyoo/models";
 import { Alert, Avatar, Button, H1, Icon, Input, P, Popup, ts, usePopup } from "@kyoo/primitives";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+import * as ImagePicker from "expo-image-picker";
 import { type ComponentProps, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { rem, useYoshiki } from "yoshiki/native";
-import * as ImagePicker from "expo-image-picker";
 import { PasswordInput } from "../login/password-input";
 import { Preference, SettingsContainer } from "./base";
 
 import Username from "@material-symbols/svg-400/outlined/badge.svg";
-import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg";
 import Mail from "@material-symbols/svg-400/outlined/mail.svg";
 import Password from "@material-symbols/svg-400/outlined/password.svg";
+import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg";
 import Delete from "@material-symbols/svg-400/rounded/delete.svg";
 import Logout from "@material-symbols/svg-400/rounded/logout.svg";
 

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

@@ -24,8 +24,8 @@ import { ScrollView } from "react-native";
 import { DefaultLayout } from "../layout";
 import { AccountSettings } from "./account";
 import { About, GeneralSettings } from "./general";
-import { PlaybackSettings } from "./playback";
 import { OidcSettings } from "./oidc";
+import { PlaybackSettings } from "./playback";
 
 export const SettingsPage: QueryPage = () => {
 	const account = useAccount();

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

@@ -34,8 +34,8 @@ import { ErrorView } from "../errors";
 import { Preference, SettingsContainer } from "./base";
 
 import Badge from "@material-symbols/svg-400/outlined/badge.svg";
-import OpenProfile from "@material-symbols/svg-400/outlined/open_in_new.svg";
 import Remove from "@material-symbols/svg-400/outlined/close.svg";
+import OpenProfile from "@material-symbols/svg-400/outlined/open_in_new.svg";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 export const OidcSettings = () => {

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

@@ -18,16 +18,16 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Select } from "@kyoo/primitives";
 import { useLocalSetting } from "@kyoo/models";
-import { useTranslation } from "react-i18next";
+import { Select } from "@kyoo/primitives";
 import { useSetAtom } from "jotai";
-import { Preference, SettingsContainer, useSetting } from "./base";
+import { useTranslation } from "react-i18next";
 import { PlayMode, playModeAtom } from "../player/state";
+import { Preference, SettingsContainer, useSetting } from "./base";
 
+import SubtitleLanguage from "@material-symbols/svg-400/rounded/closed_caption-fill.svg";
 import PlayModeI from "@material-symbols/svg-400/rounded/display_settings-fill.svg";
 import AudioLanguage from "@material-symbols/svg-400/rounded/music_note-fill.svg";
-import SubtitleLanguage from "@material-symbols/svg-400/rounded/closed_caption-fill.svg";
 
 // I gave up on finding a way to retrive this using the Intl api (probably does not exist)
 // Simply copy pasted the list of languages from https://www.localeplanet.com/api/codelist.json