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 && (

app/assets/javascripts/ui_models/app_state/notes_state.ts

@@ -314,7 +314,7 @@ export class NotesState {
     let noteTitle = undefined;
     if (this.selectedNotesCount === 1) {
       const selectedNote = Object.values(this.selectedNotes)[0];
-      noteTitle = selectedNote.safeTitle().length
+      noteTitle = selectedNote.title.length
         ? `'${selectedNote.title}'`
         : 'this note';
     }

app/assets/javascripts/views/constants.ts

@@ -9,3 +9,5 @@ export const MAX_MENU_SIZE_MULTIPLIER = 30;
 
 export const FOCUSABLE_BUT_NOT_TABBABLE = -1;
 export const NOTES_LIST_SCROLL_THRESHOLD = 200;
+
+export const BYTES_IN_ONE_MEGABYTE = 1000000;

app/assets/stylesheets/_sn.scss

@@ -514,6 +514,11 @@
   padding-bottom: 0.625rem;
 }
 
+.py-3\.5 {
+  padding-top: 0.875rem;
+  padding-bottom: 0.875rem;
+}
+
 .py-9 {
   padding-top: 2.25rem;
   padding-bottom: 2.25rem;
@@ -835,6 +840,10 @@
   }
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
 .dimmed {
   opacity: .5;
   cursor: default;
@@ -844,3 +853,7 @@
 .hide-if-last-child:last-child {
   display: none;
 }
+
+.bg-note-size-warning {
+  background-color: rgba(235, 173, 0, 0.08);
+}

package.json

@@ -84,7 +84,7 @@
     "@reach/tooltip": "^0.16.2",
     "@standardnotes/components": "1.5.0",
     "@standardnotes/features": "1.27.0",
-    "@standardnotes/snjs": "2.51.1",
+    "@standardnotes/snjs": "2.51.2",
     "@standardnotes/settings": "^1.11.3",
     "@standardnotes/sncrypto-web": "1.6.2",
     "mobx": "^6.3.5",

yarn.lock

@@ -2650,10 +2650,10 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.51.1":
-  version "2.51.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.51.1.tgz#404f0a407b0c0eb19ac847081336c1ce9deeee5f"
-  integrity sha512-Aeeh++8nEg/FdV4Pxjbm9XmeLNRM57V+mvtVt08U8O+k11XndfjZIDWmPaOfcRBqQtBx47NcvxbXagABz2XSqA==
+"@standardnotes/snjs@2.51.2":
+  version "2.51.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.51.2.tgz#9804e27071a8d139bf72095d94231a1e29a61593"
+  integrity sha512-sxS/QnDnOqUx88Mv8BVR2sd4UAvrBQj0Daa9rH5+INryY5qkLdlTod6MqDfxy+MRkyioVpDAE+yYuBJbcPyqQw==
   dependencies:
     "@standardnotes/auth" "^3.15.3"
     "@standardnotes/common" "^1.8.0"