feat: per-tag display preferences (#1868)

packages/web/src/javascripts/Components/Menu/MenuItem.tsx

@@ -19,6 +19,7 @@ type MenuItemProps = {
   icon?: IconType
   iconClassName?: string
   tabIndex?: number
+  disabled?: boolean
 }
 
 const MenuItem = forwardRef(
@@ -34,12 +35,14 @@ const MenuItem = forwardRef(
       icon,
       iconClassName,
       tabIndex,
+      disabled,
     }: MenuItemProps,
     ref: Ref<HTMLButtonElement>,
   ) => {
     return type === MenuItemType.SwitchButton && typeof onChange === 'function' ? (
       <li className="list-none" role="none">
         <button
+          disabled={disabled}
           ref={ref}
           className={classNames(
             'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5',
@@ -54,12 +57,13 @@ const MenuItem = forwardRef(
           aria-checked={checked}
         >
           <span className="flex flex-grow items-center">{children}</span>
-          <Switch className="px-0" checked={checked} />
+          <Switch disabled={disabled} className="px-0" checked={checked} />
         </button>
       </li>
     ) : (
       <li className="list-none" role="none">
         <button
+          disabled={disabled}
           ref={ref}
           role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'}
           tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
@@ -75,7 +79,7 @@ const MenuItem = forwardRef(
         >
           {type === MenuItemType.IconButton && icon ? <Icon type={icon} className={iconClassName} /> : null}
           {type === MenuItemType.RadioButton && typeof checked === 'boolean' ? (
-            <RadioIndicator checked={checked} className="flex-shrink-0" />
+            <RadioIndicator disabled={disabled} checked={checked} className="flex-shrink-0" />
           ) : null}
           {children}
         </button>