Refactor modals to be page level and use context to send the neccesery data for them

[nicki182]

Terms

• I have searched open and closed issues
• I agree to follow activist's Code of Conduct

Issue

Problem

Currently, modal components (such as ModalsQRCode and ModalSharePage) are mounted in multiple locations across the app (e.g. buttons, cards, ect) This results in multiple instances of the same Headless UI being rendered in the DOM, which could lead the following issues:

• Headless UI's outside-click detector fires instantly, closing the modal on any click within its content (the "double-dialog" bug).
• Only one modal should ever exist in the DOM at a given time; otherwise, global state updates trigger multiple unintended closures.
• It leads to unpredictable UI bugs, makes debugging difficult, and can cause z-index and layering issues.

Solution Proposal

• Refactor the modal pattern so that each modal component is mounted exactly once per page/layout. Prefer rendering all required modals at the bottom of the relevant page or layout template.
• Continue to rely on ModalBase's built-in :open prop and store-driven visibility: there's no need for v-if on the modal component itself if the modal listens to the global store.
• Remove any duplicate modal component usages within the app, and ensure that modal state and props are only passed via the centralized modal context that you can get through the composable useModalHandlers.
• Optionally: Document this pattern in the codebase to prevent accidental re-introduction of this bug in the future.

An example of this implemented was on #2080, please base your work on this. 😉