mobile: improve topics-sheet ux

apps/mobile/app/components/list/index.js

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { RefreshControl, View } from "react-native";
 import { FlashList } from "@shopify/flash-list";
 import Animated, { FadeInDown } from "react-native-reanimated";
@@ -154,6 +154,14 @@ const List = ({
     [screen]
   );
 
+  useEffect(() => {
+    eSendEvent(eScrollEvent, {
+      y: 0,
+      screen
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   let styles = {
     width: "100%",
     minHeight: 1,

apps/mobile/app/components/sheets/topic-sheet/index.tsx

@@ -25,13 +25,7 @@ import React, {
   useRef,
   useState
 } from "react";
-import {
+import { Animated, Platform, RefreshControl, View } from "react-native";
-  Animated,
-  Dimensions,
-  View,
-  RefreshControl,
-  Platform
-} from "react-native";
 import ActionSheet, {
   ActionSheetRef,
   FlatList
@@ -59,16 +53,16 @@ import {
 import { normalize, SIZE } from "../../../utils/size";
 import { GroupHeader, NotebookType, TopicType } from "../../../utils/types";
 
+import { groupArray } from "@notesnook/core/utils/grouping";
+import Config from "react-native-config";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { notesnook } from "../../../../e2e/test.ids";
 import { openEditor } from "../../../screens/notes/common";
 import { getTotalNotes, history } from "../../../utils";
-import { Properties } from "../../properties";
 import { deleteItems } from "../../../utils/functions";
 import { presentDialog } from "../../dialog/functions";
-import Config from "react-native-config";
+import { Properties } from "../../properties";
-import { notesnook } from "../../../../e2e/test.ids";
 import Sort from "../sort";
-import { groupArray } from "@notesnook/core/utils/grouping";
 
 export const TopicsSheet = () => {
   const currentScreen = useNavigationStore((state) => state.currentScreen);
@@ -94,8 +88,8 @@ export const TopicsSheet = () => {
   );
   const [animations] = useState({
     translate: new Animated.Value(0),
-    display: new Animated.Value(-5000),
+    display: new Animated.Value(0),
-    opacity: new Animated.Value(0)
+    opacity: new Animated.Value(1)
   });
   const [groupOptions, setGroupOptions] = useState(
     db.settings?.getGroupOptions("topics")
@@ -187,16 +181,14 @@ export const TopicsSheet = () => {
     if (canShow) {
       const isTopic = currentScreen.name === "TopicNotes";
       const id = isTopic ? currentScreen?.notebookId : currentScreen?.id;
-      if (!ref.current?.isOpen()) {
-        animations.display.setValue(5000);
-        animations.opacity.setValue(0);
-      }
       if (id) {
         onRequestUpdate({
           item: db.notebooks?.notebook(id)?.data
         } as any);
       }
-      ref.current?.show();
+      setTimeout(() => {
+        ref.current?.show();
+      }, 1);
     } else {
       ref.current?.hide();
     }
@@ -215,7 +207,7 @@ export const TopicsSheet = () => {
       ref={ref}
       isModal={false}
       containerStyle={{
-        maxHeight: 400,
+        maxHeight: 300,
         borderTopRightRadius: 15,
         borderTopLeftRadius: 15,
         backgroundColor: colors.bg,
@@ -235,21 +227,11 @@ export const TopicsSheet = () => {
           ? [100]
           : [Platform.OS === "ios" ? 25 : 20, 100]
       }
-      initialSnapIndex={0}
+      initialSnapIndex={Config.isTesting === "true" ? 0 : 1}
       backgroundInteractionEnabled
-      onChange={(position, height) => {
+      onChange={(position) => {
+        if (position === 0) return;
         animations.translate.setValue(position - 60);
-        const h = Dimensions.get("window").height;
-        const minPos = h - height;
-        if (position - 100 < minPos || !canShow) {
-          animations.display.setValue(5000);
-          animations.opacity.setValue(0);
-        } else {
-          animations.display.setValue(0);
-          setTimeout(() => {
-            animations.opacity.setValue(1);
-          }, 300);
-        }
       }}
       gestureEnabled
       ExtraOverlayComponent={
@@ -258,7 +240,6 @@ export const TopicsSheet = () => {
             top: animations.translate,
             position: "absolute",
             right: 12,
-            opacity: animations.opacity,
             transform: [
               {
                 translateY: animations.display
@@ -292,8 +273,8 @@ export const TopicsSheet = () => {
     >
       <View
         style={{
-          maxHeight: 400,
+          maxHeight: 300,
-          height: 400,
+          height: 300,
           width: "100%"
         }}
       >

apps/mobile/app/screens/notes/index.tsx

@@ -280,7 +280,8 @@ const NotesPage = ({
         placeholderData={placeholderData}
       />
 
-      {notes?.length > 0 || (isFocused && !isMonograph) ? (
+      {notes?.length > 0 ||
+      (isFocused && !isMonograph && route.name !== "TopicNotes") ? (
         <FloatingButton title="Create a note" onPress={onPressFloatingButton} />
       ) : null}
     </DelayLayout>