From d68eaa7a41907eedf296213a23d62ea0ee93f1e6 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Thu, 8 Jun 2023 15:53:43 +0500
Subject: [PATCH] mobile: increase compactness of compact mode

---
 .../app/components/list-items/note/index.js   | 369 +++++++++++-------
 .../list-items/selection-wrapper/index.js     |   2 +-
 .../list-items/selection-wrapper/selection.js |  18 +-
 3 files changed, 236 insertions(+), 153 deletions(-)

diff --git a/apps/mobile/app/components/list-items/note/index.js b/apps/mobile/app/components/list-items/note/index.js
index 328c11a7c..9f0818da3 100644
--- a/apps/mobile/app/components/list-items/note/index.js
+++ b/apps/mobile/app/components/list-items/note/index.js
@@ -178,16 +178,29 @@ const NoteItem = ({
           </View>
         ) : null}
 
-        <Heading
-          numberOfLines={1}
-          color={COLORS_NOTE[item.color?.toLowerCase()] || colors.heading}
-          style={{
-            flexWrap: "wrap"
-          }}
-          size={SIZE.md}
-        >
-          {item.title}
-        </Heading>
+        {compactMode ? (
+          <Paragraph
+            numberOfLines={1}
+            color={COLORS_NOTE[item.color?.toLowerCase()] || colors.heading}
+            style={{
+              flexWrap: "wrap"
+            }}
+            size={SIZE.sm}
+          >
+            {item.title}
+          </Paragraph>
+        ) : (
+          <Heading
+            numberOfLines={1}
+            color={COLORS_NOTE[item.color?.toLowerCase()] || colors.heading}
+            style={{
+              flexWrap: "wrap"
+            }}
+            size={SIZE.md}
+          >
+            {item.title}
+          </Heading>
+        )}
 
         {item.headline && !compactMode ? (
           <Paragraph
@@ -202,161 +215,219 @@ const NoteItem = ({
           </Paragraph>
         ) : null}
 
-        <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "flex-start",
-            alignItems: "center",
-            width: "100%",
-            marginTop: 5,
-            height: SIZE.md + 2
-          }}
-        >
-          {!isTrash ? (
-            <>
-              {item.conflicted ? (
-                <Icon
-                  name="alert-circle"
+        {compactMode ? null : (
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "flex-start",
+              alignItems: "center",
+              width: "100%",
+              marginTop: 5,
+              height: SIZE.md + 2
+            }}
+          >
+            {!isTrash ? (
+              <>
+                {item.conflicted ? (
+                  <Icon
+                    name="alert-circle"
+                    style={{
+                      marginRight: 6
+                    }}
+                    size={SIZE.sm}
+                    color={colors.red}
+                  />
+                ) : null}
+                <TimeSince
                   style={{
+                    fontSize: SIZE.xs,
+                    color: colors.icon,
                     marginRight: 6
                   }}
-                  size={SIZE.sm}
-                  color={colors.red}
+                  time={item[dateBy]}
+                  updateFrequency={
+                    Date.now() - item[dateBy] < 60000 ? 2000 : 60000
+                  }
                 />
-              ) : null}
-              <TimeSince
-                style={{
-                  fontSize: SIZE.xs,
-                  color: colors.icon,
-                  marginRight: 6
-                }}
-                time={item[dateBy]}
-                updateFrequency={
-                  Date.now() - item[dateBy] < 60000 ? 2000 : 60000
-                }
-              />
 
-              {attachmentCount > 0 ? (
-                <View
+                {attachmentCount > 0 ? (
+                  <View
+                    style={{
+                      flexDirection: "row",
+                      alignItems: "center",
+                      marginRight: 6
+                    }}
+                  >
+                    <Icon
+                      name="attachment"
+                      size={SIZE.md}
+                      color={colors.icon}
+                    />
+                    <Paragraph color={colors.icon} size={SIZE.xs}>
+                      {attachmentCount}
+                    </Paragraph>
+                  </View>
+                ) : null}
+
+                {item.pinned ? (
+                  <Icon
+                    testID="icon-pinned"
+                    name="pin-outline"
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
+                    color={
+                      COLORS_NOTE[item.color?.toLowerCase()] || colors.accent
+                    }
+                  />
+                ) : null}
+
+                {item.locked ? (
+                  <Icon
+                    name="lock"
+                    testID="note-locked-icon"
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
+                    color={colors.icon}
+                  />
+                ) : null}
+
+                {item.favorite ? (
+                  <Icon
+                    testID="icon-star"
+                    name="star"
+                    size={SIZE.md}
+                    style={{
+                      marginRight: 6
+                    }}
+                    color="orange"
+                  />
+                ) : null}
+
+                {!isTrash && !compactMode && tags
+                  ? tags.map((item) =>
+                      item.id ? (
+                        <Button
+                          title={"#" + item.alias}
+                          key={item.id}
+                          height={23}
+                          type="gray"
+                          textStyle={{
+                            textDecorationLine: "underline"
+                          }}
+                          hitSlop={{ top: 8, bottom: 12, left: 0, right: 0 }}
+                          fontSize={SIZE.xs}
+                          style={{
+                            borderRadius: 5,
+                            paddingHorizontal: 6,
+                            marginRight: 4,
+                            zIndex: 10,
+                            maxWidth: tags.length > 1 ? 130 : null
+                          }}
+                          onPress={() => navigateToTag(item)}
+                        />
+                      ) : null
+                    )
+                  : null}
+              </>
+            ) : (
+              <>
+                <Paragraph
+                  color={colors.icon}
+                  size={SIZE.xs}
                   style={{
-                    flexDirection: "row",
-                    alignItems: "center",
                     marginRight: 6
                   }}
                 >
-                  <Icon name="attachment" size={SIZE.md} color={colors.icon} />
-                  <Paragraph color={colors.icon} size={SIZE.xs}>
-                    {attachmentCount}
-                  </Paragraph>
-                </View>
-              ) : null}
+                  Deleted on{" "}
+                  {item && item.dateDeleted
+                    ? new Date(item.dateDeleted).toISOString().slice(0, 10)
+                    : null}
+                </Paragraph>
 
-              {item.pinned ? (
-                <Icon
-                  testID="icon-pinned"
-                  name="pin-outline"
-                  size={SIZE.sm}
+                <Paragraph
+                  color={colors.accent}
+                  size={SIZE.xs}
                   style={{
                     marginRight: 6
                   }}
-                  color={
-                    COLORS_NOTE[item.color?.toLowerCase()] || colors.accent
-                  }
-                />
-              ) : null}
-
-              {item.locked ? (
-                <Icon
-                  name="lock"
-                  testID="note-locked-icon"
-                  size={SIZE.sm}
-                  style={{
-                    marginRight: 6
-                  }}
-                  color={colors.icon}
-                />
-              ) : null}
-
-              {item.favorite ? (
-                <Icon
-                  testID="icon-star"
-                  name="star"
-                  size={SIZE.md}
-                  style={{
-                    marginRight: 6
-                  }}
-                  color="orange"
-                />
-              ) : null}
-
-              {!isTrash && !compactMode && tags
-                ? tags.map((item) =>
-                    item.id ? (
-                      <Button
-                        title={"#" + item.alias}
-                        key={item.id}
-                        height={23}
-                        type="gray"
-                        textStyle={{
-                          textDecorationLine: "underline"
-                        }}
-                        hitSlop={{ top: 8, bottom: 12, left: 0, right: 0 }}
-                        fontSize={SIZE.xs}
-                        style={{
-                          borderRadius: 5,
-                          paddingHorizontal: 6,
-                          marginRight: 4,
-                          zIndex: 10,
-                          maxWidth: tags.length > 1 ? 130 : null
-                        }}
-                        onPress={() => navigateToTag(item)}
-                      />
-                    ) : null
-                  )
-                : null}
-            </>
-          ) : (
-            <>
-              <Paragraph
-                color={colors.icon}
-                size={SIZE.xs}
-                style={{
-                  marginRight: 6
-                }}
-              >
-                Deleted on{" "}
-                {item && item.dateDeleted
-                  ? new Date(item.dateDeleted).toISOString().slice(0, 10)
-                  : null}
-              </Paragraph>
-
-              <Paragraph
-                color={colors.accent}
-                size={SIZE.xs}
-                style={{
-                  marginRight: 6
-                }}
-              >
-                {item.itemType[0].toUpperCase() + item.itemType.slice(1)}
-              </Paragraph>
-            </>
-          )}
-        </View>
+                >
+                  {item.itemType[0].toUpperCase() + item.itemType.slice(1)}
+                </Paragraph>
+              </>
+            )}
+          </View>
+        )}
       </View>
-      <IconButton
-        testID={notesnook.listitem.menu}
-        color={colors.pri}
-        name="dots-horizontal"
-        size={SIZE.xl}
-        onPress={() => !noOpen && showActionSheet(item, isTrash)}
-        customStyle={{
-          justifyContent: "center",
-          height: 35,
-          width: 35,
-          borderRadius: 100,
+      <View
+        style={{
+          flexDirection: "row",
           alignItems: "center"
         }}
-      />
+      >
+        {item.conflicted ? (
+          <Icon
+            name="alert-circle"
+            style={{
+              marginRight: 6
+            }}
+            size={SIZE.sm}
+            color={colors.red}
+          />
+        ) : null}
+
+        {item.locked ? (
+          <Icon
+            name="lock"
+            testID="note-locked-icon"
+            size={SIZE.sm}
+            style={{
+              marginRight: 6
+            }}
+            color={colors.icon}
+          />
+        ) : null}
+
+        {item.favorite ? (
+          <Icon
+            testID="icon-star"
+            name="star-outline"
+            size={SIZE.md}
+            style={{
+              marginRight: 6
+            }}
+            color="orange"
+          />
+        ) : null}
+
+        <TimeSince
+          style={{
+            fontSize: SIZE.xs,
+            color: colors.icon,
+            marginRight: 6
+          }}
+          time={item[dateBy]}
+          updateFrequency={Date.now() - item[dateBy] < 60000 ? 2000 : 60000}
+        />
+
+        <IconButton
+          testID={notesnook.listitem.menu}
+          color={colors.pri}
+          name="dots-horizontal"
+          size={SIZE.xl}
+          onPress={() => !noOpen && showActionSheet(item, isTrash)}
+          customStyle={{
+            justifyContent: "center",
+            height: 35,
+            width: 35,
+            borderRadius: 100,
+            alignItems: "center"
+          }}
+        />
+      </View>
     </>
   );
 };
diff --git a/apps/mobile/app/components/list-items/selection-wrapper/index.js b/apps/mobile/app/components/list-items/selection-wrapper/index.js
index 978254655..60fb7aa7a 100644
--- a/apps/mobile/app/components/list-items/selection-wrapper/index.js
+++ b/apps/mobile/app/components/list-items/selection-wrapper/index.js
@@ -77,7 +77,7 @@ const SelectionWrapper = ({
         width: "100%",
         overflow: "hidden",
         paddingHorizontal: 12,
-        paddingVertical: compactMode ? 8 : 12,
+        paddingVertical: compactMode ? 4 : 12,
         borderRadius: isSheet ? 10 : 0,
         marginBottom: isSheet ? 12 : undefined
       }}
diff --git a/apps/mobile/app/components/list-items/selection-wrapper/selection.js b/apps/mobile/app/components/list-items/selection-wrapper/selection.js
index 6328cd1ad..088865ef5 100644
--- a/apps/mobile/app/components/list-items/selection-wrapper/selection.js
+++ b/apps/mobile/app/components/list-items/selection-wrapper/selection.js
@@ -23,6 +23,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { SIZE } from "../../../utils/size";
+import { useSettingStore } from "../../../stores/use-setting-store";
 
 export const SelectionIcon = ({ item }) => {
   const colors = useThemeStore((state) => state.colors);
@@ -32,6 +33,17 @@ export const SelectionIcon = ({ item }) => {
     (state) => state.selectedItemsList
   );
   const [selected, setSelected] = useState(false);
+  const notebooksListMode = useSettingStore(
+    (state) => state.settings.notebooksListMode
+  );
+  const notesListMode = useSettingStore(
+    (state) => state.settings.notesListMode
+  );
+  const listMode = item.type === "notebook" ? notebooksListMode : notesListMode;
+
+  const compactMode =
+    (item.type === "notebook" || item.type === "note") &&
+    listMode === "compact";
 
   useEffect(() => {
     if (selectionMode) {
@@ -54,8 +66,8 @@ export const SelectionIcon = ({ item }) => {
   return selectionMode ? (
     <View
       style={{
-        width: 40,
-        height: 40,
+        width: compactMode ? 30 : 40,
+        height: compactMode ? 30 : 40,
         justifyContent: "center",
         alignItems: "center",
         marginRight: 10,
@@ -67,7 +79,7 @@ export const SelectionIcon = ({ item }) => {
     >
       {selected ? (
         <Icon
-          size={SIZE.xl}
+          size={compactMode ? SIZE.xl - 2 : SIZE.xl}
           color={selected ? colors.accent : colors.icon}
           name={"check"}
         />