Rename event tile badges to footer

Author: florianduros

res/css/views/rooms/_EventBubbleTile.pcss

@@ -172,7 +172,7 @@ Please see LICENSE files in the repository root for full details.
         border-color: $quinary-content;
     }
 
-    .mx_EventTile_badges {
+    .mx_EventTile_footer {
         margin: var(--cpd-space-1-5x) 0;
         margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
     }
@@ -206,7 +206,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_ReactionsRow,
-        .mx_EventTile_badges {
+        .mx_EventTile_footer {
             justify-content: flex-start;
         }
 
@@ -247,7 +247,7 @@ Please see LICENSE files in the repository root for full details.
             max-width: 100%;
         }
 
-        .mx_EventTile_badges {
+        .mx_EventTile_footer {
             justify-content: flex-end;
         }
 

res/css/views/rooms/_EventTile.pcss

@@ -513,7 +513,7 @@ $left-gutter: 64px;
             margin-left: $left-gutter;
         }
 
-        .mx_EventTile_badges {
+        .mx_EventTile_footer {
             margin: var(--cpd-space-1x) var(--cpd-space-16x);
         }
 
@@ -1252,7 +1252,7 @@ $left-gutter: 64px;
             padding-block-start: $spacing-16;
 
             .mx_EventTile_line,
-            .mx_EventTile_badges {
+            .mx_EventTile_footer {
                 margin-inline-end: var(--ThreadView_group_spacing-end);
             }
 
@@ -1270,7 +1270,7 @@ $left-gutter: 64px;
                 }
             }
 
-            .mx_EventTile_badges {
+            .mx_EventTile_footer {
                 /* Align with message text and summary text */
                 margin-inline-start: var(--ThreadView_group_spacing-start);
             }
@@ -1460,7 +1460,7 @@ $left-gutter: 64px;
     display: flex;
 }
 
-.mx_EventTile_badges {
+.mx_EventTile_footer {
     display: flex;
     gap: var(--cpd-space-2x);
     align-items: center;

src/components/views/rooms/EventTile.tsx

@@ -1141,6 +1141,8 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             );
         }
 
+        const hasFooter = Boolean(reactionsRow || pinnedMessageBadge);
+
         const linkedTimestamp = !this.props.hideTimestamp ? (
             <a
                 href={permalink}
@@ -1246,11 +1248,13 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                             </a>
                             {msgOption}
                         </div>,
-                        <div className="mx_EventTile_badges" key="mx_EventTile_badges">
-                            {(this.props.layout === Layout.Group || !isOwnEvent) && pinnedMessageBadge}
-                            {reactionsRow}
-                            {this.props.layout === Layout.Bubble && isOwnEvent && pinnedMessageBadge}
-                        </div>,
+                        hasFooter && (
+                            <div className="mx_EventTile_footer" key="mx_EventTile_footer">
+                                {(this.props.layout === Layout.Group || !isOwnEvent) && pinnedMessageBadge}
+                                {reactionsRow}
+                                {this.props.layout === Layout.Bubble && isOwnEvent && pinnedMessageBadge}
+                            </div>
+                        ),
                     ],
                 );
             }
@@ -1439,21 +1443,25 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                             {actionBar}
                             {this.props.layout === Layout.IRC && (
                                 <>
-                                    <div className="mx_EventTile_badges">
-                                        {pinnedMessageBadge}
-                                        {reactionsRow}
-                                    </div>
+                                    {hasFooter && (
+                                        <div className="mx_EventTile_footer">
+                                            {pinnedMessageBadge}
+                                            {reactionsRow}
+                                        </div>
+                                    )}
                                     {this.renderThreadInfo()}
                                 </>
                             )}
                         </div>
                         {this.props.layout !== Layout.IRC && (
                             <>
-                                <div className="mx_EventTile_badges">
-                                    {(this.props.layout === Layout.Group || !isOwnEvent) && pinnedMessageBadge}
-                                    {reactionsRow}
-                                    {this.props.layout === Layout.Bubble && isOwnEvent && pinnedMessageBadge}
-                                </div>
+                                {hasFooter && (
+                                    <div className="mx_EventTile_footer">
+                                        {(this.props.layout === Layout.Group || !isOwnEvent) && pinnedMessageBadge}
+                                        {reactionsRow}
+                                        {this.props.layout === Layout.Bubble && isOwnEvent && pinnedMessageBadge}
+                                    </div>
+                                )}
                                 {this.renderThreadInfo()}
                             </>
                         )}