Small style fixes

front/bun.lock

@@ -442,7 +442,7 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@legendapp/list": ["@legendapp/list@github:zoriya/legend-list#c36ff94", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": "*" } }, "zoriya-legend-list-c36ff94"],
+    "@legendapp/list": ["@legendapp/list@github:zoriya/legend-list#a7465a6", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": "*" } }, "zoriya-legend-list-a7465a6"],
 
     "@material-symbols/svg-400": ["@material-symbols/svg-400@0.40.2", "", {}, "sha512-e2yEgZW/OveVT1sGaZW1kkRWTPVghjsJYWy+vIea3q08Fv2o7FCYv23PESMyr5D4AaAXdM5dKWkF1e6yIm4swA=="],
 

front/src/app/_layout.tsx

@@ -3,10 +3,12 @@ import { Slot } from "expo-router";
 import { Platform } from "react-native";
 import { Providers } from "~/providers";
 import "../global.css";
-import { Tooltip } from "~/primitives";
+import { Tooltip, useMobileHover } from "~/primitives";
 import "~/fonts.web.css";
 
 export default function Layout() {
+	useMobileHover();
+
 	return (
 		<Providers>
 			<Slot />

front/src/primitives/container.tsx

@@ -14,7 +14,7 @@ export const Container = <AsProps = ViewProps>({
 	return (
 		<As
 			className={cn(
-				"flex w-full flex-1 self-center px-4",
+				"flex w-full self-center px-4",
 				"sm:w-xl md:w-3xl lg:w-5xl xl:w-7xl",
 				className,
 			)}

front/src/primitives/select.web.tsx

@@ -3,7 +3,7 @@ import ExpandMore from "@material-symbols/svg-400/rounded/keyboard_arrow_down-fi
 import ExpandLess from "@material-symbols/svg-400/rounded/keyboard_arrow_up-fill.svg";
 import * as RSelect from "@radix-ui/react-select";
 import { forwardRef } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { cn } from "~/utils";
 import { Icon } from "./icons";
 import { PressableFeedback } from "./links";
@@ -27,7 +27,7 @@ export const Select = ({
 		<RSelect.Root value={value} onValueChange={onValueChange}>
 			<RSelect.Trigger aria-label={label} asChild>
 				<InternalTriger
-					Component={PressableFeedback}
+					Component={Platform.OS === "web" ? "div" : PressableFeedback}
 					className={cn(
 						"group flex-row items-center justify-center overflow-hidden rounded-4xl",
 						"border-2 border-accent p-1 outline-0 focus-within:bg-accent hover:bg-accent",

front/src/primitives/utils/hover.ts

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { Platform } from "react-native";
+
+let preventHover = false;
+let hoverTimeout: NodeJS.Timeout | number;
+
+export const useMobileHover = () => {
+	if (Platform.OS !== "web") return;
+
+	// biome-ignore lint/correctness/useHookAtTopLevel: const condition
+	useEffect(() => {
+		const enableHover = () => {
+			console.log("pc");
+			if (preventHover) return;
+			document.body.classList.remove("noHover");
+		};
+
+		const disableHover = () => {
+			console.log("mobile");
+			if (hoverTimeout) clearTimeout(hoverTimeout);
+			preventHover = true;
+			hoverTimeout = setTimeout(() => {
+				preventHover = false;
+			}, 1000);
+			document.body.classList.add("noHover");
+		};
+
+		document.addEventListener("touchstart", disableHover, true);
+		document.addEventListener("mousemove", enableHover, true);
+		return () => {
+			document.removeEventListener("touchstart", disableHover);
+			document.removeEventListener("mousemove", enableHover);
+		};
+	}, []);
+};
+
+export const useIsTouch = () => {
+	if (Platform.OS !== "web") return true;
+	if (typeof window === "undefined") return false;
+	// TODO: Subscribe to the change.
+	return document.body.classList.contains("noHover");
+};

front/src/primitives/utils/index.tsx

@@ -1,6 +1,5 @@
 export * from "./breakpoint";
 export * from "./capitalize";
 export * from "./head";
-export * from "./nojs";
+export * from "./hover";
 export * from "./spacing";
-export * from "./touchonly";

front/src/primitives/utils/nojs.tsx

@@ -1,17 +0,0 @@
-import type { ViewProps } from "react-native";
-
-export const hiddenIfNoJs: ViewProps = {
-	style: { $$css: true, noJs: "noJsHidden" } as any,
-};
-
-export const HiddenIfNoJs = () => (
-	<noscript>
-		<style>
-			{`
-				.noJsHidden {
-					display: none;
-				}
-			`}
-		</style>
-	</noscript>
-);

front/src/primitives/utils/spacing.tsx

@@ -1,17 +1,3 @@
-import { Platform } from "react-native";
-
-export const important = <T,>(value: T): T => {
-	return `${value} !important` as T;
-};
-
 export const ts = (spacing: number) => {
 	return spacing * 8;
 };
-
-export const focusReset: object =
-	Platform.OS === "web"
-		? {
-				boxShadow: "unset",
-				outline: "none",
-			}
-		: {};

front/src/primitives/utils/touchonly.tsx

@@ -1,34 +0,0 @@
-import { Platform, type ViewProps } from "react-native";
-
-export const TouchOnlyCss = () => {
-	return (
-		<style jsx global>{`
-			:where(body.noHover) .noTouch {
-				display: none;
-			}
-			:where(body:not(.noHover)) .touchOnly {
-				display: none;
-			}
-		`}</style>
-	);
-};
-
-export const touchOnly: ViewProps = {
-	style:
-		Platform.OS === "web"
-			? ({ $$css: true, touchOnly: "touchOnly" } as any)
-			: {},
-};
-export const noTouch: ViewProps = {
-	style:
-		Platform.OS === "web"
-			? ({ $$css: true, noTouch: "noTouch" } as any)
-			: { display: "none" },
-};
-
-export const useIsTouch = () => {
-	if (Platform.OS !== "web") return true;
-	if (typeof window === "undefined") return false;
-	// TODO: Subscribe to the change.
-	return document.body.classList.contains("noHover");
-};

front/src/ui/player/controls/index.tsx

@@ -72,8 +72,6 @@ export const Controls = ({
 					previous={previous}
 					next={next}
 					setMenu={setMenu}
-					// Fixed is used because firefox android make the hover disappear under the navigation bar in absolute
-					// position: Platform.OS === "web" ? ("fixed" as any) : "absolute",
 					className="absolute bottom-0 w-full bg-slate-900/50 px-safe pt-safe"
 					{...hoverControls}
 				/>

front/src/ui/player/controls/middle-controls.tsx

@@ -35,12 +35,12 @@ export const MiddleControls = ({
 					"mx-6 bg-gray-800/70",
 					!previous && "pointer-events-none opacity-0",
 				)}
-				iconClassName="h-16 w-16"
+				iconClassName="h-16 w-16 fill-slate-200 dark:fill-slate-200"
 			/>
 			<PlayButton
 				player={player}
 				className={cn("mx-6 bg-gray-800/50")}
-				iconClassName="h-24 w-24"
+				iconClassName="h-24 w-24 fill-slate-200 dark:fill-slate-200"
 			/>
 			<IconButton
 				icon={SkipNext}
@@ -51,7 +51,7 @@ export const MiddleControls = ({
 					"mx-6 bg-gray-800/70",
 					!next && "pointer-events-none opacity-0",
 				)}
-				iconClassName="h-16 w-16"
+				iconClassName="h-16 w-16 fill-slate-200 dark:fill-slate-200"
 			/>
 		</View>
 	);