feat: get editor icons and their colors from snjs (#828)

* feat: get editor icons and their colors from snjs

* feat: get icons and their tints from snjs

* fix: use IconType from snjs

app/assets/javascripts/components/Dropdown.tsx

@@ -8,7 +8,8 @@ import {
 } from '@reach/listbox';
 import VisuallyHidden from '@reach/visually-hidden';
 import { FunctionComponent } from 'preact';
-import { IconType, Icon } from './Icon';
+import { Icon } from './Icon';
+import { IconType } from '@standardnotes/snjs';
 
 export type DropdownItem = {
   icon?: IconType;

app/assets/javascripts/components/Icon.tsx

@@ -67,6 +67,7 @@ import MenuArrowDownAlt from '../../icons/ic-menu-arrow-down-alt.svg';
 import MenuArrowRight from '../../icons/ic-menu-arrow-right.svg';
 
 import { FunctionalComponent } from 'preact';
+import { IconType } from '@standardnotes/snjs';
 
 const ICONS = {
   editor: EditorIcon,
@@ -137,8 +138,6 @@ const ICONS = {
   'premium-feature': PremiumFeatureIcon,
 };
 
-export type IconType = keyof typeof ICONS;
-
 type Props = {
   type: IconType;
   className?: string;

app/assets/javascripts/components/IconButton.tsx

@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'preact';
-import { Icon, IconType } from './Icon';
+import { Icon } from './Icon';
+import { IconType } from '@standardnotes/snjs';
 
 interface Props {
   /**

app/assets/javascripts/components/InputWithIcon.tsx

@@ -1,8 +1,9 @@
 import { FunctionComponent, Ref } from 'preact';
 import { JSXInternal } from 'preact/src/jsx';
 import { forwardRef } from 'preact/compat';
-import { Icon, IconType } from './Icon';
+import { Icon } from './Icon';
 import { IconButton } from './IconButton';
+import { IconType } from '@standardnotes/snjs';
 
 type ToggleProps = {
   toggleOnIcon: IconType;

app/assets/javascripts/components/NotesListItem.tsx

@@ -1,4 +1,3 @@
-import { getIconAndTintForEditor } from '@/preferences/panes/general-segments';
 import { WebApplication } from '@/ui_models/application';
 import {
   CollectionSort,
@@ -74,7 +73,9 @@ export const NotesListItem: FunctionComponent<Props> = ({
   const showModifiedDate = sortedBy === CollectionSort.UpdatedAt;
   const editorForNote = application.componentManager.editorForNote(note);
   const editorName = editorForNote?.name ?? 'Plain editor';
-  const [icon, tint] = getIconAndTintForEditor(editorForNote?.identifier);
+  const [icon, tint] = application.iconsController.getIconAndTintForEditor(
+    editorForNote?.identifier
+  );
 
   return (
     <div

app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx

@@ -18,6 +18,7 @@ import {
 } from '@reach/disclosure';
 import {
   ComponentArea,
+  IconType,
   ItemMutator,
   NoteMutator,
   PrefKey,
@@ -27,7 +28,7 @@ import {
 } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
-import { Icon, IconType } from '../Icon';
+import { Icon } from '../Icon';
 import { PremiumModalProvider } from '../Premium';
 import { createEditorMenuGroups } from './changeEditor/createEditorMenuGroups';
 import { EditorAccordionMenu } from './changeEditor/EditorAccordionMenu';

app/assets/javascripts/components/RoundIconButton.tsx

@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'preact';
-import { Icon, IconType } from './Icon';
+import { Icon } from './Icon';
+import { IconType } from '@standardnotes/snjs';
 
 type ButtonType = 'normal' | 'primary';
 

app/assets/javascripts/components/Switch.tsx

@@ -29,7 +29,9 @@ export const Switch: FunctionalComponent<SwitchProps> = (
 
   return (
     <label
-      className={`sn-component flex justify-between items-center cursor-pointer px-3 ${className} ${isDisabled ? 'faded' : ''}`}
+      className={`sn-component flex justify-between items-center cursor-pointer px-3 ${className} ${
+        isDisabled ? 'faded' : ''
+      }`}
       {...(props.role ? { role: props.role } : {})}
     >
       {props.children}
@@ -51,8 +53,9 @@ export const Switch: FunctionalComponent<SwitchProps> = (
         />
         <span
           aria-hidden
-          className={`sn-switch-handle ${checked ? 'sn-switch-handle--right' : ''
-            }`}
+          className={`sn-switch-handle ${
+            checked ? 'sn-switch-handle--right' : ''
+          }`}
         />
       </CustomCheckboxContainer>
     </label>

app/assets/javascripts/components/Tags/SmartTagsListItem.tsx

@@ -1,8 +1,8 @@
-import { Icon, IconType } from '@/components/Icon';
+import { Icon } from '@/components/Icon';
 import { FeaturesState } from '@/ui_models/app_state/features_state';
 import { TagsState } from '@/ui_models/app_state/tags_state';
 import '@reach/tooltip/styles.css';
-import { SNSmartTag } from '@standardnotes/snjs';
+import { SNSmartTag, IconType } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';

app/assets/javascripts/components/menu/MenuItem.tsx

@@ -6,8 +6,9 @@ import {
 } from 'preact';
 import { forwardRef, Ref } from 'preact/compat';
 import { JSXInternal } from 'preact/src/jsx';
-import { Icon, IconType } from '../Icon';
+import { Icon } from '../Icon';
 import { Switch, SwitchProps } from '../Switch';
+import { IconType } from '@standardnotes/snjs';
 
 export enum MenuItemType {
   IconButton,