feat: Add "Pin selected notes" button to editor title bar (#760)

app/assets/javascripts/components/MultipleSelectedNotes.tsx

@@ -4,6 +4,7 @@ import NotesIcon from '../../icons/il-notes.svg';
 import { observer } from 'mobx-react-lite';
 import { NotesOptionsPanel } from './NotesOptionsPanel';
 import { WebApplication } from '@/ui_models/application';
+import { PinNoteButton } from './PinNoteButton';
 
 type Props = {
   application: WebApplication;
@@ -17,13 +18,16 @@ const MultipleSelectedNotes = observer(({ application, appState }: Props) => {
     <div className="flex flex-col h-full items-center">
       <div className="flex items-center justify-between p-4 w-full">
         <h1 className="sk-h1 font-bold m-0">{count} selected notes</h1>
-        <NotesOptionsPanel application={application} appState={appState} />
+        <div className="flex">
+          <div className="mr-3">
+            <PinNoteButton appState={appState} />
+          </div>
+          <NotesOptionsPanel application={application} appState={appState} />
+        </div>
       </div>
       <div className="flex-grow flex flex-col justify-center items-center w-full max-w-md">
         <NotesIcon className="block" />
-        <h2 className="text-lg m-0 text-center mt-4">
-          {count} selected notes
-        </h2>
+        <h2 className="text-lg m-0 text-center mt-4">{count} selected notes</h2>
         <p className="text-sm mt-2 text-center max-w-60">
           Actions will be performed on all selected notes.
         </p>

app/assets/javascripts/components/PinNoteButton.tsx

@@ -0,0 +1,38 @@
+import { AppState } from '@/ui_models/app_state';
+import VisuallyHidden from '@reach/visually-hidden';
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { Icon } from './Icon';
+import { toDirective } from './utils';
+
+type Props = {
+  appState: AppState;
+  className?: string;
+};
+
+export const PinNoteButton: FunctionComponent<Props> = observer(
+  ({ appState, className = '' }) => {
+    const notes = Object.values(appState.notes.selectedNotes);
+    const pinned = notes.some((note) => note.pinned);
+
+    const togglePinned = () => {
+      if (!pinned) {
+        appState.notes.setPinSelectedNotes(true);
+      } else {
+        appState.notes.setPinSelectedNotes(false);
+      }
+    };
+
+    return (
+      <button
+        className={`sn-icon-button ${pinned ? 'toggled' : ''} ${className}`}
+        onClick={togglePinned}
+      >
+        <VisuallyHidden>Pin selected notes</VisuallyHidden>
+        <Icon type="pin" className="block" />
+      </button>
+    );
+  }
+);
+
+export const PinNoteButtonDirective = toDirective<Props>(PinNoteButton);