From 4ea45d399e1051d59c86e12a088d376bc107adcb Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 25 May 2026 12:06:15 +0200
Subject: [PATCH] Fix popup auto-closing

---
 .../src/{primitives/svg.d.ts => global.d.ts}  |  5 ++++
 front/src/primitives/popup.tsx                | 25 +++++++++++++------
 front/src/ui/player/controls/misc.tsx         |  1 -
 front/tsconfig.json                           |  1 -
 4 files changed, 22 insertions(+), 10 deletions(-)
 rename front/src/{primitives/svg.d.ts => global.d.ts} (69%)

diff --git a/front/src/primitives/svg.d.ts b/front/src/global.d.ts
similarity index 69%
rename from front/src/primitives/svg.d.ts
rename to front/src/global.d.ts
index 500e371f..a8a9cb7f 100644
--- a/front/src/primitives/svg.d.ts
+++ b/front/src/global.d.ts
@@ -1,3 +1,8 @@
+declare module "*.css" {
+	const content: string;
+	export default content;
+}
+
 declare module "*.svg" {
 	import type React from "react";
 	import type { SvgProps } from "react-native-svg";
diff --git a/front/src/primitives/popup.tsx b/front/src/primitives/popup.tsx
index b3e0117b..7b19e6f8 100644
--- a/front/src/primitives/popup.tsx
+++ b/front/src/primitives/popup.tsx
@@ -1,7 +1,13 @@
 import { usePortal } from "@gorhom/portal";
 import Close from "@material-symbols/svg-400/rounded/close.svg";
 import { usePathname } from "expo-router";
-import { type ReactNode, useCallback, useEffect, useState } from "react";
+import {
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
 import { Pressable, ScrollView, View } from "react-native";
 import { cn } from "~/utils";
 import { Icon, IconButton, type Icon as IconType } from "./icons";
@@ -23,13 +29,6 @@ export const Overlay = ({
 	scroll?: boolean;
 	className?: string;
 }) => {
-	const pathname = usePathname();
-
-	useEffect(() => {
-		pathname;
-		close?.();
-	}, [pathname, close]);
-
 	return (
 		<Pressable
 			className="absolute inset-0 cursor-default! items-center justify-center bg-black/60 max-md:px-4"
@@ -78,6 +77,16 @@ export const Popup = ({
 	scroll?: boolean;
 	className?: string;
 }) => {
+	const pathname = usePathname();
+	const prevPathname = useRef(pathname);
+
+	useEffect(() => {
+		if (prevPathname.current !== pathname) {
+			prevPathname.current = pathname;
+			close?.();
+		}
+	}, [pathname, close]);
+
 	return (
 		<Overlay icon={icon} title={title} close={close} scroll={scroll} {...props}>
 			{children}
diff --git a/front/src/ui/player/controls/misc.tsx b/front/src/ui/player/controls/misc.tsx
index 1a95f760..5dfe293b 100644
--- a/front/src/ui/player/controls/misc.tsx
+++ b/front/src/ui/player/controls/misc.tsx
@@ -44,7 +44,6 @@ export const toggleFullscreen = async (set?: boolean) => {
 	try {
 		if (set) {
 			await document.body.requestFullscreen({ navigationUI: "hide" });
-			// @ts-expect-error Firefox does not support this so ts complains
 			await screen.orientation.lock("landscape");
 		} else {
 			if (document.fullscreenElement) await document.exitFullscreen();
diff --git a/front/tsconfig.json b/front/tsconfig.json
index 97f0b9f0..28501ac7 100644
--- a/front/tsconfig.json
+++ b/front/tsconfig.json
@@ -1,6 +1,5 @@
 {
 	"compilerOptions": {
-		"baseUrl": ".",
 		"paths": {
 			"~/*": ["./src/*"],
 			"~public/*": ["./public/*"]