status-desktop/ui/app/AppMain.qml

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtMultimedia 5.13
import "../imports"
import "../sounds"
import "../shared"
import "../shared/status"
import "./AppLayouts"
import "./AppLayouts/Timeline"
import "./AppLayouts/Wallet"
import "./AppLayouts/Chat/components"
import "./AppLayouts/Chat/CommunityComponents"
import Qt.labs.platform 1.1
import Qt.labs.settings 1.0

import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Layout 0.1
import StatusQ.Popups 0.1

StatusAppLayout {
    id: appMain
    anchors.fill: parent

    property alias appSettings: appSettings
    signal settingsLoaded()

    function changeAppSection(section) {
        chatsModel.communities.activeCommunity.active = false
        appView.currentIndex = Utils.getAppSectionIndex(section)
    }

    function getProfileImage(pubkey, isCurrentUser, useLargeImage) {
        if (isCurrentUser || (isCurrentUser === undefined && pubkey === profileModel.profile.pubKey)) {
            return profileModel.profile.thumbnailImage
        }

        const index = profileModel.contacts.list.getContactIndexByPubkey(pubkey)
        if (index === -1) {
            return
        }

        if (appSettings.onlyShowContactsProfilePics) {
            const isContact = profileModel.contacts.list.rowData(index, "isContact")
            if (isContact === "false") {
                return
            }
        }

        return profileModel.contacts.list.rowData(index, useLargeImage ? "largeImage" : "thumbnailImage")
    }

    function openPopup(popupComponent, params = {}) {
        const popup = popupComponent.createObject(appMain, params);
        popup.open()
        return popup
    }

    function getContactListObject(dataModel) {
        const nbContacts = profileModel.contacts.list.rowCount()
        const contacts = []
        let contact
        for (let i = 0; i < nbContacts; i++) {
            contact = {
                name: profileModel.contacts.list.rowData(i, "name"),
                localNickname: profileModel.contacts.list.rowData(i, "localNickname"),
                pubKey: profileModel.contacts.list.rowData(i, "pubKey"),
                address: profileModel.contacts.list.rowData(i, "address"),
                identicon: profileModel.contacts.list.rowData(i, "identicon"),
                thumbnailImage: profileModel.contacts.list.rowData(i, "thumbnailImage"),
                isUser: false,
                isContact: profileModel.contacts.list.rowData(i, "isContact") !== "false"
            }

            contacts.push(contact)
            if (dataModel) {
                dataModel.append(contact);
            }
        }
        return contacts
    }

    function getUserNickname(pubKey) {
        // Get contact nickname
        const contactList = profileModel.contacts.list
        const contactCount = contactList.rowCount()
        for (let i = 0; i < contactCount; i++) {
            if (contactList.rowData(i, 'pubKey') === pubKey) {
                return contactList.rowData(i, 'localNickname')
            }
        }
        return ""
    }

    function openLink(link) {
        if (appSettings.showBrowserSelector) {
            appMain.openPopup(chooseBrowserPopupComponent, {link: link})
        } else {
            if (appSettings.openLinksInStatus) {
                appMain.changeAppSection(Constants.browser)
                browserLayoutContainer.item.openUrlInNewTab(link)
            } else {
                Qt.openUrlExternally(link)
            }
        }
    }


    appNavBar: StatusAppNavBar {
        height: appMain.height

        navBarChatButton: StatusNavBarTabButton {
            icon.name: "chat"
            checked: !chatsModel.communities.activeCommunity.active  && appView.currentIndex === Utils.getAppSectionIndex(Constants.chat)
            //% "Chat"
            tooltip.text: qsTrId("chat")
            badge.value: chatsModel.messageView.unreadDirectMessagesAndMentionsCount + profileModel.contacts.contactRequests.count
            badge.visible: badge.value > 0 || (chatsModel.messageView.unreadMessagesCount > 0 && !checked)
            badge.anchors.rightMargin: badge.value > 0 ? 0 : 4
            badge.anchors.topMargin: badge.value > 0 ? 4 : 5
            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor
            badge.border.width: 2
            onClicked: {
                if (chatsModel.communities.activeCommunity.active) {
                    chatLayoutContainer.chatColumn.input.hideExtendedArea();
                    chatsModel.communities.activeCommunity.active = false
                }
                appMain.changeAppSection(Constants.chat)
            }
        }

        navBarCommunityTabButtons.model: chatsModel.communities.joinedCommunities
        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
            onClicked: {
                appMain.changeAppSection(Constants.chat)
                chatsModel.communities.setActiveCommunity(model.id)
            }

            anchors.horizontalCenter: parent.horizontalCenter

            checked: chatsModel.communities.activeCommunity.active && chatsModel.communities.activeCommunity.id === model.id
            name: model.name
            tooltip.text: model.name
            icon.color: model.communityColor
            icon.source: model.thumbnailImage

            badge.visible: !checked && model.unviewedMessagesCount > 0
            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
            badge.border.width: 2
            badge.anchors.rightMargin: 4
            badge.anchors.topMargin: 5

            popupMenu: StatusPopupMenu {
                id: communityContextMenu

                openHandler: function () {
                    chatsModel.communities.setObservedCommunity(model.id)
                }

                StatusMenuItem {
                    //% "Invite People"
                    text: qsTrId("invite-people")
                    icon.name: "share-ios"
                    enabled: chatsModel.communities.observedCommunity.canManageUsers
                    onTriggered: openPopup(inviteFriendsToCommunityPopup, {
                        community: chatsModel.communities.observedCommunity
                    })
                }

                StatusMenuItem {
                    //% "View Community"
                    text: qsTrId("view-community")
                    icon.name: "group-chat"
                    onTriggered: openPopup(communityProfilePopup, {
                        community: chatsModel.communities.observedCommunity
                    })
                }

                StatusMenuItem {
                    enabled: chatsModel.communities.observedCommunity.admin
                    //% "Edit Community"
                    text: qsTrId("edit-community")
                    icon.name: "edit"
                    onTriggered: openPopup(editCommunityPopup, {community: chatsModel.communities.observedCommunity})
                }

                StatusMenuSeparator {}

                StatusMenuItem {
                    //% "Leave Community"
                    text: qsTrId("leave-community")
                    icon.name: "arrow-right"
                    icon.width: 14
                    iconRotation: 180
                    type: StatusMenuItem.Type.Danger
                    onTriggered: chatsModel.communities.leaveCommunity(model.id)
                }
            }
        }

        navBarTabButtons: [
            StatusNavBarTabButton {
                icon.name: "wallet"
                //% "Wallet"
                tooltip.text: qsTrId("wallet")
                visible: enabled
                enabled: isExperimental === "1" || appSettings.isWalletEnabled
                checked: appView.currentIndex == Utils.getAppSectionIndex(Constants.wallet)
                onClicked: appMain.changeAppSection(Constants.wallet)
            },

            StatusNavBarTabButton {
                enabled: isExperimental === "1" || appSettings.isBrowserEnabled
                visible: enabled
                //% "Browser"
                tooltip.text: qsTrId("browser")
                icon.name: "browser"
                checked: appView.currentIndex == Utils.getAppSectionIndex(Constants.browser)
                onClicked: appMain.changeAppSection(Constants.browser)
            },

            StatusNavBarTabButton {
                enabled: isExperimental === "1" || appSettings.timelineEnabled
                visible: enabled
                //% "Timeline"
                tooltip.text: qsTrId("timeline")
                icon.name: "status-update"
                checked: appView.currentIndex == Utils.getAppSectionIndex(Constants.timeline)
                onClicked: appMain.changeAppSection(Constants.timeline)
            },

            StatusNavBarTabButton {
                id: profileBtn
                //% "Profile"
                tooltip.text: qsTrId("profile")
                icon.name: "profile"
                checked: appView.currentIndex == Utils.getAppSectionIndex(Constants.profile)
                onClicked: appMain.changeAppSection(Constants.profile)

                badge.visible: !profileModel.mnemonic.isBackedUp && !checked
                badge.anchors.rightMargin: 4
                badge.anchors.topMargin: 5
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor
                badge.border.width: 2
            }
        ]
    }

    appView: StackLayout {
        id: appView
        anchors.fill: parent
        currentIndex: 0
        onCurrentIndexChanged: {
            if (typeof this.children[currentIndex].onActivated === "function") {
                this.children[currentIndex].onActivated()
            }

            if(this.children[currentIndex] === browserLayoutContainer && browserLayoutContainer.active == false){
                browserLayoutContainer.active = true;
            }

            timelineLayoutContainer.active = this.children[currentIndex] === timelineLayoutContainer

            if(this.children[currentIndex] === walletLayoutContainer){
                walletLayoutContainer.showSigningPhrasePopup();
            }
        }

        ChatLayout {
            id: chatLayoutContainer
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            Layout.fillHeight: true
            onProfileButtonClicked: {
                appMain.changeAppSection(Constants.profile);
            }
        }

        WalletLayout {
            id: walletLayoutContainer
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            Layout.fillHeight: true
        }

        Component {
            id: browserLayoutComponent
            BrowserLayout { }
        }

        Loader {
            id: browserLayoutContainer
            sourceComponent: browserLayoutComponent
            active: false
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            Layout.fillHeight: true
            // Loaders do not have access to the context, so props need to be set
            // Adding a "_" to avoid a binding loop
            property var _chatsModel: chatsModel.messageView
            property var _walletModel: walletModel
            property var _utilsModel: utilsModel
            property var _web3Provider: web3Provider
        }

        Loader {
            id: timelineLayoutContainer
            sourceComponent: Component {
                TimelineLayout {}
            }
            onLoaded: timelineLayoutContainer.item.onActivated()
            active: false
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            Layout.fillHeight: true
        }

        ProfileLayout {
            id: profileLayoutContainer
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            Layout.fillHeight: true
        }

        NodeLayout {
            id: nodeLayoutContainer
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            Layout.fillHeight: true
        }

        UIComponents {
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            Layout.fillHeight: true
        }
    }

    Settings {
        id: appSettings
        fileName: profileModel.settings.settingsFile
        property var chatSplitView
        property var walletSplitView
        property var profileSplitView
        property bool communitiesEnabled: false
        property bool isWalletEnabled: false
        property bool nodeManagementEnabled: false
        property bool isBrowserEnabled: false
        property bool isActivityCenterEnabled: false
        property bool showOnlineUsers: false
        property bool isGifWidgetEnabled: false
        property bool displayChatImages: false
        property bool useCompactMode: true
        property bool timelineEnabled: true
        property var recentEmojis: []
        property var hiddenCommunityWelcomeBanners: []
        property var hiddenCommunityBackUpBanners: []
        property real volume: 0.2
        property int notificationSetting: Constants.notifyAllMessages
        property bool notificationSoundsEnabled: true
        property bool useOSNotifications: true
        property int notificationMessagePreviewSetting: Constants.notificationPreviewNameAndMessage
        property bool notifyOnNewRequests: true
        property var whitelistedUnfurlingSites: ({})
        property bool neverAskAboutUnfurlingAgain: false
        property bool hideChannelSuggestions: false
        property int fontSize: Constants.fontSizeM
        property bool hideSignPhraseModal: false
        property bool onlyShowContactsProfilePics: true
        property bool quitOnClose: false
        property string skinColor: ""
        property bool showDeleteMessageWarning: true

        // Browser settings
        property bool showBrowserSelector: true
        property bool openLinksInStatus: true
        property bool shouldShowFavoritesBar: true
        property string browserHomepage: ""
        property int shouldShowBrowserSearchEngine: Constants.browserSearchEngineDuckDuckGo
        property int useBrowserEthereumExplorer: Constants.browserEthereumExplorerEtherscan
        property bool autoLoadImages: true
        property bool javaScriptEnabled: true
        property bool errorPageEnabled: true
        property bool pluginsEnabled: true
        property bool autoLoadIconsForPage: true
        property bool touchIconsEnabled: true
        property bool webRTCPublicInterfacesOnly: false
        property bool devToolsEnabled: false
        property bool pdfViewerEnabled: true
        property bool compatibilityMode: true
    }

    ErrorSound {
        id: errorSound
    }

    Audio {
        id: sendMessageSound
        audioRole: Audio.NotificationRole
        source: "../../../../sounds/send_message.wav"
        volume: appSettings.volume
        muted: !appSettings.notificationSoundsEnabled
    }

    Audio {
        id: notificationSound
        audioRole: Audio.NotificationRole
        source: "../../../../sounds/notification.wav"
        volume: appSettings.volume
        muted: !appSettings.notificationSoundsEnabled
    }

    Connections {
        target: profileModel.settings
        onGlobalSettingsFileChanged: {
            profileModel.changeLocale(globalSettings.locale)
        }
        onSettingsFileChanged: {
            // Since https://github.com/status-im/status-desktop/commit/93668ff75
            // we're hiding the setting to change appearance for compact normal mode
            // of the UI. For now, compact mode is the new default.
            //
            // Prior to this change, most likely many users are still using the
            // normal mode configuration, so we have to enforce compact mode for
            // those.
            if (!appSettings.useCompactMode) {
                appSettings.useCompactMode = true
            }

            const whitelist = profileModel.getLinkPreviewWhitelist()
            try {
                const whiteListedSites = JSON.parse(whitelist)
                let settingsUpdated = false

                // Add Status links to whitelist
                whiteListedSites.push({title: "Status", address: Constants.deepLinkPrefix, imageSite: false})
                whiteListedSites.push({title: "Status", address: Constants.joinStatusLink, imageSite: false})

                const settings = appSettings.whitelistedUnfurlingSites

                // Set Status links as true. We intercept thoseURLs so it is privacy-safe
                if (!settings[Constants.deepLinkPrefix] || !settings[Constants.joinStatusLink]) {
                    settings[Constants.deepLinkPrefix] = true
                    settings[Constants.joinStatusLink] = true
                    settingsUpdated = true
                }

                const whitelistedHostnames = []

                // Add whitelisted sites in to app settings that are not already there
                whiteListedSites.forEach(site => {
                                             if (!settings.hasOwnProperty(site.address))  {
                                                 settings[site.address] = false
                                                 settingsUpdated = true
                                             }
                                             whitelistedHostnames.push(site.address)
                                         })
                // Remove any whitelisted sites from app settings that don't exist in the
                // whitelist from status-go
                Object.keys(settings).forEach(settingsHostname => {
                    if (!whitelistedHostnames.includes(settingsHostname)) {
                        delete settings[settingsHostname]
                        settingsUpdated = true
                    }
                })
                if (settingsUpdated) {
                    appSettings.whitelistedUnfurlingSites = settings
                }
            } catch (e) {
                console.error('Could not parse the whitelist for sites', e)
            }
            appMain.settingsLoaded()
        }
    }

    Connections {
        target: profileModel.contacts
        onContactRequestAdded: {
            if (!appSettings.notifyOnNewRequests) {
                return
            }
            const isContact = profileModel.contacts.isAdded(address)
            //% "Contact request accepted"
            systemTray.showMessage(isContact ? qsTrId("contact-request-accepted") :
                                               //% "New contact request"
                                               qsTrId("new-contact-request"),
                                   //% "You can now chat with %1"
                                   isContact ? qsTrId("you-can-now-chat-with--1").arg(Utils.removeStatusEns(name)) :
                                               //% "%1 requests to become contacts"
                                               qsTrId("-1-requests-to-become-contacts").arg(Utils.removeStatusEns(name)),
                                   SystemTrayIcon.NoIcon,
                                   Constants.notificationPopupTTL)
        }
    }

    Component {
        id: chooseBrowserPopupComponent
        ChooseBrowserPopup {
            onClosed: {
                destroy()
            }
        }
    }

    Component {
        id: inviteFriendsToCommunityPopup
        InviteFriendsToCommunityPopup {
            anchors.centerIn: parent
            onClosed: {
                destroy()
            }
        }
    }

    Component {
        id: communityProfilePopup

        CommunityProfilePopup {
            id: communityProfilePopup
            anchors.centerIn: parent

            onClosed: {
                destroy()
            }
        }
    }

    Component {
        id: editCommunityPopup
        CreateCommunityPopup {
            anchors.centerIn: parent
            isEdit: true
            onClosed: {
                destroy()
            }
        }
    }

    Component {
        id: editChannelPopup
        CreateChannelPopup {
            anchors.centerIn: parent
            isEdit: true
            pinnedMessagesPopupComponent: chatLayoutContainer.chatColumn.pinnedMessagesPopupComponent
            onClosed: {
                destroy()
            }
        }
    }

    Component {
        id: genericConfirmationDialog
        ConfirmationDialog {
            onClosed: {
                destroy()
            }
        }
    }



    ToastMessage {
        id: toastMessage
    }
    // Add SendModal here as it is used by the Wallet as well as the Browser
    Loader {
        id: sendModal
        active: false

        function open() {
            this.active = true
            this.item.open()
        }
        function closed() {
            // this.sourceComponent = undefined // kill an opened instance
            this.active = false
        }
        sourceComponent: SendModal {
            onOpened: {
                walletModel.gasView.getGasPricePredictions()
            }
            onClosed: {
                sendModal.closed()
            }
        }
    }

    Action {
        shortcut: "Ctrl+1"
        onTriggered: changeAppSection(Constants.chat)
    }
    Action {
        shortcut: "Ctrl+2"
        onTriggered: changeAppSection(Constants.browser)
    }
    Action {
        shortcut: "Ctrl+3"
        onTriggered: changeAppSection(Constants.wallet)
    }
    Action {
        shortcut: "Ctrl+4, Ctrl+,"
        onTriggered: changeAppSection(Constants.profile)
    }
    Action {
        shortcut: "Ctrl+K"
        onTriggered: {
            if (channelPicker.opened) {
                channelPicker.close()
            } else {
                channelPicker.open()
            }
        }
    }

    Component {
        id: statusIdenticonComponent
        StatusIdenticon {}
    }

    StatusInputListPopup {
        id: channelPicker
        //% "Where do you want to go?"
        title: qsTrId("where-do-you-want-to-go-")
        showSearchBox: true
        width: 350
        x: parent.width / 2 - width / 2
        y: parent.height / 2 - height / 2
        modelList: chatsModel.channelView.chats
        getText: function (modelData) {
            return modelData.name
        }
        getImageComponent: function (parent, modelData) {
            return statusIdenticonComponent.createObject(parent, {
                                                             width: channelPicker.imageWidth,
                                                             height: channelPicker.imageHeight,
                                                             chatName: modelData.name,
                                                             chatType: modelData.chatType,
                                                             identicon: modelData.identicon
                                                         });
        }
        onClicked: function (index) {
            chatsModel.channelView.setActiveChannelByIndex(index)
            appMain.changeAppSection(Constants.chat)
            channelPicker.close()
        }
    }
}

/*##^##
Designer {
    D{i:0;formeditorZoom:1.75;height:770;width:1232}
}
##^##*/