feat: add warning to note options menu if note size is >0.5mb (#851)

app/assets/javascripts/components/Icon.tsx

@@ -62,6 +62,7 @@ import UnarchiveIcon from '../../icons/ic-unarchive.svg';
 import UnpinIcon from '../../icons/ic-pin-off.svg';
 import UserIcon from '../../icons/ic-user.svg';
 import UserSwitch from '../../icons/ic-user-switch.svg';
+import WarningIcon from '../../icons/ic-warning.svg';
 import WindowIcon from '../../icons/ic-window.svg';
 
 import { FunctionalComponent } from 'preact';
@@ -133,6 +134,7 @@ const ICONS = {
   unarchive: UnarchiveIcon,
   unpin: UnpinIcon,
   user: UserIcon,
+  warning: WarningIcon,
   window: WindowIcon,
 };
 

app/assets/javascripts/components/NoteView/NoteView.tsx

@@ -672,9 +672,7 @@ export class NoteView extends PureComponent<Props, State> {
       this.application.alertService.alert(STRING_DELETE_LOCKED_ATTEMPT);
       return;
     }
-    const title = this.note.safeTitle().length
-      ? `'${this.note.title}'`
-      : 'this note';
+    const title = this.note.title.length ? `'${this.note.title}'` : 'this note';
     const text = StringDeleteNote(title, permanently);
     if (
       await confirmDialog({

app/assets/javascripts/components/NotesContextMenu.tsx

@@ -37,7 +37,7 @@ export const NotesContextMenu = observer(({ application, appState }: Props) => {
   return contextMenuOpen ? (
     <div
       ref={contextMenuRef}
-      className="sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
+      className="sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col pt-2 overflow-y-auto fixed"
       style={{
         ...contextMenuPosition,
         maxHeight: contextMenuMaxHeight,

app/assets/javascripts/components/NotesOptions/NotesOptions.tsx

@@ -16,6 +16,7 @@ import { ChangeEditorOption } from './ChangeEditorOption';
 import {
   MENU_MARGIN_FROM_APP_BORDER,
   MAX_MENU_SIZE_MULTIPLIER,
+  BYTES_IN_ONE_MEGABYTE,
 } from '@/views/constants';
 
 export type NotesOptionsProps = {
@@ -119,7 +120,7 @@ const NoteAttributes: FunctionComponent<{
   const format = editor?.package_info?.file_type || 'txt';
 
   return (
-    <div className="px-3 pt-1.5 pb-1 text-xs color-neutral font-medium">
+    <div className="px-3 pt-1.5 pb-2.5 text-xs color-neutral font-medium">
       {typeof words === 'number' && (format === 'txt' || format === 'md') ? (
         <>
           <div className="mb-1">
@@ -185,6 +186,24 @@ const SpellcheckOptions: FunctionComponent<{
   );
 };
 
+const NOTE_SIZE_WARNING_THRESHOLD = 0.5 * BYTES_IN_ONE_MEGABYTE;
+
+const NoteSizeWarning: FunctionComponent<{
+  note: SNNote;
+}> = ({ note }) =>
+  new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
+    <div className="flex items-center px-3 py-3.5 relative bg-note-size-warning">
+      <Icon
+        type="warning"
+        className="color-accessory-tint-3 flex-shrink-0 mr-3"
+      />
+      <div className="color-grey-0 select-none">
+        This note may have trouble syncing to the mobile application due to its
+        size.
+      </div>
+    </div>
+  ) : null;
+
 export const NotesOptions = observer(
   ({
     application,
@@ -570,6 +589,7 @@ export const NotesOptions = observer(
             <SpellcheckOptions appState={appState} note={notes[0]} />
             <div className="min-h-1px my-2 bg-border"></div>
             <NoteAttributes application={application} note={notes[0]} />
+            <NoteSizeWarning note={notes[0]} />
           </>
         ) : null}
       </>

app/assets/javascripts/components/NotesOptionsPanel.tsx

@@ -86,7 +86,7 @@ export const NotesOptionsPanel = observer(
             ...position,
             maxHeight,
           }}
-          className="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
+          className="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col pt-2 overflow-y-auto fixed"
           onBlur={closeOnBlur}
         >
           {open && (