Misc cleanups for mobile

front/src/components/items/item-grid.tsx

@@ -84,7 +84,7 @@ export const ItemGrid = ({
 					availableCount={availableCount}
 					seenCount={seenCount}
 				/>
-				{kind === "movie" && watchPercent && (
+				{kind === "movie" && !!watchPercent && (
 					<ItemProgress watchPercent={watchPercent} />
 				)}
 				{kind !== "collection" && (

front/src/primitives/tabs.tsx

@@ -1,4 +1,4 @@
-import { type Falsy, Pressable, View } from "react-native";
+import { type Falsy, Pressable, ScrollView } from "react-native";
 import { cn } from "~/utils";
 import { Icon, type Icon as IconType } from "./icons";
 import { P } from "./text";
@@ -30,11 +30,13 @@ export const Tabs = <T,>({
 		icon: IconType;
 	}[];
 	return (
-		<View
+		<ScrollView
+			horizontal
+			containerClassName={cn("shrink flex-row items-center", className)}
 			className={cn(
-				"flex-row flex-wrap items-center overflow-hidden rounded-4xl border-3 border-accent p-1",
+				"rounded-4xl border-3 border-accent p-1",
+
 				disabled && "border-slate-600",
-				className,
 			)}
 			{...props}
 		>
@@ -70,6 +72,6 @@ export const Tabs = <T,>({
 					</P>
 				</Pressable>
 			))}
-		</View>
+		</ScrollView>
 	);
 };

front/src/ui/browse/header.tsx

@@ -98,10 +98,7 @@ const FilterTrigger = ({
 			{...props}
 		>
 			<Icon icon={icon ?? FilterList} className="mx-1" />
-			<P>
-				{label}
-				{count > 0 ? ` (${count})` : ""}
-			</P>
+			<P>{count > 0 ? `${label} (${count})` : label}</P>
 		</PressableFeedback>
 	);
 };

front/src/ui/navbar.tsx

@@ -94,7 +94,6 @@ export const NavbarRight = () => {
 				key={path}
 				value={path === "/browse" ? q : undefined}
 				onChangeText={(query) => {
-					console.log(query);
 					if (path === "/browse") {
 						setQuery(query ?? undefined);
 					}

front/src/ui/profile/index.tsx

@@ -151,7 +151,7 @@ const ProfileHeader = ({
 					}))}
 					value={status}
 					setValue={setStatus}
-					className="shrink self-start"
+					className="self-start"
 				/>
 			</View>
 		</View>