element-web/apps/web/res/css/structures/_ThreadsActivityCentre.pcss

/*
 * Copyright 2024 New Vector Ltd.
 * Copyright 2024 The Matrix.org Foundation C.I.C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_ThreadsActivityCentre_container {
    display: flex;
}

.mx_ThreadsActivityCentreButton {
    /* !important override compound */
    border-radius: 8px !important;
    margin: 18px auto auto auto;

    &.expanded {
        /**
         * override compound default background color when hovered
         * should disappear when the space panel will be migrated to compound
         */
        background-color: transparent !important;

        /* align with settings icon */
        margin-left: 21px;
        margin-right: 8px;
        width: 100%;

        /**
         * modify internal css of the compound component
         * dirty but we need to add the `Threads` label into the indicator icon button
         **/
        & > div {
            display: flex;
            align-items: center;

            &::before {
                inline-size: 8px;
                block-size: 8px;
                left: 17px;
            }
        }

        & .mx_ThreadsActivityCentreButton_Icon {
            /* align with settings label */
            margin-right: 14px;
            /* required to set the icon width when into a flex container */
            width: 24px;
            flex-shrink: 0;
        }

        & .mx_ThreadsActivityCentreButton_Text {
            /* !important override compound  */
            color: $secondary-content !important;
        }
    }

    &:not(.expanded) {
        &:hover,
        &:hover .mx_ThreadsActivityCentreButton_Icon {
            /* !important override compound */
            background-color: $quaternary-content !important;
            fill: $primary-content;
        }
    }

    & .mx_ThreadsActivityCentreButton_Icon {
        fill: $secondary-content;
    }
}

/* Compound styles its Menu/NavBar/MenuItem internals with single-class selectors. The
   `[role="menu"]` qualifier gives our rules a higher specificity so they win without
   `!important`. */
.mx_ThreadsActivityCentre_menu[role="menu"] {
    /* Override compound's default 340px cap */
    max-inline-size: 444px;
    inline-size: 444px;
    /*
     * Awful, brittle hack to remove padding from the menu which is now added on the content child
     * This probably ought to be a parameter to the compound component if we sometimes don't want padding.
     */
    > [role="none"] {
        padding-block: 0;

        --cpd-menu-padding-block-end: 0;
    }

    .mx_ThreadsActivityCentre_tabs {
        /* Override NavBar's default block margin to match the Figma design */
        margin: 0;
        padding: var(--cpd-space-2x) var(--cpd-space-4x) 0;
    }

    .mx_ThreadsActivityCentre_rows {
        overflow-y: auto;
        /* Fixed panel height from the design (~6 rows), so the menu doesn't resize as the
           list changes. Row heights vary with the preview, and 432px isn't on the spacing
           scale, so this stays in px. */
        height: 432px;
        min-height: 432px;

        .mx_ThreadsActivityCentreThreadRow {
            /* Floor for rows without a message preview, which would otherwise be ~48px */
            min-height: var(--cpd-space-14x);

            /* Override compound's display: grid with a simple left-to-right flex row:
               [avatar] [gap] [text content] [indicator] */
            display: flex;
            align-items: center;
            gap: var(--cpd-space-3x);
            padding: var(--cpd-space-3x) var(--cpd-space-4x);

            /* Compound's .icon class adds margin-inline-end; zero it since gap handles spacing */
            & > .mx_DecoratedRoomAvatar {
                margin-inline-end: 0;
                flex-shrink: 0;
            }

            /* Notification decoration (mention icon / counter / activity dot) at the trailing edge */
            & > .mx_ThreadsActivityCentreThreadRow_decoration {
                flex-shrink: 0;
                align-self: center;
            }

            .mx_ThreadsActivityCentreThreadRow_content {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
                gap: var(--cpd-space-0-5x);
                text-align: start;
            }

            .mx_ThreadsActivityCentreThreadRow_header {
                display: flex;
                align-items: center;
                gap: var(--cpd-space-2x);
            }

            /* Font/letter-spacing come from the Compound Text components; only layout + colour here. */
            .mx_ThreadsActivityCentreThreadRow_roomName {
                flex: 1;
                min-width: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .mx_ThreadsActivityCentreThreadRow_preview {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                color: var(--cpd-color-text-secondary);
            }

            .mx_ThreadsActivityCentreThreadRow_sender {
                color: var(--cpd-color-text-primary);
            }
        }
    }
}

.mx_ThreadsActivityCentre_emptyCaption {
    /* Typography comes from the Compound Text component. */
    padding: var(--cpd-space-3x) var(--cpd-space-4x);
    color: var(--cpd-color-text-secondary);
}