Sidebar shortcuts to built-in lists

Ticket: 1107

ui/component/sideNavigation/view.jsx

@@ -4,7 +4,7 @@ import * as PAGES from 'constants/pages';
 import * as ICONS from 'constants/icons';
 import * as KEYCODES from 'constants/keycodes';
 import { SIDEBAR_SUBS_DISPLAYED } from 'constants/subscriptions';
-import React, { useEffect } from 'react';
+import React from 'react';
 import Button from 'component/button';
 import ClaimPreviewTitle from 'component/claimPreviewTitle';
 import classnames from 'classnames';
@@ -64,6 +64,20 @@ const NOTIFICATIONS = {
   hideForUnauth: true,
 };
 
+const WATCH_LATER = {
+  title: 'Watch Later',
+  link: `/$/${PAGES.LIST}/watchlater`,
+  icon: ICONS.TIME,
+  hideForUnauth: true,
+};
+
+const FAVORITES = {
+  title: 'Favorites',
+  link: `/$/${PAGES.LIST}/favorites`,
+  icon: ICONS.STAR,
+  hideForUnauth: true,
+};
+
 const PLAYLISTS = {
   title: 'Lists',
   link: `/$/${PAGES.LISTS}`,
@@ -421,7 +435,7 @@ function SideNavigation(props: Props) {
     return () => window.removeEventListener('keydown', handleKeydown);
   }, [sidebarOpen, setSidebarOpen, isAbsolute]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (!window.Optanon) {
       const gdprDiv = document.getElementById('gdprSidebarLink');
       if (gdprDiv) {
@@ -502,10 +516,20 @@ function SideNavigation(props: Props) {
             >
               {getLink(getHomeButton(doClearClaimSearch))}
               {getLink(RECENT_FROM_FOLLOWING)}
-              {getLink(PLAYLISTS)}
               {!odyseeMembership && getLink(PREMIUM)}
             </ul>
 
+            <ul
+              className={classnames('navigation-links', {
+                'navigation-links--micro': showMicroMenu,
+                'navigation-links--absolute': shouldRenderLargeMenu,
+              })}
+            >
+              {!showMicroMenu && getLink(WATCH_LATER)}
+              {!showMicroMenu && getLink(FAVORITES)}
+              {getLink(PLAYLISTS)}
+            </ul>
+
             <ul
               className={classnames('navigation-links', {
                 'navigation-links--micro': showMicroMenu,
@@ -514,7 +538,7 @@ function SideNavigation(props: Props) {
             >
               {EXTRA_SIDEBAR_LINKS && (
                 <>
-                  {/* $FlowFixMe -- GetLinksData should fix it's data type */}
+                  {/* $FlowFixMe: GetLinksData type needs an update */}
                   {EXTRA_SIDEBAR_LINKS.map((linkProps) => getLink(linkProps))}
                   {!wildWestDisabled && getLink(WILD_WEST)}
                 </>
@@ -546,7 +570,7 @@ function SideNavigation(props: Props) {
 type SubItemProps = {
   subscription: Subscription,
   odyseeMembershipByUri: (uri: string) => string,
-}
+};
 
 function SubscriptionListItem(props: SubItemProps) {
   const { subscription, odyseeMembershipByUri } = props;

ui/scss/component/_navigation.scss

@@ -129,7 +129,7 @@
   transform: translateX(calc(var(--side-nav-width--micro) - var(--side-nav-width)));
 
   .navigation-inner-container {
-    ul:nth-child(3) {
+    ul:nth-child(4) {
       border-bottom: unset;
     }
   }