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/Doc.tsx

@@ -3,8 +3,7 @@ import React from "react";
 const headers = {
   js: "JS",
   android: "Android",
-  ios: "iOS",
-  macos: "macOS",
+  ios: "iOS"
 };
 
 type DocProps = {
@@ -37,6 +36,14 @@ export default class Doc extends React.Component<DocProps> {
       !Array.isArray(values)
     );
 
+    const sdkSupportToJsx = (value: string) => {
+      const supportValue = value.toLowerCase();
+      if (supportValue.startsWith("https://")) {
+        return <a href={supportValue} target="_blank" rel="noreferrer">{"#" + supportValue.split("/").pop()}</a>;
+      }
+      return value;
+    };
+
     return (
       <>
         {doc &&
@@ -74,7 +81,7 @@ export default class Doc extends React.Component<DocProps> {
                       <td>{key}</td>
                       {Object.keys(headers).map((k) => {
                         if (Object.prototype.hasOwnProperty.call(supportObj, k)) {
-                          return <td key={k}>{supportObj[k as keyof typeof headers]}</td>;
+                          return <td key={k}>{sdkSupportToJsx(supportObj[k as keyof typeof headers])}</td>;
                         }
                         else {
                           return <td key={k}>no</td>;