feat(home): add Bookmarks view

src/store/reducers/settings.ts

@@ -19,14 +19,21 @@ export const defaultSettings = {
   recentViewFilters: {
     seen: true,
     watchLater: true,
+    bookmarked: true,
     ignored: false,
     others: true,
   },
   watchLaterViewFilters: {
     seen: true,
+    bookmarked: true,
     archived: true,
     others: true,
   },
+  bookmarksViewFilters: {
+    seen: true,
+    watchLater: true,
+    others: true,
+  },
   allViewSorting: {
     publishDate: false,
   },
@@ -36,8 +43,11 @@ export const defaultSettings = {
   watchLaterViewSorting: {
     publishDate: false,
   },
+  bookmarksViewSorting: {
+    publishDate: false,
+  },
   homeDisplayOptions: {
-    hiddenViews: [],
+    hiddenViews: [HomeView.Bookmarks],
     extraVideoActions: [],
   },
   enableNotifications: true,
@@ -93,6 +103,14 @@ export const settingsSlice = createSlice({
               ...filters,
             },
           };
+        case HomeView.Bookmarks:
+          return {
+            ...state,
+            bookmarksViewFilters: {
+              ...state.bookmarksViewFilters,
+              ...filters,
+            },
+          };
         default:
           return state;
       }
@@ -130,6 +148,14 @@ export const settingsSlice = createSlice({
               ...sorting,
             },
           };
+        case HomeView.Bookmarks:
+          return {
+            ...state,
+            bookmarksViewSorting: {
+              ...state.bookmarksViewSorting,
+              ...sorting,
+            },
+          };
         default:
           return state;
       }

src/store/reducers/videos.ts

@@ -127,6 +127,19 @@ export const videosSlice = createSlice({
           : video,
       );
     },
+    clearBookmarksList: (state) => {
+      state.list = state.list.map((video) =>
+        video.flags.bookmarked
+          ? {
+              ...video,
+              flags: {
+                ...video.flags,
+                bookmarked: false,
+              },
+            }
+          : video,
+      );
+    },
     archiveVideo: (state, action: PayloadAction<AddVideoPayload>) => {
       const video = action.payload;
       setVideoFlags({
@@ -209,6 +222,7 @@ export const {
   addVideoFlag,
   removeVideoFlag,
   clearWatchLaterList,
+  clearBookmarksList,
   archiveVideo,
   unarchiveVideo,
   archiveVideosByFlag,

src/store/selectors/settings.ts

@@ -1,12 +1,6 @@
 import type { RootState } from 'store';
 import { createSelector } from 'reselect';
-import {
-  HomeView,
-  ViewFilters,
-  RecentViewFilters,
-  WatchLaterViewFilters,
-  ExtraVideoAction,
-} from 'types';
+import { HomeView, ViewFilters, ExtraVideoAction } from 'types';
 import { defaultSettings } from 'store/reducers/settings';
 
 export const selectSettings = (state: RootState) => state.settings;
@@ -22,12 +16,17 @@ export const selectViewFilters = (view: HomeView) =>
         return {
           ...defaultSettings.recentViewFilters,
           ...settings.recentViewFilters,
-        } as RecentViewFilters;
+        } as ViewFilters;
       case HomeView.WatchLater:
         return {
           ...defaultSettings.watchLaterViewFilters,
           ...settings.watchLaterViewFilters,
-        } as WatchLaterViewFilters;
+        } as ViewFilters;
+      case HomeView.Bookmarks:
+        return {
+          ...defaultSettings.bookmarksViewFilters,
+          ...settings.bookmarksViewFilters,
+        } as ViewFilters;
       default:
         return {} as ViewFilters;
     }
@@ -52,6 +51,11 @@ export const selectViewSorting = (view: HomeView) =>
           ...defaultSettings.watchLaterViewSorting,
           ...settings.watchLaterViewSorting,
         };
+      case HomeView.Bookmarks:
+        return {
+          ...defaultSettings.bookmarksViewSorting,
+          ...settings.bookmarksViewSorting,
+        };
       case HomeView.All:
       default:
         return {
@@ -74,14 +78,19 @@ export const selectHiddenViews = createSelector(
   (options) => options.hiddenViews,
 );
 
+export const selectHasHiddenView = (view: HomeView) =>
+  createSelector(selectHiddenViews, (hiddenViews) =>
+    hiddenViews.includes(view),
+  );
+
 export const selectExtraVideoActions = createSelector(
   selectHomeDisplayOptions,
   (options) => options.extraVideoActions,
 );
 
 export const selectHasExtraVideoAction = (action: ExtraVideoAction) =>
-  createSelector(selectHomeDisplayOptions, (options) =>
-    options.extraVideoActions.includes(action),
+  createSelector(selectExtraVideoActions, (extraVideoActions) =>
+    extraVideoActions.includes(action),
   );
 
 export const selectRecentVideosSeniority = createSelector(

src/store/selectors/videos.ts

@@ -113,6 +113,36 @@ export const selectWatchLaterVideos = (channel?: Channel) =>
         .sort((a, b) => b.publishedAt - a.publishedAt),
   );
 
+export const selectBookmarkedVideos = (channel?: Channel) =>
+  createSelector(
+    selectVideos,
+    selectViewFilters(HomeView.Bookmarks),
+    (videos, filters) =>
+      videos
+        .filter(
+          (video) =>
+            video.flags.bookmarked &&
+            (!channel || channel.id === video.channelId) &&
+            filterVideoByFlags(video, filters),
+        )
+        .sort((a, b) => b.publishedAt - a.publishedAt),
+  );
+
+export const selectBookmarkedVideosCount = createSelector(
+  selectVideos,
+  selectViewFilters(HomeView.Bookmarks),
+  selectActiveChannels,
+  (videos, filters, activeChannels) => {
+    const activeChannelsIds = activeChannels.map(({ id }) => id);
+    return videos.filter(
+      (video) =>
+        video.flags.bookmarked &&
+        activeChannelsIds.includes(video.channelId) &&
+        filterVideoByFlags(video, filters),
+    ).length;
+  },
+);
+
 export const selectWatchLaterVideosCount = createSelector(
   selectVideos,
   selectViewFilters(HomeView.WatchLater),
@@ -142,13 +172,8 @@ export const selectSeenWatchLaterVideosCount = createSelector(
   },
 );
 
-export const selectVideoMeta = (video: Video) =>
+export const selectVideoFlag = (video: Video, flag: VideoFlag) =>
   createSelector(selectVideos, (videos) => {
     const { flags } = videos.find(({ id }) => id === video.id) || {};
-    return {
-      isSeen: flags?.seen || false,
-      isToWatchLater: flags?.toWatchLater || false,
-      isArchived: flags?.archived || false,
-      isIgnored: flags?.ignored || false,
-    };
+    return flags?.[flag] || false;
   });

src/store/utils/preload.ts

@@ -56,6 +56,7 @@ const removeOutdatedVideos = (videos: VideoCache[], settings: Settings) => {
   return videos.filter(
     ({ flags, publishedAt }) =>
       flags.toWatchLater ||
+      flags.bookmarked ||
       ((flags.seen || flags.ignored) &&
         elapsedDays(publishedAt) <= VideosSeniority.OneMonth) ||
       (flags.recent &&

src/types/Settings.ts

@@ -1,5 +1,3 @@
-import { Either } from './common';
-
 export interface Settings {
   defaultView: HomeView | null;
   apiKey: string;
@@ -8,9 +6,11 @@ export interface Settings {
   recentVideosSeniority: VideosSeniority;
   recentViewFilters: RecentViewFilters;
   watchLaterViewFilters: WatchLaterViewFilters;
+  bookmarksViewFilters: BookmarksViewFilters;
   allViewSorting: ViewSorting;
   recentViewSorting: ViewSorting;
   watchLaterViewSorting: ViewSorting;
+  bookmarksViewSorting: ViewSorting;
   homeDisplayOptions: HomeDisplayOptions;
   enableNotifications: boolean;
   queryTimeout: number;
@@ -32,24 +32,36 @@ export interface ViewSorting {
 export interface RecentViewFilters {
   seen: boolean;
   watchLater: boolean;
+  bookmarked: boolean;
   ignored: boolean;
   others: boolean;
 }
 
 export interface WatchLaterViewFilters {
   seen: boolean;
+  bookmarked: boolean;
   archived: boolean;
   others: boolean;
 }
 
-export type ViewFilters = Either<RecentViewFilters, WatchLaterViewFilters>;
+export interface BookmarksViewFilters {
+  seen: boolean;
+  watchLater: boolean;
+  others: boolean;
+}
+
+export interface ViewFilters
+  extends RecentViewFilters,
+    WatchLaterViewFilters,
+    BookmarksViewFilters {}
 
 export type ViewFilter = keyof ViewFilters;
 
 export enum HomeView {
   All = 'all',
   Recent = 'recent',
   WatchLater = 'watch-later',
+  Bookmarks = 'bookmarks',
 }
 
 export enum VideosSeniority {

src/types/Video.ts

@@ -18,6 +18,7 @@ export type VideoFlags = Partial<{
   archived: boolean;
   ignored: boolean;
   recent: boolean;
+  bookmarked: boolean;
 }>;
 
 export type VideoFlag = keyof VideoFlags;

src/ui/components/pages/Home/ChannelRenderer/BookmarksViewRenderer.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useAppSelector } from 'store';
+import { selectBookmarkedVideos } from 'store/selectors/videos';
+import StaticRenderer, { StaticRendererProps } from './StaticRenderer';
+
+export interface BookmarksViewRendererProps
+  extends Omit<StaticRendererProps, 'videos'> {}
+
+function BookmarksViewRenderer(props: BookmarksViewRendererProps) {
+  const { channel, ...rest } = props;
+  const videos = useAppSelector(selectBookmarkedVideos(channel));
+
+  return <StaticRenderer channel={channel} videos={videos} {...rest} />;
+}
+
+export default BookmarksViewRenderer;

src/ui/components/pages/Home/ChannelRenderer/ChannelVideos/VideoCard/Badges/ArchivedBadge.tsx

@@ -3,7 +3,7 @@ import { Box, Tooltip } from '@mui/material';
 import ArchiveIcon from '@mui/icons-material/Archive';
 import { HomeView, Video } from 'types';
 import { useAppSelector } from 'store';
-import { selectVideoMeta } from 'store/selectors/videos';
+import { selectVideoFlag } from 'store/selectors/videos';
 
 interface ArchivedBadgeProps {
   video: Video;
@@ -12,7 +12,7 @@ interface ArchivedBadgeProps {
 
 function ArchivedBadge(props: ArchivedBadgeProps) {
   const { video, view } = props;
-  const { isArchived } = useAppSelector(selectVideoMeta(video));
+  const isArchived = useAppSelector(selectVideoFlag(video, 'archived'));
 
   return view === HomeView.WatchLater && isArchived ? (
     <Tooltip title="Archived" aria-label="archived">

src/ui/components/pages/Home/ChannelRenderer/ChannelVideos/VideoCard/Badges/IgnoredBadge.tsx

@@ -3,7 +3,7 @@ import { Box, Tooltip } from '@mui/material';
 import DoDisturbOnIcon from '@mui/icons-material/DoDisturbOn';
 import { HomeView, Video } from 'types';
 import { useAppSelector } from 'store';
-import { selectVideoMeta } from 'store/selectors/videos';
+import { selectVideoFlag } from 'store/selectors/videos';
 
 interface IgnoredBadgeProps {
   video: Video;
@@ -12,7 +12,7 @@ interface IgnoredBadgeProps {
 
 function IgnoredBadge(props: IgnoredBadgeProps) {
   const { video, view } = props;
-  const { isIgnored } = useAppSelector(selectVideoMeta(video));
+  const isIgnored = useAppSelector(selectVideoFlag(video, 'ignored'));
 
   return view === HomeView.Recent && isIgnored ? (
     <Tooltip title="Ignored" aria-label="ignored">

src/ui/components/pages/Home/ChannelRenderer/ChannelVideos/VideoCard/Badges/SeenBadge.tsx

@@ -3,15 +3,15 @@ import { Box, Tooltip } from '@mui/material';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import { Video } from 'types';
 import { useAppSelector } from 'store';
-import { selectVideoMeta } from 'store/selectors/videos';
+import { selectVideoFlag } from 'store/selectors/videos';
 
 interface SeenBadgeProps {
   video: Video;
 }
 
 function SeenBadge(props: SeenBadgeProps) {
   const { video } = props;
-  const { isSeen } = useAppSelector(selectVideoMeta(video));
+  const isSeen = useAppSelector(selectVideoFlag(video, 'seen'));
 
   return isSeen ? (
     <Tooltip title="Seen" aria-label="seen">