From 0a76d336a8ea8dc041cbf2ca893b2ba6d5be50e2 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Sat, 21 Sep 2024 13:31:41 +0200
Subject: [PATCH 01/43] update sidebar block

---
 package-lock.json                             | 262 +++++++-----------
 package.json                                  |   8 +-
 .../js/components/Factory/Main/BlockType.vue  |  15 +-
 .../js/components/Factory/Sidebar/Block.vue   |  74 ++++-
 resources/js/stores/form.ts                   |  14 +-
 5 files changed, 176 insertions(+), 197 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0a8c9669..29f2ed39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
             "version": "2.0.1",
             "license": "GNU Affero General Public License v3.0",
             "dependencies": {
-                "@deck9/ui": "^0.15.0",
+                "@deck9/ui": "^0.15.1",
                 "@headlessui/vue": "^1.7.23",
                 "@highlightjs/vue-plugin": "^2.1.0",
                 "@inertiajs/vue3": "^1.2.0",
@@ -26,8 +26,8 @@
                 "@tiptap/vue-3": "^2.7.2",
                 "@types/lodash": "^4.17.7",
                 "@types/node": "^22.5.5",
-                "@typescript-eslint/eslint-plugin": "^8.5.0",
-                "@typescript-eslint/parser": "^8.5.0",
+                "@typescript-eslint/eslint-plugin": "^8.6.0",
+                "@typescript-eslint/parser": "^8.6.0",
                 "@vitejs/plugin-vue": "^5.1.4",
                 "@vueuse/core": "^11.1.0",
                 "autoprefixer": "^10.4.20",
@@ -63,7 +63,7 @@
                 "prettier": "^3.3.3",
                 "prettier-eslint": "^16.3.0",
                 "prettier-plugin-tailwindcss": "^0.6.6",
-                "puppeteer": "^23.3.0",
+                "puppeteer": "^23.4.0",
                 "tailwind-config-viewer": "^2.0.4",
                 "vite": "^5.4.6",
                 "vitest": "^2.1.1"
@@ -318,10 +318,9 @@
             }
         },
         "node_modules/@deck9/ui": {
-            "version": "0.15.0",
-            "resolved": "https://registry.npmjs.org/@deck9/ui/-/ui-0.15.0.tgz",
-            "integrity": "sha512-O3biiHnY/gjNQ77XkJzNEDkz1sEJ3Ory60h18aY4isX/ck8q9/3lnlmn1XfnWEwix9BuUkGMvpdLkrl+qY3Z0A==",
-            "license": "MIT",
+            "version": "0.15.1",
+            "resolved": "https://registry.npmjs.org/@deck9/ui/-/ui-0.15.1.tgz",
+            "integrity": "sha512-UnJO4l+BTsj/gj7RvBmA57BP8u/AA973bh9A3dMPvBM8A75ISTnWCPes9C5IYh8ZaiohSCbx4dMameZliEsRgQ==",
             "dependencies": {
                 "@deck9/tailwindcss-recursive-font-helper": "^1.0.1",
                 "@floating-ui/vue": "^1.0.4",
@@ -1454,7 +1453,6 @@
             "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.4.0.tgz",
             "integrity": "sha512-x8J1csfIygOwf6D6qUAZ0ASk3z63zPb7wkNeHRerCMh82qWKUrOgkuP005AJC8lDL6/evtXETGEJVcwykKT4/g==",
             "dev": true,
-            "license": "Apache-2.0",
             "dependencies": {
                 "debug": "^4.3.6",
                 "extract-zip": "^2.0.1",
@@ -2225,8 +2223,7 @@
             "version": "0.23.0",
             "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
             "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==",
-            "dev": true,
-            "license": "MIT"
+            "dev": true
         },
         "node_modules/@types/cookie": {
             "version": "0.4.1",
@@ -2286,23 +2283,21 @@
             "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
             "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
             "dev": true,
-            "license": "MIT",
             "optional": true,
             "dependencies": {
                 "@types/node": "*"
             }
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "8.5.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.5.0.tgz",
-            "integrity": "sha512-lHS5hvz33iUFQKuPFGheAB84LwcJ60G8vKnEhnfcK1l8kGVLro2SFYW6K0/tj8FUhRJ0VHyg1oAfg50QGbPPHw==",
-            "license": "MIT",
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.6.0.tgz",
+            "integrity": "sha512-UOaz/wFowmoh2G6Mr9gw60B1mm0MzUtm6Ic8G2yM1Le6gyj5Loi/N+O5mocugRGY+8OeeKmkMmbxNqUCq3B4Sg==",
             "dependencies": {
                 "@eslint-community/regexpp": "^4.10.0",
-                "@typescript-eslint/scope-manager": "8.5.0",
-                "@typescript-eslint/type-utils": "8.5.0",
-                "@typescript-eslint/utils": "8.5.0",
-                "@typescript-eslint/visitor-keys": "8.5.0",
+                "@typescript-eslint/scope-manager": "8.6.0",
+                "@typescript-eslint/type-utils": "8.6.0",
+                "@typescript-eslint/utils": "8.6.0",
+                "@typescript-eslint/visitor-keys": "8.6.0",
                 "graphemer": "^1.4.0",
                 "ignore": "^5.3.1",
                 "natural-compare": "^1.4.0",
@@ -2326,15 +2321,14 @@
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "8.5.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.5.0.tgz",
-            "integrity": "sha512-gF77eNv0Xz2UJg/NbpWJ0kqAm35UMsvZf1GHj8D9MRFTj/V3tAciIWXfmPLsAAF/vUlpWPvUDyH1jjsr0cMVWw==",
-            "license": "BSD-2-Clause",
-            "dependencies": {
-                "@typescript-eslint/scope-manager": "8.5.0",
-                "@typescript-eslint/types": "8.5.0",
-                "@typescript-eslint/typescript-estree": "8.5.0",
-                "@typescript-eslint/visitor-keys": "8.5.0",
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.6.0.tgz",
+            "integrity": "sha512-eQcbCuA2Vmw45iGfcyG4y6rS7BhWfz9MQuk409WD47qMM+bKCGQWXxvoOs1DUp+T7UBMTtRTVT+kXr7Sh4O9Ow==",
+            "dependencies": {
+                "@typescript-eslint/scope-manager": "8.6.0",
+                "@typescript-eslint/types": "8.6.0",
+                "@typescript-eslint/typescript-estree": "8.6.0",
+                "@typescript-eslint/visitor-keys": "8.6.0",
                 "debug": "^4.3.4"
             },
             "engines": {
@@ -2354,13 +2348,12 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "8.5.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.5.0.tgz",
-            "integrity": "sha512-06JOQ9Qgj33yvBEx6tpC8ecP9o860rsR22hWMEd12WcTRrfaFgHr2RB/CA/B+7BMhHkXT4chg2MyboGdFGawYg==",
-            "license": "MIT",
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.6.0.tgz",
+            "integrity": "sha512-ZuoutoS5y9UOxKvpc/GkvF4cuEmpokda4wRg64JEia27wX+PysIE9q+lzDtlHHgblwUWwo5/Qn+/WyTUvDwBHw==",
             "dependencies": {
-                "@typescript-eslint/types": "8.5.0",
-                "@typescript-eslint/visitor-keys": "8.5.0"
+                "@typescript-eslint/types": "8.6.0",
+                "@typescript-eslint/visitor-keys": "8.6.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2371,13 +2364,12 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "8.5.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.5.0.tgz",
-            "integrity": "sha512-N1K8Ix+lUM+cIDhL2uekVn/ZD7TZW+9/rwz8DclQpcQ9rk4sIL5CAlBC0CugWKREmDjBzI/kQqU4wkg46jWLYA==",
-            "license": "MIT",
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.6.0.tgz",
+            "integrity": "sha512-dtePl4gsuenXVwC7dVNlb4mGDcKjDT/Ropsk4za/ouMBPplCLyznIaR+W65mvCvsyS97dymoBRrioEXI7k0XIg==",
             "dependencies": {
-                "@typescript-eslint/typescript-estree": "8.5.0",
-                "@typescript-eslint/utils": "8.5.0",
+                "@typescript-eslint/typescript-estree": "8.6.0",
+                "@typescript-eslint/utils": "8.6.0",
                 "debug": "^4.3.4",
                 "ts-api-utils": "^1.3.0"
             },
@@ -2395,10 +2387,9 @@
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "8.5.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.5.0.tgz",
-            "integrity": "sha512-qjkormnQS5wF9pjSi6q60bKUHH44j2APxfh9TQRXK8wbYVeDYYdYJGIROL87LGZZ2gz3Rbmjc736qyL8deVtdw==",
-            "license": "MIT",
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.6.0.tgz",
+            "integrity": "sha512-rojqFZGd4MQxw33SrOy09qIDS8WEldM8JWtKQLAjf/X5mGSeEFh5ixQlxssMNyPslVIk9yzWqXCsV2eFhYrYUw==",
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
@@ -2408,13 +2399,12 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "8.5.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.5.0.tgz",
-            "integrity": "sha512-vEG2Sf9P8BPQ+d0pxdfndw3xIXaoSjliG0/Ejk7UggByZPKXmJmw3GW5jV2gHNQNawBUyfahoSiCFVov0Ruf7Q==",
-            "license": "BSD-2-Clause",
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.6.0.tgz",
+            "integrity": "sha512-MOVAzsKJIPIlLK239l5s06YXjNqpKTVhBVDnqUumQJja5+Y94V3+4VUFRA0G60y2jNnTVwRCkhyGQpavfsbq/g==",
             "dependencies": {
-                "@typescript-eslint/types": "8.5.0",
-                "@typescript-eslint/visitor-keys": "8.5.0",
+                "@typescript-eslint/types": "8.6.0",
+                "@typescript-eslint/visitor-keys": "8.6.0",
                 "debug": "^4.3.4",
                 "fast-glob": "^3.3.2",
                 "is-glob": "^4.0.3",
@@ -2439,7 +2429,6 @@
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
             "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-            "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0"
             }
@@ -2448,7 +2437,6 @@
             "version": "9.0.5",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
             "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-            "license": "ISC",
             "dependencies": {
                 "brace-expansion": "^2.0.1"
             },
@@ -2460,15 +2448,14 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "8.5.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.5.0.tgz",
-            "integrity": "sha512-6yyGYVL0e+VzGYp60wvkBHiqDWOpT63pdMV2CVG4LVDd5uR6q1qQN/7LafBZtAtNIn/mqXjsSeS5ggv/P0iECw==",
-            "license": "MIT",
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.6.0.tgz",
+            "integrity": "sha512-eNp9cWnYf36NaOVjkEUznf6fEgVy1TWpE0o52e4wtojjBx7D1UV2WAWGzR+8Y5lVFtpMLPwNbC67T83DWSph4A==",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.4.0",
-                "@typescript-eslint/scope-manager": "8.5.0",
-                "@typescript-eslint/types": "8.5.0",
-                "@typescript-eslint/typescript-estree": "8.5.0"
+                "@typescript-eslint/scope-manager": "8.6.0",
+                "@typescript-eslint/types": "8.6.0",
+                "@typescript-eslint/typescript-estree": "8.6.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2482,12 +2469,11 @@
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "8.5.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.5.0.tgz",
-            "integrity": "sha512-yTPqMnbAZJNy2Xq2XU8AdtOW9tJIr+UQb64aXB9f3B1498Zx9JorVgFJcZpEc9UBuCCrdzKID2RGAMkYcDtZOw==",
-            "license": "MIT",
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.6.0.tgz",
+            "integrity": "sha512-wapVFfZg9H0qOYh4grNVQiMklJGluQrOUiOhYRrQWhx7BY/+I1IYb8BczWNbbUpO+pqy0rDciv3lQH5E1bCLrg==",
             "dependencies": {
-                "@typescript-eslint/types": "8.5.0",
+                "@typescript-eslint/types": "8.6.0",
                 "eslint-visitor-keys": "^3.4.3"
             },
             "engines": {
@@ -3406,7 +3392,6 @@
             "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
             "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "tslib": "^2.0.1"
             },
@@ -3500,8 +3485,7 @@
             "version": "1.6.6",
             "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.6.tgz",
             "integrity": "sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==",
-            "dev": true,
-            "license": "Apache-2.0"
+            "dev": true
         },
         "node_modules/balanced-match": {
             "version": "1.0.2",
@@ -3513,15 +3497,13 @@
             "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.4.2.tgz",
             "integrity": "sha512-qMKFd2qG/36aA4GwvKq8MxnPgCQAmBWmSyLWsJcbn8v03wvIPQ/hG1Ms8bPzndZxMDoHpxez5VOS+gC9Yi24/Q==",
             "dev": true,
-            "license": "Apache-2.0",
             "optional": true
         },
         "node_modules/bare-fs": {
-            "version": "2.3.3",
-            "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.3.tgz",
-            "integrity": "sha512-7RYKL+vZVCyAsMLi5SPu7QGauGGT8avnP/HO571ndEuV4MYdGXvLhtW67FuLPeEI8EiIY7zbbRR9x7x7HU0kgw==",
+            "version": "2.3.5",
+            "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.5.tgz",
+            "integrity": "sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==",
             "dev": true,
-            "license": "Apache-2.0",
             "optional": true,
             "dependencies": {
                 "bare-events": "^2.0.0",
@@ -3530,11 +3512,10 @@
             }
         },
         "node_modules/bare-os": {
-            "version": "2.4.2",
-            "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.4.2.tgz",
-            "integrity": "sha512-HZoJwzC+rZ9lqEemTMiO0luOePoGYNBgsLLgegKR/cljiJvcDNhDZQkzC+NC5Oh0aHbdBNSOHpghwMuB5tqhjg==",
+            "version": "2.4.4",
+            "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.4.4.tgz",
+            "integrity": "sha512-z3UiI2yi1mK0sXeRdc4O1Kk8aOa/e+FNWZcTiPB/dfTWyLypuE99LibgRaQki914Jq//yAWylcAt+mknKdixRQ==",
             "dev": true,
-            "license": "Apache-2.0",
             "optional": true
         },
         "node_modules/bare-path": {
@@ -3542,22 +3523,20 @@
             "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.3.tgz",
             "integrity": "sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==",
             "dev": true,
-            "license": "Apache-2.0",
             "optional": true,
             "dependencies": {
                 "bare-os": "^2.1.0"
             }
         },
         "node_modules/bare-stream": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.2.1.tgz",
-            "integrity": "sha512-YTB47kHwBW9zSG8LD77MIBAAQXjU2WjAkMHeeb7hUplVs6+IoM5I7uEVQNPMB7lj9r8I76UMdoMkGnCodHOLqg==",
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.3.0.tgz",
+            "integrity": "sha512-pVRWciewGUeCyKEuRxwv06M079r+fRjAQjBEK2P6OYGrO43O+Z0LrPZZEjlc4mB6C2RpZ9AxJ1s7NLEtOHO6eA==",
             "dev": true,
-            "license": "Apache-2.0",
             "optional": true,
             "dependencies": {
                 "b4a": "^1.6.6",
-                "streamx": "^2.18.0"
+                "streamx": "^2.20.0"
             }
         },
         "node_modules/base64-js": {
@@ -3578,8 +3557,7 @@
                     "type": "consulting",
                     "url": "https://feross.org/support"
                 }
-            ],
-            "license": "MIT"
+            ]
         },
         "node_modules/base64id": {
             "version": "2.0.0",
@@ -3596,7 +3574,6 @@
             "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.5.tgz",
             "integrity": "sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==",
             "dev": true,
-            "license": "MIT",
             "engines": {
                 "node": ">=10.0.0"
             }
@@ -3900,7 +3877,6 @@
                     "url": "https://feross.org/support"
                 }
             ],
-            "license": "MIT",
             "dependencies": {
                 "base64-js": "^1.3.1",
                 "ieee754": "^1.1.13"
@@ -3911,7 +3887,6 @@
             "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
             "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
             "dev": true,
-            "license": "MIT",
             "engines": {
                 "node": "*"
             }
@@ -4090,7 +4065,6 @@
             "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.6.5.tgz",
             "integrity": "sha512-RuLrmzYrxSb0s9SgpB+QN5jJucPduZQ/9SIe76MDxYJuecPW5mxMdacJ1f4EtgiV+R0p3sCkznTMvH0MPGFqjA==",
             "dev": true,
-            "license": "Apache-2.0",
             "dependencies": {
                 "mitt": "3.0.1",
                 "urlpattern-polyfill": "10.0.0",
@@ -4104,8 +4078,7 @@
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
             "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
-            "dev": true,
-            "license": "MIT"
+            "dev": true
         },
         "node_modules/co": {
             "version": "4.6.0",
@@ -4414,7 +4387,6 @@
             "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz",
             "integrity": "sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==",
             "dev": true,
-            "license": "MIT",
             "engines": {
                 "node": ">= 14"
             }
@@ -4511,7 +4483,6 @@
             "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz",
             "integrity": "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "ast-types": "^0.13.4",
                 "escodegen": "^2.1.0",
@@ -4563,11 +4534,10 @@
             }
         },
         "node_modules/devtools-protocol": {
-            "version": "0.0.1330662",
-            "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1330662.tgz",
-            "integrity": "sha512-pzh6YQ8zZfz3iKlCvgzVCu22NdpZ8hNmwU6WnQjNVquh0A9iVosPtNLWDwaWVGyrntQlltPFztTMK5Cg6lfCuw==",
-            "dev": true,
-            "license": "BSD-3-Clause"
+            "version": "0.0.1342118",
+            "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1342118.tgz",
+            "integrity": "sha512-75fMas7PkYNDTmDyb6PRJCH7ILmHLp+BhrZGeMsa4bCh40DTxgCz2NRy5UDzII4C5KuD0oBMZ9vXKhEl6UD/3w==",
+            "dev": true
         },
         "node_modules/didyoumean": {
             "version": "1.2.2",
@@ -4716,7 +4686,6 @@
             "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
             "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "once": "^1.4.0"
             }
@@ -4945,7 +4914,6 @@
             "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
             "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
             "dev": true,
-            "license": "BSD-2-Clause",
             "dependencies": {
                 "esprima": "^4.0.1",
                 "estraverse": "^5.2.0",
@@ -5120,7 +5088,6 @@
             "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
             "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
             "dev": true,
-            "license": "BSD-2-Clause",
             "bin": {
                 "esparse": "bin/esparse.js",
                 "esvalidate": "bin/esvalidate.js"
@@ -5202,7 +5169,6 @@
             "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
             "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
             "dev": true,
-            "license": "BSD-2-Clause",
             "dependencies": {
                 "debug": "^4.1.1",
                 "get-stream": "^5.1.0",
@@ -5227,8 +5193,7 @@
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
             "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
-            "dev": true,
-            "license": "MIT"
+            "dev": true
         },
         "node_modules/fast-glob": {
             "version": "3.3.2",
@@ -5268,7 +5233,6 @@
             "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
             "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "pend": "~1.2.0"
             }
@@ -5398,7 +5362,6 @@
             "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
             "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "graceful-fs": "^4.2.0",
                 "jsonfile": "^6.0.1",
@@ -5476,7 +5439,6 @@
             "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
             "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "pump": "^3.0.0"
             },
@@ -5492,7 +5454,6 @@
             "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.3.tgz",
             "integrity": "sha512-BzUrJBS9EcUb4cFol8r4W3v1cPsSyajLSthNkz5BxbpDcHN5tIrM10E2eNvfnvBn3DaT3DUgx0OpsBKkaOpanw==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "basic-ftp": "^5.0.2",
                 "data-uri-to-buffer": "^6.0.2",
@@ -5832,8 +5793,7 @@
                     "type": "consulting",
                     "url": "https://feross.org/support"
                 }
-            ],
-            "license": "BSD-3-Clause"
+            ]
         },
         "node_modules/ignore": {
             "version": "5.3.2",
@@ -5919,7 +5879,6 @@
             "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
             "integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "jsbn": "1.1.0",
                 "sprintf-js": "^1.1.3"
@@ -6284,8 +6243,7 @@
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
             "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==",
-            "dev": true,
-            "license": "MIT"
+            "dev": true
         },
         "node_modules/jsdom": {
             "version": "25.0.0",
@@ -6945,7 +6903,6 @@
             "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
             "integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==",
             "dev": true,
-            "license": "MIT",
             "engines": {
                 "node": ">= 0.4.0"
             }
@@ -7139,7 +7096,6 @@
             "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.0.2.tgz",
             "integrity": "sha512-BFi3vZnO9X5Qt6NRz7ZOaPja3ic0PhlsmCRYLOpN11+mWBCR6XJDqW5RF3j8jm4WGGQZtBA+bTfxYzeKW73eHg==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "@tootallnate/quickjs-emscripten": "^0.23.0",
                 "agent-base": "^7.0.2",
@@ -7159,7 +7115,6 @@
             "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.1.tgz",
             "integrity": "sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "degenerator": "^5.0.0",
                 "netmask": "^2.0.2"
@@ -7314,8 +7269,7 @@
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
             "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
-            "dev": true,
-            "license": "MIT"
+            "dev": true
         },
         "node_modules/picocolors": {
             "version": "1.1.0",
@@ -7879,7 +7833,6 @@
             "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
             "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
             "dev": true,
-            "license": "MIT",
             "engines": {
                 "node": ">=0.4.0"
             }
@@ -8106,7 +8059,6 @@
             "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.4.0.tgz",
             "integrity": "sha512-u0piLU+nCOHMgGjRbimiXmA9kM/L9EHh3zL81xCdp7m+Y2pHIsnmbdDoEDoAz5geaonNR6q6+yOPQs6n4T6sBQ==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "agent-base": "^7.0.2",
                 "debug": "^4.3.4",
@@ -8126,7 +8078,6 @@
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
             "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
             "dev": true,
-            "license": "ISC",
             "engines": {
                 "node": ">=12"
             }
@@ -8144,11 +8095,10 @@
             "license": "MIT"
         },
         "node_modules/pump": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-            "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+            "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "end-of-stream": "^1.1.0",
                 "once": "^1.3.1"
@@ -8172,18 +8122,17 @@
             }
         },
         "node_modules/puppeteer": {
-            "version": "23.3.0",
-            "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-23.3.0.tgz",
-            "integrity": "sha512-e2jY8cdWSUGsrLxqGm3hIbJq/UIk1uOY8XY7SM51leXkH7shrIyE91lK90Q9byX6tte+cyL3HKqlWBEd6TjWTA==",
+            "version": "23.4.0",
+            "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-23.4.0.tgz",
+            "integrity": "sha512-FxgFFJI7NAsX8uebiEDSjS86vufz9TaqERQHShQT0lCbSRI3jUPEcz/0HdwLiYvfYNsc1zGjqY3NsGZya4PvUA==",
             "dev": true,
             "hasInstallScript": true,
-            "license": "Apache-2.0",
             "dependencies": {
                 "@puppeteer/browsers": "2.4.0",
                 "chromium-bidi": "0.6.5",
                 "cosmiconfig": "^9.0.0",
-                "devtools-protocol": "0.0.1330662",
-                "puppeteer-core": "23.3.0",
+                "devtools-protocol": "0.0.1342118",
+                "puppeteer-core": "23.4.0",
                 "typed-query-selector": "^2.12.0"
             },
             "bin": {
@@ -8194,16 +8143,15 @@
             }
         },
         "node_modules/puppeteer-core": {
-            "version": "23.3.0",
-            "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-23.3.0.tgz",
-            "integrity": "sha512-sB2SsVMFs4gKad5OCdv6w5vocvtEUrRl0zQqSyRPbo/cj1Ktbarmhxy02Zyb9R9HrssBcJDZbkrvBnbaesPyYg==",
+            "version": "23.4.0",
+            "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-23.4.0.tgz",
+            "integrity": "sha512-fqkIP5FOcb38jfBj/OcBz1wFaI9nk40uQKSORvnXws6wCbep2dg8yxZ3ddJxBIfQsxoiEOvnrykFinUScrB/ew==",
             "dev": true,
-            "license": "Apache-2.0",
             "dependencies": {
                 "@puppeteer/browsers": "2.4.0",
                 "chromium-bidi": "0.6.5",
-                "debug": "^4.3.6",
-                "devtools-protocol": "0.0.1330662",
+                "debug": "^4.3.7",
+                "devtools-protocol": "0.0.1342118",
                 "typed-query-selector": "^2.12.0",
                 "ws": "^8.18.0"
             },
@@ -8255,8 +8203,7 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
             "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==",
-            "dev": true,
-            "license": "MIT"
+            "dev": true
         },
         "node_modules/randombytes": {
             "version": "2.1.0",
@@ -8791,7 +8738,6 @@
             "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
             "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
             "dev": true,
-            "license": "MIT",
             "engines": {
                 "node": ">= 6.0.0",
                 "npm": ">= 3.0.0"
@@ -8889,7 +8835,6 @@
             "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
             "integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "ip-address": "^9.0.5",
                 "smart-buffer": "^4.2.0"
@@ -8904,7 +8849,6 @@
             "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.4.tgz",
             "integrity": "sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "agent-base": "^7.1.1",
                 "debug": "^4.3.4",
@@ -8945,8 +8889,7 @@
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
             "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
-            "dev": true,
-            "license": "BSD-3-Clause"
+            "dev": true
         },
         "node_modules/stackback": {
             "version": "0.0.2",
@@ -8996,11 +8939,10 @@
             "license": "MIT"
         },
         "node_modules/streamx": {
-            "version": "2.20.0",
-            "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.20.0.tgz",
-            "integrity": "sha512-ZGd1LhDeGFucr1CUCTBOS58ZhEendd0ttpGT3usTvosS4ntIwKN9LJFp+OeCSprsCPL14BXVRZlHGRY1V9PVzQ==",
+            "version": "2.20.1",
+            "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.20.1.tgz",
+            "integrity": "sha512-uTa0mU6WUC65iUvzKH4X9hEdvSW7rbPxPtwfWiLMSj3qTdQbAiUboZTxauKfpFuGIGa1C2BYijZ7wgdUXICJhA==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "fast-fifo": "^1.3.2",
                 "queue-tick": "^1.0.1",
@@ -9289,7 +9231,6 @@
             "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
             "integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "pump": "^3.0.0",
                 "tar-stream": "^3.1.5"
@@ -9304,7 +9245,6 @@
             "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
             "integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "b4a": "^1.6.4",
                 "fast-fifo": "^1.2.0",
@@ -9370,11 +9310,10 @@
             "peer": true
         },
         "node_modules/text-decoder": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.1.1.tgz",
-            "integrity": "sha512-8zll7REEv4GDD3x4/0pW+ppIxSNs7H1J10IKFZsuOMscumCdM2a+toDGLPA3T+1+fLBql4zbt5z83GEQGGV5VA==",
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.0.tgz",
+            "integrity": "sha512-n1yg1mOj9DNpk3NeZOx7T6jchTbyJS3i3cucbNN6FcdPriMZx7NsgrGpWWdWZZGxD7ES1XB+3uoqHMgOKaN+fg==",
             "dev": true,
-            "license": "Apache-2.0",
             "dependencies": {
                 "b4a": "^1.6.4"
             }
@@ -9407,8 +9346,7 @@
             "version": "2.3.8",
             "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
             "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
-            "dev": true,
-            "license": "MIT"
+            "dev": true
         },
         "node_modules/tiny-case": {
             "version": "1.0.3",
@@ -9562,8 +9500,7 @@
             "version": "2.7.0",
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
             "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
-            "dev": true,
-            "license": "0BSD"
+            "dev": true
         },
         "node_modules/tsscmp": {
             "version": "1.0.6",
@@ -9613,8 +9550,7 @@
             "version": "2.12.0",
             "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.0.tgz",
             "integrity": "sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==",
-            "dev": true,
-            "license": "MIT"
+            "dev": true
         },
         "node_modules/typescript": {
             "version": "5.6.2",
@@ -9659,7 +9595,6 @@
             "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
             "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "buffer": "^5.2.1",
                 "through": "^2.3.8"
@@ -9742,8 +9677,7 @@
             "version": "10.0.0",
             "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz",
             "integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==",
-            "dev": true,
-            "license": "MIT"
+            "dev": true
         },
         "node_modules/util-deprecate": {
             "version": "1.0.2",
@@ -10408,7 +10342,6 @@
             "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
             "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "buffer-crc32": "~0.2.3",
                 "fd-slicer": "~1.1.0"
@@ -10481,7 +10414,6 @@
             "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
             "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
             "dev": true,
-            "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/colinhacks"
             }
diff --git a/package.json b/package.json
index b2054c84..df461a43 100644
--- a/package.json
+++ b/package.json
@@ -26,13 +26,13 @@
         "prettier": "^3.3.3",
         "prettier-eslint": "^16.3.0",
         "prettier-plugin-tailwindcss": "^0.6.6",
-        "puppeteer": "^23.3.0",
+        "puppeteer": "^23.4.0",
         "tailwind-config-viewer": "^2.0.4",
         "vite": "^5.4.6",
         "vitest": "^2.1.1"
     },
     "dependencies": {
-        "@deck9/ui": "^0.15.0",
+        "@deck9/ui": "^0.15.1",
         "@headlessui/vue": "^1.7.23",
         "@highlightjs/vue-plugin": "^2.1.0",
         "@inertiajs/vue3": "^1.2.0",
@@ -49,8 +49,8 @@
         "@tiptap/vue-3": "^2.7.2",
         "@types/lodash": "^4.17.7",
         "@types/node": "^22.5.5",
-        "@typescript-eslint/eslint-plugin": "^8.5.0",
-        "@typescript-eslint/parser": "^8.5.0",
+        "@typescript-eslint/eslint-plugin": "^8.6.0",
+        "@typescript-eslint/parser": "^8.6.0",
         "@vitejs/plugin-vue": "^5.1.4",
         "@vueuse/core": "^11.1.0",
         "autoprefixer": "^10.4.20",
diff --git a/resources/js/components/Factory/Main/BlockType.vue b/resources/js/components/Factory/Main/BlockType.vue
index 48e3d2f8..06027856 100644
--- a/resources/js/components/Factory/Main/BlockType.vue
+++ b/resources/js/components/Factory/Main/BlockType.vue
@@ -18,22 +18,13 @@
         />
         <D9Input v-model="title" block />
       </div>
-      <div class="mt-4">
-        <D9Label
-          label="Required"
-          description="If you make this block required, it cannot be skipped by the form user."
-        />
-        <div class="mt-1">
-          <D9Switch v-model="isRequired" />
-        </div>
-      </div>
     </AdvancedSettings>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useWorkbench } from "@/stores";
-import { D9Select, D9Label, D9Input, D9Switch } from "@deck9/ui";
+import { D9Select, D9Label, D9Input } from "@deck9/ui";
 import { ref, Ref, watch } from "vue";
 import { useBlockTypes } from "../utils/useBlockTypes";
 import AdvancedSettings from "@/components/AdvancedSettings.vue";
@@ -59,13 +50,11 @@ watch(selected, (newValue) => {
 });
 
 const title = ref(workbench.block?.title || "");
-const isRequired = ref(workbench.block?.is_required || false);
 
-watch([title, isRequired], (newValue) => {
+watch([title], (newValue) => {
   if (newValue) {
     workbench.updateBlock({
       title: newValue[0],
-      is_required: newValue[1],
     });
   }
 });
diff --git a/resources/js/components/Factory/Sidebar/Block.vue b/resources/js/components/Factory/Sidebar/Block.vue
index 117dde16..7bd0a692 100644
--- a/resources/js/components/Factory/Sidebar/Block.vue
+++ b/resources/js/components/Factory/Sidebar/Block.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="relative pb-6 text-sm">
     <InsertAfterButton v-bind="{ block }" />
+
     <button
       class="group relative block w-full cursor-pointer overflow-visible rounded-md p-4 text-left"
       :class="[cardStyle, { 'opacity-50': block.is_disabled }]"
@@ -54,13 +55,55 @@
         :key="interaction.id"
       />
 
-      <div class="flex space-x-1">
-        <div class="mt-2" v-if="block.is_disabled">
-          <Label color="grey">disabled</Label>
-        </div>
-        <div class="mt-2" v-if="block.is_required">
-          <Label color="red">required</Label>
-        </div>
+      <!-- Block Status -->
+      <div class="flex space-x-1 mt-4">
+        <button
+          class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
+          :class="[
+            block.has_logic
+              ? 'bg-blue-100 outline-blue-200'
+              : 'bg-grey-100 outline-grey-200',
+          ]"
+        >
+          <D9Icon name="code-branch" size="sm" />
+          <span>Block Logic</span>
+        </button>
+        <button
+          class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
+          :class="[
+            block.is_required
+              ? 'bg-red-100 outline-red-200'
+              : 'bg-grey-100 outline-grey-200',
+          ]"
+          @click="toggleRequired()"
+        >
+          <template v-if="block.is_required">
+            <D9Icon name="asterisk" size="sm" />
+            <span>Required</span>
+          </template>
+          <template v-else>
+            <D9Icon name="question" size="sm" />
+            <span>Optional</span>
+          </template>
+        </button>
+        <button
+          class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
+          :class="[
+            block.is_disabled
+              ? 'bg-grey-100 outline-grey-200'
+              : 'bg-green-50 outline-green-100',
+          ]"
+          @click="disableBlock()"
+        >
+          <template v-if="block.is_disabled">
+            <D9Icon name="circle-dot" size="sm" />
+            <span>Disabled</span>
+          </template>
+          <template v-else>
+            <D9Icon name="circle-check" size="sm" />
+            <span>Enabled</span>
+          </template>
+        </button>
       </div>
     </button>
   </div>
@@ -71,9 +114,8 @@ import { computed, provide } from "vue";
 import ConsentBlockMessage from "./ConsentBlockMessage.vue";
 import DefaultBlockMessage from "./DefaultBlockMessage.vue";
 import BlockInteraction from "./BlockInteraction.vue";
-import Label from "@/components/Label.vue";
 import { useWorkbench, useForm } from "@/stores";
-import { D9Menu, D9MenuLink } from "@deck9/ui";
+import { D9Menu, D9MenuLink, D9Icon } from "@deck9/ui";
 import copy from "copy-text-to-clipboard";
 import useActiveInteractions from "../Shared/useActiveInteractions";
 import { useActiveCard } from "@/utils/useActiveCard";
@@ -114,7 +156,19 @@ const deleteBlock = () => {
 };
 
 const disableBlock = () => {
-  store.disableFormBlock(props.block, !props.block.is_disabled);
+  store.updateFormBlockProperty(
+    props.block,
+    "is_disabled",
+    !props.block.is_disabled,
+  );
+};
+
+const toggleRequired = () => {
+  store.updateFormBlockProperty(
+    props.block,
+    "is_required",
+    !props.block.is_required,
+  );
 };
 
 const copyId = () => {
diff --git a/resources/js/stores/form.ts b/resources/js/stores/form.ts
index f3b45163..ce541e92 100644
--- a/resources/js/stores/form.ts
+++ b/resources/js/stores/form.ts
@@ -281,7 +281,11 @@ export const useForm = defineStore("form", {
             }
         },
 
-        async disableFormBlock(block: FormBlockModel, newValue: boolean) {
+        async updateFormBlockProperty(
+            block: FormBlockModel,
+            property: string,
+            newValue: boolean,
+        ) {
             if (!this.form) {
                 return;
             }
@@ -289,12 +293,12 @@ export const useForm = defineStore("form", {
             try {
                 const response = await callUpdateFormBlock({
                     ...block,
-                    is_disabled: newValue,
+                    [property]: newValue,
                 });
 
-                const index = this.blocks?.findIndex((item) => {
-                    return item.id === block.id;
-                });
+                const index = this.blocks?.findIndex(
+                    (item) => item.id === block.id,
+                );
 
                 if (
                     response.status === 200 &&

From e12687dcc7dc663e142c622934290ff17effd9cc Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Mon, 23 Sep 2024 09:07:59 +0200
Subject: [PATCH 02/43] wip logic

---
 .../js/components/Factory/Sidebar/Block.vue   |   8 +-
 .../Factory/Sidebar/BlockLogicEdit.vue        | 100 ++++++++++++++++++
 .../components/Factory/Sidebar/Storyboard.vue |   2 +
 resources/js/stores/index.ts                  |   1 +
 resources/js/stores/logic.ts                  |  27 +++++
 5 files changed, 137 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
 create mode 100644 resources/js/stores/logic.ts

diff --git a/resources/js/components/Factory/Sidebar/Block.vue b/resources/js/components/Factory/Sidebar/Block.vue
index 7bd0a692..3c3af740 100644
--- a/resources/js/components/Factory/Sidebar/Block.vue
+++ b/resources/js/components/Factory/Sidebar/Block.vue
@@ -64,6 +64,7 @@
               ? 'bg-blue-100 outline-blue-200'
               : 'bg-grey-100 outline-grey-200',
           ]"
+          @click="showLogicEditor"
         >
           <D9Icon name="code-branch" size="sm" />
           <span>Block Logic</span>
@@ -114,7 +115,7 @@ import { computed, provide } from "vue";
 import ConsentBlockMessage from "./ConsentBlockMessage.vue";
 import DefaultBlockMessage from "./DefaultBlockMessage.vue";
 import BlockInteraction from "./BlockInteraction.vue";
-import { useWorkbench, useForm } from "@/stores";
+import { useWorkbench, useForm, useLogic } from "@/stores";
 import { D9Menu, D9MenuLink, D9Icon } from "@deck9/ui";
 import copy from "copy-text-to-clipboard";
 import useActiveInteractions from "../Shared/useActiveInteractions";
@@ -124,6 +125,7 @@ import { storeToRefs } from "pinia";
 
 const workbench = useWorkbench();
 const store = useForm();
+const logicStore = useLogic();
 
 const { showBlockMenus } = storeToRefs(store);
 
@@ -171,6 +173,10 @@ const toggleRequired = () => {
   );
 };
 
+const showLogicEditor = () => {
+  logicStore.showLogicEditor(props.block);
+};
+
 const copyId = () => {
   copy(props.block.uuid);
 };
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
new file mode 100644
index 00000000..c2dec00b
--- /dev/null
+++ b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
@@ -0,0 +1,100 @@
+<template>
+  <TransitionRoot as="template" :show="isShowingLogicEditor">
+    <Dialog as="div" class="relative z-10" @close="close">
+      <div class="fixed inset-0 bg-grey-900/25" />
+
+      <div class="fixed inset-0 overflow-hidden">
+        <div
+          class="pointer-events-none fixed inset-y-0 left-0 flex max-w-full pr-10"
+        >
+          <TransitionChild
+            as="template"
+            enter="transform transition ease-out duration-200 sm:duration-400 will-change-transform"
+            enter-from="-translate-x-full"
+            enter-to="translate-x-0"
+            leave="transform transition ease-in duration-200 sm:duration-300 will-change-transform"
+            leave-from="translate-x-0"
+            leave-to="-translate-x-full"
+          >
+            <DialogPanel class="pointer-events-auto w-screen max-w-lg">
+              <form
+                class="flex h-full flex-col divide-y divide-grey-200 bg-white shadow-xl"
+              >
+                <div
+                  class="flex min-h-0 flex-1 flex-col overflow-y-scroll py-6"
+                >
+                  <div class="px-4 sm:px-6">
+                    <div class="flex items-start justify-between">
+                      <DialogTitle
+                        class="text-base font-semibold leading-6 text-grey-900"
+                      >
+                        Block Logic
+                      </DialogTitle>
+                      <div class="ml-3 flex h-7 items-center">
+                        <button
+                          type="button"
+                          class="rounded-md bg-white px-2 text-grey-400 hover:text-grey-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                          @click="close"
+                        >
+                          <span class="sr-only">Close panel</span>
+                          <D9Icon name="close" aria-hidden="true" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="relative mt-6 flex-1 px-4 sm:px-6">
+                    <p>This is the block logic editor.</p>
+                    <pre class="bg-black text-white p-4 rounded text-xxs">{{
+                      store.block
+                    }}</pre>
+                  </div>
+                </div>
+                <div
+                  class="flex flex-shrink-0 justify-end px-4 py-4"
+                  :class="{ 'pointer-events-none opacity-50': isSaving }"
+                >
+                  <D9Button
+                    label="Cancel"
+                    type="button"
+                    @click="close"
+                    color="light"
+                  />
+                  <D9Button
+                    label="Save"
+                    type="submit"
+                    class="ml-4"
+                    :is-loading="isSaving"
+                  />
+                </div>
+              </form>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { /* D9Label, D9Input, D9Select, */ D9Button, D9Icon } from "@deck9/ui";
+
+import { useLogic } from "@/stores";
+import { storeToRefs } from "pinia";
+
+const store = useLogic();
+const isSaving = ref(false);
+
+const { isShowingLogicEditor } = storeToRefs(store);
+
+const close = () => {
+  store.hideLogicEditor();
+};
+</script>
diff --git a/resources/js/components/Factory/Sidebar/Storyboard.vue b/resources/js/components/Factory/Sidebar/Storyboard.vue
index 80b7e9bd..902b1e3b 100644
--- a/resources/js/components/Factory/Sidebar/Storyboard.vue
+++ b/resources/js/components/Factory/Sidebar/Storyboard.vue
@@ -64,6 +64,7 @@
       />
     </div>
   </div>
+  <BlockLogicEdit />
 </template>
 
 <script setup lang="ts">
@@ -75,6 +76,7 @@ import BlockContainer from "./BlockContainer.vue";
 import EmptyState from "@/components/EmptyState.vue";
 import ScrollShadow from "@/components/ScrollShadow.vue";
 import _throttle from "lodash/throttle";
+import BlockLogicEdit from "@/components/Factory/Sidebar/BlockLogicEdit.vue";
 
 const isLoaded = ref(false);
 const store = useForm();
diff --git a/resources/js/stores/index.ts b/resources/js/stores/index.ts
index 4a7b5ac7..80bd615d 100644
--- a/resources/js/stores/index.ts
+++ b/resources/js/stores/index.ts
@@ -1,2 +1,3 @@
 export * from "./form";
 export * from "./workbench";
+export * from "./logic";
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
new file mode 100644
index 00000000..cdbc39b3
--- /dev/null
+++ b/resources/js/stores/logic.ts
@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+
+interface LogicStore {
+    block: FormBlockModel | null;
+    isShowingLogicEditor: boolean;
+}
+
+export const useLogic = defineStore("logic", {
+    state: (): LogicStore => {
+        return {
+            block: null,
+            isShowingLogicEditor: false,
+        };
+    },
+
+    actions: {
+        showLogicEditor(block: FormBlockModel) {
+            this.block = block;
+            this.isShowingLogicEditor = true;
+        },
+
+        hideLogicEditor() {
+            this.block = null;
+            this.isShowingLogicEditor = false;
+        },
+    },
+});

From 0d72fd0eeb5b48eca3528cbacf671dee2744a69b Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 26 Sep 2024 20:03:39 +0200
Subject: [PATCH 03/43] wip

---
 package-lock.json                             |   9 +-
 package.json                                  |   2 +-
 .../Factory/Sidebar/BlockHideLogic.vue        | 169 ++++++++++++++++++
 .../Factory/Sidebar/BlockLogicEdit.vue        |  16 +-
 resources/js/stores/form.ts                   |  22 +++
 resources/js/stores/logic.ts                  |  38 ++++
 resources/js/types/models.d.ts                |   5 +
 resources/js/utils/index.ts                   |   8 +
 8 files changed, 252 insertions(+), 17 deletions(-)
 create mode 100644 resources/js/components/Factory/Sidebar/BlockHideLogic.vue

diff --git a/package-lock.json b/package-lock.json
index 29f2ed39..9666cd31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
             "version": "2.0.1",
             "license": "GNU Affero General Public License v3.0",
             "dependencies": {
-                "@deck9/ui": "^0.15.1",
+                "@deck9/ui": "^0.15.3",
                 "@headlessui/vue": "^1.7.23",
                 "@highlightjs/vue-plugin": "^2.1.0",
                 "@inertiajs/vue3": "^1.2.0",
@@ -318,9 +318,10 @@
             }
         },
         "node_modules/@deck9/ui": {
-            "version": "0.15.1",
-            "resolved": "https://registry.npmjs.org/@deck9/ui/-/ui-0.15.1.tgz",
-            "integrity": "sha512-UnJO4l+BTsj/gj7RvBmA57BP8u/AA973bh9A3dMPvBM8A75ISTnWCPes9C5IYh8ZaiohSCbx4dMameZliEsRgQ==",
+            "version": "0.15.3",
+            "resolved": "https://registry.npmjs.org/@deck9/ui/-/ui-0.15.3.tgz",
+            "integrity": "sha512-8iyHy/Ht9lmq1+LfNHgobEpzZOLkdq7jPQYDLBZqeAOuCAWckkVHhjPwKYsgffVhssMmHUs1CArzLLAHJk7xwQ==",
+            "license": "MIT",
             "dependencies": {
                 "@deck9/tailwindcss-recursive-font-helper": "^1.0.1",
                 "@floating-ui/vue": "^1.0.4",
diff --git a/package.json b/package.json
index df461a43..3357fd63 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
         "vitest": "^2.1.1"
     },
     "dependencies": {
-        "@deck9/ui": "^0.15.1",
+        "@deck9/ui": "^0.15.3",
         "@headlessui/vue": "^1.7.23",
         "@highlightjs/vue-plugin": "^2.1.0",
         "@inertiajs/vue3": "^1.2.0",
diff --git a/resources/js/components/Factory/Sidebar/BlockHideLogic.vue b/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
new file mode 100644
index 00000000..0e0b8082
--- /dev/null
+++ b/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <D9Label
+      label="Hide Block"
+      description="Hide this block based on one or more conditions"
+    />
+
+    <div v-for="(condition, index) in conditions" :key="index" class="mt-2">
+      <div
+        class="flex justify-between font-mono uppercase text-xs tracking-widest text-blue-700"
+      >
+        <span
+          v-if="index === 0"
+          class="font-mono uppercase text-xs tracking-widest text-blue-700"
+          >When</span
+        >
+        <div
+          class="font-mono uppercase text-xs tracking-widest text-blue-700"
+          v-else
+        >
+          <input
+            v-model="condition.chainOperator"
+            :id="'chain-operator-and-' + index"
+            type="radio"
+            class="uppercase appearance-none peer/and hidden"
+            :name="'chain-operator-' + index"
+            value="and"
+          />
+          <label
+            class="cursor-pointer text-grey-300 peer-checked/and:text-blue-700 peer-checked/and:font-bold"
+            :for="'chain-operator-and-' + index"
+            >AND</label
+          >
+          <span>/</span>
+          <input
+            v-model="condition.chainOperator"
+            :id="'chain-operator-or-' + index"
+            type="radio"
+            class="uppercase appearance-none hidden peer/or"
+            :name="'chain-operator-' + index"
+            value="or"
+          />
+          <label
+            class="cursor-pointer text-grey-300 peer-checked/or:text-blue-700 peer-checked/or:font-bold"
+            :for="'chain-operator-or-' + index"
+            >OR</label
+          >
+        </div>
+        <button
+          type="button"
+          class="text-xs font-mono tracking-normal text-red-500"
+          @click="removeCondition(index)"
+        >
+          Remove
+        </button>
+      </div>
+      <D9Select
+        placeholder="Select a block"
+        v-model="condition.source"
+        size="small"
+        :options="availableSourceBlocks"
+      />
+
+      <div class="flex items-center space-x-2 mt-1">
+        <D9Select
+          class="w-64"
+          placeholder="Select an operator"
+          v-model="condition.operator"
+          size="small"
+          :options="operators"
+        />
+        <D9Input
+          class="w-full"
+          v-model="condition.value"
+          placeholer="Enter a value"
+          size="small"
+          block
+        />
+      </div>
+    </div>
+
+    <div class="mt-1">
+      <button
+        v-if="hasConditions"
+        type="button"
+        class="text-sm underline"
+        @click="addCondition"
+      >
+        Add another condition
+      </button>
+      <D9Button
+        v-else
+        label="Add condition"
+        color="dark"
+        size="small"
+        @click="addCondition"
+      />
+    </div>
+
+    <pre class="text-xxs bg-black text-white p-2 rounded mt-4">{{
+      conditions
+    }}</pre>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { D9Label, D9Input, D9Select, D9Button } from "@deck9/ui";
+import { computed, Ref, ref } from "vue";
+import { useLogic } from "@/stores";
+import { getTextFromHtml } from "@/utils";
+
+const logicStore = useLogic();
+
+type Operator =
+  | "equals"
+  | "equalsNot"
+  | "contains"
+  | "containsNot"
+  | "isLowerThan"
+  | "isGreaterThan";
+
+const operators: Array<{ key: Operator; label: string }> = [
+  { key: "equals", label: "is equal to" },
+  { key: "equalsNot", label: "is not equal to" },
+  { key: "contains", label: "contains" },
+  { key: "containsNot", label: "does not contain" },
+  { key: "isLowerThan", label: "is lower than" },
+  { key: "isGreaterThan", label: "is greater than" },
+];
+
+const conditions: Ref<
+  Array<{
+    source?: { key: FormBlockModel["uuid"] };
+    operator: { key: Operator };
+    value: string;
+    chainOperator: "or" | "and";
+  }>
+> = ref([]);
+
+const addCondition = () => {
+  conditions.value.push({
+    source: undefined,
+    operator: operators[0],
+    value: "",
+    chainOperator: "and",
+  });
+};
+
+const removeCondition = (index: number) => {
+  conditions.value.splice(index, 1);
+};
+
+const hasConditions = computed(() => {
+  return conditions.value.length > 0; // TODO: check if all conditions are valid
+});
+
+const availableSourceBlocks = computed(() => {
+  return logicStore.availableSourceBlocks
+    .filter((block) => block.type !== "group")
+    .map((block) => {
+      const text = getTextFromHtml(block.message ?? "");
+
+      return {
+        key: block.uuid,
+        label: `<span class="bg-grey-900 text-white rounded mr-2 px-1 py-px">${block.title ?? block.uuid}</span><span class="truncate">${text}</span>`,
+      };
+    });
+});
+</script>
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
index c2dec00b..a293d78e 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
@@ -16,7 +16,7 @@
             leave-from="translate-x-0"
             leave-to="-translate-x-full"
           >
-            <DialogPanel class="pointer-events-auto w-screen max-w-lg">
+            <DialogPanel class="pointer-events-auto w-screen max-w-xl">
               <form
                 class="flex h-full flex-col divide-y divide-grey-200 bg-white shadow-xl"
               >
@@ -43,10 +43,7 @@
                     </div>
                   </div>
                   <div class="relative mt-6 flex-1 px-4 sm:px-6">
-                    <p>This is the block logic editor.</p>
-                    <pre class="bg-black text-white p-4 rounded text-xxs">{{
-                      store.block
-                    }}</pre>
+                    <BlockHideLogic />
                   </div>
                 </div>
                 <div
@@ -54,13 +51,7 @@
                   :class="{ 'pointer-events-none opacity-50': isSaving }"
                 >
                   <D9Button
-                    label="Cancel"
-                    type="button"
-                    @click="close"
-                    color="light"
-                  />
-                  <D9Button
-                    label="Save"
+                    label="Close"
                     type="submit"
                     class="ml-4"
                     :is-loading="isSaving"
@@ -84,6 +75,7 @@ import {
   TransitionChild,
   TransitionRoot,
 } from "@headlessui/vue";
+import BlockHideLogic from "./BlockHideLogic.vue";
 import { /* D9Label, D9Input, D9Select, */ D9Button, D9Icon } from "@deck9/ui";
 
 import { useLogic } from "@/stores";
diff --git a/resources/js/stores/form.ts b/resources/js/stores/form.ts
index ce541e92..c078b020 100644
--- a/resources/js/stores/form.ts
+++ b/resources/js/stores/form.ts
@@ -81,6 +81,28 @@ export const useForm = defineStore("form", {
         showBlockMenus: (state): boolean => {
             return state.isBlockMenuEnabled;
         },
+
+        blocksTree: (state): TreeNode[] => {
+            const tree: TreeNode[] = [];
+            const map: Record<string, TreeNode> = {};
+
+            state.blocks?.forEach((block) => {
+                map[block.uuid] = { block, children: [] };
+            });
+
+            state.blocks?.forEach((block) => {
+                if (block.parent_block) {
+                    const parent = map[block.parent_block];
+                    if (parent) {
+                        parent.children.push(map[block.uuid]);
+                    }
+                } else {
+                    tree.push(map[block.uuid]);
+                }
+            });
+
+            return tree;
+        },
     },
 
     actions: {
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index cdbc39b3..d39576a9 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -1,3 +1,4 @@
+import { useForm } from "@/stores";
 import { defineStore } from "pinia";
 
 interface LogicStore {
@@ -24,4 +25,41 @@ export const useLogic = defineStore("logic", {
             this.isShowingLogicEditor = false;
         },
     },
+
+    getters: {
+        availableSourceBlocks(state): Array<FormBlockModel> {
+            const formStore = useForm();
+
+            const result: FormBlockModel[] = [];
+            let found = false;
+
+            const traverse = (node: TreeNode) => {
+                if (found) return;
+
+                result.push(node.block);
+
+                if (node.block.uuid === state.block?.uuid) {
+                    found = true;
+                    return;
+                }
+
+                for (const child of node.children) {
+                    traverse(child);
+                    if (found) break;
+                }
+            };
+
+            for (const rootNode of formStore.blocksTree) {
+                traverse(rootNode);
+                if (found) break;
+            }
+
+            // Remove the last element (the found block) from the result
+            if (found) {
+                result.pop();
+            }
+
+            return result;
+        },
+    },
 });
diff --git a/resources/js/types/models.d.ts b/resources/js/types/models.d.ts
index 58d7133f..24a9bab4 100644
--- a/resources/js/types/models.d.ts
+++ b/resources/js/types/models.d.ts
@@ -64,6 +64,11 @@ interface FormWebhookModel extends BaseModel {
     headers: Record<string, string> | null;
 }
 
+interface TreeNode {
+    block: FormBlockModel;
+    children: TreeNode[];
+}
+
 interface FormBlockModel extends BaseModel {
     type: FormBlockType;
     message: string | null;
diff --git a/resources/js/utils/index.ts b/resources/js/utils/index.ts
index 8436df2d..e4b70f61 100644
--- a/resources/js/utils/index.ts
+++ b/resources/js/utils/index.ts
@@ -67,3 +67,11 @@ export function replaceRouteQuery(query: Record<string, any>): void {
 
     window.history.replaceState(historyState, "", url.toString());
 }
+
+export function getTextFromHtml(html: string): string {
+    const div = document.createElement("div");
+    div.innerHTML = html;
+    const text = div.textContent || div.innerText || "";
+
+    return text;
+}

From 7e0d4dafb9ee539b90ab71f1f80721359a9abacc Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 3 Oct 2024 00:18:24 +0200
Subject: [PATCH 04/43] wip

---
 .../Factory/Sidebar/BlockHideLogic.vue        | 166 +++++++++---------
 .../Factory/Sidebar/BlockLogicEdit.vue        |  20 ++-
 resources/js/stores/logic.ts                  |   4 +
 3 files changed, 107 insertions(+), 83 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/BlockHideLogic.vue b/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
index 0e0b8082..73172de3 100644
--- a/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
+++ b/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
@@ -5,101 +5,103 @@
       description="Hide this block based on one or more conditions"
     />
 
-    <div v-for="(condition, index) in conditions" :key="index" class="mt-2">
-      <div
-        class="flex justify-between font-mono uppercase text-xs tracking-widest text-blue-700"
-      >
-        <span
-          v-if="index === 0"
-          class="font-mono uppercase text-xs tracking-widest text-blue-700"
-          >When</span
-        >
+    <template v-if="availableSourceBlocks.length > 0">
+      <div v-for="(condition, index) in conditions" :key="index" class="mt-2">
         <div
-          class="font-mono uppercase text-xs tracking-widest text-blue-700"
-          v-else
+          class="flex justify-between font-mono uppercase text-xs tracking-widest text-blue-700"
         >
-          <input
-            v-model="condition.chainOperator"
-            :id="'chain-operator-and-' + index"
-            type="radio"
-            class="uppercase appearance-none peer/and hidden"
-            :name="'chain-operator-' + index"
-            value="and"
-          />
-          <label
-            class="cursor-pointer text-grey-300 peer-checked/and:text-blue-700 peer-checked/and:font-bold"
-            :for="'chain-operator-and-' + index"
-            >AND</label
+          <span
+            v-if="index === 0"
+            class="font-mono uppercase text-xs tracking-widest text-blue-700"
+            >When</span
           >
-          <span>/</span>
-          <input
-            v-model="condition.chainOperator"
-            :id="'chain-operator-or-' + index"
-            type="radio"
-            class="uppercase appearance-none hidden peer/or"
-            :name="'chain-operator-' + index"
-            value="or"
-          />
-          <label
-            class="cursor-pointer text-grey-300 peer-checked/or:text-blue-700 peer-checked/or:font-bold"
-            :for="'chain-operator-or-' + index"
-            >OR</label
+          <div
+            class="font-mono uppercase text-xs tracking-widest text-blue-700"
+            v-else
+          >
+            <input
+              v-model="condition.chainOperator"
+              :id="'chain-operator-and-' + index"
+              type="radio"
+              class="uppercase appearance-none peer/and hidden"
+              :name="'chain-operator-' + index"
+              value="and"
+            />
+            <label
+              class="cursor-pointer text-grey-300 peer-checked/and:text-blue-700 peer-checked/and:font-bold"
+              :for="'chain-operator-and-' + index"
+              >AND</label
+            >
+            <span>/</span>
+            <input
+              v-model="condition.chainOperator"
+              :id="'chain-operator-or-' + index"
+              type="radio"
+              class="uppercase appearance-none hidden peer/or"
+              :name="'chain-operator-' + index"
+              value="or"
+            />
+            <label
+              class="cursor-pointer text-grey-300 peer-checked/or:text-blue-700 peer-checked/or:font-bold"
+              :for="'chain-operator-or-' + index"
+              >OR</label
+            >
+          </div>
+          <button
+            type="button"
+            class="text-xs font-mono tracking-normal text-red-500"
+            @click="removeCondition(index)"
           >
+            Remove
+          </button>
         </div>
+        <D9Select
+          placeholder="Select a block"
+          v-model="condition.source"
+          size="small"
+          :options="availableSourceBlocks"
+        />
+
+        <div class="flex items-center space-x-2 mt-1">
+          <D9Select
+            class="w-64"
+            placeholder="Select an operator"
+            v-model="condition.operator"
+            size="small"
+            :options="operators"
+          />
+          <D9Input
+            class="w-full"
+            v-model="condition.value"
+            placeholer="Enter a value"
+            size="small"
+            block
+          />
+        </div>
+      </div>
+
+      <div class="mt-1">
         <button
+          v-if="hasConditions"
           type="button"
-          class="text-xs font-mono tracking-normal text-red-500"
-          @click="removeCondition(index)"
+          class="text-sm underline"
+          @click="addCondition"
         >
-          Remove
+          Add another condition
         </button>
-      </div>
-      <D9Select
-        placeholder="Select a block"
-        v-model="condition.source"
-        size="small"
-        :options="availableSourceBlocks"
-      />
-
-      <div class="flex items-center space-x-2 mt-1">
-        <D9Select
-          class="w-64"
-          placeholder="Select an operator"
-          v-model="condition.operator"
-          size="small"
-          :options="operators"
-        />
-        <D9Input
-          class="w-full"
-          v-model="condition.value"
-          placeholer="Enter a value"
+        <D9Button
+          v-else
+          label="Add condition"
+          color="dark"
           size="small"
-          block
+          @click="addCondition"
         />
       </div>
-    </div>
-
-    <div class="mt-1">
-      <button
-        v-if="hasConditions"
-        type="button"
-        class="text-sm underline"
-        @click="addCondition"
-      >
-        Add another condition
-      </button>
-      <D9Button
-        v-else
-        label="Add condition"
-        color="dark"
-        size="small"
-        @click="addCondition"
-      />
-    </div>
 
-    <pre class="text-xxs bg-black text-white p-2 rounded mt-4">{{
-      conditions
-    }}</pre>
+      <pre class="text-xxs bg-black text-white p-2 rounded mt-4">{{
+        conditions
+      }}</pre>
+    </template>
   </div>
 </template>
 
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
index a293d78e..cd945706 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
@@ -19,6 +19,7 @@
             <DialogPanel class="pointer-events-auto w-screen max-w-xl">
               <form
                 class="flex h-full flex-col divide-y divide-grey-200 bg-white shadow-xl"
+                @submit.prevent="saveBlockLogic"
               >
                 <div
                   class="flex min-h-0 flex-1 flex-col overflow-y-scroll py-6"
@@ -51,7 +52,13 @@
                   :class="{ 'pointer-events-none opacity-50': isSaving }"
                 >
                   <D9Button
-                    label="Close"
+                    label="Cancel"
+                    type="button"
+                    @click="close"
+                    color="light"
+                  />
+                  <D9Button
+                    label="Save"
                     type="submit"
                     class="ml-4"
                     :is-loading="isSaving"
@@ -86,6 +93,17 @@ const isSaving = ref(false);
 
 const { isShowingLogicEditor } = storeToRefs(store);
 
+const saveBlockLogic = () => {
+  isSaving.value = true;
+
+  store.saveBlockLogic();
+
+  setTimeout(() => {
+    isSaving.value = false;
+    store.hideLogicEditor();
+  }, 2000);
+};
+
 const close = () => {
   store.hideLogicEditor();
 };
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index d39576a9..a7f4a255 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -24,6 +24,10 @@ export const useLogic = defineStore("logic", {
             this.block = null;
             this.isShowingLogicEditor = false;
         },
+
+        saveBlockLogic() {
+            console.log("save block logic");
+        },
     },
 
     getters: {

From 16bdf52727f68b962213c109f4e0bcca2cde330c Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 4 Oct 2024 14:24:52 +0200
Subject: [PATCH 05/43] wip

---
 .../Factory/Sidebar/BlockHideLogic.vue        | 27 +++++++------------
 .../Factory/Sidebar/BlockLogicEdit.vue        |  5 ++--
 resources/js/stores/logic.ts                  | 23 +++++++++++++++-
 resources/js/types/models.d.ts                | 24 +++++++++++++++++
 4 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/BlockHideLogic.vue b/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
index 73172de3..4ae6cc10 100644
--- a/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
+++ b/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
@@ -107,20 +107,12 @@
 
 <script lang="ts" setup>
 import { D9Label, D9Input, D9Select, D9Button } from "@deck9/ui";
-import { computed, Ref, ref } from "vue";
+import { computed, Ref, ref, watch, watchEffect } from "vue";
 import { useLogic } from "@/stores";
 import { getTextFromHtml } from "@/utils";
 
 const logicStore = useLogic();
 
-type Operator =
-  | "equals"
-  | "equalsNot"
-  | "contains"
-  | "containsNot"
-  | "isLowerThan"
-  | "isGreaterThan";
-
 const operators: Array<{ key: Operator; label: string }> = [
   { key: "equals", label: "is equal to" },
   { key: "equalsNot", label: "is not equal to" },
@@ -130,14 +122,7 @@ const operators: Array<{ key: Operator; label: string }> = [
   { key: "isGreaterThan", label: "is greater than" },
 ];
 
-const conditions: Ref<
-  Array<{
-    source?: { key: FormBlockModel["uuid"] };
-    operator: { key: Operator };
-    value: string;
-    chainOperator: "or" | "and";
-  }>
-> = ref([]);
+const conditions: Ref<Array<FormBlockCondition>> = ref([]);
 
 const addCondition = () => {
   conditions.value.push({
@@ -168,4 +153,12 @@ const availableSourceBlocks = computed(() => {
       };
     });
 });
+
+watch(
+  conditions,
+  () => {
+    logicStore.updateHideRule(conditions.value);
+  },
+  { deep: true },
+);
 </script>
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
index cd945706..69bc1363 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
@@ -100,8 +100,9 @@ const saveBlockLogic = () => {
 
   setTimeout(() => {
     isSaving.value = false;
-    store.hideLogicEditor();
-  }, 2000);
+    // TODO hide when saving is done
+    // store.hideLogicEditor();
+  }, 250);
 };
 
 const close = () => {
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index a7f4a255..9387c492 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -4,6 +4,7 @@ import { defineStore } from "pinia";
 interface LogicStore {
     block: FormBlockModel | null;
     isShowingLogicEditor: boolean;
+    hideRule: FormBlockRule | null;
 }
 
 export const useLogic = defineStore("logic", {
@@ -11,6 +12,7 @@ export const useLogic = defineStore("logic", {
         return {
             block: null,
             isShowingLogicEditor: false,
+            hideRule: null,
         };
     },
 
@@ -26,7 +28,26 @@ export const useLogic = defineStore("logic", {
         },
 
         saveBlockLogic() {
-            console.log("save block logic");
+            console.log("save rules", [this.hideRule]);
+        },
+
+        updateHideRule(conditions: Array<FormBlockCondition>) {
+            if (!this.block) {
+                return;
+            }
+
+            if (!this.hideRule) {
+                this.hideRule = {
+                    form_block_id: this.block?.id,
+                    name: "Hide block",
+                    conditions,
+                    action: "hide",
+                    actionPayload: null,
+                    evaluate: "before",
+                };
+            } else {
+                this.hideRule.conditions = conditions;
+            }
         },
     },
 
diff --git a/resources/js/types/models.d.ts b/resources/js/types/models.d.ts
index 24a9bab4..dec5abf7 100644
--- a/resources/js/types/models.d.ts
+++ b/resources/js/types/models.d.ts
@@ -69,6 +69,30 @@ interface TreeNode {
     children: TreeNode[];
 }
 
+type Operator =
+    | "equals"
+    | "equalsNot"
+    | "contains"
+    | "containsNot"
+    | "isLowerThan"
+    | "isGreaterThan";
+
+interface FormBlockCondition {
+    source?: { key: FormBlockModel["uuid"] };
+    operator: { key: Operator };
+    value: string;
+    chainOperator: "or" | "and";
+}
+
+interface FormBlockRule {
+    form_block_id: number;
+    name: string;
+    conditions: Array<FormBlockCondition>;
+    action: "show" | "hide" | "goto";
+    actionPayload: string | null;
+    evaluate: "before" | "after";
+}
+
 interface FormBlockModel extends BaseModel {
     type: FormBlockType;
     message: string | null;

From d8949860bf3301b8540ba91975a7ff6c12e677ca Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 4 Oct 2024 14:47:27 +0200
Subject: [PATCH 06/43] fix linter

---
 .../js/components/Factory/Sidebar/BlockHideLogic.vue      | 2 +-
 resources/js/components/Factory/Sidebar/Group.vue         | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/BlockHideLogic.vue b/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
index 4ae6cc10..84b74ddb 100644
--- a/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
+++ b/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
@@ -107,7 +107,7 @@
 
 <script lang="ts" setup>
 import { D9Label, D9Input, D9Select, D9Button } from "@deck9/ui";
-import { computed, Ref, ref, watch, watchEffect } from "vue";
+import { computed, Ref, ref, watch } from "vue";
 import { useLogic } from "@/stores";
 import { getTextFromHtml } from "@/utils";
 
diff --git a/resources/js/components/Factory/Sidebar/Group.vue b/resources/js/components/Factory/Sidebar/Group.vue
index db32009e..5594c078 100644
--- a/resources/js/components/Factory/Sidebar/Group.vue
+++ b/resources/js/components/Factory/Sidebar/Group.vue
@@ -110,7 +110,7 @@ const groupCount = computed(() => {
 
 const deleteBlock = () => {
   let result = window.confirm(
-    "Do you really want to delete this group? All blocks inside this group will be deleted as well."
+    "Do you really want to delete this group? All blocks inside this group will be deleted as well.",
   );
 
   if (result) {
@@ -127,7 +127,11 @@ const disableBlock = () => {
     isCollapsed.value = true;
   }
 
-  store.disableFormBlock(props.block, !props.block.is_disabled);
+  store.updateFormBlockProperty(
+    props.block,
+    "is_disabled",
+    !props.block.is_disabled,
+  );
 };
 
 const copyId = () => {

From 73c65964753741a54f12e6547973024874cb1519 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 4 Oct 2024 19:08:12 +0200
Subject: [PATCH 07/43] add first draft of logic backend

---
 .../Api/FormBlockLogicController.php          | 21 +++++++
 app/Http/Requests/FormBlockLogicRequest.php   | 35 +++++++++++
 .../PublicFormBlockLogicResource.php          | 26 ++++++++
 .../Resources/PublicFormBlockResource.php     |  3 +
 app/Models/FormBlock.php                      | 14 +++--
 app/Models/FormBlockLogic.php                 | 33 +++++++++++
 database/factories/FormBlockLogicFactory.php  | 36 +++++++++++
 ...4_132306_create_form_block_rules_table.php | 25 ++++++++
 routes/api.php                                | 41 +++++++------
 tests/Feature/FormBlockLogicTest.php          | 59 +++++++++++++++++++
 tests/Feature/FormStoryboardTest.php          | 16 ++++-
 11 files changed, 285 insertions(+), 24 deletions(-)
 create mode 100644 app/Http/Controllers/Api/FormBlockLogicController.php
 create mode 100644 app/Http/Requests/FormBlockLogicRequest.php
 create mode 100644 app/Http/Resources/PublicFormBlockLogicResource.php
 create mode 100644 app/Models/FormBlockLogic.php
 create mode 100644 database/factories/FormBlockLogicFactory.php
 create mode 100644 database/migrations/2024_10_04_132306_create_form_block_rules_table.php
 create mode 100644 tests/Feature/FormBlockLogicTest.php

diff --git a/app/Http/Controllers/Api/FormBlockLogicController.php b/app/Http/Controllers/Api/FormBlockLogicController.php
new file mode 100644
index 00000000..3b2a3d89
--- /dev/null
+++ b/app/Http/Controllers/Api/FormBlockLogicController.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Models\FormBlock;
+use App\Models\FormBlockLogic;
+use App\Http\Controllers\Controller;
+use App\Http\Requests\FormBlockLogicRequest;
+
+class FormBlockLogicController extends Controller
+{
+    public function create(FormBlockLogicRequest $request, FormBlock $block)
+    {
+        return response()->json($block->formBlockLogics()->create($request->validated()));
+    }
+
+    public function update(FormBlockLogicRequest $request, FormBlockLogic $logic)
+    {
+        return response()->json($logic->update($request->validated()));
+    }
+}
diff --git a/app/Http/Requests/FormBlockLogicRequest.php b/app/Http/Requests/FormBlockLogicRequest.php
new file mode 100644
index 00000000..5997af22
--- /dev/null
+++ b/app/Http/Requests/FormBlockLogicRequest.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class FormBlockLogicRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'name' => 'required|string|max:255',
+            'conditions' => 'required|array',
+            'conditions.*.source' => 'required|string',
+            'conditions.*.operator' => 'required|string|in:equals,equalsNot,contains,containsNot,isLowerThan,isGreaterThan',
+            'conditions.*.value' => 'required|string',
+            'conditions.*.chainOperator' => 'required|string|in:and,or',
+            'action' => 'required|string|in:hide,show',
+            'evaluate' => 'required|string|in:before,after',
+        ];
+    }
+}
diff --git a/app/Http/Resources/PublicFormBlockLogicResource.php b/app/Http/Resources/PublicFormBlockLogicResource.php
new file mode 100644
index 00000000..92f97b17
--- /dev/null
+++ b/app/Http/Resources/PublicFormBlockLogicResource.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class PublicFormBlockLogicResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->uuid,
+            'name' => $this->name,
+            'action' => $this->action,
+            'evaluate' => $this->evaluate,
+            'conditions' => $this->conditions,
+            'action_payload' => $this->action_payload,
+        ];
+    }
+}
diff --git a/app/Http/Resources/PublicFormBlockResource.php b/app/Http/Resources/PublicFormBlockResource.php
index 1bfc0571..2ea2a7c6 100644
--- a/app/Http/Resources/PublicFormBlockResource.php
+++ b/app/Http/Resources/PublicFormBlockResource.php
@@ -3,6 +3,7 @@
 namespace App\Http\Resources;
 
 use Illuminate\Http\Resources\Json\JsonResource;
+use App\Http\Resources\PublicFormBlockLogicResource;
 
 class PublicFormBlockResource extends JsonResource
 {
@@ -14,6 +15,7 @@ class PublicFormBlockResource extends JsonResource
      */
     public function toArray($request)
     {
+        $logics = $this->formBlockLogics;
         $interactions = $this->activeInteractions;
 
         if ($this->options && $this->options['randomize_responses'] === true) {
@@ -34,6 +36,7 @@ public function toArray($request)
             'is_required' => $this->is_required,
             'parent_block' => $this->parent_block,
             'interactions' => PublicFormBlockInteractionResource::collection($interactions),
+            'logics' => PublicFormBlockLogicResource::collection($logics),
         ];
     }
 }
diff --git a/app/Models/FormBlock.php b/app/Models/FormBlock.php
index 6d3968ce..63e2ecfb 100644
--- a/app/Models/FormBlock.php
+++ b/app/Models/FormBlock.php
@@ -2,12 +2,13 @@
 
 namespace App\Models;
 
-use App\Enums\FormBlockInteractionType;
-use App\Enums\FormBlockType;
-use App\Scopes\Sequence;
 use Hashids\Hashids;
-use Illuminate\Database\Eloquent\Factories\HasFactory;
+use App\Scopes\Sequence;
 use Webpatser\Uuid\Uuid;
+use App\Enums\FormBlockType;
+use App\Models\FormBlockLogic;
+use App\Enums\FormBlockInteractionType;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
 
 class FormBlock extends BaseModel
 {
@@ -93,6 +94,11 @@ public function formBlockInteractions()
         return $this->hasMany(FormBlockInteraction::class, 'form_block_id');
     }
 
+    public function formBlockLogics()
+    {
+        return $this->hasMany(FormBlockLogic::class, 'form_block_id');
+    }
+
     public function activeInteractions()
     {
         return $this->hasMany(FormBlockInteraction::class, 'form_block_id')
diff --git a/app/Models/FormBlockLogic.php b/app/Models/FormBlockLogic.php
new file mode 100644
index 00000000..6edb7d8e
--- /dev/null
+++ b/app/Models/FormBlockLogic.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Support\Str;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+
+class FormBlockLogic extends Model
+{
+    use HasFactory;
+
+    protected $guarded = [];
+
+    protected $casts = [
+        'conditions' => 'array',
+        'actionPayload' => 'array',
+    ];
+
+    protected static function boot()
+    {
+        parent::boot();
+
+        self::creating(function ($model) {
+            $model->uuid = (string) Str::orderedUuid();
+        });
+    }
+
+    public function formBlock()
+    {
+        return $this->belongsTo(FormBlock::class);
+    }
+}
diff --git a/database/factories/FormBlockLogicFactory.php b/database/factories/FormBlockLogicFactory.php
new file mode 100644
index 00000000..119b6c28
--- /dev/null
+++ b/database/factories/FormBlockLogicFactory.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\FormBlock;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\FormBlockLogic>
+ */
+class FormBlockLogicFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            'name' => $this->faker->name(),
+            'action' => 'hide',
+            'evaluate' => 'before',
+            'conditions' => [
+                [
+                    'source' => $this->faker->uuid,
+                    'operator' => 'equals',
+                    'value' => 'test',
+                    'chainOperator' => 'and',
+                ]
+            ],
+            'actionPayload' => [],
+            'form_block_id' => FormBlock::factory(),
+        ];
+    }
+}
diff --git a/database/migrations/2024_10_04_132306_create_form_block_rules_table.php b/database/migrations/2024_10_04_132306_create_form_block_rules_table.php
new file mode 100644
index 00000000..42417513
--- /dev/null
+++ b/database/migrations/2024_10_04_132306_create_form_block_rules_table.php
@@ -0,0 +1,25 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class () extends Migration {
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('form_block_logics', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->char('uuid', 36);
+            $table->string('name');
+            $table->json('conditions');
+            $table->string('action');
+            $table->json('actionPayload')->nullable();
+            $table->string('evaluate')->default('before');
+            $table->unsignedBigInteger('form_block_id');
+            $table->timestamps();
+        });
+    }
+};
diff --git a/routes/api.php b/routes/api.php
index 06906820..e9bcf610 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,31 +1,32 @@
 <?php
 
-use App\Http\Controllers\Api\CreateFormSessionController;
-use App\Http\Controllers\Api\DeleteFormSubmissionController;
-use App\Http\Controllers\Api\DuplicateFormController;
-use App\Http\Controllers\Api\FormBlockController;
-use App\Http\Controllers\Api\FormBlockInteractionController;
-use App\Http\Controllers\Api\FormBlockInteractionSequenceController;
-use App\Http\Controllers\Api\FormBlockMappingController;
-use App\Http\Controllers\Api\FormBlockSequenceController;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Router;
+use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\Api\FormController;
+use App\Http\Controllers\Api\ZiggyController;
+use App\Http\Controllers\Api\ShowFormController;
+use App\Http\Controllers\Api\FormBlockController;
 use App\Http\Controllers\Api\FormImagesController;
-use App\Http\Controllers\Api\FormSubmissionsController;
 use App\Http\Controllers\Api\FormSubmitController;
-use App\Http\Controllers\Api\FormTemplateExportController;
-use App\Http\Controllers\Api\FormTemplateImportController;
 use App\Http\Controllers\Api\FormUploadController;
 use App\Http\Controllers\Api\FormWebhookController;
-use App\Http\Controllers\Api\GetFormStoryboardController;
 use App\Http\Controllers\Api\PublishFormController;
-use App\Http\Controllers\Api\PurgeFormSubmissionsController;
-use App\Http\Controllers\Api\ShowFormController;
 use App\Http\Controllers\Api\TrashedFormController;
+use App\Http\Controllers\Api\DuplicateFormController;
 use App\Http\Controllers\Api\UnpublishFormController;
-use App\Http\Controllers\Api\ZiggyController;
-use Illuminate\Http\Request;
-use Illuminate\Routing\Router;
-use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\Api\FormBlockLogicController;
+use App\Http\Controllers\Api\FormSubmissionsController;
+use App\Http\Controllers\Api\FormBlockMappingController;
+use App\Http\Controllers\Api\CreateFormSessionController;
+use App\Http\Controllers\Api\FormBlockSequenceController;
+use App\Http\Controllers\Api\GetFormStoryboardController;
+use App\Http\Controllers\Api\FormTemplateExportController;
+use App\Http\Controllers\Api\FormTemplateImportController;
+use App\Http\Controllers\Api\DeleteFormSubmissionController;
+use App\Http\Controllers\Api\FormBlockInteractionController;
+use App\Http\Controllers\Api\PurgeFormSubmissionsController;
+use App\Http\Controllers\Api\FormBlockInteractionSequenceController;
 
 /*
 |--------------------------------------------------------------------------
@@ -100,6 +101,10 @@
     $router->post('interactions/{interaction}', [FormBlockInteractionController::class, 'update'])->name('api.interactions.update');
     $router->delete('interactions/{interaction}', [FormBlockInteractionController::class, 'delete'])->name('api.interactions.delete');
 
+    // Logic API Routes
+    $router->post('{block}/logic', [FormBlockLogicController::class, 'create'])->name('api.logics.create');
+    $router->post('logic/{logic}', [FormBlockLogicController::class, 'update'])->name('api.logics.update');
+
     // Sequence Routes
     $router->post('{form}/blocks/sequence', FormBlockSequenceController::class)->name('api.blocks.sequence');
     $router->post('{block}/interactions/sequence', FormBlockInteractionSequenceController::class)->name('api.interactions.sequence');
diff --git a/tests/Feature/FormBlockLogicTest.php b/tests/Feature/FormBlockLogicTest.php
new file mode 100644
index 00000000..0f4887f9
--- /dev/null
+++ b/tests/Feature/FormBlockLogicTest.php
@@ -0,0 +1,59 @@
+<?php
+
+use App\Models\Form;
+use App\Models\FormBlock;
+use App\Models\FormBlockLogic;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+
+uses(RefreshDatabase::class);
+
+test('can create a rule for a form block', function () {
+    $firstBlock = FormBlock::factory()->create();
+    $block = FormBlock::factory()->for($firstBlock->form)->create();
+
+    $response = $this->actingAs($block->form->user)
+        ->json('post', route('api.logics.create', $block->id), [
+            'name' => 'Test Rule',
+            'conditions' => [
+                [
+                    'source' => $firstBlock->uuid,
+                    'operator' => 'equals',
+                    'value' => 'test',
+                    'chainOperator' => 'and',
+                ]
+            ],
+            'action' => 'hide',
+            'evaluate' => 'before',
+        ]);
+
+    $response->assertStatus(200);
+});
+
+test('can update an existing form block logic', function () {
+    $logic = FormBlockLogic::factory()->create();
+    $block = FormBlock::factory()->for($logic->formBlock->form)->create();
+
+    $this->actingAs($logic->formBlock->form->user)
+        ->json('post', route('api.logics.update', $logic->id), [
+            'name' => 'Test Rule',
+            'conditions' => [
+                [
+                    'source' => $block->uuid,
+                    'operator' => 'equals',
+                    'value' => 'test',
+                    'chainOperator' => 'and',
+                ]
+            ],
+            'action' => 'hide',
+            'evaluate' => 'before',
+        ])->assertStatus(200);
+
+    $logic->refresh();
+
+    $this->assertEquals('Test Rule', $logic->name);
+    $this->assertEquals('hide', $logic->action);
+    $this->assertEquals('before', $logic->evaluate);
+    $this->assertCount(1, $logic->conditions);
+    $this->assertEquals($block->uuid, $logic->conditions[0]['source']);
+});
+
diff --git a/tests/Feature/FormStoryboardTest.php b/tests/Feature/FormStoryboardTest.php
index 23745acd..8a788b81 100644
--- a/tests/Feature/FormStoryboardTest.php
+++ b/tests/Feature/FormStoryboardTest.php
@@ -1,8 +1,9 @@
 <?php
 
-use App\Enums\FormBlockType;
 use App\Models\Form;
 use App\Models\FormBlock;
+use App\Enums\FormBlockType;
+use App\Models\FormBlockLogic;
 use App\Models\FormBlockInteraction;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 
@@ -86,7 +87,6 @@
     expect($response->json('count'))->toBe(0);
 });
 
-
 test('interactions in a storyboard are sorted by sequence', function () {
     $form = Form::factory()->create();
 
@@ -189,3 +189,15 @@
     $distinctOrders = collect($results)->unique();
     $this->assertTrue($distinctOrders->count() > 1, 'The interactions are not randomized');
 });
+
+test('a block contains logic definitions if they exist', function () {
+    $blockA = FormBlock::factory()->create();
+    $logic = FormBlockLogic::factory()->for($blockA)->create();
+
+    $blockB = FormBlock::factory()->for($blockA->form)->create();
+
+    $response = $this->json('get', route('api.public.forms.storyboard', $blockA->form->uuid));
+
+    $this->assertCount(1, $response->json('blocks.0.logics'));
+    $this->assertCount(0, $response->json('blocks.1.logics'));
+});

From e662c9c298ad919c8eee54246656a20de07fa0a0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 4 Oct 2024 20:14:27 +0200
Subject: [PATCH 08/43] load blocks logics from backend in workbench

---
 .../Api/FormBlockLogicController.php          |  2 +-
 app/Models/FormBlock.php                      |  9 ++-
 resources/js/api/logics.ts                    | 25 +++++++++
 .../Factory/Sidebar/BlockHideLogic.vue        |  2 +-
 resources/js/stores/logic.ts                  | 49 +++++++++++++++--
 resources/js/types/models.d.ts                | 16 ++++--
 .../ChangeSequenceOfInteractionsTest.php      |  6 +-
 tests/Feature/FormBlockLogicTest.php          |  4 +-
 tests/Feature/ManageBlocksTest.php            | 55 ++++++++++++-------
 9 files changed, 128 insertions(+), 40 deletions(-)
 create mode 100644 resources/js/api/logics.ts

diff --git a/app/Http/Controllers/Api/FormBlockLogicController.php b/app/Http/Controllers/Api/FormBlockLogicController.php
index 3b2a3d89..ff365be4 100644
--- a/app/Http/Controllers/Api/FormBlockLogicController.php
+++ b/app/Http/Controllers/Api/FormBlockLogicController.php
@@ -11,7 +11,7 @@ class FormBlockLogicController extends Controller
 {
     public function create(FormBlockLogicRequest $request, FormBlock $block)
     {
-        return response()->json($block->formBlockLogics()->create($request->validated()));
+        return response()->json($block->formBlockLogics()->create($request->validated()), 201);
     }
 
     public function update(FormBlockLogicRequest $request, FormBlockLogic $logic)
diff --git a/app/Models/FormBlock.php b/app/Models/FormBlock.php
index 63e2ecfb..27b49ae8 100644
--- a/app/Models/FormBlock.php
+++ b/app/Models/FormBlock.php
@@ -27,7 +27,7 @@ class FormBlock extends BaseModel
 
     protected $guarded = [];
 
-    protected $with = ['formBlockInteractions'];
+    protected $with = ['formBlockInteractions', 'formBlockLogics'];
 
     protected $casts = [
         'is_required' => 'boolean',
@@ -39,10 +39,12 @@ class FormBlock extends BaseModel
 
     protected $appends = [
         'interactions',
+        'logics',
     ];
 
     protected $hidden = [
         'formBlockInteractions',
+        'formBlockLogics',
     ];
 
     protected static function boot()
@@ -112,6 +114,11 @@ public function getInteractionsAttribute()
         return $this->formBlockInteractions;
     }
 
+    public function getLogicsAttribute()
+    {
+        return $this->formBlockLogics;
+    }
+
     public function getSessionCountAttribute()
     {
         return $this->formSessionResponses()->selectRaw('COUNT(DISTINCT form_session_id) as count')->first()->count;
diff --git a/resources/js/api/logics.ts b/resources/js/api/logics.ts
new file mode 100644
index 00000000..dee7f8ca
--- /dev/null
+++ b/resources/js/api/logics.ts
@@ -0,0 +1,25 @@
+/* eslint-disable no-async-promise-executor */
+import { AxiosResponse } from "axios";
+import handler from "./handler";
+
+export function callCreateFormBlockLogic(
+    id: number,
+    attributes?: Partial<FormBlockLogic>,
+): Promise<AxiosResponse<FormBlockLogic>> {
+    console.log("create logic", id, attributes);
+
+    return new Promise(async (resolve, reject) => {
+        try {
+            const response = await handler.post(
+                window.route("api.logics.create", { block: id }),
+                {
+                    ...attributes,
+                },
+            );
+
+            resolve(response as AxiosResponse<FormBlockLogic>);
+        } catch (error) {
+            reject(error);
+        }
+    });
+}
diff --git a/resources/js/components/Factory/Sidebar/BlockHideLogic.vue b/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
index 84b74ddb..38afcff2 100644
--- a/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
+++ b/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
@@ -122,7 +122,7 @@ const operators: Array<{ key: Operator; label: string }> = [
   { key: "isGreaterThan", label: "is greater than" },
 ];
 
-const conditions: Ref<Array<FormBlockCondition>> = ref([]);
+const conditions: Ref<Array<EditableFormBlockBlockLogicCondition>> = ref([]);
 
 const addCondition = () => {
   conditions.value.push({
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index 9387c492..4f8936ef 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -1,12 +1,24 @@
 import { useForm } from "@/stores";
 import { defineStore } from "pinia";
 
+import { callCreateFormBlockLogic } from "@/api/logics";
+
 interface LogicStore {
     block: FormBlockModel | null;
     isShowingLogicEditor: boolean;
-    hideRule: FormBlockRule | null;
+    hideRule: FormBlockLogic | null;
 }
 
+const transformConditionForBackend = (
+    condition: EditableFormBlockBlockLogicCondition,
+): FormBlockLogicCondition => {
+    return {
+        ...condition,
+        source: condition.source?.key,
+        operator: condition.operator.key,
+    };
+};
+
 export const useLogic = defineStore("logic", {
     state: (): LogicStore => {
         return {
@@ -27,26 +39,51 @@ export const useLogic = defineStore("logic", {
             this.isShowingLogicEditor = false;
         },
 
-        saveBlockLogic() {
-            console.log("save rules", [this.hideRule]);
+        async saveBlockLogic() {
+            if (!this.block) {
+                return;
+            }
+
+            try {
+                console.log("save rules", [this.hideRule]);
+                // create new logic on backend
+                const response = await callCreateFormBlockLogic(
+                    this.block?.id,
+                    {
+                        ...this.hideRule,
+                    },
+                );
+
+                if (response.status === 201) {
+                    this.hideRule = response.data;
+                }
+            } catch (error) {
+                console.warn(error);
+            }
         },
 
-        updateHideRule(conditions: Array<FormBlockCondition>) {
+        updateHideRule(
+            conditions: Array<EditableFormBlockBlockLogicCondition>,
+        ) {
             if (!this.block) {
                 return;
             }
 
+            const transformedConditions = conditions.map((c) =>
+                transformConditionForBackend(c),
+            );
+
             if (!this.hideRule) {
                 this.hideRule = {
                     form_block_id: this.block?.id,
                     name: "Hide block",
-                    conditions,
+                    conditions: transformedConditions,
                     action: "hide",
                     actionPayload: null,
                     evaluate: "before",
                 };
             } else {
-                this.hideRule.conditions = conditions;
+                this.hideRule.conditions = transformedConditions;
             }
         },
     },
diff --git a/resources/js/types/models.d.ts b/resources/js/types/models.d.ts
index dec5abf7..3a95a094 100644
--- a/resources/js/types/models.d.ts
+++ b/resources/js/types/models.d.ts
@@ -77,17 +77,22 @@ type Operator =
     | "isLowerThan"
     | "isGreaterThan";
 
-interface FormBlockCondition {
-    source?: { key: FormBlockModel["uuid"] };
-    operator: { key: Operator };
+interface FormBlockLogicCondition {
+    source?: FormBlockModel["uuid"];
+    operator?: Operator;
     value: string;
     chainOperator: "or" | "and";
 }
 
-interface FormBlockRule {
+interface EditableFormBlockBlockLogicCondition extends FormBlockLogicCondition {
+    source?: { key: FormBlockModel["uuid"] };
+    operator: { key: Operator };
+}
+
+interface FormBlockLogic {
     form_block_id: number;
     name: string;
-    conditions: Array<FormBlockCondition>;
+    conditions: Array<FormBlockLogicCondition>;
     action: "show" | "hide" | "goto";
     actionPayload: string | null;
     evaluate: "before" | "after";
@@ -106,6 +111,7 @@ interface FormBlockModel extends BaseModel {
     sequence: number;
     form_id: number;
     interactions: FormBlockInteractionModel[] | undefined;
+    logics: FormBlockLogic[] | undefined;
 }
 
 type FormBlockType =
diff --git a/tests/Feature/ChangeSequenceOfInteractionsTest.php b/tests/Feature/ChangeSequenceOfInteractionsTest.php
index a8c47e57..0507c1d1 100644
--- a/tests/Feature/ChangeSequenceOfInteractionsTest.php
+++ b/tests/Feature/ChangeSequenceOfInteractionsTest.php
@@ -6,7 +6,7 @@
 
 uses(RefreshDatabase::class);
 
-test('each_block_has_a_sequence', function () {
+test('each block interaction has a sequence', function () {
     $block = FormBlock::factory()->create();
     $interactions = FormBlockInteraction::factory()->count(3)->create([
         'form_block_id' => $block->id,
@@ -17,7 +17,7 @@
     $this->assertEquals(2, $interactions[2]->sequence);
 });
 
-test('can_update_the_block_interactions_sequence', function () {
+test('can update the block interactions sequence', function () {
     $block = FormBlock::factory()->create();
     $interactions = FormBlockInteraction::factory()->count(3)->create([
         'form_block_id' => $block->id,
@@ -41,7 +41,7 @@
     $this->assertEquals(2, $interactions[1]->sequence);
 });
 
-test('deleting_an_interaction_updates_sequence_on_remaining_interactions', function () {
+test('deleting an interaction updates sequence on remaining interactions', function () {
     $this->withoutExceptionHandling();
 
     $block = FormBlock::factory()->create();
diff --git a/tests/Feature/FormBlockLogicTest.php b/tests/Feature/FormBlockLogicTest.php
index 0f4887f9..03661068 100644
--- a/tests/Feature/FormBlockLogicTest.php
+++ b/tests/Feature/FormBlockLogicTest.php
@@ -1,6 +1,5 @@
 <?php
 
-use App\Models\Form;
 use App\Models\FormBlock;
 use App\Models\FormBlockLogic;
 use Illuminate\Foundation\Testing\RefreshDatabase;
@@ -26,7 +25,7 @@
             'evaluate' => 'before',
         ]);
 
-    $response->assertStatus(200);
+    $response->assertStatus(201);
 });
 
 test('can update an existing form block logic', function () {
@@ -56,4 +55,3 @@
     $this->assertCount(1, $logic->conditions);
     $this->assertEquals($block->uuid, $logic->conditions[0]['source']);
 });
-
diff --git a/tests/Feature/ManageBlocksTest.php b/tests/Feature/ManageBlocksTest.php
index 276d4a93..b82531c7 100644
--- a/tests/Feature/ManageBlocksTest.php
+++ b/tests/Feature/ManageBlocksTest.php
@@ -1,18 +1,19 @@
 <?php
 
-use App\Enums\FormBlockType;
-use App\Events\FormBlocksUpdated;
 use App\Models\Form;
-use App\Models\FormBlock;
 use App\Models\User;
-use Database\Seeders\SimpleFormSeeder;
 use Hashids\Hashids;
-use Illuminate\Foundation\Testing\RefreshDatabase;
+use App\Models\FormBlock;
+use App\Enums\FormBlockType;
+use App\Models\FormBlockLogic;
+use App\Events\FormBlocksUpdated;
 use Illuminate\Support\Facades\Event;
+use Database\Seeders\SimpleFormSeeder;
+use Illuminate\Foundation\Testing\RefreshDatabase;
 
 uses(RefreshDatabase::class);
 
-test('can_create_new_blocks', function () {
+test('can create new blocks', function () {
     $form = Form::factory()->create();
 
     $response = $this->actingAs($form->user)
@@ -27,7 +28,7 @@
     $this->assertEquals($block->type, FormBlockType::none);
 });
 
-test('can_create_a_new_block_of_type_group', function () {
+test('can create a new block of type group', function () {
     $form = Form::factory()->create();
 
     $response = $this->actingAs($form->user)
@@ -44,7 +45,7 @@
     $this->assertEquals($block->type, FormBlockType::group);
 });
 
-test('can_only_create_blocks_for_forms_that_a_user_owns', function () {
+test('can only create blocks for forms that a user owns', function () {
     /** @var User $otherUser */
     $otherUser = User::factory()->withTeam()->create([]);
     $form = Form::factory()->create();
@@ -55,7 +56,7 @@
 
 });
 
-test('can_get_blocks_related_to_a_form', function () {
+test('can get blocks related to a form', function () {
     $form = Form::factory()->create();
 
     FormBlock::factory()->count(5)->create([
@@ -69,7 +70,21 @@
     $this->assertCount(5, $response->json());
 });
 
-test('can_get_blocks_with_results_loaded', function () {
+test('can get a block with logic', function () {
+    $form = Form::factory()->create();
+    $block = FormBlock::factory()->for($form)->create();
+    $logic = FormBlockLogic::factory()->create([
+        'form_block_id' => $block->id,
+    ]);
+
+    $response = $this->actingAs($form->user)
+        ->json('get', route('api.blocks.index', $form->uuid));
+
+    $response->assertStatus(200);
+    $this->assertCount(1, $response->json('0.logics'));
+});
+
+test('can get blocks with results loaded', function () {
     $this->seed(SimpleFormSeeder::class);
     $form = Form::first();
 
@@ -85,7 +100,7 @@
     $this->assertNotNull($response->json('2.interactions.0.responses_count'));
 });
 
-test('can_update_existing_blocks', function () {
+test('can update existing blocks', function () {
     $block = FormBlock::factory()->create([
         'message' => 'Hey there',
         'type' => FormBlockType::none,
@@ -101,7 +116,7 @@
     $this->assertEquals(FormBlockType::radio->value, $response->json('type'));
 });
 
-test('can_update_a_block_with_a_empty_message', function () {
+test('can update a block with a empty message', function () {
     $block = FormBlock::factory()->create([
         'message' => 'Test Message',
         'type' => FormBlockType::none,
@@ -117,7 +132,7 @@
     $this->assertEquals(FormBlockType::radio->value, $response->json('type'));
 });
 
-test('cannot_create_or_update_blocks_of_not_owned_form', function () {
+test('cannot create or update blocks of not owned form', function () {
     /** @var User $otherUser */
     $otherUser = User::factory()->withTeam()->create();
 
@@ -141,7 +156,7 @@
     $this->assertEquals(FormBlockType::none, $block->fresh()->type);
 });
 
-test('when_blocks_are_updated_an_event_is_fired', function () {
+test('when blocks are updated an event is fired', function () {
     Event::fake();
 
     $block = FormBlock::factory()->create([
@@ -160,7 +175,7 @@
     });
 });
 
-test('can_delete_a_block', function () {
+test('can delete a block', function () {
     $block = FormBlock::factory()->create();
 
     $this->actingAs($block->form->user)
@@ -170,7 +185,7 @@
     $this->assertNull($block->fresh());
 });
 
-test('cannot_delete_blocks_of_other_users', function () {
+test('cannot delete blocks of other users', function () {
     /** @var User $otherUser */
     $otherUser = User::factory()->withTeam()->create();
     $block = FormBlock::factory()->create();
@@ -182,7 +197,7 @@
     $this->assertNotNull($block->fresh());
 });
 
-test('can_set_a_title_for_the_results_view', function () {
+test('can set a title for the results view', function () {
     $block = FormBlock::factory()->create();
 
     $this->actingAs($block->form->user)
@@ -193,7 +208,7 @@
     $this->assertEquals('This is a block title', $block->fresh()->title);
 });
 
-test('can_remove_a_title_for_the_results_view', function () {
+test('can remove a title for the results view', function () {
     $block = FormBlock::factory()->create([
         'title' => 'Title is set',
     ]);
@@ -204,7 +219,7 @@
     $this->assertNull($block->fresh()->title);
 });
 
-test('can_make_a_block_required_for_form_user', function () {
+test('can make a block required for form user', function () {
     $block = FormBlock::factory()->create();
 
     $this->actingAs($block->form->user)
@@ -218,7 +233,7 @@
     $this->assertFalse($block->fresh()->is_required);
 });
 
-test('can_save_information_in_an_options_field', function () {
+test('can save information in an options field', function () {
     $block = FormBlock::factory()->create();
 
     $this->actingAs($block->form->user)

From 7b23eda23ce68c566b81ae1ee8ad9798011b6893 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Sat, 5 Oct 2024 19:38:40 +0200
Subject: [PATCH 09/43] wip

---
 resources/js/api/logics.ts                    |  39 +++-
 .../components/Factory/Shared/LabelToggle.vue |  56 +++++
 .../Factory/Sidebar/BlockHideLogic.vue        | 164 ---------------
 .../Factory/Sidebar/BlockLogicEdit.vue        |  36 +++-
 .../Factory/Sidebar/BlockLogicRule.vue        | 199 ++++++++++++++++++
 resources/js/stores/logic.ts                  | 148 ++++++++++---
 resources/js/types/models.d.ts                |   6 +-
 7 files changed, 441 insertions(+), 207 deletions(-)
 create mode 100644 resources/js/components/Factory/Shared/LabelToggle.vue
 delete mode 100644 resources/js/components/Factory/Sidebar/BlockHideLogic.vue
 create mode 100644 resources/js/components/Factory/Sidebar/BlockLogicRule.vue

diff --git a/resources/js/api/logics.ts b/resources/js/api/logics.ts
index dee7f8ca..f8f78b30 100644
--- a/resources/js/api/logics.ts
+++ b/resources/js/api/logics.ts
@@ -4,10 +4,8 @@ import handler from "./handler";
 
 export function callCreateFormBlockLogic(
     id: number,
-    attributes?: Partial<FormBlockLogic>,
+    attributes: Partial<FormBlockLogic>,
 ): Promise<AxiosResponse<FormBlockLogic>> {
-    console.log("create logic", id, attributes);
-
     return new Promise(async (resolve, reject) => {
         try {
             const response = await handler.post(
@@ -23,3 +21,38 @@ export function callCreateFormBlockLogic(
         }
     });
 }
+
+export function callUpdateFormBlockLogic(
+    attributes: Partial<FormBlockLogic>,
+): Promise<AxiosResponse<FormBlockLogic>> {
+    return new Promise(async (resolve, reject) => {
+        try {
+            const response = await handler.post(
+                window.route("api.logics.update", { logic: attributes.id }),
+                {
+                    ...attributes,
+                },
+            );
+
+            resolve(response as AxiosResponse<FormBlockLogic>);
+        } catch (error) {
+            reject(error);
+        }
+    });
+}
+
+export function callDeleteFormBlockLogic(
+    attributes: Partial<FormBlockLogic>,
+): Promise<AxiosResponse<FormBlockLogic>> {
+    return new Promise(async (resolve, reject) => {
+        try {
+            const response = await handler.delete(
+                window.route("api.logics.delete", { logic: attributes.id }),
+            );
+
+            resolve(response as AxiosResponse<FormBlockLogic>);
+        } catch (error) {
+            reject(error);
+        }
+    });
+}
diff --git a/resources/js/components/Factory/Shared/LabelToggle.vue b/resources/js/components/Factory/Shared/LabelToggle.vue
new file mode 100644
index 00000000..7c6832cd
--- /dev/null
+++ b/resources/js/components/Factory/Shared/LabelToggle.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="font-mono uppercase text-xs tracking-widest text-blue-700">
+    <span v-for="(option, index) in options" :key="option.value">
+      <input
+        :id="`label-toggle-${uid}-${index}`"
+        type="radio"
+        class="uppercase appearance-none peer hidden"
+        :class="`peer`"
+        :name="`label-toggle-${uid}`"
+        :value="option.value"
+        :checked="modelValue === option.value"
+        @change="updateValue(option.value)"
+      />
+      <label
+        class="cursor-pointer text-grey-300"
+        :class="`peer-checked:text-blue-700 peer-checked:font-bold`"
+        :for="`label-toggle-${uid}-${index}`"
+        >{{ option.label }}</label
+      >
+      <span class="mx-1" v-if="index < options.length - 1">/</span>
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getCurrentInstance } from "vue";
+
+const instance = getCurrentInstance();
+const uid = instance?.uid;
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: string): void;
+}>();
+
+interface ToggleOption {
+  label: string;
+  value: string;
+}
+
+withDefaults(
+  defineProps<{
+    modelValue: string;
+    options: ToggleOption[];
+  }>(),
+  {
+    options: () => [
+      { label: "True", value: "1" },
+      { label: "False", value: "0" },
+    ],
+  },
+);
+
+const updateValue = (value: string) => {
+  emit("update:modelValue", value);
+};
+</script>
diff --git a/resources/js/components/Factory/Sidebar/BlockHideLogic.vue b/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
deleted file mode 100644
index 38afcff2..00000000
--- a/resources/js/components/Factory/Sidebar/BlockHideLogic.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-  <div>
-    <D9Label
-      label="Hide Block"
-      description="Hide this block based on one or more conditions"
-    />
-
-    <template v-if="availableSourceBlocks.length > 0">
-      <div v-for="(condition, index) in conditions" :key="index" class="mt-2">
-        <div
-          class="flex justify-between font-mono uppercase text-xs tracking-widest text-blue-700"
-        >
-          <span
-            v-if="index === 0"
-            class="font-mono uppercase text-xs tracking-widest text-blue-700"
-            >When</span
-          >
-          <div
-            class="font-mono uppercase text-xs tracking-widest text-blue-700"
-            v-else
-          >
-            <input
-              v-model="condition.chainOperator"
-              :id="'chain-operator-and-' + index"
-              type="radio"
-              class="uppercase appearance-none peer/and hidden"
-              :name="'chain-operator-' + index"
-              value="and"
-            />
-            <label
-              class="cursor-pointer text-grey-300 peer-checked/and:text-blue-700 peer-checked/and:font-bold"
-              :for="'chain-operator-and-' + index"
-              >AND</label
-            >
-            <span>/</span>
-            <input
-              v-model="condition.chainOperator"
-              :id="'chain-operator-or-' + index"
-              type="radio"
-              class="uppercase appearance-none hidden peer/or"
-              :name="'chain-operator-' + index"
-              value="or"
-            />
-            <label
-              class="cursor-pointer text-grey-300 peer-checked/or:text-blue-700 peer-checked/or:font-bold"
-              :for="'chain-operator-or-' + index"
-              >OR</label
-            >
-          </div>
-          <button
-            type="button"
-            class="text-xs font-mono tracking-normal text-red-500"
-            @click="removeCondition(index)"
-          >
-            Remove
-          </button>
-        </div>
-        <D9Select
-          placeholder="Select a block"
-          v-model="condition.source"
-          size="small"
-          :options="availableSourceBlocks"
-        />
-
-        <div class="flex items-center space-x-2 mt-1">
-          <D9Select
-            class="w-64"
-            placeholder="Select an operator"
-            v-model="condition.operator"
-            size="small"
-            :options="operators"
-          />
-          <D9Input
-            class="w-full"
-            v-model="condition.value"
-            placeholer="Enter a value"
-            size="small"
-            block
-          />
-        </div>
-      </div>
-
-      <div class="mt-1">
-        <button
-          v-if="hasConditions"
-          type="button"
-          class="text-sm underline"
-          @click="addCondition"
-        >
-          Add another condition
-        </button>
-        <D9Button
-          v-else
-          label="Add condition"
-          color="dark"
-          size="small"
-          @click="addCondition"
-        />
-      </div>
-
-      <pre class="text-xxs bg-black text-white p-2 rounded mt-4">{{
-        conditions
-      }}</pre>
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { D9Label, D9Input, D9Select, D9Button } from "@deck9/ui";
-import { computed, Ref, ref, watch } from "vue";
-import { useLogic } from "@/stores";
-import { getTextFromHtml } from "@/utils";
-
-const logicStore = useLogic();
-
-const operators: Array<{ key: Operator; label: string }> = [
-  { key: "equals", label: "is equal to" },
-  { key: "equalsNot", label: "is not equal to" },
-  { key: "contains", label: "contains" },
-  { key: "containsNot", label: "does not contain" },
-  { key: "isLowerThan", label: "is lower than" },
-  { key: "isGreaterThan", label: "is greater than" },
-];
-
-const conditions: Ref<Array<EditableFormBlockBlockLogicCondition>> = ref([]);
-
-const addCondition = () => {
-  conditions.value.push({
-    source: undefined,
-    operator: operators[0],
-    value: "",
-    chainOperator: "and",
-  });
-};
-
-const removeCondition = (index: number) => {
-  conditions.value.splice(index, 1);
-};
-
-const hasConditions = computed(() => {
-  return conditions.value.length > 0; // TODO: check if all conditions are valid
-});
-
-const availableSourceBlocks = computed(() => {
-  return logicStore.availableSourceBlocks
-    .filter((block) => block.type !== "group")
-    .map((block) => {
-      const text = getTextFromHtml(block.message ?? "");
-
-      return {
-        key: block.uuid,
-        label: `<span class="bg-grey-900 text-white rounded mr-2 px-1 py-px">${block.title ?? block.uuid}</span><span class="truncate">${text}</span>`,
-      };
-    });
-});
-
-watch(
-  conditions,
-  () => {
-    logicStore.updateHideRule(conditions.value);
-  },
-  { deep: true },
-);
-</script>
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
index 69bc1363..04fde1b3 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
@@ -17,9 +17,8 @@
             leave-to="-translate-x-full"
           >
             <DialogPanel class="pointer-events-auto w-screen max-w-xl">
-              <form
+              <div
                 class="flex h-full flex-col divide-y divide-grey-200 bg-white shadow-xl"
-                @submit.prevent="saveBlockLogic"
               >
                 <div
                   class="flex min-h-0 flex-1 flex-col overflow-y-scroll py-6"
@@ -31,6 +30,7 @@
                       >
                         Block Logic
                       </DialogTitle>
+
                       <div class="ml-3 flex h-7 items-center">
                         <button
                           type="button"
@@ -43,8 +43,21 @@
                       </div>
                     </div>
                   </div>
-                  <div class="relative mt-6 flex-1 px-4 sm:px-6">
-                    <BlockHideLogic />
+                  <div class="relative mt-6 flex-1 px-4 sm:px-6" v-if="block">
+                    <BlockLogicRule
+                      class="mb-2"
+                      v-for="(rule, index) in block.logics"
+                      v-bind="{ rule, index }"
+                      :key="index"
+                    />
+                    <D9Button
+                      type="button"
+                      label="Add rule"
+                      @click="store.addRule()"
+                      icon="plus"
+                      color="dark"
+                      icon-position="left"
+                    />
                   </div>
                 </div>
                 <div
@@ -59,12 +72,13 @@
                   />
                   <D9Button
                     label="Save"
-                    type="submit"
+                    type="button"
+                    @click="save"
                     class="ml-4"
                     :is-loading="isSaving"
                   />
                 </div>
-              </form>
+              </div>
             </DialogPanel>
           </TransitionChild>
         </div>
@@ -82,8 +96,8 @@ import {
   TransitionChild,
   TransitionRoot,
 } from "@headlessui/vue";
-import BlockHideLogic from "./BlockHideLogic.vue";
-import { /* D9Label, D9Input, D9Select, */ D9Button, D9Icon } from "@deck9/ui";
+import BlockLogicRule from "./BlockLogicRule.vue";
+import { D9Button, D9Icon } from "@deck9/ui";
 
 import { useLogic } from "@/stores";
 import { storeToRefs } from "pinia";
@@ -91,12 +105,12 @@ import { storeToRefs } from "pinia";
 const store = useLogic();
 const isSaving = ref(false);
 
-const { isShowingLogicEditor } = storeToRefs(store);
+const { isShowingLogicEditor, block } = storeToRefs(store);
 
-const saveBlockLogic = () => {
+const save = async () => {
   isSaving.value = true;
 
-  store.saveBlockLogic();
+  await store.saveBlockLogic();
 
   setTimeout(() => {
     isSaving.value = false;
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
new file mode 100644
index 00000000..872e434d
--- /dev/null
+++ b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="bg-grey-100 p-4 py-2 rounded">
+    <div class="flex justify-between">
+      <D9Label class="mb-3" :label="rule.name" />
+      <D9Button
+        size="small"
+        icon="trash"
+        @click="removeRule"
+        color="danger"
+        label="Delete Rule"
+      />
+    </div>
+
+    <div class="font-mono uppercase text-xs tracking-widest text-blue-700 mb-2">
+      <LabelToggle
+        v-bind="{
+          options: [
+            { label: 'Before', value: 'before' },
+            { label: 'After', value: 'after' },
+          ],
+        }"
+        v-model="evaluate"
+      />
+      <span class="text-grey-700 tracking-normal mt-1">showing this block</span>
+    </div>
+
+    <div v-for="(condition, index) in conditions" :key="index" class="mb-2">
+      <div
+        class="flex justify-between font-mono uppercase text-xs tracking-widest text-grey-700"
+      >
+        <span v-if="index === 0">IF</span>
+        <LabelToggle
+          v-else
+          v-bind="{
+            options: [
+              { label: 'AND', value: 'and' },
+              { label: 'OR', value: 'or' },
+            ],
+          }"
+          v-model="condition.chainOperator"
+        />
+        <button
+          type="button"
+          class="text-xsracking-normal text-red-500"
+          @click="removeCondition(index)"
+        >
+          Remove
+        </button>
+      </div>
+
+      <D9Select
+        placeholder="Select a block"
+        v-model="condition.source"
+        size="small"
+        :options="availableSourceBlocks"
+      />
+
+      <div class="flex items-center space-x-2 mt-1">
+        <D9Select
+          class="w-64"
+          placeholder="Select an operator"
+          v-model="condition.operator"
+          size="small"
+          :options="operators"
+        />
+        <D9Input
+          class="w-full"
+          v-model="condition.value"
+          placeholer="Enter a value"
+          size="small"
+          block
+        />
+      </div>
+    </div>
+
+    <div class="mt-2">
+      <button type="button" class="text-sm underline" @click="addCondition">
+        <span v-if="hasConditions">Add another condition</span>
+        <span v-else>Add condition</span>
+      </button>
+    </div>
+
+    <div class="mt-2 font-mono uppercase text-xs">
+      <span class="tracking-widest text-grey-700 mb-1">Then</span>
+      <LabelToggle
+        v-bind="{
+          options: [
+            { label: 'Hide', value: 'hide' },
+            { label: 'Show', value: 'show' },
+            { label: 'Go to', value: 'goto' },
+          ],
+        }"
+        v-model="action"
+      />
+      <span v-if="action !== 'goto'" class="text-grey-700 tracking-normal mt-1"
+        >this block</span
+      >
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { D9Label, D9Input, D9Select, D9Button } from "@deck9/ui";
+import { computed, Ref, ref, watch } from "vue";
+import { useLogic, operators } from "@/stores";
+import { getTextFromHtml } from "@/utils";
+import LabelToggle from "@/components/Factory/Shared/LabelToggle.vue";
+
+const logicStore = useLogic();
+
+const props = defineProps<{
+  rule: FormBlockLogic;
+  index: number;
+}>();
+
+const evaluate = ref<FormBlockLogic["evaluate"]>(props.rule.evaluate);
+const action = ref<FormBlockLogic["action"]>(props.rule.action);
+const conditions: Ref<Array<EditableFormBlockBlockLogicCondition>> = ref([]);
+
+const getBlockOption = (block: FormBlockModel) => {
+  const text = getTextFromHtml(block.message ?? "");
+
+  return {
+    key: block.uuid,
+    label: `<div class="inline-flex items-center text-xs"><span class="bg-grey-700 text-white rounded mr-2 px-1 py-px w-12 truncate inline-block text-center">${block.title ?? block.uuid}</span><span class="inline-block truncate">${text}</span></div>`,
+  };
+};
+
+// if the loaded rule has already conditions, we should use those
+if (props.rule.conditions) {
+  const editableConditions = props.rule.conditions.map((condition) => {
+    const operator = operators.find((op) => op.key === condition.operator);
+    const source = logicStore.allBlocks?.find(
+      (block) => block.uuid === condition.source,
+    );
+
+    return {
+      ...condition,
+      operator,
+      source: source ? getBlockOption(source) : null,
+    };
+  });
+
+  conditions.value = editableConditions;
+}
+
+const addCondition = () => {
+  conditions.value.push({
+    source: undefined,
+    operator: operators[0],
+    value: "",
+    chainOperator: "and",
+  });
+};
+
+const removeRule = () => {
+  const result = window.confirm(
+    "Are you sure you want to delete this rule? This action cannot be undone.",
+  );
+
+  if (!result) {
+    return;
+  }
+
+  logicStore.removeRule(props.index);
+};
+
+const removeCondition = (index: number) => {
+  conditions.value.splice(index, 1);
+};
+
+const hasConditions = computed(() => {
+  return conditions.value.length > 0;
+});
+
+const availableSourceBlocks = computed(() => {
+  return logicStore.availableSourceBlocks
+    .filter((block) => block.type !== "group")
+    .map((block) => {
+      return getBlockOption(block);
+    });
+});
+
+watch(
+  [conditions, evaluate, action],
+  () => {
+    logicStore.updateBlockLogic(
+      {
+        ...props.rule,
+        conditions: conditions.value,
+        evaluate: evaluate.value,
+        action: action.value,
+      },
+      props.index,
+    );
+  },
+  { deep: true },
+);
+</script>
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index 4f8936ef..a9b4e580 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -1,7 +1,11 @@
 import { useForm } from "@/stores";
 import { defineStore } from "pinia";
 
-import { callCreateFormBlockLogic } from "@/api/logics";
+import {
+    callCreateFormBlockLogic,
+    callUpdateFormBlockLogic,
+    callDeleteFormBlockLogic,
+} from "@/api/logics";
 
 interface LogicStore {
     block: FormBlockModel | null;
@@ -9,6 +13,15 @@ interface LogicStore {
     hideRule: FormBlockLogic | null;
 }
 
+export const operators: Array<{ key: Operator; label: string }> = [
+    { key: "equals", label: "is equal to" },
+    { key: "equalsNot", label: "is not equal to" },
+    { key: "contains", label: "contains" },
+    { key: "containsNot", label: "does not contain" },
+    { key: "isLowerThan", label: "is lower than" },
+    { key: "isGreaterThan", label: "is greater than" },
+];
+
 const transformConditionForBackend = (
     condition: EditableFormBlockBlockLogicCondition,
 ): FormBlockLogicCondition => {
@@ -39,56 +52,135 @@ export const useLogic = defineStore("logic", {
             this.isShowingLogicEditor = false;
         },
 
-        async saveBlockLogic() {
+        addRule() {
             if (!this.block) {
                 return;
             }
 
+            if (!this.block.logics) {
+                this.block.logics = [];
+            }
+
+            this.block.logics.push({
+                form_block_id: this.block.id,
+                name: "Rule #" + (this.block.logics.length + 1),
+                action: "hide",
+                actionPayload: null,
+                evaluate: "before",
+                conditions: [],
+            });
+        },
+
+        async removeRule(index: number) {
+            if (!this.block || !this.block.logics) {
+                return;
+            }
+
             try {
-                console.log("save rules", [this.hideRule]);
-                // create new logic on backend
-                const response = await callCreateFormBlockLogic(
-                    this.block?.id,
-                    {
-                        ...this.hideRule,
-                    },
+                const response = await callDeleteFormBlockLogic(
+                    this.block.logics[index],
                 );
 
-                if (response.status === 201) {
-                    this.hideRule = response.data;
+                if (response.status === 200) {
+                    this.block.logics.splice(index, 1);
                 }
             } catch (error) {
-                console.warn(error);
+                console.warn(`Error deleting rule:`, error);
             }
         },
 
-        updateHideRule(
-            conditions: Array<EditableFormBlockBlockLogicCondition>,
-        ) {
+        async saveBlockLogic() {
+            if (!this.block || !this.block.logics) {
+                return;
+            }
+
+            const results = await Promise.allSettled(
+                this.block.logics.map((logic) => this.saveSingleRule(logic)),
+            );
+
+            const failedSaves = results.filter(
+                (result) => result.status === "rejected",
+            );
+
+            if (failedSaves.length > 0) {
+                console.warn(`Failed to save ${failedSaves.length} rule(s):`);
+                failedSaves.forEach((failure, index) => {
+                    if (failure.status === "rejected") {
+                        console.warn(
+                            `Rule ${index + 1} failed:`,
+                            failure.reason,
+                        );
+                    }
+                });
+            }
+
+            return {
+                failed: failedSaves.length,
+                totalRules: this.block.logics.length,
+            };
+        },
+
+        async saveSingleRule(logic: FormBlockLogic) {
+            if (!this.block) {
+                throw new Error("Block is not defined");
+            }
+
+            try {
+                if (!logic.uuid) {
+                    const response = await callCreateFormBlockLogic(
+                        this.block.id,
+                        logic,
+                    );
+                    if (response.status === 201) {
+                        return response.data;
+                    } else {
+                        throw new Error(
+                            `Unexpected response status: ${response.status}`,
+                        );
+                    }
+                } else {
+                    const response = await callUpdateFormBlockLogic(logic);
+
+                    if (response.status === 200) {
+                        return response.data;
+                    } else {
+                        throw new Error(
+                            `Unexpected response status: ${response.status}`,
+                        );
+                    }
+                }
+            } catch (error) {
+                console.warn(`Error saving rule:`, error);
+                throw error;
+            }
+        },
+
+        updateBlockLogic(logic: FormBlockLogic, index: number) {
             if (!this.block) {
                 return;
             }
 
-            const transformedConditions = conditions.map((c) =>
+            if (!this.block.logics) {
+                this.block.logics = [];
+            }
+
+            const transformedConditions = logic.conditions.map((c) =>
                 transformConditionForBackend(c),
             );
 
-            if (!this.hideRule) {
-                this.hideRule = {
-                    form_block_id: this.block?.id,
-                    name: "Hide block",
-                    conditions: transformedConditions,
-                    action: "hide",
-                    actionPayload: null,
-                    evaluate: "before",
-                };
-            } else {
-                this.hideRule.conditions = transformedConditions;
-            }
+            logic.conditions = transformedConditions;
+
+            this.block.logics[index] = logic;
         },
     },
 
     getters: {
+        allBlocks(): Array<FormBlockModel> | null {
+            const formStore = useForm();
+
+            return formStore.blocks;
+        },
+
         availableSourceBlocks(state): Array<FormBlockModel> {
             const formStore = useForm();
 
diff --git a/resources/js/types/models.d.ts b/resources/js/types/models.d.ts
index 3a95a094..e43f2e52 100644
--- a/resources/js/types/models.d.ts
+++ b/resources/js/types/models.d.ts
@@ -90,9 +90,13 @@ interface EditableFormBlockBlockLogicCondition extends FormBlockLogicCondition {
 }
 
 interface FormBlockLogic {
+    id?: number;
+    uuid?: string;
     form_block_id: number;
     name: string;
-    conditions: Array<FormBlockLogicCondition>;
+    conditions:
+        | Array<FormBlockLogicCondition>
+        | Array<EditableFormBlockBlockLogicCondition>;
     action: "show" | "hide" | "goto";
     actionPayload: string | null;
     evaluate: "before" | "after";

From 58f635e734e5107f734adab320c9346be02811ea Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Sat, 5 Oct 2024 19:54:03 +0200
Subject: [PATCH 10/43] wip

---
 app/Http/Controllers/Api/FormBlockLogicController.php |  7 +++++++
 .../js/components/Factory/Shared/LabelToggle.vue      |  2 +-
 .../js/components/Factory/Sidebar/BlockLogicRule.vue  | 10 ++++++----
 routes/api.php                                        |  1 +
 tests/Feature/FormBlockLogicTest.php                  | 11 +++++++++++
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/app/Http/Controllers/Api/FormBlockLogicController.php b/app/Http/Controllers/Api/FormBlockLogicController.php
index ff365be4..4bdfb889 100644
--- a/app/Http/Controllers/Api/FormBlockLogicController.php
+++ b/app/Http/Controllers/Api/FormBlockLogicController.php
@@ -18,4 +18,11 @@ public function update(FormBlockLogicRequest $request, FormBlockLogic $logic)
     {
         return response()->json($logic->update($request->validated()));
     }
+
+    public function delete(FormBlockLogic $logic)
+    {
+        $logic->delete();
+
+        return response()->json(null, 200);
+    }
 }
diff --git a/resources/js/components/Factory/Shared/LabelToggle.vue b/resources/js/components/Factory/Shared/LabelToggle.vue
index 7c6832cd..430f2b00 100644
--- a/resources/js/components/Factory/Shared/LabelToggle.vue
+++ b/resources/js/components/Factory/Shared/LabelToggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="font-mono uppercase text-xs tracking-widest text-blue-700">
+  <div>
     <span v-for="(option, index) in options" :key="option.value">
       <input
         :id="`label-toggle-${uid}-${index}`"
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
index 872e434d..f649830d 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
@@ -11,8 +11,9 @@
       />
     </div>
 
-    <div class="font-mono uppercase text-xs tracking-widest text-blue-700 mb-2">
+    <div class="font-mono text-sm tracking-widest text-blue-700 mb-2">
       <LabelToggle
+        class="inline-block mr-1 uppercase"
         v-bind="{
           options: [
             { label: 'Before', value: 'before' },
@@ -80,14 +81,15 @@
       </button>
     </div>
 
-    <div class="mt-2 font-mono uppercase text-xs">
-      <span class="tracking-widest text-grey-700 mb-1">Then</span>
+    <div class="mt-3 font-mono text-sm">
+      <span class="tracking-widest text-grey-700 mb-1">then</span>
       <LabelToggle
+        class="text-sm inline-block mx-1 uppercase"
         v-bind="{
           options: [
             { label: 'Hide', value: 'hide' },
             { label: 'Show', value: 'show' },
-            { label: 'Go to', value: 'goto' },
+            // { label: 'Go to', value: 'goto' },
           ],
         }"
         v-model="action"
diff --git a/routes/api.php b/routes/api.php
index e9bcf610..3baf052e 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -104,6 +104,7 @@
     // Logic API Routes
     $router->post('{block}/logic', [FormBlockLogicController::class, 'create'])->name('api.logics.create');
     $router->post('logic/{logic}', [FormBlockLogicController::class, 'update'])->name('api.logics.update');
+    $router->delete('logic/{logic}', [FormBlockLogicController::class, 'delete'])->name('api.logics.delete');
 
     // Sequence Routes
     $router->post('{form}/blocks/sequence', FormBlockSequenceController::class)->name('api.blocks.sequence');
diff --git a/tests/Feature/FormBlockLogicTest.php b/tests/Feature/FormBlockLogicTest.php
index 03661068..9bc7479b 100644
--- a/tests/Feature/FormBlockLogicTest.php
+++ b/tests/Feature/FormBlockLogicTest.php
@@ -55,3 +55,14 @@
     $this->assertCount(1, $logic->conditions);
     $this->assertEquals($block->uuid, $logic->conditions[0]['source']);
 });
+
+
+test('can delete a logic rule', function () {
+    $logic = FormBlockLogic::factory()->create();
+
+    $this->actingAs($logic->formBlock->form->user)
+        ->json('DELETE', route('api.logics.delete', $logic->id))
+        ->assertStatus(200);
+
+    $this->assertNull($logic->fresh());
+});

From 1904ad42e62cc144fdc9fec85aa52ac0280b802a Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 8 Oct 2024 11:44:14 +0200
Subject: [PATCH 11/43] better rule ui

---
 .../components/Factory/Shared/LabelToggle.vue |  69 ++++---
 .../Factory/Sidebar/BlockLogicRule.vue        | 181 ++++++++++--------
 2 files changed, 140 insertions(+), 110 deletions(-)

diff --git a/resources/js/components/Factory/Shared/LabelToggle.vue b/resources/js/components/Factory/Shared/LabelToggle.vue
index 430f2b00..d99d2382 100644
--- a/resources/js/components/Factory/Shared/LabelToggle.vue
+++ b/resources/js/components/Factory/Shared/LabelToggle.vue
@@ -1,32 +1,45 @@
 <template>
-  <div>
-    <span v-for="(option, index) in options" :key="option.value">
-      <input
-        :id="`label-toggle-${uid}-${index}`"
-        type="radio"
-        class="uppercase appearance-none peer hidden"
-        :class="`peer`"
-        :name="`label-toggle-${uid}`"
-        :value="option.value"
-        :checked="modelValue === option.value"
-        @change="updateValue(option.value)"
-      />
-      <label
-        class="cursor-pointer text-grey-300"
-        :class="`peer-checked:text-blue-700 peer-checked:font-bold`"
-        :for="`label-toggle-${uid}-${index}`"
-        >{{ option.label }}</label
+  <RadioGroup
+    v-model="value"
+    class="flex w-fit justify-start rounded-md -space-x-px"
+  >
+    <RadioGroupOption
+      as="template"
+      v-for="(option, index) in options"
+      :key="option.value"
+      :value="option.value"
+      v-slot="{ active, checked }"
+    >
+      <div
+        :class="[
+          'cursor-pointer focus:outline-none',
+          checked
+            ? 'bg-white text-blue-700 ring-blue-600'
+            : 'bg-white text-grey-500 hover:text-grey-900 hover:ring-blue-600',
+          !active && !checked ? 'ring-inset' : '',
+          index === 0 ? 'rounded-l-md' : 'rounded-r-md',
+          'group flex items-center justify-center px-3 py-2 leading-none text-sm border border-grey-300',
+        ]"
       >
-      <span class="mx-1" v-if="index < options.length - 1">/</span>
-    </span>
-  </div>
+        <span
+          class="h-2 w-2 rounded-full ring-1 ring-offset-2 mr-2"
+          :class="[
+            checked
+              ? 'bg-blue-600 ring-blue-600'
+              : 'bg-white group-hover:ring-blue-300',
+            active ? 'ring-2 ring-blue-600 ring-offset-2' : '',
+            active && checked ? 'ring-2 ring-blue-600' : '',
+          ]"
+        ></span>
+        {{ option.label }}
+      </div>
+    </RadioGroupOption>
+  </RadioGroup>
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance } from "vue";
-
-const instance = getCurrentInstance();
-const uid = instance?.uid;
+import { ref, watch } from "vue";
+import { RadioGroup, RadioGroupOption } from "@headlessui/vue";
 
 const emit = defineEmits<{
   (event: "update:modelValue", value: string): void;
@@ -37,7 +50,7 @@ interface ToggleOption {
   value: string;
 }
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     modelValue: string;
     options: ToggleOption[];
@@ -50,7 +63,9 @@ withDefaults(
   },
 );
 
-const updateValue = (value: string) => {
+const value = ref(props.modelValue);
+
+watch(value, (value) => {
   emit("update:modelValue", value);
-};
+});
 </script>
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
index f649830d..cfc068ea 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
@@ -1,108 +1,123 @@
 <template>
-  <div class="bg-grey-100 p-4 py-2 rounded">
-    <div class="flex justify-between">
-      <D9Label class="mb-3" :label="rule.name" />
-      <D9Button
-        size="small"
-        icon="trash"
-        @click="removeRule"
-        color="danger"
-        label="Delete Rule"
-      />
-    </div>
-
-    <div class="font-mono text-sm tracking-widest text-blue-700 mb-2">
-      <LabelToggle
-        class="inline-block mr-1 uppercase"
-        v-bind="{
-          options: [
-            { label: 'Before', value: 'before' },
-            { label: 'After', value: 'after' },
-          ],
-        }"
-        v-model="evaluate"
-      />
-      <span class="text-grey-700 tracking-normal mt-1">showing this block</span>
+  <div class="bg-grey-50 rounded">
+    <div
+      class="flex justify-between mb-1 bg-grey-100 border-b border-grey-200 px-4 py-2 rounded-t"
+    >
+      <span class="font-medium">
+        {{ rule.name }}
+      </span>
+      <button>
+        <D9Icon
+          name="trash"
+          class="text-grey-500 hover:text-red-700 text-sm"
+          @click="removeRule"
+        />
+      </button>
     </div>
 
-    <div v-for="(condition, index) in conditions" :key="index" class="mb-2">
-      <div
-        class="flex justify-between font-mono uppercase text-xs tracking-widest text-grey-700"
-      >
-        <span v-if="index === 0">IF</span>
+    <div class="px-4 py-2">
+      <div class="mb-3">
+        <D9Label label="Rule Execution" />
         <LabelToggle
-          v-else
           v-bind="{
             options: [
-              { label: 'AND', value: 'and' },
-              { label: 'OR', value: 'or' },
+              { label: 'Before', value: 'before' },
+              { label: 'After', value: 'after' },
             ],
           }"
-          v-model="condition.chainOperator"
+          v-model="evaluate"
         />
-        <button
-          type="button"
-          class="text-xsracking-normal text-red-500"
-          @click="removeCondition(index)"
+      </div>
+
+      <div class="mb-1">
+        <D9Label label="Conditions" />
+        <div
+          v-for="(condition, index) in conditions"
+          :key="index"
+          class="mt-2 relative"
         >
-          Remove
-        </button>
+          <LabelToggle
+            v-if="index !== 0"
+            class="mb-2 w-0"
+            v-bind="{
+              options: [
+                { label: 'And', value: 'and' },
+                { label: 'Or', value: 'or' },
+              ],
+            }"
+            v-model="condition.chainOperator"
+          />
+          <div class="relative">
+            <D9Select
+              placeholder="Select a block"
+              v-model="condition.source"
+              size="small"
+              :options="availableSourceBlocks"
+            />
+            <div class="flex items-center space-x-2 mt-1">
+              <D9Select
+                class="w-64"
+                placeholder="Select an operator"
+                v-model="condition.operator"
+                size="small"
+                :options="operators"
+              />
+              <D9Input
+                class="w-full"
+                v-model="condition.value"
+                placeholer="Enter a value"
+                size="small"
+                block
+              />
+            </div>
+
+            <button
+              type="button"
+              class="text-xs tracking-normal text-red-500 absolute bottom-full right-0 mb-1"
+              @click="removeCondition(index)"
+            >
+              Remove
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="bg-grey-200 border border-grey-300 rounded-md px-4 py-4 text-sm"
+        v-if="!hasConditions"
+      >
+        <p class="font-semibold">You have no conditions set for this rule.</p>
+        <p class="text-grey-500">Click the button below to add a condition.</p>
       </div>
 
-      <D9Select
-        placeholder="Select a block"
-        v-model="condition.source"
+      <D9Button
+        class="mt-3"
+        :label="hasConditions ? 'Add another condition' : 'Add condition'"
+        icon="plus"
         size="small"
-        :options="availableSourceBlocks"
+        @click="addCondition"
       />
 
-      <div class="flex items-center space-x-2 mt-1">
-        <D9Select
-          class="w-64"
-          placeholder="Select an operator"
-          v-model="condition.operator"
-          size="small"
-          :options="operators"
-        />
-        <D9Input
-          class="w-full"
-          v-model="condition.value"
-          placeholer="Enter a value"
-          size="small"
-          block
+      <div class="mt-3">
+        <D9Label label="Action" />
+        <LabelToggle
+          class="w-0"
+          v-bind="{
+            options: [
+              { label: 'Hide', value: 'hide' },
+              { label: 'Show', value: 'show' },
+              // { label: 'Go to', value: 'goto' },
+            ],
+          }"
+          v-model="action"
         />
       </div>
     </div>
-
-    <div class="mt-2">
-      <button type="button" class="text-sm underline" @click="addCondition">
-        <span v-if="hasConditions">Add another condition</span>
-        <span v-else>Add condition</span>
-      </button>
-    </div>
-
-    <div class="mt-3 font-mono text-sm">
-      <span class="tracking-widest text-grey-700 mb-1">then</span>
-      <LabelToggle
-        class="text-sm inline-block mx-1 uppercase"
-        v-bind="{
-          options: [
-            { label: 'Hide', value: 'hide' },
-            { label: 'Show', value: 'show' },
-            // { label: 'Go to', value: 'goto' },
-          ],
-        }"
-        v-model="action"
-      />
-      <span v-if="action !== 'goto'" class="text-grey-700 tracking-normal mt-1"
-        >this block</span
-      >
-    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { D9Label, D9Input, D9Select, D9Button } from "@deck9/ui";
+import { D9Input, D9Select, D9Icon, D9Label, D9Button } from "@deck9/ui";
 import { computed, Ref, ref, watch } from "vue";
 import { useLogic, operators } from "@/stores";
 import { getTextFromHtml } from "@/utils";

From 84f41b4f3e01549a7388bb36694bfb9e2c074ac2 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 10 Oct 2024 18:10:30 +0200
Subject: [PATCH 12/43] fix removing unsaved rule

---
 .../js/components/Factory/Sidebar/BlockLogicEdit.vue | 12 ++++++++++--
 resources/js/stores/logic.ts                         |  5 +++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
index 04fde1b3..a0d1bb2f 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
@@ -50,6 +50,14 @@
                       v-bind="{ rule, index }"
                       :key="index"
                     />
+
+                    <EmptyState
+                      v-if="!block.logics.length"
+                      class="mb-4"
+                      title="No rules setup"
+                      description="Add a rule to get started"
+                    />
+
                     <D9Button
                       type="button"
                       label="Add rule"
@@ -97,6 +105,7 @@ import {
   TransitionRoot,
 } from "@headlessui/vue";
 import BlockLogicRule from "./BlockLogicRule.vue";
+import EmptyState from "@/components/EmptyState.vue";
 import { D9Button, D9Icon } from "@deck9/ui";
 
 import { useLogic } from "@/stores";
@@ -114,8 +123,7 @@ const save = async () => {
 
   setTimeout(() => {
     isSaving.value = false;
-    // TODO hide when saving is done
-    // store.hideLogicEditor();
+    store.hideLogicEditor();
   }, 250);
 };
 
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index a9b4e580..f75c28d4 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -76,6 +76,11 @@ export const useLogic = defineStore("logic", {
                 return;
             }
 
+            if (this.block.logics[index].id === undefined) {
+                this.block.logics.splice(index, 1);
+                return;
+            }
+
             try {
                 const response = await callDeleteFormBlockLogic(
                     this.block.logics[index],

From b2a0ee32dbd6cd65d47871b333f39305f0d9bde8 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 11 Oct 2024 14:44:48 +0200
Subject: [PATCH 13/43] show validation

---
 .../Factory/Sidebar/BlockLogicEdit.vue        |  4 +-
 .../Factory/Sidebar/BlockLogicRule.vue        | 11 ++++++
 resources/js/stores/logic.ts                  | 39 +++++++++++++------
 3 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
index a0d1bb2f..677933cf 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
@@ -52,7 +52,7 @@
                     />
 
                     <EmptyState
-                      v-if="!block.logics.length"
+                      v-if="!block.logics?.length"
                       class="mb-4"
                       title="No rules setup"
                       description="Add a rule to get started"
@@ -123,7 +123,7 @@ const save = async () => {
 
   setTimeout(() => {
     isSaving.value = false;
-    store.hideLogicEditor();
+    // store.hideLogicEditor();
   }, 250);
 };
 
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
index cfc068ea..4f2f2716 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
@@ -113,6 +113,12 @@
         />
       </div>
     </div>
+
+    <ValidationErrors
+      v-if="validation"
+      v-bind="{ errors: [validation.message] }"
+      class="mb-2"
+    />
   </div>
 </template>
 
@@ -122,6 +128,7 @@ import { computed, Ref, ref, watch } from "vue";
 import { useLogic, operators } from "@/stores";
 import { getTextFromHtml } from "@/utils";
 import LabelToggle from "@/components/Factory/Shared/LabelToggle.vue";
+import ValidationErrors from "@/components/ValidationErrors.vue";
 
 const logicStore = useLogic();
 
@@ -130,6 +137,10 @@ const props = defineProps<{
   index: number;
 }>();
 
+const validation = computed(() => {
+  return logicStore.validation[props.index];
+});
+
 const evaluate = ref<FormBlockLogic["evaluate"]>(props.rule.evaluate);
 const action = ref<FormBlockLogic["action"]>(props.rule.action);
 const conditions: Ref<Array<EditableFormBlockBlockLogicCondition>> = ref([]);
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index f75c28d4..6bd4aa40 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -6,9 +6,14 @@ import {
     callUpdateFormBlockLogic,
     callDeleteFormBlockLogic,
 } from "@/api/logics";
+interface ValidationError {
+    message: string;
+    errors: Record<string, string[]>;
+}
 
 interface LogicStore {
     block: FormBlockModel | null;
+    validation: ValidationError[];
     isShowingLogicEditor: boolean;
     hideRule: FormBlockLogic | null;
 }
@@ -38,6 +43,7 @@ export const useLogic = defineStore("logic", {
             block: null,
             isShowingLogicEditor: false,
             hideRule: null,
+            validation: [],
         };
     },
 
@@ -99,23 +105,32 @@ export const useLogic = defineStore("logic", {
                 return;
             }
 
+            // reset validation before each request
+            this.validation = [];
+
             const results = await Promise.allSettled(
-                this.block.logics.map((logic) => this.saveSingleRule(logic)),
+                this.block.logics.map((logic, index) =>
+                    this.saveSingleRule(logic).then((result) => ({
+                        result,
+                        index,
+                    })),
+                ),
             );
 
-            const failedSaves = results.filter(
-                (result) => result.status === "rejected",
-            );
+            const failedSaves = results
+                .map((result, index) => ({ ...result, originalIndex: index }))
+                .filter(
+                    (
+                        result,
+                    ): result is PromiseRejectedResult & {
+                        originalIndex: number;
+                    } => result.status === "rejected",
+                );
 
             if (failedSaves.length > 0) {
-                console.warn(`Failed to save ${failedSaves.length} rule(s):`);
-                failedSaves.forEach((failure, index) => {
-                    if (failure.status === "rejected") {
-                        console.warn(
-                            `Rule ${index + 1} failed:`,
-                            failure.reason,
-                        );
-                    }
+                failedSaves.forEach((failure) => {
+                    this.validation[failure.originalIndex] =
+                        failure.reason.response.data;
                 });
             }
 

From 4fdeac26800fc3ad48e5ab96f06812ed9a637c2e Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Sat, 12 Oct 2024 17:32:20 +0200
Subject: [PATCH 14/43] improve validation display

---
 app/Http/Requests/FormBlockLogicRequest.php    | 14 ++++++++++++++
 .../Factory/Sidebar/BlockLogicRule.vue         | 18 +++++++++++++-----
 resources/js/components/ValidationErrors.vue   | 14 ++++++++++----
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/app/Http/Requests/FormBlockLogicRequest.php b/app/Http/Requests/FormBlockLogicRequest.php
index 5997af22..e165056f 100644
--- a/app/Http/Requests/FormBlockLogicRequest.php
+++ b/app/Http/Requests/FormBlockLogicRequest.php
@@ -32,4 +32,18 @@ public function rules(): array
             'evaluate' => 'required|string|in:before,after',
         ];
     }
+
+    public function messages()
+    {
+        return [
+            'name.required' => 'The name is required.',
+            'conditions.required' => 'At least one condition is required.',
+            'conditions.*.source.required' => 'The source block for your #:position condition is required.',
+            'conditions.*.value.required' => 'The value for your #:position condition is required.',
+            'conditions.*.operator.required' => 'The operator for the #:position condition is required.',
+            'conditions.*.chainOperator.required' => 'The chain operator for the #:position condition is required.',
+            'action.required' => 'The action is required.',
+            'evaluate.required' => 'The evaluate is required.',
+        ];
+    }
 }
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
index 4f2f2716..806c4d02 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
@@ -65,7 +65,7 @@
               <D9Input
                 class="w-full"
                 v-model="condition.value"
-                placeholer="Enter a value"
+                placeholder="Enter a value"
                 size="small"
                 block
               />
@@ -115,9 +115,9 @@
     </div>
 
     <ValidationErrors
-      v-if="validation"
-      v-bind="{ errors: [validation.message] }"
-      class="mb-2"
+      v-if="validation.length > 0"
+      v-bind="{ errors: validation, title: 'Your rule is invalid' }"
+      class="my-2 px-4 pb-4 placeholder:text-grey-400"
     />
   </div>
 </template>
@@ -138,7 +138,15 @@ const props = defineProps<{
 }>();
 
 const validation = computed(() => {
-  return logicStore.validation[props.index];
+  if (!logicStore.validation[props.index]) {
+    return [];
+  }
+
+  return Object.keys(logicStore.validation[props.index].errors).flatMap(
+    (key) => {
+      return [...logicStore.validation[props.index].errors[key]];
+    },
+  );
 });
 
 const evaluate = ref<FormBlockLogic["evaluate"]>(props.rule.evaluate);
diff --git a/resources/js/components/ValidationErrors.vue b/resources/js/components/ValidationErrors.vue
index 603c97e8..3ea7e2e8 100644
--- a/resources/js/components/ValidationErrors.vue
+++ b/resources/js/components/ValidationErrors.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="font-medium text-red-400">Whoops! Something went wrong.</div>
+    <div class="font-medium text-red-400">{{ title }}</div>
     <ul class="mt-1 list-inside list-disc text-sm text-red-400">
       <li v-for="(error, index) in errors" :key="index">
         {{ error }}
@@ -10,7 +10,13 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  errors: string[];
-}>();
+withDefaults(
+  defineProps<{
+    title?: string;
+    errors: string[];
+  }>(),
+  {
+    title: "Whoops! Something went wrong.",
+  },
+);
 </script>

From 970198a1c5ec10823669b3e51a39154ff5da4348 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Sat, 12 Oct 2024 17:45:42 +0200
Subject: [PATCH 15/43] show id on storyboard block

---
 resources/js/components/Factory/Sidebar/Block.vue      | 10 ++++++++--
 .../js/components/Factory/Sidebar/BlockLogicRule.vue   |  2 +-
 .../components/Factory/Sidebar/InsertAfterButton.vue   |  4 ++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/Block.vue b/resources/js/components/Factory/Sidebar/Block.vue
index 3c3af740..9a20c48f 100644
--- a/resources/js/components/Factory/Sidebar/Block.vue
+++ b/resources/js/components/Factory/Sidebar/Block.vue
@@ -9,7 +9,7 @@
     >
       <div
         v-if="showBlockMenus"
-        class="absolute right-3 top-3 hover:opacity-100"
+        class="absolute right-3 top-3 hover:opacity-100 z-20"
         :class="isActive ? 'opacity-100' : 'opacity-25'"
       >
         <D9Menu
@@ -40,8 +40,14 @@
         </D9Menu>
       </div>
 
-      <div class="relative mt-3 flex items-start">
+      <div class="relative flex items-start">
         <div class="pr-4">
+          <div
+            class="bg-grey-700 text-grey-100 inline-block px-2 text-xxs leading-5 rounded mb-1"
+          >
+            {{ block.title && block.title.length ? block.title : block.uuid }}
+          </div>
+
           <ConsentBlockMessage v-if="block.type === 'consent'" />
 
           <DefaultBlockMessage v-if="block.message" :content="block.message" />
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
index 806c4d02..76497b81 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
@@ -158,7 +158,7 @@ const getBlockOption = (block: FormBlockModel) => {
 
   return {
     key: block.uuid,
-    label: `<div class="inline-flex items-center text-xs"><span class="bg-grey-700 text-white rounded mr-2 px-1 py-px w-12 truncate inline-block text-center">${block.title ?? block.uuid}</span><span class="inline-block truncate">${text}</span></div>`,
+    label: `<div class="inline-flex items-center text-xs"><span class="bg-grey-700 text-white rounded mr-2 px-1 py-px w-16 truncate inline-block text-center">${block.title && block.title.length ? block.title : block.uuid}</span><span class="inline-block truncate">${text}</span></div>`,
   };
 };
 
diff --git a/resources/js/components/Factory/Sidebar/InsertAfterButton.vue b/resources/js/components/Factory/Sidebar/InsertAfterButton.vue
index 90dcb6ef..7dd11cb4 100644
--- a/resources/js/components/Factory/Sidebar/InsertAfterButton.vue
+++ b/resources/js/components/Factory/Sidebar/InsertAfterButton.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="group absolute inset-x-0 bottom-0 top-0 flex justify-center">
     <button
-      class="absolute inset-x-0 bottom-[4px] rounded bg-blue-100 py-px leading-none opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+      class="absolute inset-x-0 bottom-[4px] rounded bg-grey-200 h-4 leading-none opacity-0 transition-opacity duration-150 group-hover:opacity-100"
       @click="store.createFormBlock(block)"
     >
-      <D9Icon class="text-blue-900" name="plus-circle" />
+      <D9Icon class="text-grey-900" name="plus-circle" size="xs" />
     </button>
   </div>
 </template>

From 200f0afe35dcb45c31f4665b5aa2a134f62f75d5 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Mon, 14 Oct 2024 10:44:59 +0200
Subject: [PATCH 16/43] wip show rules in sidebar

---
 .../js/components/Factory/Sidebar/Block.vue   | 38 ++++++++-
 resources/locales/de.json                     | 81 ++++++++++---------
 resources/locales/en.json                     |  3 +-
 resources/locales/fr.json                     | 81 ++++++++++---------
 resources/locales/no.json                     | 81 ++++++++++---------
 resources/locales/pl.json                     | 81 ++++++++++---------
 resources/locales/sk.json                     | 81 ++++++++++---------
 resources/locales/uk.json                     | 81 ++++++++++---------
 resources/locales/zh.json                     | 81 ++++++++++---------
 9 files changed, 326 insertions(+), 282 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/Block.vue b/resources/js/components/Factory/Sidebar/Block.vue
index 9a20c48f..82d85a97 100644
--- a/resources/js/components/Factory/Sidebar/Block.vue
+++ b/resources/js/components/Factory/Sidebar/Block.vue
@@ -112,12 +112,43 @@
           </template>
         </button>
       </div>
+
+      <!-- Block Logic -->
+      <div class="mt-4" v-if="block.logics && block.logics.length > 0">
+        <button
+          class="font-semibold mb-2"
+          @click="showBlockLogic = !showBlockLogic"
+        >
+          <D9Icon
+            name="chevron-right"
+            size="sm"
+            class="mr-1"
+            :class="[showBlockLogic ? 'rotate-90' : '']"
+          />
+          {{ t("admin.logicTitle") }}
+        </button>
+        <div class="pl-4" v-show="showBlockLogic">
+          <div class="leading-5">
+            <span class="text-purple-500 font-semibold mr-1">If</span>
+            <span>the response for block</span>
+            <span class="text-grey-700 font-bold ml-1">jR</span>
+            <span class="text-purple-500 font-semibold mx-1">contains</span>
+            <span class="text-grey-700 font-bold">Köln</span>
+          </div>
+          <div class="pl-4">
+            <D9Icon name="chevron-right" size="sm" />
+            <span class="text-green-500 font-semibold ml-2"
+              >hide this block</span
+            >
+          </div>
+        </div>
+      </div>
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, provide } from "vue";
+import { computed, provide, ref } from "vue";
 import ConsentBlockMessage from "./ConsentBlockMessage.vue";
 import DefaultBlockMessage from "./DefaultBlockMessage.vue";
 import BlockInteraction from "./BlockInteraction.vue";
@@ -128,6 +159,7 @@ import useActiveInteractions from "../Shared/useActiveInteractions";
 import { useActiveCard } from "@/utils/useActiveCard";
 import InsertAfterButton from "./InsertAfterButton.vue";
 import { storeToRefs } from "pinia";
+import { useI18n } from "vue-i18n";
 
 const workbench = useWorkbench();
 const store = useForm();
@@ -135,6 +167,8 @@ const logicStore = useLogic();
 
 const { showBlockMenus } = storeToRefs(store);
 
+const { t } = useI18n();
+
 const props = defineProps<{
   block: FormBlockModel;
 }>();
@@ -143,6 +177,8 @@ provide("block", props.block);
 
 const { editableInteractions } = useActiveInteractions(props.block);
 
+const showBlockLogic = ref(false);
+
 const isActive = computed((): boolean => {
   return workbench.block && workbench.block.id === props.block.id
     ? true
diff --git a/resources/locales/de.json b/resources/locales/de.json
index 90695e9c..ebbaf90a 100644
--- a/resources/locales/de.json
+++ b/resources/locales/de.json
@@ -1,42 +1,43 @@
 {
-    "required": "Pflichtfeld",
-    "hints": {
-        "edit": "Drücke {0} um zu bearbeiten",
-        "confirm": "{0} um zu bestätigen"
-    },
-    "validation": {
-        "consent_required": "Um fortzufahren, musst Du den Bedingungen zustimmen.",
-        "field_required": "Dieses Feld ist erforderlich.",
-        "valid_email": "Bitte gib eine gültige E-Mail-Adresse ein.",
-        "valid_link": "Bitte gib einen gültigen Link ein.",
-        "valid_number": "Bitte gib eine gültige Zahl ein.",
-        "valid_phone": "Bitte gib eine gültige Telefonnummer ein.",
-        "option_required": "Bitte wähle eine Option aus.",
-        "error": "Beim Validieren deiner Eingabe ist etwas schief gelaufen.",
-        "max_characters": "Du hast die maximale Anzahl von Zeichen überschritten.",
-        "no_file_interaction": "Es gibt keine gültige Konfiguration, um Dateien zu akzeptieren.",
-        "too_many_files": "Du hast zu viele Dateien hochgeladen. Du kannst bis zu {maxFiles} Dateien hochladen.",
-        "file_size": "Die Datei '{fileName}' überschreitet die maximale Größe von {maxFileSize} MB.",
-        "rating_required": "Bitte wählen Sie eine Bewertung aus."
-    },
-    "admin": {
-        "blocks": "keine Blöcke | 1 Block | {n} Blöcke"
-    },
-    "accept_submit": "Akzeptieren & Absenden",
-    "accept": "Akzeptieren",
-    "close": "Schliessen",
-    "type": "Gib deine Antwort ein",
-    "submit": "Absenden",
-    "privacy_policy": "Datenschutzerklärung",
-    "other": "Andere",
-    "next": "Weiter",
-    "legal_notice": "Impressum",
-    "page_previous": "Zur vorherigen Seite",
-    "page_next": "Zur nächsten Seite",
-    "form_submitted": "Formular abgeschickt",
-    "find_us": "Finde uns hier",
-    "enter": "Enter",
-    "continue": "Weiter",
-    "files_choose": "Wählen Sie Dateien aus",
-    "files_drop": "oder hier ablegen"
+  "required": "Pflichtfeld",
+  "hints": {
+    "edit": "Drücke {0} um zu bearbeiten",
+    "confirm": "{0} um zu bestätigen"
+  },
+  "validation": {
+    "consent_required": "Um fortzufahren, musst Du den Bedingungen zustimmen.",
+    "field_required": "Dieses Feld ist erforderlich.",
+    "valid_email": "Bitte gib eine gültige E-Mail-Adresse ein.",
+    "valid_link": "Bitte gib einen gültigen Link ein.",
+    "valid_number": "Bitte gib eine gültige Zahl ein.",
+    "valid_phone": "Bitte gib eine gültige Telefonnummer ein.",
+    "option_required": "Bitte wähle eine Option aus.",
+    "error": "Beim Validieren deiner Eingabe ist etwas schief gelaufen.",
+    "max_characters": "Du hast die maximale Anzahl von Zeichen überschritten.",
+    "no_file_interaction": "Es gibt keine gültige Konfiguration, um Dateien zu akzeptieren.",
+    "too_many_files": "Du hast zu viele Dateien hochgeladen. Du kannst bis zu {maxFiles} Dateien hochladen.",
+    "file_size": "Die Datei '{fileName}' überschreitet die maximale Größe von {maxFileSize} MB.",
+    "rating_required": "Bitte wählen Sie eine Bewertung aus."
+  },
+  "admin": {
+    "blocks": "keine Blöcke | 1 Block | {n} Blöcke",
+    "logicTitle": "keine Regeln | 1 Regel | {n} Regeln"
+  },
+  "accept_submit": "Akzeptieren & Absenden",
+  "accept": "Akzeptieren",
+  "close": "Schliessen",
+  "type": "Gib deine Antwort ein",
+  "submit": "Absenden",
+  "privacy_policy": "Datenschutzerklärung",
+  "other": "Andere",
+  "next": "Weiter",
+  "legal_notice": "Impressum",
+  "page_previous": "Zur vorherigen Seite",
+  "page_next": "Zur nächsten Seite",
+  "form_submitted": "Formular abgeschickt",
+  "find_us": "Finde uns hier",
+  "enter": "Enter",
+  "continue": "Weiter",
+  "files_choose": "Wählen Sie Dateien aus",
+  "files_drop": "oder hier ablegen"
 }
diff --git a/resources/locales/en.json b/resources/locales/en.json
index 05c8add3..7e60944e 100644
--- a/resources/locales/en.json
+++ b/resources/locales/en.json
@@ -1,6 +1,7 @@
 {
     "admin": {
-        "blocks": "no blocks | 1 block | {n} blocks"
+        "blocks": "no blocks | 1 block | {n} blocks",
+        "logicTitle": "no rules | 1 block rule | {n} block rules"
     },
     "required": "required",
     "hints": {
diff --git a/resources/locales/fr.json b/resources/locales/fr.json
index a1ec8102..fa1a291f 100644
--- a/resources/locales/fr.json
+++ b/resources/locales/fr.json
@@ -1,42 +1,43 @@
 {
-    "admin": {
-        "blocks": "pas de blocs | 1 bloc | {n} blocs"
-    },
-    "required": "obligatoire",
-    "hints": {
-        "edit": "Appuyez sur {0} pour modifier",
-        "confirm": "{0} pour confirmer"
-    },
-    "validation": {
-        "consent_required": "Pour continuer, vous devez accepter les termes et conditions.",
-        "field_required": "Ce champ est obligatoire.",
-        "valid_email": "Veuillez saisir un email valide.",
-        "valid_link": "Veuillez entrer un lien valide.",
-        "valid_number": "S'il vous plait, entrez un nombre valide.",
-        "valid_phone": "S'il vous plaît entrer un numéro de téléphone valide.",
-        "option_required": "Veuillez sélectionner une option.",
-        "error": "Une erreur s'est produite lors de la validation de votre saisie",
-        "max_characters": "Vous avez dépassé le nombre maximum de caractères autorisés.",
-        "no_file_interaction": "Il n'y a aucune configuration valide pour accepter les fichiers",
-        "too_many_files": "Vous avez téléchargé trop de fichiers. Vous pouvez télécharger jusqu'à {maxFiles} fichiers.",
-        "file_size": "Le fichier '{fileName}' dépasse la taille maximale de {maxFileSize} Mo.",
-        "rating_required": "Veuillez choisir une note"
-    },
-    "accept_submit": "Accepter et soumettre",
-    "accept": "Accepter",
-    "close": "Fermer",
-    "type": "Tapez votre réponse",
-    "submit": "Soumettre",
-    "privacy_policy": "Politique de confidentialité",
-    "other": "Autre",
-    "next": "Suivant",
-    "legal_notice": "Mention légale",
-    "page_previous": "Aller à la page précédente",
-    "page_next": "Aller à la page suivante",
-    "form_submitted": "Formulaire soumis",
-    "find_us": "Retrouvez-nous ici",
-    "enter": "Entrer",
-    "continue": "Continuer",
-    "files_choose": "Choisir des fichiers",
-    "files_drop": "ou déposez ici"
+  "admin": {
+    "blocks": "pas de blocs | 1 bloc | {n} blocs",
+    "logicTitle": "pas de règles | 1 règle de blocage | {n} règles de blocage"
+  },
+  "required": "obligatoire",
+  "hints": {
+    "edit": "Appuyez sur {0} pour modifier",
+    "confirm": "{0} pour confirmer"
+  },
+  "validation": {
+    "consent_required": "Pour continuer, vous devez accepter les termes et conditions.",
+    "field_required": "Ce champ est obligatoire.",
+    "valid_email": "Veuillez saisir un email valide.",
+    "valid_link": "Veuillez entrer un lien valide.",
+    "valid_number": "S'il vous plait, entrez un nombre valide.",
+    "valid_phone": "S'il vous plaît entrer un numéro de téléphone valide.",
+    "option_required": "Veuillez sélectionner une option.",
+    "error": "Une erreur s'est produite lors de la validation de votre saisie",
+    "max_characters": "Vous avez dépassé le nombre maximum de caractères autorisés.",
+    "no_file_interaction": "Il n'y a aucune configuration valide pour accepter les fichiers",
+    "too_many_files": "Vous avez téléchargé trop de fichiers. Vous pouvez télécharger jusqu'à {maxFiles} fichiers.",
+    "file_size": "Le fichier '{fileName}' dépasse la taille maximale de {maxFileSize} Mo.",
+    "rating_required": "Veuillez choisir une note"
+  },
+  "accept_submit": "Accepter et soumettre",
+  "accept": "Accepter",
+  "close": "Fermer",
+  "type": "Tapez votre réponse",
+  "submit": "Soumettre",
+  "privacy_policy": "Politique de confidentialité",
+  "other": "Autre",
+  "next": "Suivant",
+  "legal_notice": "Mention légale",
+  "page_previous": "Aller à la page précédente",
+  "page_next": "Aller à la page suivante",
+  "form_submitted": "Formulaire soumis",
+  "find_us": "Retrouvez-nous ici",
+  "enter": "Entrer",
+  "continue": "Continuer",
+  "files_choose": "Choisir des fichiers",
+  "files_drop": "ou déposez ici"
 }
diff --git a/resources/locales/no.json b/resources/locales/no.json
index f0c8deb7..8163097e 100644
--- a/resources/locales/no.json
+++ b/resources/locales/no.json
@@ -1,42 +1,43 @@
 {
-    "admin": {
-        "blocks": "ingen blokker | 1 blokk | {n} blokker"
-    },
-    "required": "påkrevd",
-    "hints": {
-        "edit": "Trykk {0} for å redigere",
-        "confirm": "{0} for å bekrefte"
-    },
-    "validation": {
-        "consent_required": "For å fortsette, må du godta vilkårene.",
-        "field_required": "Dette feltet er påkrevd.",
-        "valid_email": "Vennligst skriv inn en gyldig e-postadresse.",
-        "valid_link": "Vennligst skriv inn en gyldig lenke.",
-        "valid_number": "Vennligst skriv inn et gyldig nummer.",
-        "valid_phone": "Vennligst skriv inn et gyldig telefonnummer.",
-        "option_required": "Vennligst velg et alternativ.",
-        "error": "Noe gikk galt under validering av inndataene dine",
-        "max_characters": "Du har overskredet det maksimale antallet tegn som er tillatt.",
-        "no_file_interaction": "Det er ingen gyldig konfigurasjon for å akseptere filer",
-        "too_many_files": "Du har lastet opp for mange filer. Du kan laste opp opptil {maxFiles} filer.",
-        "file_size": "Filen '{fileName}' overskrider maksimal størrelse på {maxFileSize} MB.",
-        "rating_required": "Vennligst velg en vurdering"
-    },
-    "accept_submit": "Godkjenn og send inn",
-    "accept": "Godkjenn",
-    "close": "Lukk",
-    "type": "Skriv svaret ditt",
-    "submit": "Send inn",
-    "privacy_policy": "Personvern",
-    "other": "Annet",
-    "next": "Neste",
-    "legal_notice": "Juridisk merknad",
-    "page_previous": "Gå til forrige side",
-    "page_next": "Gå til neste side",
-    "form_submitted": "Skjema sendt inn",
-    "find_us": "Finn oss her",
-    "enter": "Legg inn",
-    "continue": "Fortsett",
-    "files_choose": "Velg filer",
-    "files_drop": "eller slipp her"
+  "admin": {
+    "blocks": "ingen blokker | 1 blokk | {n} blokker",
+    "logicTitle": "ingen regler | 1 blokkregel | {n} blokkeringsregler"
+  },
+  "required": "påkrevd",
+  "hints": {
+    "edit": "Trykk {0} for å redigere",
+    "confirm": "{0} for å bekrefte"
+  },
+  "validation": {
+    "consent_required": "For å fortsette, må du godta vilkårene.",
+    "field_required": "Dette feltet er påkrevd.",
+    "valid_email": "Vennligst skriv inn en gyldig e-postadresse.",
+    "valid_link": "Vennligst skriv inn en gyldig lenke.",
+    "valid_number": "Vennligst skriv inn et gyldig nummer.",
+    "valid_phone": "Vennligst skriv inn et gyldig telefonnummer.",
+    "option_required": "Vennligst velg et alternativ.",
+    "error": "Noe gikk galt under validering av inndataene dine",
+    "max_characters": "Du har overskredet det maksimale antallet tegn som er tillatt.",
+    "no_file_interaction": "Det er ingen gyldig konfigurasjon for å akseptere filer",
+    "too_many_files": "Du har lastet opp for mange filer. Du kan laste opp opptil {maxFiles} filer.",
+    "file_size": "Filen '{fileName}' overskrider maksimal størrelse på {maxFileSize} MB.",
+    "rating_required": "Vennligst velg en vurdering"
+  },
+  "accept_submit": "Godkjenn og send inn",
+  "accept": "Godkjenn",
+  "close": "Lukk",
+  "type": "Skriv svaret ditt",
+  "submit": "Send inn",
+  "privacy_policy": "Personvern",
+  "other": "Annet",
+  "next": "Neste",
+  "legal_notice": "Juridisk merknad",
+  "page_previous": "Gå til forrige side",
+  "page_next": "Gå til neste side",
+  "form_submitted": "Skjema sendt inn",
+  "find_us": "Finn oss her",
+  "enter": "Legg inn",
+  "continue": "Fortsett",
+  "files_choose": "Velg filer",
+  "files_drop": "eller slipp her"
 }
diff --git a/resources/locales/pl.json b/resources/locales/pl.json
index 6c5f7a5c..cd53c6ec 100644
--- a/resources/locales/pl.json
+++ b/resources/locales/pl.json
@@ -1,42 +1,43 @@
 {
-    "admin": {
-        "blocks": "brak bloków | 1 blok | {n} bloków"
-    },
-    "required": "wymagane",
-    "hints": {
-        "edit": "Naciśnij {0} aby edytować",
-        "confirm": "{0} aby potwierdzić"
-    },
-    "validation": {
-        "consent_required": "Aby kontynuować, musisz zaakceptować warunki.",
-        "field_required": "Tol pole jest wymagane.",
-        "valid_email": "Proszę wprowadzić prawidłowy adres e-mail.",
-        "valid_link": "Proszę wprowadzić prawidłowy link.",
-        "valid_number": "Proszę wprowadzić prawidłową liczbę.",
-        "valid_phone": "Proszę wprowadzić prawidłowy numer telefonu.",
-        "option_required": "Proszę wybrać opcję.",
-        "error": "Coś poszło nie tak podczas sprawdzania poprawności danych wejściowych",
-        "max_characters": "Przekroczyłeś maksymalną dozwoloną liczbę znaków.",
-        "no_file_interaction": "Nie ma poprawnej konfiguracji do akceptowania plików",
-        "too_many_files": "Przesłałeś zbyt wiele plików. Możesz przesłać maksymalnie {maxFiles} plików.",
-        "file_size": "Plik '{fileName}' przekracza maksymalny rozmiar {maxFileSize} MB.",
-        "rating_required": "Proszę wybrać ocenę."
-    },
-    "accept_submit": "Zaakceptuj i wyślij",
-    "accept": "Akceptuj",
-    "close": "Zamknij",
-    "type": "Wprowadź swoją odpowiedź",
-    "submit": "Wyślij",
-    "privacy_policy": "Polityka Prywatności",
-    "other": "Inne",
-    "next": "Następny",
-    "legal_notice": "Informacje Prawne",
-    "page_previous": "Idź do poprzedniej Strony",
-    "page_next": "Idź do następnej Strony",
-    "form_submitted": "Formularz przesłany",
-    "find_us": "Znajdziesz nas tutaj",
-    "enter": "Enter",
-    "continue": "Kontynuuj",
-    "files_choose": "Wybierz pliki",
-    "files_drop": "lub upuść tutaj"
+  "admin": {
+    "blocks": "brak bloków | 1 blok | {n} bloków",
+    "logicTitle": "brak zasad | 1 reguła bloku | {n} reguły blokowania"
+  },
+  "required": "wymagane",
+  "hints": {
+    "edit": "Naciśnij {0} aby edytować",
+    "confirm": "{0} aby potwierdzić"
+  },
+  "validation": {
+    "consent_required": "Aby kontynuować, musisz zaakceptować warunki.",
+    "field_required": "Tol pole jest wymagane.",
+    "valid_email": "Proszę wprowadzić prawidłowy adres e-mail.",
+    "valid_link": "Proszę wprowadzić prawidłowy link.",
+    "valid_number": "Proszę wprowadzić prawidłową liczbę.",
+    "valid_phone": "Proszę wprowadzić prawidłowy numer telefonu.",
+    "option_required": "Proszę wybrać opcję.",
+    "error": "Coś poszło nie tak podczas sprawdzania poprawności danych wejściowych",
+    "max_characters": "Przekroczyłeś maksymalną dozwoloną liczbę znaków.",
+    "no_file_interaction": "Nie ma poprawnej konfiguracji do akceptowania plików",
+    "too_many_files": "Przesłałeś zbyt wiele plików. Możesz przesłać maksymalnie {maxFiles} plików.",
+    "file_size": "Plik '{fileName}' przekracza maksymalny rozmiar {maxFileSize} MB.",
+    "rating_required": "Proszę wybrać ocenę."
+  },
+  "accept_submit": "Zaakceptuj i wyślij",
+  "accept": "Akceptuj",
+  "close": "Zamknij",
+  "type": "Wprowadź swoją odpowiedź",
+  "submit": "Wyślij",
+  "privacy_policy": "Polityka Prywatności",
+  "other": "Inne",
+  "next": "Następny",
+  "legal_notice": "Informacje Prawne",
+  "page_previous": "Idź do poprzedniej Strony",
+  "page_next": "Idź do następnej Strony",
+  "form_submitted": "Formularz przesłany",
+  "find_us": "Znajdziesz nas tutaj",
+  "enter": "Enter",
+  "continue": "Kontynuuj",
+  "files_choose": "Wybierz pliki",
+  "files_drop": "lub upuść tutaj"
 }
diff --git a/resources/locales/sk.json b/resources/locales/sk.json
index 210e1818..6ee19e54 100644
--- a/resources/locales/sk.json
+++ b/resources/locales/sk.json
@@ -1,42 +1,43 @@
 {
-    "required": "Povinné",
-    "hints": {
-        "edit": "Stlač {0} pre úpravu",
-        "confirm": "{0} pre potvrdenie"
-    },
-    "validation": {
-        "consent_required": "Pre pokračovanie je potrebný súhlas.",
-        "field_required": "Toto pole je povinné.",
-        "valid_email": "Prosíme, zadajte správnu e-mailovú adresu.",
-        "valid_link": "Prosíme, zadajte sprvány link.",
-        "valid_number": "Prosíme, zadajte správne číslo.",
-        "valid_phone": "Prosíme, zadajte správne telefónne číslo.",
-        "option_required": "Prosíme, vyberte nejakú možnosť.",
-        "error": "Niečo sa nepodarilo pri overení Vašich údajov",
-        "max_characters": "Prekročili ste maximálny povolený počet znakov.",
-        "no_file_interaction": "Neexistuje platná konfigurácia na prijímanie súborov.",
-        "too_many_files": "Nahrali ste príliš veľa súborov. Môžete nahrať až {maxFiles} súborov.",
-        "file_size": "Súbor '{fileName}' prekračuje maximálnu veľkosť {maxFileSize} MB.",
-        "rating_required": "Prosím, vyberte si hodnotenie."
-    },
-    "admin": {
-        "blocks": "žiadne bloky | 1 blok | {n} blokov"
-    },
-    "accept_submit": "Akceptovať a odoslať",
-    "accept": "Akceptovať",
-    "close": "Zavrieť",
-    "type": "Zadajte Vašu odpoveď",
-    "submit": "Odoslať",
-    "privacy_policy": "Ochrana osobných údajov",
-    "other": "Iné",
-    "next": "Ďalej",
-    "legal_notice": "Pravidlá používania",
-    "page_previous": "Na predošlú stránku",
-    "page_next": "Na ďalšiu stránku",
-    "form_submitted": "Formulár odoslaný",
-    "find_us": "Nájdete nás tu",
-    "enter": "Enter",
-    "continue": "Pokračovať",
-    "files_choose": "Vyberte súbory",
-    "files_drop": "alebo sem spustiť"
+  "required": "Povinné",
+  "hints": {
+    "edit": "Stlač {0} pre úpravu",
+    "confirm": "{0} pre potvrdenie"
+  },
+  "validation": {
+    "consent_required": "Pre pokračovanie je potrebný súhlas.",
+    "field_required": "Toto pole je povinné.",
+    "valid_email": "Prosíme, zadajte správnu e-mailovú adresu.",
+    "valid_link": "Prosíme, zadajte sprvány link.",
+    "valid_number": "Prosíme, zadajte správne číslo.",
+    "valid_phone": "Prosíme, zadajte správne telefónne číslo.",
+    "option_required": "Prosíme, vyberte nejakú možnosť.",
+    "error": "Niečo sa nepodarilo pri overení Vašich údajov",
+    "max_characters": "Prekročili ste maximálny povolený počet znakov.",
+    "no_file_interaction": "Neexistuje platná konfigurácia na prijímanie súborov.",
+    "too_many_files": "Nahrali ste príliš veľa súborov. Môžete nahrať až {maxFiles} súborov.",
+    "file_size": "Súbor '{fileName}' prekračuje maximálnu veľkosť {maxFileSize} MB.",
+    "rating_required": "Prosím, vyberte si hodnotenie."
+  },
+  "admin": {
+    "blocks": "žiadne bloky | 1 blok | {n} blokov",
+    "logicTitle": "žiadne pravidlá | pravidlo 1 bloku | {n} pravidiel blokovania"
+  },
+  "accept_submit": "Akceptovať a odoslať",
+  "accept": "Akceptovať",
+  "close": "Zavrieť",
+  "type": "Zadajte Vašu odpoveď",
+  "submit": "Odoslať",
+  "privacy_policy": "Ochrana osobných údajov",
+  "other": "Iné",
+  "next": "Ďalej",
+  "legal_notice": "Pravidlá používania",
+  "page_previous": "Na predošlú stránku",
+  "page_next": "Na ďalšiu stránku",
+  "form_submitted": "Formulár odoslaný",
+  "find_us": "Nájdete nás tu",
+  "enter": "Enter",
+  "continue": "Pokračovať",
+  "files_choose": "Vyberte súbory",
+  "files_drop": "alebo sem spustiť"
 }
diff --git a/resources/locales/uk.json b/resources/locales/uk.json
index 29da7384..53493121 100644
--- a/resources/locales/uk.json
+++ b/resources/locales/uk.json
@@ -1,42 +1,43 @@
 {
-    "admin": {
-        "blocks": "немає блоків | 1 блок | {n} блоків"
-    },
-    "required": "необхідно",
-    "hints": {
-        "edit": "Натисніть {0} щоб відредагувати",
-        "confirm": "{0} щоб підтвердити"
-    },
-    "validation": {
-        "consent_required": "Щоб продовжити, ви повинні погодитися з умовами та положеннями.",
-        "field_required": "Це поле обов'язкове для заповнення.",
-        "valid_email": "Будь ласка, введіть правильну email адресу.",
-        "valid_link": "Будь ласка, введіть правильне посилання.",
-        "valid_number": "Будь ласка, введіть правильний номер.",
-        "valid_phone": "Будь ласка, введіть правильний номер телефона.",
-        "option_required": "Будь ласка, оберіть варіант.",
-        "error": "Щось пішло не так під час перевірки ваших даних",
-        "max_characters": "Ви перевищили максимально допустиму кількість символів.",
-        "no_file_interaction": "Немає дійсної конфігурації для прийняття файлів",
-        "too_many_files": "Ви завантажили забагато файлів. Ви можете завантажити до {maxFiles} файлів.",
-        "file_size": "Файл '{fileName}' перевищує максимальний розмір {maxFileSize} МБ.",
-        "rating_required": "Будь ласка, оберіть рейтинг."
-    },
-    "accept_submit": "Прийняти та відправити",
-    "accept": "Прийняти",
-    "close": "Закрити",
-    "type": "Введіть свою відповідь",
-    "submit": "Надіслати",
-    "privacy_policy": "Політика конфіденційності",
-    "other": "Інше",
-    "next": "Наступне",
-    "legal_notice": "Юридичне повідомлення",
-    "page_previous": "Повернутись на минулу сторінку",
-    "page_next": "Перейти на наступну сторінку",
-    "form_submitted": "Форма надіслана",
-    "find_us": "Знайдіть нас тут",
-    "enter": "Ввести",
-    "continue": "Продовжуйте",
-    "files_choose": "Виберіть файли",
-    "files_drop": "або впустіть сюди"
+  "admin": {
+    "blocks": "немає блоків | 1 блок | {n} блоків",
+    "logicTitle": "немає правил | 1 правило блоку | {n} правил блокування"
+  },
+  "required": "необхідно",
+  "hints": {
+    "edit": "Натисніть {0} щоб відредагувати",
+    "confirm": "{0} щоб підтвердити"
+  },
+  "validation": {
+    "consent_required": "Щоб продовжити, ви повинні погодитися з умовами та положеннями.",
+    "field_required": "Це поле обов'язкове для заповнення.",
+    "valid_email": "Будь ласка, введіть правильну email адресу.",
+    "valid_link": "Будь ласка, введіть правильне посилання.",
+    "valid_number": "Будь ласка, введіть правильний номер.",
+    "valid_phone": "Будь ласка, введіть правильний номер телефона.",
+    "option_required": "Будь ласка, оберіть варіант.",
+    "error": "Щось пішло не так під час перевірки ваших даних",
+    "max_characters": "Ви перевищили максимально допустиму кількість символів.",
+    "no_file_interaction": "Немає дійсної конфігурації для прийняття файлів",
+    "too_many_files": "Ви завантажили забагато файлів. Ви можете завантажити до {maxFiles} файлів.",
+    "file_size": "Файл '{fileName}' перевищує максимальний розмір {maxFileSize} МБ.",
+    "rating_required": "Будь ласка, оберіть рейтинг."
+  },
+  "accept_submit": "Прийняти та відправити",
+  "accept": "Прийняти",
+  "close": "Закрити",
+  "type": "Введіть свою відповідь",
+  "submit": "Надіслати",
+  "privacy_policy": "Політика конфіденційності",
+  "other": "Інше",
+  "next": "Наступне",
+  "legal_notice": "Юридичне повідомлення",
+  "page_previous": "Повернутись на минулу сторінку",
+  "page_next": "Перейти на наступну сторінку",
+  "form_submitted": "Форма надіслана",
+  "find_us": "Знайдіть нас тут",
+  "enter": "Ввести",
+  "continue": "Продовжуйте",
+  "files_choose": "Виберіть файли",
+  "files_drop": "або впустіть сюди"
 }
diff --git a/resources/locales/zh.json b/resources/locales/zh.json
index 047dd7d4..849710d1 100644
--- a/resources/locales/zh.json
+++ b/resources/locales/zh.json
@@ -1,42 +1,43 @@
 {
-    "admin": {
-        "blocks": "没有内容块 | 1 内容块 | {n} 内容块"
-    },
-    "required": "必填",
-    "hints": {
-        "edit": "按 {0} 进行编辑",
-        "confirm": "按 {0} 确认"
-    },
-    "validation": {
-        "consent_required": "继续操作前，您必须同意条款和条件。",
-        "field_required": "此字段为必填项。",
-        "valid_email": "请输入有效的邮箱。",
-        "valid_link": "请输入有效的链接。",
-        "valid_number": "请输入有效的数字。",
-        "valid_phone": "请输入有效的电话号码。",
-        "option_required": "请选择一个选项。",
-        "error": "验证您的输入时出错",
-        "max_characters": "您已超过允许的最大字符数。",
-        "no_file_interaction": "没有有效的配置来接受文件",
-        "too_many_files": "您已上传了太多文件。您最多可以上传 {maxFiles} 个文件。",
-        "file_size": "文件“{fileName}”超过了 {maxFileSize} MB 的最大大小。",
-        "rating_required": "请您选择一个评分"
-    },
-    "accept_submit": "接受并提交",
-    "accept": "接受",
-    "close": "关闭",
-    "type": "输入您的答案",
-    "submit": "提交",
-    "privacy_policy": "隐私政策",
-    "other": "其他",
-    "next": "下一步",
-    "legal_notice": "法律声明",
-    "page_previous": "返回上一页",
-    "page_next": "前往下一页",
-    "form_submitted": "表单已提交",
-    "find_us": "在这里找到我们",
-    "enter": "输入",
-    "continue": "继续",
-    "files_choose": "选择文件",
-    "files_drop": "或者拖放到这里"
+  "admin": {
+    "blocks": "没有内容块 | 1 内容块 | {n} 内容块",
+    "logicTitle": "没有规则| 1 块规则 | {n} 块规则"
+  },
+  "required": "必填",
+  "hints": {
+    "edit": "按 {0} 进行编辑",
+    "confirm": "按 {0} 确认"
+  },
+  "validation": {
+    "consent_required": "继续操作前，您必须同意条款和条件。",
+    "field_required": "此字段为必填项。",
+    "valid_email": "请输入有效的邮箱。",
+    "valid_link": "请输入有效的链接。",
+    "valid_number": "请输入有效的数字。",
+    "valid_phone": "请输入有效的电话号码。",
+    "option_required": "请选择一个选项。",
+    "error": "验证您的输入时出错",
+    "max_characters": "您已超过允许的最大字符数。",
+    "no_file_interaction": "没有有效的配置来接受文件",
+    "too_many_files": "您已上传了太多文件。您最多可以上传 {maxFiles} 个文件。",
+    "file_size": "文件“{fileName}”超过了 {maxFileSize} MB 的最大大小。",
+    "rating_required": "请您选择一个评分"
+  },
+  "accept_submit": "接受并提交",
+  "accept": "接受",
+  "close": "关闭",
+  "type": "输入您的答案",
+  "submit": "提交",
+  "privacy_policy": "隐私政策",
+  "other": "其他",
+  "next": "下一步",
+  "legal_notice": "法律声明",
+  "page_previous": "返回上一页",
+  "page_next": "前往下一页",
+  "form_submitted": "表单已提交",
+  "find_us": "在这里找到我们",
+  "enter": "输入",
+  "continue": "继续",
+  "files_choose": "选择文件",
+  "files_drop": "或者拖放到这里"
 }

From 89960d47e4229b59ee817d60856f0133d821f833 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 17 Oct 2024 16:59:56 +0200
Subject: [PATCH 17/43] wip

---
 package-lock.json                             |  8 +-
 package.json                                  |  2 +-
 resources/css/_typography.css                 |  5 ++
 .../js/components/Factory/Sidebar/Block.vue   | 44 ++---------
 .../Factory/Sidebar/BlockLogicEdit.vue        | 11 ++-
 .../Factory/Sidebar/BlockLogicRule.vue        |  4 +-
 .../Factory/Sidebar/BlockLogicVisualizer.vue  | 73 +++++++++++++++++++
 .../js/components/Factory/Sidebar/Group.vue   | 23 +++---
 .../components/Factory/Sidebar/Storyboard.vue | 13 +++-
 resources/js/stores/form.ts                   |  6 ++
 10 files changed, 128 insertions(+), 61 deletions(-)
 create mode 100644 resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue

diff --git a/package-lock.json b/package-lock.json
index 9666cd31..3afd6619 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
             "version": "2.0.1",
             "license": "GNU Affero General Public License v3.0",
             "dependencies": {
-                "@deck9/ui": "^0.15.3",
+                "@deck9/ui": "^0.15.5",
                 "@headlessui/vue": "^1.7.23",
                 "@highlightjs/vue-plugin": "^2.1.0",
                 "@inertiajs/vue3": "^1.2.0",
@@ -318,9 +318,9 @@
             }
         },
         "node_modules/@deck9/ui": {
-            "version": "0.15.3",
-            "resolved": "https://registry.npmjs.org/@deck9/ui/-/ui-0.15.3.tgz",
-            "integrity": "sha512-8iyHy/Ht9lmq1+LfNHgobEpzZOLkdq7jPQYDLBZqeAOuCAWckkVHhjPwKYsgffVhssMmHUs1CArzLLAHJk7xwQ==",
+            "version": "0.15.5",
+            "resolved": "https://registry.npmjs.org/@deck9/ui/-/ui-0.15.5.tgz",
+            "integrity": "sha512-9a7IuimXfCo6f3GwbGc6mfgU120zR3zJ/xQjHbIjcMqDdli02MCZIH++7SNElY1G9Cait/yisujnQOFawGrPWw==",
             "license": "MIT",
             "dependencies": {
                 "@deck9/tailwindcss-recursive-font-helper": "^1.0.1",
diff --git a/package.json b/package.json
index 3357fd63..fa8f850a 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
         "vitest": "^2.1.1"
     },
     "dependencies": {
-        "@deck9/ui": "^0.15.3",
+        "@deck9/ui": "^0.15.5",
         "@headlessui/vue": "^1.7.23",
         "@highlightjs/vue-plugin": "^2.1.0",
         "@inertiajs/vue3": "^1.2.0",
diff --git a/resources/css/_typography.css b/resources/css/_typography.css
index 26f11af1..23ab6fce 100644
--- a/resources/css/_typography.css
+++ b/resources/css/_typography.css
@@ -64,4 +64,9 @@
     img {
         @apply max-w-full my-4;
     }
+}
+
+
+pre {
+    @apply bg-grey-900 text-xxs p-4 rounded text-white leading-none my-2;
 }
\ No newline at end of file
diff --git a/resources/js/components/Factory/Sidebar/Block.vue b/resources/js/components/Factory/Sidebar/Block.vue
index 82d85a97..99d2c0e5 100644
--- a/resources/js/components/Factory/Sidebar/Block.vue
+++ b/resources/js/components/Factory/Sidebar/Block.vue
@@ -9,7 +9,7 @@
     >
       <div
         v-if="showBlockMenus"
-        class="absolute right-3 top-3 hover:opacity-100 z-20"
+        class="absolute right-3 top-3 hover:opacity-100 z-10"
         :class="isActive ? 'opacity-100' : 'opacity-25'"
       >
         <D9Menu
@@ -74,6 +74,10 @@
         >
           <D9Icon name="code-branch" size="sm" />
           <span>Block Logic</span>
+          <span v-if="block?.logics && block.logics.length > 0"
+            >(<strong>{{ block.logics?.length }}</strong
+            >)</span
+          >
         </button>
         <button
           class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
@@ -114,44 +118,17 @@
       </div>
 
       <!-- Block Logic -->
-      <div class="mt-4" v-if="block.logics && block.logics.length > 0">
-        <button
-          class="font-semibold mb-2"
-          @click="showBlockLogic = !showBlockLogic"
-        >
-          <D9Icon
-            name="chevron-right"
-            size="sm"
-            class="mr-1"
-            :class="[showBlockLogic ? 'rotate-90' : '']"
-          />
-          {{ t("admin.logicTitle") }}
-        </button>
-        <div class="pl-4" v-show="showBlockLogic">
-          <div class="leading-5">
-            <span class="text-purple-500 font-semibold mr-1">If</span>
-            <span>the response for block</span>
-            <span class="text-grey-700 font-bold ml-1">jR</span>
-            <span class="text-purple-500 font-semibold mx-1">contains</span>
-            <span class="text-grey-700 font-bold">Köln</span>
-          </div>
-          <div class="pl-4">
-            <D9Icon name="chevron-right" size="sm" />
-            <span class="text-green-500 font-semibold ml-2"
-              >hide this block</span
-            >
-          </div>
-        </div>
-      </div>
+      <BlockLogicVisualizer v-if="store.showLogicInStoryboard" />
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, provide, ref } from "vue";
+import { computed, provide } from "vue";
 import ConsentBlockMessage from "./ConsentBlockMessage.vue";
 import DefaultBlockMessage from "./DefaultBlockMessage.vue";
 import BlockInteraction from "./BlockInteraction.vue";
+import BlockLogicVisualizer from "./BlockLogicVisualizer.vue";
 import { useWorkbench, useForm, useLogic } from "@/stores";
 import { D9Menu, D9MenuLink, D9Icon } from "@deck9/ui";
 import copy from "copy-text-to-clipboard";
@@ -159,7 +136,6 @@ import useActiveInteractions from "../Shared/useActiveInteractions";
 import { useActiveCard } from "@/utils/useActiveCard";
 import InsertAfterButton from "./InsertAfterButton.vue";
 import { storeToRefs } from "pinia";
-import { useI18n } from "vue-i18n";
 
 const workbench = useWorkbench();
 const store = useForm();
@@ -167,8 +143,6 @@ const logicStore = useLogic();
 
 const { showBlockMenus } = storeToRefs(store);
 
-const { t } = useI18n();
-
 const props = defineProps<{
   block: FormBlockModel;
 }>();
@@ -177,8 +151,6 @@ provide("block", props.block);
 
 const { editableInteractions } = useActiveInteractions(props.block);
 
-const showBlockLogic = ref(false);
-
 const isActive = computed((): boolean => {
   return workbench.block && workbench.block.id === props.block.id
     ? true
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
index 677933cf..6eeb686c 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
@@ -60,7 +60,7 @@
 
                     <D9Button
                       type="button"
-                      label="Add rule"
+                      label="Rule"
                       @click="store.addRule()"
                       icon="plus"
                       color="dark"
@@ -119,11 +119,16 @@ const { isShowingLogicEditor, block } = storeToRefs(store);
 const save = async () => {
   isSaving.value = true;
 
-  await store.saveBlockLogic();
+  const result = await store.saveBlockLogic();
+
+  if (result && result.failed > 0) {
+    isSaving.value = false;
+    return;
+  }
 
   setTimeout(() => {
     isSaving.value = false;
-    // store.hideLogicEditor();
+    store.hideLogicEditor();
   }, 250);
 };
 
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
index 76497b81..1fc3953c 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
@@ -92,9 +92,11 @@
 
       <D9Button
         class="mt-3"
-        :label="hasConditions ? 'Add another condition' : 'Add condition'"
+        label="Condition"
         icon="plus"
         size="small"
+        color="dark"
+        icon-position="left"
         @click="addCondition"
       />
 
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue b/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
new file mode 100644
index 00000000..05826d12
--- /dev/null
+++ b/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="mt-4 space-y-4"
+    v-if="showBlockLogic && block && block.logics && block.logics.length > 0"
+  >
+    <div v-for="rule in block.logics" :key="rule.id">
+      <!-- Rule Conditions -->
+      <div
+        class="leading-none"
+        v-for="(condition, index) in rule.conditions"
+        :key="`${rule.id}-condition-${index}`"
+      >
+        <div
+          class="-space-x-px grid grid-cols-5 relative text-xs leading-none -mb-px"
+        >
+          <div
+            class="bg-blue-100 border border-blue-300 px-2 text-blue-800 text-center font-base py-1 z-10"
+            :class="[index === 0 ? 'rounded-tl-md' : '']"
+          >
+            <span v-if="index !== 0">{{ condition.chainOperator }}</span>
+            If
+          </div>
+          <div
+            class="text-grey-700 font-base border border-blue-100 bg-white px-2 py-1 text-center"
+          >
+            {{ condition.source }}
+          </div>
+          <div
+            class="border border-blue-100 bg-white px-2 py-1 text-center font-semibold"
+          >
+            {{ condition.operator }}
+          </div>
+          <div
+            class="text-grey-700 font-base border border-blue-100 bg-white px-2 py-1 text-center col-span-2"
+            :class="[index === 0 ? 'rounded-tr-md' : '']"
+          >
+            {{ condition.value }}
+          </div>
+        </div>
+      </div>
+      <div
+        class="-space-x-px grid grid-cols-5 relative text-xs leading-none -mb-px"
+      >
+        <div
+          class="bg-green-100 border border-green-400 px-3 text-green-800 text-center font-base py-1 z-10 rounded-bl-md"
+        >
+          then
+        </div>
+        <div
+          class="text-grey-700 font-base border border-blue-100 bg-white px-3 py-1 text-center col-span-4 rounded-br-md"
+        >
+          <template v-if="rule.action === 'show'">
+            <D9Icon name="eye" size="sm" />
+            show this block
+          </template>
+          <template v-else>
+            <D9Icon name="eye-slash" size="sm" />
+            hide this block
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { D9Icon } from "@deck9/ui";
+import { inject, ref } from "vue";
+
+const block: FormBlockModel | null = inject("block") ?? null;
+
+const showBlockLogic = ref(true);
+</script>
diff --git a/resources/js/components/Factory/Sidebar/Group.vue b/resources/js/components/Factory/Sidebar/Group.vue
index 5594c078..b61bcc79 100644
--- a/resources/js/components/Factory/Sidebar/Group.vue
+++ b/resources/js/components/Factory/Sidebar/Group.vue
@@ -6,25 +6,22 @@
       :class="[cardStyle, { 'opacity-50': block.is_disabled }]"
       @click.stop="workbench.putOnWorkbench(block)"
     >
-      <h1
-        class="-ml-2 mr-4 rounded px-2 py-1 font-bold text-grey-400 hover:bg-grey-100"
+      <button
+        class="-ml-2 rounded pl-2 pr-5 py-1 font-bold text-grey-400 hover:bg-grey-100 block text-left"
         :class="[{ 'mb-3': !isCollapsed }]"
+        @click.prevent="toggleGroup"
       >
-        <button
-          class="mr-1 cursor-pointer hover:text-blue-400"
-          @click.prevent="toggleGroup"
-        >
-          <D9Icon
-            class="transition-transform duration-150"
-            :class="[{ '-rotate-90': isCollapsed }]"
-            name="chevron-down"
-          />
-        </button>
+        <D9Icon
+          class="transition-transform duration-150 mr-2"
+          :class="[{ '-rotate-90': isCollapsed }]"
+          name="chevron-down"
+        />
+        <D9Icon name="layer-group" size="sm" />
         {{ block.title ?? "Group" }}
         <span class="font-light italic" v-show="isCollapsed"
           >({{ t("admin.blocks", groupCount) }})</span
         >
-      </h1>
+      </button>
       <div
         v-if="showBlockMenus"
         class="absolute right-3 top-2 hover:opacity-100"
diff --git a/resources/js/components/Factory/Sidebar/Storyboard.vue b/resources/js/components/Factory/Sidebar/Storyboard.vue
index 902b1e3b..759de1e9 100644
--- a/resources/js/components/Factory/Sidebar/Storyboard.vue
+++ b/resources/js/components/Factory/Sidebar/Storyboard.vue
@@ -49,19 +49,26 @@
       class="flex items-center justify-center gap-x-2 border-t border-grey-200 bg-white px-4 py-3"
     >
       <D9Button
-        label="Create Block"
+        label="Block"
         color="dark"
         icon="plus"
         icon-position="right"
         @click="store.createFormBlock()"
       />
       <D9Button
-        label="Create Group"
+        label="Group"
         color="light"
-        icon="file-lines"
+        icon="layer-group"
         icon-position="right"
         @click="store.createFormBlock(null, 'group')"
       />
+      <D9Button
+        :label="store.showLogicInStoryboard ? 'Hide Logic' : 'Show Logic'"
+        color="light"
+        icon="code-branch"
+        icon-position="right"
+        @click="store.toggleLogicInStoryboard()"
+      />
     </div>
   </div>
   <BlockLogicEdit />
diff --git a/resources/js/stores/form.ts b/resources/js/stores/form.ts
index c078b020..dbb3399d 100644
--- a/resources/js/stores/form.ts
+++ b/resources/js/stores/form.ts
@@ -24,6 +24,7 @@ interface FormStore {
     mapping: Record<FormBlockType, FormBlockInteractionType> | null;
     isCssTransitionEnabled: boolean;
     isBlockMenuEnabled: boolean;
+    showLogicInStoryboard: boolean;
 }
 
 export const useForm = defineStore("form", {
@@ -34,6 +35,7 @@ export const useForm = defineStore("form", {
             blocks: null,
             isCssTransitionEnabled: true,
             isBlockMenuEnabled: true,
+            showLogicInStoryboard: false,
         };
     },
 
@@ -123,6 +125,10 @@ export const useForm = defineStore("form", {
             this.isBlockMenuEnabled = false;
         },
 
+        toggleLogicInStoryboard() {
+            this.showLogicInStoryboard = !this.showLogicInStoryboard;
+        },
+
         async refreshForm(includeSubmissions = false) {
             if (this.form) {
                 const response = await callGetForm(this.form);

From e47d5d87e3381dee4bf1542857bf78f28684745e Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 18 Oct 2024 15:32:19 +0200
Subject: [PATCH 18/43] fix ui of block logic in sidebar

---
 .../Factory/Sidebar/BlockLogicVisualizer.vue  | 51 ++++++++++---------
 .../components/Factory/Sidebar/Storyboard.vue |  7 ---
 resources/js/stores/form.ts                   |  2 +-
 3 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue b/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
index 05826d12..4ce565ee 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
@@ -3,51 +3,52 @@
     class="mt-4 space-y-4"
     v-if="showBlockLogic && block && block.logics && block.logics.length > 0"
   >
-    <div v-for="rule in block.logics" :key="rule.id">
+    <div
+      class="grid grid-cols-6 text-xs leading-none items-center gap-1 border-l-2 border-blue-200"
+      v-for="rule in block.logics"
+      :key="rule.id"
+    >
       <!-- Rule Conditions -->
-      <div
-        class="leading-none"
+      <template
         v-for="(condition, index) in rule.conditions"
         :key="`${rule.id}-condition-${index}`"
       >
-        <div
-          class="-space-x-px grid grid-cols-5 relative text-xs leading-none -mb-px"
-        >
-          <div
-            class="bg-blue-100 border border-blue-300 px-2 text-blue-800 text-center font-base py-1 z-10"
-            :class="[index === 0 ? 'rounded-tl-md' : '']"
-          >
-            <span v-if="index !== 0">{{ condition.chainOperator }}</span>
-            If
-          </div>
+        <!-- Operator -->
+        <div class="text-right pr-3">
+          <span v-if="index !== 0">{{ condition.chainOperator }}</span>
+          <span v-else>If</span>
+        </div>
+
+        <!-- Condition -->
+        <div class="flex col-span-5 -space-x-px">
           <div
-            class="text-grey-700 font-base border border-blue-100 bg-white px-2 py-1 text-center"
+            class="text-grey-700 font-base border border-grey-400 bg-white px-2 py-1 text-center rounded-l"
           >
             {{ condition.source }}
           </div>
           <div
-            class="border border-blue-100 bg-white px-2 py-1 text-center font-semibold"
+            class="border border-grey-400 border-l-grey-300 bg-white px-2 py-1 text-center font-semibold text-grey-500"
           >
             {{ condition.operator }}
           </div>
           <div
-            class="text-grey-700 font-base border border-blue-100 bg-white px-2 py-1 text-center col-span-2"
+            class="text-grey-700 font-base border border-grey-400 border-l-grey-300 bg-white px-2 py-1 text-center rounded-r"
             :class="[index === 0 ? 'rounded-tr-md' : '']"
           >
             {{ condition.value }}
           </div>
         </div>
+      </template>
+
+      <!-- Rule Action -->
+
+      <div class="text-right pr-3">
+        <span>then</span>
       </div>
-      <div
-        class="-space-x-px grid grid-cols-5 relative text-xs leading-none -mb-px"
-      >
-        <div
-          class="bg-green-100 border border-green-400 px-3 text-green-800 text-center font-base py-1 z-10 rounded-bl-md"
-        >
-          then
-        </div>
+
+      <div class="col-span-5">
         <div
-          class="text-grey-700 font-base border border-blue-100 bg-white px-3 py-1 text-center col-span-4 rounded-br-md"
+          class="inline-block text-grey-700 font-base border border-grey-400 bg-white px-2 py-1 rounded"
         >
           <template v-if="rule.action === 'show'">
             <D9Icon name="eye" size="sm" />
diff --git a/resources/js/components/Factory/Sidebar/Storyboard.vue b/resources/js/components/Factory/Sidebar/Storyboard.vue
index 759de1e9..b0ca28e9 100644
--- a/resources/js/components/Factory/Sidebar/Storyboard.vue
+++ b/resources/js/components/Factory/Sidebar/Storyboard.vue
@@ -62,13 +62,6 @@
         icon-position="right"
         @click="store.createFormBlock(null, 'group')"
       />
-      <D9Button
-        :label="store.showLogicInStoryboard ? 'Hide Logic' : 'Show Logic'"
-        color="light"
-        icon="code-branch"
-        icon-position="right"
-        @click="store.toggleLogicInStoryboard()"
-      />
     </div>
   </div>
   <BlockLogicEdit />
diff --git a/resources/js/stores/form.ts b/resources/js/stores/form.ts
index dbb3399d..107cb9a7 100644
--- a/resources/js/stores/form.ts
+++ b/resources/js/stores/form.ts
@@ -35,7 +35,7 @@ export const useForm = defineStore("form", {
             blocks: null,
             isCssTransitionEnabled: true,
             isBlockMenuEnabled: true,
-            showLogicInStoryboard: false,
+            showLogicInStoryboard: true,
         };
     },
 

From 564353d4b0c8d29120c6e28c121e02b17b78e115 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 18 Oct 2024 17:50:41 +0200
Subject: [PATCH 19/43] add new block menu to group

---
 .../js/components/Factory/Sidebar/Block.vue   | 89 ++-----------------
 .../Factory/Sidebar/BlockFooter.vue           | 89 +++++++++++++++++++
 .../js/components/Factory/Sidebar/Group.vue   | 23 +++--
 3 files changed, 104 insertions(+), 97 deletions(-)
 create mode 100644 resources/js/components/Factory/Sidebar/BlockFooter.vue

diff --git a/resources/js/components/Factory/Sidebar/Block.vue b/resources/js/components/Factory/Sidebar/Block.vue
index 99d2c0e5..ecb1bfa3 100644
--- a/resources/js/components/Factory/Sidebar/Block.vue
+++ b/resources/js/components/Factory/Sidebar/Block.vue
@@ -25,12 +25,6 @@
             label="Copy ID"
             @click="copyId"
           />
-          <D9MenuLink
-            as="button"
-            class="block w-full text-left"
-            :label="block.is_disabled ? 'Enable Block' : 'Disable Block'"
-            @click="disableBlock"
-          />
           <D9MenuLink
             as="button"
             class="block w-full text-left"
@@ -62,60 +56,7 @@
       />
 
       <!-- Block Status -->
-      <div class="flex space-x-1 mt-4">
-        <button
-          class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
-          :class="[
-            block.has_logic
-              ? 'bg-blue-100 outline-blue-200'
-              : 'bg-grey-100 outline-grey-200',
-          ]"
-          @click="showLogicEditor"
-        >
-          <D9Icon name="code-branch" size="sm" />
-          <span>Block Logic</span>
-          <span v-if="block?.logics && block.logics.length > 0"
-            >(<strong>{{ block.logics?.length }}</strong
-            >)</span
-          >
-        </button>
-        <button
-          class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
-          :class="[
-            block.is_required
-              ? 'bg-red-100 outline-red-200'
-              : 'bg-grey-100 outline-grey-200',
-          ]"
-          @click="toggleRequired()"
-        >
-          <template v-if="block.is_required">
-            <D9Icon name="asterisk" size="sm" />
-            <span>Required</span>
-          </template>
-          <template v-else>
-            <D9Icon name="question" size="sm" />
-            <span>Optional</span>
-          </template>
-        </button>
-        <button
-          class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
-          :class="[
-            block.is_disabled
-              ? 'bg-grey-100 outline-grey-200'
-              : 'bg-green-50 outline-green-100',
-          ]"
-          @click="disableBlock()"
-        >
-          <template v-if="block.is_disabled">
-            <D9Icon name="circle-dot" size="sm" />
-            <span>Disabled</span>
-          </template>
-          <template v-else>
-            <D9Icon name="circle-check" size="sm" />
-            <span>Enabled</span>
-          </template>
-        </button>
-      </div>
+      <BlockFooter class="mt-4" :block="block" />
 
       <!-- Block Logic -->
       <BlockLogicVisualizer v-if="store.showLogicInStoryboard" />
@@ -128,18 +69,18 @@ import { computed, provide } from "vue";
 import ConsentBlockMessage from "./ConsentBlockMessage.vue";
 import DefaultBlockMessage from "./DefaultBlockMessage.vue";
 import BlockInteraction from "./BlockInteraction.vue";
+import BlockFooter from "./BlockFooter.vue";
 import BlockLogicVisualizer from "./BlockLogicVisualizer.vue";
-import { useWorkbench, useForm, useLogic } from "@/stores";
-import { D9Menu, D9MenuLink, D9Icon } from "@deck9/ui";
+import InsertAfterButton from "./InsertAfterButton.vue";
+import { useWorkbench, useForm } from "@/stores";
+import { D9Menu, D9MenuLink } from "@deck9/ui";
 import copy from "copy-text-to-clipboard";
 import useActiveInteractions from "../Shared/useActiveInteractions";
 import { useActiveCard } from "@/utils/useActiveCard";
-import InsertAfterButton from "./InsertAfterButton.vue";
 import { storeToRefs } from "pinia";
 
 const workbench = useWorkbench();
 const store = useForm();
-const logicStore = useLogic();
 
 const { showBlockMenus } = storeToRefs(store);
 
@@ -171,26 +112,6 @@ const deleteBlock = () => {
   }
 };
 
-const disableBlock = () => {
-  store.updateFormBlockProperty(
-    props.block,
-    "is_disabled",
-    !props.block.is_disabled,
-  );
-};
-
-const toggleRequired = () => {
-  store.updateFormBlockProperty(
-    props.block,
-    "is_required",
-    !props.block.is_required,
-  );
-};
-
-const showLogicEditor = () => {
-  logicStore.showLogicEditor(props.block);
-};
-
 const copyId = () => {
   copy(props.block.uuid);
 };
diff --git a/resources/js/components/Factory/Sidebar/BlockFooter.vue b/resources/js/components/Factory/Sidebar/BlockFooter.vue
new file mode 100644
index 00000000..6b3e8f24
--- /dev/null
+++ b/resources/js/components/Factory/Sidebar/BlockFooter.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="flex space-x-1">
+    <button
+      class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
+      :class="[
+        block.has_logic
+          ? 'bg-blue-100 outline-blue-200'
+          : 'bg-grey-100 outline-grey-200',
+      ]"
+      @click="showLogicEditor"
+    >
+      <D9Icon name="code-branch" size="sm" />
+      <span>Block Logic</span>
+      <span v-if="block?.logics && block.logics.length > 0"
+        >(<strong>{{ block.logics?.length }}</strong
+        >)</span
+      >
+    </button>
+    <button
+      v-if="block.type !== 'group'"
+      class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
+      :class="[
+        block.is_required
+          ? 'bg-red-100 outline-red-200'
+          : 'bg-grey-100 outline-grey-200',
+      ]"
+      @click="toggleRequired()"
+    >
+      <template v-if="block.is_required">
+        <D9Icon name="asterisk" size="sm" />
+        <span>Required</span>
+      </template>
+      <template v-else>
+        <D9Icon name="question" size="sm" />
+        <span>Optional</span>
+      </template>
+    </button>
+    <button
+      class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
+      :class="[
+        block.is_disabled
+          ? 'bg-grey-100 outline-grey-200'
+          : 'bg-green-50 outline-green-100',
+      ]"
+      @click="disableBlock()"
+    >
+      <template v-if="block.is_disabled">
+        <D9Icon name="circle-dot" size="sm" />
+        <span>Disabled</span>
+      </template>
+      <template v-else>
+        <D9Icon name="circle-check" size="sm" />
+        <span>Enabled</span>
+      </template>
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useForm, useLogic } from "@/stores";
+import { D9Icon } from "@deck9/ui";
+
+const store = useForm();
+const logicStore = useLogic();
+
+const props = defineProps<{
+  block: FormBlockModel;
+}>();
+
+const toggleRequired = () => {
+  store.updateFormBlockProperty(
+    props.block,
+    "is_required",
+    !props.block.is_required,
+  );
+};
+
+const showLogicEditor = () => {
+  logicStore.showLogicEditor(props.block);
+};
+
+const disableBlock = () => {
+  store.updateFormBlockProperty(
+    props.block,
+    "is_disabled",
+    !props.block.is_disabled,
+  );
+};
+</script>
diff --git a/resources/js/components/Factory/Sidebar/Group.vue b/resources/js/components/Factory/Sidebar/Group.vue
index b61bcc79..e2bef9d6 100644
--- a/resources/js/components/Factory/Sidebar/Group.vue
+++ b/resources/js/components/Factory/Sidebar/Group.vue
@@ -40,12 +40,6 @@
             label="Copy ID"
             @click="copyId"
           />
-          <D9MenuLink
-            as="button"
-            class="block w-full text-left"
-            :label="block.is_disabled ? 'Enable Block' : 'Disable Block'"
-            @click="disableBlock"
-          />
           <D9MenuLink
             as="button"
             class="block w-full text-left"
@@ -60,11 +54,11 @@
         class="transition duration-200"
       />
 
-      <div class="flex space-x-1">
-        <div class="mt-2" v-if="block.is_disabled">
-          <Label color="grey">disabled</Label>
-        </div>
-      </div>
+      <!-- Block Status -->
+      <BlockFooter class="mt-2" :block="block" />
+
+      <!-- Block Logic -->
+      <BlockLogicVisualizer v-if="store.showLogicInStoryboard" />
     </button>
   </div>
 </template>
@@ -72,12 +66,13 @@
 <script lang="ts" setup>
 import BlockContainer from "@/components/Factory/Sidebar/BlockContainer.vue";
 import InsertAfterButton from "./InsertAfterButton.vue";
-import Label from "@/components/Label.vue";
+import BlockFooter from "./BlockFooter.vue";
+import BlockLogicVisualizer from "./BlockLogicVisualizer.vue";
 import copy from "copy-text-to-clipboard";
 import { D9Menu, D9MenuLink, D9Icon } from "@deck9/ui";
 import { useActiveCard } from "@/utils/useActiveCard";
 import { useWorkbench, useForm } from "@/stores";
-import { computed, ref } from "vue";
+import { computed, provide, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { storeToRefs } from "pinia";
 
@@ -85,6 +80,8 @@ const props = defineProps<{
   block: FormBlockModel;
 }>();
 
+provide("block", props.block);
+
 const { t } = useI18n();
 
 const workbench = useWorkbench();

From 809cdf622ca90df4bc2b5cb69d71946940979083 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 18 Oct 2024 18:05:16 +0200
Subject: [PATCH 20/43] improve logic editor cancel

---
 .../{BlockLogicEdit.vue => BlockLogicEditor.vue}   |  5 +++++
 .../js/components/Factory/Sidebar/Storyboard.vue   |  4 ++--
 resources/js/stores/logic.ts                       | 14 ++++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)
 rename resources/js/components/Factory/Sidebar/{BlockLogicEdit.vue => BlockLogicEditor.vue} (97%)

diff --git a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue b/resources/js/components/Factory/Sidebar/BlockLogicEditor.vue
similarity index 97%
rename from resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
rename to resources/js/components/Factory/Sidebar/BlockLogicEditor.vue
index 6eeb686c..0fbe439c 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicEdit.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicEditor.vue
@@ -116,6 +116,9 @@ const isSaving = ref(false);
 
 const { isShowingLogicEditor, block } = storeToRefs(store);
 
+// on mount, backup the current logic to restore in case of cancel
+store.backupLogic();
+
 const save = async () => {
   isSaving.value = true;
 
@@ -128,11 +131,13 @@ const save = async () => {
 
   setTimeout(() => {
     isSaving.value = false;
+    store.backupLogic();
     store.hideLogicEditor();
   }, 250);
 };
 
 const close = () => {
+  store.restoreLogic();
   store.hideLogicEditor();
 };
 </script>
diff --git a/resources/js/components/Factory/Sidebar/Storyboard.vue b/resources/js/components/Factory/Sidebar/Storyboard.vue
index b0ca28e9..111570ac 100644
--- a/resources/js/components/Factory/Sidebar/Storyboard.vue
+++ b/resources/js/components/Factory/Sidebar/Storyboard.vue
@@ -64,7 +64,7 @@
       />
     </div>
   </div>
-  <BlockLogicEdit />
+  <BlockLogicEditor />
 </template>
 
 <script setup lang="ts">
@@ -76,7 +76,7 @@ import BlockContainer from "./BlockContainer.vue";
 import EmptyState from "@/components/EmptyState.vue";
 import ScrollShadow from "@/components/ScrollShadow.vue";
 import _throttle from "lodash/throttle";
-import BlockLogicEdit from "@/components/Factory/Sidebar/BlockLogicEdit.vue";
+import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue";
 
 const isLoaded = ref(false);
 const store = useForm();
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index 6bd4aa40..f64994b9 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -16,6 +16,7 @@ interface LogicStore {
     validation: ValidationError[];
     isShowingLogicEditor: boolean;
     hideRule: FormBlockLogic | null;
+    backup: FormBlockLogic[] | null;
 }
 
 export const operators: Array<{ key: Operator; label: string }> = [
@@ -44,6 +45,7 @@ export const useLogic = defineStore("logic", {
             isShowingLogicEditor: false,
             hideRule: null,
             validation: [],
+            backup: null,
         };
     },
 
@@ -58,6 +60,18 @@ export const useLogic = defineStore("logic", {
             this.isShowingLogicEditor = false;
         },
 
+        backupLogic() {
+            this.backup = this.block?.logics ?? null;
+        },
+
+        restoreLogic() {
+            if (!this.block) {
+                return;
+            }
+
+            this.block.logics = this.backup ?? undefined;
+        },
+
         addRule() {
             if (!this.block) {
                 return;

From 0f27add6f5c4b8a0393f0f0df0ba939a6383bd6c Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 18 Oct 2024 18:08:24 +0200
Subject: [PATCH 21/43] fix eslint error

---
 resources/js/components/Factory/Sidebar/Group.vue | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/Group.vue b/resources/js/components/Factory/Sidebar/Group.vue
index e2bef9d6..83e669af 100644
--- a/resources/js/components/Factory/Sidebar/Group.vue
+++ b/resources/js/components/Factory/Sidebar/Group.vue
@@ -116,18 +116,6 @@ const deleteBlock = () => {
   }
 };
 
-const disableBlock = () => {
-  if (!props.block.is_disabled) {
-    isCollapsed.value = true;
-  }
-
-  store.updateFormBlockProperty(
-    props.block,
-    "is_disabled",
-    !props.block.is_disabled,
-  );
-};
-
 const copyId = () => {
   copy(props.block.uuid);
 };

From 351ab7e2c0bf32da48b71f4d9a6d801aa5f329cd Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 18 Oct 2024 18:22:19 +0200
Subject: [PATCH 22/43] update action to also push docker on PR

---
 .github/workflows/docker-publish.yml | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
index 02baa388..60ee64e0 100644
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -48,6 +48,14 @@ jobs:
         uses: docker/metadata-action@v5.5.1
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=schedule
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=sha
 
       # Build and push Docker image with Buildx (don't push on PR)
       # https://github.com/docker/build-push-action
@@ -57,7 +65,7 @@ jobs:
         with:
           context: .
           platforms: linux/amd64,linux/arm64
-          push: ${{ github.event_name != 'pull_request' }}
+          push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha

From 2b2812399235998855946586fbcfa5cf970279a5 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Sat, 19 Oct 2024 01:12:49 +0200
Subject: [PATCH 23/43] fix login

---
 .github/workflows/docker-publish.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
index 60ee64e0..b494d6ce 100644
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -34,7 +34,6 @@ jobs:
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action
       - name: Log into registry ${{ env.REGISTRY }}
-        if: ${{ github.event_name != 'pull_request' }}
         uses: docker/login-action@v3.1.0
         with:
           registry: ${{ env.REGISTRY }}

From a46fb1001a881be9c89e051e4388b303013d1918 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Sun, 20 Oct 2024 10:14:41 +0200
Subject: [PATCH 24/43] add login protection

---
 .github/workflows/docker-publish.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
index b494d6ce..85626ba4 100644
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -34,6 +34,7 @@ jobs:
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action
       - name: Log into registry ${{ env.REGISTRY }}
+        if: ${{ github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository }}
         uses: docker/login-action@v3.1.0
         with:
           registry: ${{ env.REGISTRY }}

From 9125513b3417d7baf0434647a431f883947b1d8f Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 24 Oct 2024 17:25:12 +0200
Subject: [PATCH 25/43] wip frontend logic rules

---
 resources/js/api/conversation.ts              |   2 +
 resources/js/forms/classic/ClassicForm.vue    |   3 +-
 .../js/forms/classic/layout/Navigator.vue     |  13 +-
 resources/js/stores/conversation.ts           | 151 +++++++++++-------
 resources/js/types/models.d.ts                |   1 +
 5 files changed, 107 insertions(+), 63 deletions(-)

diff --git a/resources/js/api/conversation.ts b/resources/js/api/conversation.ts
index 4fc79934..6aed8a14 100644
--- a/resources/js/api/conversation.ts
+++ b/resources/js/api/conversation.ts
@@ -3,6 +3,8 @@ import { AxiosProgressEvent, AxiosResponse } from "axios";
 import handler from "./handler";
 import { useRoutes } from "@/utils/useRoutes";
 
+await useRoutes();
+
 export function callGetForm(
     uuid: string,
 ): Promise<AxiosResponse<PublicFormModel>> {
diff --git a/resources/js/forms/classic/ClassicForm.vue b/resources/js/forms/classic/ClassicForm.vue
index 34ab1951..7cf6b87a 100644
--- a/resources/js/forms/classic/ClassicForm.vue
+++ b/resources/js/forms/classic/ClassicForm.vue
@@ -13,6 +13,8 @@
       }"
     >
       <div>
+        <pre class="text-xs leading-none mb-4">{{ store.processedQueue }}</pre>
+
         <Header v-if="!flags.hideTitle" :form="store.form" />
 
         <div class="h-full w-full max-w-screen-sm py-10">
@@ -42,7 +44,6 @@
         <Navigator
           v-bind="{
             hideNavigation: flags.hideNavigation,
-            block: store.currentBlock,
             key: store.currentBlock?.id,
           }"
           :class="{
diff --git a/resources/js/forms/classic/layout/Navigator.vue b/resources/js/forms/classic/layout/Navigator.vue
index 3a09ab8e..7ef7f264 100644
--- a/resources/js/forms/classic/layout/Navigator.vue
+++ b/resources/js/forms/classic/layout/Navigator.vue
@@ -55,13 +55,12 @@ const store = useConversation();
 
 const { t } = useI18n();
 
-const props = defineProps<{
+defineProps<{
   hideNavigation?: boolean;
-  block?: PublicFormBlockModel | null;
 }>();
 
-const { actionValidator } = props.block
-  ? useActions(props.block)
+const { actionValidator } = store.currentBlock
+  ? useActions(store.currentBlock)
   : {
       actionValidator: () => {
         return { valid: true };
@@ -75,14 +74,14 @@ const validator = computed(() => {
 });
 
 const totalPages = computed(() => {
-  return store.queue?.length ?? 0;
+  return store.processedQueue?.length ?? 0;
 });
 
 const currentPage = computed(() => {
-  return store.current + 1;
+  return store.currentBlockIndex + 1;
 });
 
 const progress = computed(() => {
-  return Math.round((store.current / totalPages.value) * 100);
+  return Math.round((store.currentBlockIndex / totalPages.value) * 100);
 });
 </script>
diff --git a/resources/js/stores/conversation.ts b/resources/js/stores/conversation.ts
index 9dbabdd0..f5c1937d 100644
--- a/resources/js/stores/conversation.ts
+++ b/resources/js/stores/conversation.ts
@@ -13,7 +13,7 @@ type ConversationStore = {
     session?: FormSessionModel;
     storyboard: PublicFormBlockModel[] | null;
     queue: PublicFormBlockModel[] | null;
-    current: number;
+    current: PublicFormBlockModel["id"] | null;
     payload: FormSubmitPayload;
     isProcessing: boolean;
     isSubmitted: boolean;
@@ -21,6 +21,41 @@ type ConversationStore = {
     uploads: FormFileUploads;
 };
 
+function createFlatQueue(
+    blocks: PublicFormBlockModel[],
+    parent_block: string | null = null,
+): PublicFormBlockModel[] {
+    return blocks
+        .filter((block) => block.parent_block === parent_block)
+        .flatMap((block) => {
+            const queueItem = block;
+            if (block.type === "group") {
+                const children = blocks.filter(
+                    (b) => b.parent_block === block.id,
+                );
+                return [queueItem, ...createFlatQueue(children, block.id)];
+            }
+            return [queueItem];
+        });
+}
+
+function isBlockVisible(
+    block: PublicFormBlockModel,
+    payload: FormSubmitPayload,
+): boolean {
+    if (!block.logics?.length) {
+        return true;
+    }
+
+    block.logics
+        ?.filter((logic) => logic.evaluate === "before")
+        .forEach((logic) => {
+            console.log(logic, payload);
+        });
+
+    return true; // Default to visible
+}
+
 export const useConversation = defineStore("form", {
     state: (): ConversationStore => {
         return {
@@ -28,7 +63,7 @@ export const useConversation = defineStore("form", {
             session: undefined,
             storyboard: null,
             queue: null,
-            current: 0,
+            current: null,
             payload: {},
             isProcessing: false,
             isSubmitted: false,
@@ -38,37 +73,62 @@ export const useConversation = defineStore("form", {
     },
 
     getters: {
-        isFirstBlock(state): boolean {
-            if (!state.queue) {
+        isFirstBlock(): boolean {
+            if (!this.processedQueue) {
                 return false;
             }
 
-            return state.current === 0;
+            return this.currentBlockIndex === 0;
         },
 
-        isLastBlock(state): boolean {
-            if (!state.queue) {
+        isLastBlock(): boolean {
+            if (!this.processedQueue) {
                 return false;
             }
 
-            return state.current + 1 >= state.queue.length;
+            return this.currentBlockIndex + 1 >= this.processedQueue.length;
         },
 
-        currentBlock: (state): PublicFormBlockModel | null => {
-            if (state.queue && state.queue.length >= state.current) {
-                return state.queue[state.current];
+        processedQueue(state): PublicFormBlockModel[] {
+            if (!state.queue) {
+                return [];
             }
 
-            return null;
+            return state.queue
+                .filter((block) => isBlockVisible(block, state.payload))
+                .filter((block) => block.type !== "group");
+        },
+
+        currentBlockIndex(state): number {
+            return this.processedQueue.findIndex(
+                (block) => block.id === state.current,
+            );
+        },
+
+        currentBlock(): PublicFormBlockModel | null {
+            if (!this.processedQueue || !this.processedQueue.length) {
+                return null;
+            }
+
+            if (this.currentBlockIndex === -1) {
+                return null;
+            }
+
+            try {
+                return this.processedQueue[this.currentBlockIndex];
+            } catch (e) {
+                console.warn("Current block not found in processed queue", e);
+                return null;
+            }
         },
 
         currentPayload(
             state,
         ): FormBlockInteractionPayload | FormBlockInteractionPayload[] | null {
-            if (!this.currentBlock) return null;
+            if (!state.current) return null;
 
-            if (state.payload[this.currentBlock.id]) {
-                return state.payload[this.currentBlock.id];
+            if (state.payload[state.current]) {
+                return state.payload[state.current];
             }
 
             return null;
@@ -137,19 +197,10 @@ export const useConversation = defineStore("form", {
             return ref(
                 !state.isSubmitted &&
                     state.payload &&
-                    Object.keys(state.payload).length > 0 &&
-                    state.current > 0,
+                    Object.keys(state.payload).length > 0,
             );
         },
 
-        currentBlockIdentifier(): string | null {
-            if (!this.currentBlock) {
-                return null;
-            }
-
-            return this.currentBlock.title || this.currentBlock.id;
-        },
-
         callToActionUrl(state): string | null {
             if (!state.form || !state.session) {
                 return null;
@@ -251,21 +302,16 @@ export const useConversation = defineStore("form", {
                 }
             }
 
-            const storyboardResponse = await callGetFormStoryboard(id);
-            const formSessionResponse = await callCreateFormSession(id, params);
+            const [formSessionResponse, storyboardResponse] = await Promise.all(
+                [callCreateFormSession(id, params), callGetFormStoryboard(id)],
+            );
 
             this.session = formSessionResponse.data;
             this.storyboard = storyboardResponse.data.blocks;
 
-            this.queue = this.storyboard.filter((block) => {
-                return block.parent_block === null;
-            });
+            this.queue = createFlatQueue(this.storyboard);
 
-            // if the first block is a group, we need to evaluate it
-            if (this.currentBlock?.type === "group") {
-                this.evaluateGroupBlock(this.currentBlock);
-                this.next();
-            }
+            this.current = this.processedQueue[0].id ?? null;
         },
 
         enableInputMode() {
@@ -280,9 +326,9 @@ export const useConversation = defineStore("form", {
             action: PublicFormBlockInteractionModel,
             value: string | boolean | number | File[] | null,
         ) {
-            if (!this.currentBlock) return;
+            if (!this.current) return;
 
-            this.payload[this.currentBlock.id] = {
+            this.payload[this.current] = {
                 payload: value,
                 actionId: action.id,
             };
@@ -297,16 +343,16 @@ export const useConversation = defineStore("form", {
                 | null,
             keepChecked: boolean | null = null,
         ) {
-            if (!this.currentBlock) return;
+            if (!this.current) return;
 
             const givenPayload = {
                 payload: value,
                 actionId: action.id,
             };
-            const currentPayload = this.payload[this.currentBlock.id];
+            const currentPayload = this.payload[this.current];
 
             if (!Array.isArray(currentPayload)) {
-                this.payload[this.currentBlock.id] = [givenPayload];
+                this.payload[this.current] = [givenPayload];
             } else {
                 const foundIndex = currentPayload.findIndex(
                     (p) => p.actionId === action.id,
@@ -324,17 +370,20 @@ export const useConversation = defineStore("form", {
             }
         },
 
+        goToIndex(index: number) {
+            if (index >= 0 && index < this.processedQueue.length) {
+                this.current = this.processedQueue[index].id;
+            } else {
+                console.warn("Index out of bounds", index);
+            }
+        },
+
         back() {
             if (this.isFirstBlock) {
                 return;
             }
 
-            this.current -= 1;
-
-            // if we are on a group block, we need to go back again
-            if (this.currentBlock?.type === "group") {
-                this.back();
-            }
+            this.goToIndex(this.currentBlockIndex - 1);
         },
 
         /**
@@ -400,15 +449,7 @@ export const useConversation = defineStore("form", {
                     return Promise.reject(new Error("Form or session not set"));
                 }
             } else {
-                this.current += 1;
-
-                // need to check if the next block is a group block
-                if (this.currentBlock?.type === "group") {
-                    this.evaluateGroupBlock(this.currentBlock);
-
-                    // we call next, since the group block has no other action
-                    return this.next();
-                }
+                this.goToIndex(this.currentBlockIndex + 1);
 
                 return Promise.resolve(false);
             }
diff --git a/resources/js/types/models.d.ts b/resources/js/types/models.d.ts
index e43f2e52..b5ccd60e 100644
--- a/resources/js/types/models.d.ts
+++ b/resources/js/types/models.d.ts
@@ -203,6 +203,7 @@ type PublicFormBlockModel = {
     parent_block: string | null;
     is_required: boolean | null;
     interactions: Array<PublicFormBlockInteractionModel>;
+    logics: Array<FormBlockLogic> | undefined;
 };
 
 type PublicFormModel = {

From b0ca8af4928e5e7e81220ce37389f1919d809a8b Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 24 Oct 2024 17:25:48 +0200
Subject: [PATCH 26/43] remove pre

---
 resources/js/forms/classic/ClassicForm.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/js/forms/classic/ClassicForm.vue b/resources/js/forms/classic/ClassicForm.vue
index 7cf6b87a..69920a04 100644
--- a/resources/js/forms/classic/ClassicForm.vue
+++ b/resources/js/forms/classic/ClassicForm.vue
@@ -13,8 +13,6 @@
       }"
     >
       <div>
-        <pre class="text-xs leading-none mb-4">{{ store.processedQueue }}</pre>
-
         <Header v-if="!flags.hideTitle" :form="store.form" />
 
         <div class="h-full w-full max-w-screen-sm py-10">

From 74a978f49f00ba39e407d5147b988bb165470391 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 25 Oct 2024 12:47:26 +0200
Subject: [PATCH 27/43] fix nested button markup

---
 resources/js/components/Factory/Sidebar/Block.vue | 6 +++---
 resources/js/components/Factory/Sidebar/Group.vue | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/Block.vue b/resources/js/components/Factory/Sidebar/Block.vue
index ecb1bfa3..dd5b3b64 100644
--- a/resources/js/components/Factory/Sidebar/Block.vue
+++ b/resources/js/components/Factory/Sidebar/Block.vue
@@ -2,8 +2,8 @@
   <div class="relative pb-6 text-sm">
     <InsertAfterButton v-bind="{ block }" />
 
-    <button
-      class="group relative block w-full cursor-pointer overflow-visible rounded-md p-4 text-left"
+    <div
+      class="group relative block w-full overflow-visible rounded-md p-4 text-left"
       :class="[cardStyle, { 'opacity-50': block.is_disabled }]"
       @click.stop="workbench.putOnWorkbench(block)"
     >
@@ -60,7 +60,7 @@
 
       <!-- Block Logic -->
       <BlockLogicVisualizer v-if="store.showLogicInStoryboard" />
-    </button>
+    </div>
   </div>
 </template>
 
diff --git a/resources/js/components/Factory/Sidebar/Group.vue b/resources/js/components/Factory/Sidebar/Group.vue
index 83e669af..51d67c82 100644
--- a/resources/js/components/Factory/Sidebar/Group.vue
+++ b/resources/js/components/Factory/Sidebar/Group.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="relative pb-6 text-sm">
     <InsertAfterButton v-bind="{ block }" />
-    <button
+    <div
       class="relative block w-full rounded-md border-dashed px-4 py-3 text-left"
       :class="[cardStyle, { 'opacity-50': block.is_disabled }]"
       @click.stop="workbench.putOnWorkbench(block)"
     >
       <button
-        class="-ml-2 rounded pl-2 pr-5 py-1 font-bold text-grey-400 hover:bg-grey-100 block text-left"
+        class="rounded pl-2 pr-5 py-1 font-bold text-grey-400 hover:bg-grey-100 block text-left"
         :class="[{ 'mb-3': !isCollapsed }]"
         @click.prevent="toggleGroup"
       >
@@ -59,7 +59,7 @@
 
       <!-- Block Logic -->
       <BlockLogicVisualizer v-if="store.showLogicInStoryboard" />
-    </button>
+    </div>
   </div>
 </template>
 

From b1304ca7349d17d46bd02b570de0ca9d131681c9 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 25 Oct 2024 16:44:04 +0200
Subject: [PATCH 28/43] fix navigator and transition bug

---
 .../classic/layout/FormSubmittedPage.vue      | 36 +++++++++----------
 .../js/forms/classic/layout/Navigator.vue     |  6 +++-
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/resources/js/forms/classic/layout/FormSubmittedPage.vue b/resources/js/forms/classic/layout/FormSubmittedPage.vue
index 476a1048..32b1bae7 100644
--- a/resources/js/forms/classic/layout/FormSubmittedPage.vue
+++ b/resources/js/forms/classic/layout/FormSubmittedPage.vue
@@ -1,23 +1,23 @@
 <template>
-  <div class="form-message-prose conversation-theme">
-    <h1>
-      {{ store.form?.eoc_headline || t("form_submitted") }}
-    </h1>
-    <div
-      v-if="store.form?.eoc_text"
-      class="mt-2"
-      v-html="store.form?.eoc_text"
-    ></div>
-  </div>
-
   <div>
-    <CallToActionButton
-      v-if="store.form?.show_cta_link && store.callToActionUrl"
-      :href="store.callToActionUrl"
-      :label="store.form?.cta_label ?? t('close')"
-    />
-
-    <SocialLinks v-if="store.form?.show_social_links" class="mt-8" />
+    <div class="form-message-prose conversation-theme">
+      <h1>
+        {{ store.form?.eoc_headline || t("form_submitted") }}
+      </h1>
+      <div
+        v-if="store.form?.eoc_text"
+        class="mt-2"
+        v-html="store.form?.eoc_text"
+      ></div>
+    </div>
+    <div>
+      <CallToActionButton
+        v-if="store.form?.show_cta_link && store.callToActionUrl"
+        :href="store.callToActionUrl"
+        :label="store.form?.cta_label ?? t('close')"
+      />
+      <SocialLinks v-if="store.form?.show_social_links" class="mt-8" />
+    </div>
   </div>
 </template>
 
diff --git a/resources/js/forms/classic/layout/Navigator.vue b/resources/js/forms/classic/layout/Navigator.vue
index 7ef7f264..3457d114 100644
--- a/resources/js/forms/classic/layout/Navigator.vue
+++ b/resources/js/forms/classic/layout/Navigator.vue
@@ -82,6 +82,10 @@ const currentPage = computed(() => {
 });
 
 const progress = computed(() => {
-  return Math.round((store.currentBlockIndex / totalPages.value) * 100);
+  if (store.currentBlockIndex <= 0) {
+    return 0;
+  }
+
+  return Math.round(((store.currentBlockIndex + 1) / totalPages.value) * 100);
 });
 </script>

From 98db4c9d7386cc92517be2a7393f7adf15ffcbf1 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 31 Oct 2024 15:38:05 +0100
Subject: [PATCH 29/43] add show hide logic evaluation

---
 resources/js/stores/conversation.ts | 84 +++++++++++++++++++++++++++--
 1 file changed, 81 insertions(+), 3 deletions(-)

diff --git a/resources/js/stores/conversation.ts b/resources/js/stores/conversation.ts
index f5c1937d..d7ad32c1 100644
--- a/resources/js/stores/conversation.ts
+++ b/resources/js/stores/conversation.ts
@@ -7,6 +7,7 @@ import {
     callUploadFiles,
 } from "@/api/conversation";
 import { Ref, ref } from "vue";
+import { isBlock } from "typescript";
 
 type ConversationStore = {
     form?: PublicFormModel;
@@ -41,19 +42,96 @@ function createFlatQueue(
 
 function isBlockVisible(
     block: PublicFormBlockModel,
-    payload: FormSubmitPayload,
+    responses: FormSubmitPayload,
 ): boolean {
     if (!block.logics?.length) {
         return true;
     }
 
+    // block is visible by default
+    let isBlockVisible = true;
+
     block.logics
         ?.filter((logic) => logic.evaluate === "before")
         .forEach((logic) => {
-            console.log(logic, payload);
+            // each logic result is false by default
+
+            // check if the logic is true for the current payload
+            const evaluatedConditions = logic.conditions.map((condition) => {
+                let result = false;
+
+                if (condition.source && responses[condition.source]) {
+                    const response = responses[condition.source];
+
+                    // get payload value or combine to string if it is an array
+                    const responseValue =
+                        "payload" in response
+                            ? response.payload
+                            : response.map((p) => p.payload).join(", ");
+
+                    switch (condition.operator) {
+                        case "equals":
+                            result = responseValue === condition.value;
+                            break;
+                        case "equalsNot":
+                            result = responseValue !== condition.value;
+                            break;
+                        case "contains":
+                            result = responseValue.includes(condition.value);
+                            break;
+                        case "containsNot":
+                            result = !responseValue.includes(condition.value);
+                            break;
+                        case "isLowerThan":
+                            result = responseValue < condition.value;
+                            break;
+                        case "isGreaterThan":
+                            result = responseValue > condition.value;
+                            break;
+                    }
+                }
+
+                return {
+                    ...condition,
+                    result,
+                };
+            });
+
+            let currentIndex = 0;
+            const conditionGroups: any[] = [];
+
+            // split conditions each time an "or" operator is found
+            evaluatedConditions.forEach((condition, index) => {
+                if (index === 0) {
+                    conditionGroups[currentIndex] = [condition];
+                } else {
+                    if (condition.chainOperator === "or") {
+                        currentIndex++;
+                    }
+
+                    if (!conditionGroups[currentIndex]) {
+                        conditionGroups[currentIndex] = [];
+                    }
+
+                    conditionGroups[currentIndex].push(condition);
+                }
+            });
+
+            const finalResult = conditionGroups.some((group) => {
+                return group.every((condition) => {
+                    return condition.result;
+                });
+            });
+
+            // if the logic is true, then execute the block aciton
+            if (logic.action === "show") {
+                isBlockVisible = finalResult;
+            } else if (logic.action === "hide") {
+                isBlockVisible = !finalResult;
+            }
         });
 
-    return true; // Default to visible
+    return isBlockVisible;
 }
 
 export const useConversation = defineStore("form", {

From c5d5fe72bc979e574411ed31159ab8e86958a8b1 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 1 Nov 2024 15:14:54 +0100
Subject: [PATCH 30/43] add goto settings for logic in sidebar

---
 app/Http/Requests/FormBlockLogicRequest.php   |  3 +-
 .../components/Factory/Shared/LabelToggle.vue |  8 +++-
 .../Factory/Sidebar/BlockLogicRule.vue        | 46 +++++++++++++++++--
 .../Factory/Sidebar/BlockLogicVisualizer.vue  |  7 ++-
 .../js/components/Factory/Sidebar/Group.vue   |  2 +-
 resources/js/stores/logic.ts                  |  2 +-
 6 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/app/Http/Requests/FormBlockLogicRequest.php b/app/Http/Requests/FormBlockLogicRequest.php
index e165056f..60bc7c2b 100644
--- a/app/Http/Requests/FormBlockLogicRequest.php
+++ b/app/Http/Requests/FormBlockLogicRequest.php
@@ -28,7 +28,8 @@ public function rules(): array
             'conditions.*.operator' => 'required|string|in:equals,equalsNot,contains,containsNot,isLowerThan,isGreaterThan',
             'conditions.*.value' => 'required|string',
             'conditions.*.chainOperator' => 'required|string|in:and,or',
-            'action' => 'required|string|in:hide,show',
+            'action' => 'required|string|in:hide,show,goto',
+            'actionPayload' => 'nullable|string',
             'evaluate' => 'required|string|in:before,after',
         ];
     }
diff --git a/resources/js/components/Factory/Shared/LabelToggle.vue b/resources/js/components/Factory/Shared/LabelToggle.vue
index d99d2382..33bf8ee2 100644
--- a/resources/js/components/Factory/Shared/LabelToggle.vue
+++ b/resources/js/components/Factory/Shared/LabelToggle.vue
@@ -17,7 +17,7 @@
             ? 'bg-white text-blue-700 ring-blue-600'
             : 'bg-white text-grey-500 hover:text-grey-900 hover:ring-blue-600',
           !active && !checked ? 'ring-inset' : '',
-          index === 0 ? 'rounded-l-md' : 'rounded-r-md',
+          index === 0 ? 'rounded-l-md' : 'last:rounded-r-md',
           'group flex items-center justify-center px-3 py-2 leading-none text-sm border border-grey-300',
         ]"
       >
@@ -65,6 +65,12 @@ const props = withDefaults(
 
 const value = ref(props.modelValue);
 
+watch(props, () => {
+  if (props.modelValue !== value.value) {
+    value.value = props.modelValue;
+  }
+});
+
 watch(value, (value) => {
   emit("update:modelValue", value);
 });
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
index 1fc3953c..98820b26 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
@@ -16,7 +16,7 @@
     </div>
 
     <div class="px-4 py-2">
-      <div class="mb-3">
+      <div class="mb-3 hidden">
         <D9Label label="Rule Execution" />
         <LabelToggle
           v-bind="{
@@ -108,12 +108,24 @@
             options: [
               { label: 'Hide', value: 'hide' },
               { label: 'Show', value: 'show' },
-              // { label: 'Go to', value: 'goto' },
+              { label: 'Go to', value: 'goto' },
             ],
           }"
           v-model="action"
         />
       </div>
+
+      <div v-if="action === 'goto'" class="mt-3">
+        <D9Label label="Go to Block" />
+        <D9Select
+          placeholder="Select a block"
+          v-model="target"
+          size="small"
+          :options="availableTargetBlocks"
+        />
+      </div>
+
+      <pre>{{ rule }}</pre>
     </div>
 
     <ValidationErrors
@@ -154,6 +166,7 @@ const validation = computed(() => {
 const evaluate = ref<FormBlockLogic["evaluate"]>(props.rule.evaluate);
 const action = ref<FormBlockLogic["action"]>(props.rule.action);
 const conditions: Ref<Array<EditableFormBlockBlockLogicCondition>> = ref([]);
+const target = ref<Record<string, any> | null>(null);
 
 const getBlockOption = (block: FormBlockModel) => {
   const text = getTextFromHtml(block.message ?? "");
@@ -164,6 +177,16 @@ const getBlockOption = (block: FormBlockModel) => {
   };
 };
 
+if (props.rule.actionPayload) {
+  const found = logicStore.allBlocks?.find(
+    (block) => block.uuid === props.rule.actionPayload,
+  );
+
+  if (found) {
+    target.value = getBlockOption(found);
+  }
+}
+
 // if the loaded rule has already conditions, we should use those
 if (props.rule.conditions) {
   const editableConditions = props.rule.conditions.map((condition) => {
@@ -212,22 +235,35 @@ const hasConditions = computed(() => {
 });
 
 const availableSourceBlocks = computed(() => {
-  return logicStore.availableSourceBlocks
-    .filter((block) => block.type !== "group")
+  return logicStore.availableSourceBlocks.map((block) => {
+    return getBlockOption(block);
+  });
+});
+
+const availableTargetBlocks = computed(() => {
+  return logicStore.allBlocks
+    ?.filter((block) => block.type !== "group")
     .map((block) => {
       return getBlockOption(block);
     });
 });
 
 watch(
-  [conditions, evaluate, action],
+  [conditions, evaluate, action, target],
   () => {
+    if (action.value === "hide" || action.value === "show") {
+      evaluate.value = "before";
+    } else if (action.value === "goto") {
+      evaluate.value = "after";
+    }
+
     logicStore.updateBlockLogic(
       {
         ...props.rule,
         conditions: conditions.value,
         evaluate: evaluate.value,
         action: action.value,
+        actionPayload: target.value?.key ?? null,
       },
       props.index,
     );
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue b/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
index 4ce565ee..0ad4f6b0 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
@@ -54,10 +54,15 @@
             <D9Icon name="eye" size="sm" />
             show this block
           </template>
-          <template v-else>
+          <template v-else-if="rule.action === 'hide'">
             <D9Icon name="eye-slash" size="sm" />
             hide this block
           </template>
+          <template v-else-if="rule.action === 'goto'">
+            <D9Icon name="eye-slash" size="sm" />
+            to to block
+            <span class="font-bold font-mono">{{ rule.actionPayload }}</span>
+          </template>
         </div>
       </div>
     </div>
diff --git a/resources/js/components/Factory/Sidebar/Group.vue b/resources/js/components/Factory/Sidebar/Group.vue
index 51d67c82..0c58887a 100644
--- a/resources/js/components/Factory/Sidebar/Group.vue
+++ b/resources/js/components/Factory/Sidebar/Group.vue
@@ -2,7 +2,7 @@
   <div class="relative pb-6 text-sm">
     <InsertAfterButton v-bind="{ block }" />
     <div
-      class="relative block w-full rounded-md border-dashed px-4 py-3 text-left"
+      class="relative block w-full rounded-md border-dotted px-4 py-3 text-left"
       :class="[cardStyle, { 'opacity-50': block.is_disabled }]"
       @click.stop="workbench.putOnWorkbench(block)"
     >
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index f64994b9..8885d1d9 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -247,7 +247,7 @@ export const useLogic = defineStore("logic", {
                 result.pop();
             }
 
-            return result;
+            return result.filter((block) => block.type !== "group");
         },
     },
 });

From 98aeed16d7a911bc24ce281b81e2baf959e525f5 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 1 Nov 2024 15:18:28 +0100
Subject: [PATCH 31/43] remove debug output

---
 resources/js/components/Factory/Sidebar/BlockLogicRule.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
index 98820b26..e52fd1cc 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
@@ -124,8 +124,6 @@
           :options="availableTargetBlocks"
         />
       </div>
-
-      <pre>{{ rule }}</pre>
     </div>
 
     <ValidationErrors

From 605cd4670ee7d970538126e2a00edf868f41a6e4 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 1 Nov 2024 15:27:34 +0100
Subject: [PATCH 32/43] fix bug with overridden logix

---
 resources/js/components/Factory/Sidebar/BlockLogicEditor.vue | 3 ---
 resources/js/stores/logic.ts                                 | 1 +
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/BlockLogicEditor.vue b/resources/js/components/Factory/Sidebar/BlockLogicEditor.vue
index 0fbe439c..39ba8949 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicEditor.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicEditor.vue
@@ -116,9 +116,6 @@ const isSaving = ref(false);
 
 const { isShowingLogicEditor, block } = storeToRefs(store);
 
-// on mount, backup the current logic to restore in case of cancel
-store.backupLogic();
-
 const save = async () => {
   isSaving.value = true;
 
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index 8885d1d9..b37778ac 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -52,6 +52,7 @@ export const useLogic = defineStore("logic", {
     actions: {
         showLogicEditor(block: FormBlockModel) {
             this.block = block;
+            this.backupLogic();
             this.isShowingLogicEditor = true;
         },
 

From 7fa1340d5ded5dde94ba83f5ae7e99591d1c1a99 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 1 Nov 2024 15:49:57 +0100
Subject: [PATCH 33/43] refactor hide show logic evaluation

---
 resources/js/stores/conversation.ts | 172 +++++++++++++++-------------
 resources/js/types/models.d.ts      |   1 +
 2 files changed, 91 insertions(+), 82 deletions(-)

diff --git a/resources/js/stores/conversation.ts b/resources/js/stores/conversation.ts
index d7ad32c1..fbbc857f 100644
--- a/resources/js/stores/conversation.ts
+++ b/resources/js/stores/conversation.ts
@@ -7,7 +7,6 @@ import {
     callUploadFiles,
 } from "@/api/conversation";
 import { Ref, ref } from "vue";
-import { isBlock } from "typescript";
 
 type ConversationStore = {
     form?: PublicFormModel;
@@ -40,98 +39,107 @@ function createFlatQueue(
         });
 }
 
-function isBlockVisible(
-    block: PublicFormBlockModel,
-    responses: FormSubmitPayload,
+function evaluateCondition(
+    condition: FormBlockLogicCondition,
+    responseValue: any,
 ): boolean {
-    if (!block.logics?.length) {
-        return true;
+    switch (condition.operator) {
+        case "equals":
+            return responseValue === condition.value;
+        case "equalsNot":
+            return responseValue !== condition.value;
+        case "contains":
+            return responseValue.includes(condition.value);
+        case "containsNot":
+            return !responseValue.includes(condition.value);
+        case "isLowerThan":
+            return responseValue < condition.value;
+        case "isGreaterThan":
+            return responseValue > condition.value;
+        default:
+            return false;
     }
+}
 
-    // block is visible by default
-    let isBlockVisible = true;
-
-    block.logics
-        ?.filter((logic) => logic.evaluate === "before")
-        .forEach((logic) => {
-            // each logic result is false by default
-
-            // check if the logic is true for the current payload
-            const evaluatedConditions = logic.conditions.map((condition) => {
-                let result = false;
-
-                if (condition.source && responses[condition.source]) {
-                    const response = responses[condition.source];
-
-                    // get payload value or combine to string if it is an array
-                    const responseValue =
-                        "payload" in response
-                            ? response.payload
-                            : response.map((p) => p.payload).join(", ");
-
-                    switch (condition.operator) {
-                        case "equals":
-                            result = responseValue === condition.value;
-                            break;
-                        case "equalsNot":
-                            result = responseValue !== condition.value;
-                            break;
-                        case "contains":
-                            result = responseValue.includes(condition.value);
-                            break;
-                        case "containsNot":
-                            result = !responseValue.includes(condition.value);
-                            break;
-                        case "isLowerThan":
-                            result = responseValue < condition.value;
-                            break;
-                        case "isGreaterThan":
-                            result = responseValue > condition.value;
-                            break;
-                    }
-                }
+function getResponseValue(response: any): any {
+    return "payload" in response
+        ? response.payload
+        : response.map((p) => p.payload).join(", ");
+}
 
-                return {
-                    ...condition,
-                    result,
-                };
-            });
+function groupConditions(
+    evaluatedConditions: FormBlockLogicCondition[],
+): FormBlockLogicCondition[][] {
+    const groups: FormBlockLogicCondition[][] = [];
+    let currentIndex = 0;
+
+    evaluatedConditions.forEach((condition, index) => {
+        if (index === 0) {
+            groups[currentIndex] = [condition];
+        } else {
+            if (condition.chainOperator === "or") {
+                currentIndex++;
+            }
+            if (!groups[currentIndex]) {
+                groups[currentIndex] = [];
+            }
+            groups[currentIndex].push(condition);
+        }
+    });
 
-            let currentIndex = 0;
-            const conditionGroups: any[] = [];
+    return groups;
+}
 
-            // split conditions each time an "or" operator is found
-            evaluatedConditions.forEach((condition, index) => {
-                if (index === 0) {
-                    conditionGroups[currentIndex] = [condition];
-                } else {
-                    if (condition.chainOperator === "or") {
-                        currentIndex++;
-                    }
+function evaluateConditions(
+    conditions: FormBlockLogicCondition[],
+    responses: FormSubmitPayload,
+): FormBlockLogicCondition[] {
+    return conditions.map((condition) => ({
+        ...condition,
+        result:
+            condition.source && responses[condition.source]
+                ? evaluateCondition(
+                      condition,
+                      getResponseValue(responses[condition.source]),
+                  )
+                : false,
+    }));
+}
 
-                    if (!conditionGroups[currentIndex]) {
-                        conditionGroups[currentIndex] = [];
-                    }
+function evaluateLogicRule(
+    logic: FormBlockLogic,
+    responses: FormSubmitPayload,
+): boolean {
+    const evaluatedConditions = evaluateConditions(
+        logic.conditions as FormBlockLogicCondition[],
+        responses,
+    );
+    const conditionGroups = groupConditions(evaluatedConditions);
 
-                    conditionGroups[currentIndex].push(condition);
-                }
-            });
+    const finalResult = conditionGroups.some((group) =>
+        group.every((condition) => condition.result),
+    );
 
-            const finalResult = conditionGroups.some((group) => {
-                return group.every((condition) => {
-                    return condition.result;
-                });
-            });
+    return logic.action === "show" ? finalResult : !finalResult;
+}
 
-            // if the logic is true, then execute the block aciton
-            if (logic.action === "show") {
-                isBlockVisible = finalResult;
-            } else if (logic.action === "hide") {
-                isBlockVisible = !finalResult;
-            }
-        });
+function isBlockVisible(
+    block: PublicFormBlockModel,
+    responses: FormSubmitPayload,
+): boolean {
+    if (!block.logics?.length) {
+        return true;
+    }
+
+    const beforeLogics = block.logics.filter(
+        (logic) =>
+            logic.evaluate === "before" ||
+            logic.action === "show" ||
+            logic.action === "hide",
+    );
 
-    return isBlockVisible;
+    // If any logic rule returns false, the block is not visible
+    return beforeLogics.every((logic) => evaluateLogicRule(logic, responses));
 }
 
 export const useConversation = defineStore("form", {
diff --git a/resources/js/types/models.d.ts b/resources/js/types/models.d.ts
index b5ccd60e..2de6fa9c 100644
--- a/resources/js/types/models.d.ts
+++ b/resources/js/types/models.d.ts
@@ -82,6 +82,7 @@ interface FormBlockLogicCondition {
     operator?: Operator;
     value: string;
     chainOperator: "or" | "and";
+    result?: boolean;
 }
 
 interface EditableFormBlockBlockLogicCondition extends FormBlockLogicCondition {

From f3ccfd2076eeec2aae6cd535e6db849c81aa1f97 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 1 Nov 2024 16:01:46 +0100
Subject: [PATCH 34/43] further refactoring

---
 .../Factory/Sidebar/BlockLogicRule.vue        |   3 +-
 resources/js/stores/conversation.ts           | 141 +-----------------
 resources/js/stores/helpers/logic.ts          | 121 +++++++++++++++
 resources/js/stores/helpers/queue.ts          |  63 ++++++++
 resources/js/stores/logic.ts                  |  61 ++------
 resources/js/types/models.d.ts                |   5 +
 6 files changed, 203 insertions(+), 191 deletions(-)
 create mode 100644 resources/js/stores/helpers/logic.ts
 create mode 100644 resources/js/stores/helpers/queue.ts

diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
index e52fd1cc..b542766f 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
@@ -137,7 +137,8 @@
 <script lang="ts" setup>
 import { D9Input, D9Select, D9Icon, D9Label, D9Button } from "@deck9/ui";
 import { computed, Ref, ref, watch } from "vue";
-import { useLogic, operators } from "@/stores";
+import { useLogic } from "@/stores";
+import { operators } from "@/stores/helpers/logic";
 import { getTextFromHtml } from "@/utils";
 import LabelToggle from "@/components/Factory/Shared/LabelToggle.vue";
 import ValidationErrors from "@/components/ValidationErrors.vue";
diff --git a/resources/js/stores/conversation.ts b/resources/js/stores/conversation.ts
index fbbc857f..0382267d 100644
--- a/resources/js/stores/conversation.ts
+++ b/resources/js/stores/conversation.ts
@@ -6,6 +6,8 @@ import {
     callGetForm,
     callUploadFiles,
 } from "@/api/conversation";
+import { isBlockVisible } from "./helpers/logic";
+import { createFlatQueue } from "./helpers/queue";
 import { Ref, ref } from "vue";
 
 type ConversationStore = {
@@ -21,127 +23,6 @@ type ConversationStore = {
     uploads: FormFileUploads;
 };
 
-function createFlatQueue(
-    blocks: PublicFormBlockModel[],
-    parent_block: string | null = null,
-): PublicFormBlockModel[] {
-    return blocks
-        .filter((block) => block.parent_block === parent_block)
-        .flatMap((block) => {
-            const queueItem = block;
-            if (block.type === "group") {
-                const children = blocks.filter(
-                    (b) => b.parent_block === block.id,
-                );
-                return [queueItem, ...createFlatQueue(children, block.id)];
-            }
-            return [queueItem];
-        });
-}
-
-function evaluateCondition(
-    condition: FormBlockLogicCondition,
-    responseValue: any,
-): boolean {
-    switch (condition.operator) {
-        case "equals":
-            return responseValue === condition.value;
-        case "equalsNot":
-            return responseValue !== condition.value;
-        case "contains":
-            return responseValue.includes(condition.value);
-        case "containsNot":
-            return !responseValue.includes(condition.value);
-        case "isLowerThan":
-            return responseValue < condition.value;
-        case "isGreaterThan":
-            return responseValue > condition.value;
-        default:
-            return false;
-    }
-}
-
-function getResponseValue(response: any): any {
-    return "payload" in response
-        ? response.payload
-        : response.map((p) => p.payload).join(", ");
-}
-
-function groupConditions(
-    evaluatedConditions: FormBlockLogicCondition[],
-): FormBlockLogicCondition[][] {
-    const groups: FormBlockLogicCondition[][] = [];
-    let currentIndex = 0;
-
-    evaluatedConditions.forEach((condition, index) => {
-        if (index === 0) {
-            groups[currentIndex] = [condition];
-        } else {
-            if (condition.chainOperator === "or") {
-                currentIndex++;
-            }
-            if (!groups[currentIndex]) {
-                groups[currentIndex] = [];
-            }
-            groups[currentIndex].push(condition);
-        }
-    });
-
-    return groups;
-}
-
-function evaluateConditions(
-    conditions: FormBlockLogicCondition[],
-    responses: FormSubmitPayload,
-): FormBlockLogicCondition[] {
-    return conditions.map((condition) => ({
-        ...condition,
-        result:
-            condition.source && responses[condition.source]
-                ? evaluateCondition(
-                      condition,
-                      getResponseValue(responses[condition.source]),
-                  )
-                : false,
-    }));
-}
-
-function evaluateLogicRule(
-    logic: FormBlockLogic,
-    responses: FormSubmitPayload,
-): boolean {
-    const evaluatedConditions = evaluateConditions(
-        logic.conditions as FormBlockLogicCondition[],
-        responses,
-    );
-    const conditionGroups = groupConditions(evaluatedConditions);
-
-    const finalResult = conditionGroups.some((group) =>
-        group.every((condition) => condition.result),
-    );
-
-    return logic.action === "show" ? finalResult : !finalResult;
-}
-
-function isBlockVisible(
-    block: PublicFormBlockModel,
-    responses: FormSubmitPayload,
-): boolean {
-    if (!block.logics?.length) {
-        return true;
-    }
-
-    const beforeLogics = block.logics.filter(
-        (logic) =>
-            logic.evaluate === "before" ||
-            logic.action === "show" ||
-            logic.action === "hide",
-    );
-
-    // If any logic rule returns false, the block is not visible
-    return beforeLogics.every((logic) => evaluateLogicRule(logic, responses));
-}
-
 export const useConversation = defineStore("form", {
     state: (): ConversationStore => {
         return {
@@ -551,23 +432,5 @@ export const useConversation = defineStore("form", {
                 });
             });
         },
-
-        evaluateGroupBlock(currentBlock: PublicFormBlockModel) {
-            // we first should remove all blocks related to that group
-            this.queue =
-                this.queue?.filter((block) => {
-                    return block.parent_block !== currentBlock?.id;
-                }) ?? [];
-
-            // now we find all children from the storyboard
-            const children = this.storyboard?.filter((block) => {
-                return block.parent_block === currentBlock?.id;
-            });
-
-            // we add the children to the queue
-            if (children && children?.length > 0) {
-                this.queue?.splice(this.current + 1, 0, ...children);
-            }
-        },
     },
 });
diff --git a/resources/js/stores/helpers/logic.ts b/resources/js/stores/helpers/logic.ts
new file mode 100644
index 00000000..66645a11
--- /dev/null
+++ b/resources/js/stores/helpers/logic.ts
@@ -0,0 +1,121 @@
+export const operators: Array<{ key: Operator; label: string }> = [
+    { key: "equals", label: "is equal to" },
+    { key: "equalsNot", label: "is not equal to" },
+    { key: "contains", label: "contains" },
+    { key: "containsNot", label: "does not contain" },
+    { key: "isLowerThan", label: "is lower than" },
+    { key: "isGreaterThan", label: "is greater than" },
+];
+
+export function evaluateCondition(
+    condition: FormBlockLogicCondition,
+    responseValue: any,
+): boolean {
+    switch (condition.operator) {
+        case "equals":
+            return responseValue === condition.value;
+        case "equalsNot":
+            return responseValue !== condition.value;
+        case "contains":
+            return responseValue.includes(condition.value);
+        case "containsNot":
+            return !responseValue.includes(condition.value);
+        case "isLowerThan":
+            return responseValue < condition.value;
+        case "isGreaterThan":
+            return responseValue > condition.value;
+        default:
+            return false;
+    }
+}
+
+export function getResponseValue(response: any): any {
+    return "payload" in response
+        ? response.payload
+        : response.map((p) => p.payload).join(", ");
+}
+
+export function groupConditions(
+    evaluatedConditions: FormBlockLogicCondition[],
+): FormBlockLogicCondition[][] {
+    const groups: FormBlockLogicCondition[][] = [];
+    let currentIndex = 0;
+
+    evaluatedConditions.forEach((condition, index) => {
+        if (index === 0) {
+            groups[currentIndex] = [condition];
+        } else {
+            if (condition.chainOperator === "or") {
+                currentIndex++;
+            }
+            if (!groups[currentIndex]) {
+                groups[currentIndex] = [];
+            }
+            groups[currentIndex].push(condition);
+        }
+    });
+
+    return groups;
+}
+
+export function evaluateConditions(
+    conditions: FormBlockLogicCondition[],
+    responses: FormSubmitPayload,
+): FormBlockLogicCondition[] {
+    return conditions.map((condition) => ({
+        ...condition,
+        result:
+            condition.source && responses[condition.source]
+                ? evaluateCondition(
+                      condition,
+                      getResponseValue(responses[condition.source]),
+                  )
+                : false,
+    }));
+}
+
+export function evaluateLogicRule(
+    logic: FormBlockLogic,
+    responses: FormSubmitPayload,
+): boolean {
+    const evaluatedConditions = evaluateConditions(
+        logic.conditions as FormBlockLogicCondition[],
+        responses,
+    );
+    const conditionGroups = groupConditions(evaluatedConditions);
+
+    const finalResult = conditionGroups.some((group) =>
+        group.every((condition) => condition.result),
+    );
+
+    return logic.action === "show" ? finalResult : !finalResult;
+}
+
+export function isBlockVisible(
+    block: PublicFormBlockModel,
+    responses: FormSubmitPayload,
+): boolean {
+    if (!block.logics?.length) {
+        return true;
+    }
+
+    const beforeLogics = block.logics.filter(
+        (logic) =>
+            logic.evaluate === "before" ||
+            logic.action === "show" ||
+            logic.action === "hide",
+    );
+
+    // If any logic rule returns false, the block is not visible
+    return beforeLogics.every((logic) => evaluateLogicRule(logic, responses));
+}
+
+export function transformConditionForBackend(
+    condition: EditableFormBlockBlockLogicCondition,
+): FormBlockLogicCondition {
+    return {
+        ...condition,
+        source: condition.source?.key,
+        operator: condition.operator.key,
+    };
+}
diff --git a/resources/js/stores/helpers/queue.ts b/resources/js/stores/helpers/queue.ts
new file mode 100644
index 00000000..c619ca4b
--- /dev/null
+++ b/resources/js/stores/helpers/queue.ts
@@ -0,0 +1,63 @@
+export function createFlatQueue(
+    blocks: PublicFormBlockModel[],
+    parent_block: string | null = null,
+): PublicFormBlockModel[] {
+    return blocks
+        .filter((block) => block.parent_block === parent_block)
+        .flatMap((block) => {
+            const queueItem = block;
+            if (block.type === "group") {
+                const children = blocks.filter(
+                    (b) => b.parent_block === block.id,
+                );
+                return [queueItem, ...createFlatQueue(children, block.id)];
+            }
+            return [queueItem];
+        });
+}
+
+type FindBlocksOptions = {
+    filterGroups?: boolean;
+    includeTarget?: boolean;
+};
+
+export function findAllBlocksBeforeTarget(
+    tree: TreeNode[],
+    targetId: string,
+    options: FindBlocksOptions = {},
+): FormBlockModel[] {
+    const { filterGroups = true, includeTarget = false } = options;
+    const result: FormBlockModel[] = [];
+    let found = false;
+
+    function traverse(node: TreeNode) {
+        if (found) return;
+
+        result.push(node.block);
+
+        if (node.block.uuid === targetId) {
+            found = true;
+            return;
+        }
+
+        for (const child of node.children) {
+            traverse(child);
+            if (found) break;
+        }
+    }
+
+    for (const rootNode of tree) {
+        traverse(rootNode);
+        if (found) break;
+    }
+
+    // Remove the target block if not included
+    if (found && !includeTarget) {
+        result.pop();
+    }
+
+    // Filter groups if needed
+    return filterGroups
+        ? result.filter((block) => block.type !== "group")
+        : result;
+}
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index b37778ac..86c597b9 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -1,15 +1,14 @@
 import { useForm } from "@/stores";
 import { defineStore } from "pinia";
+import { findAllBlocksBeforeTarget } from "./helpers/queue";
 
 import {
     callCreateFormBlockLogic,
     callUpdateFormBlockLogic,
     callDeleteFormBlockLogic,
 } from "@/api/logics";
-interface ValidationError {
-    message: string;
-    errors: Record<string, string[]>;
-}
+
+import { transformConditionForBackend } from "./helpers/logic";
 
 interface LogicStore {
     block: FormBlockModel | null;
@@ -19,25 +18,6 @@ interface LogicStore {
     backup: FormBlockLogic[] | null;
 }
 
-export const operators: Array<{ key: Operator; label: string }> = [
-    { key: "equals", label: "is equal to" },
-    { key: "equalsNot", label: "is not equal to" },
-    { key: "contains", label: "contains" },
-    { key: "containsNot", label: "does not contain" },
-    { key: "isLowerThan", label: "is lower than" },
-    { key: "isGreaterThan", label: "is greater than" },
-];
-
-const transformConditionForBackend = (
-    condition: EditableFormBlockBlockLogicCondition,
-): FormBlockLogicCondition => {
-    return {
-        ...condition,
-        source: condition.source?.key,
-        operator: condition.operator.key,
-    };
-};
-
 export const useLogic = defineStore("logic", {
     state: (): LogicStore => {
         return {
@@ -219,36 +199,15 @@ export const useLogic = defineStore("logic", {
         availableSourceBlocks(state): Array<FormBlockModel> {
             const formStore = useForm();
 
-            const result: FormBlockModel[] = [];
-            let found = false;
-
-            const traverse = (node: TreeNode) => {
-                if (found) return;
-
-                result.push(node.block);
-
-                if (node.block.uuid === state.block?.uuid) {
-                    found = true;
-                    return;
-                }
-
-                for (const child of node.children) {
-                    traverse(child);
-                    if (found) break;
-                }
-            };
-
-            for (const rootNode of formStore.blocksTree) {
-                traverse(rootNode);
-                if (found) break;
+            if (!state.block?.uuid) {
+                return [];
             }
 
-            // Remove the last element (the found block) from the result
-            if (found) {
-                result.pop();
-            }
-
-            return result.filter((block) => block.type !== "group");
+            return findAllBlocksBeforeTarget(
+                formStore.blocksTree,
+                state.block.uuid,
+                { filterGroups: true, includeTarget: false },
+            );
         },
     },
 });
diff --git a/resources/js/types/models.d.ts b/resources/js/types/models.d.ts
index 2de6fa9c..e5ac900e 100644
--- a/resources/js/types/models.d.ts
+++ b/resources/js/types/models.d.ts
@@ -90,6 +90,11 @@ interface EditableFormBlockBlockLogicCondition extends FormBlockLogicCondition {
     operator: { key: Operator };
 }
 
+interface ValidationError {
+    message: string;
+    errors: Record<string, string[]>;
+}
+
 interface FormBlockLogic {
     id?: number;
     uuid?: string;

From 9b9cb7f9cd7e4630b80d4b8d223225b523153a5f Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 1 Nov 2024 16:34:37 +0100
Subject: [PATCH 35/43] add goto logic in conversation

---
 resources/js/stores/conversation.ts  | 28 +++++++++++++++++++++++++++-
 resources/js/stores/helpers/logic.ts | 22 ++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/resources/js/stores/conversation.ts b/resources/js/stores/conversation.ts
index 0382267d..d601aac1 100644
--- a/resources/js/stores/conversation.ts
+++ b/resources/js/stores/conversation.ts
@@ -6,7 +6,7 @@ import {
     callGetForm,
     callUploadFiles,
 } from "@/api/conversation";
-import { isBlockVisible } from "./helpers/logic";
+import { evaluateGotoLogic, isBlockVisible } from "./helpers/logic";
 import { createFlatQueue } from "./helpers/queue";
 import { Ref, ref } from "vue";
 
@@ -337,6 +337,12 @@ export const useConversation = defineStore("form", {
             }
         },
 
+        findBlockIndex(blockId: string): number {
+            return this.processedQueue.findIndex(
+                (block) => block.id === blockId,
+            );
+        },
+
         goToIndex(index: number) {
             if (index >= 0 && index < this.processedQueue.length) {
                 this.current = this.processedQueue[index].id;
@@ -345,6 +351,17 @@ export const useConversation = defineStore("form", {
             }
         },
 
+        executeGotoAction(targetBlockId: string) {
+            const targetIndex = this.findBlockIndex(targetBlockId);
+            if (targetIndex !== -1) {
+                this.goToIndex(targetIndex);
+            } else {
+                console.warn(
+                    `Target block ${targetBlockId} not found in processed queue`,
+                );
+            }
+        },
+
         back() {
             if (this.isFirstBlock) {
                 return;
@@ -358,6 +375,15 @@ export const useConversation = defineStore("form", {
          * @returns {Promise<boolean>}
          */
         async next(): Promise<boolean> {
+            const gotoAction = this.currentBlock
+                ? evaluateGotoLogic(this.currentBlock, this.payload)
+                : null;
+
+            if (gotoAction && gotoAction.target) {
+                this.executeGotoAction(gotoAction.target);
+                return Promise.resolve(false);
+            }
+
             if (this.isLastBlock) {
                 this.uploads = {};
                 this.isProcessing = true;
diff --git a/resources/js/stores/helpers/logic.ts b/resources/js/stores/helpers/logic.ts
index 66645a11..bbdff67e 100644
--- a/resources/js/stores/helpers/logic.ts
+++ b/resources/js/stores/helpers/logic.ts
@@ -110,6 +110,28 @@ export function isBlockVisible(
     return beforeLogics.every((logic) => evaluateLogicRule(logic, responses));
 }
 
+export function evaluateGotoLogic(
+    currentBlock: PublicFormBlockModel,
+    payload: FormSubmitPayload,
+): { target: string } | null {
+    if (!currentBlock?.logics) return null;
+
+    // Find goto actions that should be evaluated after block interaction
+    const gotoLogics = currentBlock.logics.filter(
+        (logic) => logic.action === "goto" && logic.evaluate === "after",
+    );
+
+    for (const logic of gotoLogics) {
+        const shouldExecute = evaluateLogicRule(logic, payload);
+
+        if (shouldExecute && logic.actionPayload) {
+            return { target: logic.actionPayload };
+        }
+    }
+
+    return null;
+}
+
 export function transformConditionForBackend(
     condition: EditableFormBlockBlockLogicCondition,
 ): FormBlockLogicCondition {

From 8858079996e6a11c7bbb3bfc80eed392b3f2caa0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 1 Nov 2024 17:03:23 +0100
Subject: [PATCH 36/43] add goto logic to conversation

---
 app/Http/Requests/FormBlockLogicRequest.php   |  2 +-
 app/Models/FormBlockLogic.php                 |  2 +-
 database/factories/FormBlockLogicFactory.php  |  2 +-
 ..._11_01_155436_fix_wrong_attribute_name.php | 17 ++++++++++++++++
 .../Factory/Sidebar/BlockLogicRule.vue        | 13 ++++++++----
 .../Factory/Sidebar/BlockLogicVisualizer.vue  |  2 +-
 resources/js/stores/helpers/logic.ts          | 20 +++++++++++++------
 resources/js/stores/logic.ts                  | 16 ++++++++++++++-
 resources/js/types/models.d.ts                |  2 +-
 9 files changed, 60 insertions(+), 16 deletions(-)
 create mode 100644 database/migrations/2024_11_01_155436_fix_wrong_attribute_name.php

diff --git a/app/Http/Requests/FormBlockLogicRequest.php b/app/Http/Requests/FormBlockLogicRequest.php
index 60bc7c2b..98b5b59e 100644
--- a/app/Http/Requests/FormBlockLogicRequest.php
+++ b/app/Http/Requests/FormBlockLogicRequest.php
@@ -29,7 +29,7 @@ public function rules(): array
             'conditions.*.value' => 'required|string',
             'conditions.*.chainOperator' => 'required|string|in:and,or',
             'action' => 'required|string|in:hide,show,goto',
-            'actionPayload' => 'nullable|string',
+            'action_payload' => 'nullable|string',
             'evaluate' => 'required|string|in:before,after',
         ];
     }
diff --git a/app/Models/FormBlockLogic.php b/app/Models/FormBlockLogic.php
index 6edb7d8e..e0f67e33 100644
--- a/app/Models/FormBlockLogic.php
+++ b/app/Models/FormBlockLogic.php
@@ -14,7 +14,7 @@ class FormBlockLogic extends Model
 
     protected $casts = [
         'conditions' => 'array',
-        'actionPayload' => 'array',
+        'action_payload' => 'array',
     ];
 
     protected static function boot()
diff --git a/database/factories/FormBlockLogicFactory.php b/database/factories/FormBlockLogicFactory.php
index 119b6c28..1747367e 100644
--- a/database/factories/FormBlockLogicFactory.php
+++ b/database/factories/FormBlockLogicFactory.php
@@ -29,7 +29,7 @@ public function definition(): array
                     'chainOperator' => 'and',
                 ]
             ],
-            'actionPayload' => [],
+            'action_payload' => [],
             'form_block_id' => FormBlock::factory(),
         ];
     }
diff --git a/database/migrations/2024_11_01_155436_fix_wrong_attribute_name.php b/database/migrations/2024_11_01_155436_fix_wrong_attribute_name.php
new file mode 100644
index 00000000..a1105081
--- /dev/null
+++ b/database/migrations/2024_11_01_155436_fix_wrong_attribute_name.php
@@ -0,0 +1,17 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class () extends Migration {
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('form_block_logics', function (Blueprint $table) {
+            $table->renameColumn('actionPayload', 'action_payload');
+        });
+    }
+};
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
index b542766f..c959829b 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
@@ -176,9 +176,9 @@ const getBlockOption = (block: FormBlockModel) => {
   };
 };
 
-if (props.rule.actionPayload) {
+if (props.rule.action_payload) {
   const found = logicStore.allBlocks?.find(
-    (block) => block.uuid === props.rule.actionPayload,
+    (block) => block.uuid === props.rule.action_payload,
   );
 
   if (found) {
@@ -234,7 +234,12 @@ const hasConditions = computed(() => {
 });
 
 const availableSourceBlocks = computed(() => {
-  return logicStore.availableSourceBlocks.map((block) => {
+  const blocks =
+    props.rule.action === "goto"
+      ? logicStore.availableSourceBlocksWithTarget
+      : logicStore.availableSourceBlocks;
+
+  return blocks.map((block) => {
     return getBlockOption(block);
   });
 });
@@ -262,7 +267,7 @@ watch(
         conditions: conditions.value,
         evaluate: evaluate.value,
         action: action.value,
-        actionPayload: target.value?.key ?? null,
+        action_payload: target.value?.key ?? null,
       },
       props.index,
     );
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue b/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
index 0ad4f6b0..cbfe2e62 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
@@ -61,7 +61,7 @@
           <template v-else-if="rule.action === 'goto'">
             <D9Icon name="eye-slash" size="sm" />
             to to block
-            <span class="font-bold font-mono">{{ rule.actionPayload }}</span>
+            <span class="font-bold font-mono">{{ rule.action_payload }}</span>
           </template>
         </div>
       </div>
diff --git a/resources/js/stores/helpers/logic.ts b/resources/js/stores/helpers/logic.ts
index bbdff67e..1e1302ca 100644
--- a/resources/js/stores/helpers/logic.ts
+++ b/resources/js/stores/helpers/logic.ts
@@ -1,3 +1,5 @@
+import { should } from "vitest";
+
 export const operators: Array<{ key: Operator; label: string }> = [
     { key: "equals", label: "is equal to" },
     { key: "equalsNot", label: "is not equal to" },
@@ -88,7 +90,13 @@ export function evaluateLogicRule(
         group.every((condition) => condition.result),
     );
 
-    return logic.action === "show" ? finalResult : !finalResult;
+    switch (logic.action) {
+        case "show":
+        case "goto":
+            return finalResult;
+        case "hide":
+            return !finalResult;
+    }
 }
 
 export function isBlockVisible(
@@ -111,21 +119,21 @@ export function isBlockVisible(
 }
 
 export function evaluateGotoLogic(
-    currentBlock: PublicFormBlockModel,
+    block: PublicFormBlockModel,
     payload: FormSubmitPayload,
 ): { target: string } | null {
-    if (!currentBlock?.logics) return null;
+    if (!block?.logics) return null;
 
     // Find goto actions that should be evaluated after block interaction
-    const gotoLogics = currentBlock.logics.filter(
+    const gotoLogics = block.logics.filter(
         (logic) => logic.action === "goto" && logic.evaluate === "after",
     );
 
     for (const logic of gotoLogics) {
         const shouldExecute = evaluateLogicRule(logic, payload);
 
-        if (shouldExecute && logic.actionPayload) {
-            return { target: logic.actionPayload };
+        if (shouldExecute && logic.action_payload) {
+            return { target: logic.action_payload };
         }
     }
 
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index 86c597b9..c78ae221 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -66,7 +66,7 @@ export const useLogic = defineStore("logic", {
                 form_block_id: this.block.id,
                 name: "Rule #" + (this.block.logics.length + 1),
                 action: "hide",
-                actionPayload: null,
+                action_payload: null,
                 evaluate: "before",
                 conditions: [],
             });
@@ -196,6 +196,20 @@ export const useLogic = defineStore("logic", {
             return formStore.blocks;
         },
 
+        availableSourceBlocksWithTarget(state): Array<FormBlockModel> {
+            const formStore = useForm();
+
+            if (!state.block?.uuid) {
+                return [];
+            }
+
+            return findAllBlocksBeforeTarget(
+                formStore.blocksTree,
+                state.block.uuid,
+                { filterGroups: true, includeTarget: true },
+            );
+        },
+
         availableSourceBlocks(state): Array<FormBlockModel> {
             const formStore = useForm();
 
diff --git a/resources/js/types/models.d.ts b/resources/js/types/models.d.ts
index e5ac900e..ebdba58f 100644
--- a/resources/js/types/models.d.ts
+++ b/resources/js/types/models.d.ts
@@ -104,7 +104,7 @@ interface FormBlockLogic {
         | Array<FormBlockLogicCondition>
         | Array<EditableFormBlockBlockLogicCondition>;
     action: "show" | "hide" | "goto";
-    actionPayload: string | null;
+    action_payload: string | null;
     evaluate: "before" | "after";
 }
 

From b7793d4d43f38d3e89d7c9e7c81c7ec99db492b9 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 6 Feb 2025 12:42:27 +0100
Subject: [PATCH 37/43] fix prose classes

---
 resources/js/Pages/PrivacyPolicy.vue                    | 2 +-
 resources/js/Pages/Teams/MissingTeam.vue                | 2 +-
 resources/js/Pages/TermsOfService.vue                   | 2 +-
 resources/js/components/Factory/Main/WorkbenchEmpty.vue | 4 +++-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/js/Pages/PrivacyPolicy.vue b/resources/js/Pages/PrivacyPolicy.vue
index e186ed5b..0ce85cd3 100644
--- a/resources/js/Pages/PrivacyPolicy.vue
+++ b/resources/js/Pages/PrivacyPolicy.vue
@@ -10,7 +10,7 @@
 
         <div
           v-html="policy"
-          class="prose mt-6 w-full overflow-hidden bg-white p-6 shadow-md sm:max-w-2xl sm:rounded-lg"
+          class="form-message-prose mt-6 w-full overflow-hidden bg-white p-6 shadow-md sm:max-w-2xl sm:rounded-lg"
         ></div>
       </div>
     </div>
diff --git a/resources/js/Pages/Teams/MissingTeam.vue b/resources/js/Pages/Teams/MissingTeam.vue
index 858079e4..3ffbe542 100644
--- a/resources/js/Pages/Teams/MissingTeam.vue
+++ b/resources/js/Pages/Teams/MissingTeam.vue
@@ -22,7 +22,7 @@
     </h1>
 
     <div
-      class="border-indigo-80 mb-6 rounded border border-indigo-700 bg-indigo-900 px-4 py-6 text-indigo-300 prose"
+      class="border-indigo-80 mb-6 rounded border border-indigo-700 bg-indigo-900 px-4 py-6 text-indigo-300 form-message-prose"
     >
       <p>
         To begin using Input, you need to be part of a team. Currently, you're
diff --git a/resources/js/Pages/TermsOfService.vue b/resources/js/Pages/TermsOfService.vue
index f1d94662..4e7695bf 100644
--- a/resources/js/Pages/TermsOfService.vue
+++ b/resources/js/Pages/TermsOfService.vue
@@ -10,7 +10,7 @@
 
         <div
           v-html="terms"
-          class="prose mt-6 w-full overflow-hidden bg-white p-6 shadow-md sm:max-w-2xl sm:rounded-lg"
+          class="form-message-prose mt-6 w-full overflow-hidden bg-white p-6 shadow-md sm:max-w-2xl sm:rounded-lg"
         ></div>
       </div>
     </div>
diff --git a/resources/js/components/Factory/Main/WorkbenchEmpty.vue b/resources/js/components/Factory/Main/WorkbenchEmpty.vue
index d155234b..fffedd28 100644
--- a/resources/js/components/Factory/Main/WorkbenchEmpty.vue
+++ b/resources/js/components/Factory/Main/WorkbenchEmpty.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="flex h-full items-center justify-center">
-    <div class="prose w-full max-w-xl rounded bg-white px-6 py-8 shadow">
+    <div
+      class="form-message-prose w-full max-w-xl rounded bg-white px-6 py-8 shadow"
+    >
       <h2><D9Icon class="" name="circle-info" /> Welcome to the Editor</h2>
 
       <h3>Storyboard</h3>

From 5794062ff9e115ea22885e726bc87a839eafc15f Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 6 Feb 2025 12:46:50 +0100
Subject: [PATCH 38/43] migrate to mise-en-place

---
 .tool-versions |  1 -
 README.md      |  5 +++--
 mise.toml      | 12 ++++++++++++
 3 files changed, 15 insertions(+), 3 deletions(-)
 delete mode 100644 .tool-versions
 create mode 100644 mise.toml

diff --git a/.tool-versions b/.tool-versions
deleted file mode 100644
index 0e686c42..00000000
--- a/.tool-versions
+++ /dev/null
@@ -1 +0,0 @@
-nodejs 18.20.4
diff --git a/README.md b/README.md
index 97e4188c..8e8b18fd 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ We are using [Laravel Sail](https://laravel.com/docs/master/sail) to develop Inp
 
 -   [Docker](https://www.docker.com/get-started/)
 -   [NodeJS](https://nodejs.org/) (v16 LTS preferred)
+-   [mise-en-place](https://mise.jdx.dev/) (for task automation)
 
 ### Download
 
@@ -39,10 +40,10 @@ cp .env.dev.example .env
 
 ### Running
 
-Make sure that your Docker agent is running. There are several steps necessary to build the app for the first time. To simplify these tasks, we have a Makefile in place. Just run the following command, and all build steps will run automatically:
+Make sure that your Docker agent is running. There are several steps necessary to build the app for the first time. To simplify these tasks, we use mise-en-place. Just run the following command, and all build steps will run automatically:
 
 ```bash
-make up
+mise task up
 ```
 
 ### Webpack (Mix)
diff --git a/mise.toml b/mise.toml
new file mode 100644
index 00000000..39fb9608
--- /dev/null
+++ b/mise.toml
@@ -0,0 +1,12 @@
+[tools]
+node = "18"
+
+[tasks.up]
+run = [
+    "docker run --rm -u \"$(id -u):$(id -g)\" -v \"$(pwd):/var/www/html\" -w \"/var/www/html\" laravelsail/php83-composer:latest composer install --ignore-platform-reqs",
+    "./vendor/bin/sail up -d",
+    "./vendor/bin/sail artisan migrate",
+    "./vendor/bin/sail artisan key:generate",
+    "npm ci",
+    "npm run dev",
+]

From 84aa86842b81fc175030444d41bdb618a9ee2892 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 6 Feb 2025 12:47:07 +0100
Subject: [PATCH 39/43] delete makefile

---
 Makefile | 13 -------------
 1 file changed, 13 deletions(-)
 delete mode 100644 Makefile

diff --git a/Makefile b/Makefile
deleted file mode 100644
index c6e22819..00000000
--- a/Makefile
+++ /dev/null
@@ -1,13 +0,0 @@
-SHELL=/bin/bash
-baseDir := $(shell pwd)
-userRights := $(shell id -u):$(shell id -g)
-
-up:
-	docker run --rm -u "$(userRights)" -v "$(baseDir):/var/www/html" -w "/var/www/html" laravelsail/php81-composer:latest composer install --ignore-platform-reqs
-	./vendor/bin/sail up -d
-	npm ci
-	@echo "Run dev build of assets"
-	npm run dev
-	./vendor/bin/sail artisan migrate
-	./vendor/bin/sail artisan key:generate
-	@echo "Application is up and running http://localhost:8500"

From f64822a81ee076410da221e09951cfd9222d60d1 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 6 Feb 2025 13:21:04 +0100
Subject: [PATCH 40/43] remove unused import

---
 resources/js/stores/helpers/logic.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/js/stores/helpers/logic.ts b/resources/js/stores/helpers/logic.ts
index 1e1302ca..5692e261 100644
--- a/resources/js/stores/helpers/logic.ts
+++ b/resources/js/stores/helpers/logic.ts
@@ -1,5 +1,3 @@
-import { should } from "vitest";
-
 export const operators: Array<{ key: Operator; label: string }> = [
     { key: "equals", label: "is equal to" },
     { key: "equalsNot", label: "is not equal to" },

From aad188fadf43753fd0195350b96454871d88588a Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 6 Feb 2025 13:51:49 +0100
Subject: [PATCH 41/43] update packages

---
 package-lock.json | 695 +++++++++++++++++++++++++++++-----------------
 1 file changed, 442 insertions(+), 253 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3afd6619..7be605c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1072,13 +1072,13 @@
             }
         },
         "node_modules/@intlify/core-base": {
-            "version": "9.14.0",
-            "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.14.0.tgz",
-            "integrity": "sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==",
+            "version": "9.14.2",
+            "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.14.2.tgz",
+            "integrity": "sha512-DZyQ4Hk22sC81MP4qiCDuU+LdaYW91A6lCjq8AWPvY3+mGMzhGDfOCzvyR6YBQxtlPjFqMoFk9ylnNYRAQwXtQ==",
             "license": "MIT",
             "dependencies": {
-                "@intlify/message-compiler": "9.14.0",
-                "@intlify/shared": "9.14.0"
+                "@intlify/message-compiler": "9.14.2",
+                "@intlify/shared": "9.14.2"
             },
             "engines": {
                 "node": ">= 16"
@@ -1088,12 +1088,12 @@
             }
         },
         "node_modules/@intlify/message-compiler": {
-            "version": "9.14.0",
-            "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.14.0.tgz",
-            "integrity": "sha512-sXNsoMI0YsipSXW8SR75drmVK56tnJHoYbPXUv2Cf9lz6FzvwsosFm6JtC1oQZI/kU+n7qx0qRrEWkeYFTgETA==",
+            "version": "9.14.2",
+            "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.14.2.tgz",
+            "integrity": "sha512-YsKKuV4Qv4wrLNsvgWbTf0E40uRv+Qiw1BeLQ0LAxifQuhiMe+hfTIzOMdWj/ZpnTDj4RSZtkXjJM7JDiiB5LQ==",
             "license": "MIT",
             "dependencies": {
-                "@intlify/shared": "9.14.0",
+                "@intlify/shared": "9.14.2",
                 "source-map-js": "^1.0.2"
             },
             "engines": {
@@ -1104,9 +1104,9 @@
             }
         },
         "node_modules/@intlify/shared": {
-            "version": "9.14.0",
-            "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.14.0.tgz",
-            "integrity": "sha512-r+N8KRQL7LgN1TMTs1A2svfuAU0J94Wu9wWdJVJqYsoMMLIeJxrPjazihfHpmJqfgZq0ah3Y9Q4pgWV2O90Fyg==",
+            "version": "9.14.2",
+            "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.14.2.tgz",
+            "integrity": "sha512-uRAHAxYPeF+G5DBIboKpPgC/Waecd4Jz8ihtkpJQD5ycb5PwXp0k/+hBGl5dAjwF7w+l74kz/PKA8r8OK//RUw==",
             "license": "MIT",
             "engines": {
                 "node": ">= 16"
@@ -1478,9 +1478,9 @@
             "license": "MIT"
         },
         "node_modules/@rollup/rollup-android-arm-eabi": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.2.tgz",
-            "integrity": "sha512-fSuPrt0ZO8uXeS+xP3b+yYTCBUd05MoSp2N/MFOgjhhUhMmchXlpTQrTpI8T+YAwAQuK7MafsCOxW7VrPMrJcg==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.4.tgz",
+            "integrity": "sha512-gGi5adZWvjtJU7Axs//CWaQbQd/vGy8KGcnEaCWiyCqxWYDxwIlAHFuSe6Guoxtd0SRvSfVTDMPd5H+4KE2kKA==",
             "cpu": [
                 "arm"
             ],
@@ -1491,9 +1491,9 @@
             ]
         },
         "node_modules/@rollup/rollup-android-arm64": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.2.tgz",
-            "integrity": "sha512-xGU5ZQmPlsjQS6tzTTGwMsnKUtu0WVbl0hYpTPauvbRAnmIvpInhJtgjj3mcuJpEiuUw4v1s4BimkdfDWlh7gA==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.4.tgz",
+            "integrity": "sha512-1aRlh1gqtF7vNPMnlf1vJKk72Yshw5zknR/ZAVh7zycRAGF2XBMVDAHmFQz/Zws5k++nux3LOq/Ejj1WrDR6xg==",
             "cpu": [
                 "arm64"
             ],
@@ -1504,9 +1504,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-arm64": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.2.tgz",
-            "integrity": "sha512-99AhQ3/ZMxU7jw34Sq8brzXqWH/bMnf7ZVhvLk9QU2cOepbQSVTns6qoErJmSiAvU3InRqC2RRZ5ovh1KN0d0Q==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.4.tgz",
+            "integrity": "sha512-drHl+4qhFj+PV/jrQ78p9ch6A0MfNVZScl/nBps5a7u01aGf/GuBRrHnRegA9bP222CBDfjYbFdjkIJ/FurvSQ==",
             "cpu": [
                 "arm64"
             ],
@@ -1517,9 +1517,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-x64": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.2.tgz",
-            "integrity": "sha512-ZbRaUvw2iN/y37x6dY50D8m2BnDbBjlnMPotDi/qITMJ4sIxNY33HArjikDyakhSv0+ybdUxhWxE6kTI4oX26w==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.4.tgz",
+            "integrity": "sha512-hQqq/8QALU6t1+fbNmm6dwYsa0PDD4L5r3TpHx9dNl+aSEMnIksHZkSO3AVH+hBMvZhpumIGrTFj8XCOGuIXjw==",
             "cpu": [
                 "x64"
             ],
@@ -1529,10 +1529,36 @@
                 "darwin"
             ]
         },
+        "node_modules/@rollup/rollup-freebsd-arm64": {
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.4.tgz",
+            "integrity": "sha512-/L0LixBmbefkec1JTeAQJP0ETzGjFtNml2gpQXA8rpLo7Md+iXQzo9kwEgzyat5Q+OG/C//2B9Fx52UxsOXbzw==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ]
+        },
+        "node_modules/@rollup/rollup-freebsd-x64": {
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.4.tgz",
+            "integrity": "sha512-6Rk3PLRK+b8L/M6m/x6Mfj60LhAUcLJ34oPaxufA+CfqkUrDoUPQYFdRrhqyOvtOKXLJZJwxlOLbQjNYQcRQfw==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ]
+        },
         "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.2.tgz",
-            "integrity": "sha512-ztRJJMiE8nnU1YFcdbd9BcH6bGWG1z+jP+IPW2oDUAPxPjo9dverIOyXz76m6IPA6udEL12reYeLojzW2cYL7w==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.4.tgz",
+            "integrity": "sha512-kmT3x0IPRuXY/tNoABp2nDvI9EvdiS2JZsd4I9yOcLCCViKsP0gB38mVHOhluzx+SSVnM1KNn9k6osyXZhLoCA==",
             "cpu": [
                 "arm"
             ],
@@ -1543,9 +1569,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.2.tgz",
-            "integrity": "sha512-flOcGHDZajGKYpLV0JNc0VFH361M7rnV1ee+NTeC/BQQ1/0pllYcFmxpagltANYt8FYf9+kL6RSk80Ziwyhr7w==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.4.tgz",
+            "integrity": "sha512-3iSA9tx+4PZcJH/Wnwsvx/BY4qHpit/u2YoZoXugWVfc36/4mRkgGEoRbRV7nzNBSCOgbWMeuQ27IQWgJ7tRzw==",
             "cpu": [
                 "arm"
             ],
@@ -1556,9 +1582,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-gnu": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.2.tgz",
-            "integrity": "sha512-69CF19Kp3TdMopyteO/LJbWufOzqqXzkrv4L2sP8kfMaAQ6iwky7NoXTp7bD6/irKgknDKM0P9E/1l5XxVQAhw==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.4.tgz",
+            "integrity": "sha512-7CwSJW+sEhM9sESEk+pEREF2JL0BmyCro8UyTq0Kyh0nu1v0QPNY3yfLPFKChzVoUmaKj8zbdgBxUhBRR+xGxg==",
             "cpu": [
                 "arm64"
             ],
@@ -1569,9 +1595,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-musl": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.2.tgz",
-            "integrity": "sha512-48pD/fJkTiHAZTnZwR0VzHrao70/4MlzJrq0ZsILjLW/Ab/1XlVUStYyGt7tdyIiVSlGZbnliqmult/QGA2O2w==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.4.tgz",
+            "integrity": "sha512-GZdafB41/4s12j8Ss2izofjeFXRAAM7sHCb+S4JsI9vaONX/zQ8cXd87B9MRU/igGAJkKvmFmJJBeeT9jJ5Cbw==",
             "cpu": [
                 "arm64"
             ],
@@ -1581,10 +1607,23 @@
                 "linux"
             ]
         },
+        "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.4.tgz",
+            "integrity": "sha512-uuphLuw1X6ur11675c2twC6YxbzyLSpWggvdawTUamlsoUv81aAXRMPBC1uvQllnBGls0Qt5Siw8reSIBnbdqQ==",
+            "cpu": [
+                "loong64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
         "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.2.tgz",
-            "integrity": "sha512-cZdyuInj0ofc7mAQpKcPR2a2iu4YM4FQfuUzCVA2u4HI95lCwzjoPtdWjdpDKyHxI0UO82bLDoOaLfpZ/wviyQ==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.4.tgz",
+            "integrity": "sha512-KvLEw1os2gSmD6k6QPCQMm2T9P2GYvsMZMRpMz78QpSoEevHbV/KOUbI/46/JRalhtSAYZBYLAnT9YE4i/l4vg==",
             "cpu": [
                 "ppc64"
             ],
@@ -1595,9 +1634,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.2.tgz",
-            "integrity": "sha512-RL56JMT6NwQ0lXIQmMIWr1SW28z4E4pOhRRNqwWZeXpRlykRIlEpSWdsgNWJbYBEWD84eocjSGDu/XxbYeCmwg==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.4.tgz",
+            "integrity": "sha512-wcpCLHGM9yv+3Dql/CI4zrY2mpQ4WFergD3c9cpRowltEh5I84pRT/EuHZsG0In4eBPPYthXnuR++HrFkeqwkA==",
             "cpu": [
                 "riscv64"
             ],
@@ -1608,9 +1647,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-s390x-gnu": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.2.tgz",
-            "integrity": "sha512-PMxkrWS9z38bCr3rWvDFVGD6sFeZJw4iQlhrup7ReGmfn7Oukrr/zweLhYX6v2/8J6Cep9IEA/SmjXjCmSbrMQ==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.4.tgz",
+            "integrity": "sha512-nLbfQp2lbJYU8obhRQusXKbuiqm4jSJteLwfjnunDT5ugBKdxqw1X9KWwk8xp1OMC6P5d0WbzxzhWoznuVK6XA==",
             "cpu": [
                 "s390x"
             ],
@@ -1621,9 +1660,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-gnu": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.2.tgz",
-            "integrity": "sha512-B90tYAUoLhU22olrafY3JQCFLnT3NglazdwkHyxNDYF/zAxJt5fJUB/yBoWFoIQ7SQj+KLe3iL4BhOMa9fzgpw==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.4.tgz",
+            "integrity": "sha512-JGejzEfVzqc/XNiCKZj14eb6s5w8DdWlnQ5tWUbs99kkdvfq9btxxVX97AaxiUX7xJTKFA0LwoS0KU8C2faZRg==",
             "cpu": [
                 "x64"
             ],
@@ -1634,9 +1673,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-musl": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.2.tgz",
-            "integrity": "sha512-7twFizNXudESmC9oneLGIUmoHiiLppz/Xs5uJQ4ShvE6234K0VB1/aJYU3f/4g7PhssLGKBVCC37uRkkOi8wjg==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.4.tgz",
+            "integrity": "sha512-/iFIbhzeyZZy49ozAWJ1ZR2KW6ZdYUbQXLT4O5n1cRZRoTpwExnHLjlurDXXPKEGxiAg0ujaR9JDYKljpr2fDg==",
             "cpu": [
                 "x64"
             ],
@@ -1647,9 +1686,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-arm64-msvc": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.2.tgz",
-            "integrity": "sha512-9rRero0E7qTeYf6+rFh3AErTNU1VCQg2mn7CQcI44vNUWM9Ze7MSRS/9RFuSsox+vstRt97+x3sOhEey024FRQ==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.4.tgz",
+            "integrity": "sha512-qORc3UzoD5UUTneiP2Afg5n5Ti1GAW9Gp5vHPxzvAFFA3FBaum9WqGvYXGf+c7beFdOKNos31/41PRMUwh1tpA==",
             "cpu": [
                 "arm64"
             ],
@@ -1660,9 +1699,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-ia32-msvc": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.2.tgz",
-            "integrity": "sha512-5rA4vjlqgrpbFVVHX3qkrCo/fZTj1q0Xxpg+Z7yIo3J2AilW7t2+n6Q8Jrx+4MrYpAnjttTYF8rr7bP46BPzRw==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.4.tgz",
+            "integrity": "sha512-5g7E2PHNK2uvoD5bASBD9aelm44nf1w4I5FEI7MPHLWcCSrR8JragXZWgKPXk5i2FU3JFfa6CGZLw2RrGBHs2Q==",
             "cpu": [
                 "ia32"
             ],
@@ -1673,9 +1712,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-x64-msvc": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.2.tgz",
-            "integrity": "sha512-6UUxd0+SKomjdzuAcp+HAmxw1FlGBnl1v2yEPSabtx4lBfdXHDVsW7+lQkgz9cNFJGY3AWR7+V8P5BqkD9L9nA==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.4.tgz",
+            "integrity": "sha512-p0scwGkR4kZ242xLPBuhSckrJ734frz6v9xZzD+kHVYRAkSUmdSLCIJRfql6H5//aF8Q10K+i7q8DiPfZp0b7A==",
             "cpu": [
                 "x64"
             ],
@@ -2226,13 +2265,6 @@
             "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==",
             "dev": true
         },
-        "node_modules/@types/cookie": {
-            "version": "0.4.1",
-            "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
-            "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/@types/cors": {
             "version": "2.8.17",
             "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz",
@@ -2244,9 +2276,10 @@
             }
         },
         "node_modules/@types/estree": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-            "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+            "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+            "license": "MIT"
         },
         "node_modules/@types/json-schema": {
             "version": "7.0.15",
@@ -3620,14 +3653,14 @@
             }
         },
         "node_modules/browser-sync": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-3.0.2.tgz",
-            "integrity": "sha512-PC9c7aWJFVR4IFySrJxOqLwB9ENn3/TaXCXtAa0SzLwocLN3qMjN+IatbjvtCX92BjNXsY6YWg9Eb7F3Wy255g==",
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-3.0.3.tgz",
+            "integrity": "sha512-91hoBHKk1C4pGeD+oE9Ld222k2GNQEAsI5AElqR8iLLWNrmZR2LPP8B0h8dpld9u7kro5IEUB3pUb0DJ3n1cRQ==",
             "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
-                "browser-sync-client": "^3.0.2",
-                "browser-sync-ui": "^3.0.2",
+                "browser-sync-client": "^3.0.3",
+                "browser-sync-ui": "^3.0.3",
                 "bs-recipes": "1.3.4",
                 "chalk": "4.1.2",
                 "chokidar": "^3.5.1",
@@ -3641,15 +3674,15 @@
                 "fs-extra": "3.0.1",
                 "http-proxy": "^1.18.1",
                 "immutable": "^3",
-                "micromatch": "^4.0.2",
+                "micromatch": "^4.0.8",
                 "opn": "5.3.0",
                 "portscanner": "2.2.0",
                 "raw-body": "^2.3.2",
                 "resp-modifier": "6.0.2",
                 "rx": "4.1.0",
-                "send": "0.16.2",
-                "serve-index": "1.9.1",
-                "serve-static": "1.13.2",
+                "send": "^0.19.0",
+                "serve-index": "^1.9.1",
+                "serve-static": "^1.16.2",
                 "server-destroy": "1.0.1",
                 "socket.io": "^4.4.1",
                 "ua-parser-js": "^1.0.33",
@@ -3663,9 +3696,9 @@
             }
         },
         "node_modules/browser-sync-client": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/browser-sync-client/-/browser-sync-client-3.0.2.tgz",
-            "integrity": "sha512-tBWdfn9L0wd2Pjuz/NWHtNEKthVb1Y67vg8/qyGNtCqetNz5lkDkFnrsx5UhPNPYUO8vci50IWC/BhYaQskDiQ==",
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/browser-sync-client/-/browser-sync-client-3.0.3.tgz",
+            "integrity": "sha512-TOEXaMgYNjBYIcmX5zDlOdjEqCeCN/d7opf/fuyUD/hhGVCfP54iQIDhENCi012AqzYZm3BvuFl57vbwSTwkSQ==",
             "dev": true,
             "license": "ISC",
             "dependencies": {
@@ -3678,9 +3711,9 @@
             }
         },
         "node_modules/browser-sync-ui": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-3.0.2.tgz",
-            "integrity": "sha512-V3FwWAI+abVbFLTyJjXJlCMBwjc3GXf/BPGfwO2fMFACWbIGW9/4SrBOFYEOOtqzCjQE0Di+U3VIb7eES4omNA==",
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-3.0.3.tgz",
+            "integrity": "sha512-FcGWo5lP5VodPY6O/f4pXQy5FFh4JK0f2/fTBsp0Lx1NtyBWs/IfPPJbW8m1ujTW/2r07oUXKTF2LYZlCZktjw==",
             "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
@@ -3693,15 +3726,6 @@
                 "stream-throttle": "^0.1.3"
             }
         },
-        "node_modules/browser-sync/node_modules/debug": {
-            "version": "2.6.9",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-            "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-            "dev": true,
-            "dependencies": {
-                "ms": "2.0.0"
-            }
-        },
         "node_modules/browser-sync/node_modules/fs-extra": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
@@ -3713,27 +3737,6 @@
                 "universalify": "^0.1.0"
             }
         },
-        "node_modules/browser-sync/node_modules/http-errors": {
-            "version": "1.6.3",
-            "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-            "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
-            "dev": true,
-            "dependencies": {
-                "depd": "~1.1.2",
-                "inherits": "2.0.3",
-                "setprototypeof": "1.1.0",
-                "statuses": ">= 1.4.0 < 2"
-            },
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/browser-sync/node_modules/inherits": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-            "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-            "dev": true
-        },
         "node_modules/browser-sync/node_modules/jsonfile": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",
@@ -3743,75 +3746,6 @@
                 "graceful-fs": "^4.1.6"
             }
         },
-        "node_modules/browser-sync/node_modules/mime": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
-            "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==",
-            "dev": true,
-            "bin": {
-                "mime": "cli.js"
-            }
-        },
-        "node_modules/browser-sync/node_modules/ms": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-            "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-            "dev": true
-        },
-        "node_modules/browser-sync/node_modules/send": {
-            "version": "0.16.2",
-            "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
-            "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
-            "dev": true,
-            "dependencies": {
-                "debug": "2.6.9",
-                "depd": "~1.1.2",
-                "destroy": "~1.0.4",
-                "encodeurl": "~1.0.2",
-                "escape-html": "~1.0.3",
-                "etag": "~1.8.1",
-                "fresh": "0.5.2",
-                "http-errors": "~1.6.2",
-                "mime": "1.4.1",
-                "ms": "2.0.0",
-                "on-finished": "~2.3.0",
-                "range-parser": "~1.2.0",
-                "statuses": "~1.4.0"
-            },
-            "engines": {
-                "node": ">= 0.8.0"
-            }
-        },
-        "node_modules/browser-sync/node_modules/serve-static": {
-            "version": "1.13.2",
-            "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
-            "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
-            "dev": true,
-            "dependencies": {
-                "encodeurl": "~1.0.2",
-                "escape-html": "~1.0.3",
-                "parseurl": "~1.3.2",
-                "send": "0.16.2"
-            },
-            "engines": {
-                "node": ">= 0.8.0"
-            }
-        },
-        "node_modules/browser-sync/node_modules/setprototypeof": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-            "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
-            "dev": true
-        },
-        "node_modules/browser-sync/node_modules/statuses": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
-            "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
-            "dev": true,
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
         "node_modules/browser-sync/node_modules/universalify": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -3965,9 +3899,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001658",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001658.tgz",
-            "integrity": "sha512-N2YVqWbJELVdrnsW5p+apoQyYt51aBMSsBZki1XZEfeBCexcM/sf4xiAHcXQBkuOwJBXtWF7aW1sYX6tKebPHw==",
+            "version": "1.0.30001697",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001697.tgz",
+            "integrity": "sha512-GwNPlWJin8E+d7Gxq96jxM6w0w+VFeyyXRsjU58emtkYqnbwHqXm5uT2uCmO0RQE9htWknOP4xtBlLmM/gWxvQ==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -4245,9 +4179,9 @@
             }
         },
         "node_modules/cookie": {
-            "version": "0.4.2",
-            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
-            "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+            "version": "0.7.2",
+            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+            "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -4334,9 +4268,10 @@
             "license": "MIT"
         },
         "node_modules/cross-spawn": {
-            "version": "7.0.3",
-            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-            "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+            "version": "7.0.6",
+            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+            "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+            "license": "MIT",
             "dependencies": {
                 "path-key": "^3.1.0",
                 "shebang-command": "^2.0.0",
@@ -4517,10 +4452,15 @@
             }
         },
         "node_modules/destroy": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-            "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
-            "dev": true
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+            "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8",
+                "npm": "1.2.8000 || >= 1.4.16"
+            }
         },
         "node_modules/dev-ip": {
             "version": "1.0.1",
@@ -4692,18 +4632,17 @@
             }
         },
         "node_modules/engine.io": {
-            "version": "6.5.5",
-            "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.5.5.tgz",
-            "integrity": "sha512-C5Pn8Wk+1vKBoHghJODM63yk8MvrO9EWZUfkAt5HAqIgPE4/8FF0PEGHXtEd40l223+cE5ABWuPzm38PHFXfMA==",
+            "version": "6.6.4",
+            "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.4.tgz",
+            "integrity": "sha512-ZCkIjSYNDyGn0R6ewHDtXgns/Zre/NT6Agvq1/WobF7JXgFff4SeDroKiCO3fNJreU9YG429Sc81o4w5ok/W5g==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@types/cookie": "^0.4.1",
                 "@types/cors": "^2.8.12",
                 "@types/node": ">=10.0.0",
                 "accepts": "~1.3.4",
                 "base64id": "2.0.0",
-                "cookie": "~0.4.1",
+                "cookie": "~0.7.2",
                 "cors": "~2.8.5",
                 "debug": "~4.3.1",
                 "engine.io-parser": "~5.2.1",
@@ -4714,9 +4653,9 @@
             }
         },
         "node_modules/engine.io-client": {
-            "version": "6.5.4",
-            "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.4.tgz",
-            "integrity": "sha512-GeZeeRjpD2qf49cZQ0Wvh/8NJNfeXkXXcoGh+F77oEAgo9gUHwT1fCRxSNU+YEEaysOJTnsFHmM5oAcPy4ntvQ==",
+            "version": "6.6.3",
+            "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
+            "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -4724,7 +4663,7 @@
                 "debug": "~4.3.1",
                 "engine.io-parser": "~5.2.1",
                 "ws": "~8.17.1",
-                "xmlhttprequest-ssl": "~2.0.0"
+                "xmlhttprequest-ssl": "~2.1.1"
             }
         },
         "node_modules/engine.io-client/node_modules/ws": {
@@ -5144,8 +5083,9 @@
         "node_modules/etag": {
             "version": "1.8.1",
             "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-            "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+            "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
             }
@@ -6767,6 +6707,19 @@
                 "node": ">=8.6"
             }
         },
+        "node_modules/mime": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+            "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "mime": "cli.js"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/mime-db": {
             "version": "1.49.0",
             "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.49.0.tgz",
@@ -6863,15 +6816,16 @@
             }
         },
         "node_modules/nanoid": {
-            "version": "3.3.7",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-            "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+            "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
             "funding": [
                 {
                     "type": "github",
                     "url": "https://github.com/sponsors/ai"
                 }
             ],
+            "license": "MIT",
             "bin": {
                 "nanoid": "bin/nanoid.cjs"
             },
@@ -7234,10 +7188,11 @@
             }
         },
         "node_modules/path-to-regexp": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-            "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
-            "dev": true
+            "version": "6.3.0",
+            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+            "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/path-type": {
             "version": "4.0.0",
@@ -8220,6 +8175,7 @@
             "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
             "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
             }
@@ -8433,12 +8389,12 @@
             }
         },
         "node_modules/rollup": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.2.tgz",
-            "integrity": "sha512-e3TapAgYf9xjdLvKQCkQTnbTKd4a6jwlpQSJJFokHGaX2IVjoEqkIIhiQfqsi0cdwlOD+tQGuOd5AJkc5RngBw==",
+            "version": "4.34.4",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.34.4.tgz",
+            "integrity": "sha512-spF66xoyD7rz3o08sHP7wogp1gZ6itSq22SGa/IZTcUDXDlOyrShwMwkVSB+BUxFRZZCUYqdb3KWDEOMVQZxuw==",
             "license": "MIT",
             "dependencies": {
-                "@types/estree": "1.0.5"
+                "@types/estree": "1.0.6"
             },
             "bin": {
                 "rollup": "dist/bin/rollup"
@@ -8448,22 +8404,25 @@
                 "npm": ">=8.0.0"
             },
             "optionalDependencies": {
-                "@rollup/rollup-android-arm-eabi": "4.21.2",
-                "@rollup/rollup-android-arm64": "4.21.2",
-                "@rollup/rollup-darwin-arm64": "4.21.2",
-                "@rollup/rollup-darwin-x64": "4.21.2",
-                "@rollup/rollup-linux-arm-gnueabihf": "4.21.2",
-                "@rollup/rollup-linux-arm-musleabihf": "4.21.2",
-                "@rollup/rollup-linux-arm64-gnu": "4.21.2",
-                "@rollup/rollup-linux-arm64-musl": "4.21.2",
-                "@rollup/rollup-linux-powerpc64le-gnu": "4.21.2",
-                "@rollup/rollup-linux-riscv64-gnu": "4.21.2",
-                "@rollup/rollup-linux-s390x-gnu": "4.21.2",
-                "@rollup/rollup-linux-x64-gnu": "4.21.2",
-                "@rollup/rollup-linux-x64-musl": "4.21.2",
-                "@rollup/rollup-win32-arm64-msvc": "4.21.2",
-                "@rollup/rollup-win32-ia32-msvc": "4.21.2",
-                "@rollup/rollup-win32-x64-msvc": "4.21.2",
+                "@rollup/rollup-android-arm-eabi": "4.34.4",
+                "@rollup/rollup-android-arm64": "4.34.4",
+                "@rollup/rollup-darwin-arm64": "4.34.4",
+                "@rollup/rollup-darwin-x64": "4.34.4",
+                "@rollup/rollup-freebsd-arm64": "4.34.4",
+                "@rollup/rollup-freebsd-x64": "4.34.4",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.34.4",
+                "@rollup/rollup-linux-arm-musleabihf": "4.34.4",
+                "@rollup/rollup-linux-arm64-gnu": "4.34.4",
+                "@rollup/rollup-linux-arm64-musl": "4.34.4",
+                "@rollup/rollup-linux-loongarch64-gnu": "4.34.4",
+                "@rollup/rollup-linux-powerpc64le-gnu": "4.34.4",
+                "@rollup/rollup-linux-riscv64-gnu": "4.34.4",
+                "@rollup/rollup-linux-s390x-gnu": "4.34.4",
+                "@rollup/rollup-linux-x64-gnu": "4.34.4",
+                "@rollup/rollup-linux-x64-musl": "4.34.4",
+                "@rollup/rollup-win32-arm64-msvc": "4.34.4",
+                "@rollup/rollup-win32-ia32-msvc": "4.34.4",
+                "@rollup/rollup-win32-x64-msvc": "4.34.4",
                 "fsevents": "~2.3.2"
             }
         },
@@ -8583,6 +8542,108 @@
                 "node": ">=10"
             }
         },
+        "node_modules/send": {
+            "version": "0.19.1",
+            "resolved": "https://registry.npmjs.org/send/-/send-0.19.1.tgz",
+            "integrity": "sha512-p4rRk4f23ynFEfcD9LA0xRYngj+IyGiEYyqqOak8kaN0TvNmuxC2dcVeBn62GpCeR2CpWqyHCNScTP91QbAVFg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "debug": "2.6.9",
+                "depd": "2.0.0",
+                "destroy": "1.2.0",
+                "encodeurl": "~2.0.0",
+                "escape-html": "~1.0.3",
+                "etag": "~1.8.1",
+                "fresh": "0.5.2",
+                "http-errors": "2.0.0",
+                "mime": "1.6.0",
+                "ms": "2.1.3",
+                "on-finished": "2.4.1",
+                "range-parser": "~1.2.1",
+                "statuses": "2.0.1"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/send/node_modules/debug": {
+            "version": "2.6.9",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+            "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ms": "2.0.0"
+            }
+        },
+        "node_modules/send/node_modules/debug/node_modules/ms": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+            "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/send/node_modules/depd": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+            "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/send/node_modules/encodeurl": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+            "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/send/node_modules/http-errors": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+            "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "depd": "2.0.0",
+                "inherits": "2.0.4",
+                "setprototypeof": "1.2.0",
+                "statuses": "2.0.1",
+                "toidentifier": "1.0.1"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/send/node_modules/on-finished": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+            "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ee-first": "1.1.1"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/send/node_modules/statuses": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+            "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
         "node_modules/serialize-javascript": {
             "version": "6.0.2",
             "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
@@ -8652,6 +8713,134 @@
             "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
             "dev": true
         },
+        "node_modules/serve-static": {
+            "version": "1.16.2",
+            "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+            "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "encodeurl": "~2.0.0",
+                "escape-html": "~1.0.3",
+                "parseurl": "~1.3.3",
+                "send": "0.19.0"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/serve-static/node_modules/debug": {
+            "version": "2.6.9",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+            "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ms": "2.0.0"
+            }
+        },
+        "node_modules/serve-static/node_modules/debug/node_modules/ms": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+            "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/serve-static/node_modules/depd": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+            "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/serve-static/node_modules/encodeurl": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+            "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/serve-static/node_modules/http-errors": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+            "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "depd": "2.0.0",
+                "inherits": "2.0.4",
+                "setprototypeof": "1.2.0",
+                "statuses": "2.0.1",
+                "toidentifier": "1.0.1"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/serve-static/node_modules/on-finished": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+            "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ee-first": "1.1.1"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/serve-static/node_modules/send": {
+            "version": "0.19.0",
+            "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+            "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "debug": "2.6.9",
+                "depd": "2.0.0",
+                "destroy": "1.2.0",
+                "encodeurl": "~1.0.2",
+                "escape-html": "~1.0.3",
+                "etag": "~1.8.1",
+                "fresh": "0.5.2",
+                "http-errors": "2.0.0",
+                "mime": "1.6.0",
+                "ms": "2.1.3",
+                "on-finished": "2.4.1",
+                "range-parser": "~1.2.1",
+                "statuses": "2.0.1"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/serve-static/node_modules/send/node_modules/encodeurl": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+            "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/serve-static/node_modules/statuses": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+            "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
         "node_modules/server-destroy": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/server-destroy/-/server-destroy-1.0.1.tgz",
@@ -8750,9 +8939,9 @@
             "integrity": "sha512-Dndj/MOG7VP83mvzfGCLGzV2HuK1lWachMtWl/Iuk6zV7noDycIBnflwaPuDzoaapEl3Pc4+ybJArkkx9sxPZg=="
         },
         "node_modules/socket.io": {
-            "version": "4.7.5",
-            "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.7.5.tgz",
-            "integrity": "sha512-DmeAkF6cwM9jSfmp6Dr/5/mfMwb5Z5qRrSXLpo3Fq5SqyU8CMF15jIN4ZhfSwu35ksM1qmHZDQ/DK5XTccSTvA==",
+            "version": "4.8.1",
+            "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
+            "integrity": "sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -8760,7 +8949,7 @@
                 "base64id": "~2.0.0",
                 "cors": "~2.8.5",
                 "debug": "~4.3.2",
-                "engine.io": "~6.5.2",
+                "engine.io": "~6.6.0",
                 "socket.io-adapter": "~2.5.2",
                 "socket.io-parser": "~4.2.4"
             },
@@ -8802,15 +8991,15 @@
             }
         },
         "node_modules/socket.io-client": {
-            "version": "4.7.5",
-            "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.5.tgz",
-            "integrity": "sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==",
+            "version": "4.8.1",
+            "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+            "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@socket.io/component-emitter": "~3.1.0",
                 "debug": "~4.3.2",
-                "engine.io-client": "~6.5.2",
+                "engine.io-client": "~6.6.1",
                 "socket.io-parser": "~4.2.4"
             },
             "engines": {
@@ -9716,9 +9905,9 @@
             }
         },
         "node_modules/vite": {
-            "version": "5.4.6",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
-            "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==",
+            "version": "5.4.14",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.14.tgz",
+            "integrity": "sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==",
             "license": "MIT",
             "dependencies": {
                 "esbuild": "^0.21.3",
@@ -9935,13 +10124,13 @@
             }
         },
         "node_modules/vue-i18n": {
-            "version": "9.14.0",
-            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.14.0.tgz",
-            "integrity": "sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==",
+            "version": "9.14.2",
+            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.14.2.tgz",
+            "integrity": "sha512-JK9Pm80OqssGJU2Y6F7DcM8RFHqVG4WkuCqOZTVsXkEzZME7ABejAUqUdA931zEBedc4thBgSUWxeQh4uocJAQ==",
             "license": "MIT",
             "dependencies": {
-                "@intlify/core-base": "9.14.0",
-                "@intlify/shared": "9.14.0",
+                "@intlify/core-base": "9.14.2",
+                "@intlify/shared": "9.14.2",
                 "@vue/devtools-api": "^6.5.0"
             },
             "engines": {
@@ -10272,9 +10461,9 @@
             "dev": true
         },
         "node_modules/xmlhttprequest-ssl": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
-            "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+            "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
             "dev": true,
             "engines": {
                 "node": ">=0.4.0"

From a6e9c09d7ffebf26ff569043eb6ac00b53be66c3 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 6 Feb 2025 14:23:33 +0100
Subject: [PATCH 42/43] fix conversation top level await

---
 resources/js/api/conversation.ts           | 135 ++++++++++-----------
 resources/js/forms/classic.ts              |   2 +-
 resources/js/forms/classic/ClassicForm.vue |   5 +
 3 files changed, 68 insertions(+), 74 deletions(-)

diff --git a/resources/js/api/conversation.ts b/resources/js/api/conversation.ts
index 6aed8a14..cf56fdfd 100644
--- a/resources/js/api/conversation.ts
+++ b/resources/js/api/conversation.ts
@@ -1,110 +1,99 @@
-/* eslint-disable no-async-promise-executor */
 import { AxiosProgressEvent, AxiosResponse } from "axios";
 import handler from "./handler";
 import { useRoutes } from "@/utils/useRoutes";
 
-await useRoutes();
-
-export function callGetForm(
+export async function callGetForm(
     uuid: string,
 ): Promise<AxiosResponse<PublicFormModel>> {
-    return new Promise(async (resolve, reject) => {
-        try {
-            const { route } = await useRoutes();
+    try {
+        const { route } = await useRoutes();
 
-            const resolvedRoute = route("api.public.forms.show", {
-                uuid,
-            });
+        const resolvedRoute = route("api.public.forms.show", {
+            uuid,
+        });
 
-            if (resolvedRoute) {
-                const response = await handler.get(resolvedRoute);
-                resolve(response as AxiosResponse<PublicFormModel>);
-            } else {
-                reject("route not found");
-            }
-        } catch (error) {
-            reject(error);
+        if (resolvedRoute) {
+            const response = await handler.get(resolvedRoute);
+            return Promise.resolve(response as AxiosResponse<PublicFormModel>);
+        } else {
+            return Promise.reject("route not found");
         }
-    });
+    } catch (error) {
+        return Promise.reject(error);
+    }
 }
 
-export function callGetFormStoryboard(
+export async function callGetFormStoryboard(
     uuid: string,
 ): Promise<AxiosResponse<FormStoryboard>> {
-    return new Promise(async (resolve, reject) => {
-        try {
-            const { route } = await useRoutes();
+    try {
+        const { route } = await useRoutes();
 
-            const resolvedRoute = route("api.public.forms.storyboard", {
-                uuid,
-            });
+        const resolvedRoute = route("api.public.forms.storyboard", {
+            uuid,
+        });
 
-            if (resolvedRoute) {
-                const response = await handler.get(resolvedRoute);
-                resolve(response as AxiosResponse<FormStoryboard>);
-            } else {
-                reject("route not found");
-            }
-        } catch (error) {
-            reject(error);
+        if (resolvedRoute) {
+            const response = await handler.get(resolvedRoute);
+            return Promise.resolve(response as AxiosResponse<FormStoryboard>);
+        } else {
+            return Promise.reject("route not found");
         }
-    });
+    } catch (error) {
+        return Promise.reject(error);
+    }
 }
 
-export function callCreateFormSession(
+export async function callCreateFormSession(
     uuid: string,
     params: Record<string, string>,
 ): Promise<AxiosResponse<FormSessionModel>> {
-    return new Promise(async (resolve, reject) => {
-        try {
-            const { route } = await useRoutes();
+    try {
+        const { route } = await useRoutes();
 
-            const resolvedRoute = route("api.public.forms.session.create", {
-                uuid,
-            });
+        const resolvedRoute = route("api.public.forms.session.create", {
+            uuid,
+        });
 
-            if (resolvedRoute) {
-                const response = await handler.post(resolvedRoute, {
-                    params,
-                });
-                resolve(response as AxiosResponse<FormSessionModel>);
-            } else {
-                reject("route not found");
-            }
-        } catch (error) {
-            reject(error);
+        if (resolvedRoute) {
+            const response = await handler.post(resolvedRoute, {
+                params,
+            });
+            return Promise.resolve(response as AxiosResponse<FormSessionModel>);
+        } else {
+            return Promise.reject("route not found");
         }
-    });
+    } catch (error) {
+        return Promise.reject(error);
+    }
 }
 
-export function callSubmitForm(
+export async function callSubmitForm(
     uuid: string,
     token: string,
     payload: FormSubmitPayload | null,
     is_uploading: boolean = false,
 ): Promise<AxiosResponse<null>> {
-    return new Promise(async (resolve, reject) => {
-        try {
-            const { route } = await useRoutes();
+    try {
+        const { route } = await useRoutes();
 
-            const resolvedRoute = route("api.public.forms.submit", {
-                uuid,
-            });
+        const resolvedRoute = route("api.public.forms.submit", {
+            uuid,
+        });
 
-            if (resolvedRoute) {
-                const response = await handler.post(resolvedRoute, {
-                    token,
-                    payload,
-                    is_uploading,
-                });
-                resolve(response as AxiosResponse<null>);
-            } else {
-                reject("route not found");
-            }
-        } catch (error) {
-            reject(error);
+        if (resolvedRoute) {
+            const response = await handler.post(resolvedRoute, {
+                token,
+                payload,
+                is_uploading,
+            });
+            return Promise.resolve(response as AxiosResponse<null>);
+        } else {
+            return Promise.reject("route not found");
         }
-    });
+    } catch (error) {
+        return Promise.reject(error);
+    }
 }
 
 export async function callUploadFiles(
diff --git a/resources/js/forms/classic.ts b/resources/js/forms/classic.ts
index f0f446ad..3334d851 100644
--- a/resources/js/forms/classic.ts
+++ b/resources/js/forms/classic.ts
@@ -34,7 +34,7 @@ const i18n = createI18n({
 
 const formId = document.currentScript?.getAttribute("data-form");
 let mountElement: Element | string | null = document.querySelector(
-    `#${formId}-wrapper`
+    `#${formId}-wrapper`,
 );
 
 if (!mountElement) {
diff --git a/resources/js/forms/classic/ClassicForm.vue b/resources/js/forms/classic/ClassicForm.vue
index 69920a04..51ddcfae 100644
--- a/resources/js/forms/classic/ClassicForm.vue
+++ b/resources/js/forms/classic/ClassicForm.vue
@@ -74,6 +74,7 @@ import { computed, onMounted, provide, ref } from "vue";
 import { storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
 import { useRouteParams } from "@/utils/useRouteParams";
+import { useRoutes } from "@/utils/useRoutes";
 
 const props = defineProps<{
   settings: PublicFormModel;
@@ -86,6 +87,10 @@ const focusDisabled = computed(() => {
 });
 provide("disableFocus", focusDisabled);
 
+// init routes
+await useRoutes();
+
+// init conversation store
 const store = useConversation();
 await store.initForm(
   props.settings,

From 46184871cca402b1a7ffd09e6b6d42404ddb27ba Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 6 Feb 2025 16:24:52 +0100
Subject: [PATCH 43/43] fix goto action

---
 .../Factory/Sidebar/BlockLogicVisualizer.vue          |  4 ++--
 resources/js/stores/conversation.ts                   | 11 +++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue b/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
index cbfe2e62..69c3738f 100644
--- a/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
+++ b/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
@@ -59,8 +59,8 @@
             hide this block
           </template>
           <template v-else-if="rule.action === 'goto'">
-            <D9Icon name="eye-slash" size="sm" />
-            to to block
+            <D9Icon name="location-arrow" size="sm" />
+            go to block
             <span class="font-bold font-mono">{{ rule.action_payload }}</span>
           </template>
         </div>
diff --git a/resources/js/stores/conversation.ts b/resources/js/stores/conversation.ts
index d601aac1..0a20d9c6 100644
--- a/resources/js/stores/conversation.ts
+++ b/resources/js/stores/conversation.ts
@@ -351,14 +351,16 @@ export const useConversation = defineStore("form", {
             }
         },
 
-        executeGotoAction(targetBlockId: string) {
+        executeGotoAction(targetBlockId: string): boolean {
             const targetIndex = this.findBlockIndex(targetBlockId);
             if (targetIndex !== -1) {
                 this.goToIndex(targetIndex);
+                return true;
             } else {
                 console.warn(
-                    `Target block ${targetBlockId} not found in processed queue`,
+                    `Target block ${targetBlockId} not found in processed queue. Please review your block logic to ensure the target block is visible.`,
                 );
+                return false;
             }
         },
 
@@ -380,8 +382,9 @@ export const useConversation = defineStore("form", {
                 : null;
 
             if (gotoAction && gotoAction.target) {
-                this.executeGotoAction(gotoAction.target);
-                return Promise.resolve(false);
+                if (this.executeGotoAction(gotoAction.target)) {
+                    return Promise.resolve(false);
+                }
             }
 
             if (this.isLastBlock) {