web: reminder dialogs improvements

* add note references (if any) in reminder edit dialog
* wrap snooze option buttons in reminder preview dialog

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

apps/web/__e2e__/models/note-properties.model.ts

@@ -27,10 +27,12 @@ import {
   fillColorDialog,
   fillNotebookDialog,
   fillPasswordDialog,
+  fillReminderDialog,
   iterateList
 } from "./utils";
 import { SessionHistoryItemModel } from "./session-history-item-model";
 import dayjs from "dayjs";
+import { Reminder } from "@notesnook/core";
 
 abstract class BaseProperties {
   protected readonly page: Page;
@@ -388,6 +390,12 @@ export class NoteContextMenuModel extends BaseProperties {
     await confirmDialog(dialog);
   }
 
+  async addReminder(reminder: Partial<Reminder>) {
+    await this.open();
+    await this.menu.clickOnItem("remind-me");
+    await fillReminderDialog(this.page, reminder);
+  }
+
   async open() {
     await this.menu.open(this.noteLocator);
   }

apps/web/__e2e__/models/reminder-item.model.ts

@@ -62,4 +62,9 @@ export class ReminderItemModel extends BaseItemModel {
     await this.contextMenu.open(this.locator);
     await this.contextMenu.clickOnItem("toggle");
   }
+
+  async open() {
+    await this.contextMenu.open(this.locator);
+    await this.contextMenu.clickOnItem("edit");
+  }
 }

apps/web/__e2e__/reminders.test.ts

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Reminder } from "@notesnook/core";
 import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
+import { getTestId } from "./utils";
 
 const ONE_TIME_REMINDER: Partial<Reminder> = {
   title: "Test reminder 1",
@@ -197,3 +198,26 @@ test("editing a weekly recurring reminder should not revert it to daily", async
   expect(await reminder?.getRecurringMode()).toBe("Weekly");
   expect(await reminder?.getDescription()).toBe("An edited reminder");
 });
+
+test("adding a reminder via note context menu should show reference in edit dialog", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const note = await notes.createNote({
+    title: "Test note",
+    content: "I am a note"
+  });
+
+  await note?.contextMenu.addReminder(ONE_TIME_REMINDER);
+  const reminders = await app.goToReminders();
+  const reminder = await reminders.findReminder({
+    title: ONE_TIME_REMINDER.title
+  });
+  await reminder?.open();
+
+  const noteReferences = page.locator(getTestId("reminder-note-references"));
+  await noteReferences.waitFor({ state: "visible" });
+  expect(noteReferences.getByText("Test note")).toBeVisible();
+});

apps/web/src/dialogs/add-reminder-dialog.tsx

@@ -17,6 +17,7 @@ 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 NoteItem from "../components/note";
 import Dialog from "../components/dialog";
 import Field from "../components/field";
 import { Box, Button, Flex, Label, Radio, Text } from "@theme-ui/components";
@@ -32,13 +33,18 @@ import { usePersistentState } from "../hooks/use-persistent-state";
 import { DayPicker } from "../components/day-picker";
 import { PopupPresenter } from "@notesnook/ui";
 import { useStore as useThemeStore } from "../stores/theme-store";
-import { getFormattedDate, useIsFeatureAvailable } from "@notesnook/common";
+import {
+  getFormattedDate,
+  useIsFeatureAvailable,
+  usePromise
+} from "@notesnook/common";
 import { MONTHS_FULL, getTimeFormat } from "@notesnook/core";
 import { Note, Reminder } from "@notesnook/core";
 import { BaseDialogProps, DialogManager } from "../common/dialog-manager";
 import { strings } from "@notesnook/intl";
 import { checkFeature } from "../common";
 import { setTimeOnly, setDateOnly } from "../utils/date-time";
+import Skeleton from "react-loading-skeleton";
 
 dayjs.extend(customParseFormat);
 
@@ -148,6 +154,15 @@ export const AddReminderDialog = DialogManager.register(
     const theme = useThemeStore((store) => store.colorScheme);
     const dateInputRef = useRef<HTMLInputElement>(null);
     const repeatModeAvailability = useIsFeatureAvailable("recurringReminders");
+    const referencedNotes = usePromise(
+      () =>
+        reminder?.id
+          ? db.relations
+              .to({ id: reminder.id, type: "reminder" }, "note")
+              .resolve()
+          : null,
+      [reminder?.id]
+    );
 
     const repeatsDaily =
       (selectedDays.length === 7 && recurringMode === RecurringModes.WEEK) ||
@@ -512,6 +527,32 @@ export const AddReminderDialog = DialogManager.register(
             {strings.reminderStarts(date.toString(), date.format(timeFormat()))}
           </Text>
         )}
+
+        {reminder ? (
+          referencedNotes && referencedNotes.status === "fulfilled" ? (
+            referencedNotes.value !== null &&
+            referencedNotes.value.length > 0 && (
+              <Flex
+                data-test-id="reminder-note-references"
+                sx={{ my: 2, gap: 1, flexDirection: "column" }}
+              >
+                <Text variant="body">
+                  {strings.note()} {strings.references()}:
+                </Text>
+                {referencedNotes.value.map((item) => (
+                  <NoteItem
+                    key={item.id}
+                    item={item}
+                    date={item.dateCreated}
+                    compact
+                  />
+                ))}
+              </Flex>
+            )
+          ) : (
+            <Skeleton count={1} />
+          )
+        ) : null}
       </Dialog>
     );
   },

apps/web/src/dialogs/reminder-preview-dialog.tsx

@@ -96,7 +96,8 @@ export const ReminderPreviewDialog = DialogManager.register(
           sx={{
             alignItems: "center",
             my: 1,
-            gap: 1
+            gap: 1,
+            flexWrap: "wrap"
           }}
         >
           {SNOOZE_TIMES.map((time) => (