Unify and improve "copy to clipboard" interactions

[odzhychko]

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

In many place a user can copy something to a clipboard.

Currently they have the issues of:

• Being implemented separately (logic, error handling, checking for support)
  • e.g., https://github.com/nextcloud/calendar/pull/8617/changes#r3620025970
• UI/UX inconsistencies
  • in some places we show success notifications
    • e.g., https://github.com/nextcloud/calendar/pull/8617/changes#r3620018238
  • in some places we use button changes
    • e.g., usages of https://nextcloud-vue-components.netlify.app/#/Components/NcFormBoxCopyButton

Describe the solution you'd like

1. Decide on consistent UI/UX patterns
2. Use consistent UI/UX patterns
3. Encapsulate UI/UX patterns in reusable components
4. Share copy-handling code between components

Describe alternatives you've considered

No response

Additional context

Having shared logic, we could write more elaborate copy-handling code supporting more browsers.

Simple module exposing an async copy function that uses the Async Clipboard API (navigator.clipboard) in secure contexts (HTTPS / localhost), with automatic fallback to document.execCommand('copy') for non-secure contexts or older browsers.

https://www.npmjs.com/package/copy-to-clipboard

Might use contribute back to https://github.com/nextcloud-libraries/nextcloud-vue/blob/f460a5c48898a9cebc656923b9c0ac4ffb969851/src/composables/useCopy.ts

Changing the button icon in place for a few seconds in case of success seems to be a very common pattern.
If no icon is used button text can change from "Copy text" to "Copied!" for a second or so.