web: add option to attach reminder to a note

apps/web/src/common/dialog-controller.tsx

@@ -637,9 +637,9 @@ export function showTrackingDetailsDialog() {
   ));
 }
 
-export function showAddReminderDialog() {
+export function showAddReminderDialog(noteId?: string) {
   return showDialog("AddReminderDialog", (Dialog, perform) => (
-    <Dialog onClose={(res: boolean) => perform(res)} />
+    <Dialog onClose={(res: boolean) => perform(res)} noteId={noteId} />
   ));
 }
 

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

@@ -32,6 +32,7 @@ import { Pro } from "../icons";
 export type AddReminderDialogProps = {
   onClose: Perform;
   reminderId?: string;
+  noteId?: string;
 };
 
 type ValueOf<T> = T[keyof T];
@@ -107,7 +108,7 @@ const recurringModes = [
 ];
 
 export default function AddReminderDialog(props: AddReminderDialogProps) {
-  const { reminderId } = props;
+  const { reminderId, noteId } = props;
 
   const [selectedDays, setSelectedDays] = useState<number[]>([]);
   const [recurringMode, setRecurringMode] = useState<
@@ -191,7 +192,7 @@ export default function AddReminderDialog(props: AddReminderDialogProps) {
             return;
           }
 
-          await db.reminders?.add({
+          const id = await db.reminders?.add({
             id: reminderId,
             recurringMode,
             mode,
@@ -203,6 +204,14 @@ export default function AddReminderDialog(props: AddReminderDialogProps) {
             disabled: false,
             ...(dateTime.isAfter(dayjs()) ? { snoozeUntil: 0 } : {})
           });
+
+          if (id && noteId) {
+            await db.relations?.add(
+              { id: noteId, type: "note" },
+              { id, type: "reminder" }
+            );
+          }
+
           refresh();
           props.onClose(true);
         }

apps/web/src/components/icons/index.tsx

@@ -181,7 +181,9 @@ import {
   mdiClockTimeFiveOutline,
   mdiBellOffOutline,
   mdiVibrate,
-  mdiBellCancelOutline
+  mdiBellCancelOutline,
+  mdiBellPlusOutline,
+  mdiBellOutline
 } from "@mdi/js";
 import { useTheme } from "@emotion/react";
 import { AnimatedFlex } from "../animated";
@@ -451,7 +453,9 @@ export const LineSpacing = createIcon(mdiFormatLineSpacing);
 export const Extension = createIcon(mdiPuzzleOutline);
 
 export const Reminders = createIcon(mdiBellRingOutline);
+export const Reminder = createIcon(mdiBellOutline);
 export const ReminderOff = createIcon(mdiBellCancelOutline);
+export const AddReminder = createIcon(mdiBellPlusOutline);
 export const Silent = createIcon(mdiBellOffOutline);
 export const Vibrate = createIcon(mdiVibrate);
 export const Loud = createIcon(mdiBellRingOutline);

apps/web/src/components/note/index.js

@@ -22,7 +22,11 @@ import { Button, Flex, Text } from "@theme-ui/components";
 import * as Icon from "../icons";
 import TimeAgo from "../time-ago";
 import ListItem from "../list-item";
-import { confirm, showMoveNoteDialog } from "../../common/dialog-controller";
+import {
+  confirm,
+  showAddReminderDialog,
+  showMoveNoteDialog
+} from "../../common/dialog-controller";
 import { store, useStore } from "../../stores/note-store";
 import { store as userstore } from "../../stores/user-store";
 import { useStore as useAttachmentStore } from "../../stores/attachment-store";
@@ -325,6 +329,14 @@ const menuItems = [
     },
     multiSelect: true
   },
+  {
+    key: "addreminder",
+    title: "Add reminder",
+    icon: Icon.AddReminder,
+    onClick: async ({ note }) => {
+      await showAddReminderDialog(note.id);
+    }
+  },
   {
     key: "colors",
     title: "Assign color",

apps/web/src/stores/reminder-store.js

@@ -25,6 +25,7 @@ import { TaskScheduler } from "../utils/task-scheduler";
 import { showReminderPreviewDialog } from "../common/dialog-controller";
 import dayjs from "dayjs";
 import Config from "../utils/config";
+import { store as notestore } from "./note-store";
 
 class ReminderStore extends BaseStore {
   reminders = [];
@@ -32,7 +33,10 @@ class ReminderStore extends BaseStore {
   refresh = (reset = true) => {
     const reminders = db.reminders.all;
     this.set((state) => (state.reminders = groupReminders(reminders)));
-    if (reset) resetReminders(reminders);
+    if (reset) {
+      resetReminders(reminders);
+      notestore.refresh();
+    }
   };
 
   delete = async (...ids) => {