Simplify privacy dropdown code

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx

@@ -4,20 +4,23 @@ import { useHistory } from 'react-router-dom';
 
 import { userTouching } from 'pl-fe/is-mobile';
 
-import { Counter, Icon } from '../ui';
+import { Counter, Icon, Toggle } from '../ui';
 
 interface MenuItem {
   action?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>;
   active?: boolean;
+  checked?: boolean;
   count?: number;
   destructive?: boolean;
   href?: string;
   icon?: string;
   meta?: string;
   middleClick?(event: React.MouseEvent): void;
+  onChange?: (value: boolean) => void;
   target?: React.HTMLAttributeAnchorTarget;
   text: string;
   to?: string;
+  type?: 'toggle';
 }
 
 interface IDropdownMenuItem {
@@ -67,6 +70,15 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus }: IDropdownMenuItem
     }
   };
 
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (!item) return;
+
+    if (item.onChange) item.onChange(event.target.checked);
+  };
+
   useEffect(() => {
     const firstItem = index === 0;
 
@@ -93,21 +105,29 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus }: IDropdownMenuItem
         target={item.target}
         title={item.text}
         className={
-          clsx({
-            'flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-gray-800 focus:outline-none cursor-pointer black:hover:bg-gray-900 black:focus:bg-gray-900': true,
+          clsx('flex cursor-pointer items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-800 focus:bg-gray-100 focus:text-gray-800 focus:outline-none black:hover:bg-gray-900 black:focus:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:bg-gray-800 dark:focus:text-gray-200', {
             'text-danger-600 dark:text-danger-400': item.destructive,
           })
         }
       >
         {item.icon && <Icon src={item.icon} className='mr-3 h-5 w-5 flex-none rtl:ml-3 rtl:mr-0' />}
 
-        <span className={clsx('truncate font-medium', { 'ml-2': item.count })}>{item.text}</span>
+        <div className={clsx('text-xs', { 'mr-2': item.count || item.type === 'toggle' })}>
+          <div className='truncate text-base'>{item.text}</div>
+          <div className='mt-0.5'>{item.meta}</div>
+        </div>
 
         {item.count ? (
           <span className='ml-auto h-5 w-5 flex-none'>
             <Counter count={item.count} />
           </span>
         ) : null}
+
+        {item.type === 'toggle' && (
+          <div className='ml-auto'>
+            <Toggle checked={item.checked} onChange={handleChange} />
+          </div>
+        )}
       </a>
     </li>
   );

packages/pl-fe/src/components/icon-button.tsx

@@ -33,7 +33,6 @@ const IconButton: React.FC<IIconButton> = ({
   text,
   title,
 }) => {
-
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();