Wip pinned separator

res/css/_components.pcss

@@ -249,6 +249,7 @@
 @import "./views/messages/_MessageActionBar.pcss";
 @import "./views/messages/_MessageTimestamp.pcss";
 @import "./views/messages/_MjolnirBody.pcss";
+@import "./views/messages/_PinnedSeparator.pcss";
 @import "./views/messages/_ReactionsRow.pcss";
 @import "./views/messages/_ReactionsRowButton.pcss";
 @import "./views/messages/_RedactedBody.pcss";

res/css/views/messages/_PinnedSeparator.pcss

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * 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.
+ */
+
+.mx_PinnedSeparator {
+    text-align: end;
+    border-bottom: 1px solid var(--cpd-color-icon-accent-primary);
+    font: var(--cpd-font-body-sm-semibold);
+    color: var(--cpd-color-text-action-accent);
+    text-transform: uppercase;
+    margin-bottom: var(--cpd-space-1x);
+}

src/components/structures/MessagePanel.tsx

@@ -56,6 +56,8 @@ import { MainGrouper } from "./grouper/MainGrouper";
 import { CreationGrouper } from "./grouper/CreationGrouper";
 import { _t } from "../../languageHandler";
 import { getLateEventInfo } from "./grouper/LateEventGrouper";
+import PinningUtils from "../../utils/PinningUtils";
+import { PinnedSeparator } from "../views/messages/PinnedSeparator";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
@@ -767,6 +769,15 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         }
 
         const cli = MatrixClientPeg.safeGet();
+
+        if (SettingsStore.getValue<boolean>("feature_pinning") && PinningUtils.isPinned(cli, mxEv)) {
+            ret.push(
+                <li key={`${ts1}-pinned`}>
+                    <PinnedSeparator />
+                </li>,
+            );
+        }
+
         let lastInSection = true;
         if (nextEventWithTile) {
             const nextEv = nextEventWithTile;

src/components/views/messages/PinnedSeparator.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * 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 React, { JSX } from "react";
+
+import { _t } from "../../../languageHandler";
+
+/**
+ * A separator to be displayed between pinned messages and the rest of the timeline.
+ */
+export function PinnedSeparator(): JSX.Element {
+    return (
+        <div className="mx_PinnedSeparator" role="separator" aria-label={_t("timeline|pinned_separator_description")}>
+            {_t("timeline|pinned_separator")}
+        </div>
+    );
+}

src/i18n/strings/en_EN.json

@@ -3523,6 +3523,8 @@
         "no_permission_messages_before_join": "You don't have permission to view messages from before you joined.",
         "pending_moderation": "Message pending moderation",
         "pending_moderation_reason": "Message pending moderation: %(reason)s",
+        "pinned_separator": "pinned",
+        "pinned_separator_description": "The following message is pinned.",
         "reactions": {
             "add_reaction_prompt": "Add reaction",
             "custom_reaction_fallback_label": "Custom reaction",

src/utils/PinningUtils.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MatrixEvent, EventType, M_POLL_START } from "matrix-js-sdk/src/matrix";
+import { MatrixEvent, EventType, M_POLL_START, MatrixClient, EventTimeline } from "matrix-js-sdk/src/matrix";
 
 export default class PinningUtils {
     /**
@@ -38,4 +38,22 @@ export default class PinningUtils {
 
         return true;
     }
+
+    /**
+     * Determines if the given event is pinned.
+     * @param matrixClient
+     * @param mxEvent
+     */
+    public static isPinned(matrixClient: MatrixClient, mxEvent: MatrixEvent): boolean {
+        const room = matrixClient.getRoom(mxEvent.getRoomId());
+        if (!room) return false;
+
+        const pinnedEvent = room
+            .getLiveTimeline()
+            .getState(EventTimeline.FORWARDS)
+            ?.getStateEvents(EventType.RoomPinnedEvents, "");
+        if (!pinnedEvent) return false;
+        const content = pinnedEvent.getContent();
+        return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(mxEvent.getId());
+    }
 }