Add New & Noteworthy page (#998)

src/components/Sidenav/ViewerSidenav/ViewerSidenav.tsx

@@ -4,7 +4,7 @@ import { NavItemType, SidenavBase } from '@/components/Sidenav/SidenavBase'
 import { absoluteRoutes } from '@/config/routes'
 import { usePersonalDataStore } from '@/providers'
 import { Button } from '@/shared/components'
-import { SvgGlyphExternal, SvgNavChannels, SvgNavHome, SvgNavPopular, SvgNavVideos } from '@/shared/icons'
+import { SvgGlyphExternal, SvgNavChannels, SvgNavHome, SvgNavNew, SvgNavPopular, SvgNavVideos } from '@/shared/icons'
 import { openInNewTab } from '@/utils/browser'
 import { ConsoleLogger } from '@/utils/logs'
 
@@ -21,6 +21,11 @@ const viewerSidenavItems: NavItemType[] = [
     name: 'Popular',
     to: absoluteRoutes.viewer.popular(),
   },
+  {
+    icon: <SvgNavNew />,
+    name: 'New',
+    to: absoluteRoutes.viewer.new(),
+  },
   {
     icon: <SvgNavVideos />,
     name: 'Videos',

src/config/routes.ts

@@ -19,6 +19,7 @@ const withQueryParameters = (basePath: string, query: Record<string, string> = {
 export const relativeRoutes = {
   viewer: {
     index: () => '',
+    new: () => 'new',
     popular: () => 'popular',
     search: (query?: { query?: string }) => withQueryParameters('search', query),
     channel: (id = ':id') => `channel/${id}`,

src/views/viewer/NewView/NewView.tsx

@@ -0,0 +1,5 @@
+import React, { FC } from 'react'
+
+import { ViewWrapper } from '@/components'
+
+export const NewView: FC = () => <ViewWrapper>New & Noteworthy</ViewWrapper>

src/views/viewer/NewView/index.ts

@@ -0,0 +1 @@
+export * from './NewView'

src/views/viewer/ViewerLayout.tsx

@@ -10,11 +10,12 @@ import { absoluteRoutes, relativeRoutes } from '@/config/routes'
 import { transitions } from '@/shared/theme'
 import { RoutingState } from '@/types/routing'
 
-import { ChannelView, ChannelsView, HomeView, PopularView, SearchOverlayView, VideoView, VideosView } from '.'
+import { ChannelView, ChannelsView, HomeView, NewView, PopularView, SearchOverlayView, VideoView, VideosView } from '.'
 
 const viewerRoutes = [
   { path: relativeRoutes.viewer.index(), element: <HomeView /> },
   { path: relativeRoutes.viewer.popular(), element: <PopularView /> },
+  { path: relativeRoutes.viewer.new(), element: <NewView /> },
   { path: relativeRoutes.viewer.video(), element: <VideoView /> },
   { path: relativeRoutes.viewer.videos(), element: <VideosView /> },
   { path: relativeRoutes.viewer.channels(), element: <ChannelsView /> },

src/views/viewer/index.ts

@@ -1,3 +1,4 @@
+export * from './NewView'
 export * from './PopularView'
 export * from './ChannelView'
 export * from './ChannelsView'