feat:select existing talk room for conversations on calendar events

[GretaD]

fixes #6581

This PR adds the ability to link Talk rooms to calendar events. Users can create a new Talk room or select an existing one, and the link is added to the event's location or description(when the location field is already filled).
How to test:

1. Create an event on calendar
2. Open the side bar by clicking more details
3. Find the Add Talk button

hover state and selected state

the side bar after selecting an existing convesation

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 100 lines in your changes missing coverage. Please review.

Project coverage is 23.18%. Comparing base (8f9e504) to head (b8396ef).
Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
src/components/Editor/AddTalkModal.vue	0.00%	77 Missing ⚠️
src/views/EditSidebar.vue	0.00%	22 Missing ⚠️
src/services/talkService.js	0.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #6595      +/-   ##
============================================
- Coverage     23.41%   23.18%   -0.24%     
  Complexity      472      472              
============================================
  Files           249      250       +1     
  Lines         11899    12018     +119     
  Branches       2269     2308      +39     
============================================
  Hits           2786     2786              
- Misses         8786     8905     +119     
  Partials        327      327              

Flag	Coverage Δ
javascript	14.67% <0.00%> (-0.19%)	⬇️
php	59.45% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[nimishavijay]

Changes discussed:

• Nice-to-have: avatar of the each conversation (34*34px)
• Instead of a "Select" button for each item, have only one select button in the bottom right corner
• When you click on an item, it will be highlighted in the primary color (similar to the Talk conversation list)

Additional changes:

• heading wording "Select a talk room from the list" --> "Add Talk conversation"
• use small modal size
• Nice-to-have: sort by alphabetical order

Follow ups:

• Show conversation description in subline
• Add search bar which filters the list

[st3iny]

For reference, the URL for getting conversation avatars is the following:

const avatarUrl = generateOcsUrl('apps/spreed/api/v1/room/{roomToken}/avatar', {
	roomToken: conversation.token,
})

[nimishavijay]

Looks awesome! Could we try with 28px size for the avatar and 34px height of the whole element?

I would also suggest to add some spacing between the avatar and the conversation name, maybe one more --default-grid-baseline :)

[GretaD]

Looks awesome! Could we try with 28px size for the avatar and 34px height of the whole element?

sure

I would also suggest to add some spacing between the avatar and the conversation name, maybe one more --default-grid-baseline :)

--default-grid-baseline is 4px, i have added 5px, so how big should i make it?

Agreed with nimisha to have it 8px

[nimishavijay]

Looks great design wise 🚀

[tcitworld]

I'm not fond of

The location field is also used for readable information when it's a physical location, not just URLs, and restricting the width again makes it harder to do modifications to a physical address.
Maybe but the button below on subline?

[GretaD]

I'm not fond of

The location field is also used for readable information when it's a physical location, not just URLs, and restricting the width again makes it harder to do modifications to a physical address. Maybe but the button below on subline?

@nimishavijay what do you think?

[tcitworld]

Yup, looks good!

[GretaD]

changed the desc with the latest state

[GretaD]

Yup, looks good!

thank you, changed the position as suggested by nimisha. Can you please approve if you are happy with it?

[tcitworld]

changed the position as suggested by nimisha

The button is above the field instead of under it? No opinion on this, but it differs with your previous screenshot.

[GretaD]

changed the position as suggested by nimisha

The button is above the field instead of under it? No opinion on this, but it differs with your previous screenshot.

yes, she sent me a mockup. Sorry if i was not clear. i marked my comment as outdated