Add a subline to each of the address books, explain what an address book is

[GretaD]

Is your feature request related to a problem? Please describe.

It would be helpful if:

• Add a subline to each of the address books saying e.g. "250 contacts, 10 groups" to indicate what address books are
• Optional: add text explaining what an address book is. Address books are collections of contacts. You can organize contacts into more than one address book and share individual address books with other accounts.

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

Additional context

No response

[Udassi-Pawan]

@GretaD can you be more elaborate with what needs to be done?

[GretaD]

@GretaD can you be more elaborate with what needs to be done?

@nimishavijay can you please help with a screenshot

[nimishavijay]

This is in the settings modal, a subline can be added like this:

There can also be a short explanation about what exactly an address book is below the heading. pinging @jancborchardt for help here because I am not sure I understand address books fully either 🙈 :D

[ChristophWurst]

contact counter and groups (categories) counter are doable. just checked

[ChristophWurst]

The component <SettingsAddressbook> renders the list items. The component already has access to the addressbook via a prop. The addressbook object has a property contacts, which is an object mapping contact UUID to contact. We can use that as computed property:

		contacts() {
			return Object.values(this.addressbook.contacts)
		},

Groups (vcard CATEGORIES) are slightly more tricky. They are found on the vCard property of each contact. We can flatmap them into one combined list and then deduplicate the entries:

		groups() {
			const allGroups = this.contacts
				.flatMap(contact => contact.vCard.getAllProperties('categories').map(prop => prop.getFirstValue()))
			// Deduplicate
			return [...new Set(allGroups)]
		},

These two computed array properties can be used to render counters in the template.

[DorraJaouad]

@ChristophWurst could you please grant me permission to the repo so I can push my local branch?

[ChristophWurst]

Please fork the repo and push to the fork: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork :)