mobile: display expiry date on notes item

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

apps/mobile/app/components/list-items/note/index.tsx

@@ -55,6 +55,7 @@ import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import dayjs from "dayjs";
+import { ExpiryDate } from "../../ui/expiry-date";
 
 type NoteItemProps = {
   item: Note | BaseTrashItem<Note>;
@@ -266,6 +267,21 @@ const NoteItem = ({
                   />
                 ) : null}
 
+                {item.expiryDate?.value ? (
+                  <ExpiryDate
+                    note={item as Note}
+                    color={color?.colorCode}
+                    textStyle={{ fontSize: AppFontSize.xxs }}
+                    short
+                    iconSize={AppFontSize.xxs}
+                    style={{
+                      justifyContent: "flex-start",
+                      paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
+                      alignSelf: "flex-start"
+                    }}
+                  />
+                ) : null}
+
                 {notebooks?.items
                   ?.filter(
                     (item) =>

apps/mobile/app/components/ui/expiry-date/index.tsx

@@ -0,0 +1,86 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { Note } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { TextStyle, ViewStyle } from "react-native";
+import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
+import { Button, ButtonProps } from "../button";
+import dayjs from "dayjs";
+
+export const ExpiryDate = ({
+  note,
+  color,
+  style,
+  textStyle,
+  iconSize,
+  short,
+  ...props
+}: {
+  note: Note;
+  color?: string;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+  iconSize?: number;
+  short?: boolean;
+} & ButtonProps) => {
+  const { colors } = useThemeColors();
+
+  const expiryValue = note?.expiryDate?.value;
+  if (!expiryValue) return null;
+
+  const expiryDate = dayjs(expiryValue);
+  const now = dayjs();
+  const isToday = expiryDate.isSame(now, "day");
+  const isTomorrow = expiryDate.isSame(now.add(1, "day"), "day");
+
+  const formattedDate = isToday
+    ? "Today"
+    : isTomorrow
+      ? "Tomorrow"
+      : expiryDate.format("DD MMM YYYY");
+
+  const isUrgent = isToday || isTomorrow;
+
+  return (
+    <Button
+      title={formattedDate}
+      icon="bomb"
+      fontSize={textStyle?.fontSize || AppFontSize.xs}
+      iconSize={iconSize || AppFontSize.sm}
+      type="secondary"
+      buttonType={
+        isUrgent ? { text: color || colors.primary.accent } : undefined
+      }
+      textStyle={{
+        marginRight: 0,
+        ...textStyle
+      }}
+      style={{
+        height: "auto",
+        borderRadius: defaultBorderRadius,
+        borderColor: colors.primary.border,
+        paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+        ...(style as ViewStyle)
+      }}
+      {...props}
+    />
+  );
+};

apps/mobile/app/hooks/use-actions.tsx

@@ -69,7 +69,11 @@ import { useSelectionStore } from "../stores/use-selection-store";
 import { useSettingStore } from "../stores/use-setting-store";
 import { useTagStore } from "../stores/use-tag-store";
 import { useUserStore } from "../stores/use-user-store";
-import { eCloseSheet, eUpdateNoteInEditor } from "../utils/events";
+import {
+  eCloseSheet,
+  eMenuItemUpdate,
+  eUpdateNoteInEditor
+} from "../utils/events";
 import { deleteItems } from "../utils/functions";
 import { convertNoteToText } from "../utils/note-to-text";
 import { NotesnookModule } from "../utils/notesnook-module";
@@ -1188,7 +1192,8 @@ export const useActions = ({
         onPress: async () => {
           if (item.expiryDate?.value) {
             await db.notes.setExpiryDate(null, item.id);
-
+            Navigation.queueRoutesForUpdate();
+            eSendEvent(eMenuItemUpdate);
             ToastManager.show({
               message: strings.expiryDateRemoved(),
               type: "success",
@@ -1218,7 +1223,8 @@ export const useActions = ({
                   onConfirm={async (date) => {
                     close?.();
                     await db.notes.setExpiryDate(date.getTime(), item.id);
-
+                    Navigation.queueRoutesForUpdate();
+                    eSendEvent(eMenuItemUpdate);
                     ToastManager.show({
                       message: strings.expiryDateSet(),
                       type: "success",