feat: Improve circle mobile experience

[pymnh]

Changes

The circles integration in the contacts app is currently not very mobile friendly and the detail view a bit cluttered, especially on mobile. This PR tries to improve the mobile experience by ...

• streamlining the different means to update the settings (edit title/description vs editing invite/privacy settings):
  • Rewrite team settings from NcPopover to NcAppSettingsDialog
  • Move editable title/description to new NcAppSettingsDialog and simplify CircleDetails.vue
  • Use toggles instead of checkboxes
  • Add a "Manage settings" action to circles item in sidebar (and rename "Manage team" action to "Add members", which is more appropriate anyways)
• Some CSS fixes:
  • wrap action items
  • Emit "Team profile picture" from mobile view (circles do not have profiles pictures anyways so currently this really just wastes space - should probably be reintroduced once circles have configurable profile pictures?)

I changed PUBLIC_CIRCLES_CONFIG so that one item is an object ({ label: string, description?: string }) instead of a string to fix the awkward overflowing checkbox for CIRCLE_CONFIG_REQUEST. Not sure if this is the cleanliest way, but it seemed straightforward to me. Another option would be to just split the strings at newlines and use everything behind \n as description. But that is maybe not very stable.

Screenshots before

• Membership/privacy settings:
  

• Editing name and description:
  

• Sidebar actions button:
  

• Mobile view:

Screenshots afterwards

• Desktop circles view:
  

• Desktop settings modal:
  

• Sidebar actions menu:
  

• Mobile view:
  

[codecov]

Codecov Report

❌ Patch coverage is 0% with 123 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/components/CircleDetails/CircleSettings.vue	0.00%	116 Missing ⚠️
.../components/AppNavigation/CircleNavigationItem.vue	0.00%	6 Missing ⚠️
src/components/CircleDetails.vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!