From 8157c0812a264df69c7f6d14c39e7eedb05a5bf3 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Fri, 5 Sep 2025 11:30:18 +0500
Subject: [PATCH] mobile: reminder fixes

1. Allow editing reminder without changing date
2. Fix colors of buttons
3. Allow picking date and time in date picker dialog
4. Fix auto focus of title and description inputs
---
 .../app/components/ui/pressable/index.tsx     | 13 +++++++++
 .../mobile/app/screens/add-reminder/index.tsx | 27 ++++++++++++++-----
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/apps/mobile/app/components/ui/pressable/index.tsx b/apps/mobile/app/components/ui/pressable/index.tsx
index de0f225d3..55377ab47 100644
--- a/apps/mobile/app/components/ui/pressable/index.tsx
+++ b/apps/mobile/app/components/ui/pressable/index.tsx
@@ -54,6 +54,7 @@ type ButtonTypes =
   | "accent"
   | "shade"
   | "secondary"
+  | "selectedAccent"
   | "secondaryAccented"
   | "inverted"
   | "white"
@@ -126,6 +127,18 @@ const buttonTypes = (
       isDark
     )
   },
+  selectedAccent: {
+    primary: colors.selected.accent,
+    text: colors.selected.accentForeground,
+    selected: colors.selected.accent,
+    borderWidth: 0.8,
+    borderColor: getColorLinearShade(colors.selected.accent, 0.05, isDark),
+    borderSelectedColor: getColorLinearShade(
+      colors.selected.accent,
+      0.05,
+      isDark
+    )
+  },
   secondaryAccented: {
     primary: colors.secondary.background,
     text: colors.primary.accent,
diff --git a/apps/mobile/app/screens/add-reminder/index.tsx b/apps/mobile/app/screens/add-reminder/index.tsx
index 7e5453a7b..37e648b66 100644
--- a/apps/mobile/app/screens/add-reminder/index.tsx
+++ b/apps/mobile/app/screens/add-reminder/index.tsx
@@ -47,6 +47,7 @@ import SettingsService from "../../services/settings";
 import { useRelationStore } from "../../stores/use-relation-store";
 import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
+import { getFormattedDate } from "@notesnook/common";
 
 const ReminderModes =
   Platform.OS === "ios"
@@ -114,6 +115,7 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
     !reminder ? referencedItem?.headline : reminder?.description
   );
   const titleRef = useRef<TextInput>(null);
+  const descriptionRef = useRef<TextInput>(null);
   const timer = useRef<NodeJS.Timeout>();
 
   const showDatePicker = () => {
@@ -128,7 +130,7 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
     timer.current = setTimeout(() => {
       hideDatePicker();
       setDate(date);
-    }, 50);
+    }, 10);
   };
   function nth(n: number) {
     return (
@@ -166,8 +168,11 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
         throw new Error(strings.selectDayError());
 
       if (!title.current) throw new Error(strings.setTitleError());
-      if (date.getTime() < Date.now() && reminderMode === "once") {
-        titleRef?.current?.focus();
+      if (
+        date.getTime() < Date.now() &&
+        reminderMode === "once" &&
+        !props.route.params.reminder
+      ) {
         throw new Error(strings.dateError());
       }
 
@@ -242,15 +247,20 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
             defaultValue={reminder?.title || referencedItem?.title}
             placeholder={strings.remindeMeOf()}
             onChangeText={(text) => (title.current = text)}
+            autoFocus
             wrapperStyle={{
               marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
+            onSubmit={() => {
+              descriptionRef.current?.focus();
+            }}
           />
 
           <Input
             defaultValue={
               reminder ? reminder?.description : referencedItem?.headline
             }
+            fwdRef={descriptionRef}
             placeholder={strings.addShortNote()}
             onChangeText={(text) => (details.current = text)}
             containerStyle={{
@@ -290,7 +300,7 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
                 type={
                   reminderMode ===
                   ReminderModes[mode as keyof typeof ReminderModes]
-                    ? "selected"
+                    ? "selectedAccent"
                     : "plain"
                 }
                 onPress={() => {
@@ -443,9 +453,10 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
             >
               <DateTimePickerModal
                 isVisible={isDatePickerVisible}
-                mode="date"
+                mode="datetime"
                 onConfirm={handleConfirm}
                 onCancel={hideDatePicker}
+                isDarkModeEnabled={isDark}
                 is24Hour={db.settings.getTimeFormat() === "24-hour"}
                 date={date || new Date(Date.now())}
               />
@@ -476,7 +487,9 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
                     width: "100%"
                   }}
                   title={
-                    date ? date.toLocaleDateString() : strings.selectDate()
+                    date
+                      ? getFormattedDate(date, "date-time")
+                      : strings.selectDate()
                   }
                   type={date ? "secondaryAccented" : "secondary"}
                   icon="calendar"
@@ -578,7 +591,7 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
                     ReminderNotificationModes[
                       mode as keyof typeof ReminderNotificationModes
                     ]
-                      ? "selected"
+                      ? "selectedAccent"
                       : "plain"
                   }
                   onPress={() => {