chore: app group optimizations (#1027)

app/assets/javascripts/Components/NotesList/NotesListItem.tsx

@@ -53,7 +53,7 @@ export const NotesListItem: FunctionComponent<Props> = ({
   const showModifiedDate = sortedBy === CollectionSort.UpdatedAt
   const editorForNote = application.componentManager.editorForNote(note)
   const editorName = editorForNote?.name ?? PLAIN_EDITOR_NAME
-  const [icon, tint] = application.iconsController.getIconAndTintForEditor(editorForNote?.identifier)
+  const [icon, tint] = application.iconsController.getIconAndTintForNoteType(editorForNote?.package_info.note_type)
 
   return (
     <div

app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx

@@ -2,7 +2,7 @@ import { WebApplication } from '@/UIModels/Application'
 import { CollectionSort, CollectionSortProperty, PrefKey } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { useState } from 'preact/hooks'
+import { useCallback, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { Menu } from '@/Components/Menu/Menu'
 import { MenuItem, MenuItemSeparator, MenuItemType } from '@/Components/Menu/MenuItem'
@@ -31,71 +31,74 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
       application.getPreference(PrefKey.NotesHideEditorIcon, false),
     )
 
-    const toggleSortReverse = () => {
+    const toggleSortReverse = useCallback(() => {
       application.setPreference(PrefKey.SortNotesReverse, !sortReverse).catch(console.error)
       setSortReverse(!sortReverse)
-    }
+    }, [application, sortReverse])
 
-    const toggleSortBy = (sort: CollectionSortProperty) => {
-      if (sortBy === sort) {
-        toggleSortReverse()
-      } else {
-        setSortBy(sort)
-        application.setPreference(PrefKey.SortNotesBy, sort).catch(console.error)
-      }
-    }
+    const toggleSortBy = useCallback(
+      (sort: CollectionSortProperty) => {
+        if (sortBy === sort) {
+          toggleSortReverse()
+        } else {
+          setSortBy(sort)
+          application.setPreference(PrefKey.SortNotesBy, sort).catch(console.error)
+        }
+      },
+      [application, sortBy, toggleSortReverse],
+    )
 
-    const toggleSortByDateModified = () => {
+    const toggleSortByDateModified = useCallback(() => {
       toggleSortBy(CollectionSort.UpdatedAt)
-    }
+    }, [toggleSortBy])
 
-    const toggleSortByCreationDate = () => {
+    const toggleSortByCreationDate = useCallback(() => {
       toggleSortBy(CollectionSort.CreatedAt)
-    }
+    }, [toggleSortBy])
 
-    const toggleSortByTitle = () => {
+    const toggleSortByTitle = useCallback(() => {
       toggleSortBy(CollectionSort.Title)
-    }
+    }, [toggleSortBy])
 
-    const toggleHidePreview = () => {
+    const toggleHidePreview = useCallback(() => {
       setHidePreview(!hidePreview)
       application.setPreference(PrefKey.NotesHideNotePreview, !hidePreview).catch(console.error)
-    }
+    }, [application, hidePreview])
 
-    const toggleHideDate = () => {
+    const toggleHideDate = useCallback(() => {
       setHideDate(!hideDate)
       application.setPreference(PrefKey.NotesHideDate, !hideDate).catch(console.error)
-    }
+    }, [application, hideDate])
 
-    const toggleHideTags = () => {
+    const toggleHideTags = useCallback(() => {
       setHideTags(!hideTags)
       application.setPreference(PrefKey.NotesHideTags, !hideTags).catch(console.error)
-    }
+    }, [application, hideTags])
 
-    const toggleHidePinned = () => {
+    const toggleHidePinned = useCallback(() => {
       setHidePinned(!hidePinned)
       application.setPreference(PrefKey.NotesHidePinned, !hidePinned).catch(console.error)
-    }
+    }, [application, hidePinned])
 
-    const toggleShowArchived = () => {
+    const toggleShowArchived = useCallback(() => {
       setShowArchived(!showArchived)
       application.setPreference(PrefKey.NotesShowArchived, !showArchived).catch(console.error)
-    }
+    }, [application, showArchived])
 
-    const toggleShowTrashed = () => {
+    const toggleShowTrashed = useCallback(() => {
       setShowTrashed(!showTrashed)
       application.setPreference(PrefKey.NotesShowTrashed, !showTrashed).catch(console.error)
-    }
+    }, [application, showTrashed])
 
-    const toggleHideProtected = () => {
+    const toggleHideProtected = useCallback(() => {
       setHideProtected(!hideProtected)
       application.setPreference(PrefKey.NotesHideProtected, !hideProtected).catch(console.error)
-    }
+    }, [application, hideProtected])
 
-    const toggleEditorIcon = () => {
+    const toggleEditorIcon = useCallback(() => {
       setHideEditorIcon(!hideEditorIcon)
       application.setPreference(PrefKey.NotesHideEditorIcon, !hideEditorIcon).catch(console.error)
-    }
+    }, [application, hideEditorIcon])
 
     return (
       <Menu

app/assets/javascripts/Components/NotesList/index.tsx

@@ -7,6 +7,7 @@ import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { NotesListItem } from './NotesListItem'
 import { FOCUSABLE_BUT_NOT_TABBABLE, NOTES_LIST_SCROLL_THRESHOLD } from '@/Constants'
+import { useCallback } from 'preact/hooks'
 
 type Props = {
   application: WebApplication
@@ -19,55 +20,72 @@ type Props = {
 
 export const NotesList: FunctionComponent<Props> = observer(
   ({ application, appState, notes, selectedNotes, displayOptions, paginate }) => {
-    const { selectPreviousNote, selectNextNote } = appState.notesView
+    const selectNextNote = useCallback(() => appState.notesView.selectNextNote, [appState])
+    const selectPreviousNote = useCallback(() => appState.notesView.selectPreviousNote, [appState])
+
     const { hideTags, hideDate, hideNotePreview, hideEditorIcon, sortBy } = displayOptions
 
-    const tagsForNote = (note: SNNote): string[] => {
-      if (hideTags) {
-        return []
-      }
-      const selectedTag = appState.selectedTag
-      if (!selectedTag) {
-        return []
-      }
-      const tags = appState.getNoteTags(note)
-      if (selectedTag instanceof SNTag && tags.length === 1) {
-        return []
-      }
-      return tags.map((tag) => tag.title).sort()
-    }
+    const tagsForNote = useCallback(
+      (note: SNNote): string[] => {
+        if (hideTags) {
+          return []
+        }
+        const selectedTag = appState.selectedTag
+        if (!selectedTag) {
+          return []
+        }
+        const tags = appState.getNoteTags(note)
+        if (selectedTag instanceof SNTag && tags.length === 1) {
+          return []
+        }
+        return tags.map((tag) => tag.title).sort()
+      },
+      [appState, hideTags],
+    )
 
-    const openNoteContextMenu = (posX: number, posY: number) => {
-      appState.notes.setContextMenuClickLocation({
-        x: posX,
-        y: posY,
-      })
-      appState.notes.reloadContextMenuLayout()
-      appState.notes.setContextMenuOpen(true)
-    }
+    const openNoteContextMenu = useCallback(
+      (posX: number, posY: number) => {
+        appState.notes.setContextMenuClickLocation({
+          x: posX,
+          y: posY,
+        })
+        appState.notes.reloadContextMenuLayout()
+        appState.notes.setContextMenuOpen(true)
+      },
+      [appState],
+    )
 
-    const onContextMenu = (note: SNNote, posX: number, posY: number) => {
-      appState.notes.selectNote(note.uuid, true).catch(console.error)
-      openNoteContextMenu(posX, posY)
-    }
+    const onContextMenu = useCallback(
+      (note: SNNote, posX: number, posY: number) => {
+        appState.notes.selectNote(note.uuid, true).catch(console.error)
+        openNoteContextMenu(posX, posY)
+      },
+      [appState, openNoteContextMenu],
+    )
 
-    const onScroll = (e: Event) => {
-      const offset = NOTES_LIST_SCROLL_THRESHOLD
-      const element = e.target as HTMLElement
-      if (element.scrollTop + element.offsetHeight >= element.scrollHeight - offset) {
-        paginate()
-      }
-    }
+    const onScroll = useCallback(
+      (e: Event) => {
+        const offset = NOTES_LIST_SCROLL_THRESHOLD
+        const element = e.target as HTMLElement
+        if (element.scrollTop + element.offsetHeight >= element.scrollHeight - offset) {
+          paginate()
+        }
+      },
+      [paginate],
+    )
 
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === KeyboardKey.Up) {
-        e.preventDefault()
-        selectPreviousNote()
-      } else if (e.key === KeyboardKey.Down) {
-        e.preventDefault()
-        selectNextNote()
-      }
-    }
+    const onKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (e.key === KeyboardKey.Up) {
+          e.preventDefault()
+          selectPreviousNote()
+        } else if (e.key === KeyboardKey.Down) {
+          e.preventDefault()
+          selectNextNote()
+        }
+      },
+      [selectNextNote, selectPreviousNote],
+    )
 
     return (
       <div