[MOB-108] UI adjustments (#2563)

* wip

* wip

* max width on locations in drawer

* remove fade and console log

* lint fix

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

@@ -1,18 +1,18 @@
 import { useDrawerStatus } from '@react-navigation/drawer';
 import { useNavigation } from '@react-navigation/native';
+import { useClientContext } from '@sd/client';
 import { MotiView } from 'moti';
 import { CaretRight, CloudArrowDown, Gear, Lock, Plus } from 'phosphor-react-native';
 import { useEffect, useRef, useState } from 'react';
 import { Alert, Pressable, Text, View } from 'react-native';
-import { useClientContext } from '@sd/client';
 import { tw, twStyle } from '~/lib/tailwind';
 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';
 import ImportModalLibrary from '../modal/ImportLibraryModal';
+import { Divider } from '../primitive/Divider';
 
 const DrawerLibraryManager = () => {
 	const [dropdownClosed, setDropdownClosed] = useState(true);
@@ -24,7 +24,6 @@ const DrawerLibraryManager = () => {
 	}, [isDrawerOpen]);
 
 	const { library: currentLibrary, libraries } = useClientContext();
-
 	const navigation = useNavigation();
 
 	const modalRef = useRef<ModalRef>(null);
@@ -58,7 +57,6 @@ const DrawerLibraryManager = () => {
 				>
 					{/* Libraries */}
 					{libraries.data?.map((library) => {
-						// console.log('library', library);
 						return (
 							<Pressable
 								key={library.uuid}

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

@@ -45,7 +45,7 @@ const DrawerLocationItem: React.FC<DrawerLocationItemProps> = ({
 							)}
 						/>
 					</View>
-					<Text style={twStyle('text-xs font-medium text-ink')} numberOfLines={1}>
+					<Text style={twStyle('max-w-[150px] text-xs font-medium text-ink')} numberOfLines={1}>
 						{location.name ?? ''}
 					</Text>
 				</View>

apps/mobile/src/components/explorer/FileThumb.tsx

@@ -1,16 +1,15 @@
 import { DocumentDirectoryPath } from '@dr.pogodin/react-native-fs';
 import { getIcon } from '@sd/assets/util';
+import {
+	ThumbKey,
+	getExplorerItemData,
+	getItemLocation,
+	isDarkTheme,
+	type ExplorerItem
+} from '@sd/client';
 import { Image } from 'expo-image';
 import { useEffect, useLayoutEffect, useMemo, useState, type PropsWithChildren } from 'react';
 import { View } from 'react-native';
-import {
-	getExplorerItemData,
-	getItemFilePath,
-	getItemLocation,
-	isDarkTheme,
-	ThumbKey,
-	type ExplorerItem
-} from '@sd/client';
 import { flattenThumbnailKey, useExplorerStore } from '~/stores/explorerStore';
 
 import { tw } from '../../lib/tailwind';
@@ -71,7 +70,6 @@ type FileThumbProps = {
 export default function FileThumb({ size = 1, ...props }: FileThumbProps) {
 	const itemData = useExplorerItemData(props.data);
 	const locationData = getItemLocation(props.data);
-	const filePath = getItemFilePath(props.data);
 
 	const [src, setSrc] = useState<null | string>(null);
 	const [thumbType, setThumbType] = useState(ThumbType.Icon);
@@ -132,7 +130,6 @@ export default function FileThumb({ size = 1, ...props }: FileThumbProps) {
 				break;
 		}
 	}, [itemData, thumbType]);
-
 	return (
 		<FileThumbWrapper size={size}>
 			{(() => {

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

@@ -1,12 +1,11 @@
 import { IconTypes } from '@sd/assets/util';
+import { ObjectKind } from '@sd/client';
 import { MotiView } from 'moti';
 import { memo, useCallback, useMemo } from 'react';
 import { FlatList, Pressable, Text, View } from 'react-native';
 import { LinearTransition } from 'react-native-reanimated';
-import { ObjectKind } from '@sd/client';
 import { Icon } from '~/components/icons/Icon';
 import Card from '~/components/layout/Card';
-import Fade from '~/components/layout/Fade';
 import SectionTitle from '~/components/layout/SectionTitle';
 import VirtualizedListWrapper from '~/components/layout/VirtualizedListWrapper';
 import { tw, twStyle } from '~/lib/tailwind';
@@ -40,12 +39,11 @@ const Kind = () => {
 				sub="What kind of objects should be searched?"
 			/>
 			<View>
-				<Fade color="black" width={30} height="100%">
 					<VirtualizedListWrapper horizontal>
 						<FlatList
 							data={kinds}
 							renderItem={({ item }) => <KindFilter data={item} />}
-							contentContainerStyle={tw`pl-6`}
+							contentContainerStyle={tw`px-6`}
 							numColumns={kinds && Math.ceil(Number(kinds.length) / 2)}
 							key={kinds ? 'kindsSearch' : '_'}
 							scrollEnabled={false}
@@ -56,7 +54,6 @@ const Kind = () => {
 							style={tw`flex-row`}
 						/>
 					</VirtualizedListWrapper>
-				</Fade>
 			</View>
 		</MotiView>
 	);

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

@@ -153,7 +153,7 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
 	const debugState = useDebugState();
 
 	return (
-		<ScreenContainer tabHeight={false} scrollview={false} style={tw`gap-0 px-6 py-0`}>
+		<ScreenContainer tabHeight={false} style={tw`gap-0 px-5 py-0`}>
 			<SectionList
 				contentContainerStyle={tw`py-6`}
 				sections={sections(debugState)}
@@ -165,6 +165,7 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
 						rounded={item.rounded}
 					/>
 				)}
+				scrollEnabled={false}
 				renderSectionHeader={renderSectionHeader}
 				ListFooterComponent={<FooterComponent />}
 				showsVerticalScrollIndicator={false}

apps/mobile/src/screens/settings/client/LibrarySettings.tsx

@@ -1,9 +1,8 @@
+import { LibraryConfigWrapped, useBridgeQuery, useLibraryContext } from '@sd/client';
 import { DotsThreeOutlineVertical, Pen, Trash } from 'phosphor-react-native';
 import React, { useEffect, useRef } from 'react';
 import { Animated, FlatList, Pressable, Text, View } from 'react-native';
 import { Swipeable } from 'react-native-gesture-handler';
-import { LibraryConfigWrapped, useBridgeQuery } from '@sd/client';
-import Fade from '~/components/layout/Fade';
 import { ModalRef } from '~/components/layout/Modal';
 import ScreenContainer from '~/components/layout/ScreenContainer';
 import DeleteLibraryModal from '~/components/modal/confirmModals/DeleteLibraryModal';
@@ -14,10 +13,12 @@ import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
 function LibraryItem({
 	library,
 	index,
-	navigation
+	navigation,
+	current
 }: {
 	library: LibraryConfigWrapped;
 	index: number;
+	current: boolean;
 	navigation: SettingsStackScreenProps<'LibrarySettings'>['navigation'];
 }) {
 	const renderRightActions = (
@@ -63,8 +64,15 @@ function LibraryItem({
 		>
 			<View style={tw`flex-row items-center justify-between`}>
 				<View>
+					<View style={tw`flex-row items-center gap-2`}>
 					<Text style={tw`text-md font-semibold text-ink`}>{library.config.name}</Text>
-					<Text style={tw`mt-1 text-xs text-ink-dull`}>{library.uuid}</Text>
+					{current && (
+						<View style={tw`rounded-md bg-accent px-1.5 py-[2px]`}>
+							<Text style={tw`text-xs font-semibold text-white`}>Current</Text>
+						</View>
+					)}
+					</View>
+					<Text style={tw`mt-1.5 text-xs text-ink-dull`}>{library.uuid}</Text>
 				</View>
 				<Pressable onPress={() => swipeRef.current?.openRight()}>
 					<DotsThreeOutlineVertical
@@ -81,6 +89,7 @@ function LibraryItem({
 const LibrarySettingsScreen = ({ navigation }: SettingsStackScreenProps<'LibrarySettings'>) => {
 	const libraryList = useBridgeQuery(['library.list']);
 	const libraries = libraryList.data;
+	const { library } = useLibraryContext();
 
 	useEffect(() => {
 		navigation.setOptions({
@@ -101,22 +110,19 @@ const LibrarySettingsScreen = ({ navigation }: SettingsStackScreenProps<'Library
 
 	return (
 		<ScreenContainer style={tw`justify-start gap-0 px-6 py-0`} scrollview={false}>
-			<Fade
-				fadeSides="top-bottom"
-				orientation="vertical"
-				color="black"
-				width={30}
-				height="100%"
-			>
 				<FlatList
 					data={libraries}
 					contentContainerStyle={tw`py-5`}
 					keyExtractor={(item) => item.uuid}
 					renderItem={({ item, index }) => (
-						<LibraryItem navigation={navigation} library={item} index={index} />
+						<LibraryItem
+						 current={item.uuid === library.uuid}
+						 navigation={navigation}
+						 library={item}
+						 index={index}
+						  />
 					)}
 				/>
-			</Fade>
 		</ScreenContainer>
 	);
 };

apps/mobile/src/screens/settings/info/About.tsx

@@ -1,8 +1,8 @@
+import { useBridgeQuery } from '@sd/client';
 import { Image } from 'expo-image';
 import { Globe } from 'phosphor-react-native';
 import React from 'react';
 import { Linking, Platform, Text, View } from 'react-native';
-import { useBridgeQuery } from '@sd/client';
 import { DiscordIcon, GitHubIcon } from '~/components/icons/Brands';
 import ScreenContainer from '~/components/layout/ScreenContainer';
 import { Button } from '~/components/primitive/Button';
@@ -98,7 +98,7 @@ const AboutScreen = () => {
 				<Image
 					source={{ uri: 'https://i.imgur.com/SwUcWHP.png' }}
 					style={{ height: 200, width: '100%' }}
-					resizeMode="contain"
+					contentFit='contain'
 				/>
 			</View>
 		</ScreenContainer>

apps/mobile/src/screens/settings/library/CloudSettings/Library.tsx

@@ -41,7 +41,7 @@ const Library = ({ cloudLibrary }: LibraryProps) => {
 			</InfoBox>
 			<Button
 				disabled={syncLibrary.isLoading || thisInstance !== undefined}
-				variant={thisInstance ? 'gray' : 'accent'}
+				variant="gray"
 				onPress={() => syncLibrary.mutate(null)}
 				style={tw`mt-2 flex-row gap-1 py-2`}
 			>

apps/mobile/src/screens/settings/library/SyncSettings.tsx

@@ -1,14 +1,14 @@
 import { inferSubscriptionResult } from '@oscartbeaumont-sd/rspc-client';
-import { MotiView } from 'moti';
-import { Circle } from 'phosphor-react-native';
-import React, { useEffect, useState } from 'react';
-import { Text, View } from 'react-native';
 import {
 	Procedures,
 	useLibraryMutation,
 	useLibraryQuery,
 	useLibrarySubscription
 } from '@sd/client';
+import { MotiView } from 'moti';
+import { Circle } from 'phosphor-react-native';
+import React, { useEffect, useState } from 'react';
+import { Text, View } from 'react-native';
 import Card from '~/components/layout/Card';
 import ScreenContainer from '~/components/layout/ScreenContainer';
 import { Button } from '~/components/primitive/Button';