feat: show selected editor icon in change editor button (#1615)

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx

@@ -5,6 +5,7 @@ import { FunctionComponent, useCallback, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import ChangeEditorMenu from './ChangeEditorMenu'
 import Popover from '../Popover/Popover'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   application: WebApplication
@@ -21,6 +22,12 @@ const ChangeEditorButton: FunctionComponent<Props> = ({
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
+  const [selectedEditor, setSelectedEditor] = useState(() => {
+    return note ? application.componentManager.editorForNote(note) : undefined
+  })
+  const [selectedEditorIcon, selectedEditorIconTint] = application.iconsController.getIconAndTintForNoteType(
+    selectedEditor?.package_info.note_type,
+  )
 
   const toggleMenu = useCallback(async () => {
     const willMenuOpen = !isOpen
@@ -33,13 +40,16 @@ const ChangeEditorButton: FunctionComponent<Props> = ({
   return (
     <div ref={containerRef}>
       <button
-        className="bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast"
+        className={classNames(
+          'bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid text-neutral hover:bg-contrast focus:bg-contrast',
+          `border-accessory-tint-${selectedEditorIconTint}`,
+        )}
         title="Change note type"
         aria-label="Change note type"
         onClick={toggleMenu}
         ref={buttonRef}
       >
-        <Icon type="dashboard" />
+        <Icon type={selectedEditorIcon} className={`text-accessory-tint-${selectedEditorIconTint}`} />
       </button>
       <Popover togglePopover={toggleMenu} anchorElement={buttonRef.current} open={isOpen} className="pt-2 md:pt-0">
         <ChangeEditorMenu
@@ -49,6 +59,9 @@ const ChangeEditorButton: FunctionComponent<Props> = ({
           closeMenu={() => {
             setIsOpen(false)
           }}
+          onSelect={(component) => {
+            setSelectedEditor(component)
+          }}
         />
       </Popover>
     </div>

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -31,11 +31,18 @@ type ChangeEditorMenuProps = {
   closeMenu: () => void
   isVisible: boolean
   note: SNNote | undefined
+  onSelect?: (component: SNComponent | undefined) => void
 }
 
 const getGroupId = (group: EditorMenuGroup) => group.title.toLowerCase().replace(/\s/, '-')
 
-const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({ application, closeMenu, isVisible, note }) => {
+const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
+  application,
+  closeMenu,
+  isVisible,
+  note,
+  onSelect,
+}) => {
   const editors = useMemo(
     () =>
       application.componentManager.componentsForArea(ComponentArea.Editor).sort((a, b) => {
@@ -162,8 +169,12 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({ applicatio
       }
 
       closeMenu()
+
+      if (onSelect) {
+        onSelect(itemToBeSelected.component)
+      }
     },
-    [application.componentManager, closeMenu, currentEditor, note, premiumModal, selectComponent],
+    [application.componentManager, closeMenu, currentEditor, note, onSelect, premiumModal, selectComponent],
   )
 
   return (

packages/web/src/javascripts/Controllers/NotesController.ts

@@ -116,7 +116,7 @@ export class NotesController extends AbstractViewController {
     return this.application.items.trashedItems.length
   }
 
-  setContextMenuOpen(open: boolean): void {
+  setContextMenuOpen = (open: boolean) => {
     this.contextMenuOpen = open
   }
 

packages/web/tailwind.config.js

@@ -135,6 +135,12 @@ module.exports = {
     'text-accessory-tint-4',
     'text-accessory-tint-5',
     'text-accessory-tint-6',
+    'border-accessory-tint-1',
+    'border-accessory-tint-2',
+    'border-accessory-tint-3',
+    'border-accessory-tint-4',
+    'border-accessory-tint-5',
+    'border-accessory-tint-6',
   ],
   plugins: [
     plugin(function ({ addVariant }) {