[MOB-80] Drawer design improvement & more (#2274)

* draw design improvement

* lint

* view all buttons

* tweaks

* widths

apps/mobile/src/components/browse/DrawerLibraryManager.tsx

@@ -1,117 +0,0 @@
-import { useNavigation } from '@react-navigation/native';
-import { MotiView } from 'moti';
-import { CaretRight, Gear, Lock, Plus } from 'phosphor-react-native';
-import { useRef, useState } from 'react';
-import { Alert, Pressable, Text, View } from 'react-native';
-import { useClientContext } from '@sd/client';
-import { tw, twStyle } from '~/lib/tailwind';
-import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
-import { currentLibraryStore } from '~/utils/nav';
-
-import { AnimatedHeight } from '../animation/layout';
-import { ModalRef } from '../layout/Modal';
-import CreateLibraryModal from '../modal/CreateLibraryModal';
-import { Divider } from '../primitive/Divider';
-
-interface Props {
-	style?: string;
-}
-
-const BrowseLibraryManager = ({ style }: Props) => {
-	const [dropdownClosed, setDropdownClosed] = useState(true);
-
-	const { library: currentLibrary, libraries } = useClientContext();
-
-	const navigation = useNavigation<SettingsStackScreenProps<'Settings'>['navigation']>();
-
-	const modalRef = useRef<ModalRef>(null);
-
-	return (
-		<View style={twStyle(`w-full`, style)}>
-			<Pressable onPress={() => setDropdownClosed((v) => !v)}>
-				<View
-					style={twStyle(
-						'flex h-11 w-full flex-row items-center justify-between border bg-app-input px-3 shadow-sm',
-						dropdownClosed
-							? 'rounded-md border-app-inputborder'
-							: 'rounded-t-md border-app-inputborder border-b-app-inputborder'
-					)}
-				>
-					<Text style={tw`text-md font-semibold text-ink`}>
-						{currentLibrary?.config.name}
-					</Text>
-					<MotiView
-						animate={{ rotateZ: dropdownClosed ? '0deg' : '90deg' }}
-						transition={{ type: 'timing', duration: 100 }}
-					>
-						<CaretRight color="white" size={18} weight="bold" />
-					</MotiView>
-				</View>
-			</Pressable>
-			<AnimatedHeight style={tw`absolute top-10 z-10 w-full`} hide={dropdownClosed}>
-				<View style={tw`w-full rounded-b-md border border-zinc-800 bg-zinc-900 p-2`}>
-					{/* Libraries */}
-					{libraries.data?.map((library) => {
-						return (
-							<Pressable
-								key={library.uuid}
-								onPress={() => (currentLibraryStore.id = library.uuid)}
-							>
-								<View
-									style={twStyle(
-										'mt-1 p-2',
-										currentLibrary?.uuid === library.uuid && 'rounded bg-accent'
-									)}
-								>
-									<Text
-										style={twStyle(
-											'text-sm font-semibold text-ink',
-											currentLibrary?.uuid === library.uuid && 'text-white'
-										)}
-									>
-										{library.config.name}
-									</Text>
-								</View>
-							</Pressable>
-						);
-					})}
-					<Divider style={tw`my-2`} />
-					{/* Menu */}
-					{/* Create Library */}
-					<Pressable
-						style={tw`flex flex-row items-center px-1.5 py-[8px]`}
-						onPress={() => {
-							modalRef.current?.present();
-							setDropdownClosed(true);
-						}}
-					>
-						<Plus size={18} weight="bold" color="white" style={tw`mr-2`} />
-						<Text style={tw`text-sm font-semibold text-white`}>New Library</Text>
-					</Pressable>
-					<CreateLibraryModal ref={modalRef} />
-					{/* Manage Library */}
-					<Pressable
-						onPress={() => {
-							navigation.navigate('LibraryGeneralSettings');
-							setDropdownClosed(true);
-						}}
-					>
-						<View style={tw`flex flex-row items-center px-1.5 py-[8px]`}>
-							<Gear size={18} weight="bold" color="white" style={tw`mr-2`} />
-							<Text style={tw`text-sm font-semibold text-white`}>Manage Library</Text>
-						</View>
-					</Pressable>
-					{/* Lock */}
-					<Pressable onPress={() => Alert.alert('TODO')}>
-						<View style={tw`flex flex-row items-center px-1.5 py-[8px]`}>
-							<Lock size={18} weight="bold" color="white" style={tw`mr-2`} />
-							<Text style={tw`text-sm font-semibold text-white`}>Lock</Text>
-						</View>
-					</Pressable>
-				</View>
-			</AnimatedHeight>
-		</View>
-	);
-};
-
-export default BrowseLibraryManager;

apps/mobile/src/components/browse/ListLibraryItem.tsx

@@ -17,7 +17,7 @@ const ListLibraryItem = ({ name, icon }: CategoryProps) => {
 				<Text style={twStyle(`mt-0 text-sm text-white`)}>{name}</Text>
 			</View>
 			<View
-				style={tw`h-8 w-auto flex-row items-center justify-center rounded-full border border-app-lightborder/70 px-2`}
+				style={tw`h-10 w-10 flex-row items-center justify-center rounded-full border border-app-lightborder/70 px-2`}
 			>
 				<Text style={tw`text-xs font-medium text-ink-dull`}>
 					{Math.floor(Math.random() * 200)}

apps/mobile/src/components/drawer/DrawerContent.tsx

@@ -11,6 +11,7 @@ import { tw, twStyle } from '~/lib/tailwind';
 import { PulseAnimation } from '../animation/lottie';
 import { ModalRef } from '../layout/Modal';
 import { JobManagerModal } from '../modal/job/JobManagerModal';
+import { Button } from '../primitive/Button';
 import DrawerLibraryManager from './DrawerLibraryManager';
 import DrawerLocations from './DrawerLocations';
 import DrawerTags from './DrawerTags';
@@ -51,13 +52,7 @@ const DrawerContent = ({ navigation, state }: DrawerContentComponentProps) => {
 					{/* Tags */}
 					<DrawerTags />
 				</View>
-				<View style={tw`flex w-full flex-row items-center gap-x-4`}>
-					{/* Settings */}
-					{/* <Pressable
-						onPress={() => navigation.navigate('SettingsStack', { screen: 'Settings' })}
-					>
-						<Gear color="white" size={24} />
-					</Pressable> */}
+				<View style={tw`mt-3 flex w-full flex-row items-center gap-x-4`}>
 					{/* Job Manager */}
 					<JobManagerContextProvider>
 						<Pressable onPress={() => modalRef.current?.present()}>
@@ -65,6 +60,14 @@ const DrawerContent = ({ navigation, state }: DrawerContentComponentProps) => {
 						</Pressable>
 						<JobManagerModal ref={modalRef} />
 					</JobManagerContextProvider>
+					<Button
+						onPress={() => {
+							alert('Todo');
+						}}
+						variant="gray"
+					>
+						<Text style={tw`text-xs font-medium text-white`}>Feedback</Text>
+					</Button>
 				</View>
 			</View>
 		</DrawerContentScrollView>

apps/mobile/src/components/drawer/DrawerLibraryManager.tsx

@@ -33,10 +33,10 @@ const DrawerLibraryManager = () => {
 			<Pressable onPress={() => setDropdownClosed((v) => !v)}>
 				<View
 					style={twStyle(
-						'flex h-10 w-full flex-row items-center justify-between border bg-sidebar-box px-3 shadow-sm',
+						'flex h-10 w-full flex-row items-center justify-between border bg-app-input px-3 shadow-sm',
 						dropdownClosed
-							? 'rounded-md border-sidebar-line/50'
-							: 'rounded-t-md border-sidebar-line border-b-app-box bg-sidebar-button'
+							? 'rounded-md border-app-inputborder'
+							: 'rounded-t-md border-b-0 border-app-inputborder'
 					)}
 				>
 					<Text style={tw`text-sm font-semibold text-ink`}>
@@ -51,7 +51,9 @@ const DrawerLibraryManager = () => {
 				</View>
 			</Pressable>
 			<AnimatedHeight hide={dropdownClosed}>
-				<View style={tw`rounded-b-md border-sidebar-line bg-sidebar-button p-2`}>
+				<View
+					style={tw`w-full rounded-b-md border border-app-inputborder bg-app-input p-2`}
+				>
 					{/* Libraries */}
 					{libraries.data?.map((library) => {
 						// console.log('library', library);

apps/mobile/src/components/drawer/DrawerLocations.tsx

@@ -2,29 +2,60 @@ import { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript
 import { useNavigation } from '@react-navigation/native';
 import { useRef } from 'react';
 import { Pressable, Text, View } from 'react-native';
-import { useCache, useLibraryQuery, useNodes } from '@sd/client';
+import {
+	arraysEqual,
+	byteSize,
+	Location,
+	useCache,
+	useLibraryQuery,
+	useNodes,
+	useOnlineLocations
+} from '@sd/client';
 import { ModalRef } from '~/components/layout/Modal';
 import { tw, twStyle } from '~/lib/tailwind';
 
 import FolderIcon from '../icons/FolderIcon';
 import CollapsibleView from '../layout/CollapsibleView';
 import ImportModal from '../modal/ImportModal';
+import { Button } from '../primitive/Button';
 
 type DrawerLocationItemProps = {
-	folderName: string;
 	onPress: () => void;
+	location: Location;
 };
 
-const DrawerLocationItem: React.FC<DrawerLocationItemProps> = (props) => {
-	const { folderName, onPress } = props;
-
+const DrawerLocationItem: React.FC<DrawerLocationItemProps> = ({
+	location,
+	onPress
+}: DrawerLocationItemProps) => {
+	const onlineLocations = useOnlineLocations();
+	const online = onlineLocations.some((l) => arraysEqual(location.pub_id, l));
 	return (
 		<Pressable onPress={onPress}>
-			<View style={twStyle('mb-[4px] flex flex-row items-center rounded px-1 py-2')}>
-				<FolderIcon size={20} />
-				<Text style={twStyle('ml-1.5 font-medium text-gray-300')} numberOfLines={1}>
-					{folderName}
-				</Text>
+			<View
+				style={twStyle(
+					'h-auto w-full flex-row items-center justify-between rounded-md border border-app-inputborder/50 bg-app-darkBox p-2'
+				)}
+			>
+				<View style={tw`flex-row items-center gap-1`}>
+					<View style={tw`relative`}>
+						<FolderIcon size={20} />
+						<View
+							style={twStyle(
+								'z-5 absolute bottom-1 right-px h-1.5 w-1.5 rounded-full',
+								online ? 'bg-green-500' : 'bg-red-500'
+							)}
+						/>
+					</View>
+					<Text style={twStyle('text-xs font-medium text-ink')} numberOfLines={1}>
+						{location.name ?? ''}
+					</Text>
+				</View>
+				<View style={tw`rounded-md border border-app-lightborder bg-app-box px-1 py-0.5`}>
+					<Text style={tw`text-[11px] font-medium text-ink-dull`} numberOfLines={1}>
+						{`${byteSize(location.size_in_bytes)}`}
+					</Text>
+				</View>
 			</View>
 		</Pressable>
 	);
@@ -43,31 +74,53 @@ const DrawerLocations = () => {
 		<>
 			<CollapsibleView
 				title="Locations"
-				titleStyle={tw`text-sm font-semibold text-gray-300`}
-				containerStyle={tw`mb-3 ml-1 mt-6`}
+				titleStyle={tw`text-sm font-semibold text-ink`}
+				containerStyle={tw`mb-3 mt-6`}
 			>
-				<View style={tw`mt-2`}>
-					{locations?.map((location) => (
+				<View style={tw`mt-2 flex-col justify-between gap-1`}>
+					{locations?.slice(0, 3).map((location) => (
 						<DrawerLocationItem
 							key={location.id}
-							folderName={location.name ?? ''}
+							location={location}
 							onPress={() =>
 								navigation.navigate('BrowseStack', {
 									screen: 'Location',
-									params: { id: location.id }
+									params: { id: location.id },
+									initial: false
 								})
 							}
 						/>
 					))}
 				</View>
-				{/* Add Location */}
-				<Pressable onPress={() => modalRef.current?.present()}>
-					<View style={tw`mt-1 rounded border border-dashed border-app-line/80`}>
-						<Text style={tw`p-2 text-center text-xs font-bold text-gray-400`}>
-							Add Location
+				<View style={tw`mt-2 flex-row flex-wrap gap-1`}>
+					{/* Add Location */}
+					<Button
+						style={twStyle(`py-0`, locations?.length > 3 ? 'w-[49%]' : 'w-full')}
+						onPress={() => modalRef.current?.present()}
+						variant="dashed"
+					>
+						<Text style={tw`p-2 text-center text-xs font-medium text-ink-dull`}>
+							+ Location
 						</Text>
-					</View>
-				</Pressable>
+					</Button>
+					{/* See all locations */}
+					{locations?.length > 3 && (
+						<Button
+							onPress={() => {
+								navigation.navigate('BrowseStack', {
+									screen: 'Locations',
+									initial: false
+								});
+							}}
+							style={tw`w-[49%] py-0`}
+							variant="gray"
+						>
+							<Text style={tw`p-2 text-center text-xs font-medium text-ink`}>
+								View all
+							</Text>
+						</Button>
+					)}
+				</View>
 			</CollapsibleView>
 			<ImportModal ref={modalRef} />
 		</>

apps/mobile/src/components/drawer/DrawerTags.tsx

@@ -2,12 +2,13 @@ import { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript
 import { useNavigation } from '@react-navigation/native';
 import { useRef } from 'react';
 import { ColorValue, Pressable, Text, View } from 'react-native';
-import { useCache, useLibraryQuery, useNodes } from '@sd/client';
+import { Tag, useCache, useLibraryQuery, useNodes } from '@sd/client';
 import { ModalRef } from '~/components/layout/Modal';
 import { tw, twStyle } from '~/lib/tailwind';
 
 import CollapsibleView from '../layout/CollapsibleView';
 import CreateTagModal from '../modal/tag/CreateTagModal';
+import { Button } from '../primitive/Button';
 
 type DrawerTagItemProps = {
 	tagName: string;
@@ -19,9 +20,13 @@ const DrawerTagItem: React.FC<DrawerTagItemProps> = (props) => {
 	const { tagName, tagColor, onPress } = props;
 	return (
 		<Pressable onPress={onPress} testID="drawer-tag">
-			<View style={twStyle('mb-[4px] flex flex-row items-center rounded px-1 py-2')}>
-				<View style={twStyle('h-3.5 w-3.5 rounded-full', { backgroundColor: tagColor })} />
-				<Text style={twStyle('ml-2 text-sm font-medium text-gray-300')} numberOfLines={1}>
+			<View
+				style={twStyle(
+					'h-auto flex-row items-center gap-2 rounded-md border border-app-inputborder/50 bg-app-darkBox p-2'
+				)}
+			>
+				<View style={twStyle('h-4 w-4 rounded-full', { backgroundColor: tagColor })} />
+				<Text style={twStyle('text-xs font-medium text-ink')} numberOfLines={1}>
 					{tagName}
 				</Text>
 			</View>
@@ -30,9 +35,9 @@ const DrawerTagItem: React.FC<DrawerTagItemProps> = (props) => {
 };
 
 const DrawerTags = () => {
+	const tags = useLibraryQuery(['tags.list']);
 	const navigation = useNavigation<DrawerNavigationHelpers>();
 
-	const tags = useLibraryQuery(['tags.list']);
 	useNodes(tags.data?.nodes);
 	const tagData = useCache(tags.data?.items);
 
@@ -41,33 +46,69 @@ const DrawerTags = () => {
 	return (
 		<CollapsibleView
 			title="Tags"
-			titleStyle={tw`text-sm font-semibold text-gray-300`}
-			containerStyle={tw`mb-3 ml-1 mt-6`}
+			titleStyle={tw`text-sm font-semibold text-ink`}
+			containerStyle={tw`mb-3 mt-6`}
 		>
-			<View style={tw`mt-2`}>
-				{tagData?.map((tag) => (
-					<DrawerTagItem
-						key={tag.id}
-						tagName={tag.name!}
-						onPress={() =>
-							navigation.navigate('BrowseStack', {
-								screen: 'Tag',
-								params: { id: tag.id }
-							})
-						}
-						tagColor={tag.color as ColorValue}
-					/>
-				))}
+			<View style={tw`mt-2 flex-row justify-between gap-1`}>
+				<TagColumn tags={tagData} dataAmount={[0, 2]} />
+				<TagColumn tags={tagData} dataAmount={[2, 4]} />
+			</View>
+			<View style={tw`mt-2 flex-row flex-wrap gap-1`}>
+				{/* Add Tag */}
+				<Button
+					style={tw`w-[49%] py-0`}
+					onPress={() => modalRef.current?.present()}
+					variant="dashed"
+				>
+					<Text style={tw`p-2 text-center text-xs font-medium text-ink-dull`}>+ Tag</Text>
+				</Button>
+				{/* See all tags */}
+				{tagData?.length > 4 && (
+					<Button
+						onPress={() => {
+							navigation.navigate('BrowseStack', {
+								screen: 'Tags',
+								initial: false
+							});
+						}}
+						style={tw`w-[49%] py-0`}
+						variant="gray"
+					>
+						<Text style={tw`p-2 text-center text-xs font-medium text-ink`}>
+							View all
+						</Text>
+					</Button>
+				)}
 			</View>
-			{/* Add Tag */}
-			<Pressable onPress={() => modalRef.current?.present()}>
-				<View style={tw`mt-1 rounded border border-dashed border-app-line/80`}>
-					<Text style={tw`p-2 text-center text-xs font-bold text-gray-400`}>Add Tag</Text>
-				</View>
-			</Pressable>
 			<CreateTagModal ref={modalRef} />
 		</CollapsibleView>
 	);
 };
 
+interface TagColumnProps {
+	tags?: Tag[];
+	dataAmount: [start: number, end: number];
+}
+
+const TagColumn = ({ tags, dataAmount }: TagColumnProps) => {
+	const navigation = useNavigation<DrawerNavigationHelpers>();
+	return (
+		<View style={tw`w-[49%] flex-col gap-1`}>
+			{tags?.slice(dataAmount[0], dataAmount[1]).map((tag: any) => (
+				<DrawerTagItem
+					key={tag.id}
+					tagName={tag.name!}
+					onPress={() =>
+						navigation.navigate('BrowseStack', {
+							screen: 'Tag',
+							params: { id: tag.id, color: tag.color }
+						})
+					}
+					tagColor={tag.color as ColorValue}
+				/>
+			))}
+		</View>
+	);
+};
+
 export default DrawerTags;

apps/mobile/src/components/header/Header.tsx

@@ -1,22 +1,21 @@
+import { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackHeaderProps } from '@react-navigation/native-stack';
-import { ArrowLeft, DotsThreeOutline, MagnifyingGlass } from 'phosphor-react-native';
+import { ArrowLeft, DotsThreeOutline, List, MagnifyingGlass } from 'phosphor-react-native';
 import { Platform, Pressable, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { tw, twStyle } from '~/lib/tailwind';
 import { getExplorerStore, useExplorerStore } from '~/stores/explorerStore';
 
-import BrowseLibraryManager from '../browse/DrawerLibraryManager';
 import { Icon } from '../icons/Icon';
 import Search from '../search/Search';
 
 type HeaderProps = {
 	title?: string; //title of the page
-	showLibrary?: boolean; //show the library manager
 	showSearch?: boolean; //show the search button
+	showDrawer?: boolean; //show the drawer button
 	searchType?: 'explorer' | 'location' | 'categories'; //Temporary
 	navBack?: boolean; //navigate back to the previous screen
-	navBackHome?: boolean; //navigate back to the home screen of the stack
 	headerKind?: 'default' | 'location' | 'tag'; //kind of header
 	route?: never;
 	routeTitle?: never;
@@ -33,16 +32,15 @@ type Props =
 // Default header with search bar and button to open drawer
 export default function Header({
 	title,
-	showLibrary,
 	searchType,
 	navBack,
 	route,
 	routeTitle,
-	navBackHome = false,
 	headerKind = 'default',
+	showDrawer = false,
 	showSearch = true
 }: Props) {
-	const navigation = useNavigation();
+	const navigation = useNavigation<DrawerNavigationHelpers>();
 	const explorerStore = useExplorerStore();
 	const routeParams = route?.route.params as any;
 	const headerHeight = useSafeAreaInsets().top;
@@ -69,6 +67,11 @@ export default function Header({
 						)}
 						<View style={tw`flex-row items-center gap-2`}>
 							<HeaderIconKind headerKind={headerKind} routeParams={routeParams} />
+							{showDrawer && (
+								<Pressable onPress={() => navigation.openDrawer()}>
+									<List size={24} color={tw.color('text-zinc-300')} />
+								</Pressable>
+							)}
 							<Text
 								numberOfLines={1}
 								style={tw`max-w-[200px] text-xl font-bold text-white`}
@@ -113,8 +116,6 @@ export default function Header({
 						)}
 					</View>
 				</View>
-
-				{showLibrary && <BrowseLibraryManager style="mt-4" />}
 				{searchType && <HeaderSearchType searchType={searchType} />}
 			</View>
 		</View>

apps/mobile/src/components/locations/ListLocation.tsx

@@ -66,7 +66,7 @@ const ListLocation = ({ location }: ListLocationProps) => {
 						style={tw`rounded-md border border-app-lightborder bg-app-highlight p-1.5`}
 					>
 						<Text
-							style={tw`text-left text-xs font-bold text-ink-dull`}
+							style={tw`text-left text-xs font-medium text-ink-dull`}
 							numberOfLines={1}
 						>
 							{`${byteSize(location.size_in_bytes)}`}

apps/mobile/src/constants/style/Colors.js

@@ -70,7 +70,7 @@ module.exports = {
 			iconborder: `hsla(${DARK_HUE}, 10%, 100%, ${ALPHA})`,
 			// background (dark)
 			box: `hsla(${DARK_HUE}, 15%, 18%, ${ALPHA})`,
-			darkBox: `hsla(${DARK_HUE}, 15%, 7%, ${ALPHA})`,
+			darkBox: `hsla(${DARK_HUE}, 10%, 7%, ${ALPHA})`,
 			// foreground (light)
 			overlay: `hsla(${DARK_HUE}, 15%, 17%, ${ALPHA})`,
 			// border

apps/mobile/src/navigation/DrawerNavigator.tsx

@@ -17,7 +17,12 @@ export default function DrawerNavigator() {
 			initialRouteName="Home"
 			screenOptions={{
 				headerShown: false,
-				drawerStyle: { backgroundColor: tw.color('app-darkBox'), width: '70%' },
+				drawerStyle: {
+					backgroundColor: tw.color('app-darkBox'),
+					width: '70%',
+					borderRightWidth: 1.5,
+					borderRightColor: tw.color('app-cardborder')
+				},
 				overlayColor: 'transparent',
 				drawerType: 'slide',
 				swipeEdgeWidth: 50

apps/mobile/src/navigation/tabs/BrowseStack.tsx

@@ -18,7 +18,7 @@ export default function BrowseStack() {
 			<Stack.Screen
 				name="Browse"
 				component={BrowseScreen}
-				options={{ header: () => <Header showLibrary title="Browse" /> }}
+				options={{ header: () => <Header showDrawer title="Browse" /> }}
 			/>
 			<Stack.Screen
 				name="Location"

apps/mobile/src/navigation/tabs/NetworkStack.tsx

@@ -13,7 +13,7 @@ export default function NetworkStack() {
 			<Stack.Screen
 				name="Network"
 				component={NetworkScreen}
-				options={{ header: () => <Header title="Network" /> }}
+				options={{ header: () => <Header showDrawer title="Network" /> }}
 			/>
 		</Stack.Navigator>
 	);

apps/mobile/src/navigation/tabs/OverviewStack.tsx

@@ -14,7 +14,7 @@ export default function OverviewStack() {
 			<Stack.Screen
 				name="Overview"
 				component={OverviewScreen}
-				options={{ header: () => <Header title="Overview" /> }}
+				options={{ header: () => <Header showDrawer title="Overview" /> }}
 			/>
 			<Stack.Screen
 				name="Categories"

apps/mobile/src/navigation/tabs/SettingsStack.tsx

@@ -28,39 +28,39 @@ export default function SettingsStack() {
 			<Stack.Screen
 				name="Settings"
 				component={SettingsScreen}
-				options={{ header: () => <Header title="Settings" /> }}
+				options={{ header: () => <Header showDrawer title="Settings" /> }}
 			/>
 			{/* Client */}
 			<Stack.Screen
 				name="GeneralSettings"
 				component={GeneralSettingsScreen}
-				options={{ header: () => <Header navBack navBackHome title="General" /> }}
+				options={{ header: () => <Header navBack title="General" /> }}
 			/>
 			<Stack.Screen
 				name="LibrarySettings"
 				component={LibrarySettingsScreen}
-				options={{ header: () => <Header navBack navBackHome title="Libraries" /> }}
+				options={{ header: () => <Header navBack title="Libraries" /> }}
 			/>
 			<Stack.Screen
 				name="AppearanceSettings"
 				component={AppearanceSettingsScreen}
-				options={{ header: () => <Header navBack navBackHome title="Appearance" /> }}
+				options={{ header: () => <Header navBack title="Appearance" /> }}
 			/>
 			<Stack.Screen
 				name="PrivacySettings"
 				component={PrivacySettingsScreen}
-				options={{ header: () => <Header navBack navBackHome title="Privacy" /> }}
+				options={{ header: () => <Header navBack title="Privacy" /> }}
 			/>
 			<Stack.Screen
 				name="ExtensionsSettings"
 				component={ExtensionsSettingsScreen}
-				options={{ header: () => <Header navBack navBackHome title="Extensions" /> }}
+				options={{ header: () => <Header navBack title="Extensions" /> }}
 			/>
 			{/* Library */}
 			<Stack.Screen
 				name="LibraryGeneralSettings"
 				component={LibraryGeneralSettingsScreen}
-				options={{ header: () => <Header navBack navBackHome title="Library Settings" /> }}
+				options={{ header: () => <Header navBack title="Library Settings" /> }}
 			/>
 			<Stack.Screen
 				name="LocationSettings"
@@ -72,17 +72,17 @@ export default function SettingsStack() {
 			<Stack.Screen
 				name="EditLocationSettings"
 				component={EditLocationSettingsScreen}
-				options={{ header: () => <Header navBack navBackHome title="Edit Location" /> }}
+				options={{ header: () => <Header navBack title="Edit Location" /> }}
 			/>
 			<Stack.Screen
 				name="NodesSettings"
 				component={NodesSettingsScreen}
-				options={{ header: () => <Header navBack navBackHome title="Nodes" /> }}
+				options={{ header: () => <Header navBack title="Nodes" /> }}
 			/>
 			<Stack.Screen
 				name="TagsSettings"
 				component={TagsSettingsScreen}
-				options={{ header: () => <Header navBack navBackHome title="Tags" /> }}
+				options={{ header: () => <Header navBack title="Tags" /> }}
 			/>
 			{/* <Stack.Screen
 				name="KeysSettings"
@@ -93,17 +93,17 @@ export default function SettingsStack() {
 			<Stack.Screen
 				name="About"
 				component={AboutScreen}
-				options={{ header: () => <Header navBack navBackHome title="About" /> }}
+				options={{ header: () => <Header navBack title="About" /> }}
 			/>
 			<Stack.Screen
 				name="Support"
 				component={SupportScreen}
-				options={{ header: () => <Header navBack navBackHome title="Support" /> }}
+				options={{ header: () => <Header navBack title="Support" /> }}
 			/>
 			<Stack.Screen
 				name="Debug"
 				component={DebugScreen}
-				options={{ header: () => <Header navBack navBackHome title="Debug" /> }}
+				options={{ header: () => <Header navBack title="Debug" /> }}
 			/>
 		</Stack.Navigator>
 	);

apps/mobile/src/screens/browse/Browse.tsx

@@ -6,7 +6,6 @@ import BrowseCategories from '~/components/browse/BrowseCategories';
 import BrowseLocations from '~/components/browse/BrowseLocations';
 import BrowseTags from '~/components/browse/BrowseTags';
 import Jobs from '~/components/browse/Jobs';
-import { ModalRef } from '~/components/layout/Modal';
 import ScreenContainer from '~/components/layout/ScreenContainer';
 import { tw } from '~/lib/tailwind';
 
@@ -20,8 +19,6 @@ function JobIcon() {
 }
 
 export default function BrowseScreen() {
-	const modalRef = React.useRef<ModalRef>(null);
-
 	return (
 		<ScreenContainer>
 			<BrowseCategories />