[MOB-59] Empty UI for locations and tags screen (spacedriveapp#2110)

Empty UI for locations and tags screen
Rocky43007 · Feb 20, 2024 · 84dadff · 84dadff
1 parent 9fc38d8
commit 84dadff
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 13 deletions.
diff --git a/apps/mobile/src/components/browse/BrowseTags.tsx b/apps/mobile/src/components/browse/BrowseTags.tsx
@@ -76,7 +76,7 @@ export const TagItem = ({
 		return (
 			<Animated.View
 				style={[
-					tw`ml-5 flex flex-row items-center`,
+					tw`ml-0 flex flex-row items-center`,
 					{ transform: [{ translateX: translate }] }
 				]}
 			>

diff --git a/apps/mobile/src/screens/Locations.tsx b/apps/mobile/src/screens/Locations.tsx
@@ -14,6 +14,7 @@ import {
 	useOnlineLocations
 } from '@sd/client';
 import FolderIcon from '~/components/icons/FolderIcon';
+import { Icon } from '~/components/icons/Icon';
 import Fade from '~/components/layout/Fade';
 import { ModalRef } from '~/components/layout/Modal';
 import ScreenContainer from '~/components/layout/ScreenContainer';
@@ -51,13 +52,14 @@ export const Locations = ({ redirectToLocationSettings }: Props) => {
 	return (
 		<ScreenContainer scrollview={false} style={tw`relative px-7 py-0`}>
 			<Pressable
-				style={tw`absolute bottom-7 right-7 z-10 flex h-12 w-12 items-center justify-center rounded-full bg-accent`}
+				style={tw`absolute bottom-7 right-7 z-10 h-12 w-12 items-center justify-center rounded-full bg-accent`}
 				onPress={() => {
 					modalRef.current?.present();
 				}}
 			>
 				<Plus size={20} weight="bold" style={tw`text-ink`} />
 			</Pressable>
+
 			<Fade
 				fadeSides="top-bottom"
 				orientation="vertical"
@@ -67,10 +69,22 @@ export const Locations = ({ redirectToLocationSettings }: Props) => {
 			>
 				<FlatList
 					data={filteredLocations}
-					contentContainerStyle={tw`py-5`}
+					contentContainerStyle={twStyle(
+						`py-5`,
+						filteredLocations.length === 0 && 'h-full items-center justify-center'
+					)}
 					keyExtractor={(location) => location.id.toString()}
 					ItemSeparatorComponent={() => <View style={tw`h-2`} />}
 					showsVerticalScrollIndicator={false}
+					scrollEnabled={filteredLocations.length > 0}
+					ListEmptyComponent={() => (
+						<View style={tw`h-auto w-[85.5vw] flex-col items-center justify-center`}>
+							<Icon name="Folder" size={90} />
+							<Text style={tw`text-center text-lg font-medium text-ink-dull`}>
+								You have no locations
+							</Text>
+						</View>
+					)}
 					renderItem={({ item }) => (
 						<LocationItem
 							navigation={navigation}
@@ -134,7 +148,7 @@ export const LocationItem = ({
 		return (
 			<Animated.View
 				style={[
-					tw`ml-5 mr-3 flex flex-row items-center gap-2`,
+					tw`mr-3 flex flex-row items-center gap-2`,
 					{ transform: [{ translateX: translate }] }
 				]}
 			>

diff --git a/apps/mobile/src/screens/Tags.tsx b/apps/mobile/src/screens/Tags.tsx
@@ -1,10 +1,11 @@
 import { useNavigation } from '@react-navigation/native';
 import { Plus } from 'phosphor-react-native';
 import { useRef } from 'react';
-import { Pressable, View } from 'react-native';
+import { Pressable, Text, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { useCache, useLibraryQuery, useNodes } from '@sd/client';
 import { TagItem } from '~/components/browse/BrowseTags';
+import { Icon } from '~/components/icons/Icon';
 import Fade from '~/components/layout/Fade';
 import { ModalRef } from '~/components/layout/Modal';
 import ScreenContainer from '~/components/layout/ScreenContainer';
@@ -33,6 +34,7 @@ export default function Tags({ viewStyle = 'list' }: Props) {
 			>
 				<Plus size={20} weight="bold" style={tw`text-ink`} />
 			</Pressable>
+
 			<Fade
 				fadeSides="top-bottom"
 				orientation="vertical"
@@ -55,13 +57,24 @@ export default function Tags({ viewStyle = 'list' }: Props) {
 							}}
 						/>
 					)}
+					ListEmptyComponent={() => (
+						<View style={tw`h-auto w-[85.5vw] flex-col items-center justify-center`}>
+							<Icon name="Tags" size={90} />
+							<Text style={tw`mt-2 text-center text-lg font-medium text-ink-dull`}>
+								You have no tags
+							</Text>
+						</View>
+					)}
 					numColumns={viewStyle === 'grid' ? 3 : 1}
 					columnWrapperStyle={viewStyle === 'grid' && tw`justify-between`}
 					horizontal={false}
 					keyExtractor={(item) => item.id.toString()}
 					showsHorizontalScrollIndicator={false}
 					ItemSeparatorComponent={() => <View style={tw`h-2.5`} />}
-					contentContainerStyle={tw`py-5`}
+					contentContainerStyle={twStyle(
+						`py-5`,
+						tagData.length === 0 && 'h-full items-center justify-center'
+					)}
 				/>
 			</Fade>
 			<CreateTagModal ref={modalRef} />

diff --git a/apps/mobile/src/screens/settings/library/TagsSettings.tsx b/apps/mobile/src/screens/settings/library/TagsSettings.tsx
@@ -1,16 +1,9 @@
-import { useRef } from 'react';
-import { ModalRef } from '~/components/layout/Modal';
-import CreateTagModal from '~/components/modal/tag/CreateTagModal';
 import Tags from '~/screens/Tags';
 
 const TagsSettingsScreen = () => {
-	const modalRef = useRef<ModalRef>(null);
 
 	return (
-		<>
 			<Tags viewStyle="list" />
-			<CreateTagModal ref={modalRef} />
-		</>
 	);
 };