feat: make download view a browser tab instead

fixes https://github.com/status-im/nim-status-client/issues/1232
This PR repurposes the DownloadView into a Loader component of a browser tab and is displayed when:

1. a new downloads tab is opened or
2. a new tab with the link status://downloads or finally when
3. the ShowAll button has been clicked.

You can open any number of Downloads tabs

When you open a new tab and type in status://downloads the title will remain as 'New Tab'

fix: add localization

ui/app/AppLayouts/Browser/BrowserLayout.qml

@@ -289,9 +289,14 @@ Rectangle {
     Action {
         shortcut: "Ctrl+D"
         onTriggered: {
-            downloadView.visible = !downloadView.visible;
+            addNewDownloadTab()
         }
     }
+    function addNewDownloadTab() {
+        tabs.createDownloadTab(tabs.count !== 0 ? currentWebView.profile : defaultProfile);
+        tabs.currentIndex = tabs.count - 1;
+    }
+
     Action {
         id: focus
         shortcut: "Ctrl+L"
@@ -380,13 +385,11 @@ Rectangle {
         anchors.top: parent.top
         anchors.topMargin: tabs.tabHeight + tabs.anchors.topMargin
         z: 52
-        visible: !downloadView.visible
         addNewTab: browserWindow.addNewTab
     }
 
     QQC1.TabView {
         property int tabHeight: 40
-        visible: !downloadView.visible
         id: tabs
         function createEmptyTab(profile, createAsStartPage) {
             var tab = addTab("", tabComponent);
@@ -408,6 +411,14 @@ Rectangle {
             return tab;
         }
 
+        function createDownloadTab(profile) {
+            var tab = addTab("", tabComponent);
+            tab.active = true;
+            tab.title = qsTr("Downloads Page")
+            tab.item.profile = profile
+            tab.item.url = "status://downloads";
+        }
+
         function indexOfView(view) {
             for (let i = 0; i < tabs.count; ++i)
                 if (tabs.getTab(i).item === view)
@@ -556,6 +567,17 @@ Rectangle {
                         findBar.reset();
                 }
 
+                Loader {
+                    active: webEngineView.url.toString() === "status://downloads"
+                    width: parent.width
+                    height: parent.height
+                    z: 54
+                    // TODO restyle this and only appears when clicking view all
+                    sourceComponent: DownloadView {
+                        id: downloadView
+                    }
+                }
+
                 Loader {
                     active: !webEngineView.url.toString()
                     width: parent.width
@@ -661,8 +683,9 @@ Rectangle {
 
     function onDownloadRequested(download) {
         downloadBar.isVisible = true
-        downloadView.append(download);
         download.accept();
+        downloadModel.append(download);
+        downloadModel.downloads.push(download);
     }
 
     MessageDialog {
@@ -694,12 +717,7 @@ Rectangle {
         }
     }
 
-    // TODO restyle this and only appears when clicking view all
-    DownloadView {
-        id: downloadView
-        visible: false
-        anchors.fill: parent
-    }
+
 
     DownloadBar {
         id: downloadBar

ui/app/AppLayouts/Browser/DownloadBar.qml

@@ -58,7 +58,7 @@ Rectangle {
         anchors.right: closeBtn.left
         anchors.rightMargin: Style.current.padding
         onClicked: {
-            downloadView.visible = true
+            addNewDownloadTab()
         }
     }
 

ui/app/AppLayouts/Browser/DownloadElement.qml

@@ -8,7 +8,8 @@ import "../../../imports"
 
 Rectangle {
     property bool downloadComplete: {
-        return !!downloadModel.downloads && !!downloadModel.downloads[index] && downloadModel.downloads[index].receivedBytes >= downloadModel.downloads[index].totalBytes
+        // listView.count ensures a value is returned even when index is undefined
+        return listView.count > 0 && !!downloadModel.downloads && !!downloadModel.downloads[index] && downloadModel.downloads[index].receivedBytes >= downloadModel.downloads[index].totalBytes
     }
     property bool isCanceled: false
     property bool hovered: false

ui/app/AppLayouts/Browser/DownloadView.qml

@@ -11,24 +11,6 @@ Rectangle {
     id: downloadView
     color: Style.current.background
 
-    function append(download) {
-        downloadModel.append(download);
-        downloadModel.downloads.push(download);
-    }
-
-    StatusIconButton {
-        id: closeBtn
-        anchors.top: parent.top
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        anchors.topMargin: Style.current.padding
-        icon.name: "browser/close"
-        iconColor: Style.current.textColor
-        onClicked: {
-            downloadView.visible = false
-        }
-    }
-
     ListView {
         id: listView
         anchors {
@@ -42,10 +24,8 @@ Rectangle {
         spacing: Style.current.padding
 
         model: downloadModel
-        delegate: Component {
-            DownloadElement {
-                width: parent.width
-            }
+        delegate: DownloadElement {
+            width: parent.width
         }
     }
 
@@ -57,14 +37,4 @@ Rectangle {
         text: qsTr("Downloaded files will appear here.")
         color: Style.current.secondaryText
     }
-
-    StatusButton {
-        text: qsTr("Close")
-        onClicked: {
-            downloadView.visible = false;
-        }
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: Style.current.padding
-    }
 }