Fix formatting

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

@@ -18,27 +18,18 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {
+import { HR, Icon, IconButton, Menu, P, PressableFeedback, tooltip, ts } from "@kyoo/primitives";
-	HR,
-	Icon,
-	IconButton,
-	Menu,
-	P,
-	PressableFeedback,
-	tooltip,
-	ts,
-} from "@kyoo/primitives";
 import ArrowDownward from "@material-symbols/svg-400/rounded/arrow_downward.svg";
 import ArrowUpward from "@material-symbols/svg-400/rounded/arrow_upward.svg";
 import GridView from "@material-symbols/svg-400/rounded/grid_view.svg";
 import Sort from "@material-symbols/svg-400/rounded/sort.svg";
 import FilterList from "@material-symbols/svg-400/rounded/filter_list.svg";
 import ViewList from "@material-symbols/svg-400/rounded/view_list.svg";
-import {forwardRef} from "react";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import { type PressableProps, View } from "react-native";
 import { useYoshiki } from "yoshiki/native";
-import {Layout, MediaType, MediaTypeAll, SearchSort, SortOrd} from "./types";
+import { Layout, MediaType, MediaTypeAll, SearchSort, SortOrd } from "./types";
 
 const SortTrigger = forwardRef<View, PressableProps & { sortKey: string }>(function SortTrigger(
 	{ sortKey, ...props },
@@ -59,24 +50,24 @@ const SortTrigger = forwardRef<View, PressableProps & { sortKey: string }>(funct
 	);
 });
 
-const MediaTypeTrigger = forwardRef<View, PressableProps & { mediaType: MediaType }>(function MediaTypeTrigger(
+const MediaTypeTrigger = forwardRef<View, PressableProps & { mediaType: MediaType }>(
-	{ mediaType, ...props },
+	function MediaTypeTrigger({ mediaType, ...props }, ref) {
-	ref,
+		const { css } = useYoshiki();
-) {
+		const { t } = useTranslation();
-	const { css } = useYoshiki();
+		const labelKey =
-	const { t } = useTranslation();
+			mediaType !== MediaTypeAll ? `browse.mediatypekey.${mediaType.key}` : "browse.mediatypelabel";
-	const labelKey = mediaType !== MediaTypeAll ? `browse.mediatypekey.${mediaType.key}` : "browse.mediatypelabel";
+		return (
-	return (
+			<PressableFeedback
-		<PressableFeedback
+				ref={ref}
-			ref={ref}
+				{...css({ flexDirection: "row", alignItems: "center" }, props as any)}
-			{...css({ flexDirection: "row", alignItems: "center" }, props as any)}
+				{...tooltip(t("browse.mediatype-tt"))}
-			{...tooltip(t("browse.mediatype-tt"))}
+			>
-		>
+				<Icon icon={mediaType?.icon ?? FilterList} {...css({ paddingX: ts(0.5) })} />
-			<Icon icon={mediaType?.icon ?? FilterList} {...css({ paddingX: ts(0.5) })} />
+				<P>{t(labelKey as any)}</P>
-			<P>{t(labelKey as any)}</P>
+			</PressableFeedback>
-		</PressableFeedback>
+		);
-	);
+	},
-});
+);
 
 export const BrowseSettings = ({
 	availableSorts,

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

@@ -32,9 +32,17 @@ import { DefaultLayout } from "../layout";
 import { ItemGrid } from "./grid";
 import { BrowseSettings } from "./header";
 import { ItemList } from "./list";
-import {MediaTypeAll, Layout, MediaTypes, SortBy, SortOrd, MediaTypeKey, MediaType} from "./types";
+import {
+	MediaTypeAll,
+	Layout,
+	MediaTypes,
+	SortBy,
+	SortOrd,
+	MediaTypeKey,
+	MediaType,
+} from "./types";
 
-const { useParam } = createParam<{ sortBy?: string, mediaType?: string }>();
+const { useParam } = createParam<{ sortBy?: string; mediaType?: string }>();
 
 export const itemMap = (
 	item: LibraryItem,
@@ -52,9 +60,13 @@ export const itemMap = (
 		item.kind === "show" ? item.watchStatus?.unseenEpisodesCount ?? item.episodesCount! : null,
 });
 
-const query = (mediaType: MediaType, sortKey?: SortBy, sortOrd?: SortOrd): QueryIdentifier<LibraryItem> => {
+const query = (
+	mediaType: MediaType,
+	sortKey?: SortBy,
+	sortOrd?: SortOrd,
+): QueryIdentifier<LibraryItem> => {
 	const filter = mediaType !== MediaTypeAll ? `kind eq ${mediaType.key}` : undefined;
-	return ({
+	return {
 		parser: LibraryItemP,
 		path: ["items"],
 		infinite: true,
@@ -63,13 +75,13 @@ const query = (mediaType: MediaType, sortKey?: SortBy, sortOrd?: SortOrd): Query
 			filter,
 			fields: ["watchStatus", "episodesCount"],
 		},
-	});
+	};
-}
+};
 
 const getMediaTypeFromParam = (mediaTypeParam?: string): MediaType => {
-	const mediaTypeKey = mediaTypeParam as MediaTypeKey || MediaTypeKey.All;
+	const mediaTypeKey = (mediaTypeParam as MediaTypeKey) || MediaTypeKey.All;
-	return MediaTypes.find(t => t.key === mediaTypeKey) ?? MediaTypeAll;
+	return MediaTypes.find((t) => t.key === mediaTypeKey) ?? MediaTypeAll;
-}
+};
 
 export const BrowsePage: QueryPage = () => {
 	const [sort, setSort] = useParam("sortBy");
@@ -112,7 +124,5 @@ BrowsePage.getLayout = DefaultLayout;
 
 BrowsePage.getFetchUrls = ({ mediaType, sortBy }) => {
 	const mediaTypeObj = getMediaTypeFromParam(mediaType);
-	return[
+	return [query(mediaTypeObj, sortBy?.split("-")[0] as SortBy, sortBy?.split("-")[1] as SortOrd)];
-		query(mediaTypeObj, sortBy?.split("-")[0] as SortBy, sortBy?.split("-")[1] as SortOrd),
+};
-	];
-}

front/packages/ui/src/browse/types.ts

@@ -22,8 +22,8 @@ import Collection from "@material-symbols/svg-400/rounded/collections_bookmark.s
 import TV from "@material-symbols/svg-400/rounded/tv.svg";
 import Movie from "@material-symbols/svg-400/rounded/movie.svg";
 import All from "@material-symbols/svg-400/rounded/view_headline.svg";
-import type {ComponentType} from "react";
+import type { ComponentType } from "react";
-import type {SvgProps} from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
 
 export enum SortBy {
 	Name = "name",
@@ -50,7 +50,7 @@ export enum Layout {
 	List,
 }
 
-export enum MediaTypeKey{
+export enum MediaTypeKey {
 	All = "all",
 	Movie = "movie",
 	Show = "show",
@@ -64,14 +64,14 @@ export interface MediaType {
 
 export const MediaTypeAll: MediaType = {
 	key: MediaTypeKey.All,
-	icon: All
+	icon: All,
-}
+};
 
 export const MediaTypes: MediaType[] = [
 	MediaTypeAll,
 	{
 		key: MediaTypeKey.Movie,
-		icon: Movie
+		icon: Movie,
 	},
 	{
 		key: MediaTypeKey.Show,
@@ -79,6 +79,6 @@ export const MediaTypes: MediaType[] = [
 	},
 	{
 		key: MediaTypeKey.Collection,
-		icon: Collection
+		icon: Collection,
-	}
+	},
 ];