From f708eacdc3c2e2f236ae41debab6e0221fb4a4fe Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Mon, 4 Mar 2024 11:44:25 +0500
Subject: [PATCH] mobile: fix mobile sheet ui

---
 .../app/components/properties/color-tags.tsx  |  6 ++-
 .../mobile/app/components/properties/index.js |  1 +
 .../mobile/app/components/properties/items.js | 45 ++++++++++---------
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/apps/mobile/app/components/properties/color-tags.tsx b/apps/mobile/app/components/properties/color-tags.tsx
index e7c1ce0e0..54d6e2024 100644
--- a/apps/mobile/app/components/properties/color-tags.tsx
+++ b/apps/mobile/app/components/properties/color-tags.tsx
@@ -21,7 +21,7 @@ import { Color, Note } from "@notesnook/core/dist/types";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useState } from "react";
 import { View } from "react-native";
-import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
+import { FlashList } from "@shopify/flash-list";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
 import { db } from "../../common/database";
@@ -122,7 +122,8 @@ export const ColorTags = ({ item }: { item: Note }) => {
         style={{
           flexGrow: isTablet ? undefined : 1,
           flexDirection: "row",
-          marginLeft: 5
+          marginLeft: 5,
+          flexShrink: 2
         }}
       >
         <FlashList
@@ -130,6 +131,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
           estimatedItemSize={30}
           horizontal
           extraData={updater}
+          bounces={false}
           renderItem={renderItem}
           showsHorizontalScrollIndicator={false}
           ListFooterComponent={
diff --git a/apps/mobile/app/components/properties/index.js b/apps/mobile/app/components/properties/index.js
index c799e4145..a7f4cddb6 100644
--- a/apps/mobile/app/components/properties/index.js
+++ b/apps/mobile/app/components/properties/index.js
@@ -73,6 +73,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
         borderBottomLeftRadius: DDS.isLargeTablet() ? 10 : 1,
         maxHeight: "100%"
       }}
+      nestedScrollEnabled
       data={[0]}
       keyExtractor={() => "properties-scroll-item"}
       renderItem={() => (
diff --git a/apps/mobile/app/components/properties/items.js b/apps/mobile/app/components/properties/items.js
index 7b063a4e2..a4d544b6d 100644
--- a/apps/mobile/app/components/properties/items.js
+++ b/apps/mobile/app/components/properties/items.js
@@ -17,13 +17,13 @@ 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 { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { Dimensions, FlatList, ScrollView, View } from "react-native";
+import { Dimensions, ScrollView, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useActions } from "../../hooks/use-actions";
 import { DDS } from "../../services/device-detection";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { Pressable } from "../ui/pressable";
@@ -131,9 +131,8 @@ export const Items = ({ item, buttons, close }) => {
           width: topBarItemWidth
         }}
       >
-        <Pressable
+        <View
           onPress={item.func}
-          type={item.on ? "shade" : "plain"}
           style={{
             height: topBarItemWidth,
             width: topBarItemWidth,
@@ -157,7 +156,7 @@ export const Items = ({ item, buttons, close }) => {
                 : colors.secondary.icon
             }
           />
-        </Pressable>
+        </View>
 
         <Paragraph
           textBreakStrategy="simple"
@@ -179,10 +178,6 @@ export const Items = ({ item, buttons, close }) => {
     "lock-unlock"
   ];
 
-  if (!shouldShrink) {
-    topBarItemsList.push("publish");
-  }
-
   const topBarItems = data
     .filter((item) => topBarItemsList.indexOf(item.id) > -1)
     .sort((a, b) =>
@@ -202,6 +197,12 @@ export const Items = ({ item, buttons, close }) => {
     "trash"
   ];
 
+  if (!shouldShrink) {
+    topBarItemsList.push("publish");
+  } else {
+    bottomBarItemsList.splice(4, 0, "publish");
+  }
+
   const bottomGridItems = data
     .filter((item) => bottomBarItemsList.indexOf(item.id) > -1)
     .sort((a, b) =>
@@ -210,8 +211,13 @@ export const Items = ({ item, buttons, close }) => {
         : -1
     );
 
-  const topBarItemWidth =
+  let topBarItemWidth =
     (width - (topBarItems.length * 10 + 14)) / topBarItems.length;
+  topBarItemWidth;
+
+  if (topBarItemWidth < 55) {
+    topBarItemWidth = 55;
+  }
 
   return item.type === "note" ? (
     <>
@@ -225,23 +231,18 @@ export const Items = ({ item, buttons, close }) => {
         {topBarItems.map(renderTopBarItem)}
       </ScrollView>
 
-      <FlatList
-        data={bottomGridItems}
-        keyExtractor={(item) => item.title}
-        key={columnItemsCount + "key"}
-        numColumns={columnItemsCount}
+      <View
         style={{
+          flexDirection: "row",
+          flexWrap: "wrap",
+          alignContent: "flex-start",
           marginTop: item.type !== "note" ? 10 : 0,
           paddingTop: 10,
           marginLeft: 6
         }}
-        contentContainerStyle={{
-          alignSelf: "center",
-          width: buttons.length < 5 ? "100%" : null,
-          paddingLeft: buttons.length < 5 ? 10 : 0
-        }}
-        renderItem={_renderRowItem}
-      />
+      >
+        {bottomGridItems.map((item) => _renderRowItem({ item }))}
+      </View>
     </>
   ) : (
     <View data={data}>{data.map(renderColumnItem)}</View>