Refactor/new channel message layout (#2549)

* feat(wip): new channel message layout

* Update AudioPlayer component styling

* Fix consecutive message count bug in Messages
component

* Add animation to image preview component

* Fix styling issues in MessageItem component

* Update emoji button dimensions

* Refactor message reactions component styles

* Add useWindowDimensions hook to ReactionProvider

* Fix key prop in MessageItem component

* Fix translation bug in ReactionProvider component

* Adjust styling and layout in MessageItem component

* Fix null reference in Messages component

* Add date display to message item

* Fix display issue in MessageItem component

packages/app/components/audio-player/audio-player.tsx

@@ -123,7 +123,7 @@ export const AudioPlayer = memo(
     }, [id, prepare, url]);
 
     return (
-      <LeanView tw="web:max-w-sm web:p-2 overflow-hidden rounded-full bg-black p-4 dark:bg-white">
+      <LeanView tw="web:max-w-sm web:p-2 web:min-w-[320px] min-w-[80%] overflow-hidden rounded-full bg-black p-4 dark:bg-white">
         <LeanView tw="flex-row items-center">
           <LeanView tw="mr-4 items-center justify-center">
             <LeanView tw="h-12 w-12 items-center justify-center rounded-full bg-white dark:bg-black">

packages/app/components/creator-channels/components/image-preview.web.tsx

@@ -65,6 +65,8 @@ export const ImagePreview = ({
           }}
           transition={{ type: "timing" }}
           draggable={false}
+          animate={{ transform: "translate3d(0,0,0) scale(1)" }}
+          initial={{ transform: "translate3d(0,0,0) scale(1)" }}
         />
 
         <Modal