fix(teams): circular Talk previews, border-radius-small for Files previews

[jancborchardt]

Fixes the previews in Teams not looking correct. Together with nextcloud/circles#2494

Previews in Teams are currently square.
Previews for Files should have border-radius-small. The previews in "Talk conversations" should be circular.

Before	After

Summary

• Adds a provider-based CSS class (circle-details-section--{providerId}) to each resource section so styles can be scoped by provider
• Talk conversation images get border-radius-pill (circular)
• Files image previews get border-radius-small (slightly rounded corners)

Test plan

• Open Contacts, navigate to a Team/Circle that has both shared Talk conversations and shared files
• Confirm Talk conversation avatars are circular
• Confirm Files image previews have small rounded corners

🤖 Generated with Claude Code

[hamza221]

@cristianscheid until which version should this be backported ?

[hamza221]

/backport to stable8.6

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[cristianscheid]

@cristianscheid until which version should this be backported ?

Hey @hamza221, just left a comment on circle's PR. I don't think changes on circle's repo are needed for this fix.

Regarding backporting, not sure how backporting works for contacts, but since currently NC supported versions are 33 and 32, the matching version of contacts for 32 seems to be v8.3.12, so maybe until v8.3.12?

Looking at https://github.com/nextcloud/contacts/blob/v8.3.12/src/components/CircleDetails.vue#L171, providerId variable used on this PR was already available so I think it should not break.

[cristianscheid]

Looks good to me, tested and worked as expected.

Only thing is that there's a NPM lint error to be solved: ':class' should be on a new line. On this section:

<div v-for="(group, providerId) in groupedResources" :key="providerId" class="circle-details-section" :class="`circle-details-section--${providerId}`">

[hamza221]

Looks good to me, tested and worked as expected.

Only thing is that there's a NPM lint error to be solved: ':class' should be on a new line. On this section:

<div v-for="(group, providerId) in groupedResources" :key="providerId" class="circle-details-section" :class="`circle-details-section--${providerId}`">

@jancborchardt npm run lint:fix then amend to the commit and force push should fix it

[jancborchardt]

@hamza221 @cristianscheid thanks, fixed! (And rebased as well)

[hamza221]

/backport to stable8.3