feat: add protect option to menu

app/assets/javascripts/components/Icon.tsx

@@ -9,6 +9,7 @@ import HashtagIcon from '../../icons/ic-hashtag.svg';
 import ChevronRightIcon from '../../icons/ic-chevron-right.svg';
 import RestoreIcon from '../../icons/ic-restore.svg';
 import CloseIcon from '../../icons/ic-close.svg';
+import PasswordIcon from '../../icons/ic-textbox-password.svg';
 import { toDirective } from './utils';
 
 const ICONS = {
@@ -23,6 +24,7 @@ const ICONS = {
   'chevron-right': ChevronRightIcon,
   'restore': RestoreIcon,
   'close': CloseIcon,
+  'password': PasswordIcon,
 };
 
 type Props = {

app/assets/javascripts/components/NotesOptions.tsx

@@ -35,6 +35,7 @@ export const NotesOptions = observer(
     const notes = Object.values(appState.notes.selectedNotes);
     const hidePreviews = toggleOn(note => note.hidePreview);
     const locked = toggleOn(note => note.locked);
+    const protect = toggleOn(note => note.protected);
     const archived = notes.some((note) => note.archived);
     const unarchived = notes.some((note) => !note.archived);
     const trashed = notes.some((note) => note.trashed);
@@ -84,6 +85,19 @@ export const NotesOptions = observer(
             Show preview
           </span>
         </Switch>
+        <Switch
+          onBlur={closeOnBlur}
+          className="px-3 py-1.5"
+          checked={protect}
+          onChange={() => {
+            appState.notes.setProtectSelectedNotes(!protect);
+          }}
+        >
+          <span className="flex items-center">
+            <Icon type="password" className={iconClass} />
+            Protect
+          </span>
+        </Switch>
         <div className="h-1px my-2 bg-border"></div>
         {appState.tags.tagsCount > 0 && (
           <Disclosure