Add sort by button (v1)

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

@@ -28,6 +28,7 @@ import { P } from "./text";
 import { ContrastArea } from "./themes";
 import { Icon } from "./icons";
 import Dot from "@material-symbols/svg-400/rounded/fiber_manual_record-fill.svg";
+import { focusReset } from "./utils";
 
 type YoshikiFunc<T> = (props: ReturnType<typeof useYoshiki>) => T;
 const YoshikiProvider = ({ children }: { children: YoshikiFunc<ReactNode> }) => {
@@ -138,17 +139,13 @@ const MenuItem = ({
 				onSelect={onSelect}
 				href={href}
 				{...css(
-					[
-						{
-							display: "flex",
-							alignItems: "center",
-							padding: "8px",
-							height: "32px",
-							focus: {
-								boxShadow: "none",
-							},
-						},
-					],
+					{
+						display: "flex",
+						alignItems: "center",
+						padding: "8px",
+						height: "32px",
+						focus: focusReset as any,
+					},
 					props as any,
 				)}
 			>

front/packages/primitives/src/tooltip.tsx

@@ -53,6 +53,9 @@ export const WebTooltip = ({ theme }: { theme: Theme }) => {
 				transform: translate(-50%);
 				z-index: 999;
 
+				width: max-content;
+				max-width: 300%;
+
 				margin-top: 8px;
 				border-radius: 5px;
 				padding: 6px;

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

@@ -18,13 +18,15 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { IconButton, tooltip, ts } from "@kyoo/primitives";
-import { View } from "moti";
+import { HR, Icon, IconButton, Menu, P, PressableFeedback, tooltip, ts } from "@kyoo/primitives";
 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 Sort from "@material-symbols/svg-400/rounded/sort.svg";
 import { Layout, SortBy, SortOrd } from "./types";
+import { forwardRef } from "react";
+import { View, PressableProps } from "react-native";
 
 // const SortByMenu = ({
 // 	sortKey,
@@ -98,6 +100,25 @@ import { Layout, SortBy, SortOrd } from "./types";
 // 	);
 // };
 
+const SortTrigger = forwardRef<View, PressableProps & { sortKey: SortBy }>(function _SortTrigger(
+	{ sortKey, ...props },
+	ref,
+) {
+	const { css } = useYoshiki();
+	const { t } = useTranslation();
+
+	return (
+		<PressableFeedback
+			ref={ref}
+			{...css({ flexDirection: "row", alignItems: "center" }, props as any)}
+			{...tooltip(t("browse.sortby-tt"))}
+		>
+			<Icon icon={Sort} {...css({ paddingX: ts(0.5) })} />
+			<P>{t(`browse.sortkey.${sortKey}`)}</P>
+		</PressableFeedback>
+	);
+});
+
 export const BrowseSettings = ({
 	sortKey,
 	setSort,
@@ -114,23 +135,42 @@ export const BrowseSettings = ({
 	setLayout: (layout: Layout) => void;
 }) => {
 	// const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null);
-	const { css } = useYoshiki();
+	const { css, theme } = useYoshiki();
 	const { t } = useTranslation();
 
 	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 {...css({ flexDirection: "row", marginX: ts(4), marginY: ts(1) })}>
+			<View {...css({ flexGrow: 1 })}></View>
+			<View {...css({ flexDirection: "row" })}>
+				<Menu Trigger={SortTrigger} sortKey={sortKey}>
+					{Object.values(SortBy).map((x) => (
+						<Menu.Item
+							key={x}
+							label={t(`browse.sortkey.${x}`)}
+							selected={sortKey === x}
+							onSelect={() => setSort(x)}
+							// component={Link}
+							// to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
+							// TODO: Set query param for sort.
+						/>
+					))}
+				</Menu>
+				<HR orientation="vertical" />
+				<IconButton
+					icon={GridView}
+					onPress={() => setLayout(Layout.Grid)}
+					color={layout == Layout.Grid ? theme.accent : undefined}
+					{...tooltip(t("browse.switchToGrid"))}
+					{...css({ paddingX: ts(0.5) })}
+				/>
+				<IconButton
+					icon={ViewList}
+					onPress={() => setLayout(Layout.List)}
+					color={layout == Layout.List ? theme.accent : undefined}
+					{...tooltip(t("browse.switchToList"))}
+					{...css({ paddingX: ts(0.5) })}
+				/>
+			</View>
 		</View>
 	);