Add focus handling for the grid

front/packages/primitives/src/utils/breakpoints.ts

@@ -24,7 +24,6 @@ import { isBreakpoints } from "yoshiki/dist/utils";
 import { breakpoints } from "yoshiki/native";
 
 type AtLeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U];
-
 export type Breakpoint<T> = T | AtLeastOne<YoshikiBreakpoint<T>>;
 
 // copied from yoshiki.

front/packages/primitives/src/utils/spacing.tsx

@@ -18,8 +18,16 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { Platform } from "react-native";
 import { px } from "yoshiki/native";
 
 export const ts = (spacing: number) => {
 	return px(spacing * 8);
 };
+
+export const focusReset: object =
+	Platform.OS === "web"
+		? {
+				boxShadow: "unset",
+		  }
+		: {};

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

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Link, Skeleton, Poster, ts, P, SubP } from "@kyoo/primitives";
+import { Link, Skeleton, Poster, ts, focusReset, P, SubP } from "@kyoo/primitives";
 import { Platform } from "react-native";
 import { percent, px, Stylable, useYoshiki } from "yoshiki/native";
 import { Layout, WithLoading } from "../fetch";
@@ -37,7 +37,7 @@ export const ItemGrid = ({
 	poster?: string | null;
 }> &
 	Stylable<"text">) => {
-	const { css } = useYoshiki();
+	const { css } = useYoshiki("grid");
 
 	return (
 		<Link
@@ -47,7 +47,22 @@ export const ItemGrid = ({
 					{
 						flexDirection: "column",
 						alignItems: "center",
-						m: { xs: ts(1), sm: ts(2) },
+						m: { xs: ts(1), sm: ts(4) },
+						child: {
+							poster: {
+								borderColor: "transparent",
+								borderWidth: px(4),
+							},
+						},
+						fover: {
+							self: focusReset,
+							poster: {
+								borderColor: (theme) => theme.appbar,
+							},
+							title: {
+								textDecorationLine: "underline",
+							},
+						},
 					},
 					// We leave no width on native to fill the list's grid.
 					Platform.OS === "web" && {
@@ -59,10 +74,16 @@ export const ItemGrid = ({
 				props,
 			)}
 		>
-			<Poster src={poster} alt={name} isLoading={isLoading} layout={{ width: percent(100) }} />
+			<Poster
+				src={poster}
+				alt={name}
+				isLoading={isLoading}
+				layout={{ width: percent(100) }}
+				{...css("poster")}
+			/>
 			<Skeleton>
 				{isLoading || (
-					<P numberOfLines={1} {...css({ marginY: 0, textAlign: "center" })}>
+					<P numberOfLines={1} {...css([{ marginY: 0, textAlign: "center" }, "title"])}>
 						{name}
 					</P>
 				)}

front/packages/ui/src/fetch-infinite.tsx

@@ -66,9 +66,10 @@ export const InfiniteFetch = <Data,>({
 		return <EmptyView message={empty} />;
 	}
 
-	const placeholders = [
-		...Array(items ? numColumns - (items.length % numColumns) + numColumns : placeholderCount),
-	].map((_, i) => ({ id: `gen${i}`, isLoading: true } as Data));
+	const count = items ? numColumns - (items.length % numColumns) : placeholderCount;
+	const placeholders = [...Array(count === 0 ? numColumns : count)].map(
+		(_, i) => ({ id: `gen${i}`, isLoading: true } as Data),
+	);
 
 	return (
 		<FlashList