feat(NcAppContent): add no-split layout + feat(NcListItem): add one-line layout

[GretaD]

☑️ Resolves

• Ref Full-width mail list  nextcloud/mail#8811

Having the possibility to switch to a full-width message/thread list. The three column design (nav + list + content) becomes two columns: nav + list or nav + content. The user will see the list. When they navigate to a message/thread, the content shows.

Adding a prop layoutMode to switch between views on NcAppContent and changing a bit the NcListItem, instead of putting the details inside the "line one" / "line two" we should split main content and details.

This allows to switch from flex-direction column to row for one-line layout without adjusting the DOM. This way we have the possibility to show the list in one line on mail, without breaking the other apps.

When we are on list mode(oneLine) and content view is shown(aka thread on mail), we need to have both button, the back button and the navigation button. So, we had to change a bit how to show that on content view. We will need a better solution for those 2 buttons in the future, but for now it works apart from some edge cases.

🖼️ Screenshots

After

🚧 Tasks

• ...

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[GretaD]

A comment from Ferdinand:

Currently we have:
line one
content | details
line two
content | details
but it would be easier to have
content | details
with content:
content one
content two
And same with the details..

[susnux]

A comment from Ferdinand

Yes instead of putting the details inside the "line one" / "line two" we should split main content and details.
This allows to switch from flex-direction collumn to row for one-line layout without adjusting the DOM.

We only need to change the styles then.

[st3iny]

I tested this for regressions on Spreed and Calendar and it worked fine.

[ShGKme]

Everything seems to work fine, thanks for changes 😊

[ChristophWurst]

1. No changes for an app that doesn't change 👍 🙏
2. Works with Add the possibility to change mail list view into full width nextcloud/mail#9285 and a few minor adjustments 👍

[ShGKme]

/backport to next