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">
+      {!hideEditorIcon && (
-        <Icon
+        <div className="icon">
-          ariaLabel={`Icon for ${editorName}`}
+          <Icon
-          type={icon}
+            ariaLabel={`Icon for ${editorName}`}
-          className={`color-accessory-tint-${tint}`}
+            type={icon}
-        />
+            className={`color-accessory-tint-${tint}`}
-      </div>
+          />
-      <div className="meta">
+        </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) {

app/assets/stylesheets/_notes.scss

@@ -138,7 +138,7 @@ notes-view {
       flex-flow: column;
       align-items: center;
       justify-content: space-between;
-      padding: 0.9rem;
+      padding: 1rem;
       padding-right: 0.75rem;
       margin-right: 0;
     }
@@ -146,10 +146,14 @@ notes-view {
     .meta {
       flex-grow: 1;
       min-width: 0;
-      padding: 0.9rem;
+      padding: 1rem;
       padding-left: 0;
       border-bottom: 1px solid var(--sn-stylekit-border-color);
 
+      &.icon-hidden {
+        padding-left: 1rem;
+      }
+
       .name {
         display: flex;
         align-items: center;

package.json

@@ -89,7 +89,7 @@
     "@reach/tooltip": "^0.16.2",
     "@standardnotes/features": "1.20.5",
     "@standardnotes/sncrypto-web": "1.5.3",
-    "@standardnotes/snjs": "2.31.25",
+    "@standardnotes/snjs": "2.33.0",
     "mobx": "^6.3.5",
     "mobx-react-lite": "^3.2.2",
     "preact": "^10.5.15",

yarn.lock

@@ -2636,10 +2636,10 @@
     "@standardnotes/auth" "3.8.3"
     "@standardnotes/common" "1.2.1"
 
-"@standardnotes/settings@^1.8.1":
+"@standardnotes/settings@^1.9.0":
-  version "1.8.1"
+  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.8.1.tgz#a448f2b48a994dab2a84dc93255cd2f9ea0df6af"
+  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.9.0.tgz#0f01da5f6782363e4d77ee584b40f8614c555626"
-  integrity sha512-hQFg4xYkvI7WWRCxYjbyiNW7EjaUlmASGXsd/AoYlHGrlYhTnOEajBEh3sSMMV0b7UUps0wGZcGjQMpq5fabuw==
+  integrity sha512-y+Mh7NuXtekEDr4PAvzg9KcRaCdd+0zlTXWO2D5MG28lLv/uhZmSsyWxZCVZqW3Rx6vz3c9IJdi7SoXN51gzSQ==
 
 "@standardnotes/sncrypto-common@1.5.2", "@standardnotes/sncrypto-common@^1.5.2":
   version "1.5.2"
@@ -2655,16 +2655,16 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.31.25":
+"@standardnotes/snjs@2.33.0":
-  version "2.31.25"
+  version "2.33.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.31.25.tgz#715dbecc0c71cc22a81d93b3aabfe7b436a480ac"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.33.0.tgz#f3d295740471136bf2ec52e1d0e1cdf553923226"
-  integrity sha512-DF0ZcIHfxIpaFepCIXNCVipwjgoy60FrSy5th0kNj5TCOYHryQ9bOiaWXQKHrQUi/8sKYJ+/W1pwRjz6+MpZMw==
+  integrity sha512-KHzxt2CqeFnQgKp6cf+Jqvfx3P0DXP1myEr6a41NmXAQ5qu2ytugyzxiyDyakFvR+Cp7g7GjRA+DwLvO7i1kaA==
   dependencies:
     "@standardnotes/auth" "3.8.1"
     "@standardnotes/common" "1.2.1"
     "@standardnotes/domain-events" "2.5.1"
     "@standardnotes/features" "^1.20.5"
-    "@standardnotes/settings" "^1.8.1"
+    "@standardnotes/settings" "^1.9.0"
     "@standardnotes/sncrypto-common" "1.5.2"
 
 "@svgr/babel-plugin-add-jsx-attribute@^5.4.0":