Add mobile support for the search bar

front/apps/mobile/app/_layout.tsx

@@ -18,17 +18,17 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Stack } from "expo-router";
-import { ThemeSelector } from "@kyoo/primitives";
-import { useTheme } from "yoshiki/native";
-import { NavbarRight, NavbarTitle } from "@kyoo/ui";
-import { useState } from "react";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { createQueryClient } from "@kyoo/models";
-import i18next from "i18next";
-import { initReactI18next } from "react-i18next";
-import { getLocales } from "expo-localization";
 import { PortalProvider } from "@gorhom/portal";
+import { ThemeSelector } from "@kyoo/primitives";
+import { NavbarProfile, NavbarRight, NavbarTitle } from "@kyoo/ui";
+import { createQueryClient } from "@kyoo/models";
+import { QueryClientProvider } from "@tanstack/react-query";
+import i18next from "i18next";
+import { Stack } from "expo-router";
+import { getLocales } from "expo-localization";
+import { useState } from "react";
+import { initReactI18next, useTranslation } from "react-i18next";
+import { useTheme } from "yoshiki/native";
 import "intl-pluralrules";
 
 // TODO: use a backend to load jsons.

front/apps/mobile/app/search/index.tsx

@@ -19,6 +19,41 @@
  */
 
 import { SearchPage } from "@kyoo/ui";
-import { withRoute } from "../../utils";
+import { Stack } from "expo-router";
+import { useTranslation } from "react-i18next";
+import { createParam } from "solito";
+import { useRouter } from "solito/router";
+import { useTheme } from "yoshiki/native";
 
-export default withRoute(SearchPage);
+const { useParam } = createParam<{ q?: string }>();
+
+const Search = ({ route }: { route: any }) => {
+	const theme = useTheme();
+	const { back } = useRouter();
+	const { t } = useTranslation();
+	const [query, setQuery] = useParam("q");
+
+	return (
+		<>
+			<Stack.Screen
+				options={{
+					headerTitle: () => null,
+					// TODO: this shouuld not be null but since the header right is on the left of the search bar. shrug
+					headerRight: () => null,
+					headerSearchBarOptions: {
+						autoFocus: true,
+						headerIconColor: theme.colors.white,
+						hintTextColor: theme.light.overlay1,
+						textColor: theme.paragraph,
+						placeholder: t("navbar.search")!,
+						onClose: () => back(),
+						onChangeText: (e) => setQuery(e.nativeEvent.text),
+					},
+				}}
+			/>
+			<SearchPage {...route.params} />
+		</>
+	);
+};
+
+export default Search;

front/packages/ui/src/navbar/index.tsx

@@ -102,28 +102,33 @@ export const NavbarRight = () => {
 	const [isSearching, setSearch] = useState(false);
 	const ref = useRef<TextInput | null>(null);
 	const [query] = useParam("q");
+	const { push } = useRouter();
 	const searchExpanded = isSearching || query;
 
 	return (
 		<View {...css({ flexDirection: "row" })}>
-			<SearchBar
-				ref={ref}
-				onBlur={(q) => {
-					if (!q) setSearch(false);
-				}}
-				{...css(
-					Platform.OS === "web" && {
+			{Platform.OS === "web" && (
+				<SearchBar
+					ref={ref}
+					onBlur={(q) => {
+						if (!q) setSearch(false);
+					}}
+					{...css({
 						display: { xs: searchExpanded ? "flex" : "none", md: "flex" },
-					},
-				)}
-			/>
+					})}
+				/>
+			)}
 			{!searchExpanded && (
 				<IconButton
 					icon={Search}
-					onPress={() => {
-						setSearch(true);
-						setTimeout(() => ref.current?.focus(), 0);
-					}}
+					onPress={
+						Platform.OS === "web"
+							? () => {
+									setSearch(true);
+									setTimeout(() => ref.current?.focus(), 0);
+							  }
+							: () => push("/search")
+					}
 					{...tooltip(t("navbar.search"))}
 					{...css(Platform.OS === "web" && { display: { xs: "flex", md: "none" } })}
 				/>