From 30223dfa4d9c5ecfc2a0e4b0b46db2bd2dfc5784 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sat, 14 Feb 2026 15:48:32 +0100
Subject: [PATCH] Cleanup searchbar animations

---
 front/src/ui/navbar.tsx | 73 ++++++++++++++---------------------------
 1 file changed, 25 insertions(+), 48 deletions(-)

diff --git a/front/src/ui/navbar.tsx b/front/src/ui/navbar.tsx
index d5a4d4b7..24e4bbc1 100644
--- a/front/src/ui/navbar.tsx
+++ b/front/src/ui/navbar.tsx
@@ -72,46 +72,6 @@ export const NavbarTitle = ({
 	);
 };
 
-const SearchBar = ({
-	ref,
-	className,
-	...props
-}: TextInputProps & { ref?: Ref<TextInput> }) => {
-	const { t } = useTranslation();
-	const params = useGlobalSearchParams();
-	const [query, setQuery] = useState((params.q as string) ?? "");
-	const path = usePathname();
-	const router = useRouter();
-	const inputRef = useRef<TextInput>(null);
-
-	useEffect(() => {
-		if (path === "/browse") {
-			inputRef.current?.focus();
-			setQuery(params.q as string);
-		} else {
-			inputRef.current?.blur();
-			setQuery("");
-		}
-	}, [path, params.q]);
-
-	return (
-		<Input
-			ref={inputRef}
-			value={query}
-			onChangeText={(q) => {
-				setQuery(q);
-				if (path !== "/browse") router.navigate(`/browse?q=${q}`);
-				else router.setParams({ q });
-			}}
-			placeholder={t("navbar.search")}
-			containerClassName="border-light"
-			className={cn("text-slate-200 dark:text-slate-200", className)}
-			{...tooltip(t("navbar.search"))}
-			{...props}
-		/>
-	);
-};
-
 const getDisplayUrl = (url: string) => {
 	url = url.replace(/\/api$/, "");
 	url = url.replace(/https?:\/\//, "");
@@ -177,7 +137,7 @@ export const NavbarProfile = () => {
 	);
 };
 
-const MobileSearchBar = () => {
+const SearchBar = () => {
 	const { t } = useTranslation();
 	const [expanded, setExpanded] = useState(false);
 	const inputRef = useRef<TextInput>(null);
@@ -185,18 +145,30 @@ const MobileSearchBar = () => {
 	const router = useRouter();
 	const [query, setQuery] = useState("");
 
-	console.log(expanded);
+	const path = usePathname();
+	useEffect(() => {
+		console.log(path);
+		if (path === "/browse") {
+			// Small delay to allow animation to start before focusing
+			setTimeout(() => {
+				setExpanded(true);
+				inputRef.current?.focus();
+			}, 300);
+		} else if (path === "/") {
+			inputRef.current?.blur();
+		}
+	}, [path]);
 
 	return (
 		<Animated.View
 			className={cn(
-				"mr-2 flex-row p-0 pl-4",
+				"mr-2 flex-row items-center overflow-hidden p-0 pl-4",
 				"rounded-full bg-slate-100 dark:bg-slate-800",
 			)}
 			style={[
 				expanded ? { flex: 1 } : { backgroundColor: "transparent" },
 				{
-					transitionProperty: ["width", "background-color"],
+					transitionProperty: "background-color",
 					transitionDuration: "300ms",
 				},
 			]}
@@ -209,12 +181,16 @@ const MobileSearchBar = () => {
 					router.setParams({ q });
 				}}
 				onFocus={() => router.push(query ? `/browse?q=${query}` : "/browse")}
+				onBlur={() => {
+					if (query !== "") return;
+					setExpanded(false);
+				}}
 				placeholder={t("navbar.search")}
 				textAlignVertical="center"
 				className={cn(
 					"h-full flex-1 font-sans text-base outline-0",
-					"text-slate-600 dark:text-slate-200",
-					!expanded && "grow-0",
+					"align-middle text-slate-600 dark:text-slate-200",
+					!expanded && "w-0 grow-0",
 				)}
 				placeholderTextColorClassName="accent-slate-400 dark:text-slate-600"
 			/>
@@ -228,9 +204,10 @@ const MobileSearchBar = () => {
 					if (expanded) {
 						inputRef.current?.blur();
 						setExpanded(false);
+						setQuery("");
+						router.setParams({ q: undefined });
 					} else {
 						setExpanded(true);
-						console.log("set to exampeded");
 						// Small delay to allow animation to start before focusing
 						setTimeout(() => inputRef.current?.focus(), 100);
 					}
@@ -252,7 +229,7 @@ export const NavbarRight = () => {
 
 	return (
 		<View className="shrink flex-row items-center">
-			{Platform.OS === "web" ? <SearchBar /> : <MobileSearchBar />}
+			<SearchBar />
 			{isAdmin && (
 				<IconButton
 					icon={Admin}