Add table view to Bisq Easy offerbook

[axpoems]

• Implement table view in Bisq Easy offerbook.
• Add option to switch view mode in offerbook (chat/table).

[HenrikJannsen]

There have been an icon for grid/list view for trade protocols. It got removed but the icon should be still in the images folder. If not it should be in the GH history (maybe 6-8 months back).

[axpoems]

I have worked on the table view for Bisq Easy. Following are the mock-ups.

• This introduces a concept of collapsible columns that will help with the space management in smaller screens.

• The default option would be markets open and list offer closed (just as we have now).

• A new column to the right with the offer list is introduced. This is coupled to the market selected. It can be sorted by user, price and amount and filtered by the rest of the parameters inside an offer.

• With markets collapsed.

• When selecting a row, the chat scrolls to that offer message and the latter is highlighted. Then the offer needs to be taken using the offer message in the chat. This ensures that the user does not miss context around the offer message before taking the offer.

@HenrikJannsen @DrColver - Any thoughts?

[HenrikJannsen]

Great thanks for the work on that!

From a concept POV I think it should be possible to maximize the list view and to have more columns (reputation, payment methods). I think some users just want to have the Bisq 1 like offer book view. I understand that you try to preserve the chat feeling but I am not sure if users will share that.

The width of the minimized views feels too large. I understand that the icon must be large to fit to the design of the header, but maybe we can use for markets a similar approach as in left nav to show only the market flags so that the empty space does not look weird. for the list view we could use the same approach as for the sidepane (channel info). to move the icon to the main header and when opening its shown without any placeholder visible before. We could even have 3 icons: chat view, list view, both combined. then when the user clicks chats view its chatview only. if user clicks lsit view its list view only. if both views clicked both are split 50%/50% in a splitpane with a handle so user can change with distribution (and persits for next time). the markets view can be independent of all that. just like left nav. maybe we can use also the same minimize icon on rollover (that could be improved at left nav also maybe). but basically that we re-apply same UX as left nav.

Some minor details:

• The close icon might be confusing as its just minimizing
• The markets icons reminds me more on price charts

[axpoems]

From a concept POV I think it should be possible to maximize the list view and to have more columns (reputation, payment methods).

I don't know if you noticed that the reputation is already included in the mock-up. If you're suggesting sorting, I planned to incorporate it into the filter/sorting options in the subheader. Wrt payment methods as we have them now (in text) and since there could be multiple, it's difficult to include them in the table now. When we do the switch to icons instead of text, I will look into it and add it.

Overall, this concept isn't meant to replicate the full bisq 1 table; it's a concise summary with key information. This is a basic feature in chats, usually to search, find files, images, links, etc you get the list and when clicking it scrolls to that particular message. Then, for full details, users can click on a row to view the specific chat message offer.

I think some users just want to have the Bisq 1 like offer book view. I understand that you try to preserve the chat feeling but I am not sure if users will share that.

Introducing this complementary table will enhance the overall bisq easy 'chat' experience. Again, we should consider testing it for a while and gather new feedback from users.

The width of the minimized views feels too large. I understand that the icon must be large to fit to the design of the header, but maybe we can use for markets a similar approach as in left nav to show only the market flags so that the empty space does not look weird.

The size doesn't seem too large or weird to me. We can adjust the icon size and reduce some of it, but I don't agree with you here. You can find similar solutions in other apps, like protonmail for example.
The empty space is also something good, keeping it empty will tone down the amount of information in the screen that's unnecessary for single market users (try checking this in the mock-ups I attached, imo it does make a difference).
Having said that, I'm still evaluating the overall experience and potential changes may still be made. It's important to remember that the full and default experience for non-small screens should be detached and open.

for the list view we could use the same approach as for the sidepane (channel info). to move the icon to the main header and when opening its shown without any placeholder visible before.

I was thinking to remove the arrows, positioning them somewhere else for example as you suggest near the sub-header or remove it completely.

We could even have 3 icons: chat view, list view, both combined. then when the user clicks chats view its chatview only. if user clicks lsit view its list view only. if both views clicked both are split 50%/50% in a splitpane with a handle so user can change with distribution (and persits for next time).

Imo, three icons seem excessive. Chat should always be visible (as explained in the concept). So in your suggestion, we would only need the list view icon. I like the split pane and I think it would work well with the current design, will look into adding this. Then, as the offer list becomes larger, we can add more columns with additional info.

the markets view can be independent of all that. just like left nav. maybe we can use also the same minimize icon on rollover (that could be improved at left nav also maybe). but basically that we re-apply same UX as left nav.

I think there's room for improvement and unification in both menu styles.

Some minor details:

The close icon might be confusing as its just minimizing

Its the same experience as the user profile. I see it more as a closing than minimising but we can change that. Any suggestions?

The markets icons reminds me more on price charts

The market icon is somewhat related and representative of markets and market price (something I wanted to add to the current markets column), but don't have strong feelings with it. Do you have a better suggestion in mind?

[DrColver]

@axpoems I like your choice of slide in list view with minimal info as a complement to the chat. It does feel like it enhances the chat, which is still the main component of bisq easy. Since bisq easy is chat driven that makes sense. For other trade protocols other UX choices would probably make more sense.

One can always argue which columns should be included, and I think payment method would be a useful one, or added as a filter so I could set my own acceptable methods and only show those, no need for a column in that case. I guess the point of having a list with columns is to be able to sort the data, such as reputation and price.

When testing it just now I noticed I got three rows for every offer, not sure if that's a known bug.

[axpoems]

@DrColver - Thanks for your feedback. I will add one more column for the payment methods and perhaps also a sort&filter dropdown menu as in markets.

When testing it just now I noticed I got three rows for every offer, not sure if that's a known bug.

No, I haven't seen this. Can you try with this branch? #2135
I wasn't able to repro but I think this should fix it.