Merge #401: Introduce Wallet Select Dropdown

2c1433d qml: Introduce the WalletSelect component (johnny9)
d61b861 qml: Introduce the WalletBadge component (johnny9)

Pull request description:

  WalletSelect is a Popup that appears after clicking the main
  WalletBadge in the DesktopNavigation bar. It contains a ListView
  that allows the user to select one of the wallets listed in the
  wallet directory.

  This PR uses the arrow icon that is shared with the Tooltip so it is based off of that commit.

  [![Build Artifacts](https://img.shields.io/badge/Build%20Artifacts-green
  )](https://github.com/bitcoin-core/gui-qml/actions/runs/9263281845)

ACKs for top commit:
  D33r-Gee:
    tACK [2c1433d](2c1433d) on WSL Ubuntu 22.04

Tree-SHA512: 19b877ca1be7488c54e79dba28720818711ab9f9f8de34cdb4f540daa150dc6debb8d78d9e0ba14b8a246f88497f6a04b089bcd3e4dca433afe49990201439d9

Author: hebasto

qml/bitcoin.cpp

@@ -26,6 +26,7 @@
 #include <qml/models/nodemodel.h>
 #include <qml/models/options_model.h>
 #include <qml/models/peerlistsortproxy.h>
+#include <qml/models/walletlistmodel.h>
 #include <qml/imageprovider.h>
 #include <qml/util.h>
 #include <qml/walletcontroller.h>
@@ -295,12 +296,15 @@ int QmlGuiMain(int argc, char* argv[])
     assert(!network_style.isNull());
     engine.addImageProvider(QStringLiteral("images"), new ImageProvider{network_style.data()});
 
+    WalletListModel wallet_list_model{*node, nullptr};
+
     engine.rootContext()->setContextProperty("networkTrafficTower", &network_traffic_tower);
     engine.rootContext()->setContextProperty("nodeModel", &node_model);
     engine.rootContext()->setContextProperty("chainModel", &chain_model);
     engine.rootContext()->setContextProperty("peerTableModel", &peer_model);
     engine.rootContext()->setContextProperty("peerListModelProxy", &peer_model_sort_proxy);
     engine.rootContext()->setContextProperty("walletController", &wallet_controller);
+    engine.rootContext()->setContextProperty("walletListModel", &wallet_list_model);
 
     OptionsQmlModel options_model(*node, !need_onboarding.toBool());
     engine.rootContext()->setContextProperty("optionsModel", &options_model);

qml/bitcoin_qml.qrc

@@ -73,6 +73,8 @@
         <file>pages/wallet/CreateName.qml</file>
         <file>pages/wallet/CreatePassword.qml</file>
         <file>pages/wallet/DesktopWallets.qml</file>
+        <file>pages/wallet/WalletBadge.qml</file>
+        <file>pages/wallet/WalletSelect.qml</file>
     </qresource>
     <qresource prefix="/icons">
         <file alias="add-wallet-dark">res/icons/add-wallet-dark.png</file>
@@ -95,6 +97,7 @@
         <file alias="info">res/icons/info.png</file>
         <file alias="network-dark">res/icons/network-dark.png</file>
         <file alias="network-light">res/icons/network-light.png</file>
+        <file alias="plus">res/icons/plus.png</file>
         <file alias="shutdown">res/icons/shutdown.png</file>
         <file alias="singlesig-wallet">res/icons/singlesig-wallet.png</file>
         <file alias="storage-dark">res/icons/storage-dark.png</file>

qml/controls/Icon.qml

@@ -7,6 +7,8 @@ import QtQuick.Controls 2.15
 
 Button {
     id: root
+    width: icon.width
+    height: icon.height
     required property color color
     required property url source
     property int size: 32

qml/imageprovider.cpp

@@ -162,5 +162,9 @@ QPixmap ImageProvider::requestPixmap(const QString& id, QSize* size, const QSize
         return QIcon(":/icons/hidden").pixmap(requested_size);
     }
 
+    if (id == "plus") {
+        *size = requested_size;
+        return QIcon(":/icons/plus").pixmap(requested_size);
+    }
     return {};
 }

qml/models/walletlistmodel.cpp

@@ -0,0 +1,81 @@
+// Copyright (c) 2024 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+#include <qml/models/walletlistmodel.h>
+
+#include <interfaces/node.h>
+
+#include <QSet>
+
+WalletListModel::WalletListModel(interfaces::Node& node, QObject *parent)
+: QAbstractListModel(parent)
+, m_node(node)
+{
+    setSelectedWallet("Singlesig Wallet");
+}
+
+void WalletListModel::listWalletDir()
+{
+    QSet<QString> existing_names;
+    for (int i = 0; i < rowCount(); ++i) {
+        QModelIndex index = this->index(i, 0);
+        QString name = data(index, NameRole).toString();
+        existing_names.insert(name);
+    }
+
+    for (const std::string &name : m_node.walletLoader().listWalletDir()) {
+        QString qname = QString::fromStdString(name);
+        if (!existing_names.contains(qname)) {
+            addItem({ qname });
+        }
+    }
+}
+
+void WalletListModel::setSelectedWallet(QString wallet_name)
+{
+    if (m_selected_wallet != wallet_name) {
+        m_selected_wallet = wallet_name;
+        Q_EMIT selectedWalletChanged();
+    }
+}
+
+QString WalletListModel::selectedWallet() const
+{
+    return m_selected_wallet;
+}
+
+int WalletListModel::rowCount(const QModelIndex &parent) const
+{
+    Q_UNUSED(parent);
+    return m_items.size();
+}
+
+QVariant WalletListModel::data(const QModelIndex &index, int role) const
+{
+    if (!index.isValid() || index.row() < 0 || index.row() >= m_items.size())
+        return QVariant();
+
+    const auto &item = m_items[index.row()];
+    switch (role) {
+    case Qt::DisplayRole:
+    case NameRole:
+        return item.name;
+    default:
+        return QVariant();
+    }
+}
+
+QHash<int, QByteArray> WalletListModel::roleNames() const
+{
+    QHash<int, QByteArray> roles;
+    roles[NameRole] = "name";
+    return roles;
+}
+
+void WalletListModel::addItem(const Item &item)
+{
+    beginInsertRows(QModelIndex(), rowCount(), rowCount());
+    m_items.append(item);
+    endInsertRows();
+}

qml/models/walletlistmodel.h

@@ -0,0 +1,55 @@
+// Copyright (c) 2024 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+#ifndef BITCOIN_QML_MODELS_WALLETLISTMODEL_H
+#define BITCOIN_QML_MODELS_WALLETLISTMODEL_H
+
+#include <interfaces/wallet.h>
+#include <QAbstractListModel>
+#include <QList>
+
+namespace interfaces {
+class Node;
+}
+
+class WalletListModel : public QAbstractListModel
+{
+    Q_OBJECT
+    Q_PROPERTY(QString selectedWallet READ selectedWallet WRITE setSelectedWallet NOTIFY selectedWalletChanged)
+
+public:
+    WalletListModel(interfaces::Node& node, QObject *parent = nullptr);
+    ~WalletListModel() = default;
+
+    enum Roles {
+        NameRole = Qt::UserRole + 1
+    };
+
+    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
+    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
+    QHash<int, QByteArray> roleNames() const override;
+
+    void setSelectedWallet(QString wallet_name);
+    QString selectedWallet() const;
+
+public Q_SLOTS:
+    void listWalletDir();
+
+Q_SIGNALS:
+    void selectedWalletChanged();
+
+private:
+    struct Item {
+        QString name;
+    };
+
+    void addItem(const Item &item);
+
+    QList<Item> m_items;
+    interfaces::Node& m_node;
+    QString m_selected_wallet;
+
+};
+
+#endif // BITCOIN_QML_MODELS_WALLETLISTMODEL_H

qml/pages/wallet/DesktopWallets.qml

@@ -21,27 +21,26 @@ Page {
 
     header: NavigationBar2 {
         id: navBar
-        leftItem: RowLayout {
-            spacing: 5
-            Icon {
-                source: "image://images/singlesig-wallet"
-                color: Theme.color.neutral8
-                Layout.preferredWidth: 30
-                Layout.preferredHeight: 30
-                Layout.leftMargin: 10
-            }
-            Column {
-                spacing: 2
-                CoreText {
-                    text: "Singlesig Wallet"
-                    color: Theme.color.neutral7
-                    bold: true
-                }
-                CoreText {
-                    text: "<font color=\""+Theme.color.white+"\">₿</font> 0.00 <font color=\""+Theme.color.white+"\">167 599</font>"
-                    color: Theme.color.neutral7
+        leftItem: WalletBadge {
+            implicitWidth: 154
+            implicitHeight: 46
+            text: walletListModel.selectedWallet
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    walletListModel.listWalletDir()
+                    walletSelect.opened ? walletSelect.close() : walletSelect.open()
                 }
             }
+
+            WalletSelect {
+                id: walletSelect
+                model: walletListModel
+                closePolicy: Popup.CloseOnPressOutside
+                x: 0
+                y: parent.height
+            }
         }
         centerItem: RowLayout {
             NavigationTab {