feat: use pencil off icon for note bar

app/assets/javascripts/app.ts

@@ -59,10 +59,11 @@ import { SessionsModalDirective } from './components/SessionsModal';
 import { NoAccountWarningDirective } from './components/NoAccountWarning';
 import { NoProtectionsdNoteWarningDirective } from './components/NoProtectionsNoteWarning';
 import { SearchOptionsDirective } from './components/SearchOptions';
-import { MultipleSelectedNotesDirective } from './components/MultipleSelectedNotes';
 import { ConfirmSignoutDirective } from './components/ConfirmSignoutModal';
+import { MultipleSelectedNotesDirective } from './components/MultipleSelectedNotes';
 import { NotesContextMenuDirective } from './components/NotesContextMenu';
 import { NotesOptionsPanelDirective } from './components/NotesOptionsPanel';
+import { IconDirective } from './components/Icon';
 
 function reloadHiddenFirefoxTab(): boolean {
   /**
@@ -152,10 +153,11 @@ const startApplication: StartApplication = async function startApplication(
     .directive('noAccountWarning', NoAccountWarningDirective)
     .directive('protectedNotePanel', NoProtectionsdNoteWarningDirective)
     .directive('searchOptions', SearchOptionsDirective)
+    .directive('confirmSignout', ConfirmSignoutDirective)
     .directive('multipleSelectedNotesPanel', MultipleSelectedNotesDirective)
     .directive('notesContextMenu', NotesContextMenuDirective)
     .directive('notesOptionsPanel', NotesOptionsPanelDirective)
-    .directive('confirmSignout', ConfirmSignoutDirective);
+    .directive('icon', IconDirective);
 
   // Filters
   angular.module('app').filter('trusted', ['$sce', trusted]);

app/assets/javascripts/components/Icon.tsx

@@ -0,0 +1,46 @@
+import PencilOffIcon from '../../icons/ic-pencil-off.svg';
+import RichTextIcon from '../../icons/ic-text-rich.svg';
+import TrashIcon from '../../icons/ic-trash.svg';
+import PinIcon from '../../icons/ic-pin.svg';
+import UnpinIcon from '../../icons/ic-pin-off.svg';
+import ArchiveIcon from '../../icons/ic-archive.svg';
+import UnarchiveIcon from '../../icons/ic-unarchive.svg';
+import { toDirective } from './utils';
+
+export enum IconType {
+  PencilOff = 'pencil-off',
+  RichText = 'rich-text',
+  Trash = 'trash',
+  Pin = 'pin',
+  Unpin = 'unpin',
+  Archive = 'archive',
+  Unarchive = 'unarchive'
+}
+
+const ICONS = {
+  [IconType.PencilOff]: PencilOffIcon,
+  [IconType.RichText]: RichTextIcon,
+  [IconType.Trash]: TrashIcon,
+  [IconType.Pin]: PinIcon,
+  [IconType.Unpin]: UnpinIcon,
+  [IconType.Archive]: ArchiveIcon,
+  [IconType.Unarchive]: UnarchiveIcon
+};
+
+type Props = {
+  type: IconType;
+  className: string;
+}
+
+export const Icon: React.FC<Props> = ({ type, className }) => {
+  const IconComponent = ICONS[type];
+  return type ? <IconComponent className={className} /> : null;
+};
+
+export const IconDirective = toDirective<Props>(
+  Icon,
+  {
+    type: '@',
+    className: '@',
+  }
+);

app/assets/javascripts/components/NotesOptions.tsx

@@ -1,11 +1,5 @@
 import { AppState } from '@/ui_models/app_state';
-import PencilOffIcon from '../../icons/ic-pencil-off.svg';
-import RichTextIcon from '../../icons/ic-text-rich.svg';
-import TrashIcon from '../../icons/ic-trash.svg';
-import PinIcon from '../../icons/ic-pin.svg';
-import UnpinIcon from '../../icons/ic-pin-off.svg';
-import ArchiveIcon from '../../icons/ic-archive.svg';
-import UnarchiveIcon from '../../icons/ic-unarchive.svg';
+import { Icon, IconType } from './Icon';
 import { Switch } from './Switch';
 import { observer } from 'mobx-react-lite';
 import { useRef } from 'preact/hooks';
@@ -32,7 +26,7 @@ export const NotesOptions = observer(
 
     const iconClass = 'fill-current color-neutral mr-2';
     const buttonClass =
-      'flex items-center border-0 capitalize focus:inner-ring-info ' +
+      'flex items-center border-0 focus:inner-ring-info ' +
       'cursor-pointer hover:bg-contrast color-text bg-transparent h-10 px-3 ' +
       'text-left';
 
@@ -46,8 +40,8 @@ export const NotesOptions = observer(
             appState.notes.setLockSelectedNotes(!locked);
           }}
         >
-          <span className="capitalize flex items-center">
-            <PencilOffIcon className={iconClass} />
+          <span className="flex items-center">
+            <Icon type={IconType.PencilOff} className={iconClass} />
             Prevent editing
           </span>
         </Switch>
@@ -59,9 +53,9 @@ export const NotesOptions = observer(
             appState.notes.setHideSelectedNotePreviews(!hidePreviews);
           }}
         >
-          <span className="capitalize flex items-center">
-            <RichTextIcon className={iconClass} />
-            Show Preview
+          <span className="flex items-center">
+            <Icon type={IconType.RichText} className={iconClass} />
+            Show preview
           </span>
         </Switch>
         <div className="h-1px my-2 bg-secondary-contrast"></div>
@@ -72,17 +66,8 @@ export const NotesOptions = observer(
             appState.notes.setPinSelectedNotes(!pinned);
           }}
         >
-          {pinned ? (
-            <>
-              <UnpinIcon className={iconClass} />
-              Unpin notes
-            </>
-          ) : (
-            <>
-              <PinIcon className={iconClass} />
-              Pin notes
-            </>
-          )}
+          <Icon type={pinned ? IconType.Unpin : IconType.Pin} className={iconClass} />
+          {pinned ? 'Unpin notes' : 'Pin notes'}
         </button>
         <button
           onBlur={closeOnBlur}
@@ -91,17 +76,8 @@ export const NotesOptions = observer(
             appState.notes.setArchiveSelectedNotes(!archived);
           }}
         >
-          {archived ? (
-            <>
-              <UnarchiveIcon className={iconClass} />
-              Unarchive
-            </>
-          ) : (
-            <>
-              <ArchiveIcon className={iconClass} />
-              Archive
-            </>
-          )}
+          <Icon type={archived ? IconType.Unarchive : IconType.Archive} className={iconClass} />
+          {archived ? 'Unarchive' : 'Archive'}
         </button>
         <button
           ref={trashButtonRef}
@@ -113,8 +89,8 @@ export const NotesOptions = observer(
             setLockCloseOnBlur(false);
           }}
         >
-          <TrashIcon className={iconClass} />
-          {trashed ? 'Restore' : 'Move to trash'}
+          <Icon type={IconType.Trash} className={iconClass} />
+          {trashed ? 'Restore' : 'Move to Trash'}
         </button>
       </>
     );

app/assets/javascripts/components/utils.ts

@@ -39,7 +39,7 @@ export function useCloseOnBlur(
 
 export function toDirective<Props>(
   component: FunctionComponent<Props>,
-  scope: Record<string, '=' | '&'> = {}
+  scope: Record<string, '=' | '&' | '@'> = {}
 ) {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   return function () {

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

@@ -10,15 +10,20 @@
     .sn-component
       .sk-app-bar.no-edges(
         ng-if='self.noteLocked',
-        ng-init="self.lockText = 'Note Editing Disabled'",
-        ng-mouseleave="self.lockText = 'Note Editing Disabled'",
-        ng-mouseover="self.lockText = 'Enable Editing'"
+        ng-init="self.lockText = 'Note Editing Disabled'; self.showLockedIcon = true",
+        ng-mouseleave="self.lockText = 'Note Editing Disabled'; self.showLockedIcon = true",
+        ng-mouseover="self.lockText = 'Enable editing'; self.showLockedIcon = false"
         )
-        .left
-          .sk-app-bar-item(ng-click='self.toggleLockNote()')
-            .sk-label.warning
-              i.icon.ion-locked
-              | {{self.lockText}}
+        .sk-app-bar-item(
+            ng-click='self.toggleLockNote()'
+          )
+          .sk-label.warning.flex.items-center
+            icon.flex(
+              type="pencil-off"
+              class-name="fill-current mr-2"
+              ng-if="self.showLockedIcon"
+            )
+            | {{self.lockText}}
     #editor-title-bar.section-title-bar.flex.items-center.justify-between.w-full(
       ng-class="{'locked' : self.noteLocked}",
       ng-show='self.note && !self.note.errorDecrypting'

app/assets/stylesheets/_sn.scss

@@ -36,6 +36,10 @@
   display: grid;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -182,3 +186,7 @@ $border-width: 2px;
     );
   }
 }
+
+.sn-component .sk-app-bar .sk-app-bar-item {
+  justify-content: flex-start;
+}