chore(channels): enhance channels search

src/ui/components/pages/Channels/ChannelCard/ChannelActions/index.tsx

@@ -20,105 +20,107 @@ interface ChannelActionsProps {
   channel: Channel;
 }
 
-function ChannelActions(props: ChannelActionsProps) {
-  const { channel } = props;
-  const [anchorEl, setAnchorEl] = useState<Nullable<HTMLElement>>(null);
-  const [openedDialog, setOpenedDialog] = useState<Nullable<string>>(null);
-  const dispatch = useAppDispatch();
-  const isMenuOpen = Boolean(anchorEl);
+const ChannelActions = React.forwardRef<HTMLButtonElement, ChannelActionsProps>(
+  (props, ref) => {
+    const { channel } = props;
+    const [anchorEl, setAnchorEl] = useState<Nullable<HTMLElement>>(null);
+    const [openedDialog, setOpenedDialog] = useState<Nullable<string>>(null);
+    const dispatch = useAppDispatch();
+    const isMenuOpen = Boolean(anchorEl);
 
-  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
+    const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
 
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-  };
+    const handleMenuClose = () => {
+      setAnchorEl(null);
+    };
 
-  const handleRemoveClick = () => {
-    setOpenedDialog('remove-channel');
-    handleMenuClose();
-  };
+    const handleRemoveClick = () => {
+      setOpenedDialog('remove-channel');
+      handleMenuClose();
+    };
 
-  const handleFiltersClick = () => {
-    setOpenedDialog('channel-filters');
-    handleMenuClose();
-  };
+    const handleFiltersClick = () => {
+      setOpenedDialog('channel-filters');
+      handleMenuClose();
+    };
 
-  const handleDialogsClose = () => {
-    setOpenedDialog(null);
-  };
+    const handleDialogsClose = () => {
+      setOpenedDialog(null);
+    };
 
-  return (
-    <>
-      <IconButton aria-label="settings" onClick={handleMenuClick}>
-        <MoreVertIcon />
-      </IconButton>
-      <StyledMenu
-        anchorEl={anchorEl}
-        open={isMenuOpen}
-        onClose={handleMenuClose}
-      >
-        <MenuItem
-          onClick={() => {
-            dispatch(toggleChannelNotifications(channel));
-            handleMenuClose();
-          }}
-          disableRipple
-        >
-          {channel.notifications?.isDisabled ? (
-            <>
-              <NotificationsActiveOutlinedIcon />
-              Enable notifications
-            </>
-          ) : (
-            <>
-              <NotificationsOffOutlinedIcon />
-              Disable notifications
-            </>
-          )}
-        </MenuItem>
-        <MenuItem onClick={handleFiltersClick} disableRipple>
-          <FilterListIcon />
-          Filters
-        </MenuItem>
-        <Divider sx={{ my: 0.5 }} />
-        <MenuItem
-          onClick={() => {
-            dispatch(toggleChannel(channel));
-            handleMenuClose();
-          }}
-          disableRipple
-        >
-          {channel.isHidden ? (
-            <>
-              <VisibilityOutlinedIcon />
-              Unhide
-            </>
-          ) : (
-            <>
-              <VisibilityOffOutlinedIcon />
-              Hide
-            </>
-          )}
-        </MenuItem>
-        <MenuItem
-          sx={{ color: 'primary.main' }}
-          onClick={handleRemoveClick}
-          disableRipple
+    return (
+      <>
+        <IconButton ref={ref} aria-label="settings" onClick={handleMenuClick}>
+          <MoreVertIcon />
+        </IconButton>
+        <StyledMenu
+          anchorEl={anchorEl}
+          open={isMenuOpen}
+          onClose={handleMenuClose}
         >
-          <DeleteOutlineOutlinedIcon className="inherit-color" />
-          Remove
-        </MenuItem>
-      </StyledMenu>
-      <ChannelDialogs
-        channel={channel}
-        openedDialog={openedDialog}
-        onClose={handleDialogsClose}
-      />
-    </>
-  );
-}
+          <MenuItem
+            onClick={() => {
+              dispatch(toggleChannelNotifications(channel));
+              handleMenuClose();
+            }}
+            disableRipple
+          >
+            {channel.notifications?.isDisabled ? (
+              <>
+                <NotificationsActiveOutlinedIcon />
+                Enable notifications
+              </>
+            ) : (
+              <>
+                <NotificationsOffOutlinedIcon />
+                Disable notifications
+              </>
+            )}
+          </MenuItem>
+          <MenuItem onClick={handleFiltersClick} disableRipple>
+            <FilterListIcon />
+            Filters
+          </MenuItem>
+          <Divider sx={{ my: 0.5 }} />
+          <MenuItem
+            onClick={() => {
+              dispatch(toggleChannel(channel));
+              handleMenuClose();
+            }}
+            disableRipple
+          >
+            {channel.isHidden ? (
+              <>
+                <VisibilityOutlinedIcon />
+                Unhide
+              </>
+            ) : (
+              <>
+                <VisibilityOffOutlinedIcon />
+                Hide
+              </>
+            )}
+          </MenuItem>
+          <MenuItem
+            sx={{ color: 'primary.main' }}
+            onClick={handleRemoveClick}
+            disableRipple
+          >
+            <DeleteOutlineOutlinedIcon className="inherit-color" />
+            Remove
+          </MenuItem>
+        </StyledMenu>
+        <ChannelDialogs
+          channel={channel}
+          openedDialog={openedDialog}
+          onClose={handleDialogsClose}
+        />
+      </>
+    );
+  }
+);
 
 function propsAreEqual(
   prevProps: ChannelActionsProps,

src/ui/components/pages/Channels/ChannelResults/PickChannelActions.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Tooltip, IconButton, Fade } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import { Channel } from 'types';
+import { useAppDispatch } from 'store';
+import { addChannel } from 'store/reducers/channels';
+import ChannelActions from '../ChannelCard/ChannelActions';
+
+interface PickChannelActionsProps {
+  channel: Channel;
+  canEdit?: boolean;
+}
+
+function PickChannelActions(props: PickChannelActionsProps) {
+  const { channel, canEdit } = props;
+  const dispatch = useAppDispatch();
+
+  const handleClick = () => {
+    dispatch(addChannel(channel));
+  };
+
+  return canEdit ? (
+    <Fade in={true}>
+      <ChannelActions channel={channel} />
+    </Fade>
+  ) : (
+    <Tooltip title="Add channel" placement="left" arrow>
+      <Fade in={true}>
+        <IconButton
+          sx={{
+            border: 1,
+            transition: (theme) =>
+              theme.transitions.create([
+                'color',
+                'background-color',
+                'border-color',
+              ]),
+            borderColor: 'custom.lightBorder',
+            ':hover': {
+              bgcolor: 'secondary.main',
+              color: 'common.white',
+              borderColor: 'secondary.main',
+            },
+          }}
+          size="small"
+          aria-label="add"
+          onClick={handleClick}
+          disableRipple
+        >
+          <CheckIcon />
+        </IconButton>
+      </Fade>
+    </Tooltip>
+  );
+}
+
+export default PickChannelActions;

src/ui/components/pages/Channels/ChannelResults/PickChannelCard.tsx

@@ -1,23 +1,19 @@
-import React, { useState } from 'react';
-import { Box, Card, CardHeader, Tooltip, IconButton } from '@mui/material';
-import CheckIcon from '@mui/icons-material/Check';
+import React from 'react';
+import { Box, Card, CardHeader } from '@mui/material';
 import { Channel } from 'types';
 import { useAppSelector } from 'store';
 import { selectChannel } from 'store/selectors/channels';
-import { useAppDispatch } from 'store';
-import { addChannel, removeChannel } from 'store/reducers/channels';
 import ChannelPicture from '../ChannelCard/ChannelPicture';
 import ChannelTitle from '../ChannelCard/ChannelTitle';
+import ChannelActions from './PickChannelActions';
 
 interface PickChannelCardProps {
   channel: Channel;
 }
 
 export default function PickChannelCard(props: PickChannelCardProps) {
-  const { channel } = props;
-  const [changed, setChanged] = useState(false);
-  const exists = useAppSelector(selectChannel(channel));
-  const dispatch = useAppDispatch();
+  const found = useAppSelector(selectChannel(props.channel));
+  const channel = found || props.channel;
 
   return (
     <Box sx={{ display: 'flex' }}>
@@ -41,62 +37,20 @@ export default function PickChannelCard(props: PickChannelCardProps) {
               alignSelf: 'center',
               ml: 2,
             },
+            ...(channel.isHidden
+              ? {
+                  '& .MuiCardHeader-avatar': {
+                    opacity: 0.5,
+                  },
+                  '& .MuiCardHeader-content': {
+                    textDecoration: 'line-through',
+                    opacity: 0.5,
+                  },
+                }
+              : {}),
           }}
           avatar={<ChannelPicture channel={channel} />}
-          action={
-            <Tooltip
-              title={exists ? (changed ? 'Remove channel' : '') : 'Add channel'}
-              placement="left"
-              arrow
-            >
-              <IconButton
-                sx={{
-                  border: 1,
-                  transition: (theme) =>
-                    theme.transitions.create([
-                      'color',
-                      'background-color',
-                      'border-color',
-                    ]),
-                  ...(exists
-                    ? {
-                        bgcolor: 'secondary.main',
-                        color: 'common.white',
-                        borderColor: 'secondary.main',
-                        ':hover': {
-                          bgcolor: 'secondary.main',
-                          color: 'common.white',
-                          borderColor: 'secondary.main',
-                        },
-                        '&.Mui-disabled': {
-                          bgcolor: 'secondary.light',
-                          color: 'common.white',
-                          opacity: 0.5,
-                        },
-                      }
-                    : {
-                        borderColor: 'custom.lightBorder',
-                        ':hover': {
-                          bgcolor: 'transparent',
-                          color: 'secondary.main',
-                          borderColor: 'secondary.main',
-                        },
-                      }),
-                }}
-                size="small"
-                aria-label="add"
-                disabled={exists && !changed}
-                onClick={() => {
-                  const action = exists ? removeChannel : addChannel;
-                  dispatch(action(channel));
-                  setChanged(true);
-                }}
-                disableRipple
-              >
-                <CheckIcon />
-              </IconButton>
-            </Tooltip>
-          }
+          action={<ChannelActions channel={channel} canEdit={!!found} />}
           title={<ChannelTitle channel={channel} />}
           subheader={channel.description}
         />