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

@@ -25,6 +25,7 @@ import ModalSources from "./modals/ModalSources";
 import ModalOpen from "./modals/ModalOpen";
 import ModalShortcuts from "./modals/ModalShortcuts";
 import ModalDebug from "./modals/ModalDebug";
+import ModalGlobalState from "./modals/ModalGlobalState";
 
 import {downloadGlyphsMetadata, downloadSpriteMetadata} from "../libs/metadata";
 import style from "../libs/style";
@@ -126,6 +127,7 @@ type AppState = {
     shortcuts: boolean
     export: boolean
     debug: boolean
+    globalState: boolean
   }
   fileHandle: FileSystemFileHandle | null
 };
@@ -164,6 +166,7 @@ export default class App extends React.Component<any, AppState> {
         shortcuts: false,
         export: false,
         debug: false,
+        globalState: false,
       },
       maplibreGlDebugOptions: {
         showTileBoundaries: false,
@@ -213,6 +216,12 @@ export default class App extends React.Component<any, AppState> {
           this.toggleModal("settings");
         }
       },
+      {
+        key: "g",
+        handler: () => {
+          this.toggleModal("globalState");
+        }
+      },
       {
         key: "i",
         handler: () => {
@@ -911,39 +920,45 @@ export default class App extends React.Component<any, AppState> {
         onChangeMaplibreGlDebug={this.onChangeMaplibreGlDebug}
         onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
         isOpen={this.state.isOpen.debug}
-        onOpenToggle={this.toggleModal.bind(this, "debug")}
+        onOpenToggle={() => this.toggleModal("debug")}
         mapView={this.state.mapView}
       />
       <ModalShortcuts
         isOpen={this.state.isOpen.shortcuts}
-        onOpenToggle={this.toggleModal.bind(this, "shortcuts")}
+        onOpenToggle={() => this.toggleModal("shortcuts")}
       />
       <ModalSettings
         mapStyle={this.state.mapStyle}
         onStyleChanged={this.onStyleChanged}
         onChangeMetadataProperty={this.onChangeMetadataProperty}
         isOpen={this.state.isOpen.settings}
-        onOpenToggle={this.toggleModal.bind(this, "settings")}
+        onOpenToggle={() => this.toggleModal("settings")}
       />
       <ModalExport
         mapStyle={this.state.mapStyle}
         onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.export}
-        onOpenToggle={this.toggleModal.bind(this, "export")}
+        onOpenToggle={() => this.toggleModal("export")}
         fileHandle={this.state.fileHandle}
         onSetFileHandle={this.onSetFileHandle}
       />
       <ModalOpen
         isOpen={this.state.isOpen.open}
         onStyleOpen={this.openStyle}
-        onOpenToggle={this.toggleModal.bind(this, "open")}
+        onOpenToggle={() => this.toggleModal("open")}
         fileHandle={this.state.fileHandle}
       />
       <ModalSources
         mapStyle={this.state.mapStyle}
         onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.sources}
-        onOpenToggle={this.toggleModal.bind(this, "sources")}
+        onOpenToggle={() => this.toggleModal("sources")}
+      />
+      <ModalGlobalState
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged}
+        isOpen={this.state.isOpen.globalState}
+        onOpenToggle={() => this.toggleModal("globalState")}
       />
     </div>;