From 19c3f44d9a803f47e2455340578b40e0e2e3f3c9 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 14 Mar 2023 11:55:36 +0900
Subject: [PATCH] Header

---
 front/packages/ui/src/browse/header.tsx      | 143 ++++++++++---------
 front/packages/ui/src/browse/index.tsx       |  19 +--
 front/packages/ui/src/fetch-infinite.tsx     |   2 +-
 front/packages/ui/src/fetch-infinite.web.tsx |  12 +-
 4 files changed, 100 insertions(+), 76 deletions(-)

diff --git a/front/packages/ui/src/browse/header.tsx b/front/packages/ui/src/browse/header.tsx
index 1bba9361..3211daf1 100644
--- a/front/packages/ui/src/browse/header.tsx
+++ b/front/packages/ui/src/browse/header.tsx
@@ -18,7 +18,13 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-export {}
+import { IconButton, tooltip, ts } from "@kyoo/primitives";
+import { View } from "moti";
+import { useTranslation } from "react-i18next";
+import { useYoshiki } from "yoshiki/native";
+import GridView from "@material-symbols/svg-400/rounded/grid_view.svg";
+import ViewList from "@material-symbols/svg-400/rounded/view_list.svg";
+import { Layout, SortBy, SortOrd } from "./types";
 
 // const SortByMenu = ({
 // 	sortKey,
@@ -37,7 +43,7 @@ export {}
 // }) => {
 // 	const router = useRouter();
 // 	const { t } = useTranslation("browse");
-
+//
 // 	return (
 // 		<Menu
 // 			id="sortby-menu"
@@ -92,68 +98,75 @@ export {}
 // 	);
 // };
 
-// const BrowseSettings = ({
-// 	sortKey,
-// 	setSort,
-// 	sortOrd,
-// 	setSortOrd,
-// 	layout,
-// 	setLayout,
-// }: {
-// 	sortKey: SortBy;
-// 	setSort: (sort: SortBy) => void;
-// 	sortOrd: SortOrd;
-// 	setSortOrd: (sort: SortOrd) => void;
-// 	layout: Layout;
-// 	setLayout: (layout: Layout) => void;
-// }) => {
-// 	const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null);
-// 	const { t } = useTranslation("browse");
+export const BrowseSettings = ({
+	sortKey,
+	setSort,
+	sortOrd,
+	setSortOrd,
+	layout,
+	setLayout,
+}: {
+	sortKey: SortBy;
+	setSort: (sort: SortBy) => void;
+	sortOrd: SortOrd;
+	setSortOrd: (sort: SortOrd) => void;
+	layout: Layout;
+	setLayout: (layout: Layout) => void;
+}) => {
+	// const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null);
+	const { css } = useYoshiki();
+	const { t } = useTranslation();
 
-// 	const switchViewTitle =
-// 		layout === Layout.Grid ? t("browse.switchToList") : t("browse.switchToGrid");
+	return (
+		<View {...css({ flexDirection: "row" })}>
+			<IconButton
+				icon={GridView}
+				onPress={() => setLayout(Layout.Grid)}
+				{...tooltip(t("browse.switchToGrid"))}
+				{...css({ paddingX: ts(.5) })}
+			/>
+			<IconButton
+				icon={ViewList}
+				onPress={() => setLayout(Layout.List)}
+				{...tooltip(t("browse.switchToList"))}
+				{...css({ paddingX: ts(.5) })}
+			/>
+		</View>
+	);
 
-// 	return (
-// 		<>
-// 			<Box sx={{ display: "flex", justifyContent: "space-around" }}>
-// 				<ButtonGroup sx={{ m: 1 }}>
-// 					<Button disabled>
-// 						<FilterList />
-// 					</Button>
-// 					<Tooltip title={t("browse.sortby-tt")}>
-// 						<Button
-// 							id="sortby"
-// 							aria-label={t("browse.sortby-tt")}
-// 							aria-controls={sortAnchor ? "sorby-menu" : undefined}
-// 							aria-haspopup="true"
-// 							aria-expanded={sortAnchor ? "true" : undefined}
-// 							onClick={(event) => setSortAnchor(event.currentTarget)}
-// 						>
-// 							<Sort />
-// 							{t("browse.sortby", { key: t(`browse.sortkey.${sortKey}`) })}
-// 							{sortOrd === SortOrd.Asc ? <South fontSize="small" /> : <North fontSize="small" />}
-// 						</Button>
-// 					</Tooltip>
-// 					<Tooltip title={switchViewTitle}>
-// 						<Button
-// 							onClick={() => setLayout(layout === Layout.List ? Layout.Grid : Layout.List)}
-// 							aria-label={switchViewTitle}
-// 						>
-// 							{layout === Layout.List ? <GridView /> : <ViewList />}
-// 						</Button>
-// 					</Tooltip>
-// 				</ButtonGroup>
-// 			</Box>
-// 			{sortAnchor && (
-// 				<SortByMenu
-// 					sortKey={sortKey}
-// 					sortOrd={sortOrd}
-// 					setSort={setSort}
-// 					setSortOrd={setSortOrd}
-// 					anchor={sortAnchor}
-// 					onClose={() => setSortAnchor(null)}
-// 				/>
-// 			)}
-// 		</>
-// 	);
-// };
+	// return (
+	// 	<>
+	// 		<Box sx={{ display: "flex", justifyContent: "space-around" }}>
+	// 			<ButtonGroup sx={{ m: 1 }}>
+	// 				<Button disabled>
+	// 					<FilterList />
+	// 				</Button>
+	// 				<Tooltip title={t("browse.sortby-tt")}>
+	// 					<Button
+	// 						id="sortby"
+	// 						aria-label={t("browse.sortby-tt")}
+	// 						aria-controls={sortAnchor ? "sorby-menu" : undefined}
+	// 						aria-haspopup="true"
+	// 						aria-expanded={sortAnchor ? "true" : undefined}
+	// 						onClick={(event) => setSortAnchor(event.currentTarget)}
+	// 					>
+	// 						<Sort />
+	// 						{t("browse.sortby", { key: t(`browse.sortkey.${sortKey}`) })}
+	// 						{sortOrd === SortOrd.Asc ? <South fontSize="small" /> : <North fontSize="small" />}
+	// 					</Button>
+	// 				</Tooltip>
+	// 			</ButtonGroup>
+	// 		</Box>
+	// 		{sortAnchor && (
+	// 			<SortByMenu
+	// 				sortKey={sortKey}
+	// 				sortOrd={sortOrd}
+	// 				setSort={setSort}
+	// 				setSortOrd={setSortOrd}
+	// 				anchor={sortAnchor}
+	// 				onClose={() => setSortAnchor(null)}
+	// 			/>
+	// 		)}
+	// 	</>
+	// );
+};
diff --git a/front/packages/ui/src/browse/index.tsx b/front/packages/ui/src/browse/index.tsx
index e668aca7..28f10635 100644
--- a/front/packages/ui/src/browse/index.tsx
+++ b/front/packages/ui/src/browse/index.tsx
@@ -33,6 +33,7 @@ import { InfiniteFetch } from "../fetch-infinite";
 import { ItemGrid } from "./grid";
 import { ItemList } from "./list";
 import { SortBy, SortOrd, Layout } from "./types";
+import { BrowseSettings } from "./header";
 
 export const itemMap = (
 	item: WithLoading<LibraryItem>,
@@ -80,18 +81,20 @@ export const BrowsePage: QueryPage<{ slug?: string }> = ({ slug }) => {
 	// TODO list header to seet sort things, filter and layout.
 	return (
 		<>
-			{/* <BrowseSettings */}
-			{/* 	sortKey={sortKey} */}
-			{/* 	setSort={setSort} */}
-			{/* 	sortOrd={sortOrd} */}
-			{/* 	setSortOrd={setSortOrd} */}
-			{/* 	layout={layout} */}
-			{/* 	setLayout={setLayout} */}
-			{/* /> */}
 			<InfiniteFetch
 				query={query(slug, sortKey, sortOrd)}
 				placeholderCount={15}
 				layout={LayoutComponent.layout}
+				Header={
+					<BrowseSettings
+						sortKey={sortKey}
+						setSort={setSort}
+						sortOrd={sortOrd}
+						setSortOrd={setSortOrd}
+						layout={layout}
+						setLayout={setLayout}
+					/>
+				}
 			>
 				{(item) => <LayoutComponent {...itemMap(item)} />}
 			</InfiniteFetch>
diff --git a/front/packages/ui/src/fetch-infinite.tsx b/front/packages/ui/src/fetch-infinite.tsx
index c34fcdb2..28b00826 100644
--- a/front/packages/ui/src/fetch-infinite.tsx
+++ b/front/packages/ui/src/fetch-infinite.tsx
@@ -47,7 +47,7 @@ export const InfiniteFetch = <Data,>({
 	empty?: string | JSX.Element;
 	suspense?: boolean;
 	divider?: boolean | ComponentType;
-	Header?: ComponentType<{ children: JSX.Element }>;
+	Header?: ComponentType<{ children: JSX.Element }> | ReactElement;
 }): JSX.Element | null => {
 	if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");
 
diff --git a/front/packages/ui/src/fetch-infinite.web.tsx b/front/packages/ui/src/fetch-infinite.web.tsx
index 472e4ba4..0869b510 100644
--- a/front/packages/ui/src/fetch-infinite.web.tsx
+++ b/front/packages/ui/src/fetch-infinite.web.tsx
@@ -109,7 +109,7 @@ export const InfiniteFetch = <Data,>({
 	) => ReactElement | null;
 	empty?: string | JSX.Element;
 	divider?: boolean | ComponentType;
-	Header?: ComponentType<{ children: JSX.Element }>;
+	Header?: ComponentType<{ children: JSX.Element }> | ReactElement;
 }): JSX.Element | null => {
 	if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");
 
@@ -148,5 +148,13 @@ export const InfiniteFetch = <Data,>({
 		</InfiniteScroll>
 	);
 
-	return Header ? <Header>{list}</Header> : list;
+	if (!Header) return list;
+	return typeof Header === "function" ? (
+		<Header>{list}</Header>
+	) : (
+		<>
+			{Header}
+			{list}
+		</>
+	);
 };