web: add separators in context menus & reorganize menu items

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

@@ -184,7 +184,12 @@ import {
   mdiBellCancelOutline,
   mdiBellPlusOutline,
   mdiBellOutline,
-  mdiGestureTapButton
+  mdiGestureTapButton,
+  mdiCloseCircleOutline,
+  mdiMinusCircleOutline,
+  mdiLightbulbOnOutline,
+  mdiNoteMultipleOutline,
+  mdiBookMultipleOutline
 } from "@mdi/js";
 import { useTheme } from "@emotion/react";
 import { AnimatedFlex } from "../animated";
@@ -279,8 +284,10 @@ function createIcon(path: string, rotate = false) {
 
 export const Plus = createIcon(mdiPlus);
 export const Note = createIcon(mdiNoteOutline);
+export const Notes = createIcon(mdiNoteMultipleOutline);
 export const Minus = createIcon(mdiMinus);
 export const Notebook = createIcon(mdiBookOutline);
+export const Notebooks = createIcon(mdiBookMultipleOutline);
 export const Notebook2 = createIcon(mdiNotebookOutline);
 export const ArrowLeft = createIcon(mdiArrowLeft);
 export const ArrowRight = createIcon(mdiArrowRight);
@@ -334,6 +341,8 @@ export const ThemeIcon = createIcon(mdiThemeLightDark);
 export const Checkmark = createIcon(mdiCheck);
 export const DoubleCheckmark = createIcon(mdiCheckAll);
 export const CheckCircle = createIcon(mdiCheckCircle);
+export const CheckIntermediate = createIcon(mdiMinusCircleOutline);
+export const CheckRemove = createIcon(mdiCloseCircleOutline);
 export const CheckCircleOutline = createIcon(mdiCheckCircleOutline);
 export const Properties = createIcon(mdiDotsVertical);
 export const Markdown = createIcon(mdiLanguageMarkdownOutline);
@@ -468,3 +477,4 @@ export const EditorNormalWidth = createIcon(
 export const EditorFullWidth = createIcon(
   `M4 20q-.825 0-1.412-.587Q2 18.825 2 18V6q0-.825.588-1.412Q3.175 4 4 4h16q.825 0 1.413.588Q22 5.175 22 6v12q0 .825-.587 1.413Q20.825 20 20 20Zm0-2h1V6H4v12Zm3 0h10V6H7Zm12 0h1V6h-1ZM7 6v12Z`
 );
+export const Suggestion = createIcon(mdiLightbulbOnOutline);

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

@@ -331,28 +331,40 @@ const menuItems = [
     onClick: ({ note }) => store.favorite(note.id)
   },
   {
-    key: "addtonotebook",
-    title: "Add to notebook(s)",
-    icon: Icon.AddToNotebook,
-    onClick: async ({ items }) => {
-      await showMoveNoteDialog(items.map((i) => i.id));
+    key: "lock",
+    disabled: ({ note }) =>
+      !db.notes.note(note.id).synced() ? notFullySyncedText : false,
+    title: "Lock",
+    checked: ({ note }) => note.locked,
+    icon: Icon.Lock,
+    onClick: async ({ note }) => {
+      const { unlock, lock } = store.get();
+      if (!note.locked) {
+        if (await lock(note.id))
+          showToast("success", "Note locked successfully!");
+      } else {
+        if (await unlock(note.id))
+          showToast("success", "Note unlocked successfully!");
+      }
     },
-    multiSelect: true
+    isPro: true
   },
   {
-    key: "addreminder",
-    title: "Add reminder",
+    key: "remind-me",
+    title: "Remind me",
     icon: Icon.AddReminder,
     onClick: async ({ note }) => {
       await showAddReminderDialog(note.id);
     }
   },
+  { key: "sep1", type: "separator" },
   {
     key: "colors",
     title: "Assign color",
     icon: Icon.Colors,
     items: colorsToMenuItems()
   },
+  { key: "sep2", type: "separator" },
   {
     key: "publish",
     disabled: ({ note }) => {
@@ -386,6 +398,7 @@ const menuItems = [
         format.type === "pdf" && items.length > 1
           ? "Multiple notes cannot be exported as PDF."
           : false,
+      isPro: format.type !== "txt",
       onClick: async ({ items }) => {
         await exportNotes(
           format.type,
@@ -418,40 +431,22 @@ const menuItems = [
       }
     }
   },
+  { key: "sep3", type: "separator" },
   {
-    key: "lock",
-    disabled: ({ note }) =>
-      !db.notes.note(note.id).synced() ? notFullySyncedText : false,
-    title: "Lock",
-    checked: ({ note }) => note.locked,
-    icon: Icon.Lock,
-    onClick: async ({ note }) => {
-      const { unlock, lock } = store.get();
-      if (!note.locked) {
-        if (await lock(note.id))
-          showToast("success", "Note locked successfully!");
-      } else {
-        if (await unlock(note.id))
-          showToast("success", "Note unlocked successfully!");
-      }
-    },
-    isPro: true
-  },
-  {
-    key: "sync-disable",
+    key: "local-only",
     hidden: () => !userstore.get().isLoggedIn,
     disabled: ({ note }) =>
       !db.notes.note(note.id).synced() ? notFullySyncedText : false,
-    title: "Disable sync",
+    title: "Local only",
     checked: ({ note }) => note.localOnly,
     icon: ({ note }) => (note.localOnly ? Icon.Sync : Icon.SyncOff),
     onClick: async ({ note }) => {
       if (
         note.localOnly ||
         (await confirm({
-          title: "Disable sync for this item?",
+          title: "Prevent this item from syncing?",
           message:
-            "Turning sync off for this item will automatically delete it from all other devices. Are you sure you want to continue?",
+            "Turning sync off for this item will automatically delete it from all other devices & any future changes to this item won't get synced. Are you sure you want to continue?",
           yesText: "Yes",
           noText: "No"
         }))

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

@@ -139,11 +139,15 @@ const menuItems = [
   },
   {
     key: "shortcut",
-    icon: Icon.Shortcut,
+    icon: ({ notebook }) =>
+      db.shortcuts.exists(notebook.id)
+        ? Icon.RemoveShortcutLink
+        : Icon.Shortcut,
     title: ({ notebook }) =>
       db.shortcuts.exists(notebook.id) ? "Remove shortcut" : "Create shortcut",
     onClick: ({ notebook }) => appStore.addToShortcuts(notebook)
   },
+  { key: "sep", type: "separator" },
   {
     key: "movetotrash",
     title: "Move to trash",

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

@@ -122,16 +122,19 @@ type MenuActionParams = {
 };
 
 type MenuItemValue<T> = T | ((options: MenuActionParams) => T);
-
-const menuItems: {
+type MenuItem = {
+  type?: "separator";
   key: string;
-  title: MenuItemValue<string>;
-  icon: MenuItemValue<Icon.Icon>;
-  onClick: (options: MenuActionParams) => void;
+  title?: MenuItemValue<string>;
+  icon?: MenuItemValue<Icon.Icon>;
+  onClick?: (options: MenuActionParams) => void;
   color?: MenuItemValue<string>;
   iconColor?: MenuItemValue<string>;
   multiSelect?: boolean;
-}[] = [
+  items?: MenuItemValue<MenuItem[]>;
+};
+
+const menuItems: MenuItem[] = [
   {
     key: "edit",
     title: "Edit",
@@ -140,7 +143,7 @@ const menuItems: {
   },
   {
     key: "toggle",
-    title: ({ reminder }) => (reminder.disabled ? "Turn on" : "Turn off"),
+    title: ({ reminder }) => (reminder.disabled ? "Activate" : "Deactivate"),
     icon: ({ reminder }: MenuActionParams) =>
       reminder.disabled ? Icon.Reminders : Icon.ReminderOff,
     onClick: async ({ reminder }) => {
@@ -151,6 +154,7 @@ const menuItems: {
       store.refresh();
     }
   },
+  { key: "sep", type: "separator" },
   {
     key: "delete",
     title: "Delete",

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

@@ -45,6 +45,7 @@ const menuItems = [
     icon: Icon.Shortcut,
     onClick: ({ tag }) => appStore.addToShortcuts(tag)
   },
+  { key: "sep", type: "separator" },
   {
     key: "delete",
     color: "error",

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

@@ -82,6 +82,7 @@ const menuItems = [
     icon: Icon.Shortcut,
     onClick: ({ topic }) => appStore.addToShortcuts(topic)
   },
+  { key: "sep", type: "separator" },
   {
     key: "delete",
     title: "Delete",