try adding support for IE11

Signed-off-by: Egor Savkin <es@m-labs.hk>

babel.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "useBuiltIns": "usage",
+                "corejs": "3.36"
+            }
+        ]
+    ],
+    "plugins": [
+        "@babel/plugin-transform-arrow-functions",
+        ["@babel/plugin-proposal-decorators", { "legacy": true }],
+        ["@babel/plugin-proposal-class-properties", { "loose": true }],
+        ["@babel/plugin-transform-object-rest-spread"],
+        ["@babel/plugin-transform-for-of"],
+        ["@babel/plugin-transform-runtime"],
+        [
+            "@babel/plugin-transform-modules-commonjs",
+            {
+                "allowTopLevelThis": true
+            }
+        ]
+    ]
+}

package-lock.json

@@ -7,26 +7,34 @@
     "": {
       "name": "m-labs-zola",
       "version": "1.0.0",
+      "dependencies": {
+        "core-js": "^3.36.1"
+      },
       "devDependencies": {
         "@babel/cli": "^7.23.9",
-        "@babel/core": "^7.23.9",
+        "@babel/core": "^7.24.0",
-        "@babel/preset-env": "^7.23.9",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-decorators": "^7.24.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.24.1",
+        "@babel/plugin-transform-object-rest-spread": "",
+        "@babel/plugin-transform-runtime": "^7.24.1",
+        "@babel/preset-env": "^7.24.0",
         "@babel/preset-react": "^7.23.3",
         "@hello-pangea/dnd": "^16.5.0",
         "@uidotdev/usehooks": "^2.4.1",
         "babel-loader": "^9.1.3",
         "babel-preset-minify": "^0.5.2",
-        "bootstrap": "^5.3.2",
+        "bootstrap": "^5.3.3",
         "jquery": "^3.7.1",
         "json-logic-js": "^2.0.2",
         "react": "^18.2.0",
-        "react-bootstrap": "^2.10.0",
+        "react-bootstrap": "^2.10.2",
         "react-dom": "^18.2.0",
         "uuid": "^9.0.1",
-        "webpack": "^5.90.1",
+        "webpack": "^5.90.3",
         "webpack-cli": "^5.1.4",
         "webpack-preprocessor-loader": "^1.3.0",
-        "zustand": "^4.5.0"
+        "zustand": "^4.5.2"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -94,9 +102,9 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.23.9",
+      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz",
-      "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==",
+      "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
@@ -104,11 +112,11 @@
         "@babel/generator": "^7.23.6",
         "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.23.9",
+        "@babel/helpers": "^7.24.0",
-        "@babel/parser": "^7.23.9",
+        "@babel/parser": "^7.24.0",
-        "@babel/template": "^7.23.9",
+        "@babel/template": "^7.24.0",
-        "@babel/traverse": "^7.23.9",
+        "@babel/traverse": "^7.24.0",
-        "@babel/types": "^7.23.9",
+        "@babel/types": "^7.24.0",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -197,9 +205,9 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.23.10",
+      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.10.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.1.tgz",
-      "integrity": "sha512-2XpP2XhkXzgxecPNEEK8Vz8Asj9aRxt08oKOqtiZoqV2UGZ5T+EkyP9sXQ9nwMxBIG34a7jmasVqoMop7VdPUw==",
+      "integrity": "sha512-1yJa9dX9g//V6fDebXoEfEsxkZHk3Hcbm+zLhyu6qVgYFLvmTALTeV+jNU9e5RnYtioBrGEOdoI2joMSNQ/+aA==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
@@ -207,7 +215,7 @@
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-member-expression-to-functions": "^7.23.0",
         "@babel/helper-optimise-call-expression": "^7.22.5",
-        "@babel/helper-replace-supers": "^7.22.20",
+        "@babel/helper-replace-supers": "^7.24.1",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
         "semver": "^6.3.1"
@@ -317,12 +325,12 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.22.15",
+      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.1.tgz",
-      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "integrity": "sha512-HfEWzysMyOa7xI5uQHc/OcZf67/jc+xe/RZlznWQHhbb8Pg1SkRdbK4yEi61aY8wxQA7PkSfoojtLQP/Kpe3og==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.15"
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -360,9 +368,9 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.22.5",
+      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
-      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+      "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -386,13 +394,13 @@
       }
     },
     "node_modules/@babel/helper-replace-supers": {
-      "version": "7.22.20",
+      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.24.1.tgz",
-      "integrity": "sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==",
+      "integrity": "sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-member-expression-to-functions": "^7.22.15",
+        "@babel/helper-member-expression-to-functions": "^7.23.0",
         "@babel/helper-optimise-call-expression": "^7.22.5"
       },
       "engines": {
@@ -480,14 +488,14 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.23.9",
+      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz",
-      "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==",
+      "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==",
       "dev": true,
       "dependencies": {
-        "@babel/template": "^7.23.9",
+        "@babel/template": "^7.24.0",
-        "@babel/traverse": "^7.23.9",
+        "@babel/traverse": "^7.24.0",
-        "@babel/types": "^7.23.9"
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -508,9 +516,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.9",
+      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
-      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
+      "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -567,6 +575,40 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/plugin-proposal-class-properties": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
+      "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-decorators": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.24.1.tgz",
+      "integrity": "sha512-zPEvzFijn+hRvJuX2Vu3KbEBN39LN3f7tW3MQO2LsIs57B26KU+kUc82BdAktS1VCM6libzh45eKGI65lg0cpA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.24.1",
+        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/plugin-syntax-decorators": "^7.24.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
       "version": "7.21.0-placeholder-for-preset-env.2",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
@@ -618,6 +660,21 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-syntax-decorators": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.24.1.tgz",
+      "integrity": "sha512-05RJdO/cCrtVWuAaSn1tS3bH8jbsJa/Y1uD186u6J4C/1mnHFxseeuWpsqr9anvo7TUulev7tm7GDwRV+VuhDw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-syntax-dynamic-import": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
@@ -1186,13 +1243,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.23.3",
+      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.1.tgz",
-      "integrity": "sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==",
+      "integrity": "sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.24.0",
         "@babel/helper-simple-access": "^7.22.5"
       },
       "engines": {
@@ -1300,14 +1357,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-object-rest-spread": {
-      "version": "7.23.4",
+      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.4.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.0.tgz",
-      "integrity": "sha512-9x9K1YyeQVw0iOXJlIzwm8ltobIIv7j2iLyP2jIhEbqPRQ7ScNgwQufU2I0Gq11VjyG4gI4yMXt2VFags+1N3g==",
+      "integrity": "sha512-y/yKMm7buHpFFXfxVFS4Vk1ToRJDilIa6fKRioB9Vjichv58TDGXTvqV0dN7plobAmTW5eSEGXDngE+Mm+uO+w==",
       "dev": true,
       "dependencies": {
-        "@babel/compat-data": "^7.23.3",
+        "@babel/compat-data": "^7.23.5",
-        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.24.0",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
         "@babel/plugin-transform-parameters": "^7.23.3"
       },
@@ -1527,6 +1584,76 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-runtime": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.24.1.tgz",
+      "integrity": "sha512-yHLX14/T+tO0gjgJroDb8JYjOcQuzVC+Brt4CjHAxq/Ghw4xBVG+N02d1rMEcyUnKUQBL4Yy2gA9R72GK961jQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.24.1",
+        "@babel/helper-plugin-utils": "^7.24.0",
+        "babel-plugin-polyfill-corejs2": "^0.4.10",
+        "babel-plugin-polyfill-corejs3": "^0.10.1",
+        "babel-plugin-polyfill-regenerator": "^0.6.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.1.tgz",
+      "integrity": "sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.1.tgz",
+      "integrity": "sha512-XiFei6VGwM4ii6nKC1VCenGD8Z4bjiNYcrdkM8oqM3pbuemmyb8biMgrDX1ZHSbIuMLXatM6JJ/StPYIuTl6MQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.1",
+        "core-js-compat": "^3.36.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.1.tgz",
+      "integrity": "sha512-JfTApdE++cgcTWjsiCQlLyFBMbTUft9ja17saCc93lgV33h4tuCVj7tlvu//qpLwaG+3yEz7/KhahGrUMkVq9g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/plugin-transform-shorthand-properties": {
       "version": "7.23.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.23.3.tgz",
@@ -1667,14 +1794,14 @@
       }
     },
     "node_modules/@babel/preset-env": {
-      "version": "7.23.9",
+      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.24.0.tgz",
-      "integrity": "sha512-3kBGTNBBk9DQiPoXYS0g0BYlwTQYUTifqgKTjxUwEUkduRT2QOa0FPGBJ+NROQhGyYO5BuTJwGvBnqKDykac6A==",
+      "integrity": "sha512-ZxPEzV9IgvGn73iK0E6VB9/95Nd7aMFpbE0l8KQFDG70cOV9IxRP7Y2FUPmlK0v6ImlLqYX50iuZ3ZTVhOF2lA==",
       "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.23.5",
         "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.24.0",
         "@babel/helper-validator-option": "^7.23.5",
         "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.23.3",
         "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.23.3",
@@ -1727,7 +1854,7 @@
         "@babel/plugin-transform-new-target": "^7.23.3",
         "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
         "@babel/plugin-transform-numeric-separator": "^7.23.4",
-        "@babel/plugin-transform-object-rest-spread": "^7.23.4",
+        "@babel/plugin-transform-object-rest-spread": "^7.24.0",
         "@babel/plugin-transform-object-super": "^7.23.3",
         "@babel/plugin-transform-optional-catch-binding": "^7.23.4",
         "@babel/plugin-transform-optional-chaining": "^7.23.4",
@@ -1822,23 +1949,23 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.23.9",
+      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
-      "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
+      "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
-        "@babel/parser": "^7.23.9",
+        "@babel/parser": "^7.24.0",
-        "@babel/types": "^7.23.9"
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.9",
+      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz",
-      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
+      "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
@@ -1847,8 +1974,8 @@
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.9",
+        "@babel/parser": "^7.24.0",
-        "@babel/types": "^7.23.9",
+        "@babel/types": "^7.24.0",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -1857,9 +1984,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.9",
+      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
-      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
+      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
       "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.23.4",
@@ -2025,9 +2152,9 @@
       }
     },
     "node_modules/@react-aria/ssr": {
-      "version": "3.7.1",
+      "version": "3.9.2",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.2.tgz",
-      "integrity": "sha512-ovVPSD1WlRpZHt7GI9DqJrWG3OIYS+NXQ9y5HIewMJpSe+jPQmMQfyRmgX4EnvmxSlp0u04Wg/7oItcoSIb/RA==",
+      "integrity": "sha512-0gKkgDYdnq1w+ey8KzG9l+H5Z821qh9vVjztk55rUg71vTk/Eaebeir+WtzcLLwTjw3m/asIjx8Y59y1lJZhBw==",
       "dev": true,
       "dependencies": {
         "@swc/helpers": "^0.5.0"
@@ -2040,9 +2167,9 @@
       }
     },
     "node_modules/@restart/hooks": {
-      "version": "0.4.11",
+      "version": "0.4.16",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.11.tgz",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
-      "integrity": "sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
       "dev": true,
       "dependencies": {
         "dequal": "^2.0.3"
@@ -2052,9 +2179,9 @@
       }
     },
     "node_modules/@restart/ui": {
-      "version": "1.6.6",
+      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.8.tgz",
-      "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==",
+      "integrity": "sha512-6ndCv3oZ7r9vuP1Ok9KH55TM1/UkdBnP/fSraW0DFDMbPMzWKhVKeFAIEUCRCSdzayjZDcFYK6xbMlipN9dmMA==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.21.0",
@@ -2082,9 +2209,9 @@
       }
     },
     "node_modules/@swc/helpers": {
-      "version": "0.5.1",
+      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.7.tgz",
-      "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
+      "integrity": "sha512-BVvNZhx362+l2tSwSuyEUV4h7+jk9raNdoTSdLfwTshXJSaGmYKluGRJznziCI3KX02Z19DdsQrdfrpXAU3Hfg==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.4.0"
@@ -2180,9 +2307,9 @@
       "dev": true
     },
     "node_modules/@types/warning": {
-      "version": "3.0.0",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
-      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==",
       "dev": true
     },
     "node_modules/@uidotdev/usehooks": {
@@ -2646,19 +2773,35 @@
       }
     },
     "node_modules/babel-plugin-polyfill-corejs2": {
-      "version": "0.4.8",
+      "version": "0.4.10",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.8.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.10.tgz",
-      "integrity": "sha512-OtIuQfafSzpo/LhnJaykc0R/MMnuLSSVjVYy9mHArIZ9qTCSZ6TpWCuEKZYVoN//t8HqBNScHrOtCrIK5IaGLg==",
+      "integrity": "sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==",
       "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.22.6",
-        "@babel/helper-define-polyfill-provider": "^0.5.0",
+        "@babel/helper-define-polyfill-provider": "^0.6.1",
         "semver": "^6.3.1"
       },
       "peerDependencies": {
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/babel-plugin-polyfill-corejs2/node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.1.tgz",
+      "integrity": "sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -2813,9 +2956,9 @@
       }
     },
     "node_modules/bootstrap": {
-      "version": "5.3.2",
+      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
-      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
       "dev": true,
       "funding": [
         {
@@ -2855,9 +2998,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.22.3",
+      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==",
+      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
       "dev": true,
       "funding": [
         {
@@ -2874,8 +3017,8 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001580",
+        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.648",
+        "electron-to-chromium": "^1.4.668",
         "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.0.13"
       },
@@ -2893,9 +3036,9 @@
       "dev": true
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001583",
+      "version": "1.0.30001599",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001583.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001599.tgz",
-      "integrity": "sha512-acWTYaha8xfhA/Du/z4sNZjHUWjkiuoAi2LM+T/aL+kemKQgPT1xBb/YKjlQ0Qo8gvbHsGNplrEJ+9G3gL7i4Q==",
+      "integrity": "sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==",
       "dev": true,
       "funding": [
         {
@@ -3031,13 +3174,23 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/core-js": {
+      "version": "3.36.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.1.tgz",
+      "integrity": "sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
-      "version": "3.35.1",
+      "version": "3.36.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.1.tgz",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.36.1.tgz",
-      "integrity": "sha512-sftHa5qUJY3rs9Zht1WEnmkvXputCyDBczPnr7QDgL8n3qrF3CMXY4VPSYtOLLiOUJcah2WNXREd48iOl6mQIw==",
+      "integrity": "sha512-Dk997v9ZCt3X/npqzyGdTlq6t7lDBhZwGvV94PKzDArjp7BTRm7WlDAXYd/OWdeFHO8OChQYRJNJvUCqCbrtKA==",
       "dev": true,
       "dependencies": {
-        "browserslist": "^4.22.2"
+        "browserslist": "^4.23.0"
       },
       "funding": {
         "type": "opencollective",
@@ -3110,9 +3263,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.655",
+      "version": "1.4.711",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.655.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.711.tgz",
-      "integrity": "sha512-2yszojF7vIZ68adIOvzV4bku8OZad9w5H9xF3ZAMZjPuOjBarlflUkjN6DggdV+L71WZuKUfKUhov/34+G5QHg==",
+      "integrity": "sha512-hRg81qzvUEibX2lDxnFlVCHACa+LtrCPIsWAxo161LDYIB3jauf57RGsMZV9mvGwE98yGH06icj3zBEoOkxd/w==",
       "dev": true
     },
     "node_modules/enhanced-resolve": {
@@ -4077,14 +4230,14 @@
       }
     },
     "node_modules/react-bootstrap": {
-      "version": "2.10.0",
+      "version": "2.10.2",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.2.tgz",
-      "integrity": "sha512-87gRP69VAfeU2yKgp8RI3HvzhPNrnYIV2QNranYXataz3ef+k7OhvKGGdxQLQfUsQ2RTmlY66tn4pdFrZ94hNg==",
+      "integrity": "sha512-UvB7mRqQjivdZNxJNEA2yOQRB7L9N43nBnKc33K47+cH90/ujmnMwatTCwQLu83gLhrzAl8fsa6Lqig/KLghaA==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.22.5",
         "@restart/hooks": "^0.4.9",
-        "@restart/ui": "^1.6.6",
+        "@restart/ui": "^1.6.8",
         "@types/react-transition-group": "^4.4.6",
         "classnames": "^2.3.2",
         "dom-helpers": "^5.2.1",
@@ -4748,9 +4901,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.90.1",
+      "version": "5.90.3",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.1.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.3.tgz",
-      "integrity": "sha512-SstPdlAC5IvgFnhiRok8hqJo/+ArAbNv7rhU4fnWGHNVfN59HSQFaxZDSAL3IFG2YmqxuRs+IU33milSxbPlog==",
+      "integrity": "sha512-h6uDYlWCctQRuXBs1oYpVe6sFcWedl0dpcVaTf/YF67J9bKvwJajFulMVSYKHrksMB3I/pIagRzDxwxkebuzKA==",
       "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
@@ -4974,9 +5127,9 @@
       }
     },
     "node_modules/zustand": {
-      "version": "4.5.0",
+      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz",
-      "integrity": "sha512-zlVFqS5TQ21nwijjhJlx4f9iGrXSL0o/+Dpy4txAP22miJ8Ti6c1Ol1RLNN98BMib83lmDH/2KmLwaNXpjrO1A==",
+      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
       "dev": true,
       "dependencies": {
         "use-sync-external-store": "1.2.0"

package.json

@@ -14,29 +14,59 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.24.0",
-    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
+    "@babel/plugin-proposal-decorators": "^7.24.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-object-rest-spread": "",
+    "@babel/plugin-transform-runtime": "^7.24.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.24.1",
+    "@hello-pangea/dnd": "^16.5.0",
+    "@uidotdev/usehooks": "^2.4.1",
     "babel-loader": "^9.1.3",
     "babel-preset-minify": "^0.5.2",
-    "bootstrap": "^5.3.2",
+    "bootstrap": "^5.3.3",
     "jquery": "^3.7.1",
+    "json-logic-js": "^2.0.2",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.10.0",
+    "react-bootstrap": "^2.10.2",
-    "@hello-pangea/dnd": "^16.5.0",
     "react-dom": "^18.2.0",
     "uuid": "^9.0.1",
-    "webpack": "^5.90.1",
+    "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
-    "json-logic-js": "^2.0.2",
+    "webpack-preprocessor-loader": "^1.3.0",
-    "zustand": "^4.5.0",
+    "zustand": "^4.5.2"
-    "@uidotdev/usehooks":"^2.4.1",
-    "webpack-preprocessor-loader": "^1.3.0"
   },
   "babel": {
     "presets": [
+      [
         "@babel/preset-env",
+        {
+          "useBuiltIns": "usage",
+          "corejs": "3",
+          "targets": {
+            "browsers": ["last 5 versions", "ie >= 9"]
+          }
+        }
+      ],
       "@babel/preset-react"
+    ],
+    "plugins": [
+      ["@babel/plugin-proposal-decorators", { "legacy": true }],
+      ["@babel/plugin-proposal-class-properties", { "loose": true }],
+      ["@babel/plugin-transform-object-rest-spread"],
+      ["@babel/plugin-transform-for-of"],
+      ["@babel/plugin-transform-runtime"],
+      [
+        "@babel/plugin-transform-modules-commonjs",
+        {
+          "allowTopLevelThis": true
+        }
       ]
+    ]
+  },
+  "dependencies": {
+    "core-js": "^3.36.1"
   }
 }

sass/css/_shop.scss

@@ -72,14 +72,19 @@ button {
             overflow-y: scroll;
             overflow-x: hidden;
             position: relative;
+            max-width: max(1/4 * 100%, 310px);
+            scrollbar-width: thin;
+            scrollbar-gutter: stable;
+            scrollbar-color: #6e7e87 transparent;
+            scrollbar-arrow-color: transparent;
             /*padding-bottom: 4rem!important;*/
-        }
 
-        > aside.aside:after {
+            .gradient-bottom {
-            position: fixed;
+                position: sticky;
                 bottom: 0;
                 height: 100px;
-            width: calc(2 / 6 * 100%);
+                //width: max(1/4 * 100%, 310px);
+                width: inherit;
                 content: "";
                 background: linear-gradient(
                                 to top,
@@ -88,10 +93,11 @@ button {
                 );
                 pointer-events: none;
             }
+        }
 
         > section.main {
             flex: 4;
-            max-width: calc(4 / 6 * 100%);
+            width: calc(3/4 * 100%);
             overflow-y: scroll;
         }
     }
@@ -100,7 +106,7 @@ button {
 
         display: flex;
         color: white;
-        padding: 3rem 2rem 1rem;
+        padding: 1rem 0rem 1rem 1.5rem;
 
         .content {
             flex: 1;
@@ -119,6 +125,7 @@ button {
 
             h3 {
                 color: white;
+                font-size: 1.5rem;
             }
 
             button {
@@ -176,8 +183,50 @@ button {
         }
     }
 
-    .backlog-container {
+    .catalog-container {
         padding-bottom: 4rem;
+
+        .catalog-bar {
+            display: flex;
+            width: 100%;
+            margin: 0.4rem 0;
+            padding: 0 0.5rem;
+            justify-content: space-around;
+
+            .mobileCloseMenu {
+                display: flex;
+                padding: 0;
+                margin: 0;
+                width: 10%;
+                align-content: center;
+            }
+            .search-catalog {
+                display: inline-block;
+                border: 0;
+                width: 90%;
+
+                .search-catalog-input {
+                    display: inline;
+                    border: 0;
+                    color: white;
+                    border-radius: 2rem;
+                    background: rgba(255, 255, 255, 0.15) url("/images/shop/icon-search.svg") no-repeat;
+                    background-position: left 2% center;
+                    background-size: 20px;
+                    padding-right: 1rem;
+                    text-indent: 20px;
+
+                    &::placeholder {
+                        color: white;
+                        opacity: 0.5;
+                    }
+
+                    &:focus {
+                        box-shadow: none;
+                    }
+                }
+            }
+        }
     }
 
     .rule {
@@ -241,6 +290,9 @@ button {
 
                 .item-card-name {
                     font-weight: 700;
+                    &.tabbed {
+                        padding-left: 16px;
+                    }
                 }
 
                 .price {

static/css/order-hardware.css

@@ -55,7 +55,7 @@
   color: white;
   font-weight: bold;
   font-size: 1.75rem;
-  padding: .75rem 2rem;
+  padding: .75rem 1.5rem;
 }
 
 #accordion_categories .accordion-body {
@@ -94,6 +94,14 @@
     height: calc(100vh - 10px - 2.5rem); /* .navbar vertical padding + line height (.navbar-brand.font-size.rem * body.font-size * body.line-height)*/
   }
 
+  #root-shop .layout>aside.aside {
+    min-width: max(300px, 30%);
+  }
+
+  #root-shop .layout>aside.aside .gradient-bottom {
+    width: inherit;
+  }
+
   #root-shop .productItem {
     padding: 2rem 1rem 1rem;
   }
@@ -111,7 +119,7 @@
   }
 
   #root-shop .productItem .content ul {
-    font-size: .6rem;
+    font-size: .75rem;
   }
 
   #root-shop .panel .control {
@@ -133,7 +141,7 @@
   }
 
   #root-shop .panel .summary>.summary-price table {
-    font-size: 1rem;
+    font-size: 0.8rem;
   }
 
   #root-shop .panel .summary>.summary-form form,
@@ -163,7 +171,7 @@
   }
 
   #root-shop table tr {
-    padding: .8em 0;
+    padding: .2em 0;
     display: flex !important;
     justify-content: space-between;
   }
@@ -192,7 +200,7 @@
   }
 
   body {
-    font-size: .7rem;
+    font-size: .8rem;
   }
 
   #root-shop, #root-shop>div {
@@ -217,7 +225,7 @@
   }
 
   #root-shop table tr {
-    padding: .8em 0;
+    padding: .2em 0;
     display: flex !important;
     justify-content: space-between;
   }
@@ -227,7 +235,7 @@
   }
 
   #root-shop .panel .summary>.summary-price table {
-    font-size: .7rem;
+    font-size: .8rem;
   }
 
   #root-shop .panel .summary>.summary-form form,
@@ -236,7 +244,7 @@
   }
 
   #root-shop .panel .summary>.summary-price tfoot {
-    font-size: .85rem;
+    font-size: 1.0rem;
   }
 
   /*#root-shop .panel .summary>.summary-form form input[type="submit"] {
@@ -288,7 +296,7 @@
   }
 
   body {
-    font-size: .7rem;
+    font-size: .8rem;
   }
 
   #root-shop, #root-shop>div {
@@ -308,11 +316,11 @@
   }
 
   #root-shop .productItem .content h3 {
-    font-size: 1rem;
+    font-size: 1.25rem;
   }
 
   #root-shop .productItem .content ul {
-    font-size: .5rem;
+    font-size: .75rem;
   }
 
   #root-shop .panel {
@@ -345,7 +353,7 @@
   }
 
   #root-shop .panel .summary>.summary-price table {
-    font-size: .7rem;
+    font-size: .8rem;
   }
 
   #root-shop .panel .summary>.summary-form form,
@@ -354,7 +362,7 @@
   }
 
   #root-shop .panel .summary>.summary-price tfoot {
-    font-size: .85rem;
+    font-size: 1rem;
   }
 
   /*#root-shop .panel .summary>.summary-form form input[type="submit"] {
@@ -367,7 +375,6 @@
     border-top-right-radius: 30px;
     width: 80px;
     padding: 5px 0 5px 10px;
-    margin-bottom: -25px;
     margin-left: -1.3rem;
     position: relative;
     z-index: 1;
@@ -386,7 +393,7 @@
   }
 
   #root-shop table tr {
-    padding: .8em 0;
+    padding: .2em 0;
     display: flex !important;
     justify-content: space-between;
   }
@@ -394,21 +401,22 @@
   #root-shop .layout>aside.aside.menu-opened {
     /*transform: translate3d(0, 0, 0);*/
     transition: left .3s;
-    width: 310px;
+    width: min(310px, 60vw);
+    max-width: 60%;
     left: 0;
   }
 
   #root-shop .layout>aside.aside.menu-opened + section.main {
     /*transform: translate3d(310px, 0, 0);*/
     transition: left .3s;
-    left: 310px;
+    left: min(310px, 60vw);
     position: relative;
     z-index: 0;
   }
 
   #root-shop .layout>aside.aside.menu-opened + section.main:after {
     content: '';
-    position: absolute;
+    position: fixed;
     height: 100%;
     width: 100%;
     background-color: rgba(0, 0, 0, .3);
@@ -422,13 +430,13 @@
     transition: left .3s;
     position: fixed;
     z-index: 1;
-    left: -310px;
+    left: max(-310px, -60vw);
-    width: 310px;
+    width: min(310px, 60vw);
     height: 100%;
   }
 
-  #root-shop .layout>aside.aside:after {
+  #root-shop .layout>aside.aside .gradient-bottom {
-    width: 0;
+    display: none;
   }
 
   #root-shop .layout>aside.aside + section.main {
@@ -450,7 +458,7 @@
     overflow: initial;
   }
 
-  #root-shop .layout>aside.aside.menu-opened > .backlog-container {
+  #root-shop .layout>aside.aside.menu-opened > .catalog-container {
     overflow-y: scroll;
     height: 100%;
   }
@@ -460,7 +468,7 @@
   }
 
   #accordion_categories button {
-    font-size: 1rem;
+    font-size: 1.5rem;
     padding: .5rem 0.5rem;
   }
 }
@@ -500,7 +508,7 @@
   }
 
   body {
-    font-size: .7rem;
+    font-size: .8rem;
   }
 
   #root-shop, #root-shop>div {
@@ -516,20 +524,21 @@
   }
 
   #root-shop .productItem .content h3 {
-    font-size: 1rem;
+    font-size: 1.25rem;
   }
 
   #root-shop .layout>aside.aside.menu-opened {
     /*transform: translate3d(0, 0, 0);*/
     transition: left .3s;
-    width: 310px;
+    width: min(310px, 90vw);
+    max-width: 90%;
     left: 0;
   }
 
   #root-shop .layout>aside.aside.menu-opened + section.main {
     /*transform: translate3d(310px, 0, 0);*/
     transition: left .3s;
-    left: 310px;
+    left: min(310px, 90vw);
     position: relative;
     z-index: 0;
   }
@@ -549,13 +558,13 @@
     transition: left .3s;
     position: fixed;
     z-index: 1;
-    left: -310px;
+    left: max(-310px, -90vw);
-    width: 310px;
+    width: min(310px, 90vw);
     height: 100%;
   }
 
-  #root-shop .layout>aside.aside:after {
+  #root-shop .layout>aside.aside .gradient-bottom {
-    width: 0;
+    display: none;
   }
 
   #root-shop .layout>aside.aside + section.main {
@@ -611,7 +620,7 @@
   }
 
   #root-shop .panel .summary>.summary-price table {
-    font-size: .7rem;
+    font-size: .8rem;
   }
 
   #root-shop .panel .summary>.summary-form form,
@@ -620,7 +629,7 @@
   }
 
   #root-shop .panel .summary>.summary-price tfoot {
-    font-size: .85rem;
+    font-size: 1rem;
   }
 
   /*#root-shop .panel .summary>.summary-form form input[type="submit"] {
@@ -633,7 +642,6 @@
     border-top-right-radius: 30px;
     width: 80px;
     padding: 5px 0 5px 10px;
-    margin-bottom: 15px;
     margin-left: -1.3rem;
   }
 
@@ -650,7 +658,7 @@
   }
 
   #root-shop table tr {
-    padding: .8em 0;
+    padding: .2em 0;
     display: flex !important;
     justify-content: space-between;
   }
@@ -659,7 +667,7 @@
     overflow: initial;
   }
 
-  #root-shop .layout>aside.aside.menu-opened > .backlog-container {
+  #root-shop .layout>aside.aside.menu-opened > .catalog-container {
     overflow-y: scroll;
     height: 100%;
   }
@@ -669,7 +677,7 @@
   }
 
   #accordion_categories button {
-    font-size: 1rem;
+    font-size: 1.5rem;
     padding: .5rem 0.5rem;
   }
 }

static/images/shop/icon-search.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="512"
+   height="512"
+   version="1.1"
+   viewBox="0 0 512 512"
+   id="svg1"
+   sodipodi:docname="icon-search.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.59375"
+     inkscape:cx="255.68627"
+     inkscape:cy="256"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="M456.69,421.39,362.6,327.3a173.81,173.81,0,0,0,34.84-104.58C397.44,126.38,319.06,48,222.72,48S48,126.38,48,222.72s78.38,174.72,174.72,174.72A173.81,173.81,0,0,0,327.3,362.6l94.09,94.09a25,25,0,0,0,35.3-35.3ZM97.92,222.72a124.8,124.8,0,1,1,124.8,124.8A124.95,124.95,0,0,1,97.92,222.72Z"
+     fill="#fff"
+     id="path1"
+     style="fill:#ffffff;fill-opacity:0.5" />
+</svg>

static/js/shop.jsx

@@ -1,5 +1,6 @@
 'use strict';
-
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
 import React from "react";
 import { createRoot } from "react-dom/client";
 

static/js/shop/Catalog.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {Droppable} from "@hello-pangea/dnd";
+import {useShopStore} from "./shop_store";
+// #!render_count
+import {useRenderCount} from "@uidotdev/usehooks";
+import {CatalogGroups} from "./CatalogGroups";
+import {SearchBar} from "./SearchBar";
+import {CatalogSearchResult} from "./CatalogSearchResult";
+import {GradientBottom} from "./GradientBottom";
+
+/**
+ * Component that renders the catalog in the aside
+ */
+export function Catalog() {
+    // #!render_count
+    const renderCount = useRenderCount();
+
+    const data = useShopStore((state) => state.groups);
+    const items = useShopStore((state) => state.cards);
+
+    const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
+    const isMobile = useShopStore((state) => state.isMobile);
+    const showSearch = useShopStore((state) => state.listed_cards.length > 0);
+
+    // #!render_count
+    console.log("Catalog renders: ", renderCount)
+
+    return (
+        <Droppable
+            droppableId={data.id}
+            isDropDisabled={false}>
+
+            {(provided) => (
+                <div
+                    className="catalog-container"
+                    ref={provided.innerRef}
+                    {...provided.droppableProps}>
+
+
+
+                    <div className="catalog-bar">
+                        <SearchBar/>
+
+                        {isMobile ? (
+                            <div className="mobileCloseMenu">
+                                <button onClick={onClickToggleMobileSideMenu}>
+                                    <img src="/images/shop/icon-close-white.svg" alt="add"/>
+                                </button>
+                            </div>
+                        ) : null}
+                    </div>
+
+                    {showSearch ? <CatalogSearchResult/> : <CatalogGroups/>}
+
+                    {provided.placeholder && (
+                        <div style={{display: 'none'}}>
+                            {provided.placeholder}
+                        </div>
+                    )}
+
+                    <GradientBottom/>
+                </div>
+            )}
+
+        </Droppable>
+    );
+
+}

static/js/shop/CatalogGroups.jsx

@@ -1,24 +1,10 @@
-import React from 'react';
-import {Droppable} from "@hello-pangea/dnd";
 import {ProductItem} from "./ProductItem";
+import React from "react";
 import {useShopStore} from "./shop_store";
-// #!render_count
-import {useRenderCount} from "@uidotdev/usehooks";
-
-/**
- * Component that renders the backlog in the aside
- */
-export function Backlog() {
-    // #!render_count
-    const renderCount = useRenderCount();
 
+export function CatalogGroups() {
     const data = useShopStore((state) => state.groups);
     const items = useShopStore((state) => state.cards);
-    const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
-    const isMobile = useShopStore((state) => state.isMobile);
-
-    // #!render_count
-    console.log("Backlog renders: ", renderCount)
 
     const ordered_groups = data.categories.map(groupItem => ({
         name: groupItem.name,
@@ -50,39 +36,9 @@ export function Backlog() {
             );
         }
     );
-
     return (
-        <Droppable
-            droppableId={data.id}
-            isDropDisabled={false}>
-
-            {(provided) => (
-                <div
-                    className="backlog-container"
-                    ref={provided.innerRef}
-                    {...provided.droppableProps}>
-
-                    {isMobile ? (
-                        <div className="mobileCloseMenu">
-                            <button onClick={onClickToggleMobileSideMenu}>
-                                <img src="/images/shop/icon-close-white.svg" alt="add"/>
-                            </button>
-                        </div>
-                    ) : null}
-
         <div className="accordion accordion-flush" id="accordion_categories">
             {groups}
         </div>
-
+    )
-                    {provided.placeholder && (
-                        <div style={{display: 'none'}}>
-                            {provided.placeholder}
-                        </div>
-                    )}
-                </div>
-            )}
-
-        </Droppable>
-    );
-
 }

static/js/shop/CatalogSearchResult.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {useShopStore} from "./shop_store";
+import {ProductItem} from "./ProductItem";
+
+
+export function CatalogSearchResult() {
+    const cards_to_display = useShopStore((state) => state.listed_cards);
+    return ( <>
+        {cards_to_display.map((item, _) => {
+                return (
+                    <ProductItem card_index={item} key={"searched_" + item} />
+                )
+            })}
+        </>
+    )
+}

static/js/shop/GradientBottom.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function GradientBottom() {
+    return (
+        <div className="gradient-bottom"></div>
+    )
+}

static/js/shop/OptionsWrapper.jsx

@@ -11,6 +11,11 @@ export function OptionsDialogWrapper({crate_index, card_index, first, last}) {
     const card_id = useShopStore((state) => state.crates[crate_index].items[card_index].id);
     const options_class = useShopStore((state) => state.crates[crate_index].items[card_index].options_class);
     const sideMenuIsOpen = useShopStore((state) => state.sideMenuIsOpen);
+    const _notificationTimer = useShopStore((state) => state.notificationTimer);
+    const hideNotification = useShopStore((state) => state.hideNotification);
+    const displayNotification = useShopStore((state) =>  
+        state.notificationCrateId === crate_id &&
+        (state.notificationCardIndex === card_index || (state.crates[crate_index].items.length + (state.notificationCardIndex || -1)) === card_index));
 
     const onOptionsUpdate = useShopStore((state) => state.updateOptions);
 
@@ -25,6 +30,8 @@ export function OptionsDialogWrapper({crate_index, card_index, first, last}) {
             first={first}
             last={last}
             sideMenuIsOpen={sideMenuIsOpen}
+            onHideNotification={hideNotification}
+            displayNotification={displayNotification}
             target={{
                 construct: ((outvar, value) => {
                     // #!options_log

static/js/shop/ProductItem.jsx

@@ -8,7 +8,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
 
 /**
  * Component that renders a product.
- * Used in the aside (e.g backlog of product)
+ * Used in the aside (e.g catalog of product)
  */
 export function ProductItem({card_index}) {
     // #!render_count
@@ -16,7 +16,7 @@ export function ProductItem({card_index}) {
 
     const getCardDescription = useShopStore((state) => state.getCardDescription);
     const currency = useShopStore((state) => state.currency);
-    const onAddCard = useShopStore((state) => state.addCardFromBacklog);
+    const onAddCard = useShopStore((state) => state.addCardFromCatalog);
     const card = getCardDescription(card_index);
 
     // #!render_count

static/js/shop/SearchBar.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {useShopStore} from "./shop_store";
+
+export function SearchBar() {
+    const search_bar_value = useShopStore((state) => state.search_bar_value);
+    const updateSearchBar = useShopStore((state) => state.updateSearchBar);
+    return (
+        <div className="search-catalog form-outline">
+            <input type="search"
+                   id="search_bar"
+                   className="search-catalog-input form-control"
+                   placeholder="Search through cards"
+                   value={search_bar_value}
+                   onChange={event => updateSearchBar(event.target.value)}
+                   aria-label="Search"/>
+        </div>
+    )
+}

static/js/shop/Shop.jsx

@@ -6,7 +6,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
 
 
 import {Layout} from "./Layout";
-import {Backlog} from "./Backlog";
+import {Catalog} from "./Catalog";
 import {OrderPanel} from "./OrderPanel";
 import {useShopStore} from "./shop_store";
 
@@ -18,7 +18,7 @@ export function Shop() {
     // #!render_count
     const renderCount = useRenderCount();
 
-    const addCardFromBacklog = useShopStore((state) => state.addCardFromBacklog);
+    const addCardFromCatalog = useShopStore((state) => state.addCardFromCatalog);
     const initExtData = useShopStore((state) => state.initExtData);
     const moveCard = useShopStore((state) => state.moveCard);
     const deleteCard = useShopStore((state) => state.deleteCard);
@@ -30,16 +30,16 @@ export function Shop() {
             console.log(drop_result)
             return;
         }
-        if (drop_result.source.droppableId === "backlog")
+        if (drop_result.source.droppableId === "catalog")
-            addCardFromBacklog(drop_result.destination.droppableId, drop_result.source.index, drop_result.destination.index);
+            addCardFromCatalog(drop_result.destination.droppableId, drop_result.source.index, drop_result.destination.index);
-        else if (drop_result.destination.droppableId === "backlog")
+        else if (drop_result.destination.droppableId === "catalog")
             deleteCard(drop_result.source.droppableId, drop_result.source.index);
         else
             moveCard(drop_result.source.droppableId, drop_result.source.index, drop_result.destination.droppableId, drop_result.destination.index)
     }
 
     useEffect(() => {
-        addCardFromBacklog(null, [cardIndexById("eem_pwr_mod"), cardIndexById("kasli")], -1, true);
+        addCardFromCatalog(null, [cardIndexById("eem_pwr_mod"), cardIndexById("kasli")], -1, true);
         initExtData();
     }, []);
 
@@ -50,7 +50,7 @@ export function Shop() {
         <DragDropContext onDragEnd={handleOnDragEnd}>
             <Layout
                 aside={
-                    <Backlog/>
+                    <Catalog/>
                 }
                 main={(
                     <OrderPanel

static/js/shop/SummaryCrateCard.jsx

@@ -41,11 +41,7 @@ export function SummaryCrateCard({crate_index, card_index}) {
             onClick={() => setHighlight(crate_id, card_index)}
             onMouseEnter={() => setHighlight(crate_id, card_index)}
             onMouseLeave={() => resetHighlight()}>
-            <td className="item-card-name">
+            <td className="item-card-name tabbed">
-                                    <span style={{
-                                        'display': 'inline-block',
-                                        'width': '16px',
-                                    }}>&nbsp;</span>
                 <div>{`${card.name_number} ${card.name} ${card.name_codename}`}</div>
             </td>
 

static/js/shop/SummaryCratePricedOptions.jsx

@@ -23,10 +23,7 @@ export function SummaryCratePricedOptions({crate_index}) {
 
     return options.map((option, _i) => (
         <tr key={"summary_crate_" + crate_id +"option_" + option.id}>
-            <td className="item-card-name">
+            <td className="item-card-name tabbed">
-                    <span style={{
-                        'display': 'inline-block', 'width': '16px',
-                    }}>&nbsp;</span>
                 <div>{option.title}</div>
             </td>
 

static/js/shop/options/DialogPopup.jsx

@@ -3,7 +3,8 @@ import {useClickAway} from "./useClickAway";
 import {ProcessOptions} from "./Options";
 import {Notification} from "./Notification";
 
-export function DialogPopup({options, data, target, id, big, first, last, options_class, sideMenuIsOpen}) {
+export function DialogPopup({options, data, target, id, big, first, last, options_class,
+                                sideMenuIsOpen, displayNotification, onHideNotification}) {
     const [show, setShow] = useState(false);
     const ref = useClickAway((e) => {
             if (e.type === "mousedown") // ignore touchstart
@@ -22,8 +23,11 @@ export function DialogPopup({options, data, target, id, big, first, last, option
                 id={"processed_options_notification" + id}
                 tip="Customization options available"
                 sideMenuIsOpen={sideMenuIsOpen}
+                show={displayNotification}
+                onHide={onHideNotification}
                 content={
-                    <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
+                    <img className="alert-info"
+                         src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
                          onClick={handleClick}/>
                 }
             />

static/js/shop/options/Notification.jsx

@@ -1,28 +1,19 @@
 import {OverlayTrigger, Tooltip} from "react-bootstrap";
-import React, {useEffect, useState} from "react";
+import React from "react";
-
-export function Notification({id, tip, content, sideMenuIsOpen}) {
-    const [show, setShow] = useState(false);
-
-    useEffect(() => {
-        setTimeout(() => {
-            setShow(true)
-        }, 100);
-
-        setTimeout(() => {
-            setShow(false)
-        }, 5000);
-    }, []);
 
+export function Notification({id, tip, content, sideMenuIsOpen, show, onHide}) {
     return (
         <OverlayTrigger
             placement="top"
             trigger={["click", "hover"]}
             style={{display: 'inline'}}
             show={show}
-                onToggle={() => setShow(false)}
             overlay={props => <Tooltip id={id} {...props}>{tip}</Tooltip>}
             rootClose={!sideMenuIsOpen}
+            onToggle={onHide}
+            popperConfig={{
+                strategy: 'fixed'
+            }}
         >
             {content}
         </OverlayTrigger>

static/js/shop/shop_store.js

@@ -18,9 +18,9 @@ const cards_to_pn_map = (cards) => {
     return result;
 };
 
-const useBacklog = ((set, get) => ({
+const useCatalog = ((set, get) => ({
     cards: shared_data.items,
-    groups: shared_data.columns.backlog,
+    groups: shared_data.columns.catalog,
     cards_list: itemsUnfoldedList,
     currency: shared_data.currency,
     pn_to_cards: cards_to_pn_map(shared_data.items),
@@ -29,6 +29,43 @@ const useBacklog = ((set, get) => ({
     cardIndexById: card_id => get().cards_list.findIndex((element) => (card_id === element))
 }));
 
+const useOptionsNotification = ((set, get) => ({
+    notificationCrateId: null,
+    notificationCardIndex: null,
+    notificationTimer: null,
+    _showNotification: (crate_id, card_index) => set(state => ({
+        notificationCrateId: crate_id,
+        notificationCardIndex: card_index,
+        notificationTimer: setTimeout(() => {
+            state.hideNotification()
+        }, 5000)
+    })),
+    showNotification: (crate_id, card_index) => {
+        get().hideNotification()
+        setTimeout(() => get()._showNotification(crate_id, card_index), 100);
+    },
+    hideNotification: () => set(state => ({
+        notificationCrateId: null,
+        notificationCardIndex: null,
+        notificationTimer: (state.notificationTimer && clearTimeout(state.notificationTimer)) || null,
+    }))
+}));
+
+const useSearch = ((set, get) => ({
+    search_index: Array.from(Object.values(shared_data.items)
+        .map((card, _) => (
+            [(card.name + " " + card.name_number + " " + card.name_codename).toLowerCase(), card.id]
+    ))),
+    search_bar_value: "",
+    listed_cards: [],
+    updateSearchBar: text => set(state => ({
+        search_bar_value: text,
+        listed_cards: text.length > 0 ? Array.from(get().search_index
+            .filter((card, _) => card[0].includes(text.toLowerCase()))
+            .map(([index, card_id], _) => get().cards_list.findIndex(elem => elem === card_id))) : []
+    }))
+}));
+
 const useCrateModes  = ((set, get) => ({
     crate_modes: shared_data.crateModes,
     modes_order: shared_data.crateModeOrder,
@@ -114,9 +151,15 @@ const useLayout = ((set, get) => ({
     showNoDestination: false,
     timerAdded: null,
 
-    switchSideMenu: () => set(state => ({
+    _switchSideMenu: () => set(state => ({
         sideMenuIsOpen: !state.sideMenuIsOpen
     })),
+    switchSideMenu: () => {
+        if (!get().sideMenuIsOpen) {
+            get().hideNotification()
+        }
+        get()._switchSideMenu();
+    },
     cardAdded: () => set(state => ({
         showCardAddedFeedback: true,
         showNoDestination: false,
@@ -167,6 +210,7 @@ const useImportJSON = ((set, get) => ({
             get().fillExtCrateData(crate.id);
         });
         get()._updateTotalOrderPrice();
+        get().showNotification(get().active_crate, null);
     },
     updateImportDescription: (new_description) => set(state => ({
         importValue: {
@@ -339,7 +383,7 @@ const useCart = ((set, get) => ({
         })
     })),
     setActiveCrate: (id) => set(state => ({active_crate: id})),
-    _addCardFromBacklog: (crate_to, index_from, index_to) => set(state => {
+    _addCardFromCatalog: (crate_to, index_from, index_to) => set(state => {
         const take_from = (true_type_of(index_from) === "array" ? index_from : [index_from]).map((item, _i) => (state.cards_list[item]));
         const dest = crate_to || state.active_crate;
         if (!dest) return {};
@@ -510,14 +554,15 @@ const useCart = ((set, get) => ({
         get().fillOrderExtData();
     },
 
-    addCardFromBacklog: (crate_to, index_from, index_to, just_mounted) => {
+    addCardFromCatalog: (crate_to, index_from, index_to, just_mounted) => {
         const dest = crate_to || get().active_crate;
         if (!dest) {
             console.warn("No destination");
             get().noDestinationWarning();
             return {};
         }
-        get()._addCardFromBacklog(dest, index_from, index_to)
+        get().showNotification(dest, index_to);
+        get()._addCardFromCatalog(dest, index_from, index_to)
         get().fillExtData(dest);
         get().fillWarnings(dest);
         get().setActiveCrate(dest);
@@ -568,7 +613,9 @@ const useCart = ((set, get) => ({
 
 
 export const useShopStore = createWithEqualityFn((...params) => ({
-    ...useBacklog(...params),
+    ...useOptionsNotification(...params),
+    ...useCatalog(...params),
+    ...useSearch(...params),
     ...useCrateModes(...params),
     ...useCart(...params),
     ...useSubmitForm(...params),

static/js/shop/utils.js

@@ -1,7 +1,7 @@
 'use strict';
 
 export const data = window.shop_data;
-export const itemsUnfoldedList = Array.from(data.columns.backlog.categories.map(groupId => groupId.itemIds).flat());
+export const itemsUnfoldedList = Array.from(data.columns.catalog.categories.map(groupId => groupId.itemIds).flat());
 
 export const productStyle = (style, snapshot, removeAnim, hovered, selected, cart=false) => {
     const custom = {
@@ -9,7 +9,7 @@ export const productStyle = (style, snapshot, removeAnim, hovered, selected, car
         backgroundColor: (hovered || selected) ? '#eae7f7' : 'initial',
     };
 
-    if (!cart && snapshot.draggingOver == null && // hack for backlog
+    if (!cart && snapshot.draggingOver == null && // hack for catalog
         ((!snapshot.isDragging) // prevent next elements from animation
             || (snapshot.isDragging && snapshot.isDropAnimating))) { // prevent dragged element from weird animation
         style.transform = "none";

static/js/shop_data.js

@@ -1213,12 +1213,12 @@ const shop_data = {
 
   columns: {
     /***
-     * backlog is the column containing all items on left aside,
+     * catalog is the column containing all items on left aside,
      * name should not change
      */
-    'backlog': {
+    'catalog': {
-      id: 'backlog',
+      id: 'catalog',
-      title: 'Backlog',
+      title: 'Catalog',
       /* itemIds define items order - change order to suit your need */
       categories: [
         { name: 'Core',

webpack.config.js

@@ -8,13 +8,19 @@ module.exports = {
         path: path.resolve(__dirname, './static/js'),
         filename: '[name].bundle.js'
     },
+    target: ['web', 'es5', 'browserslist:ie 11'],
     module: {
         rules: [
             {
                 test: /\.(js|jsx)$/,
-                exclude: /node_modules/,
+                //exclude: /node_modules/,
                 use: [
-                    'babel-loader',
+                    {
+                        loader: 'babel-loader',
+                        options: {
+                            presets: ['@babel/preset-env']
+                        }
+                    },
                     {
                         loader: "webpack-preprocessor-loader",
                         options: {