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

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">
+        <h2 className="text-lg m-0 text-center mt-4">{count} selected notes</h2>
-          {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/_editor.scss

@@ -33,7 +33,7 @@ $heading-height: 75px;
   padding-top: 14px;
   padding-left: 14px;
   padding-bottom: 10px;
-  padding-right: 10px;
+  padding-right: 14px;
 
   border-bottom: none;
   z-index: $z-index-editor-title-bar;

app/assets/stylesheets/_sn.scss

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

package.json

@@ -60,7 +60,7 @@
     "pug-loader": "^2.4.0",
     "sass-loader": "^12.2.0",
     "serve-static": "^1.14.1",
-    "sn-stylekit": "5.2.15",
+    "sn-stylekit": "5.2.17",
     "svg-jest": "^1.0.1",
     "ts-jest": "^27.0.7",
     "ts-loader": "^9.2.6",

yarn.lock

@@ -8859,10 +8859,10 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-sn-stylekit@5.2.15:
+sn-stylekit@5.2.17:
-  version "5.2.15"
+  version "5.2.17"
-  resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-5.2.15.tgz#6e3e7b4965ec072410edaa365b3edeaeecf37168"
+  resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-5.2.17.tgz#5d8ceefacc044d24f71f99c343bc4e0a9f867e3b"
-  integrity sha512-xx3+MYc9sc86MBUiNztHfxPRamdf5pkLJ4vo0JjMFcXImEI3UQaez42zNcVZke4GBTZCLsLyB6Ovo5Gkv8f6Jg==
+  integrity sha512-YjIstWUjkRYc0zWKxTcLDk8ZKfb9nskQAbsNsihKbJsko1tQbDywrvoQff8TmsE8kXedTd7z/8yUYrYlqgKp6g==
   dependencies:
     "@reach/listbox" "^0.15.0"
     "@reach/menu-button" "^0.15.1"