Drop all providers

packages/web/src/app/web-player/WebPlayer.jsx

@@ -61,7 +61,7 @@ import { ArtistCoinsExplorePage } from 'pages/artist-coins-explore-page/ArtistCo
 import { LaunchpadPage } from 'pages/artist-coins-launchpad-page'
 import { MobileArtistCoinsSortPage } from 'pages/artist-coins-sort-page/MobileArtistCoinsSortPage'
 import { CashPage } from 'pages/cash-page'
-import { ChatPageProvider } from 'pages/chat-page/ChatPageProvider'
+import ChatPage from 'pages/chat-page'
 import { CoinDetailPage } from 'pages/coin-detail-page/CoinDetailPage'
 import { ExclusiveTracksPage } from 'pages/coin-detail-page/components/ExclusiveTracksPage'
 import { ArtistCoinDetailsPage } from 'pages/coin-detail-page/components/mobile/ArtistCoinDetailsPage'
@@ -794,7 +794,7 @@ const WebPlayer = (props) => {
               <Route path={REWARDS_PAGE} element={<RewardsPage />} />
               <Route path={AIRDROP_PAGE} element={<RewardsPage />} />
 
-              <Route path={CHAT_PAGE} element={<ChatPageProvider />} />
+              <Route path={CHAT_PAGE} element={<ChatPage />} />
               <Route
                 path={DEACTIVATE_PAGE}
                 element={<DeactivateAccountPage />}

packages/web/src/components/collection/desktop/CollectionHeader.tsx

@@ -251,8 +251,27 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
             startIcon={IconSearch}
             onChange={handleFilterChange}
             value={filterText}
-            size={TextInputSize.SMALL}
+            size={TextInputSize.EXTRA_SMALL}
             className={styles.searchInput}
+            css={{
+              width: '100%',
+              '& input': {
+                fontSize: 'var(--harmony-font-xs)',
+                fontWeight: 'var(--harmony-font-medium)',
+                marginLeft: '2px',
+                background: 'unset !important',
+                color: 'var(--harmony-neutral) !important'
+              },
+              '& .contentContainer': {
+                background: 'var(--harmony-white)',
+                boxShadow: '0 2px 5px 0 var(--search-bar-shadow)',
+                borderRadius: '4px',
+                border: 'none',
+                padding: '0 12px',
+                height: '32px',
+                minHeight: '32px'
+              }
+            }}
           />
         ) : null}
       </Flex>

packages/web/src/pages/chat-page/ChatPage.tsx

@@ -4,9 +4,12 @@ import { useCanSendMessage } from '@audius/common/hooks'
 import { chatActions, chatSelectors } from '@audius/common/store'
 import { ResizeObserver } from '@juggle/resize-observer'
 import { useDispatch } from 'react-redux'
+import { useParams, useLocation, useNavigate } from 'react-router-dom'
 import useMeasure from 'react-use-measure'
 
 import Page from 'components/page/Page'
+import { useIsMobile } from 'hooks/useIsMobile'
+import { useManagedAccountNotAllowedRedirect } from 'hooks/useManagedAccountNotAllowedRedirect'
 import { push } from 'utils/navigation'
 import { useSelector } from 'utils/reducer'
 import { chatPage } from 'utils/route'
@@ -17,6 +20,7 @@ import { ChatHeader } from './components/ChatHeader'
 import { ChatList } from './components/ChatList'
 import { ChatMessageList } from './components/ChatMessageList'
 import { CreateChatPrompt } from './components/CreateChatPrompt'
+import { SkeletonChatPage as MobileChatPage } from './components/mobile/SkeletonChatPage'
 
 const { fetchPermissions } = chatActions
 const { getChat } = chatSelectors
@@ -25,13 +29,18 @@ const messages = {
   messages: 'Messages'
 }
 
-export const ChatPage = ({
-  currentChatId,
-  presetMessage
-}: {
-  currentChatId?: string
-  presetMessage?: string
-}) => {
+export const ChatPage = () => {
+  useManagedAccountNotAllowedRedirect()
+  const params = useParams<{ id?: string }>()
+  const location = useLocation()
+  const navigate = useNavigate()
+  const isMobile = useIsMobile()
+  const currentChatId = params.id
+  const presetMessage = (
+    location.state as { presetMessage?: string } | undefined
+  )?.presetMessage
+
+  // All hooks must be called before any early returns
   const dispatch = useDispatch()
   const { firstOtherUser, canSendMessage } = useCanSendMessage(currentChatId)
   const chat = useSelector((state) => getChat(state, currentChatId ?? ''))
@@ -69,11 +78,25 @@ export const ChatPage = ({
     }, 0)
   }, [messagesRef])
 
+  // Replace the preset message in browser history after the first navigation
+  useEffect(() => {
+    if (presetMessage) {
+      navigate(location.pathname, {
+        state: { presetMessage: undefined },
+        replace: true
+      })
+    }
+  }, [navigate, location.pathname, presetMessage])
+
   useEffect(() => {
-    if (firstOtherUser) {
+    if (firstOtherUser && !isMobile) {
       dispatch(fetchPermissions({ userIds: [firstOtherUser.user_id] }))
     }
-  }, [dispatch, firstOtherUser])
+  }, [dispatch, firstOtherUser, isMobile])
+
+  if (isMobile) {
+    return <MobileChatPage />
+  }
 
   return (
     <Page

packages/web/src/pages/chat-page/index.ts

@@ -1 +1 @@
-export { ChatPage } from './ChatPage'
+export { ChatPage as default } from './ChatPage'

packages/web/src/pages/deleted-page/DeletedPage.tsx

@@ -2,11 +2,10 @@ import { Playable, User } from '@audius/common/models'
 
 import { useIsMobile } from 'hooks/useIsMobile'
 
-import DeletedPageProvider from './DeletedPageProvider'
 import DeletedPageDesktopContent from './components/desktop/DeletedPage'
 import DeletedPageMobileContent from './components/mobile/DeletedPage'
 
-type DeletedPageContentProps = {
+type DeletedPageProps = {
   title: string
   description: string
   canonicalUrl: string
@@ -24,25 +23,23 @@ const DeletedPage = ({
   playable,
   user,
   deletedByArtist = true
-}: DeletedPageContentProps) => {
+}: DeletedPageProps) => {
   const isMobile = useIsMobile()
 
-  const content = isMobile
-    ? DeletedPageMobileContent
-    : DeletedPageDesktopContent
+  const props = {
+    title,
+    description,
+    canonicalUrl,
+    structuredData,
+    playable,
+    user,
+    deletedByArtist
+  }
 
-  return (
-    <DeletedPageProvider
-      title={title}
-      description={description}
-      canonicalUrl={canonicalUrl}
-      structuredData={structuredData}
-      playable={playable}
-      user={user}
-      deletedByArtist={deletedByArtist}
-    >
-      {content}
-    </DeletedPageProvider>
+  return isMobile ? (
+    <DeletedPageMobileContent {...props} />
+  ) : (
+    <DeletedPageDesktopContent {...props} />
   )
 }