Add global state modal (#1377)

## Launch Checklist

This adds the ability to edit the global state.
I think it deserves a modal of its own since I don't think it should be
part of other modals...
Here are some images:
<img width="1274" height="254" alt="image"
src="https://github.com/user-attachments/assets/4b6f2564-6c71-47da-9f8c-3bd2b97e1163"
/>

Initial dialog with no variable:
<img width="640" height="254" alt="image"
src="https://github.com/user-attachments/assets/b813b540-cae9-4c80-b2c0-4d965c022cb8"
/>
After you click add a few times:
<img width="640" height="254" alt="image"
src="https://github.com/user-attachments/assets/125cb978-90dc-4047-9694-b0ffc6eaa469"
/>

The state is updated as you change thing in the dialog.
I didn't complicated it to select the type of the variable, but this can
be added later of if there's a requirement to do so, I meant to keep it
simple for now.

 - [x] Briefly describe the changes in this PR.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

src/components/modals/Modal.tsx

@@ -8,7 +8,7 @@ type ModalInternalProps = PropsWithChildren & {
   "data-wd-key"?: string
   isOpen: boolean
   title: string
-  onOpenToggle(value: boolean): unknown
+  onOpenToggle(): void
   underlayClickExits?: boolean
   className?: string
 } & WithTranslation;
@@ -26,7 +26,7 @@ class ModalInternal extends React.Component<ModalInternalProps> {
     }
 
     setTimeout(() => {
-      this.props.onOpenToggle(false);
+      this.props.onOpenToggle();
     }, 0);
   };