From 637505dde92fbd38541eb1b4e550821c4c8f2d8b Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 16 Feb 2026 12:01:59 +0100
Subject: [PATCH] Make native web tabbar

---
 front/src/app/(app)/(tabs)/_layout.tsx |   9 +-
 front/src/app/(app)/_layout.tsx        |   8 +-
 front/src/app/_layout.tsx              |   4 +
 front/src/primitives/links.tsx         |   6 +-
 front/src/ui/navbar.tsx                | 158 ++++++++++++++-----------
 5 files changed, 109 insertions(+), 76 deletions(-)

diff --git a/front/src/app/(app)/(tabs)/_layout.tsx b/front/src/app/(app)/(tabs)/_layout.tsx
index e07da8b0..05977132 100644
--- a/front/src/app/(app)/(tabs)/_layout.tsx
+++ b/front/src/app/(app)/(tabs)/_layout.tsx
@@ -1,14 +1,21 @@
 import Browse from "@material-symbols/svg-400/rounded/browse-fill.svg";
 // import Downloading from "@material-symbols/svg-400/rounded/downloading-fill.svg";
 import Home from "@material-symbols/svg-400/rounded/home-fill.svg";
-import { Tabs } from "expo-router";
+import { Slot, Tabs } from "expo-router";
 import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
 import { Icon } from "~/primitives";
 import { cn } from "~/utils";
 
+export const unstable_settings = {
+	initialRouteName: "index",
+};
+
 export default function TabsLayout() {
 	const { t } = useTranslation();
 
+	if (Platform.OS === "web") return <Slot />;
+
 	return (
 		<Tabs
 			screenOptions={{
diff --git a/front/src/app/(app)/_layout.tsx b/front/src/app/(app)/_layout.tsx
index d6fcb47b..ee3c2ed3 100644
--- a/front/src/app/(app)/_layout.tsx
+++ b/front/src/app/(app)/_layout.tsx
@@ -1,10 +1,14 @@
 import { Stack } from "expo-router";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useCSSVariable, useResolveClassNames } from "uniwind";
-import { NavbarRight, NavbarTitle } from "~/ui/navbar";
+import { NavbarLeft, NavbarRight } from "~/ui/navbar";
 
 export { ErrorBoundary } from "~/ui/error-bondary";
 
+export const unstable_settings = {
+	initialRouteName: "(tabs)",
+};
+
 export default function Layout() {
 	const insets = useSafeAreaInsets();
 	const accent = useCSSVariable("--color-accent");
@@ -13,7 +17,7 @@ export default function Layout() {
 	return (
 		<Stack
 			screenOptions={{
-				headerTitle: () => <NavbarTitle />,
+				headerTitle: () => <NavbarLeft />,
 				headerRight: () => <NavbarRight />,
 				contentStyle: {
 					paddingLeft: insets.left,
diff --git a/front/src/app/_layout.tsx b/front/src/app/_layout.tsx
index 56447b66..8d76b17e 100644
--- a/front/src/app/_layout.tsx
+++ b/front/src/app/_layout.tsx
@@ -6,6 +6,10 @@ import "../global.css";
 import { Tooltip, useMobileHover } from "~/primitives";
 import "~/fonts.web.css";
 
+export const unstable_settings = {
+	initialRouteName: "(app)",
+};
+
 export default function Layout() {
 	useMobileHover();
 
diff --git a/front/src/primitives/links.tsx b/front/src/primitives/links.tsx
index 8d2a2ff1..0bf85a95 100644
--- a/front/src/primitives/links.tsx
+++ b/front/src/primitives/links.tsx
@@ -5,11 +5,11 @@ import {
 	Platform,
 	Pressable,
 	type PressableProps,
-	Text,
 	type TextProps,
 } from "react-native";
 import { useResolveClassNames } from "uniwind";
 import { cn } from "~/utils";
+import { P } from "./text";
 
 export function useLinkTo({
 	href,
@@ -57,7 +57,7 @@ export const A = ({
 	const linkProps = useLinkTo({ href, replace });
 
 	return (
-		<Text
+		<P
 			{...linkProps}
 			className={cn(
 				"select-text text-accent hover:underline focus:underline",
@@ -66,7 +66,7 @@ export const A = ({
 			{...props}
 		>
 			{children}
-		</Text>
+		</P>
 	);
 };
 
diff --git a/front/src/ui/navbar.tsx b/front/src/ui/navbar.tsx
index d48d2bdd..db3eeab6 100644
--- a/front/src/ui/navbar.tsx
+++ b/front/src/ui/navbar.tsx
@@ -45,6 +45,24 @@ import { useAccount, useAccounts } from "~/providers/account-context";
 import { logout } from "~/ui/login/logic";
 import { cn } from "~/utils";
 
+export const NavbarLeft = () => {
+	const { t } = useTranslation();
+
+	if (Platform.OS !== "web") return <NavbarTitle />;
+
+	return (
+		<View className="flex-row items-center gap-2">
+			<NavbarTitle />
+			<A
+				href="/browse"
+				className="font-headers text-lg text-slate-200 uppercase dark:text-slate-200"
+			>
+				{t("navbar.browse")}
+			</A>
+		</View>
+	);
+};
+
 export const NavbarTitle = ({
 	className,
 	...props
@@ -64,68 +82,24 @@ export const NavbarTitle = ({
 	);
 };
 
-const getDisplayUrl = (url: string) => {
-	url = url.replace(/\/api$/, "");
-	url = url.replace(/https?:\/\//, "");
-	return url;
-};
-
-export const NavbarProfile = () => {
+export const NavbarRight = () => {
 	const { t } = useTranslation();
-	const account = useAccount();
-	const accounts = useAccounts();
+	const isAdmin = false; //useHasPermission(AdminPage.requiredPermissions);
 
 	return (
-		<Menu
-			Trigger={Avatar<PressableProps>}
-			as={PressableFeedback}
-			src={account?.logo}
-			placeholder={account?.username}
-			alt={t("navbar.login")}
-			className="m-2"
-			{...tooltip(account?.username ?? t("navbar.login"))}
-		>
-			{accounts?.map((x) => (
-				<Menu.Item
-					key={x.id}
-					label={
-						Platform.OS === "web"
-							? x.username
-							: `${x.username} - ${getDisplayUrl(x.apiUrl)}`
-					}
-					left={
-						<Avatar placeholder={x.username} src={x.logo} className="mx-2" />
-					}
-					selected={x.selected}
-					onSelect={() => x.select()}
+		<View className="shrink flex-row items-center">
+			<SearchBar />
+			{isAdmin && (
+				<IconButton
+					icon={Admin}
+					as={Link}
+					href={"/admin"}
+					iconClassName="fill-slate-200 dark:fill-slate-200"
+					{...tooltip(t("navbar.admin"))}
 				/>
-			))}
-			{accounts.length > 0 && <HR />}
-			<Menu.Item label={t("misc.settings")} icon={Settings} href="/settings" />
-			{!account ? (
-				<>
-					<Menu.Item label={t("login.login")} icon={Login} href="/login" />
-					<Menu.Item
-						label={t("login.register")}
-						icon={Register}
-						href="/register"
-					/>
-				</>
-			) : (
-				<>
-					<Menu.Item
-						label={t("login.add-account")}
-						icon={Login}
-						href="/login"
-					/>
-					<Menu.Item
-						label={t("login.logout")}
-						icon={Logout}
-						onSelect={logout}
-					/>
-				</>
 			)}
-		</Menu>
+			<NavbarProfile />
+		</View>
 	);
 };
 
@@ -217,24 +191,68 @@ const SearchBar = () => {
 	);
 };
 
-export const NavbarRight = () => {
+const getDisplayUrl = (url: string) => {
+	url = url.replace(/\/api$/, "");
+	url = url.replace(/https?:\/\//, "");
+	return url;
+};
+
+export const NavbarProfile = () => {
 	const { t } = useTranslation();
-	const isAdmin = false; //useHasPermission(AdminPage.requiredPermissions);
+	const account = useAccount();
+	const accounts = useAccounts();
 
 	return (
-		<View className="shrink flex-row items-center">
-			<SearchBar />
-			{isAdmin && (
-				<IconButton
-					icon={Admin}
-					as={Link}
-					href={"/admin"}
-					iconClassName="fill-slate-200 dark:fill-slate-200"
-					{...tooltip(t("navbar.admin"))}
+		<Menu
+			Trigger={Avatar<PressableProps>}
+			as={PressableFeedback}
+			src={account?.logo}
+			placeholder={account?.username}
+			alt={t("navbar.login")}
+			className="m-2"
+			{...tooltip(account?.username ?? t("navbar.login"))}
+		>
+			{accounts?.map((x) => (
+				<Menu.Item
+					key={x.id}
+					label={
+						Platform.OS === "web"
+							? x.username
+							: `${x.username} - ${getDisplayUrl(x.apiUrl)}`
+					}
+					left={
+						<Avatar placeholder={x.username} src={x.logo} className="mx-2" />
+					}
+					selected={x.selected}
+					onSelect={() => x.select()}
 				/>
+			))}
+			{accounts.length > 0 && <HR />}
+			<Menu.Item label={t("misc.settings")} icon={Settings} href="/settings" />
+			{!account ? (
+				<>
+					<Menu.Item label={t("login.login")} icon={Login} href="/login" />
+					<Menu.Item
+						label={t("login.register")}
+						icon={Register}
+						href="/register"
+					/>
+				</>
+			) : (
+				<>
+					<Menu.Item
+						label={t("login.add-account")}
+						icon={Login}
+						href="/login"
+					/>
+					<Menu.Item
+						label={t("login.logout")}
+						icon={Logout}
+						onSelect={logout}
+					/>
+				</>
 			)}
-			<NavbarProfile />
-		</View>
+		</Menu>
 	);
 };