fix(capabilities): implement a wrapper for capabilities

[Antreesy]

☑️ Resolves

• Fix Check capabilities of remote server in federated conversations #11850
• Ref [RFC] Capability handling in federated conversations #10680

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

No visual changes

🚧 Tasks

• Implement logic to check if room is federated, to fetch remote capabilities
  • Think of a way to store/ retrive remote capabilities
    As it's a request to server, it should be asyncronous. That means we must in some case to wait for remote capabilities or re-render application based on response (which is now isn't happen and requires a reload, if capability has changed
    Reload as we do for dirty hash
• Implement helpers like hasFeature to replace long getCapabilities()?.spreed?.features?.includes('capability')
• Distinguish between whether to consider local/remote capability (see ref issue)

🏁 Checklist

• 🌏 Tested with Chrome, Firefox and Safari or should not be risky to browser differences
• 🖥️ Tested with Desktop client or should not be risky for it
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

[DorraJaouad]

You can use store instead of browser storage. The purpose of keeping the last previous fetched capabilities is to check in case the new fetch renders a different list (on the same page) -> store is enough for that.

[Antreesy]

You can use store instead of browser storage.

Might not work well for some files (as we have components, which are using Vue, and files like service/webrtc
Looks like we shoud handle each case differently..

-- not needed
🟢 any user
🟡 moderator
🔴 administrator

File	check once for instance	check on created/setup	check on token update
AdminSettings/RecordingServers.vue	🔴	--	--
views/AdminSettings.vue	🔴	--	--
src/views/FlowPostToConversation.vue	🟢	--	--
CallView/CallView.vue	--	🟢 (rendered on each call)	--
ChatView.vue	--	🟢	🟢
ConversationIcon.vue	--	🟢	🟢
BasicInfo.vue	--	🟢	🟢
ConversationSettingsDialog.vue	--	🟡	🟡
NotificationsSettings.vue	--	🟢	🟢
RecordingConsentSettings.vue	--	🟡	🟡
LeftSidebar.vue	--	🟢 (SIP, local only)	--
MediaSettings.vue	--	🟢	🟢
VideoBackgroundEditor.vue	--	🟢	🟢
Message.vue	--	🟢 (translation, local only -> ChatView and provide)	--
MessageButtonsBar.vue	--	🟢 (rendered on each switch)	--
FilePreview.vue	--	🟢	🟢
MessageBody.vue	--	🟢 (rendered on each switch)	--
NewConversationSetupPage.vue	--	🟢 (local, avatar)	--
NewMessage.vue	--	🟢	🟢
NewMessageUploadEditor.vue	--	🟢	🟢
Participant.vue	--	🟢 (rendered on each switch)	--
ParticipantsTab.vue	--	🟢 (SIP)	🟢
RightSidebar.vue	--	🟢	🟢
RoomSelector.vue	--	🟢	🟢
SettingsDialog.vue	--	🟢 (local)	--
CallButton.vue	--	🟢	🟢
TopBar.vue	--	🟢	🟢
TopBarMenu.vue	--	🟢	🟢
src/composables/useActiveSession.js	--	depends on where state is	--
src/services/conversationsService.js	🟢 should be local?	--	--
src/store/messagesStore.js	--	--	🟢 (rendered on each switch)
src/utils/webrtc/index.js	🟢 local for now	--	--