feat: Add "Pin selected notes" button to editor title bar

app/assets/javascripts/app.ts

@@ -81,6 +81,7 @@ import { PurchaseFlowDirective } from './purchaseFlow';
 import { QuickSettingsMenuDirective } from './components/QuickSettingsMenu/QuickSettingsMenu';
 import { ComponentViewDirective } from '@/components/ComponentView';
 import { TagsListDirective } from '@/components/TagsList';
+import { PinNoteButtonDirective } from '@/components/PinNoteButton';
 
 function reloadHiddenFirefoxTab(): boolean {
   /**
@@ -184,7 +185,8 @@ const startApplication: StartApplication = async function startApplication(
     .directive('noteTagsContainer', NoteTagsContainerDirective)
     .directive('tags', TagsListDirective)
     .directive('preferences', PreferencesDirective)
-    .directive('purchaseFlow', PurchaseFlowDirective);
+    .directive('purchaseFlow', PurchaseFlowDirective)
+    .directive('pinNoteButton', PinNoteButtonDirective);
 
   // Filters
   angular.module('app').filter('trusted', ['$sce', trusted]);

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);

app/assets/javascripts/views/editor/editor-view.pug

@@ -48,6 +48,11 @@
               ng-class="{'warning sk-bold': self.state.syncTakingTooLong, 'danger sk-bold': self.state.saveError}"
               ) {{self.state.noteStatus.message}}
             .desc(ng-show='self.state.noteStatus.desc') {{self.state.noteStatus.desc}}
+          pin-note-button(
+            class='mr-3'
+            app-state='self.appState',
+            ng-if='self.appState.notes.selectedNotesCount > 0'
+          )
           notes-options-panel(
             application='self.application',
             app-state='self.appState',

app/assets/stylesheets/_sn.scss

@@ -748,6 +748,22 @@
   }
 }
 
+.border-info-contrast {
+  border-color: var(--sn-stylekit-info-contrast-color);
+}
+
+.sn-icon-button.toggled {
+  @extend .bg-info;
+  @extend .color-info-contrast;
+  @extend .border-info-contrast;
+
+  &:hover,
+  &:focus {
+    @extend .color-info;
+    @extend .border-info;
+  }
+}
+
 @media screen and (max-width: $screen-md-min) {
   .sn-component {
     .md\:hidden {