Further tweaks for media gallery

_locales/en/messages.json

@@ -6856,6 +6856,10 @@
     "messageformat": "No Links",
     "description": "Title of the empty state view of media gallery for links tab"
   },
+  "icu:MediaGallery__EmptyState__description--links-2": {
+    "messageformat": "Links that you send and receive will appear here",
+    "description": "Description of the empty state view of media gallery for links tab"
+  },
   "icu:MediaGallery__EmptyState__description--documents": {
     "messageformat": "Links that you send and receive will appear here",
     "description": "Description of the empty state view of media gallery for links tab"
@@ -6864,6 +6868,10 @@
     "messageformat": "No Files",
     "description": "Title of the empty state view of media gallery for files tab"
   },
+  "icu:MediaGallery__EmptyState__description--documents-2": {
+    "messageformat": "Files that you send and receive will appear here",
+    "description": "Description of the empty state view of media gallery for files tab"
+  },
   "icu:MediaGallery__EmptyState__description--links": {
     "messageformat": "Files that you send and receive will appear here",
     "description": "Description of the empty state view of media gallery for files tab"

stylesheets/_modules.scss

@@ -2464,44 +2464,6 @@ button.ConversationDetails__action-button {
   margin-inline-start: 16px;
 }
 
-// Module: Media Gallery
-
-.module-media-gallery {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  width: 100%;
-  height: 100%;
-  outline: none;
-}
-
-.module-media-gallery__content {
-  flex-grow: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 20px;
-}
-
-.module-media-gallery__scroll-observer {
-  position: absolute;
-  bottom: 0;
-  height: 30px;
-
-  &::after {
-    content: '';
-    height: 1px; // Always show the element to not mess with the height of the scroll area
-    display: block;
-  }
-}
-
-.module-media-gallery__sections {
-  min-width: 0;
-
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-}
-
 // Module: Message Request Actions
 
 .module-message-request-actions {

ts/components/conversation/media-gallery/AttachmentSection.dom.tsx

@@ -94,8 +94,8 @@ export function AttachmentSection({
     case 'audio':
     case 'link':
       return (
-        <section className={tw('mx-4 mb-3 border-b-border-primary px-2 pb-3')}>
+        <section>
-          <h2 className={tw('pt-1.5 pb-2 type-body-medium')}>{header}</h2>
+          <h2 className={tw('px-6 pt-1.5 pb-2 type-body-medium')}>{header}</h2>
           <div>
             {verified.entries.map(mediaItem => {
               return (

ts/components/conversation/media-gallery/EmptyState.dom.tsx

@@ -29,12 +29,12 @@ export function EmptyState({ i18n, tab }: Props): JSX.Element {
     case TabViews.Documents:
       title = i18n('icu:MediaGallery__EmptyState__title--documents');
       description = i18n(
-        'icu:MediaGallery__EmptyState__description--documents'
+        'icu:MediaGallery__EmptyState__description--documents-2'
       );
       break;
     case TabViews.Links:
       title = i18n('icu:MediaGallery__EmptyState__title--links');
-      description = i18n('icu:MediaGallery__EmptyState__description--links');
+      description = i18n('icu:MediaGallery__EmptyState__description--links-2');
       break;
     default:
       throw missingCaseError(tab);

ts/components/conversation/media-gallery/LinkPreviewItem.dom.tsx

@@ -64,7 +64,8 @@ export function LinkPreviewItem({
       <div
         className={tw(
           'flex size-9 items-center justify-center',
-          'overflow-hidden rounded-sm bg-label-secondary'
+          'overflow-hidden rounded-sm',
+          'bg-elevated-background-tertiary text-label-secondary'
         )}
       >
         <AxoSymbol.Icon symbol="link" size={20} label={null} />

ts/components/conversation/media-gallery/ListItem.dom.tsx

@@ -124,7 +124,10 @@ export function ListItem({
   return (
     <AriaClickable.Root
       className={tw(
-        'flex w-full flex-row gap-3 py-2',
+        'mx-2.5 flex flex-row gap-3 rounded-lg px-3.5 py-2',
+        'data-hovered:bg-fill-secondary',
+        'data-focused:bg-fill-secondary',
+        'data-pressed:bg-fill-secondary-pressed',
         mediaItem.type === 'link' ? undefined : 'items-center'
       )}
     >

ts/components/conversation/media-gallery/MediaGallery.dom.tsx

@@ -1,7 +1,7 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { Fragment, useEffect, useRef, useCallback } from 'react';
 
 import moment from 'moment';
 
@@ -133,7 +133,12 @@ function MediaSection({
   }
 
   const now = Date.now();
-  const sections = groupMediaItemsByDate(now, mediaItems).map(section => {
+  const groupedItems = groupMediaItemsByDate(now, mediaItems);
+
+  const isGrid = mediaItems.at(0)?.type === 'media';
+
+  const sections = groupedItems.map((section, index) => {
+    const isLast = index === groupedItems.length - 1;
     const first = section.mediaItems[0];
     const { message } = first;
     const date = moment(message.receivedAtMs || message.receivedAt);
@@ -158,25 +163,24 @@ function MediaSection({
     const header = getHeader();
 
     return (
-      <AttachmentSection
+      <Fragment key={header}>
-        key={header}
+        <AttachmentSection
-        header={header}
+          header={header}
-        mediaItems={section.mediaItems}
+          mediaItems={section.mediaItems}
-        onItemClick={onItemClick}
+          onItemClick={onItemClick}
-        renderMediaItem={renderMediaItem}
+          renderMediaItem={renderMediaItem}
-      />
+        />
+        {!isGrid && !isLast && (
+          <hr
+            className={tw('mx-4 my-3 border-[0.5px] border-border-primary')}
+          />
+        )}
+      </Fragment>
     );
   });
 
-  const isGrid = mediaItems.at(0)?.type === 'media';
-
   return (
-    <div
+    <div className={tw('flex max-w-[660px] min-w-[360px] grow flex-col')}>
-      className={tw(
-        'flex min-w-0 grow flex-col',
-        isGrid ? undefined : 'divide-y'
-      )}
-    >
       {sections}
     </div>
   );
@@ -308,7 +312,11 @@ export function MediaGallery({
   ]);
 
   return (
-    <div className="module-media-gallery" tabIndex={-1} ref={focusRef}>
+    <div
+      className={tw('flex size-full grow flex-col outline-none')}
+      tabIndex={-1}
+      ref={focusRef}
+    >
       <Tabs
         initialSelectedTab={TabViews.Media}
         tabs={[
@@ -352,7 +360,14 @@ export function MediaGallery({
           return (
             <>
               {renderMiniPlayer()}
-              <div className="module-media-gallery__content">
+              <div
+                className={tw(
+                  'grow',
+                  'flex flex-col justify-center-safe',
+                  'overflow-x-hidden overflow-y-auto',
+                  'p-5'
+                )}
+              >
                 <MediaSection
                   i18n={i18n}
                   loading={loading}
@@ -365,15 +380,12 @@ export function MediaGallery({
                   playAudio={playAudio}
                   renderMediaItem={renderMediaItem}
                 />
+                <div ref={scrollObserverRef} className={tw('h-px')} />
               </div>
             </>
           );
         }}
       </Tabs>
-      <div
-        ref={scrollObserverRef}
-        className="module-media-gallery__scroll-observer"
-      />
     </div>
   );
 }