[PoC] Hide avatars on IRC layout

res/css/_components.pcss

@@ -382,3 +382,6 @@
 @import "./voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss";
 @import "./voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss";
 @import "./voice-broadcast/molecules/_VoiceBroadcastBody.pcss";
+
+/* Customization for SchildiChat */
+@import "./_sc/_customization.pcss";

res/css/_sc/_customization.pcss

@@ -0,0 +1,18 @@
+/*
+Copyright 2024 Suguru Hirahara
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* TODO: replace @import with @mixin once multiple CSS files are created for customization in order to keep styling modular */
+@import "./views/rooms/_IRCLayout.pcss";

res/css/_sc/feature-improvement/feature__IRCLayout__hideAvatar/index.pcss

@@ -0,0 +1,65 @@
+/*
+Copyright 2024 Suguru Hirahara
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* Hide avatars on IRC layout except ones on read receipt group */
+@define-mixin sc_IRCLayout__hideAvatar {
+     --icon-width: 0px; /* Align vertically */
+
+    .mx_EventTile {
+        &[data-layout="irc"][data-avatar="false"] {
+            .mx_EventTile_avatar,
+            .mx_BaseAvatar {
+                display: none;
+            }
+
+            /* Display avatars on read receipt group as it can be set to hidden via Settings */
+            .mx_ReadReceiptGroup {
+                .mx_EventTile_avatar,
+                .mx_BaseAvatar {
+                    display: unset;
+                }
+            }
+        }
+
+        /* Align EventTile_info vertically with other lines */
+        &.mx_EventTile_info {
+            /* var(--icon-width) and var(--right-padding) are not necessary
+               because we do not have to take icon width ant its spacing into consideration */
+            --EventTile_irc_line_info-margin-inline-start: var(--name-width);
+        }
+    }
+
+    .mx_GenericEventListSummary {
+        &[data-layout="irc"][data-avatar="false"] {
+            /* For collapsed GELS */
+            .mx_GenericEventListSummary_avatars {
+                display: none;
+            }
+
+            /* For expanded GELS */
+            .mx_EventTile_avatar,
+            .mx_BaseAvatar {
+                display: none;
+            }
+
+            > .mx_EventTile_line {
+                /* This is required to align collapsed GELS with other elements horizontally
+                   as we need only one var(--right-padding) here */
+                padding-inline-start: calc(var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 1 * var(--right-padding));
+            }
+        }
+    }
+}

res/css/_sc/views/rooms/_IRCLayout.pcss

@@ -0,0 +1,21 @@
+/*
+Copyright 2024 Suguru Hirahara
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import "../../feature-improvement/feature__IRCLayout__hideAvatar/index.pcss";
+
+.mx_IRCLayout {
+    @mixin sc_IRCLayout__hideAvatar;
+}

src/components/views/elements/GenericEventListSummary.tsx

@@ -76,6 +76,7 @@ const GenericEventListSummary: React.FC<IProps> = ({
                 data-scroll-tokens={eventIds}
                 data-expanded={true}
                 data-layout={layout}
+                data-avatar={false} // [sc]
             >
                 <ol className="mx_GenericEventListSummary_unstyledList">{children}</ol>
             </li>
@@ -139,6 +140,7 @@ const GenericEventListSummary: React.FC<IProps> = ({
             data-expanded={expanded + ""}
             data-layout={layout}
             data-testid={testId}
+            data-avatar={false} // [sc]
         >
             <AccessibleButton
                 kind="link_inline"

src/components/views/rooms/EventTile.tsx

@@ -1256,6 +1256,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                         "data-has-reply": !!replyChain,
                         "data-layout": this.props.layout,
                         "data-self": isOwnEvent,
+                        "data-avatar": "false", // [sc]
                         "data-event-id": this.props.mxEvent.getId(),
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),
@@ -1312,6 +1313,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                         "data-shape": this.context.timelineRenderingType,
                         "data-self": isOwnEvent,
                         "data-has-reply": !!replyChain,
+                        "data-avatar": "false", // [sc]
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),
                         "onClick": (ev: MouseEvent) => {
@@ -1488,6 +1490,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                             "data-self": isOwnEvent,
                             "data-event-id": this.props.mxEvent.getId(),
                             "data-has-reply": !!replyChain,
+                            "data-avatar": "false", // [sc]
                             "onMouseEnter": () => this.setState({ hover: true }),
                             "onMouseLeave": () => this.setState({ hover: false }),
                         },
@@ -1555,6 +1558,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                             "data-self": isOwnEvent,
                             "data-event-id": this.props.mxEvent.getId(),
                             "data-has-reply": !!replyChain,
+                            "data-avatar": "false", // [sc]
                             "onMouseEnter": () => this.setState({ hover: true }),
                             "onMouseLeave": () => this.setState({ hover: false }),
                         },