chore(home): add subheaders to menu actions

AXeL-dev · Aug 29, 2022 · 2a9daf0 · 2a9daf0
1 parent 547efe5
commit 2a9daf0
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 49 deletions.
diff --git a/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentVideosSeniority.tsx b/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentVideosSeniority.tsx
@@ -1,14 +1,12 @@
 import React, { useState } from 'react';
-import { IconButton } from '@mui/material';
+import { IconButton, ListSubheader } from '@mui/material';
 import { StyledMenu, CheckableMenuItem } from 'ui/components/shared';
 import { useAppDispatch, useAppSelector } from 'store';
 import HistoryIcon from '@mui/icons-material/History';
 import { selectRecentVideosSeniority } from 'store/selectors/settings';
 import { setSettings } from 'store/reducers/settings';
 import { Nullable, VideosSeniority } from 'types';
 
-interface RecentVideosSeniorityProps {}
-
 const options = [
   {
     label: '1 day',
@@ -32,6 +30,8 @@ const options = [
   },
 ];
 
+interface RecentVideosSeniorityProps {}
+
 function RecentVideosSeniority(props: RecentVideosSeniorityProps) {
   const seniority = useAppSelector(selectRecentVideosSeniority);
   const dispatch = useAppDispatch();
@@ -70,6 +70,9 @@ function RecentVideosSeniority(props: RecentVideosSeniorityProps) {
         MenuListProps={{
           'aria-labelledby': 'seniority-button',
           dense: true,
+          subheader: (
+            <ListSubheader component="div">Videos seniority</ListSubheader>
+          ),
         }}
         anchorEl={anchorEl}
         open={open}

diff --git a/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentViewFilters.tsx b/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentViewFilters.tsx
@@ -1,19 +1,45 @@
-import React, { useState } from 'react';
-import { IconButton } from '@mui/material';
+import React, { useState, useMemo } from 'react';
+import { IconButton, ListSubheader } from '@mui/material';
 import { StyledMenu, CheckableMenuItem } from 'ui/components/shared';
 import { useAppDispatch, useAppSelector } from 'store';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import { selectViewFilters } from 'store/selectors/settings';
 import { setViewFilters } from 'store/reducers/settings';
 import { HomeView, Nullable, RecentViewFilters as Filters } from 'types';
 
+const options: {
+  label: string;
+  value: keyof Filters;
+}[] = [
+  {
+    label: 'Viewed',
+    value: 'viewed',
+  },
+  {
+    label: 'Watch later',
+    value: 'watchLater',
+  },
+  {
+    label: 'Ignored',
+    value: 'ignored',
+  },
+  {
+    label: 'Others',
+    value: 'others',
+  },
+];
+
 interface RecentViewFiltersProps {}
 
 function RecentViewFilters(props: RecentViewFiltersProps) {
   const filters = useAppSelector(selectViewFilters(HomeView.Recent));
   const dispatch = useAppDispatch();
   const [anchorEl, setAnchorEl] = useState<Nullable<HTMLElement>>(null);
   const open = Boolean(anchorEl);
+  const activeFiltersCount = useMemo(
+    () => options.filter(({ value }) => filters[value]).length,
+    [filters],
+  );
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -51,37 +77,27 @@ function RecentViewFilters(props: RecentViewFiltersProps) {
         MenuListProps={{
           'aria-labelledby': 'filter-button',
           dense: true,
+          subheader: (
+            <ListSubheader component="div">
+              Filters ({activeFiltersCount})
+            </ListSubheader>
+          ),
         }}
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
         transformOrigin={{ horizontal: 'right', vertical: 'top' }}
         anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
       >
-        <CheckableMenuItem
-          checked={filters.viewed}
-          onClick={() => handleFilterToggle('viewed')}
-        >
-          Viewed
-        </CheckableMenuItem>
-        <CheckableMenuItem
-          checked={filters.watchLater!}
-          onClick={() => handleFilterToggle('watchLater')}
-        >
-          Watch later
-        </CheckableMenuItem>
-        <CheckableMenuItem
-          checked={filters.ignored!}
-          onClick={() => handleFilterToggle('ignored')}
-        >
-          Ignored
-        </CheckableMenuItem>
-        <CheckableMenuItem
-          checked={filters.others}
-          onClick={() => handleFilterToggle('others')}
-        >
-          Others
-        </CheckableMenuItem>
+        {options.map(({ label, value }, index) => (
+          <CheckableMenuItem
+            key={index}
+            checked={!!filters[value]}
+            onClick={() => handleFilterToggle(value)}
+          >
+            {label}
+          </CheckableMenuItem>
+        ))}
       </StyledMenu>
     </>
   );

diff --git a/src/ui/components/pages/Home/TabActions/WatchLaterViewActions/WatchLaterViewFilters.tsx b/src/ui/components/pages/Home/TabActions/WatchLaterViewActions/WatchLaterViewFilters.tsx
@@ -1,19 +1,41 @@
-import React, { useState } from 'react';
-import { IconButton } from '@mui/material';
+import React, { useState, useMemo } from 'react';
+import { IconButton, ListSubheader } from '@mui/material';
 import { StyledMenu, CheckableMenuItem } from 'ui/components/shared';
 import { useAppDispatch, useAppSelector } from 'store';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import { HomeView, Nullable, WatchLaterViewFilters as Filters } from 'types';
 import { selectViewFilters } from 'store/selectors/settings';
 import { setViewFilters } from 'store/reducers/settings';
 
+const options: {
+  label: string;
+  value: keyof Filters;
+}[] = [
+  {
+    label: 'Viewed',
+    value: 'viewed',
+  },
+  {
+    label: 'Archived',
+    value: 'archived',
+  },
+  {
+    label: 'Others',
+    value: 'others',
+  },
+];
+
 interface WatchLaterViewFiltersProps {}
 
 function WatchLaterViewFilters(props: WatchLaterViewFiltersProps) {
   const filters = useAppSelector(selectViewFilters(HomeView.WatchLater));
   const dispatch = useAppDispatch();
   const [anchorEl, setAnchorEl] = useState<Nullable<HTMLElement>>(null);
   const open = Boolean(anchorEl);
+  const activeFiltersCount = useMemo(
+    () => options.filter(({ value }) => filters[value]).length,
+    [filters],
+  );
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -51,31 +73,27 @@ function WatchLaterViewFilters(props: WatchLaterViewFiltersProps) {
         MenuListProps={{
           'aria-labelledby': 'filter-button',
           dense: true,
+          subheader: (
+            <ListSubheader component="div">
+              Filters ({activeFiltersCount})
+            </ListSubheader>
+          ),
         }}
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
         transformOrigin={{ horizontal: 'right', vertical: 'top' }}
         anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
       >
-        <CheckableMenuItem
-          checked={filters.viewed}
-          onClick={() => handleFilterToggle('viewed')}
-        >
-          Viewed
-        </CheckableMenuItem>
-        <CheckableMenuItem
-          checked={filters.archived!}
-          onClick={() => handleFilterToggle('archived')}
-        >
-          Archived
-        </CheckableMenuItem>
-        <CheckableMenuItem
-          checked={filters.others}
-          onClick={() => handleFilterToggle('others')}
-        >
-          Others
-        </CheckableMenuItem>
+        {options.map(({ label, value }, index) => (
+          <CheckableMenuItem
+            key={index}
+            checked={!!filters[value]}
+            onClick={() => handleFilterToggle(value)}
+          >
+            {label}
+          </CheckableMenuItem>
+        ))}
       </StyledMenu>
     </>
   );

diff --git a/src/ui/components/shared/StyledMenu/index.tsx b/src/ui/components/shared/StyledMenu/index.tsx
@@ -27,6 +27,10 @@ export const StyledMenu = styled((props: MenuProps) => (
         : theme.palette.grey[300],
     boxShadow:
       'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiListSubheader-root': {
+      backgroundColor: 'inherit',
+      lineHeight: '40px',
+    },
     '& .MuiMenuItem-root': {
       '& .MuiSvgIcon-root': {
         fontSize: 18,