feat: add component to enable unfurling and fix comppnent reload

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.3
 import "../../../../../imports"
 import "../../../../../shared"
+import "../../../../../shared/status"
+import "../../../Profile/LeftTab/constants.js" as ProfileConstants
 
 Item {
     id: linksItem
@@ -31,10 +33,20 @@ Item {
             return linkUrls.split(" ")
         }
 
+
         delegate: Loader {
             property string linkString: modelData
-            active: true
-            sourceComponent: {
+
+            // This connection is needed because since the white list is an array, when something in it changes,
+            // The whole object is still the same (reference), so the normal signal is not sent
+            Connections {
+                target: applicationWindow
+                onWhitelistChanged: {
+                    linkMessageLoader.sourceComponent = linkMessageLoader.getSourceComponent()
+                }
+            }
+
+            function getSourceComponent() {
                 let linkExists = false
                 let linkWhiteListed = false
                 Object.keys(appSettings.whitelistedUnfurlingSites).some(function (site) {
@@ -52,12 +64,16 @@ Item {
                 if (linkWhiteListed) {
                     return unfurledLinkComponent
                 }
-                if (linkExists) {
+                if (linkExists && !appSettings.neverAskAboutUnfurlingAgain) {
                     return enableLinkComponent
                 }
 
                 return
             }
+
+            id: linkMessageLoader
+            active: true
+            sourceComponent: getSourceComponent()
         }
     }
 
@@ -130,17 +146,49 @@ Item {
     Component {
         id: enableLinkComponent
         Rectangle {
-            width: 300
-            height: 200
+            width: 200
+            height: enableColumn.height + 2 * Style.current.halfPadding
             radius: 16
-
             border.width: 1
             border.color: Style.current.border
             color:Style.current.background
 
+            // TODO add image once Simon gives us the design
+            Column {
+                id: enableColumn
+                spacing: Style.current.halfPadding
+                anchors.top: parent.top
+                anchors.topMargin: Style.current.halfPadding
+                width: parent.width - 2 * Style.current.halfPadding
+                anchors.horizontalCenter: parent.horizontalCenter
+
                 StyledText {
-                text: qsTr("You need to enable this before being able to see it")
+                    text: qsTr("Enable link previews in chat?")
+                    horizontalAlignment: Text.AlignHCenter
+                }
+                StyledText {
+                    text: qsTr("Once enabled, links posted in the chat may share your metadata with the site")
+                    horizontalAlignment: Text.AlignHCenter
+                    wrapMode: Text.WordWrap
+                    width: parent.width
+                    color: Style.current.secondaryText
+                }
+                StatusButton {
+                    text: qsTr("Enable in Settings")
+                    onClicked: {
+                        appMain.changeAppSection(Constants.profile)
+                        profileLayoutContainer.changeProfileSection(ProfileConstants.PRIVACY_AND_SECURITY)
+                    }
+                }
+                StatusButton {
+                    text: qsTr("Don't ask me again")
+                    onClicked: {
+                        appSettings.neverAskAboutUnfurlingAgain = true
                     }
                 }
             }
+
+
+        }
+    }
 }

ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml

@@ -20,11 +20,20 @@ Item {
         const sites = profileModel.getLinkPreviewWhitelist()
         try {
             const sitesJSON = JSON.parse(sites)
+            let settingUpdadted = false
             sitesJSON.forEach(function (site) {
+                if (appSettings.whitelistedUnfurlingSites[site.address] === undefined)  {
+                    appSettings.whitelistedUnfurlingSites[site.address] = false
+                    settingUpdadted = true
+                }
+
                 previewableSites.append(site)
             })
+            if (settingUpdadted) {
+                applicationWindow.whitelistChanged()
+            }
         } catch (e) {
-            console.error(e)
+            console.error('Could not parse the whitelist for sites', e)
         }
     }
 
@@ -184,7 +193,7 @@ Item {
                     StatusSwitch {
                         checked: !!appSettings.whitelistedUnfurlingSites[address]
                         onCheckedChanged: function () {
-                            appSettings.whitelistedUnfurlingSites[address] = this.checked
+                            changeUnfurlingWhitelist(address, this.checked)
                         }
                     }
                     StyledText {

ui/main.qml

@@ -82,6 +82,7 @@ ApplicationWindow {
         property int notificationSetting: 0
         property bool notificationSoundsEnabled: true
         property var whitelistedUnfurlingSites: ({})
+        property bool neverAskAboutUnfurlingAgain: false
 
         // Browser settings
         property bool autoLoadImages: true
@@ -96,6 +97,13 @@ ApplicationWindow {
         property bool compatibilityMode: true
     }
 
+    signal whitelistChanged()
+
+    function changeUnfurlingWhitelist(site, enabled) {
+        appSettings.whitelistedUnfurlingSites[site] = enabled
+        applicationWindow.whitelistChanged()
+    }
+
     Connections {
         target: profileModel
         onProfileSettingsFileChanged: {