Create a chip component for filters

front/packages/primitives/src/chip.tsx

@@ -0,0 +1,45 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { rem, Stylable, Theme, useYoshiki } from "yoshiki/native";
+import { P } from "./text";
+import { ts } from "./utils";
+
+export const Chip = ({ label, color, ...props }: { label: string; color?: string } & Stylable) => {
+	const { css } = useYoshiki();
+
+	return (
+		<P
+			{...css(
+				{
+					pY: ts(1),
+					pX: ts(1.5),
+					borderRadius: ts(3),
+					fontSize: rem(.8),
+					color: (theme: Theme) => theme.contrast,
+					bg: color ?? ((theme: Theme) => theme.accent),
+				},
+				props,
+			)}
+		>
+			{label}
+		</P>
+	);
+};

front/packages/primitives/src/index.ts

@@ -34,6 +34,7 @@ export * from "./slider";
 export * from "./menu";
 export * from "./input";
 export * from "./button";
+export * from "./chip";
 
 export * from "./animated";
 export * from "./utils";

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

@@ -18,9 +18,20 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { HR, Icon, IconButton, Menu, P, PressableFeedback, tooltip, ts } from "@kyoo/primitives";
+import {
+	Chip,
+	HR,
+	Icon,
+	IconButton,
+	Menu,
+	P,
+	PressableFeedback,
+	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";
@@ -64,10 +75,19 @@ export const BrowseSettings = ({
 }) => {
 	const { css, theme } = useYoshiki();
 	const { t } = useTranslation();
+	const filters: string[] = [];
+	// TODO: implement filters in the front.
 
 	return (
-		<View {...css({ flexDirection: "row", marginX: ts(4), marginY: ts(1) })}>
+		<View {...css({ flexDirection: "row-reverse", alignItems: "center", marginX: ts(4), marginY: ts(1) })}>
-			<View {...css({ flexGrow: 1 })}></View>
+			{filters.length !== 0 && (
+				<View {...css({ flexGrow: 1, flexDirection: "row", alignItems: "center" })}>
+					<Icon icon={Style} {...css({ marginX: ts(1) })} />
+					{filters.map((x) => (
+						<Chip key={x} label={x} />
+					))}
+				</View>
+			)}
 			<View {...css({ flexDirection: "row" })}>
 				<Menu Trigger={SortTrigger} sortKey={sortKey}>
 					{Object.values(SortBy).map((x) => (