Mobile support

[toniengelhardt]

Make it work on mobile.

[RyanPaulGannon]

I noticed the stores/ui.ts and I'm intrigued. I've only ever adjusted views subject to breakpoints set with Tailwind. Do you set breakpoints using Pinia too, or in Uno (another thing I've not come across until this project haha) or some other way altogether?

[toniengelhardt]

Yes.

I know from previous projects that it's close to impossible to do all the breakpoints only with css, or at least it's quite limiting in terms of design and performance, e.g. for mobile we'll need a bottom navigation as opposed to the side menu on desktop.

We could also render both elements and then hide one with CSS media queries based on the breakpoints but that would mean rendering one component without using it, which is bad for performance.

I think the approach should be the following:

• If possible build layouts and components responsive with UnoCSS breakpoints, so that they work for all viewport sizes. This is the ideal solution.
• Only if that is not possible use a mobile and a desktop component and ui.mobile to show only one.

At some point we might also need a tablet size, not sure yet...

[RyanPaulGannon]

Okay that's interesting. Going to look in to UnoCSS.

Forgive me for asking something potentially obvious, specific layouts to be created as Nuxt references in the docs (https://nuxtjs.org/docs/directory-structure/layouts/)?

[toniengelhardt]

Do you mean using a layout for mobile? I guess that would also be an option but we would probably still need the ui.mobile flag, bc sometimes you might have different display modes within a component or something like that, e.g. the transaction list will have to very compact and probably simplified when displayed on a small screen.

But tbh I'm not sure what's the best solution to deal with this.

[RyanPaulGannon]

Yeah that's a good point, I'm going to take at look at the three apps you've referenced on the README.md and try and play around with some ideas.

[toniengelhardt]

Basic mobile should work now.

Also, you can now install the app as PWA and connect from a normal browser via WalletConnect + e.g. MetaMask.