mobile: minor fixes

2026-09-01 19:49:54 +02:00 · 2024-02-07 11:00:24 +05:00
parent 248f692c2b
commit 89b6030bc3
10 changed files with 215 additions and 138 deletions
--- a/apps/mobile/app/components/dialogs/color-picker/index.tsx
+++ b/apps/mobile/app/components/dialogs/color-picker/index.tsx
@@ -16,23 +16,24 @@ GNU General Public License for more details.
 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 { isThemeColor, useThemeColors } from "@notesnook/theme";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useRef, useState } from "react";
 import { TextInput, View } from "react-native";
-import { FlashList } from "react-native-actions-sheet";
+import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { db } from "../../../common/database";
+import { ToastManager } from "../../../services/event-manager";
+import { useMenuStore } from "../../../stores/use-menu-store";
+import { useRelationStore } from "../../../stores/use-relation-store";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import { SIZE } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogContainer from "../../dialog/dialog-container";
+import { Toast } from "../../toast";
 import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { PressableButton } from "../../ui/pressable";
-import { ToastManager } from "../../../services/event-manager";
-import { Toast } from "../../toast";
-import { db } from "../../../common/database";
-import { useRelationStore } from "../../../stores/use-relation-store";
-import { useMenuStore } from "../../../stores/use-menu-store";
+import { Color } from "@notesnook/core";
 const arrayOfColors = [
  "#FF5733",
  "#33FF57",
@@ -142,10 +143,12 @@ const convertToColorObjects = (colors: string[]) => {

 const ColorPicker = ({
  visible,
-  setVisible
+  setVisible,
+  onColorAdded
 }: {
  visible: boolean;
  setVisible: (value: boolean) => void;
+  onColorAdded: (color: Color) => void;
 }) => {
  const [selectedColor, setSelectedColor] = useState<string>();
  const { colors } = useThemeColors();
@@ -282,13 +285,17 @@ const ColorPicker = ({
                  new Error(`Color #${selectedColor} already exists`)
                );

-              await db.colors.add({
+              const id = await db.colors.add({
                title: title.current,
                colorCode: selectedColor
              });
              useRelationStore.getState().update();
              useMenuStore.getState().setColorNotes();
              setVisible(false);
+              const color = await db.colors.color(id);
+              if (color) {
+                onColorAdded?.(color);
+              }
            }}
            type={selectedColor ? "grayAccent" : "grayBg"}
            width="100%"
--- a/apps/mobile/app/components/list/reorderable-list.tsx
+++ b/apps/mobile/app/components/list/reorderable-list.tsx
@@ -40,6 +40,7 @@ interface ReorderableListProps<T extends { id: string }>
  hiddenItems: string[];
  onHiddenItemsChanged?: (data: string[]) => void;
  canHideItems?: boolean;
+  disableDefaultDrag?: boolean;
 }

 function ReorderableList<T extends { id: string }>({
@@ -50,6 +51,7 @@ function ReorderableList<T extends { id: string }>({
  itemOrder = [],
  onHiddenItemsChanged,
  canHideItems = true,
+  disableDefaultDrag,
  ...restProps
 }: ReorderableListProps<T>) {
  const { colors } = useThemeColors();
@@ -158,6 +160,7 @@ function ReorderableList<T extends { id: string }>({
              dragging: true
            })
          }
+          itemsDraggable={disableDefaultDrag ? dragging : true}
          lockItemDragsToMainAxis
          onItemReorder={({ fromIndex, fromItem, toIndex, toItem }) => {
            const newOrder = getOrderedItems().map((item) => item.id);
--- a/apps/mobile/app/components/properties/color-tags.tsx
+++ b/apps/mobile/app/components/properties/color-tags.tsx
@@ -20,7 +20,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Color, Note } from "@notesnook/core/dist/types";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useState } from "react";
-import { ScrollView, View } from "react-native";
+import { View } from "react-native";
+import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
 import { db } from "../../common/database";
@@ -32,9 +33,9 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { refreshNotesPage } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import ColorPicker from "../dialogs/color-picker";
-import { PressableButton } from "../ui/pressable";
-import { FlashList } from "react-native-actions-sheet";
 import { Button } from "../ui/button";
+import { PressableButton } from "../ui/pressable";
+import NativeTooltip from "../../utils/tooltip";

 const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
  const { colors } = useThemeColors();
@@ -70,9 +71,12 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
      testID={notesnook.ids.dialogs.actionsheet.color(item.colorCode)}
      key={item.id}
      onPress={toggleColor}
+      onLongPress={(event) => {
+        NativeTooltip.show(event, item.title, NativeTooltip.POSITIONS.TOP);
+      }}
      customStyle={{
-        width: 30,
-        height: 30,
+        width: 35,
+        height: 35,
        borderRadius: 100,
        justifyContent: "center",
        alignItems: "center",
@@ -103,60 +107,24 @@ export const ColorTags = ({ item }: { item: Note }) => {

  return (
    <>
-      <ColorPicker visible={visible} setVisible={setVisible} />
+      <ColorPicker
+        visible={visible}
+        setVisible={setVisible}
+        onColorAdded={async (color) => {
+          await db.relations.add(color, note);
+          useRelationStore.getState().update();
+          useMenuStore.getState().setColorNotes();
+          Navigation.queueRoutesForUpdate();
+          eSendEvent(refreshNotesPage);
+        }}
+      />
      <View
        style={{
          flexGrow: isTablet ? undefined : 1,
-          paddingRight: 0,
-          flexDirection: "row"
+          flexDirection: "row",
+          marginLeft: 5
        }}
      >
-        {!colorNotes || !colorNotes.length ? (
-          <Button
-            onPress={async () => {
-              useSettingStore.getState().setSheetKeyboardHandler(false);
-              setVisible(true);
-            }}
-            buttonType={{
-              text: colors.primary.accent
-            }}
-            title="Add color"
-            type="grayBg"
-            icon="plus"
-            iconPosition="right"
-            height={30}
-            fontSize={SIZE.xs}
-            style={{
-              marginRight: 5,
-              borderRadius: 100,
-              paddingHorizontal: 8
-            }}
-          />
-        ) : (
-          <PressableButton
-            customStyle={{
-              width: 30,
-              height: 30,
-              borderRadius: 100,
-              justifyContent: "center",
-              alignItems: "center",
-              marginRight: 5
-            }}
-            type="grayBg"
-            onPress={() => {
-              useSettingStore.getState().setSheetKeyboardHandler(false);
-              setVisible(true);
-            }}
-          >
-            <Icon
-              testID="icon-plus"
-              name="plus"
-              color={colors.primary.icon}
-              size={SIZE.lg}
-            />
-          </PressableButton>
-        )}
-
        <FlashList
          data={colorNotes}
          estimatedItemSize={30}
@@ -164,6 +132,53 @@ export const ColorTags = ({ item }: { item: Note }) => {
          extraData={updater}
          renderItem={renderItem}
          showsHorizontalScrollIndicator={false}
+          ListFooterComponent={
+            !colorNotes || !colorNotes.length ? (
+              <Button
+                onPress={async () => {
+                  useSettingStore.getState().setSheetKeyboardHandler(false);
+                  setVisible(true);
+                }}
+                buttonType={{
+                  text: colors.primary.accent
+                }}
+                title="Add color"
+                type="grayBg"
+                icon="plus"
+                iconPosition="right"
+                height={30}
+                fontSize={SIZE.xs}
+                style={{
+                  marginRight: 5,
+                  borderRadius: 100,
+                  paddingHorizontal: 8
+                }}
+              />
+            ) : (
+              <PressableButton
+                customStyle={{
+                  width: 35,
+                  height: 35,
+                  borderRadius: 100,
+                  justifyContent: "center",
+                  alignItems: "center",
+                  marginRight: 5
+                }}
+                type="grayBg"
+                onPress={() => {
+                  useSettingStore.getState().setSheetKeyboardHandler(false);
+                  setVisible(true);
+                }}
+              >
+                <Icon
+                  testID="icon-plus"
+                  name="plus"
+                  color={colors.primary.icon}
+                  size={SIZE.lg}
+                />
+              </PressableButton>
+            )
+          }
        />
      </View>
    </>
--- a/apps/mobile/app/components/properties/date-meta.js
+++ b/apps/mobile/app/components/properties/date-meta.js
@@ -78,7 +78,7 @@ export const DateMeta = ({ item }) => {
        paddingVertical: 5,
        marginTop: 5,
        borderTopWidth: 1,
-        borderTopColor: colors.secondary.background,
+        borderTopColor: colors.primary.border,
        paddingHorizontal: 12
      }}
    >
--- a/apps/mobile/app/components/properties/index.js
+++ b/apps/mobile/app/components/properties/index.js
@@ -34,6 +34,7 @@ import { Items } from "./items";
 import Notebooks from "./notebooks";
 import { Synced } from "./synced";
 import { TagStrip, Tags } from "./tags";
+import { PressableButton } from "../ui/pressable";

 const Line = ({ top = 6, bottom = 6 }) => {
  const { colors } = useThemeColors();
@@ -80,17 +81,38 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
              paddingHorizontal: 12,
              marginTop: 5,
              zIndex: 10,
-              marginBottom: 6
+              marginBottom: 5
            }}
          >
-            <Heading size={SIZE.lg}>
-              {item.type === "tag" && !isColor ? (
-                <Heading size={SIZE.xl} color={colors.primary.accent}>
-                  #
-                </Heading>
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center"
+              }}
+            >
+              {item.type === "color" ? (
+                <PressableButton
+                  type="accent"
+                  accentColor={item.colorCode}
+                  accentText={colors.static.white}
+                  customStyle={{
+                    width: 30,
+                    height: 30,
+                    borderRadius: 100,
+                    marginRight: 10
+                  }}
+                />
              ) : null}
-              {item.title}
-            </Heading>
+
+              <Heading size={SIZE.lg}>
+                {item.type === "tag" && !isColor ? (
+                  <Heading size={SIZE.xl} color={colors.primary.accent}>
+                    #
+                  </Heading>
+                ) : null}
+                {item.title}
+              </Heading>
+            </View>

            {item.type === "notebook" && item.description ? (
              <Paragraph>{item.description}</Paragraph>
@@ -118,8 +140,13 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {

          <DateMeta item={item} />
          <Line bottom={0} />
-          {item.type === "note" ? <Tags close={close} item={item} /> : null}

+          {item.type === "note" ? (
+            <>
+              <Tags close={close} item={item} />
+              <Line bottom={0} />
+            </>
+          ) : null}
          {item.type === "note" ? (
            <View
              style={{
@@ -201,22 +228,14 @@ Properties.present = async (item, buttons = [], isSheet) => {
        "add-notebook"
      ]);
      break;
-    // case "topic":
-    //   props[0] = db.notebooks
-    //     .notebook(item.notebookId)
-    //     .topics.topic(item.id)._topic;
-    //   props.push([
-    //     "move-notes",
-    //     "edit-topic",
-    //     "add-shortcut",
-    //     "trash",
-    //     "default-topic"
-    //   ]);
-    //   break;
    case "tag":
      props[0] = await db.tags.tag(item.id);
      props.push(["add-shortcut", "trash", "rename-tag"]);
      break;
+    case "color":
+      props[0] = await db.colors.color(item.id);
+      props.push(["trash", "rename-color", "reorder"]);
+      break;
    case "reminder": {
      props[0] = await db.reminders.reminder(item.id);
      props.push(["edit-reminder", "trash", "disable-reminder"]);
--- a/apps/mobile/app/components/properties/items.js
+++ b/apps/mobile/app/components/properties/items.js
@@ -218,7 +218,8 @@ export const Items = ({ item, buttons, close }) => {
      <ScrollView
        horizontal
        style={{
-          paddingHorizontal: 12
+          paddingHorizontal: 12,
+          marginTop: 6
        }}
      >
        {topBarItems.map(renderTopBarItem)}
@@ -229,7 +230,6 @@ export const Items = ({ item, buttons, close }) => {
        keyExtractor={(item) => item.title}
        key={columnItemsCount + "key"}
        numColumns={columnItemsCount}
-        disableVirtualization={true}
        style={{
          marginTop: item.type !== "note" ? 10 : 0,
          paddingTop: 10,
--- a/apps/mobile/app/components/properties/tags.js
+++ b/apps/mobile/app/components/properties/tags.js
@@ -35,8 +35,6 @@ export const Tags = ({ item, close }) => {
    <View
      style={{
        marginTop: 5,
-        paddingTop: 6,
-        paddingBottom: 6,
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems: "center",
@@ -53,16 +51,15 @@ export const Tags = ({ item, close }) => {
        buttonType={{
          text: colors.primary.accent
        }}
-        title="Add tags"
+        title="Add tag"
        type="grayBg"
        icon="plus"
        iconPosition="right"
        height={30}
-        fontSize={SIZE.xs}
+        fontSize={SIZE.sm - 1}
        style={{
-          marginRight: 5,
-          borderRadius: 100,
-          paddingHorizontal: 8
+          height: 35,
+          borderRadius: 100
        }}
      />
      <ColorTags item={item} />
--- a/apps/mobile/app/components/side-menu/color-section.tsx
+++ b/apps/mobile/app/components/side-menu/color-section.tsx
@@ -33,6 +33,7 @@ import { PressableButton } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import ReorderableList from "../list/reorderable-list";
+import { Properties } from "../properties";

 export const ColorSection = React.memo(
  function ColorSection() {
@@ -57,6 +58,7 @@ export const ColorSection = React.memo(
        onHiddenItemsChanged={(data) => {
          db.settings.setSideBarHiddenItems("colors", data);
        }}
+        disableDefaultDrag={true}
        itemOrder={db.settings.getSideBarOrder("colors")}
        hiddenItems={db.settings.getSideBarHiddenItems("colors")}
        alwaysBounceVertical={false}
@@ -91,22 +93,7 @@ const ColorItem = React.memo(
    };

    const onLongPress = () => {
-      presentDialog({
-        title: "Rename color",
-        input: true,
-        inputPlaceholder: "Enter name for this color",
-        defaultValue: item.title,
-        paragraph: "You are renaming the color " + item.title,
-        positivePress: async (value) => {
-          if (!value || value.trim().length === 0) return;
-          await db.colors.add({
-            id: item.id,
-            title: value
-          });
-          setColorNotes();
-        },
-        positiveText: "Rename"
-      });
+      Properties.present(item);
    };

    return (
--- a/apps/mobile/app/hooks/use-actions.tsx
+++ b/apps/mobile/app/hooks/use-actions.tsx
@@ -62,6 +62,7 @@ import { eOpenLoginDialog } from "../utils/events";
 import { deleteItems } from "../utils/functions";
 import { convertNoteToText } from "../utils/note-to-text";
 import { sleep } from "../utils/time";
+import { useSideBarDraggingStore } from "../components/side-menu/dragging-store";

 export const useActions = ({
  close,
@@ -120,7 +121,7 @@ export const useActions = ({
  useEffect(() => {
    const sub = eSubscribeEvent(Notifications.Events.onUpdate, onUpdate);
    return () => {
-      sub.unsubscribe();
+      sub?.unsubscribe();
    };
  }, [item, onUpdate]);

@@ -205,23 +206,50 @@ export const useActions = ({
    });
  }

-  async function deleteItem() {
-    if (!checkItemSynced()) return;
+  async function renameColor() {
+    if (item.type !== "color") return;
    close();
-    if (item.type === "tag" || item.type === "reminder") {
-      await sleep(300);
+    await sleep(300);
+    presentDialog({
+      title: "Rename color",
+      input: true,
+      inputPlaceholder: "Enter name for this color",
+      defaultValue: item.title,
+      paragraph: "You are renaming the color " + item.title,
+      positivePress: async (value) => {
+        if (!value || value.trim().length === 0) return;
+        await db.colors.add({
+          id: item.id,
+          title: value
+        });
+        useMenuStore.getState().setColorNotes();
+      },
+      positiveText: "Rename"
+    });
+  }
+
+  const deleteItem = async () => {
+    close();
+    await sleep(300);
+
+    if (
+      item.type === "tag" ||
+      item.type === "reminder" ||
+      item.type === "color"
+    ) {
      presentDialog({
        title: `Delete ${item.type}`,
-        paragraph:
-          item.type === "reminder"
-            ? "This reminder will be removed"
-            : "This tag will be removed from all notes.",
+        paragraph: `Are you sure you want to delete this ${item.type}?`,
        positivePress: async () => {
          if (item.type === "reminder") {
            await db.reminders.remove(item.id);
+          } else if (item.type === "color") {
+            await db.colors.remove(item.id);
+            useMenuStore.getState().setColorNotes();
          } else {
            await db.tags.remove(item.id);
          }
+
          setImmediate(() => {
            useTagStore.getState().refresh();
            Navigation.queueRoutesForUpdate();
@@ -234,8 +262,7 @@ export const useActions = ({
      return;
    }

-    if (item.type === "note" && item.locked) {
-      await sleep(300);
+    if (item.type === "note" && (await db.vaults.itemExists(item))) {
      openVault({
        deleteNote: true,
        novault: true,
@@ -246,14 +273,12 @@ export const useActions = ({
      });
    } else {
      try {
-        close();
-        await sleep(300);
        await deleteItems([item.id], item.type);
      } catch (e) {
        console.error(e);
      }
    }
-  }
+  };

  async function deleteTrashItem() {
    if (item.type !== "trash") return;
@@ -295,17 +320,6 @@ export const useActions = ({
    type?: string;
    color?: string;
  }[] = [
-    {
-      id: "trash",
-      title:
-        item.type !== "notebook" && item.type !== "note"
-          ? "Delete " + item.type
-          : "Move to trash",
-      icon: "delete-outline",
-      type: "error",
-      func: deleteItem
-    }
-
    // {
    //   id: "ReferencedIn",
    //   title: "References",
@@ -325,12 +339,32 @@ export const useActions = ({
  if (item.type === "tag") {
    actions.push({
      id: "rename-tag",
-      title: "Rename tag",
+      title: "Rename",
      icon: "square-edit-outline",
      func: renameTag
    });
  }

+  if (item.type === "color") {
+    actions.push({
+      id: "rename-color",
+      title: "Rename",
+      icon: "square-edit-outline",
+      func: renameColor
+    });
+
+    actions.push({
+      id: "reorder",
+      title: "Reorder",
+      icon: "sort-ascending",
+      func: () => {
+        useSideBarDraggingStore.setState({
+          dragging: true
+        });
+      }
+    });
+  }
+
  if (item.type === "reminder") {
    actions.push(
      {
@@ -864,7 +898,18 @@ export const useActions = ({
      .then((notebook) => {
        setNoteInCurrentNotebook(!!notebook);
      });
-  }, []);
+  }, [item]);
+
+  actions.push({
+    id: "trash",
+    title:
+      item.type !== "notebook" && item.type !== "note"
+        ? "Delete " + item.type
+        : "Move to trash",
+    icon: "delete-outline",
+    type: "error",
+    func: deleteItem
+  });

  return actions;
 };
--- a/packages/core/src/collections/vaults.ts
+++ b/packages/core/src/collections/vaults.ts
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

 import Database from "../api";
-import { Vault } from "../types";
+import { ItemReference, Vault } from "../types";
 import { ICollection } from "./collection";
 import { SQLCollection } from "../database/sql-collection";
 import { getId } from "../utils/id";
@@ -80,4 +80,8 @@ export class Vaults implements ICollection {
      this.db.options?.batchSize
    );
  }
+
+  async itemExists(reference: ItemReference) {
+    return (await this.db.relations.to(reference, "vault").count()) > 0;
+  }
 }