Header

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,26 +98,41 @@ export {}
 // 	);
 // };
 
-// const BrowseSettings = ({
+export const BrowseSettings = ({
-// 	sortKey,
+	sortKey,
-// 	setSort,
+	setSort,
-// 	sortOrd,
+	sortOrd,
-// 	setSortOrd,
+	setSortOrd,
-// 	layout,
+	layout,
-// 	setLayout,
+	setLayout,
-// }: {
+}: {
-// 	sortKey: SortBy;
+	sortKey: SortBy;
-// 	setSort: (sort: SortBy) => void;
+	setSort: (sort: SortBy) => void;
-// 	sortOrd: SortOrd;
+	sortOrd: SortOrd;
-// 	setSortOrd: (sort: SortOrd) => void;
+	setSortOrd: (sort: SortOrd) => void;
-// 	layout: Layout;
+	layout: Layout;
-// 	setLayout: (layout: Layout) => void;
+	setLayout: (layout: Layout) => void;
-// }) => {
+}) => {
 	// const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null);
-// 	const { t } = useTranslation("browse");
+	const { css } = useYoshiki();
+	const { t } = useTranslation();
 
-// 	const switchViewTitle =
+	return (
-// 		layout === Layout.Grid ? t("browse.switchToList") : t("browse.switchToGrid");
+		<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 (
 	// 	<>
@@ -134,14 +155,6 @@ export {}
 	// 						{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 && (
@@ -156,4 +169,4 @@ export {}
 	// 		)}
 	// 	</>
 	// );
-// };
+};

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>

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.");
 

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}
+		</>
+	);
 };