feat: Add option to toggle editor icon in new notes list design (#799)

app/assets/javascripts/components/NotesList.tsx

@@ -29,7 +29,8 @@ export const NotesList: FunctionComponent<Props> = observer(
     paginate,
   }) => {
     const { selectPreviousNote, selectNextNote } = appState.notesView;
-    const { hideTags, hideDate, hideNotePreview, sortBy } = displayOptions;
+    const { hideTags, hideDate, hideNotePreview, hideEditorIcon, sortBy } =
+      displayOptions;
 
     const tagsForNote = (note: SNNote): string[] => {
       if (hideTags) {
@@ -99,6 +100,7 @@ export const NotesList: FunctionComponent<Props> = observer(
             hideDate={hideDate}
             hidePreview={hideNotePreview}
             hideTags={hideTags}
+            hideEditorIcon={hideEditorIcon}
             sortedBy={sortBy}
             onClick={() => {
               appState.notes.selectNote(note.uuid, true);

app/assets/javascripts/components/NotesListItem.tsx

@@ -15,6 +15,7 @@ type Props = {
   hideDate: boolean;
   hidePreview: boolean;
   hideTags: boolean;
+  hideEditorIcon: boolean;
   onClick: () => void;
   onContextMenu: (e: MouseEvent) => void;
   selected: boolean;
@@ -61,6 +62,7 @@ export const NotesListItem: FunctionComponent<Props> = ({
   hideDate,
   hidePreview,
   hideTags,
+  hideEditorIcon,
   note,
   onClick,
   onContextMenu,
@@ -81,14 +83,16 @@ export const NotesListItem: FunctionComponent<Props> = ({
       onClick={onClick}
       onContextMenu={onContextMenu}
     >
-      <div className="icon">
-        <Icon
-          ariaLabel={`Icon for ${editorName}`}
-          type={icon}
-          className={`color-accessory-tint-${tint}`}
-        />
-      </div>
-      <div className="meta">
+      {!hideEditorIcon && (
+        <div className="icon">
+          <Icon
+            ariaLabel={`Icon for ${editorName}`}
+            type={icon}
+            className={`color-accessory-tint-${tint}`}
+          />
+        </div>
+      )}
+      <div className={`meta ${hideEditorIcon ? 'icon-hidden' : ''}`}>
         <div className="name">
           <div>{note.title}</div>
           <div className="flag-icons">

app/assets/javascripts/components/NotesListOptionsMenu.tsx

@@ -46,6 +46,9 @@ flex flex-col py-2 bottom-0 left-2 absolute';
     const [hideProtected, setHideProtected] = useState(() =>
       application.getPreference(PrefKey.NotesHideProtected, false)
     );
+    const [hideEditorIcon, setHideEditorIcon] = useState(() =>
+      application.getPreference(PrefKey.NotesHideEditorIcon, false)
+    );
 
     const toggleSortReverse = () => {
       application.setPreference(PrefKey.SortNotesReverse, !sortReverse);
@@ -108,9 +111,14 @@ flex flex-col py-2 bottom-0 left-2 absolute';
       application.setPreference(PrefKey.NotesHideProtected, !hideProtected);
     };
 
+    const toggleEditorIcon = () => {
+      setHideEditorIcon(!hideEditorIcon);
+      application.setPreference(PrefKey.NotesHideEditorIcon, !hideEditorIcon);
+    };
+
     const menuRef = useRef<HTMLDivElement>(null);
 
-    useCloseOnClickOutside(menuRef as any, (open: boolean) => {
+    useCloseOnClickOutside(menuRef, (open: boolean) => {
       if (!open) {
         closeDisplayOptionsMenu();
       }
@@ -201,6 +209,14 @@ flex flex-col py-2 bottom-0 left-2 absolute';
           >
             Show tags
           </MenuItem>
+          <MenuItem
+            type={MenuItemType.SwitchButton}
+            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+            checked={!hideEditorIcon}
+            onChange={toggleEditorIcon}
+          >
+            Show editor icon
+          </MenuItem>
           <div className="h-1px my-2 bg-border"></div>
           <div className="px-3 py-1 text-xs font-semibold color-text uppercase">
             Other

app/assets/javascripts/components/utils.ts

@@ -32,7 +32,7 @@ export function useCloseOnBlur(
 }
 
 export function useCloseOnClickOutside(
-  container: { current: HTMLDivElement },
+  container: { current: HTMLDivElement | null },
   setOpen: (open: boolean) => void
 ): void {
   const closeOnClickOutside = useCallback(

app/assets/javascripts/ui_models/app_state/notes_view_state.ts

@@ -35,6 +35,7 @@ export type DisplayOptions = {
   hideTags: boolean;
   hideNotePreview: boolean;
   hideDate: boolean;
+  hideEditorIcon: boolean;
 };
 
 export class NotesViewState {
@@ -58,6 +59,7 @@ export class NotesViewState {
     hideTags: true,
     hideDate: false,
     hideNotePreview: false,
+    hideEditorIcon: false,
   };
 
   constructor(
@@ -301,6 +303,10 @@ export class NotesViewState {
       PrefKey.NotesHideTags,
       true
     );
+    freshDisplayOptions.hideEditorIcon = this.application.getPreference(
+      PrefKey.NotesHideEditorIcon,
+      false
+    );
     const displayOptionsChanged =
       freshDisplayOptions.sortBy !== this.displayOptions.sortBy ||
       freshDisplayOptions.sortReverse !== this.displayOptions.sortReverse ||
@@ -308,6 +314,8 @@ export class NotesViewState {
       freshDisplayOptions.showArchived !== this.displayOptions.showArchived ||
       freshDisplayOptions.showTrashed !== this.displayOptions.showTrashed ||
       freshDisplayOptions.hideProtected !== this.displayOptions.hideProtected ||
+      freshDisplayOptions.hideEditorIcon !==
+        this.displayOptions.hideEditorIcon ||
       freshDisplayOptions.hideTags !== this.displayOptions.hideTags;
     this.displayOptions = freshDisplayOptions;
     if (displayOptionsChanged) {