[StatusStackModal] Design and implement a new replacement multi page dialog

[caybro]

Bug Report

StatusStackModal (a component to display a wizard-like, multi page dialog with left/right buttons) is used in several places throughout the application. However, it has many inherent problems:

• performance penalty due to loading all the pages upfront (due to using a StackLayout internally in StatusAnimatedStack)
• as all the pages are available, there is no clear separation of handling the state internally, and often the internal state is shared between the pages, and the logic scattered among them
• impossible to dynamically add/remove pages during runtime
• UI issues with the need of manually driving the page animations and transitions
• StatusStackModal is internally using the now deprecated StatusModal
• ...

Description

For newly introduced features, we (the UI team) decided it's high time to come up with a replacement component that would ideally solve the above issues. The old StatusStackModal component will be eventually renamed to StatusStackModalDeprecated and its usages adjusted, in order no to break the existing code.

Solution: StatusMultiDialog

• a new component is developed, called StatusMultiDialog solving all of the above problems
• based internally on StatusDialog
• using a StackView, allowing for dynamic management of pages and providing animations/transitions out of the box

[caybro]

CC @noeliaSD @micieslak @alexjba

@osmaczko @MishkaRogachev your comments are welcome too :)

TIA

[Khushboo-dev-cpp]

in case we intend to use this for send/bridge/swap/receive flows can we please add support for this floating header you see here? https://www.figma.com/design/TS0eQX9dAZXqZtELiwKIoK/Swap---Milestone-1?node-id=3833-185472&t=d6cgaxAXLh0q3jiu-4 @caybro ?

[caybro]

in case we intend to use this for send/bridge/swap/receive flows can we please add support for this floating header you see here? https://www.figma.com/design/TS0eQX9dAZXqZtELiwKIoK/Swap---Milestone-1?node-id=3833-185472&t=d6cgaxAXLh0q3jiu-4 @caybro ?

You mean the account selector (combobox on top)?

[alexjba]

in case we intend to use this for send/bridge/swap/receive flows can we please add support for this floating header you see here? https://www.figma.com/design/TS0eQX9dAZXqZtELiwKIoK/Swap---Milestone-1?node-id=3833-185472&t=d6cgaxAXLh0q3jiu-4 @caybro ?

I think this could be a header implementation. We have a similar implementation here: https://github.com/status-im/status-desktop/blob/master/ui/imports/shared/popups/ProfileDialog.qml#L49

[osmaczko]

Good initiative :+1:

• Is there a chance to rename StatusModal to StatusModalDepracated in the scope of this task?
• Is there a chance to address https://github.com/status-im/status-desktop/pull/10668#discussion_r1220151161 in the scope of this task?

[caybro]

@noeliaSD Due to the new Swap/dApp designs, there is no pressing need to do this for 2.30 (yet), so postponing this to 2.31; will concentrate instead on Swap UI tasks