refactor: menu item

packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx

@@ -9,7 +9,6 @@ import { AccountMenuPane } from './AccountMenuPane'
 import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
 import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
-import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import WorkspaceSwitcherOption from './WorkspaceSwitcher/WorkspaceSwitcherOption'
 import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { formatLastSyncDate } from '@/Utils/DateUtils'
@@ -150,23 +149,23 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
         />
         <MenuItemSeparator />
         {user ? (
-          <MenuItem type={MenuItemType.IconButton} onClick={openPreferences}>
+          <MenuItem onClick={openPreferences}>
             <Icon type="user" className={iconClassName} />
             Account settings
           </MenuItem>
         ) : (
           <>
-            <MenuItem type={MenuItemType.IconButton} onClick={activateRegisterPane}>
+            <MenuItem onClick={activateRegisterPane}>
               <Icon type="user" className={iconClassName} />
               Create free account
             </MenuItem>
-            <MenuItem type={MenuItemType.IconButton} onClick={activateSignInPane}>
+            <MenuItem onClick={activateSignInPane}>
               <Icon type="signIn" className={iconClassName} />
               Sign in
             </MenuItem>
           </>
         )}
-        <MenuItem className="justify-between" type={MenuItemType.IconButton} onClick={openHelp}>
+        <MenuItem className="justify-between" onClick={openHelp}>
           <div className="flex items-center">
             <Icon type="help" className={iconClassName} />
             Help &amp; feedback
@@ -176,7 +175,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
         {user ? (
           <>
             <MenuItemSeparator />
-            <MenuItem type={MenuItemType.IconButton} onClick={signOut}>
+            <MenuItem onClick={signOut}>
               <Icon type="signOut" className={iconClassName} />
               Sign out workspace
             </MenuItem>

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx

@@ -1,6 +1,4 @@
 import Icon from '@/Components/Icon/Icon'
-import MenuItem from '@/Components/Menu/MenuItem'
-import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { ApplicationDescriptor } from '@standardnotes/snjs'
 import {
@@ -13,6 +11,7 @@ import {
   useRef,
   useState,
 } from 'react'
+import MenuRadioButtonItem from '@/Components/Menu/MenuRadioButtonItem'
 
 type Props = {
   descriptor: ApplicationDescriptor
@@ -56,8 +55,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
   }, [inputValue, renameDescriptor])
 
   return (
-    <MenuItem
-      type={MenuItemType.RadioButton}
+    <MenuRadioButtonItem
       className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
       onClick={onClick}
       checked={descriptor.primary}
@@ -100,7 +98,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
           </div>
         )}
       </div>
-    </MenuItem>
+    </MenuRadioButtonItem>
   )
 }
 

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx

@@ -7,7 +7,6 @@ import Icon from '@/Components/Icon/Icon'
 import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
 import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
-import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import WorkspaceMenuItem from './WorkspaceMenuItem'
 
 type Props = {
@@ -85,13 +84,13 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
       ))}
       <MenuItemSeparator />
 
-      <MenuItem type={MenuItemType.IconButton} onClick={addAnotherWorkspace}>
+      <MenuItem onClick={addAnotherWorkspace}>
         <Icon type="user-add" className="mr-2 text-neutral" />
         Add another workspace
       </MenuItem>
 
       {!hideWorkspaceOptions && (
-        <MenuItem type={MenuItemType.IconButton} onClick={signoutAll}>
+        <MenuItem onClick={signoutAll}>
           <Icon type="signOut" className="mr-2 text-neutral" />
           Sign out all workspaces
         </MenuItem>

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx

@@ -6,7 +6,6 @@ import { FunctionComponent, useCallback, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import WorkspaceSwitcherMenu from './WorkspaceSwitcherMenu'
 import MenuItem from '@/Components/Menu/MenuItem'
-import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import Popover from '@/Components/Popover/Popover'
 import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
 
@@ -25,13 +24,7 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
 
   return (
     <>
-      <MenuItem
-        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-        ref={buttonRef}
-        type={MenuItemType.IconButton}
-        onClick={toggleMenu}
-        className="justify-between"
-      >
+      <MenuItem tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} ref={buttonRef} onClick={toggleMenu} className="justify-between">
         <div className="flex items-center">
           <Icon type="user-switch" className={`mr-2 text-neutral ${MenuItemIconSize}`} />
           Switch workspace

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

@@ -1,7 +1,5 @@
 import Icon from '@/Components/Icon/Icon'
 import Menu from '@/Components/Menu/Menu'
-import MenuItem from '@/Components/Menu/MenuItem'
-import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { STRING_EDIT_LOCKED_ATTEMPT } from '@/Constants/Strings'
 import { WebApplication } from '@/Application/Application'
@@ -13,6 +11,7 @@ import { createEditorMenuGroups } from '../../Utils/createEditorMenuGroups'
 import { reloadFont } from '../NoteView/FontFunctions'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import { SuperNoteImporter } from '../NoteView/SuperEditor/SuperNoteImporter'
+import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 
 type ChangeEditorMenuProps = {
   application: WebApplication
@@ -190,12 +189,11 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
                       selectItem(item).catch(console.error)
                     }
                     return (
-                      <MenuItem
+                      <MenuRadioButtonItem
                         key={item.name}
-                        type={MenuItemType.RadioButton}
                         onClick={onClickEditorItem}
                         className={'flex-row-reverse py-2'}
-                        checked={item.isEntitled ? isSelected(item) : undefined}
+                        checked={item.isEntitled ? isSelected(item) : false}
                       >
                         <div className="flex flex-grow items-center justify-between">
                           <div className={`flex items-center ${group.featured ? 'font-bold' : ''}`}>
@@ -206,7 +204,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
                             <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />
                           )}
                         </div>
-                      </MenuItem>
+                      </MenuRadioButtonItem>
                     )
                   })}
                 </div>

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx

@@ -13,15 +13,15 @@ import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import Menu from '@/Components/Menu/Menu'
-import MenuItem from '@/Components/Menu/MenuItem'
 import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
-import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import { DisplayOptionsMenuProps } from './DisplayOptionsMenuProps'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
 import NewNotePreferences from './NewNotePreferences'
 import { PreferenceMode } from './PreferenceMode'
 import { classNames } from '@standardnotes/utils'
 import NoSubscriptionBanner from '@/Components/NoSubscriptionBanner/NoSubscriptionBanner'
+import MenuRadioButtonItem from '@/Components/Menu/MenuRadioButtonItem'
+import MenuSwitchButtonItem from '@/Components/Menu/MenuSwitchButtonItem'
 
 const DailyEntryModeEnabled = true
 
@@ -230,10 +230,9 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
       <MenuItemSeparator />
 
       <div className="my-1 px-3 text-base font-semibold uppercase text-text lg:text-xs">Sort by</div>
-      <MenuItem
+      <MenuRadioButtonItem
         disabled={controlsDisabled || isDailyEntry}
         className="py-2"
-        type={MenuItemType.RadioButton}
         onClick={toggleSortByDateModified}
         checked={preferences.sortBy === CollectionSort.UpdatedAt}
       >
@@ -247,11 +246,10 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
             )
           ) : null}
         </div>
-      </MenuItem>
-      <MenuItem
+      </MenuRadioButtonItem>
+      <MenuRadioButtonItem
         disabled={controlsDisabled || isDailyEntry}
         className="py-2"
-        type={MenuItemType.RadioButton}
         onClick={toggleSortByCreationDate}
         checked={preferences.sortBy === CollectionSort.CreatedAt}
       >
@@ -265,11 +263,10 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
             )
           ) : null}
         </div>
-      </MenuItem>
-      <MenuItem
+      </MenuRadioButtonItem>
+      <MenuRadioButtonItem
         disabled={controlsDisabled || isDailyEntry}
         className="py-2"
-        type={MenuItemType.RadioButton}
         onClick={toggleSortByTitle}
         checked={preferences.sortBy === CollectionSort.Title}
       >
@@ -283,92 +280,83 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
             )
           ) : null}
         </div>
-      </MenuItem>
+      </MenuRadioButtonItem>
       <MenuItemSeparator />
       <div className="px-3 py-1 text-base font-semibold uppercase text-text lg:text-xs">View</div>
       {!isFilesSmartView && (
-        <MenuItem
+        <MenuSwitchButtonItem
           disabled={controlsDisabled}
-          type={MenuItemType.SwitchButton}
           className="py-1 hover:bg-contrast focus:bg-info-backdrop"
           checked={!preferences.hideNotePreview}
           onChange={toggleHidePreview}
         >
           <div className="max-w-3/4 flex flex-col">Show note preview</div>
-        </MenuItem>
+        </MenuSwitchButtonItem>
       )}
-      <MenuItem
+      <MenuSwitchButtonItem
         disabled={controlsDisabled}
-        type={MenuItemType.SwitchButton}
         className="py-1 hover:bg-contrast focus:bg-info-backdrop"
         checked={!preferences.hideDate}
         onChange={toggleHideDate}
       >
         Show date
-      </MenuItem>
-      <MenuItem
+      </MenuSwitchButtonItem>
+      <MenuSwitchButtonItem
         disabled={controlsDisabled}
-        type={MenuItemType.SwitchButton}
         className="py-1 hover:bg-contrast focus:bg-info-backdrop"
         checked={!preferences.hideTags}
         onChange={toggleHideTags}
       >
         Show tags
-      </MenuItem>
-      <MenuItem
+      </MenuSwitchButtonItem>
+      <MenuSwitchButtonItem
         disabled={controlsDisabled}
-        type={MenuItemType.SwitchButton}
         className="py-1 hover:bg-contrast focus:bg-info-backdrop"
         checked={!preferences.hideEditorIcon}
         onChange={toggleEditorIcon}
       >
         Show icon
-      </MenuItem>
+      </MenuSwitchButtonItem>
       <MenuItemSeparator />
       <div className="px-3 py-1 text-base font-semibold uppercase text-text lg:text-xs">Other</div>
-      <MenuItem
+      <MenuSwitchButtonItem
         disabled={controlsDisabled}
-        type={MenuItemType.SwitchButton}
         className="py-1 hover:bg-contrast focus:bg-info-backdrop"
         checked={!preferences.hidePinned}
         onChange={toggleHidePinned}
       >
         Show pinned
-      </MenuItem>
-      <MenuItem
+      </MenuSwitchButtonItem>
+      <MenuSwitchButtonItem
         disabled={controlsDisabled}
-        type={MenuItemType.SwitchButton}
         className="py-1 hover:bg-contrast focus:bg-info-backdrop"
         checked={!preferences.hideProtected}
         onChange={toggleHideProtected}
       >
         Show protected
-      </MenuItem>
-      <MenuItem
+      </MenuSwitchButtonItem>
+      <MenuSwitchButtonItem
         disabled={controlsDisabled}
-        type={MenuItemType.SwitchButton}
         className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-        checked={preferences.showArchived}
+        checked={Boolean(preferences.showArchived)}
         onChange={toggleShowArchived}
       >
         Show archived
-      </MenuItem>
-      <MenuItem
+      </MenuSwitchButtonItem>
+      <MenuSwitchButtonItem
         disabled={controlsDisabled}
-        type={MenuItemType.SwitchButton}
         className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-        checked={preferences.showTrashed}
+        checked={Boolean(preferences.showTrashed)}
         onChange={toggleShowTrashed}
       >
         Show trashed
-      </MenuItem>
+      </MenuSwitchButtonItem>
 
       {currentMode === 'tag' && DailyEntryModeEnabled && (
         <>
           <MenuItemSeparator />
-          <MenuItem
+          <MenuSwitchButtonItem
             disabled={controlsDisabled}
-            type={MenuItemType.SwitchButton}
             className="py-1 hover:bg-contrast focus:bg-info-backdrop"
             checked={isDailyEntry}
             onChange={toggleEntryMode}
@@ -382,7 +370,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
               </div>
               <div className="mt-1">Capture new notes daily with a calendar-based layout</div>
             </div>
-          </MenuItem>
+          </MenuSwitchButtonItem>
         </>
       )}
 

packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx

@@ -9,8 +9,8 @@ import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import MenuItem from '../Menu/MenuItem'
-import { MenuItemType } from '../Menu/MenuItemType'
 import { FileContextMenuBackupOption } from './FileContextMenuBackupOption'
+import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 
 type Props = {
   closeMenu: () => void
@@ -83,16 +83,15 @@ const FileMenuOptions: FunctionComponent<Props> = ({
           ) : null}
         </>
       )}
-      <MenuItem
-        type={MenuItemType.SwitchButton}
+      <MenuSwitchButtonItem
         checked={hasProtectedFiles}
         onChange={(hasProtectedFiles) => {
           void filesController.setProtectionForFiles(hasProtectedFiles, selectionController.selectedFiles)
         }}
       >
         <Icon type="lock" className="mr-2 text-neutral" />
         Password protect
-      </MenuItem>
+      </MenuSwitchButtonItem>
       <HorizontalSeparator classes="my-1" />
       <MenuItem
         onClick={() => {

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsSectionItem.tsx

@@ -12,7 +12,6 @@ import { useApplication } from '../ApplicationView/ApplicationProvider'
 import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
 import Icon from '../Icon/Icon'
 import MenuItem from '../Menu/MenuItem'
-import { MenuItemType } from '../Menu/MenuItemType'
 import Popover from '../Popover/Popover'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import LinkedFileMenuOptions from './LinkedFileMenuOptions'
@@ -107,7 +106,6 @@ export const LinkedItemsSectionItem = ({
         className="py-2"
       >
         <MenuItem
-          type={MenuItemType.IconButton}
           onClick={() => {
             unlinkItem()
             toggleMenu()