properly installed and clean

ui/frontend/build_src/package-lock.json

@@ -8,6 +8,7 @@
       "name": "react-ts",
       "version": "0.0.0",
       "dependencies": {
+        "@tanstack/react-location": "^3.7.4",
         "@tanstack/react-query": "^4.2.3",
         "@tanstack/react-query-devtools": "^4.2.3",
         "@vanilla-extract/css": "^1.9.0",
@@ -545,6 +546,26 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/react-location": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-location/-/react-location-3.7.4.tgz",
+      "integrity": "sha512-6rH2vNHGr0uyeUz5ZHvWMYjeYKGgIKFzvs5749QtnS9f+FU7t7fQE0hKZAzltBZk82LT7iYbcHBRyUg2lW13VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.7",
+        "history": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/@tanstack/react-query": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.2.3.tgz",
@@ -1382,6 +1403,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/immer": {
       "version": "9.0.15",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
@@ -2294,6 +2323,15 @@
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.2.3.tgz",
       "integrity": "sha512-zdt5lYWs1dZaA3IxJbCgtAfHZJScRZONpiLL7YkeOkrme5MfjQqTpjq7LYbzpyuwPOh2Jx68le0PLl57JFv5hQ=="
     },
+    "@tanstack/react-location": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-location/-/react-location-3.7.4.tgz",
+      "integrity": "sha512-6rH2vNHGr0uyeUz5ZHvWMYjeYKGgIKFzvs5749QtnS9f+FU7t7fQE0hKZAzltBZk82LT7iYbcHBRyUg2lW13VA==",
+      "requires": {
+        "@babel/runtime": "^7.16.7",
+        "history": "^5.2.0"
+      }
+    },
     "@tanstack/react-query": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.2.3.tgz",
@@ -2793,6 +2831,14 @@
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
       "dev": true
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "immer": {
       "version": "9.0.15",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",

ui/frontend/build_src/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-location": "^3.7.4",
     "@tanstack/react-query": "^4.2.3",
     "@tanstack/react-query-devtools": "^4.2.3",
     "@vanilla-extract/css": "^1.9.0",

ui/frontend/build_src/src/App.tsx

@@ -1,29 +1,19 @@
-import {
+import { ReactLocation, Router } from "@tanstack/react-location";
-  Link,
-  MakeGenerics,
-  Outlet,
-  ReactLocation,
-  Router,
-  useMatch,
-} from "@tanstack/react-location";
-
 
 import Home from "./components/layouts/Home";
 import Settings from "./components/layouts/Settings";
 
 const location = new ReactLocation();
 
-
 function App() {
   return (
     <Router
       location={location}
       routes={[
-        {path: "/", element: <Home />},
+        { path: "/", element: <Home /> },
-        {path: "settings", element: <Settings />},
+        { path: "settings", element: <Settings /> },
       ]}
-    >
+    ></Router>
-    </Router>
   );
 }
 

ui/frontend/build_src/src/main.tsx

@@ -10,7 +10,6 @@ import Editor from "./components/layouts/Home";
 
 import App from "./App";
 
-
 import "./styles.css.ts";
 
 const queryClient = new QueryClient({

ui/frontend/dist/index.css

@@ -1 +1 @@
-._1jvuph00{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1jvuph01{grid-area:header}._1jvuph02{grid-area:create;overflow:auto}._1jvuph03{grid-area:display;overflow:auto}._1jvuph04{grid-area:footer}@media screen and (max-width: 800px){._1jvuph00{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}.starting{color:#f0ad4e}.error{color:#d9534f}.success{color:#5cb85c}.header-display{color:#fff;display:flex;align-items:center;justify-content:center}.status-display{margin-left:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}.generated-image,.image-contain{position:relative}#save-button{position:absolute;top:10px;left:10px}#use-button{position:absolute;top:10px;right:10px}.display-panel{padding:10px}#display-container{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}#previous-images{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}.previous-image{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}
+._1cjn8au0{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1cjn8au1{grid-area:header}._1cjn8au2{grid-area:create;overflow:auto}._1cjn8au3{grid-area:display;overflow:auto}._1cjn8au4{grid-area:footer}@media screen and (max-width: 800px){._1cjn8au0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}.starting{color:#f0ad4e}.error{color:#d9534f}.success{color:#5cb85c}.header-display{color:#fff;display:flex;align-items:center;justify-content:center}.status-display{margin-left:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}.generated-image,.image-contain{position:relative}#save-button{position:absolute;top:10px;left:10px}#use-button{position:absolute;top:10px;right:10px}.display-panel{padding:10px}#display-container{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}#previous-images{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}.previous-image{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}