qml: Introduce adaptive sidebar/tab-bar shell driven by size class

[pseudoramdom]

Summary

Introduces an adaptive navigation shell - a single declarative tree of tabs that renders as a persistent sidebar at regular widths and a bottom tab bar at compact widths, swapping automatically at runtime based on the window size.

Gated behind the -DENABLE_TABVIEW_SHELL=ON CMake flag

Related to #689

Details

• SizeClass - a small singleton that turns the live window dimensions into one of two coarse buckets: compact (narrow) and regular (wide).
• Tab - represents a single navigation destination. Each tab carries a title, an icon
• TabSection - groups related tabs together. In the sidebar, sections render with a header above their tabs to provide visual grouping
• TabView - the adaptive shell. It accepts a tree of tabs (and sections of tabs) and decides at runtime whether to render them as a left sidebar or a bottom tab bar based on the window's size class

TabView API at a glance

TabView {
    TabSection {
        title: qsTr("Node")
        Tab { title: "Node";    iconSource: "..."; contentComponent: Component { NodeRunner {} } }
        Tab { title: "Peers";   displayModes: TabView.Sidebar; ... }
        Tab { title: "Network"; displayModes: TabView.Sidebar; ... }
    }
    TabSection {
        title: qsTr("Wallet")
        displayModes: TabView.Sidebar
        model: walletListModel
        delegate: Tab {
            required property string name
            title: name
            onSelected: walletController.setSelectedWallet(name)
            contentComponent: Component { WalletContainer {} }
        }
        Tab { title: "Add Wallet"; iconSource: "..."; actionOnly: true; onTriggered: addWalletPopup.open() }
    }
    Tab { title: qsTr("Settings"); pinToBottom: true; contentComponent: Component { NodeSettings {} } }
}

Screenshots

Sidebar

Tabbar

[pseudoramdom]

Work towards #689

[davidgumberg]

Very very cool!

[jarolrod]

I realize this is a bit away and experimental, but noting a few issues - that would need both design and code work

• No (apparent) ability to create a new wallet when in the collapsed mode
• Node collapsed view can't go into the peers or network traffic page
• no way to switch wallets in collapsed view
• If on tab view on wallet selected, and go to collapsed view, the bottom bar wallet option isn't selected
• if on peers or network traffic page in tab view and scale to collapse down, node isn't selected

[pseudoramdom]

I realize this is a bit away and experimental, but noting a few issues - that would need both design and code work

All valid issues :)
You're correct, this is indeed experimental. I had started a thread with BitcoinDesign folks and wanted to show a working proof-of-concept of the idea.

• No (apparent) ability to create a new wallet when in the collapsed mode
• no way to switch wallets in collapsed view

My original intention was to just include the shell, but one thing led to another and I ended up adding the wallet container. But I got as far as only implementing that in the sidebar layout and left it incomplete for the compact view. (PR size would also grow)

Since the changes are additive and I plan on continuing to work on this behind the build flag as more features land.

(And nice to meet you here @jarolrod)