status-desktop/storybook/pages/CommunitiesViewPage.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

import StatusQ.Core 0.1

import AppLayouts.Profile.views 1.0
import mainui 1.0
import utils 1.0

import Storybook 1.0
import Models 1.0
import shared.stores 1.0

SplitView {
    id: root

    Logs { id: logs }

    orientation: Qt.Vertical

    Popups {
        popupParent: root
        rootStore: QtObject {}
        communityTokensStore: CommunityTokensStore {}
    }

    ListModel {
        id: emptyModel
    }

    ListModel {
        id: communitiesModel
        Component.onCompleted:
            append([{
                        id: "0x0001",
                        name: "I am 0wner!1!!",
                        description: "Lorem ipsum dolor sit amet",
                        introMessage: "Welcome to ze club",
                        outroMessage: "Sad to see you go",
                        joined: true,
                        spectated: false,
                        memberRole: Constants.memberRole.owner,
                        isControlNode: true,
                        image: ModelsData.icons.dribble,
                        color: "yellow",
                        muted: false,
                        members: [ { pubKey: "0xdeadbeef" } ]
                    },
                    {
                        id: "0x0002",
                        name: "Test community 2",
                        description: "Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.",
                        introMessage: "Welcome to ze club",
                        outroMessage: "Sad to see you go",
                        joined: true,
                        spectated: false,
                        memberRole: Constants.memberRole.none,
                        isControlNode: false,
                        image: ModelsData.icons.status,
                        color: "peach",
                        muted: false,
                        members: [ { pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" } ]
                    },
                    {
                        id: "0x0003",
                        name: "Free to join",
                        introMessage: "Welcome to ze club",
                        description: "Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.",
                        outroMessage: "Sad to see you go",
                        joined: false,
                        spectated: true,
                        memberRole: Constants.memberRole.none,
                        isControlNode: false,
                        image: ModelsData.icons.coinbase,
                        color: "red",
                        muted: false,
                        members: [ { pubKey: "0xdeadbeef" } ]
                    },
                    {
                        id: "0x0004",
                        name: "Muted community",
                        introMessage: "Welcome to ze club",
                        description: "Lorem ipsum dolor sit amet",
                        outroMessage: "Sad to see you go",
                        joined: true,
                        spectated: false,
                        memberRole: Constants.memberRole.none,
                        isControlNode: false,
                        image: "",
                        color: "whitesmoke",
                        muted: true,
                        members: []
                    },
                    {
                        id: "0x0005",
                        name: "Admin test community",
                        description: "Lorem ipsum dolor sit amet",
                        introMessage: "Welcome to ze club",
                        outroMessage: "Sad to see you go",
                        joined: true,
                        spectated: false,
                        memberRole: Constants.memberRole.admin,
                        isControlNode: false,
                        image: ModelsData.icons.socks,
                        color: "green",
                        muted: false,
                        members: [{ pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }]
                    },
                    {
                        id: "0x0006",
                        name: "Pending request here",
                        description: "Lorem ipsum dolor sit amet",
                        introMessage: "Welcome to ze club",
                        outroMessage: "Sad to see you go",
                        joined: false,
                        spectated: true,
                        memberRole: Constants.memberRole.none,
                        isControlNode: false,
                        image: ModelsData.icons.spotify,
                        color: "pink",
                        muted: false,
                        members: [{ pubKey: "0xdeadbeef" }]
                    },
                    {
                        id: "0x0007",
                        name: "Token Master Club",
                        description: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi",
                        introMessage: "Welcome to ze club",
                        outroMessage: "Sad to see you go",
                        joined: true,
                        spectated: false,
                        memberRole: Constants.memberRole.tokenMaster,
                        image: ModelsData.icons.cryptPunks,
                        color: "lightslategrey",
                        muted: false,
                        members: [{ pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }]
                    }
                   ])
    }

    CommunitiesView {
        SplitView.fillWidth: true
        SplitView.preferredHeight: 400

        contentWidth: 664
        profileSectionStore: QtObject {
            property var communitiesProfileModule: QtObject {
                function setCommunityMuted(communityId, mutedType) {
                    logs.logEvent("profileSectionStore::communitiesProfileModule::setCommunityMuted", ["communityId", "mutedType"], arguments)
                }
                function leaveCommunity(communityId) {
                    logs.logEvent("profileSectionStore::communitiesProfileModule::leaveCommunity", ["communityId"], arguments)
                }
            }
            property var communitiesList: ctrlEmptyView.checked ? emptyModel : communitiesModel
        }
        rootStore: QtObject {
            function isCommunityRequestPending(communityId) {
                return communityId === "0x0006"
            }
            function cancelPendingRequest(communityId) {
                logs.logEvent("rootStore::cancelPendingRequest", ["communityId"], arguments)
            }
            function setActiveCommunity(communityId) {
                logs.logEvent("rootStore::setActiveCommunity", ["communityId"], arguments)
            }
        }
    }

    LogsAndControlsPanel {
        id: logsAndControlsPanel

        SplitView.minimumHeight: 100
        SplitView.preferredHeight: 200

        logsView.logText: logs.logText

        Switch {
            id: ctrlEmptyView
            text: "No communities"
        }
    }
}

// category: Views

// https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=16089-387522&t=HRT9BmZXnl7Lt55Q-0