Ingawei/move messages to notifs

web/pages/messages/index.tsx → web/components/messaging/message-content.tsx

@@ -20,14 +20,6 @@ import { MultipleOrSingleAvatars } from 'web/components/multiple-or-single-avata
 import { BannedBadge } from 'web/components/widgets/user-link'
 import { PrivateMessageChannel } from 'common/supabase/private-messages'
 
-export default function MessagesPage() {
-  return (
-    <Page trackPageView={'messages page'} className={'p-2'}>
-      <MessagesContent />
-    </Page>
-  )
-}
-
 export function MessagesContent() {
   useRedirectIfSignedOut()
   const currentUser = useUser()
@@ -37,8 +29,7 @@ export function MessagesContent() {
 
   return (
     <>
-      <Row className="justify-between">
-        <Title>Messages</Title>
+      <Row className="mb-1 w-full justify-end sm:mt-2">
         <NewMessageButton />
       </Row>
       <Col className={'w-full overflow-hidden'}>

web/components/messaging/messages-icon.tsx

@@ -21,33 +21,26 @@ export function UnseenMessagesBubble(props: { className?: string }) {
   )
 }
 
-export function PrivateMessagesIcon(props: {
-  className?: string
-  bubbleClassName?: string
-  solid?: boolean
-}) {
-  const { solid, className, bubbleClassName } = props
+export function UnreadPrivateMessages(props: { className?: string }) {
+  const { className } = props
   const privateUser = usePrivateUser()
-  const Icon = solid ? BiSolidEnvelope : BiEnvelope
   return (
     <Row className="relative justify-center">
       {privateUser && (
         <InternalUnseenMessagesBubble
-          bubbleClassName={clsx('-mt-2', bubbleClassName)}
+          bubbleClassName={clsx(className)}
           privateUser={privateUser}
         />
       )}
-      <Icon className={className} />
     </Row>
   )
 }
 
 function InternalUnseenMessagesBubble(props: {
   privateUser: PrivateUser
   bubbleClassName?: string
-  className?: string
 }) {
-  const { privateUser, className, bubbleClassName } = props
+  const { privateUser, bubbleClassName } = props
 
   const unseenMessages = useUnseenPrivateMessageChannels(privateUser.id)
   const pathName = usePathname()
@@ -61,20 +54,13 @@ function InternalUnseenMessagesBubble(props: {
     return null
 
   return (
-    <Row
+    <div
       className={clsx(
-        'absolute left-0 right-0 top-1 items-center justify-center',
-        className
+        'text-ink-0 bg-primary-400 min-w-[15px] rounded-full p-[2px] text-center text-xs leading-3 ',
+        bubbleClassName
       )}
     >
-      <div
-        className={clsx(
-          'text-ink-0 bg-primary-500 min-w-[15px] rounded-full p-[2px] text-center text-[10px] leading-3 ',
-          bubbleClassName
-        )}
-      >
-        {unseenMessages.length}
-      </div>
-    </Row>
+      {unseenMessages.length}
+    </div>
   )
 }

web/components/messaging/new-message-button.tsx

@@ -1,5 +1,5 @@
 import { PlusIcon } from '@heroicons/react/solid'
-import { Button } from '../buttons/button'
+import { Button, IconButton } from '../buttons/button'
 import { useState } from 'react'
 import { MODAL_CLASS, Modal } from '../layout/modal'
 import { Col } from '../layout/col'
@@ -11,14 +11,24 @@ import { SelectUsers } from 'web/components/select-users'
 import { DisplayUser } from 'common/api/user-types'
 import { usePrivateUser } from 'web/hooks/use-user'
 import { buildArray } from 'common/util/array'
+import { RiChatNewFill } from 'react-icons/ri'
 
-export default function NewMessageButton() {
+export default function NewMessageButton(props: { className?: string }) {
   const [open, setOpen] = useState(false)
+  const { className } = props
   return (
     <>
-      <Button className="h-fit gap-1" onClick={() => setOpen(true)}>
-        <PlusIcon className="h-5 w-5" aria-hidden="true" />
-        New Message
+      <Button
+        onClick={() => {
+          setOpen(true)
+        }}
+        className="mr-2 items-center lg:mr-0"
+        size="xs"
+      >
+        <Row className="items-center gap-1">
+          <RiChatNewFill className="h-4 w-4" aria-hidden="true" />
+          New Message
+        </Row>
       </Button>
       <MessageModal open={open} setOpen={setOpen} />
     </>

web/components/nav/bottom-nav-bar.tsx

@@ -117,7 +117,6 @@ export function BottomNavBar() {
             )}
             onClick={() => setSidebarOpen(true)}
           >
-            <UnseenMessagesBubble />
             <MenuAlt3Icon className="mx-auto my-2 h-8 w-8" aria-hidden="true" />
           </div>
           <MobileSidebar

web/components/nav/sidebar.tsx

@@ -33,7 +33,6 @@ import { SidebarSignUpButton } from '../buttons/sign-up-button'
 import { ManifoldLogo } from './manifold-logo'
 import { ProfileSummary } from './profile-summary'
 import { NavItem, SidebarItem } from './sidebar-item'
-import { PrivateMessagesIcon } from 'web/components/messaging/messages-icon'
 import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'
 import { DAY_MS } from 'common/util/time'
 import { LiveTVIcon } from '../tv-icon'
@@ -158,11 +157,6 @@ const getDesktopNav = (
       //   href: '/tv',
       //   icon: PiTelevisionSimpleBold,
       // },
-      {
-        name: 'Messages',
-        href: '/messages',
-        icon: PrivateMessagesIcon,
-      },
       options.isAdminOrMod && {
         name: 'Reports',
         href: '/reports',
@@ -211,11 +205,6 @@ const getMobileNav = (
       href: '/tv',
       icon: isLiveTV ? LiveTVIcon : PiTelevisionSimpleBold,
     },
-    {
-      name: 'Messages',
-      href: '/messages',
-      icon: PrivateMessagesIcon,
-    },
     isAdminOrMod && {
       name: 'Reports',
       href: '/reports',

web/components/notifications-icon.tsx

@@ -9,6 +9,7 @@ import { NOTIFICATIONS_PER_PAGE } from './notifications/notification-helpers'
 
 import { usePathname } from 'next/navigation'
 import { usePersistentLocalState } from 'web/hooks/use-persistent-local-state'
+import { useUnseenPrivateMessageChannels } from 'web/hooks/use-private-messages'
 
 export function NotificationsIcon(props: { className?: string }) {
   const privateUser = usePrivateUser()
@@ -36,21 +37,24 @@ function UnseenNotificationsBubble(props: { privateUser: PrivateUser }) {
     (ng) => ng.latestCreatedTime > lastSeenTime
   ).length
 
+  const unseenMessages = useUnseenPrivateMessageChannels(privateUser.id).length
+
   useEffect(() => {
     if (pathname?.endsWith('notifications')) {
       setLastSeenTime(Date.now())
     }
   }, [pathname, unseenNotifs])
 
-  if (unseenNotifs === 0) {
+  const unseenTotalNotifs = unseenNotifs + unseenMessages
+  if (unseenTotalNotifs === 0) {
     return null
   }
 
   return (
     <div className="-mt-0.75 text-ink-0 bg-primary-500 absolute ml-3.5 min-w-[15px] rounded-full p-[2px] text-center text-[10px] leading-3 lg:left-0 lg:-mt-1 lg:ml-2">
-      {unseenNotifs > NOTIFICATIONS_PER_PAGE
+      {unseenTotalNotifs > NOTIFICATIONS_PER_PAGE
         ? `${NOTIFICATIONS_PER_PAGE}+`
-        : unseenNotifs}
+        : unseenTotalNotifs}
     </div>
   )
 }

web/hooks/use-private-messages.ts

@@ -78,7 +78,7 @@ export const useHasUnseenPrivateMessage = (
 
 export const useUnseenPrivateMessageChannels = (userId: string) => {
   const pathName = usePathname()
-  const lastSeenMessagesPageTime = useLastSeenMessagesPageTime()
+  const lastSeenMessagesPageTime = useLastSeenMessagesPageTime(true)
   const [lastSeenChatTimeByChannelId, setLastSeenChatTimeByChannelId] =
     usePersistentLocalState<Record<number, number> | undefined>(
       undefined,
@@ -148,23 +148,18 @@ export const useUnseenPrivateMessageChannels = (userId: string) => {
   })
 }
 
-const useLastSeenMessagesPageTime = () => {
-  const pathname = usePathname()
+const useLastSeenMessagesPageTime = (updateTime?: boolean) => {
   const isVisible = useIsPageVisible()
 
   const [lastSeenMessagesPageTime, setLastSeenMessagesPageTime] =
     usePersistentLocalState(0, 'last-seen-private-messages-page')
-  const [unloadingPage, setUnloadingPage] = usePersistentInMemoryState(
-    '',
-    'unloading-page-private-messages-page'
-  )
+
   useEffect(() => {
-    if (pathname === '/messages' || unloadingPage === '/messages') {
+    if (updateTime) {
       setLastSeenMessagesPageTime(Date.now())
-      track('view messages page')
+      track('view messages tab')
     }
-    setUnloadingPage(pathname)
-  }, [pathname, isVisible])
+  }, [isVisible])
 
   return lastSeenMessagesPageTime
 }

web/pages/notifications.tsx

@@ -1,27 +1,31 @@
+import { XIcon } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import { Notification, ReactionNotificationTypes } from 'common/notification'
 import { PrivateUser, User } from 'common/user'
 import { groupBy, sortBy } from 'lodash'
 import { useRouter } from 'next/router'
 import { Fragment, ReactNode, useEffect, useMemo, useState } from 'react'
+import { SEO } from 'web/components/SEO'
+import { AppBadgesOrGetAppButton } from 'web/components/buttons/app-badges-or-get-app-button'
 import { Col } from 'web/components/layout/col'
 import { Page } from 'web/components/layout/page'
 import { Row } from 'web/components/layout/row'
 import { QueryUncontrolledTabs } from 'web/components/layout/tabs'
+import { MessagesContent } from 'web/components/messaging/message-content'
+import { UnreadPrivateMessages } from 'web/components/messaging/messages-icon'
 import { NotificationSettings } from 'web/components/notification-settings'
 import { combineAndSumIncomeNotifications } from 'web/components/notifications/income-summary-notifications'
 import {
-  combineReactionNotifications,
   NOTIFICATIONS_PER_PAGE,
   NUM_SUMMARY_LINES,
   ParentNotificationHeader,
   QuestionOrGroupLink,
+  combineReactionNotifications,
 } from 'web/components/notifications/notification-helpers'
-import { api, markAllNotifications } from 'web/lib/api/api'
 import { NotificationItem } from 'web/components/notifications/notification-types'
 import { PushNotificationsModal } from 'web/components/push-notifications-modal'
-import { SEO } from 'web/components/SEO'
 import { ShowMoreLessButton } from 'web/components/widgets/collapsible-content'
+import { LoadingIndicator } from 'web/components/widgets/loading-indicator'
 import { Pagination } from 'web/components/widgets/pagination'
 import { Title } from 'web/components/widgets/title'
 import {
@@ -31,10 +35,8 @@ import {
 import { useIsPageVisible } from 'web/hooks/use-page-visible'
 import { useRedirectIfSignedOut } from 'web/hooks/use-redirect-if-signed-out'
 import { usePrivateUser, useUser } from 'web/hooks/use-user'
-import { XIcon } from '@heroicons/react/outline'
+import { api, markAllNotifications } from 'web/lib/api/api'
 import { getNativePlatform } from 'web/lib/native/is-native'
-import { AppBadgesOrGetAppButton } from 'web/components/buttons/app-badges-or-get-app-button'
-import { LoadingIndicator } from 'web/components/widgets/loading-indicator'
 import { track } from 'web/lib/service/analytics'
 
 export default function NotificationsPage() {
@@ -134,13 +136,18 @@ function NotificationsContent(props: {
                 />
               ),
             },
+            {
+              title: 'Messages',
+              content: <MessagesContent />,
+              inlineTabIcon: <UnreadPrivateMessages className="ml-1" />,
+            },
             {
               title: 'Following',
               inlineTabIcon:
                 unseenNewMarketNotifs > 0 ? (
                   <div
                     className={
-                      'text-ink-0 bg-primary-400 ml-2 min-w-[15px] rounded-full px-2 text-xs'
+                      'text-ink-0 bg-primary-400 ml-1 min-w-[15px] rounded-full px-2 text-xs'
                     }
                   >
                     {unseenNewMarketNotifs}