[MOB-90] Visual adjustments (#2383)

* Visual adjustments

* Update Tags.tsx

* cleanup

* remove prop

* remove hitslop

* sectionlist

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

@@ -14,7 +14,7 @@ type HeaderProps = {
 	title?: string; //title of the page
 	showSearch?: boolean; //show the search button
 	showDrawer?: boolean; //show the drawer button
-	searchType?: 'explorer' | 'location' | 'categories'; //Temporary
+	searchType?: 'explorer' | 'location' | 'categories' | 'tags'; //Temporary
 	navBack?: boolean; //navigate back to the previous screen
 	headerKind?: 'default' | 'location' | 'tag'; //kind of header
 	route?: never;
@@ -38,7 +38,7 @@ export default function Header({
 	routeTitle,
 	headerKind = 'default',
 	showDrawer = false,
-	showSearch = true
+	showSearch = false,
 }: Props) {
 	const navigation = useNavigation<DrawerNavigationHelpers>();
 	const explorerStore = useExplorerStore();
@@ -52,7 +52,7 @@ export default function Header({
 				paddingTop: headerHeight + (isAndroid ? 15 : 0)
 			})}
 		>
-			<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-4`}>
+			<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-3`}>
 				<View style={tw`w-full flex-row items-center justify-between`}>
 					<View style={tw`flex-row items-center gap-3`}>
 						{navBack && (
@@ -132,6 +132,8 @@ const HeaderSearchType = ({ searchType }: HeaderSearchTypeProps) => {
 			return 'Explorer'; //TODO
 		case 'location':
 			return <Search placeholder="Location name..." />;
+		case 'tags':
+			return <Search placeholder="Tag name..." />;
 		case 'categories':
 			return <Search placeholder="Category name..." />;
 		default:
@@ -151,7 +153,7 @@ const HeaderIconKind = ({ headerKind, routeParams }: HeaderIconKindProps) => {
 		case 'tag':
 			return (
 				<View
-					style={twStyle('h-[30px] w-[30px] rounded-full', {
+					style={twStyle('h-[24px] w-[24px] rounded-full', {
 						backgroundColor: routeParams.color
 					})}
 				/>

apps/mobile/src/components/layout/Fade.tsx

@@ -1,9 +1,7 @@
-import { useRoute } from '@react-navigation/native';
 import { DimensionValue, Platform } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { ClassInput } from 'twrnc';
 import { tw, twStyle } from '~/lib/tailwind';
-import { useExplorerStore } from '~/stores/explorerStore';
 
 interface Props {
 	children: React.ReactNode; // children of fade
@@ -13,7 +11,6 @@ interface Props {
 	orientation?: 'horizontal' | 'vertical'; // orientation of fade
 	fadeSides?: 'left-right' | 'top-bottom'; // which sides to fade
 	screenFade?: boolean; // if true, the fade will consider the bottom tab bar height
-	noConditions?: boolean; // if true, the fade will be rendered as is
 	bottomFadeStyle?: ClassInput; // tailwind style for bottom fade
 	topFadeStyle?: ClassInput; // tailwind style for top fade
 }
@@ -25,20 +22,15 @@ const Fade = ({
 	height,
 	bottomFadeStyle,
 	topFadeStyle,
-	noConditions = false,
 	screenFade = false,
 	fadeSides = 'left-right',
 	orientation = 'horizontal'
 }: Props) => {
-	const route = useRoute();
-	const { toggleMenu } = useExplorerStore();
 	const bottomTabBarHeight = Platform.OS === 'ios' ? 80 : 60;
 	const gradientStartEndMap = {
 		'left-right': { start: { x: 0, y: 0 }, end: { x: 1, y: 0 } },
 		'top-bottom': { start: { x: 0, y: 1 }, end: { x: 0, y: 0 } }
 	};
-	const menuHeight = 57; // height of the explorer menu
-	const routesWithMenu = ['Location', 'Search', 'Tag']; // routes that are associated with the explorer
 	return (
 		<>
 			<LinearGradient
@@ -46,10 +38,7 @@ const Fade = ({
 					width: orientation === 'vertical' ? height : width,
 					height: orientation === 'vertical' ? width : height,
 					position: 'absolute',
-					top:
-						!noConditions && toggleMenu && routesWithMenu.includes(route.name)
-							? menuHeight
-							: 0,
+					top: 0,
 					alignSelf: 'center',
 					left: fadeSides === 'left-right' ? 0 : undefined,
 					transform: fadeSides === 'left-right' ? undefined : [{ rotate: '180deg' }],

apps/mobile/src/components/layout/ScreenContainer.tsx

@@ -3,8 +3,6 @@ import { Platform, ScrollView, View } from 'react-native';
 import { ClassInput } from 'twrnc/dist/esm/types';
 import { tw, twStyle } from '~/lib/tailwind';
 
-import Fade from './Fade';
-
 interface Props {
 	children: ReactNode;
 	/** If true, the container will be a ScrollView */
@@ -13,16 +11,11 @@ interface Props {
 	/** If true, the bottom tab bar height will be added to the bottom of the container */
 	tabHeight?: boolean;
 	scrollToBottomOnChange?: boolean;
-	/** Styling of both side fades */
-	topFadeStyle?: string;
-	bottomFadeStyle?: string;
 }
 
 const ScreenContainer = ({
 	children,
 	style,
-	topFadeStyle,
-	bottomFadeStyle,
 	scrollview = true,
 	tabHeight = true,
 	scrollToBottomOnChange = false
@@ -31,16 +24,6 @@ const ScreenContainer = ({
 	const bottomTabBarHeight = Platform.OS === 'ios' ? 80 : 60;
 	return scrollview ? (
 		<View style={tw`relative flex-1`}>
-			<Fade
-				topFadeStyle={topFadeStyle}
-				bottomFadeStyle={bottomFadeStyle}
-				screenFade
-				fadeSides="top-bottom"
-				orientation="vertical"
-				color="black"
-				width={30}
-				height="100%"
-			>
 				<ScrollView
 					ref={ref}
 					onContentSizeChange={() => {
@@ -55,20 +38,9 @@ const ScreenContainer = ({
 				>
 					{children}
 				</ScrollView>
-			</Fade>
 		</View>
 	) : (
 		<View style={tw`relative flex-1`}>
-			<Fade
-				topFadeStyle={topFadeStyle}
-				bottomFadeStyle={bottomFadeStyle}
-				screenFade
-				fadeSides="top-bottom"
-				orientation="vertical"
-				color="black"
-				width={30}
-				height="100%"
-			>
 				<View
 					style={twStyle(
 						'flex-1 justify-between gap-10 bg-black py-6',
@@ -78,7 +50,6 @@ const ScreenContainer = ({
 				>
 					{children}
 				</View>
-			</Fade>
 		</View>
 	);
 };

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

@@ -28,7 +28,7 @@ const GridLocation: React.FC<GridLocationProps> = ({ location, modalRef }: GridL
 							)}
 						/>
 					</View>
-					<Pressable hitSlop={24} onPress={() => modalRef.current?.present()}>
+					<Pressable onPress={() => modalRef.current?.present()}>
 						<DotsThreeOutlineVertical
 							weight="fill"
 							size={20}

apps/mobile/src/components/overview/Locations.tsx

@@ -26,7 +26,6 @@ const Locations = () => {
 		<>
 			<OverviewSection title="Locations" count={locations?.length}>
 				<View style={tw`flex-row items-center`}>
-					<Fade height={'100%'} width={30} color="black">
 						<FlatList
 							horizontal
 							data={locations}
@@ -77,7 +76,6 @@ const Locations = () => {
 								</Pressable>
 							)}
 						/>
-					</Fade>
 				</View>
 			</OverviewSection>
 			<ImportModal ref={modalRef} />

apps/mobile/src/components/search/Search.tsx

@@ -18,7 +18,7 @@ export default function Search({ placeholder }: Props) {
 	}, [searchStore]);
 	return (
 		<View
-			style={tw`mt-4 flex h-11 w-full flex-row items-center justify-between rounded-md border border-app-inputborder bg-app-input px-3 shadow-sm`}
+			style={tw`mt-3 h-10 w-full flex-row items-center justify-between rounded-md border border-app-inputborder bg-app-input px-3 shadow-sm`}
 		>
 			<TextInput
 				onChangeText={(text) => searchStore.setSearch(text)}

apps/mobile/src/components/search/filters/FiltersBar.tsx

@@ -47,7 +47,7 @@ const FiltersBar = () => {
 				<Plus weight="bold" size={20} color={tw.color('text-ink-dull')} />
 			</Button>
 			<View style={tw`relative flex-1`}>
-				<Fade noConditions height={'100%'} width={30} color="app-header">
+				<Fade height={'100%'} width={30} color="app-header">
 					<FlatList
 						ref={flatListRef}
 						showsHorizontalScrollIndicator={false}

apps/mobile/src/components/tags/GridTag.tsx

@@ -20,7 +20,7 @@ const GridTag = ({ tag, modalRef }: GridTagProps) => {
 						backgroundColor: tag.color!
 					})}
 				/>
-				<Pressable hitSlop={24} onPress={() => modalRef.current?.present()}>
+				<Pressable onPress={() => modalRef.current?.present()}>
 					<DotsThreeOutlineVertical
 						weight="fill"
 						size={20}

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

@@ -18,14 +18,14 @@ export default function BrowseStack() {
 			<Stack.Screen
 				name="Browse"
 				component={BrowseScreen}
-				options={{ header: () => <Header showDrawer title="Browse" /> }}
+				options={{ header: () => <Header showSearch showDrawer title="Browse" /> }}
 			/>
 			<Stack.Screen
 				name="Location"
 				component={LocationScreen}
 				options={{
 					header: (route) => (
-						<Header route={route} headerKind="location" routeTitle navBack />
+						<Header route={route} showSearch headerKind="location" routeTitle navBack />
 					)
 				}}
 			/>
@@ -33,7 +33,7 @@ export default function BrowseStack() {
 				name="Tags"
 				component={TagsScreen}
 				options={{
-					header: () => <Header navBack title="Tags" />
+					header: () => <Header searchType='tags' navBack title="Tags" />
 				}}
 			/>
 			<Stack.Screen
@@ -47,7 +47,7 @@ export default function BrowseStack() {
 				name="Tag"
 				component={TagScreen}
 				options={{
-					header: (route) => <Header navBack routeTitle route={route} headerKind="tag" />
+					header: (route) => <Header showSearch navBack routeTitle route={route} headerKind="tag" />
 				}}
 			/>
 			<Stack.Screen

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

@@ -13,7 +13,7 @@ export default function NetworkStack() {
 			<Stack.Screen
 				name="Network"
 				component={NetworkScreen}
-				options={{ header: () => <Header showDrawer title="Network" /> }}
+				options={{ header: () => <Header showSearch 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 showDrawer title="Overview" /> }}
+				options={{ header: () => <Header showSearch showDrawer title="Overview" /> }}
 			/>
 			<Stack.Screen
 				name="Categories"

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

@@ -28,7 +28,7 @@ export default function SettingsStack() {
 			<Stack.Screen
 				name="Settings"
 				component={SettingsScreen}
-				options={{ header: () => <Header showDrawer title="Settings" /> }}
+				options={{ header: () => <Header showSearch showDrawer title="Settings" /> }}
 			/>
 			{/* Client */}
 			<Stack.Screen

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

@@ -1,17 +1,18 @@
 import { useNavigation } from '@react-navigation/native';
 import { Plus } from 'phosphor-react-native';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { Pressable, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { useCache, useLibraryQuery, useNodes } from '@sd/client';
 import Empty from '~/components/layout/Empty';
-import Fade from '~/components/layout/Fade';
 import { ModalRef } from '~/components/layout/Modal';
 import ScreenContainer from '~/components/layout/ScreenContainer';
 import CreateTagModal from '~/components/modal/tag/CreateTagModal';
 import { TagItem } from '~/components/tags/TagItem';
 import { tw, twStyle } from '~/lib/tailwind';
 import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack';
+import { useDebounce } from 'use-debounce';
+import { useSearchStore } from '~/stores/searchStore';
 
 interface Props {
 	viewStyle?: 'grid' | 'list';
@@ -21,9 +22,19 @@ export default function TagsScreen({ viewStyle = 'list' }: Props) {
 	const navigation = useNavigation<BrowseStackScreenProps<'Browse'>['navigation']>();
 	const modalRef = useRef<ModalRef>(null);
 
+	const {search} = useSearchStore();
 	const tags = useLibraryQuery(['tags.list']);
 	useNodes(tags.data?.nodes);
 	const tagData = useCache(tags.data?.items);
+	const [debouncedSearch] = useDebounce(search, 200);
+
+	const filteredTags = useMemo(
+		() =>
+			tagData?.filter((location) =>
+				location.name?.toLowerCase().includes(debouncedSearch.toLowerCase())
+			) ?? [],
+		[debouncedSearch, tagData]
+	);
 
 	return (
 		<ScreenContainer scrollview={false} style={tw`relative px-6 py-0`}>
@@ -36,15 +47,8 @@ export default function TagsScreen({ viewStyle = 'list' }: Props) {
 			>
 				<Plus size={20} weight="bold" style={tw`text-ink`} />
 			</Pressable>
-			<Fade
-				fadeSides="top-bottom"
-				orientation="vertical"
-				color="black"
-				width={30}
-				height="100%"
-			>
 				<FlatList
-					data={tagData}
+					data={filteredTags}
 					renderItem={({ item }) => (
 						<TagItem
 							viewStyle={viewStyle}
@@ -76,7 +80,6 @@ export default function TagsScreen({ viewStyle = 'list' }: Props) {
 						tagData.length === 0 && 'h-full items-center justify-center'
 					)}
 				/>
-			</Fade>
 			<CreateTagModal ref={modalRef} />
 		</ScreenContainer>
 	);

apps/mobile/src/screens/search/Filters.tsx

@@ -5,7 +5,7 @@ import SaveAdd from '~/components/search/filters/SaveAdd';
 const FiltersScreen = () => {
 	return (
 		<>
-			<ScreenContainer bottomFadeStyle="bottom-0" tabHeight={false}>
+			<ScreenContainer tabHeight={false}>
 				<FiltersList />
 			</ScreenContainer>
 			<SaveAdd />

apps/mobile/src/screens/settings/Settings.tsx

@@ -129,7 +129,7 @@ function renderSectionHeader({ section }: { section: { title: string } }) {
 		<Text
 			style={twStyle(
 				'mb-3 text-lg font-bold text-ink',
-				section.title === 'Client' ? 'mt-2' : 'mt-5'
+				section.title === 'Client' ? 'mt-0' : 'mt-5'
 			)}
 		>
 			{section.title}
@@ -142,24 +142,24 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
 
 	return (
 		<ScreenContainer tabHeight={false} scrollview={false} style={tw`gap-0 px-6 py-0`}>
-			<SectionList
-				sections={sections(debugState)}
-				contentContainerStyle={tw`h-auto pb-5 pt-3`}
-				renderItem={({ item }) => (
-					<SettingsItem
-						title={item.title}
-						leftIcon={item.icon}
-						onPress={() => navigation.navigate(item.navigateTo as any)}
-						rounded={item.rounded}
-					/>
-				)}
-				renderSectionHeader={renderSectionHeader}
-				ListFooterComponent={<FooterComponent />}
-				showsVerticalScrollIndicator={false}
-				stickySectionHeadersEnabled={false}
-				initialNumToRender={50}
-			/>
-		</ScreenContainer>
+		<SectionList
+			contentContainerStyle={tw`py-6`}
+			sections={sections(debugState)}
+			renderItem={({ item }) => (
+				<SettingsItem
+					title={item.title}
+					leftIcon={item.icon}
+					onPress={() => navigation.navigate(item.navigateTo as any)}
+					rounded={item.rounded}
+				/>
+			)}
+			renderSectionHeader={renderSectionHeader}
+			ListFooterComponent={<FooterComponent />}
+			showsVerticalScrollIndicator={false}
+			stickySectionHeadersEnabled={false}
+			initialNumToRender={50}
+		/>
+	</ScreenContainer>
 	);
 }