chore(home): hide channels only from the All view

src/store/selectors/channels.ts

@@ -1,9 +1,19 @@
 import type { RootState } from 'store';
 import { createSelector } from '@reduxjs/toolkit';
-import { Channel } from 'types';
+import { Channel, HomeView } from 'types';
 
 export const selectChannels = (state: RootState) => state.channels.list;
 
+export const selectChannelsByView = (view: HomeView) =>
+  createSelector(selectChannels, (channels) => {
+    switch (view) {
+      case HomeView.All:
+        return channels.filter(({ isHidden }) => !isHidden);
+      default:
+        return channels;
+    }
+  });
+
 export const selectActiveChannels = createSelector(selectChannels, (channels) =>
   channels.filter(({ isHidden }) => !isHidden),
 );
@@ -20,6 +30,9 @@ export const selectNotificationEnabledChannels = createSelector(
     ),
 );
 
+export const selectChannelsCountByView = (view: HomeView) =>
+  createSelector(selectChannelsByView(view), (channels) => channels.length);
+
 export const selectActiveChannelsCount = createSelector(
   selectActiveChannels,
   (channels) => channels.length,

src/store/selectors/videos.ts

@@ -10,7 +10,7 @@ import {
   ViewFilter,
   ViewFilters,
 } from 'types';
-import { selectActiveChannels } from './channels';
+import { selectChannelsByView } from './channels';
 import {
   selectSettings,
   selectVideosSeniority,
@@ -147,13 +147,13 @@ export const selectBookmarkedVideosCount = createSelector(
   selectVideos,
   selectViewFilters(HomeView.Bookmarks),
   selectVideosSeniority(HomeView.Bookmarks),
-  selectActiveChannels,
-  (videos, filters, videosSeniority, activeChannels) => {
-    const activeChannelsIds = activeChannels.map(({ id }) => id);
+  selectChannelsByView(HomeView.Bookmarks),
+  (videos, filters, videosSeniority, channels) => {
+    const channelsIds = channels.map(({ id }) => id);
     return videos.filter(
       (video) =>
         video.flags.bookmarked &&
-        activeChannelsIds.includes(video.channelId) &&
+        channelsIds.includes(video.channelId) &&
         filterVideoByFlags(video, filters) &&
         (videosSeniority === VideosSeniority.Any ||
           elapsedDays(video.publishedAt) <= videosSeniority),
@@ -165,13 +165,13 @@ export const selectWatchLaterVideosCount = createSelector(
   selectVideos,
   selectViewFilters(HomeView.WatchLater),
   selectVideosSeniority(HomeView.WatchLater),
-  selectActiveChannels,
-  (videos, filters, videosSeniority, activeChannels) => {
-    const activeChannelsIds = activeChannels.map(({ id }) => id);
+  selectChannelsByView(HomeView.WatchLater),
+  (videos, filters, videosSeniority, channels) => {
+    const channelsIds = channels.map(({ id }) => id);
     return videos.filter(
       (video) =>
         video.flags.toWatchLater &&
-        activeChannelsIds.includes(video.channelId) &&
+        channelsIds.includes(video.channelId) &&
         filterVideoByFlags(video, filters) &&
         (videosSeniority === VideosSeniority.Any ||
           elapsedDays(video.publishedAt) <= videosSeniority),
@@ -181,14 +181,12 @@ export const selectWatchLaterVideosCount = createSelector(
 
 export const selectSeenWatchLaterVideosCount = createSelector(
   selectVideos,
-  selectActiveChannels,
-  (videos, activeChannels) => {
-    const activeChannelsIds = activeChannels.map(({ id }) => id);
+  selectChannelsByView(HomeView.WatchLater),
+  (videos, channels) => {
+    const channelsIds = channels.map(({ id }) => id);
     return videos.filter(
       ({ flags, channelId }) =>
-        flags.toWatchLater &&
-        flags.seen &&
-        activeChannelsIds.includes(channelId),
+        flags.toWatchLater && flags.seen && channelsIds.includes(channelId),
     ).length;
   },
 );

src/store/thunks/channels.ts

@@ -21,9 +21,9 @@ export const fetchChannelById = createAsyncThunk<
 
 export const addChannelById = createAsyncThunk<
   void,
-  { id: string },
+  { id: string; hide?: boolean },
   { state: RootState }
->('channels/addChannelById', async ({ id }, { getState, dispatch }) => {
+>('channels/addChannelById', async ({ id, hide }, { getState, dispatch }) => {
   // check if channel exists
   const { channels } = getState();
   const found = channels.list.find((channel: Channel) => channel.id === id);
@@ -36,6 +36,11 @@ export const addChannelById = createAsyncThunk<
 
   // save to channels list
   if (channel) {
-    dispatch(addChannel(channel));
+    dispatch(
+      addChannel({
+        ...channel,
+        isHidden: !!hide,
+      }),
+    );
   }
 });

src/store/thunks/videos.ts

@@ -22,32 +22,35 @@ export const fetchVideosById = createAsyncThunk<
 
 export const addVideoById = createAsyncThunk<
   void,
-  { id: string; flags?: VideoFlags },
+  { id: string; flags?: VideoFlags; hideChannel?: boolean },
   { state: RootState }
->('videos/addVideoById', async ({ id, flags }, { getState, dispatch }) => {
-  // check if video exists
-  const { videos } = getState();
-  let video: Video | VideoCache | undefined = videos.list.find(
-    (video) => video.id === id,
-  );
+>(
+  'videos/addVideoById',
+  async ({ id, flags, hideChannel }, { getState, dispatch }) => {
+    // check if video exists
+    const { videos } = getState();
+    let video: Video | VideoCache | undefined = videos.list.find(
+      (video) => video.id === id,
+    );
 
-  if (!video) {
-    // fetch video by id
-    const result = await dispatch(
-      fetchVideosById({ ids: [id], maxResults: 1 }),
-    ).unwrap();
-    video = result[0];
-  }
+    if (!video) {
+      // fetch video by id
+      const result = await dispatch(
+        fetchVideosById({ ids: [id], maxResults: 1 }),
+      ).unwrap();
+      video = result[0];
+    }
 
-  // save to videos list
-  if (video) {
-    dispatch(
-      addVideo({
-        video,
-        flags,
-      }),
-    );
-    // ensure to add channel too (if it does not exist)
-    dispatch(addChannelById({ id: video.channelId }));
-  }
-});
+    // save to videos list
+    if (video) {
+      dispatch(
+        addVideo({
+          video,
+          flags,
+        }),
+      );
+      // ensure to add channel too (if it does not exist)
+      dispatch(addChannelById({ id: video.channelId, hide: hideChannel }));
+    }
+  },
+);

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { IconButton, Divider, MenuItem } from '@mui/material';
+import { IconButton, Divider, MenuItem, Tooltip } from '@mui/material';
 import { useAppDispatch } from 'store';
 import {
   toggleChannel,
@@ -84,25 +84,33 @@ const ChannelActions = React.forwardRef<HTMLButtonElement, ChannelActionsProps>(
             Filters
           </MenuItem>
           <Divider sx={{ my: 0.5 }} />
-          <MenuItem
-            onClick={() => {
-              dispatch(toggleChannel(channel));
-              handleMenuClose();
-            }}
-            disableRipple
+          <Tooltip
+            title={`${
+              channel.isHidden ? 'Unhide' : 'Hide'
+            } the channel from the 'All' view`}
+            placement="left"
+            arrow
           >
-            {channel.isHidden ? (
-              <>
-                <VisibilityOutlinedIcon />
-                Unhide
-              </>
-            ) : (
-              <>
-                <VisibilityOffOutlinedIcon />
-                Hide
-              </>
-            )}
-          </MenuItem>
+            <MenuItem
+              onClick={() => {
+                dispatch(toggleChannel(channel));
+                handleMenuClose();
+              }}
+              disableRipple
+            >
+              {channel.isHidden ? (
+                <>
+                  <VisibilityOutlinedIcon />
+                  Unhide
+                </>
+              ) : (
+                <>
+                  <VisibilityOffOutlinedIcon />
+                  Hide
+                </>
+              )}
+            </MenuItem>
+          </Tooltip>
           <MenuItem
             sx={{ color: 'primary.main' }}
             onClick={handleRemoveClick}

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

@@ -30,16 +30,16 @@ function ChannelTitle(props: ChannelTitleProps) {
       >
         {channel.title}
       </Link>
-      {channel.notifications?.isDisabled && (
+      {channel.notifications?.isDisabled ? (
         <Tooltip title="Notifications disabled">
           <NotificationsOffIcon color="disabled" fontSize="small" />
         </Tooltip>
-      )}
-      {!!channel.filters?.length && (
+      ) : null}
+      {!!channel.filters?.length ? (
         <Tooltip title="Has filters">
           <FilterAltIcon color="disabled" fontSize="small" />
         </Tooltip>
-      )}
+      ) : null}
     </Box>
   );
 }

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

@@ -3,16 +3,16 @@ import { HomeView } from 'types';
 import WatchLaterViewActions from './WatchLaterViewActions';
 import AllViewActions from './AllViewActions';
 import { useAppSelector } from 'store';
-import { selectActiveChannelsCount } from 'store/selectors/channels';
+import { selectChannelsCountByView } from 'store/selectors/channels';
 import BookmarksViewActions from './BookmarksViewActions';
 
 interface TabActionsProps {
-  tab: HomeView | null;
+  tab: HomeView;
 }
 
 function TabActions(props: TabActionsProps) {
   const { tab } = props;
-  const channelsCount = useAppSelector(selectActiveChannelsCount);
+  const channelsCount = useAppSelector(selectChannelsCountByView(tab));
 
   if (channelsCount === 0) {
     return null;

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { ErrorAlert } from 'ui/components/shared';
 import { Channel, HomeView, Video, Nullable } from 'types';
 import { useAppSelector } from 'store';
-import { selectActiveChannels } from 'store/selectors/channels';
+import { selectChannelsByView } from 'store/selectors/channels';
 import VideoPlayerDialog from './VideoPlayerDialog';
 import ChannelsWrapper from './ChannelsWrapper';
 import NoChannels from './NoChannels';
@@ -18,7 +18,7 @@ function TabPanel(props: TabPanelProps) {
   const [error, setError] = useState(null);
   const [activeVideo, setActiveVideo] = useState<Nullable<Video>>(null);
   const { getLatestChannelVideo } = useChannelVideos(tab);
-  const channels = useAppSelector(selectActiveChannels);
+  const channels = useAppSelector(selectChannelsByView(tab));
   const sorting = useAppSelector(selectViewSorting(tab));
 
   const handleVideoPlay = (video: Video) => {

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

@@ -73,9 +73,9 @@ export function Home(props: HomeProps) {
             <Tab key={index} {...props} />
           ))}
         </Tabs>
-        <TabActions tab={activeTab} />
+        {activeTab ? <TabActions tab={activeTab} /> : null}
       </Box>
-      {activeTab && <TabPanel tab={activeTab} />}
+      {activeTab ? <TabPanel tab={activeTab} /> : null}
     </Layout>
   );
 }

src/ui/components/shared/Sidebar/index.tsx

@@ -58,7 +58,7 @@ export function Sidebar(props: SidebarProps) {
               icon={<ExploreIcon />}
               text="Home"
               to="/"
-              actions={(selected) => selected && <HomeActions />}
+              actions={(selected) => (selected ? <HomeActions /> : null)}
             />
             <ListItemLink
               icon={<SubscriptionsIcon />}

src/ui/components/webext/Background/ContextMenus.tsx

@@ -80,6 +80,7 @@ export default function ContextMenus(props: ContextMenusProps) {
               addVideoById({
                 id: videoId,
                 flags: { bookmarked: true },
+                hideChannel: true,
               }),
               true,
             );