feat(home): enhance view actions presentation

src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './useGrid';
 export * from './useDidMountEffect';
 export * from './useTimeout';
 export * from './useInterval';
+export * from './useForwardedRef';

src/hooks/useForwardedRef.ts

@@ -0,0 +1,16 @@
+import { useRef, useEffect, ForwardedRef } from 'react';
+
+export function useForwardedRef<T>(ref: ForwardedRef<T>) {
+  const innerRef = useRef<T>(null);
+
+  useEffect(() => {
+    if (!ref) return;
+    if (typeof ref === 'function') {
+      ref(innerRef.current);
+    } else {
+      ref.current = innerRef.current;
+    }
+  });
+
+  return innerRef;
+}

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

@@ -12,7 +12,7 @@ import NotificationsOffOutlinedIcon from '@mui/icons-material/NotificationsOffOu
 import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
 import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
-import FilterListIcon from '@mui/icons-material/FilterList';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import { Channel, Nullable } from 'types';
 import ChannelDialogs from '../ChannelDialogs';
 
@@ -80,7 +80,7 @@ const ChannelActions = React.forwardRef<HTMLButtonElement, ChannelActionsProps>(
             )}
           </MenuItem>
           <MenuItem onClick={handleFiltersClick} disableRipple>
-            <FilterListIcon />
+            <FilterAltIcon />
             Filters
           </MenuItem>
           <Divider sx={{ my: 0.5 }} />

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

@@ -24,7 +24,6 @@ const ChannelCard = React.forwardRef(
         <Card elevation={0} sx={{ flexGrow: 1, bgcolor: 'transparent' }}>
           <CardHeader
             sx={{
-              pt: 2.5,
               pl: 0,
               pr: 1,
               '& .MuiCardHeader-title': {

src/ui/components/pages/Channels/ChannelList/Actions.tsx

@@ -83,13 +83,10 @@ function ChannelListActions(props: ChannelListActionsProps) {
         id="more-menu"
         MenuListProps={{
           'aria-labelledby': 'more-button',
-          dense: true,
         }}
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
-        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
       >
         {channels.length > 1 ? (
           <MenuItem onClick={toggleDragHandles}>

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

@@ -26,7 +26,6 @@ export default function PickChannelCard(props: PickChannelCardProps) {
       >
         <CardHeader
           sx={{
-            pt: 2.5,
             pl: 0,
             pr: 1,
             '& .MuiCardHeader-title': {

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

@@ -29,7 +29,7 @@ export function Channels(props: ChannelsProps) {
           alignItems: 'center',
           borderBottom: 1,
           borderColor: 'divider',
-          padding: (theme) => theme.spacing(1.5, 3),
+          padding: (theme) => theme.spacing(1.25, 3),
           gap: 2,
         }}
       >

src/ui/components/pages/Home/StyledTabs.tsx

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material/styles';
+import Tabs, { TabsProps } from '@mui/material/Tabs';
+
+const StyledTabs = styled((props: TabsProps) => <Tabs {...props} />)(
+  ({ theme }) => ({
+    flexGrow: 1,
+    '& .MuiTabs-flexContainer': {
+      paddingTop: theme.spacing(1),
+      paddingBottom: theme.spacing(0.5),
+    },
+  }),
+);
+
+export default StyledTabs;

src/ui/components/pages/Home/TabActions/AllViewActions/AllViewOptions.tsx

@@ -0,0 +1,68 @@
+import React, { useRef, useState } from 'react';
+import {
+  IconButton,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+import { StyledMenu } from 'ui/components/shared';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import SortIcon from '@mui/icons-material/Sort';
+import { HomeView, Nullable } from 'types';
+import { NestedMenuRef } from 'ui/components/shared/StyledMenu/NestedMenu';
+import ViewSorting from '../common/ViewSorting';
+
+interface AllViewOptionsProps {}
+
+function AllViewOptions(props: AllViewOptionsProps) {
+  const [anchorEl, setAnchorEl] = useState<Nullable<HTMLElement>>(null);
+  const open = Boolean(anchorEl);
+  const menusRef = useRef<{ [key: string]: NestedMenuRef | null }>({
+    sorting: null,
+  });
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <IconButton
+        id="more-button"
+        aria-label="more"
+        aria-controls={open ? 'more-menu' : undefined}
+        aria-expanded={open ? 'true' : undefined}
+        aria-haspopup="true"
+        onClick={handleClick}
+      >
+        <MoreVertIcon />
+      </IconButton>
+      <StyledMenu
+        id="more-menu"
+        MenuListProps={{
+          'aria-labelledby': 'more-button',
+        }}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={menusRef.current['sorting']?.open}>
+          <ListItemIcon>
+            <SortIcon />
+          </ListItemIcon>
+          <ListItemText>Sort by</ListItemText>
+        </MenuItem>
+      </StyledMenu>
+      <ViewSorting
+        ref={(ref) => (menusRef.current['sorting'] = ref)}
+        view={HomeView.All}
+      />
+    </>
+  );
+}
+
+export default AllViewOptions;

src/ui/components/pages/Home/TabActions/AllViewActions/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import { HomeView } from 'types';
-import ViewSorting from '../ViewSorting';
+import AllViewOptions from './AllViewOptions';
 
 interface AllViewActionsProps {}
 
@@ -14,7 +13,7 @@ function AllViewActions(props: AllViewActionsProps) {
         gap: 2,
       }}
     >
-      <ViewSorting view={HomeView.All} />
+      <AllViewOptions />
     </Box>
   );
 }