Fix Codemirror performance!!

package-lock.json

@@ -24,6 +24,7 @@
         "@radix-ui/react-popover": "1.0.3",
         "@radix-ui/react-scroll-area": "^1.0.2",
         "@radix-ui/react-separator": "^1.0.1",
+        "@radix-ui/react-tabs": "^1.0.3",
         "@tanstack/react-query": "^4.24.10",
         "@tauri-apps/api": "^1.2.0",
         "classnames": "^2.3.2",
@@ -31,7 +32,8 @@
         "framer-motion": "^9.0.4",
         "parse-color": "^1.0.0",
         "preact-router": "^4.1.0",
-        "react-helmet-async": "^1.3.0"
+        "react-helmet-async": "^1.3.0",
+        "react-use": "^17.4.0"
       },
       "devDependencies": {
         "@preact/preset-vite": "^2.5.0",
@@ -1752,6 +1754,76 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.3.tgz",
+      "integrity": "sha512-4CkF/Rx1GcrusI/JZ1Rvyx4okGUs6wEenWA0RG/N+CwkRhTy7t54y7BLsWUXrAz/GRbBfHQg/Odfs/RoW0CiRA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-roving-focus": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.2.tgz",
+      "integrity": "sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-slot": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+      "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.3.tgz",
+      "integrity": "sha512-stjCkIoMe6h+1fWtXlA6cRfikdBzCLp3SnVk7c48cv/uy3DTGoXhN76YaOYUJuy3aEDvDIKwKR5KSmvrtPvQPQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-collection": "1.0.2",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-controllable-state": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
@@ -2295,6 +2367,11 @@
         "@types/chai": "*"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -2721,6 +2798,11 @@
         "pretty-format": "^27.5.1"
       }
     },
+    "node_modules/@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
+    },
     "node_modules/acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -3455,6 +3537,14 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "dev": true
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/crelt": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
@@ -3474,6 +3564,26 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3489,8 +3599,7 @@
     "node_modules/csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
-      "devOptional": true
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -3684,6 +3793,14 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.21.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz",
@@ -4373,8 +4490,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-      "dev": true
     },
     "node_modules/fast-glob": {
       "version": "3.2.12",
@@ -4416,6 +4532,21 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fast-loops": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+    },
+    "node_modules/fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "node_modules/fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
+    },
     "node_modules/fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -4826,6 +4957,11 @@
       "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
       "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -4876,6 +5012,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz",
+      "integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==",
+      "dependencies": {
+        "css-in-js-utils": "^3.1.0",
+        "fast-loops": "^1.1.3"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
@@ -5223,6 +5368,11 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "node_modules/js-sdsl": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
@@ -5416,6 +5566,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5489,6 +5644,25 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/nano-css": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz",
+      "integrity": "sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==",
+      "dependencies": {
+        "css-tree": "^1.1.2",
+        "csstype": "^3.0.6",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^6.0.0",
+        "rtl-css-js": "^1.14.0",
+        "sourcemap-codec": "^1.4.8",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.0.6"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -6248,6 +6422,45 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
       "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
+    "node_modules/react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "peerDependencies": {
+        "react": "*",
+        "tslib": "*"
+      }
+    },
+    "node_modules/react-use": {
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz",
+      "integrity": "sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==",
+      "dependencies": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.3.1",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-use/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6312,6 +6525,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -6379,6 +6597,14 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -6440,6 +6666,17 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -6449,6 +6686,14 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
+      "engines": {
+        "node": ">=6.9"
+      }
+    },
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -6557,7 +6802,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6571,18 +6815,64 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
+    },
     "node_modules/spawn-command": {
       "version": "0.0.2-1",
       "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
       "integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==",
       "dev": true
     },
+    "node_modules/stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
       "dev": true
     },
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+    },
+    "node_modules/stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "dependencies": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stacktrace-gps/node_modules/source-map": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+      "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "dependencies": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
     "node_modules/std-env": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.2.tgz",
@@ -6730,6 +7020,11 @@
       "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
       "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
     },
+    "node_modules/stylis": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -6807,6 +7102,14 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/tinybench": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.4.0.tgz",
@@ -6852,6 +7155,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "node_modules/tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -6861,6 +7169,11 @@
         "tree-kill": "cli.js"
       }
     },
+    "node_modules/ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -6888,8 +7201,7 @@
     "node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-      "dev": true
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -8768,6 +9080,62 @@
         "@radix-ui/react-compose-refs": "1.0.0"
       }
     },
+    "@radix-ui/react-tabs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.3.tgz",
+      "integrity": "sha512-4CkF/Rx1GcrusI/JZ1Rvyx4okGUs6wEenWA0RG/N+CwkRhTy7t54y7BLsWUXrAz/GRbBfHQg/Odfs/RoW0CiRA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-roving-focus": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.0"
+      },
+      "dependencies": {
+        "@radix-ui/react-collection": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.2.tgz",
+          "integrity": "sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.0",
+            "@radix-ui/react-context": "1.0.0",
+            "@radix-ui/react-primitive": "1.0.2",
+            "@radix-ui/react-slot": "1.0.1"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+          "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.1"
+          }
+        },
+        "@radix-ui/react-roving-focus": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.3.tgz",
+          "integrity": "sha512-stjCkIoMe6h+1fWtXlA6cRfikdBzCLp3SnVk7c48cv/uy3DTGoXhN76YaOYUJuy3aEDvDIKwKR5KSmvrtPvQPQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/primitive": "1.0.0",
+            "@radix-ui/react-collection": "1.0.2",
+            "@radix-ui/react-compose-refs": "1.0.0",
+            "@radix-ui/react-context": "1.0.0",
+            "@radix-ui/react-direction": "1.0.0",
+            "@radix-ui/react-id": "1.0.0",
+            "@radix-ui/react-primitive": "1.0.2",
+            "@radix-ui/react-use-callback-ref": "1.0.0",
+            "@radix-ui/react-use-controllable-state": "1.0.0"
+          }
+        }
+      }
+    },
     "@radix-ui/react-use-callback-ref": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
@@ -9060,6 +9428,11 @@
         "@types/chai": "*"
       }
     },
+    "@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -9366,6 +9739,11 @@
         "pretty-format": "^27.5.1"
       }
     },
+    "@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
+    },
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -9889,6 +10267,14 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "dev": true
     },
+    "copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "crelt": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
@@ -9905,6 +10291,23 @@
         "which": "^2.0.1"
       }
     },
+    "css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
+    "css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "requires": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -9914,8 +10317,7 @@
     "csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
-      "devOptional": true
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
@@ -10064,6 +10466,14 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "requires": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "es-abstract": {
       "version": "1.21.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz",
@@ -10598,8 +11008,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-      "dev": true
     },
     "fast-glob": {
       "version": "3.2.12",
@@ -10637,6 +11046,21 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "fast-loops": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+    },
+    "fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
+    },
     "fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -10927,6 +11351,11 @@
       "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
       "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -10965,6 +11394,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "inline-style-prefixer": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz",
+      "integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==",
+      "requires": {
+        "css-in-js-utils": "^3.1.0",
+        "fast-loops": "^1.1.3"
+      }
+    },
     "internal-slot": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
@@ -11204,6 +11642,11 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-sdsl": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
@@ -11354,6 +11797,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -11411,6 +11859,21 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "nano-css": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz",
+      "integrity": "sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==",
+      "requires": {
+        "css-tree": "^1.1.2",
+        "csstype": "^3.0.6",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^6.0.0",
+        "rtl-css-js": "^1.14.0",
+        "sourcemap-codec": "^1.4.8",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.0.6"
+      }
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -11917,6 +12380,40 @@
         }
       }
     },
+    "react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "requires": {}
+    },
+    "react-use": {
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz",
+      "integrity": "sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==",
+      "requires": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.3.1",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+        }
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -11963,6 +12460,11 @@
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -12004,6 +12506,14 @@
         "fsevents": "~2.3.2"
       }
     },
+    "rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -12050,12 +12560,22 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
+    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "dev": true
     },
+    "set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g=="
+    },
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -12132,8 +12652,7 @@
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-      "dev": true
     },
     "source-map-js": {
       "version": "1.0.2",
@@ -12141,18 +12660,62 @@
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "dev": true
     },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+    },
     "spawn-command": {
       "version": "0.0.2-1",
       "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
       "integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==",
       "dev": true
     },
+    "stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "requires": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
       "dev": true
     },
+    "stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+    },
+    "stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "requires": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA=="
+        }
+      }
+    },
+    "stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "requires": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
     "std-env": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.2.tgz",
@@ -12268,6 +12831,11 @@
       "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
       "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
     },
+    "stylis": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -12328,6 +12896,11 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
+    },
     "tinybench": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.4.0.tgz",
@@ -12361,12 +12934,22 @@
         "is-number": "^7.0.0"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
       "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
       "dev": true
     },
+    "ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
+    },
     "tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -12393,8 +12976,7 @@
     "tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-      "dev": true
     },
     "tsutils": {
       "version": "3.21.0",

package.json

@@ -31,6 +31,7 @@
     "@radix-ui/react-popover": "1.0.3",
     "@radix-ui/react-scroll-area": "^1.0.2",
     "@radix-ui/react-separator": "^1.0.1",
+    "@radix-ui/react-tabs": "^1.0.3",
     "@tanstack/react-query": "^4.24.10",
     "@tauri-apps/api": "^1.2.0",
     "classnames": "^2.3.2",
@@ -38,7 +39,8 @@
     "framer-motion": "^9.0.4",
     "parse-color": "^1.0.0",
     "preact-router": "^4.1.0",
-    "react-helmet-async": "^1.3.0"
+    "react-helmet-async": "^1.3.0",
+    "react-use": "^17.4.0"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.5.0",

src-web/components/Editor/Editor.css

@@ -1,5 +1,5 @@
 .cm-wrapper {
-    @apply h-full;
+    @apply h-full overflow-hidden;
 
     .cm-editor {
         @apply w-full block text-base;
@@ -109,8 +109,7 @@
     @apply hover:text-gray-800 hover:border-gray-400;
 }
 
-.cm-editor .cm-activeLineGutter,
+.cm-editor .cm-activeLineGutter {
-.cm-editor .cm-activeLine {
     @apply bg-transparent;
 }
 
@@ -118,6 +117,7 @@
     &.cm-focused .cm-activeLineGutter {
         @apply text-gray-800;
     }
+
     .cm-cursor {
         @apply border-l-2 border-gray-800;
     }

src-web/components/Editor/Editor.tsx

@@ -1,14 +1,13 @@
 import { defaultKeymap } from '@codemirror/commands';
+import { useUnmount } from 'react-use';
 import { Compartment, EditorState } from '@codemirror/state';
 import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
 import classnames from 'classnames';
 import { EditorView } from 'codemirror';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import './Editor.css';
-import { singleLineExt } from './singleLine';
-
 import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
-// const { baseExtensions, getLanguageExtension, multiLineExtensions } = await import('./extensions');
+import { singleLineExt } from './singleLine';
 
 export interface EditorProps {
   id?: string;
@@ -17,7 +16,6 @@ export interface EditorProps {
   heightMode?: 'auto' | 'full';
   contentType?: string;
   autoFocus?: boolean;
-  valueKey?: string | number;
   defaultValue?: string;
   placeholder?: string;
   tooltipContainer?: HTMLElement;
@@ -32,75 +30,65 @@ export function Editor({
   contentType,
   autoFocus,
   placeholder,
-  valueKey,
   useTemplating,
   defaultValue,
   onChange,
   className,
   singleLine,
-  ...props
 }: EditorProps) {
   const [cm, setCm] = useState<{ view: EditorView; langHolder: Compartment } | null>(null);
-  const ref = useRef<HTMLDivElement>(null);
+  const [divRef, setDivRef] = useState<HTMLDivElement | null>(null);
-  const extensions = useMemo(
-    () =>
-      getExtensions({
-        container: ref.current,
-        readOnly,
-        placeholder,
-        singleLine,
-        onChange,
-        contentType,
-        useTemplating,
-      }),
-    [contentType, ref.current],
-  );
 
-  // Create codemirror instance when ref initializes
+  // Unmount editor when component unmounts
-  useEffect(() => {
+  useUnmount(() => cm?.view.destroy());
-    const parent = ref.current;
+
-    if (parent === null) return;
+  const initDivRef = (el: HTMLDivElement | null) => {
+    setDivRef(el);
+    if (divRef !== null || el === null) return;
 
-    // console.log('INIT EDITOR');
-    let view: EditorView | null = null;
     try {
       const langHolder = new Compartment();
       const langExt = getLanguageExtension({ contentType, useTemplating });
       const state = EditorState.create({
         doc: `${defaultValue ?? ''}`,
-        extensions: [...extensions, langHolder.of(langExt)],
+        extensions: [
+          langHolder.of(langExt),
+          ...getExtensions({
+            container: divRef,
+            readOnly,
+            placeholder,
+            singleLine,
+            onChange,
+            contentType,
+            useTemplating,
+          }),
+        ],
       });
-      view = new EditorView({ state, parent });
+      let newView;
-      syncGutterBg({ parent, className });
+      if (cm) {
-      setCm({ view, langHolder });
+        newView = cm.view;
-      if (autoFocus && view) view.focus();
+        newView.setState(state);
+      } else {
+        newView = new EditorView({ state, parent: el });
+      }
+      setCm({ view: newView, langHolder });
+      syncGutterBg({ parent: el, className });
+      if (autoFocus && newView) newView.focus();
     } catch (e) {
       console.log('Failed to initialize Codemirror', e);
     }
-    return () => view?.destroy();
+  };
-  }, [ref.current, valueKey]);
-
-  // Update value when valueKey changes
-  // TODO: This would be more efficient but the onChange handler gets fired on update
-  // useEffect(() => {
-  //   if (cm === null) return;
-  //   console.log('NEW DOC', valueKey, defaultValue);
-  //   cm.view.dispatch({
-  //     changes: { from: 0, to: cm.view.state.doc.length, insert: `${defaultValue ?? ''}` },
-  //   });
-  // }, [valueKey]);
 
   // Update language extension when contentType changes
   useEffect(() => {
     if (cm === null) return;
-    // console.log('UPDATE LANG');
     const ext = getLanguageExtension({ contentType, useTemplating });
     cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
   }, [contentType]);
 
   return (
     <div
-      ref={ref}
+      ref={initDivRef}
       className={classnames(
         className,
         'cm-wrapper text-base bg-gray-50',
@@ -108,7 +96,6 @@ export function Editor({
         singleLine ? 'cm-singleline' : 'cm-multiline',
         readOnly && 'cm-readonly',
       )}
-      {...props}
     />
   );
 }
@@ -142,7 +129,6 @@ function getExtensions({
     ...(ext ? [ext] : []),
     ...(readOnly ? [EditorState.readOnly.of(true)] : []),
     ...(placeholder ? [placeholderExt(placeholder)] : []),
-
     ...(singleLine
       ? [
           EditorView.domEventHandlers({

src-web/components/Editor/autocomplete.ts

@@ -11,12 +11,15 @@ export function debouncedAutocompletionDisplay({ millis }: { millis: number }) {
     startCompletion(view);
   }, millis);
 
-  return EditorView.updateListener.of(({ view, docChanged }) => {
+  return EditorView.updateListener.of(({ view, docChanged, focusChanged }) => {
     // const completions = currentCompletions(view.state);
     // const status = completionStatus(view.state);
 
-    // If the document hasn't changed, we don't need to do anything
+    if (!view.hasFocus) {
-    if (!docChanged) return;
+      debouncedStartCompletion.cancel();
+      closeCompletion(view);
+      return;
+    }
 
     if (view.state.doc.length === 0) {
       debouncedStartCompletion.cancel();
@@ -24,6 +27,9 @@ export function debouncedAutocompletionDisplay({ millis }: { millis: number }) {
       return;
     }
 
-    debouncedStartCompletion(view);
+    // If the document hasn't changed, we don't need to do anything
+    if (docChanged) {
+      debouncedStartCompletion(view);
+    }
   });
 }

src-web/components/Editor/extensions.ts

@@ -25,7 +25,6 @@ import {
   crosshairCursor,
   drawSelection,
   dropCursor,
-  highlightActiveLine,
   highlightActiveLineGutter,
   highlightSpecialChars,
   keymap,
@@ -116,7 +115,6 @@ export const baseExtensions = [
 
 export const multiLineExtensions = [
   lineNumbers(),
-  highlightActiveLineGutter(),
   foldGutter({
     markerDOM: (open) => {
       const el = document.createElement('div');
@@ -130,11 +128,10 @@ export const multiLineExtensions = [
   }),
   EditorState.allowMultipleSelections.of(true),
   indentOnInput(),
-  bracketMatching(),
   closeBrackets(),
   rectangularSelection(),
   crosshairCursor(),
-  highlightActiveLine(),
+  highlightActiveLineGutter(),
   highlightSelectionMatches({ minSelectionLength: 2 }),
   keymap.of([
     ...closeBracketsKeymap,

src-web/components/HeaderEditor.tsx

@@ -1,113 +1,99 @@
-import React, { useCallback, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { HttpHeader } from '../lib/models';
 import { IconButton } from './IconButton';
 import { Input } from './Input';
-import { HStack, VStack } from './Stacks';
+import { VStack } from './Stacks';
+
+type PairWithId = { header: Partial<HttpHeader>; id: string };
 
 export function HeaderEditor() {
-  const [headers, setHeaders] = useState<HttpHeader[]>([]);
+  const newPair = () => {
-  const [newHeaderName, setNewHeaderName] = useState<string>('');
+    return { header: { name: '', value: '' }, id: Math.random().toString() };
-  const [newHeaderValue, setNewHeaderValue] = useState<string>('');
+  };
-  const handleSubmit = useCallback(
-    (e?: Event) => {
-      e?.preventDefault();
-      setHeaders([...headers, { name: newHeaderName, value: newHeaderValue }]);
-      setNewHeaderName('');
-      setNewHeaderValue('');
-    },
-    [newHeaderName, newHeaderValue],
-  );
 
-  const handleChangeHeader = useCallback(
+  const [pairs, setPairs] = useState<PairWithId[]>([newPair()]);
-    (header: Partial<HttpHeader>, index: number) => {
-      setHeaders((headers) =>
-        headers.map((h, i) => {
-          if (i === index) return h;
-          const newHeader: HttpHeader = { ...h, ...header };
-          return newHeader;
-        }),
-      );
-    },
-    [headers],
-  );
 
-  const handleDelete = (index: number) => {
+  const handleChangeHeader = (pair: PairWithId) => {
-    setHeaders((headers) => headers.filter((_, i) => i !== index));
+    setPairs((pairs) =>
+      pairs.map((p) =>
+        pair.id !== p.id ? p : { id: p.id, header: { ...p.header, ...pair.header } },
+      ),
+    );
+  };
+
+  useEffect(() => {
+    const lastPair = pairs[pairs.length - 1];
+    if (lastPair === undefined) {
+      setPairs([newPair()]);
+      return;
+    }
+
+    if (lastPair.header.name !== '' || lastPair.header.value !== '') {
+      setPairs((pairs) => [...pairs, newPair()]);
+    }
+  }, [pairs]);
+
+  const handleDelete = (pair: PairWithId) => {
+    setPairs((headers) => headers.filter((p) => p.id !== pair.id));
   };
 
   return (
-    <form onSubmit={handleSubmit} className="min-h-[30vh]">
+    <VStack space={2}>
-      <VStack space={2}>
+      {pairs.map((p, i) => (
-        {headers.map((header, i) => (
-          <FormRow
-            key={`${headers.length}-${i}`}
-            valueKey={`${headers.length}-${i}`}
-            name={header.name}
-            value={header.value}
-            onChangeName={(name) => handleChangeHeader({ name }, i)}
-            onChangeValue={(value) => handleChangeHeader({ value }, i)}
-            onDelete={() => handleDelete(i)}
-          />
-        ))}
         <FormRow
-          autoFocus
+          key={p.id}
-          addSubmit
+          pair={p}
-          valueKey={headers.length}
+          onChange={handleChangeHeader}
-          onChangeName={setNewHeaderName}
+          onDelete={i < pairs.length - 1 ? handleDelete : undefined}
-          onChangeValue={setNewHeaderValue}
-          name={newHeaderName}
-          value={newHeaderValue}
         />
-      </VStack>
+      ))}
-    </form>
+    </VStack>
   );
 }
 
 function FormRow({
   autoFocus,
-  valueKey,
+  pair,
-  name,
+  onChange,
-  value,
-  addSubmit,
-  onChangeName,
-  onChangeValue,
   onDelete,
 }: {
   autoFocus?: boolean;
-  valueKey: string | number;
+  pair: PairWithId;
-  name: string;
+  onChange: (pair: PairWithId) => void;
-  value: string;
+  onDelete?: (pair: PairWithId) => void;
-  addSubmit?: boolean;
-  onSubmit?: () => void;
-  onChangeName: (name: string) => void;
-  onChangeValue: (value: string) => void;
-  onDelete?: () => void;
 }) {
   return (
-    <div>
+    <div className="grid grid-cols-[1fr_1fr_2.5rem] grid-rows-1 gap-2 items-center">
-      <HStack space={2}>
+      <Input
-        <Input
+        hideLabel
-          hideLabel
+        autoFocus={autoFocus}
-          autoFocus={autoFocus}
+        useEditor={{ useTemplating: true }}
-          useEditor={{ useTemplating: true, valueKey }}
+        name="name"
-          name="name"
+        label="Name"
-          label="Name"
+        placeholder="name"
-          placeholder="name"
+        defaultValue={pair.header.name}
-          defaultValue={name}
+        onChange={(name) =>
-          onChange={onChangeName}
+          onChange({
-        />
+            id: pair.id,
-        <Input
+            header: { name },
-          hideLabel
+          })
-          name="value"
+        }
-          label="Value"
+      />
-          useEditor={{ useTemplating: true, valueKey }}
+      <Input
-          placeholder="value"
+        hideLabel
-          defaultValue={value}
+        name="value"
-          onChange={onChangeValue}
+        label="Value"
-        />
+        useEditor={{ useTemplating: true }}
-        {onDelete && <IconButton icon="trash" onClick={onDelete} />}
+        placeholder="value"
-      </HStack>
+        defaultValue={pair.header.value}
-      {addSubmit && <input type="submit" value="Add" className="sr-only" />}
+        onChange={(value) =>
+          onChange({
+            id: pair.id,
+            header: { value },
+          })
+        }
+      />
+      {onDelete && <IconButton icon="trash" onClick={() => onDelete(pair)} className="w-auto" />}
     </div>
   );
 }

src-web/components/IconButton.tsx

@@ -8,11 +8,22 @@ import { Icon } from './Icon';
 type Props = IconProps & ButtonProps & { iconClassName?: string; iconSize?: IconProps['size'] };
 
 export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
-  { icon, spin, className, iconClassName, size, iconSize, ...props }: Props,
+  { icon, spin, className, iconClassName, size = 'md', iconSize, ...props }: Props,
   ref,
 ) {
   return (
-    <Button ref={ref} className={classnames(className, 'group')} size={size} {...props}>
+    <Button
+      ref={ref}
+      className={classnames(
+        className,
+        'group',
+        '!px-0',
+        size === 'md' && 'w-9',
+        size === 'sm' && 'w-9',
+      )}
+      size={size}
+      {...props}
+    >
       <Icon
         size={iconSize}
         icon={icon}

src-web/components/Input.tsx

@@ -11,7 +11,7 @@ interface Props {
   labelClassName?: string;
   containerClassName?: string;
   onChange?: (value: string) => void;
-  useEditor?: Pick<EditorProps, 'contentType' | 'useTemplating' | 'valueKey'>;
+  useEditor?: Pick<EditorProps, 'contentType' | 'useTemplating'>;
   defaultValue?: string;
   leftSlot?: ComponentChildren;
   rightSlot?: ComponentChildren;

src-web/components/RequestPane.tsx

@@ -1,10 +1,9 @@
 import classnames from 'classnames';
 import { useRequestUpdate, useSendRequest } from '../hooks/useRequest';
 import type { HttpRequest } from '../lib/models';
-import { Button } from './Button';
 import { Editor } from './Editor/Editor';
-import { ScrollArea } from './ScrollArea';
+import { HeaderEditor } from './HeaderEditor';
-import { HStack } from './Stacks';
+import { TabContent, Tabs } from './Tabs';
 import { UrlBar } from './UrlBar';
 
 interface Props {
@@ -17,9 +16,7 @@ export function RequestPane({ fullHeight, request, className }: Props) {
   const updateRequest = useRequestUpdate(request ?? null);
   const sendRequest = useSendRequest(request ?? null);
   return (
-    <div
+    <div className={classnames(className, 'py-2 grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}>
-      className={classnames(className, 'py-2 grid grid-rows-[auto_auto_minmax(0,1fr)] grid-cols-1')}
-    >
       <div className="pl-2">
         <UrlBar
           key={request.id}
@@ -33,29 +30,33 @@ export function RequestPane({ fullHeight, request, className }: Props) {
         {/*<Divider />*/}
       </div>
       {/*<Divider className="mb-2" />*/}
-      <ScrollArea className="max-w-full pb-2 mx-2">
+      <Tabs
-        <HStack className="mt-2 hide-scrollbar" space={1}>
+        tabs={[
-          {['JSON', 'Params', 'Headers', 'Auth'].map((label, i) => (
+          { value: 'body', label: 'JSON' },
-            <Button
+          { value: 'params', label: 'Params' },
-              key={label}
+          { value: 'headers', label: 'Headers' },
-              size="sm"
+          { value: 'auth', label: 'Auth' },
-              color={i === 0 ? 'gray' : undefined}
+        ]}
-              className={i !== 0 ? 'opacity-80 hover:opacity-100' : undefined}
+        className="mt-2"
-            >
+        tabListClassName="px-2"
-              {label}
+        defaultValue="body"
-            </Button>
+        label="Request body"
-          ))}
+      >
-        </HStack>
+        <TabContent value="body">
-      </ScrollArea>
+          <Editor
-      <Editor
+            key={request.id}
-        className="mt-1 !bg-gray-50"
+            className="!bg-gray-50"
-        heightMode={fullHeight ? 'full' : 'auto'}
+            heightMode={fullHeight ? 'full' : 'auto'}
-        valueKey={request.id}
+            useTemplating
-        useTemplating
+            defaultValue={request.body ?? ''}
-        defaultValue={request.body ?? ''}
+            contentType="application/json"
-        contentType="application/json"
+            onChange={(body) => updateRequest.mutate({ body })}
-        onChange={(body) => updateRequest.mutate({ body })}
+          />
-      />
+        </TabContent>
+        <TabContent value="headers" className="pl-2">
+          <HeaderEditor />
+        </TabContent>
+      </Tabs>
     </div>
   );
 }

src-web/components/ResponsePane.tsx

@@ -116,8 +116,8 @@ export function ResponsePane({ requestId, className }: Props) {
             ) : response?.body ? (
               <Editor
                 readOnly
+                key={`${contentType}:${response.updatedAt}`}
                 className="bg-gray-50 dark:!bg-gray-100"
-                valueKey={`${contentType}:${response.updatedAt}`}
                 defaultValue={response?.body}
                 contentType={contentType}
               />

src-web/components/ScrollArea.tsx

@@ -28,7 +28,7 @@ function ScrollBar({ orientation }: { orientation: 'vertical' | 'horizontal' })
         orientation === 'horizontal' && 'h-1.5 flex-col',
       )}
     >
-      <S.Thumb className="flex-1 bg-gray-50 group-hover:bg-gray-100 rounded-full" />
+      <S.Thumb className="flex-1 bg-gray-100 group-hover:bg-gray-200 rounded-full" />
     </S.Scrollbar>
   );
 }

src-web/components/Sidebar.tsx

@@ -3,10 +3,7 @@ import React, { useState } from 'react';
 import { useRequestCreate } from '../hooks/useRequest';
 import useTheme from '../hooks/useTheme';
 import type { HttpRequest } from '../lib/models';
-import { Button } from './Button';
 import { ButtonLink } from './ButtonLink';
-import { Dialog } from './Dialog';
-import { HeaderEditor } from './HeaderEditor';
 import { IconButton } from './IconButton';
 import { HStack, VStack } from './Stacks';
 import { WindowDragRegion } from './WindowDragRegion';
@@ -21,7 +18,6 @@ interface Props {
 export function Sidebar({ className, activeRequestId, workspaceId, requests }: Props) {
   const createRequest = useRequestCreate({ workspaceId, navigateAfter: true });
   const { appearance, toggleAppearance } = useTheme();
-  const [open, setOpen] = useState<boolean>(false);
   return (
     <div
       className={classnames(
@@ -30,12 +26,6 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests }: P
       )}
     >
       <HStack as={WindowDragRegion} alignItems="center" justifyContent="end">
-        <Dialog wide open={open} onOpenChange={setOpen} title="Edit Headers">
-          <HeaderEditor />
-          <Button className="ml-auto mt-5" color="primary" onClick={() => setOpen(false)}>
-            Save
-          </Button>
-        </Dialog>
         <IconButton
           className="mx-1"
           icon="plusCircle"
@@ -56,7 +46,6 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests }: P
           justifyContent="end"
         >
           <IconButton icon={appearance === 'dark' ? 'moon' : 'sun'} onClick={toggleAppearance} />
-          <IconButton icon="rows" onClick={() => setOpen(true)} />
         </HStack>
       </VStack>
     </div>

src-web/components/Tabs.tsx

@@ -0,0 +1,74 @@
+import * as T from '@radix-ui/react-tabs';
+import classnames from 'classnames';
+import type { ComponentChildren } from 'preact';
+import { useState } from 'react';
+import { Button } from './Button';
+import { ScrollArea } from './ScrollArea';
+import { HStack } from './Stacks';
+
+interface Props {
+  defaultValue?: string;
+  label: string;
+  tabs: { value: string; label: ComponentChildren }[];
+  tabListClassName?: string;
+  className?: string;
+  children: ComponentChildren;
+}
+
+export function Tabs({ defaultValue, label, children, tabs, className, tabListClassName }: Props) {
+  const [value, setValue] = useState(defaultValue);
+  return (
+    <T.Root
+      defaultValue={defaultValue}
+      onValueChange={setValue}
+      className={classnames(className, 'h-full overflow-hidden')}
+    >
+      <T.List aria-label={label} className={classnames(tabListClassName, 'flex items-center')}>
+        <ScrollArea className="w-full pb-2">
+          <HStack space={1}>
+            {tabs.map((t) => (
+              <TabTrigger key={t.value} value={t.value} active={t.value === value}>
+                {t.label}
+              </TabTrigger>
+            ))}
+          </HStack>
+        </ScrollArea>
+      </T.List>
+      {children}
+    </T.Root>
+  );
+}
+
+interface TabTriggerProps {
+  value: string;
+  children: ComponentChildren;
+  active?: boolean;
+}
+
+export function TabTrigger({ value, children, active }: TabTriggerProps) {
+  return (
+    <T.Trigger value={value} asChild>
+      <Button
+        size="sm"
+        disabled={active}
+        className={classnames(active ? 'bg-gray-100' : '!text-gray-500 hover:!text-gray-800')}
+      >
+        {children}
+      </Button>
+    </T.Trigger>
+  );
+}
+
+interface TabContentProps {
+  value: string;
+  children: ComponentChildren;
+  className?: string;
+}
+
+export function TabContent({ value, children, className }: TabContentProps) {
+  return (
+    <T.Content value={value} className={classnames(className, 'w-full h-full')}>
+      {children}
+    </T.Content>
+  );
+}

src-web/components/UrlBar.tsx

@@ -24,7 +24,7 @@ export function UrlBar({ sendRequest, loading, onMethodChange, method, onUrlChan
       <Input
         hideLabel
         useEditor={{ useTemplating: true, contentType: 'url' }}
-        className="font-mono px-0"
+        className="px-0"
         name="url"
         label="Enter URL"
         containerClassName="shadow shadow-gray-100 dark:shadow-gray-0"

src-web/lib/theme/window.ts

@@ -28,7 +28,6 @@ const lightTheme: AppTheme = {
   appearance: 'light',
   layers: {
     root: {
-      whitePoint: 0.95,
       colors: {
         gray: '#7f8fb0',
         red: '#da4545',

src-web/pages/Workspaces.tsx

@@ -1,4 +1,5 @@
 import { ButtonLink } from '../components/ButtonLink';
+import { Editor } from '../components/Editor/Editor';
 import { Heading } from '../components/Heading';
 import { VStack } from '../components/Stacks';
 import { useWorkspaces } from '../hooks/useWorkspaces';
@@ -13,6 +14,7 @@ export function Workspaces(props: { path: string }) {
           {w.name}
         </ButtonLink>
       ))}
+      <Editor className="h-20 w-full" defaultValue="hello" />
     </VStack>
   );
 }

vite.config.ts

@@ -26,5 +26,7 @@ export default defineConfig({
     minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
     // produce sourcemaps for debug builds
     sourcemap: !!process.env.TAURI_DEBUG,
+    // Who cares
+    chunkSizeWarningLimit: Infinity,
   },
 });