[MOB-97] Fade select tags and empty location state (#2496)

* fade select tags and empty location state

* smaller tags

* smaller tags  in filters and add tags modal

apps/mobile/src/components/modal/AddTagModal.tsx

@@ -1,11 +1,12 @@
 import { Tag, getItemObject, useLibraryMutation, useLibraryQuery, useRspcContext } from "@sd/client";
 import { CaretLeft, Plus } from "phosphor-react-native";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { FlatList, Pressable, Text, View } from "react-native";
+import { FlatList, NativeScrollEvent, Pressable, Text, View } from "react-native";
 import useForwardedRef from "~/hooks/useForwardedRef";
 import { tw, twStyle } from "~/lib/tailwind";
 import { useActionsModalStore } from "~/stores/modalStore";
 import Card from "../layout/Card";
+import Fade from "../layout/Fade";
 import { Modal, ModalRef } from "../layout/Modal";
 import { Button } from "../primitive/Button";
 import CreateTagModal from "./tag/CreateTagModal";
@@ -20,6 +21,8 @@ const AddTagModal = forwardRef<ModalRef, unknown>((_, ref) => {
 
  const modalRef = useForwardedRef(ref);
  const newTagRef = useRef<ModalRef>(null);
+ const [startedScrolling, setStartedScrolling] = useState(false);
+ const [reachedBottom, setReachedBottom] = useState(true); // needs to be set to true for initial rendering fade to be correct
 
  const rspc = useRspcContext();
  const tagsQuery = useLibraryQuery(['tags.list']);
@@ -98,6 +101,15 @@ const AddTagModal = forwardRef<ModalRef, unknown>((_, ref) => {
  );
  }
 
+ // Fade the tags when scrolling
+ const fadeScroll = ({ layoutMeasurement, contentOffset, contentSize }: NativeScrollEvent) => {
+ const isScrolling = contentOffset.y > 0;
+ setStartedScrolling(isScrolling);
+
+ const hasReachedBottom = layoutMeasurement.height + contentOffset.y >= contentSize.height;
+ setReachedBottom(hasReachedBottom);
+ }
+
  return (
  <>
  <Modal
@@ -115,18 +127,37 @@ const AddTagModal = forwardRef<ModalRef, unknown>((_, ref) => {
  >
  <CaretLeft color={tw.color('ink')} size={16} weight="bold" />
  </Pressable>
+ <View onLayout={(e) => {
+ if (e.nativeEvent.layout.height >= 80) {
+ setReachedBottom(false);
+ } else {
+ setReachedBottom(true);
+ }
+ }} style={twStyle(`relative mt-4 h-[70%]`)}>
+ <Fade
+ fadeSides="top-bottom"
+ orientation="vertical"
+ color="bg-app-modal"
+ width={20}
+ topFadeStyle={twStyle(startedScrolling ? 'mt-0 h-6' : 'h-0')}
+ bottomFadeStyle={twStyle(reachedBottom ? 'h-0' : 'h-6')}
+ height="100%"
+ >
  <FlatList
  data={tagsData}
  numColumns={3}
+ onScroll={(e) => fadeScroll(e.nativeEvent)}
  extraData={selectedTags}
  key={tagsData ? 'tags' : '_'}
  keyExtractor={(item) => item.id.toString()}
- contentContainerStyle={tw`mx-auto mt-4 p-4 pb-10`}
+ contentContainerStyle={tw`mx-auto p-4 pb-6`}
  ItemSeparatorComponent={() => <View style={tw`h-2`} />}
  renderItem={({ item }) => (
  <TagItem isSelected={() => isSelected(item.id)} select={() => selectTag(item.id)} tag={item} />
  )}
  />
+ </Fade>
+ </View>
  <View style={tw`flex-row gap-2 px-5`}>
  <Button
  onPress={() => newTagRef.current?.present()}
@@ -164,7 +195,7 @@ const TagItem = ({tag, select, isSelected}: Props) => {
  })}
  >
  <View
- style={twStyle(`h-4 w-4 rounded-full`, {
+ style={twStyle(`h-3.5 w-3.5 rounded-full`, {
  backgroundColor: tag.color!
  })}
  />

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

@@ -179,16 +179,16 @@ const ExtensionView = ({ extensions }: { extensions: string[] }) => (
 );
 
 const TagView = ({ tags }: { tags: TagItem[] }) => (
- <>
+ <View style={tw`mx-auto flex-row items-center justify-center`}>
  {tags.map((tag) => (
  <View
  key={tag.id}
- style={twStyle(`h-5 w-5 rounded-full`, {
- backgroundColor: tag.color
+ style={twStyle(`h-4.5 w-4.5 relative rounded-full border-2 border-app-card`, {
+ backgroundColor: tag.color,
  })}
  />
  ))}
- </>
+ </View>
 );
 
 const LocationView = ({ locations }: { locations: FilterItemType[] }) => (

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

@@ -76,7 +76,7 @@ const TagFilter = memo(({ tag }: Props) => {
  })}
  >
  <View
- style={twStyle(`h-5 w-5 rounded-full`, {
+ style={twStyle(`h-3.5 w-3.5 rounded-full`, {
  backgroundColor: tag.color!
  })}
  />

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

@@ -1,7 +1,9 @@
 import { useLibraryQuery, usePathsExplorerQuery } from '@sd/client';
 import { useEffect, useMemo } from 'react';
 import Explorer from '~/components/explorer/Explorer';
+import Empty from '~/components/layout/Empty';
 import { useSortBy } from '~/hooks/useSortBy';
+import { tw } from '~/lib/tailwind';
 import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack';
 import { getExplorerStore } from '~/stores/explorerStore';
 
@@ -62,5 +64,15 @@ export default function LocationScreen({ navigation, route }: BrowseStackScreenP
  getExplorerStore().path = path ?? '';
  }, [id, path]);
 
- return <Explorer {...paths} />;
+ return <Explorer
+ isEmpty={paths.count === 0}
+ emptyComponent={<Empty
+ includeHeaderHeight
+ icon={'FolderNoSpace'}
+ style={tw`flex-1 items-center justify-center border-0`}
+ textSize="text-md"
+ iconSize={100}
+ description={'No files found'}
+ />}
+ {...paths} />
 }