From 42a13b6320d2933336c60a41cfd667cee240bd0e Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Sun, 6 Oct 2024 15:16:31 +0700
Subject: [PATCH 01/41] feat: setup dockerized vue widget dev server

---
 ops/deployment/docker-compose.yml      |   20 +-
 protected/views/adminProject/_form.php |   25 +-
 up.sh                                  |    3 +
 vite/.dockerignore                     |    6 +
 vite/.gitignore                        |   24 +
 vite/Dockerfile                        |    9 +
 vite/README.md                         |   30 +
 vite/package-lock.json                 | 1409 ++++++++++++++++++++++++
 vite/package.json                      |   20 +
 vite/src/App.vue                       |   21 +
 vite/src/main.ts                       |    4 +
 vite/src/vite-env.d.ts                 |    1 +
 vite/tsconfig.app.json                 |   24 +
 vite/tsconfig.json                     |    7 +
 vite/tsconfig.node.json                |   22 +
 vite/vite.config.ts                    |   13 +
 16 files changed, 1629 insertions(+), 9 deletions(-)
 create mode 100644 vite/.dockerignore
 create mode 100644 vite/.gitignore
 create mode 100644 vite/Dockerfile
 create mode 100644 vite/README.md
 create mode 100644 vite/package-lock.json
 create mode 100644 vite/package.json
 create mode 100644 vite/src/App.vue
 create mode 100644 vite/src/main.ts
 create mode 100644 vite/src/vite-env.d.ts
 create mode 100644 vite/tsconfig.app.json
 create mode 100644 vite/tsconfig.json
 create mode 100644 vite/tsconfig.node.json
 create mode 100644 vite/vite.config.ts

diff --git a/ops/deployment/docker-compose.yml b/ops/deployment/docker-compose.yml
index 83ea8d4214..5f29133589 100644
--- a/ops/deployment/docker-compose.yml
+++ b/ops/deployment/docker-compose.yml
@@ -705,6 +705,23 @@ services:
       - le_config:/ca
     command: --domains '*.gigasciencejournal.com'
 
+  # Vite dev server for project image location
+  vite-project-image-location-dev:
+    build:
+      context: ${APPLICATION}/vite
+      args:
+        - NODE_VERSION=$NODE_VERSION
+    volumes:
+      # share host source code with the container to allow hot-reloading
+      - ${APPLICATION}/vite:/app:delegated
+      # node_modules within the container
+      - vite-project-image-location-node-modules:/app/node_modules
+    shm_size: '1gb' # to avoid a known issue
+    ports:
+      - 5173:5173
+    command: >
+      sh -c "npm install && npm run dev"
+
 networks:
   web-tier:
     driver: bridge
@@ -717,4 +734,5 @@ networks:
 volumes:
   le_config:
   le_webrootpath:
-  portainer_data:
\ No newline at end of file
+  portainer_data:
+  vite-project-image-location-node-modules:
\ No newline at end of file
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index 45b65af3e5..65c8cb7d27 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -32,16 +32,25 @@
 				'maxlength' => 255
 			]
 		]);
-		$this->widget('application.components.controls.TextField', [
-			'form' => $form,
-			'model' => $model,
-			'attributeName' => 'image_location',
-			'inputOptions' => [
-				'maxlength' => 100
-			]
-		]);
+    // field replaced by vue widget
+		// $this->widget('application.components.controls.TextField', [
+		// 	'form' => $form,
+		// 	'model' => $model,
+		// 	'attributeName' => 'image_location',
+		// 	'inputOptions' => [
+		// 		'maxlength' => 100
+		// 	]
+		// ]);
 		?>
 
+    <div id="vue-client_project-image-location">
+      display here vue widget
+    </div>
+    <div>
+      <script type="module" src="http://localhost:5173/@vite/client"></script>
+      <script type="module" src="http://localhost:5173/src/main.ts"></script>
+    </div>
+
 		<div class="pull-right btns-row">
 			<a href="/adminProject/admin" class="btn background-btn-o">Cancel</a>
 			<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save', array('class' => 'btn background-btn')); ?>
diff --git a/up.sh b/up.sh
index e6afeb10e9..74f89e6a0b 100755
--- a/up.sh
+++ b/up.sh
@@ -64,6 +64,9 @@ docker-compose run --rm js bash -c "cd /var/www/ops/scripts/ && npm install"
 # Build and deploy the Javascript application
 docker-compose run --rm js
 
+# Build and deploy the vite-project-image-location dev server
+docker-compose up -d --build vite-project-image-location-dev
+
 # Start Chome web driver container services for acceptance testing
 docker-compose up -d chrome
 
diff --git a/vite/.dockerignore b/vite/.dockerignore
new file mode 100644
index 0000000000..4f7ea7ba40
--- /dev/null
+++ b/vite/.dockerignore
@@ -0,0 +1,6 @@
+node_modules
+README.md
+LICENSE
+dist
+.vscode
+index.html
\ No newline at end of file
diff --git a/vite/.gitignore b/vite/.gitignore
new file mode 100644
index 0000000000..a547bf36d8
--- /dev/null
+++ b/vite/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/vite/Dockerfile b/vite/Dockerfile
new file mode 100644
index 0000000000..923d7f10fb
--- /dev/null
+++ b/vite/Dockerfile
@@ -0,0 +1,9 @@
+# Using npm. An alternative would be to use bun (a faster bundler).
+ARG NODE_VERSION
+FROM node:${NODE_VERSION}-bullseye-slim
+WORKDIR /app
+COPY package*.json .
+RUN npm ci
+COPY . .
+EXPOSE 5173
+CMD ["npm", "run", "dev"]
\ No newline at end of file
diff --git a/vite/README.md b/vite/README.md
new file mode 100644
index 0000000000..346028f46c
--- /dev/null
+++ b/vite/README.md
@@ -0,0 +1,30 @@
+# Vue client for project image location
+
+## Tasks
+
+- [ ] install node_modules in volume
+
+## Usage
+
+### Dev
+
+Run `./up.sh` script from root. This should build and run the docker container with the vite dev server and hot reloading
+
+Alternatively, run and build isolated from command line:
+
+Useful docker commands:
+
+```bash
+# (re)build and run container (e.g. if Dockerfile changed)
+NODE_VERSION=20.11.0 APPLICATION=../.. docker-compose -f ops/deployment/docker-compose.yml up --build vite-project-image-location-dev -d
+# run container
+NODE_VERSION=20.11.0 APPLICATION=../.. docker-compose -f ops/deployment/docker-compose.yml up vite-project-image-location-dev -d
+# stop container
+docker-compose down vite-project-image-location-dev
+# remove dangling images after building
+docker image prune -f
+# remove dangling volumes
+docker volume prune -f
+# Full cleanup
+docker system prune -a -f --volumes
+```
diff --git a/vite/package-lock.json b/vite/package-lock.json
new file mode 100644
index 0000000000..c6c4b53c15
--- /dev/null
+++ b/vite/package-lock.json
@@ -0,0 +1,1409 @@
+{
+  "name": "vite",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "vite",
+      "version": "0.0.0",
+      "dependencies": {
+        "vue": "^3.5.10"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^5.1.4",
+        "typescript": "^5.5.3",
+        "vite": "^5.4.8",
+        "vue-tsc": "^2.1.6"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz",
+      "integrity": "sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz",
+      "integrity": "sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.7.tgz",
+      "integrity": "sha512-aZn7ETtQsjjGG5HruveUK06cU3Hljuhd9Iojm4M8WWv3wLE6OkE5PWbDUkItmMgegmccaITudyuW5RPYrYlgWw==",
+      "dependencies": {
+        "@babel/types": "^7.25.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.7.tgz",
+      "integrity": "sha512-vwIVdXG+j+FOpkwqHRcBgHLYNL7XMkufrlaFvL9o6Ai9sJn9+PdyIL5qa0XzTZw084c+u9LOls53eoZWP/W5WQ==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.7",
+        "@babel/helper-validator-identifier": "^7.25.7",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
+      "integrity": "sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.0.tgz",
+      "integrity": "sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.0.tgz",
+      "integrity": "sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.0.tgz",
+      "integrity": "sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.0.tgz",
+      "integrity": "sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.0.tgz",
+      "integrity": "sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.0.tgz",
+      "integrity": "sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.0.tgz",
+      "integrity": "sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.0.tgz",
+      "integrity": "sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.0.tgz",
+      "integrity": "sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.0.tgz",
+      "integrity": "sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz",
+      "integrity": "sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.0.tgz",
+      "integrity": "sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.0.tgz",
+      "integrity": "sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.0.tgz",
+      "integrity": "sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.0.tgz",
+      "integrity": "sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "dev": true
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz",
+      "integrity": "sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==",
+      "dev": true,
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.5.tgz",
+      "integrity": "sha512-F4tA0DCO5Q1F5mScHmca0umsi2ufKULAnMOVBfMsZdT4myhVl4WdKRwCaKcfOkIEuyrAVvtq1ESBdZ+rSyLVww==",
+      "dev": true,
+      "dependencies": {
+        "@volar/source-map": "2.4.5"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.5.tgz",
+      "integrity": "sha512-varwD7RaKE2J/Z+Zu6j3mNNJbNT394qIxXwdvz/4ao/vxOfyClZpSDtLKkwWmecinkOVos5+PWkWraelfMLfpw==",
+      "dev": true
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.5.tgz",
+      "integrity": "sha512-mcT1mHvLljAEtHviVcBuOyAwwMKz1ibXTi5uYtP/pf4XxoAzpdkQ+Br2IC0NPCvLCbjPZmbf3I0udndkfB1CDg==",
+      "dev": true,
+      "dependencies": {
+        "@volar/language-core": "2.4.5",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.11.tgz",
+      "integrity": "sha512-PwAdxs7/9Hc3ieBO12tXzmTD+Ln4qhT/56S+8DvrrZ4kLDn4Z/AMUr8tXJD0axiJBS0RKIoNaR0yMuQB9v9Udg==",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.11",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.11.tgz",
+      "integrity": "sha512-pyGf8zdbDDRkBrEzf8p7BQlMKNNF5Fk/Cf/fQ6PiUz9at4OaUfyXW0dGJTo2Vl1f5U9jSLCNf0EZJEogLXoeew==",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.11",
+        "@vue/shared": "3.5.11"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.11.tgz",
+      "integrity": "sha512-gsbBtT4N9ANXXepprle+X9YLg2htQk1sqH/qGJ/EApl+dgpUBdTv3yP7YlR535uHZY3n6XaR0/bKo0BgwwDniw==",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.11",
+        "@vue/compiler-dom": "3.5.11",
+        "@vue/compiler-ssr": "3.5.11",
+        "@vue/shared": "3.5.11",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.47",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.11.tgz",
+      "integrity": "sha512-P4+GPjOuC2aFTk1Z4WANvEhyOykcvEd5bIj2KVNGKGfM745LaXGr++5njpdBTzVz5pZifdlR1kpYSJJpIlSePA==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.11",
+        "@vue/shared": "3.5.11"
+      }
+    },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+      "dev": true,
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/language-core": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.6.tgz",
+      "integrity": "sha512-MW569cSky9R/ooKMh6xa2g1D0AtRKbL56k83dzus/bx//RDJk24RHWkMzbAlXjMdDNyxAaagKPRquBIxkxlCkg==",
+      "dev": true,
+      "dependencies": {
+        "@volar/language-core": "~2.4.1",
+        "@vue/compiler-dom": "^3.4.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.4.0",
+        "computeds": "^0.0.1",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.11.tgz",
+      "integrity": "sha512-Nqo5VZEn8MJWlCce8XoyVqHZbd5P2NH+yuAaFzuNSR96I+y1cnuUiq7xfSG+kyvLSiWmaHTKP1r3OZY4mMD50w==",
+      "dependencies": {
+        "@vue/shared": "3.5.11"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.11.tgz",
+      "integrity": "sha512-7PsxFGqwfDhfhh0OcDWBG1DaIQIVOLgkwA5q6MtkPiDFjp5gohVnJEahSktwSFLq7R5PtxDKy6WKURVN1UDbzA==",
+      "dependencies": {
+        "@vue/reactivity": "3.5.11",
+        "@vue/shared": "3.5.11"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.11.tgz",
+      "integrity": "sha512-GNghjecT6IrGf0UhuYmpgaOlN7kxzQBhxWEn08c/SQDxv1yy4IXI1bn81JgEpQ4IXjRxWtPyI8x0/7TF5rPfYQ==",
+      "dependencies": {
+        "@vue/reactivity": "3.5.11",
+        "@vue/runtime-core": "3.5.11",
+        "@vue/shared": "3.5.11",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.11.tgz",
+      "integrity": "sha512-cVOwYBxR7Wb1B1FoxYvtjJD8X/9E5nlH4VSkJy2uMA1MzYNdzAAB//l8nrmN9py/4aP+3NjWukf9PZ3TeWULaA==",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.11",
+        "@vue/shared": "3.5.11"
+      },
+      "peerDependencies": {
+        "vue": "3.5.11"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.11.tgz",
+      "integrity": "sha512-W8GgysJVnFo81FthhzurdRAWP/byq3q2qIw70e0JWblzVhjgOMiC2GyovXrZTFQJnFVryYaKGP3Tc9vYzYm6PQ=="
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/computeds": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
+      "dev": true
+    },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "is-what": "^3.14.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/less": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
+      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "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,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/needle": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
+      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
+    },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/rollup": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz",
+      "integrity": "sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.6"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.24.0",
+        "@rollup/rollup-android-arm64": "4.24.0",
+        "@rollup/rollup-darwin-arm64": "4.24.0",
+        "@rollup/rollup-darwin-x64": "4.24.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.24.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.24.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.24.0",
+        "@rollup/rollup-linux-arm64-musl": "4.24.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.24.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.24.0",
+        "@rollup/rollup-linux-x64-gnu": "4.24.0",
+        "@rollup/rollup-linux-x64-musl": "4.24.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.24.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.24.0",
+        "@rollup/rollup-win32-x64-msvc": "4.24.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/typescript": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
+      "devOptional": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
+      "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
+      "dev": true,
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
+      "dev": true
+    },
+    "node_modules/vue": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.11.tgz",
+      "integrity": "sha512-/8Wurrd9J3lb72FTQS7gRMNQD4nztTtKPmuDuPuhqXmmpD6+skVjAeahNpVzsuky6Sy9gy7wn8UadqPtt9SQIg==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.11",
+        "@vue/compiler-sfc": "3.5.11",
+        "@vue/runtime-dom": "3.5.11",
+        "@vue/server-renderer": "3.5.11",
+        "@vue/shared": "3.5.11"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-tsc": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.6.tgz",
+      "integrity": "sha512-f98dyZp5FOukcYmbFpuSCJ4Z0vHSOSmxGttZJCsFeX0M4w/Rsq0s4uKXjcSRsZqsRgQa6z7SfuO+y0HVICE57Q==",
+      "dev": true,
+      "dependencies": {
+        "@volar/typescript": "~2.4.1",
+        "@vue/language-core": "2.1.6",
+        "semver": "^7.5.4"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    }
+  }
+}
diff --git a/vite/package.json b/vite/package.json
new file mode 100644
index 0000000000..7516a704eb
--- /dev/null
+++ b/vite/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.10"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.8",
+    "vue-tsc": "^2.1.6"
+  }
+}
diff --git a/vite/src/App.vue b/vite/src/App.vue
new file mode 100644
index 0000000000..0f78e2020c
--- /dev/null
+++ b/vite/src/App.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  Hello from Vue!
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>
diff --git a/vite/src/main.ts b/vite/src/main.ts
new file mode 100644
index 0000000000..0c8b20acbf
--- /dev/null
+++ b/vite/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#vue-client_project-image-location')
diff --git a/vite/src/vite-env.d.ts b/vite/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/vite/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/vite/tsconfig.app.json b/vite/tsconfig.app.json
new file mode 100644
index 0000000000..c54e60234b
--- /dev/null
+++ b/vite/tsconfig.app.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/vite/tsconfig.json b/vite/tsconfig.json
new file mode 100644
index 0000000000..1ffef600d9
--- /dev/null
+++ b/vite/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/vite/tsconfig.node.json b/vite/tsconfig.node.json
new file mode 100644
index 0000000000..0d3d71446a
--- /dev/null
+++ b/vite/tsconfig.node.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite/vite.config.ts b/vite/vite.config.ts
new file mode 100644
index 0000000000..fb719d92c1
--- /dev/null
+++ b/vite/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 5173,
+    origin: 'http://localhost:5173',
+    strictPort: true,
+    host: true
+  }
+})

From a257ae40e6fd99b2f70f8b8f8fe203ec96e74b6b Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Wed, 23 Oct 2024 19:23:13 +0700
Subject: [PATCH 02/41] feat: mock image upload

---
 .../controllers/AdminProjectController.php    |  24 +++-
 protected/models/Project.php                  | 124 ++++++++++++++----
 protected/views/adminProject/_form.php        |   9 +-
 3 files changed, 129 insertions(+), 28 deletions(-)

diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index 2fb95acae8..24339f3fa4 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -49,16 +49,34 @@ public function actionView($id)
 	 */
 	public function actionCreate()
 	{
-		$model=new Project;
+		$model = new Project;
 
 		// Uncomment the following line if AJAX validation is needed
 		// $this->performAjaxValidation($model);
 
 		if(isset($_POST['Project']))
 		{
-			$model->attributes=$_POST['Project'];
-			if($model->save())
+      Yii::log("action Create: project form data exists", "warning");
+			$model->attributes = $_POST['Project'];
+
+      $uploadedFile = CUploadedFile::getInstance($model, 'image');
+
+      Yii::log("action Create: uploaded file - " . $uploadedFile, "warning");
+
+      if ($uploadedFile) {
+        Yii::log("action Create: image form data exists", "warning");
+        if ($model->writeLogo(Yii::$app->cloudStore, $uploadedFile)) {
+          Yii::log("action Create: logo uploaded successfully", "warning");
+            // Logo uploaded successfully
+        } else {
+            Yii::log("Failed to write logo to storage for project " . $model->id, "error");
+        }
+      }
+
+			if($model->save()) {
 				$this->redirect(array('view','id'=>$model->id));
+      }
+
 		}
 
 		$this->render('create',array(
diff --git a/protected/models/Project.php b/protected/models/Project.php
index 1d41414d95..f85c95044c 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -1,5 +1,9 @@
 <?php
 
+use \creocoder\flysystem\Filesystem;
+use League\Flysystem\AdapterInterface;
+use Ramsey\Uuid\Uuid;
+
 /**
  * This is the model class for table "project".
  *
@@ -15,6 +19,13 @@
  */
 class Project extends CActiveRecord
 {
+
+  /** @const string bucket name when storage is in the cloud  */
+  const BUCKET = "assets.gigadb-cdn.net";
+  const NAMESPACE = "http://gigadb.org/namespaces/project";
+
+  public $image;
+
 	/**
 	 * Returns the static model of the specified AR class.
 	 * @param string $className active record class name.
@@ -42,11 +53,12 @@ public function rules()
 		// will receive user inputs.
 		return array(
 			array('url', 'required'),
-                        array('url', 'url','message'=>'Please check the URL format'),
+      array('url', 'url','message'=>'Please check the URL format'),
 			array('url', 'length', 'max'=>128),
 			array('name', 'length', 'max'=>255),
 			array('image_location', 'length', 'max'=>100),
-                        array('url','check_duplicate'),
+      array('url','check_duplicate'),
+      array('image', 'file', 'types' => 'jpg, jpeg, png', 'allowEmpty' => true),
 			// The following rule is used by search().
 			// Please remove those attributes that should not be searched.
 			array('id, url, name, image_location', 'safe', 'on'=>'search'),
@@ -100,28 +112,92 @@ public function search()
 	}
 
 	public static function getListProjects(){
-        $models=Species::model()->findAll();
-        $list=array();
-        foreach (array_values($models) as $model){
-            $list[$model->id] = $model->common_name;
-        }
-        return $list;
-    }
-    
-    function check_duplicate(){
-        
-        
-        $db_url= Project::model()->findBySql("select name from project where url='$this->url'");
-        
-        if($db_url !=null){
-        $this->addError('url','Duplicate URL');}
-        
-        $db_name= Project::model()->findBySql("select url from project where name='$this->name'");
-       
-        if($db_name !=null){
-        $this->addError('name','Duplicate Project Name');}
-        
-             
+      $models=Species::model()->findAll();
+      $list=array();
+      foreach (array_values($models) as $model){
+          $list[$model->id] = $model->common_name;
+      }
+      return $list;
+  }
+
+  function check_duplicate(){
+
+
+      $db_url= Project::model()->findBySql("select name from project where url='$this->url'");
+
+      if($db_url !=null){
+      $this->addError('url','Duplicate URL');}
+
+      $db_name= Project::model()->findBySql("select url from project where name='$this->name'");
+
+      if($db_name !=null){
+      $this->addError('name','Duplicate Project Name');}
+
+
+  }
+
+  /**
+   * write a logo image to the desired (Flysystem managed) storage mechanism and update url property with the location
+   *
+   * @param Filesystem $targetStorage
+   * @param string $enclosingDirectory
+   * @param CUploadedFile $uploadedFile
+   * @return bool
+   */
+  public function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedFile): bool
+  {
+      Yii::log("writeLogo: Starting to process the uploaded file", "info");
+
+      $slugger = new \Symfony\Component\String\Slugger\AsciiSlugger();
+      $info = pathinfo($uploadedFile->getName());
+      $fileName = $slugger->slug($info['filename'])->toString();
+
+      Yii::log("writeLogo: Generated file name - " . $fileName, "info");
+      $uuid = $this->getUuid();
+
+      Yii::log("writeLogo: Generated UUID - " . $uuid, "info");
+
+      $imagePath = sprintf("%s/images/projects/%s/%s.%s", Yii::$app->params['environment'], $uuid, $fileName, $info['extension'] );
+
+      Yii::log("writeLogo: Generated image path - " . $imagePath, "info");
+
+      // I expected YII_ENV_DEV to be true but it's not defined, so using a hardcoded temporary approach for now
+      $isLocalDev = true;
+      $hasBucketAccess = false;
+      if ($isLocalDev && !$hasBucketAccess) {
+          Yii::log("writeLogo: Local dev environment, skipping actual storage", "info");
+
+          // Mock URL for local development
+          $this->image_location = "https://assets.gigadb-cdn.net/live/images/projects/genome_10k/G10Klogo.jpg";
+
+          return true;
+      }
+
+      if ($targetStorage->put(
+          $imagePath, file_get_contents($uploadedFile->getTempName()),
+          ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
+      )) {
+          // $this->logo = sprintf("%s.%s", $fileName, $info['extension']);
+          $this->image_location = sprintf("https://%s/%s", self::BUCKET, $imagePath);
+
+          Yii::log("writeLogo: Image successfully written to storage", "info");
+
+          return true;
+      }
+
+      Yii::log("Error attempting to write image to the storage","error");
+
+      return false;
+  }
+
+      /**
+     * Return a UUID based on the project id
+     *
+     * @return string
+     */
+    public function getUuid()
+    {
+        return Uuid::uuid5(Uuid::NAMESPACE_URL, self::NAMESPACE."/id/".$this->id);
     }
 
 }
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index 65c8cb7d27..ef827970f0 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -4,6 +4,7 @@
 		<?php $form = $this->beginWidget('CActiveForm', array(
 			'id' => 'project-form',
 			'enableAjaxValidation' => false,
+      'htmlOptions' => array('enctype' => 'multipart/form-data'),
 		)); ?>
 
 		<p class="note">Fields with <span class="required">*</span> are required.</p>
@@ -43,8 +44,14 @@
 		// ]);
 		?>
 
+    <div class="form-group">
+        <?php echo $form->labelEx($model, 'image'); ?>
+        <?php echo $form->fileField($model, 'image'); ?>
+        <?php echo $form->error($model, 'image'); ?>
+    </div>
+
     <div id="vue-client_project-image-location">
-      display here vue widget
+      you should not see this text
     </div>
     <div>
       <script type="module" src="http://localhost:5173/@vite/client"></script>

From d10ab9307f250ed1caeabaa8d79ed1372be68476 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Fri, 25 Oct 2024 10:42:00 +0700
Subject: [PATCH 03/41] uppy widget is displayed in the ui

---
 node_modules/.package-lock.json        |    6 +
 ops/deployment/docker-compose.yml      |   31 +-
 package-lock.json                      |    6 +
 protected/views/adminProject/_form.php |    4 +-
 vite/.gitignore                        |    2 +
 vite/README.md                         |   14 +-
 vite/package-lock.json                 | 1772 ++++++++++++++----------
 vite/package.json                      |    6 +
 vite/src/App.vue                       |    5 +-
 vite/src/components/LogoUpload.vue     |   79 ++
 vite/src/components/UppyDashboard.vue  |  103 ++
 vite/src/style.css                     |   29 +
 vite/tsconfig.app.json                 |    3 +-
 13 files changed, 1284 insertions(+), 776 deletions(-)
 create mode 100644 node_modules/.package-lock.json
 create mode 100644 package-lock.json
 create mode 100644 vite/src/components/LogoUpload.vue
 create mode 100644 vite/src/components/UppyDashboard.vue
 create mode 100644 vite/src/style.css

diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
new file mode 100644
index 0000000000..ffc356c016
--- /dev/null
+++ b/node_modules/.package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "gigadb-website",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/ops/deployment/docker-compose.yml b/ops/deployment/docker-compose.yml
index c1587f3be2..610a8c352d 100644
--- a/ops/deployment/docker-compose.yml
+++ b/ops/deployment/docker-compose.yml
@@ -93,7 +93,7 @@ services:
       - ${APPLICATION}/less:/var/www/less
       - ${APPLICATION}/css:/var/www/css
       - ${APPLICATION}/sql:/var/www/sql
-      - ${APPLICATION}/style-guide:/var/www/style-guide      
+      - ${APPLICATION}/style-guide:/var/www/style-guide
       - ${APPLICATION}/index.php:/var/www/index.php
       - ${APPLICATION}/composer.json:/var/www/composer.json
       - ${APPLICATION}/composer.lock:/var/www/composer.lock
@@ -101,7 +101,7 @@ services:
       - ${APPLICATION}/ops/configuration/php-conf/gigadb.pool.conf:/usr/local/etc/php-fpm.d/gigadb.pool.conf
       - ${APPLICATION}/ops/configuration/php-conf/opcache.ini:/usr/local/etc/php/conf.d/opcache.ini
       # access to File Upload Wizard model classes
-      - ../../fuw/app:/app      
+      - ../../fuw/app:/app
       - ../../gigadb:/gigadb
     expose:
       - "9000"
@@ -348,7 +348,7 @@ services:
         ipv4_address: 172.16.238.11
     extra_hosts:
       - "gigadb.test:172.16.238.10"
-      - "fuw-admin-api:172.16.238.10"      
+      - "fuw-admin-api:172.16.238.10"
     environment: # to run headless, set false and comment out port 5900 above and make sure to pass --headless arg in acceptance.suite.yml
       START_XVFB: "false"
 
@@ -356,7 +356,7 @@ services:
     <<: *logging
     environment:
       GIGADB_ENV: $GIGADB_ENV
-      DOCKER_HOST: "tcp://host.docker.internal:2375"    
+      DOCKER_HOST: "tcp://host.docker.internal:2375"
     build:
       context: ../../fuw/app
       dockerfile: common/Dockerfile
@@ -465,7 +465,7 @@ services:
       - ~/.composer/cache:/root/.composer/cache:delegated
       # Mount source-code for development
       - ../../fuw/app:/app
-      - ../../gigadb/app:/gigadb-apps        
+      - ../../gigadb/app:/gigadb-apps
       # php config
       - ../../fuw/app/php-conf/fuw.ini:/usr/local/etc/php/conf.d/fuw.ini
       - ../../fuw/app/php-conf/xdebug.ini:/usr/local/etc/php/conf.d/xdebug.ini
@@ -480,7 +480,7 @@ services:
       # volume mount the location of public ftp directory
       - /tmp:/var/ftp/public
       # access to files and reference data
-      - ../../files:/var/www/files      
+      - ../../files:/var/www/files
     depends_on:
       - database
       - beanstalkd
@@ -509,7 +509,7 @@ services:
       - ~/.composer/cache:/root/.composer/cache:delegated
       # Mount source-code for development
       - ../../fuw/app:/app
-      - ../../gigadb/app:/gigadb-apps        
+      - ../../gigadb/app:/gigadb-apps
       # php config
       - ../../fuw/app/php-conf/fuw.ini:/usr/local/etc/php/conf.d/fuw.ini
       - ../../fuw/app/php-conf/xdebug.ini:/usr/local/etc/php/conf.d/xdebug.ini
@@ -524,7 +524,7 @@ services:
       # volume mount the location of public ftp directory
       - /tmp:/var/ftp/public
       # access to files and reference data
-      - ../../files:/var/www/files      
+      - ../../files:/var/www/files
     depends_on:
       - database
       - beanstalkd
@@ -565,7 +565,7 @@ services:
       - ~/.composer/cache:/root/.composer/cache:delegated
       # Mount source-code for development
       - ../../fuw/app:/app
-      - ../../gigadb/app:/gigadb-apps      
+      - ../../gigadb/app:/gigadb-apps
       - ../../vendor:/gigadb-website/vendor
       - ../../sql:/gigadb-website/sql
       - ../../protected:/gigadb-website
@@ -587,7 +587,7 @@ services:
       # to run tests that interact with containers
       # - /var/run/docker.sock:/var/run/docker.sock:ro
       # volume mount the location of public ftp directory
-      - /tmp:/var/ftp/public      
+      - /tmp:/var/ftp/public
     networks:
       - web-tier
       - db-tier
@@ -634,7 +634,7 @@ services:
       - ${DATA_SAVE_PATH}/fuw/repo:/var/repo/
       - ${DATA_SAVE_PATH}/fuw/flags:/var/tmp/processing_flag
       # access to the ftp tokens so the upload's location attribute can be populated
-      - ${DATA_SAVE_PATH}/fuw/credentials:/var/private:ro    
+      - ${DATA_SAVE_PATH}/fuw/credentials:/var/private:ro
       # access to the fuw/console so tusd hooks can trigger upload update
       - ../../fuw/app:/fuw/app
       # access to data feeds
@@ -657,7 +657,7 @@ services:
       - ${DATA_SAVE_PATH}/fuw/incoming/tusd:/var/inbox/
       - ${DATA_SAVE_PATH}/fuw/repo:/var/repo/
       # access to the ftp tokens so the upload's location attribute can be populated
-      - ${DATA_SAVE_PATH}/fuw/credentials:/var/private    
+      - ${DATA_SAVE_PATH}/fuw/credentials:/var/private
       # access to the fuw/console so tusd hooks can trigger upload update
       - ../../fuw/app:/app
       # access to data feeds
@@ -714,8 +714,8 @@ services:
     volumes:
       # share host source code with the container to allow hot-reloading
       - ${APPLICATION}/vite:/app:delegated
-      # node_modules within the container
-      - vite-project-image-location-node-modules:/app/node_modules
+      # use local node_modules
+      - /app/node_modules
     shm_size: '1gb' # to avoid a known issue
     ports:
       - 5173:5173
@@ -734,5 +734,4 @@ networks:
 volumes:
   le_config:
   le_webrootpath:
-  portainer_data:
-  vite-project-image-location-node-modules:
\ No newline at end of file
+  portainer_data:
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000000..ffc356c016
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "gigadb-website",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index ef827970f0..a434584e87 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -44,14 +44,16 @@
 		// ]);
 		?>
 
+<!-- mock input, vue app should render input with same id
     <div class="form-group">
         <?php echo $form->labelEx($model, 'image'); ?>
         <?php echo $form->fileField($model, 'image'); ?>
         <?php echo $form->error($model, 'image'); ?>
     </div>
+-->
 
     <div id="vue-client_project-image-location">
-      you should not see this text
+      <p>You should not see this text. If you see this text, the Vue app is crashing.</p>
     </div>
     <div>
       <script type="module" src="http://localhost:5173/@vite/client"></script>
diff --git a/vite/.gitignore b/vite/.gitignore
index a547bf36d8..2798dced6b 100644
--- a/vite/.gitignore
+++ b/vite/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+mock-files
diff --git a/vite/README.md b/vite/README.md
index 346028f46c..e8ed87251e 100644
--- a/vite/README.md
+++ b/vite/README.md
@@ -2,7 +2,10 @@
 
 ## Tasks
 
-- [ ] install node_modules in volume
+- [ ] add sr-only text to browse files button: upload logo, please upload one file as logo. maximum height, etc
+- [ ] adapt style to match gigadb theme, in the style.css file or in the component itself, or even better use directly the gigadb styles
+- [ ] the hidden file input should have a specific id for the backend controller (maybe with the metafields option?)
+- [ ] make the upload button displayed after adding file responsive (there's something apparent happening after user clicks it) or remove it (what does it do?)
 
 ## Usage
 
@@ -28,3 +31,12 @@ docker volume prune -f
 # Full cleanup
 docker system prune -a -f --volumes
 ```
+
+Dependencies are installed within the container. To install a new dependency:
+
+```bash
+# access the container (run from root folder)
+docker-compose exec vite-project-image-location-dev sh
+# install new dependency
+npm install <package-name>
+```
diff --git a/vite/package-lock.json b/vite/package-lock.json
index c6c4b53c15..af26d92084 100644
--- a/vite/package-lock.json
+++ b/vite/package-lock.json
@@ -8,6 +8,12 @@
       "name": "vite",
       "version": "0.0.0",
       "dependencies": {
+        "@uppy/dashboard": "^4.1.1",
+        "@uppy/drag-drop": "^4.0.3",
+        "@uppy/file-input": "^4.0.2",
+        "@uppy/image-editor": "^3.1.0",
+        "@uppy/progress-bar": "^4.0.0",
+        "@uppy/vue": "^2.0.1",
         "vue": "^3.5.10"
       },
       "devDependencies": {
@@ -17,28 +23,351 @@
         "vue-tsc": "^2.1.6"
       }
     },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.25.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz",
-      "integrity": "sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==",
+    "node_modules/@transloadit/prettier-bytes": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@transloadit/prettier-bytes/-/prettier-bytes-0.3.4.tgz",
+      "integrity": "sha512-8/SnIF9Q2k52mbjRVAYLranwkaDTLb+O9r4Z/uo8uNw//SjygKvvbF4BHSOuReufaAyum1q13602VcNud25Dfg=="
+    },
+    "node_modules/@uppy/core": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@uppy/core/-/core-4.2.2.tgz",
+      "integrity": "sha512-TfTXngDLHK+gNwbpt1tgKfQ0vQwa7V5ilAnD/VNT+6AGW+/dqGFLZbA6q8xKvVTZ2sUbwDMSWFtqem+G04AhNQ==",
+      "peer": true,
+      "dependencies": {
+        "@transloadit/prettier-bytes": "^0.3.4",
+        "@uppy/store-default": "^4.1.0",
+        "@uppy/utils": "^6.0.3",
+        "lodash": "^4.17.21",
+        "mime-match": "^1.0.2",
+        "namespace-emitter": "^2.0.1",
+        "nanoid": "^5.0.0",
+        "preact": "^10.5.13"
+      }
+    },
+    "node_modules/@uppy/core/node_modules/@uppy/store-default": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@uppy/store-default/-/store-default-4.1.0.tgz",
+      "integrity": "sha512-z5VSc4PNXpAtrrUPg5hdKJO5Ul7u4ZYLyK+tYzvEgzgR4nLVZmpGzj/d4N90jXpUqEibWKXvevODEB5VlTLHzg==",
+      "peer": true
+    },
+    "node_modules/@uppy/core/node_modules/mime-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/mime-match/-/mime-match-1.0.2.tgz",
+      "integrity": "sha512-VXp/ugGDVh3eCLOBCiHZMYWQaTNUHv2IJrut+yXA6+JbLPXHglHwfS/5A5L0ll+jkCY7fIzRJcH6OIunF+c6Cg==",
+      "peer": true,
+      "dependencies": {
+        "wildcard": "^1.1.0"
+      }
+    },
+    "node_modules/@uppy/core/node_modules/wildcard": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-1.1.2.tgz",
+      "integrity": "sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==",
+      "peer": true
+    },
+    "node_modules/@uppy/dashboard": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@uppy/dashboard/-/dashboard-4.1.1.tgz",
+      "integrity": "sha512-LGABotHj7zXAu1sATBN6pljF6ACtrRM/Kh32uWbwSbD5E8mIu8WUjIQ0K45OieS8KmzCDmQy7djkUOhVx8tMYg==",
+      "dependencies": {
+        "@transloadit/prettier-bytes": "^0.3.4",
+        "@uppy/informer": "^4.1.0",
+        "@uppy/provider-views": "^4.0.1",
+        "@uppy/status-bar": "^4.0.3",
+        "@uppy/thumbnail-generator": "^4.0.0",
+        "@uppy/utils": "^6.0.3",
+        "classnames": "^2.2.6",
+        "lodash": "^4.17.21",
+        "memoize-one": "^6.0.0",
+        "nanoid": "^5.0.0",
+        "preact": "^10.5.13",
+        "shallow-equal": "^3.0.0"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^4.2.2"
+      }
+    },
+    "node_modules/@uppy/drag-drop": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@uppy/drag-drop/-/drag-drop-4.0.3.tgz",
+      "integrity": "sha512-k9CySaCNgRge0bZrntmLGNFi2qGVFbprP0oibK3k4FOjrCvbJyN+nNppHwpEbBOPfuh76H94j9zL0OplQVZhZA==",
+      "dependencies": {
+        "@uppy/utils": "^6.0.3",
+        "preact": "^10.5.13"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^4.2.2"
+      }
+    },
+    "node_modules/@uppy/file-input": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@uppy/file-input/-/file-input-4.0.2.tgz",
+      "integrity": "sha512-vZ6576Hyum7BYvIc+KCrsp/qPDsS/+qP4d7g8FC5Da8r0BPsNke95T3pqdr9uQiNGPOAG+etw9UvnnTo93zxqg==",
+      "dependencies": {
+        "@uppy/utils": "^6.0.3",
+        "preact": "^10.5.13"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^4.2.2"
+      }
+    },
+    "node_modules/@uppy/image-editor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@uppy/image-editor/-/image-editor-3.1.0.tgz",
+      "integrity": "sha512-Ijgn18td1yR9YeZbEbmdRq8e7ZcYoRunGjgkl/O9milHFHYVkt6F5o1sVgP0I7WczYWKtWha9mbhV6HJF5LUjg==",
+      "dependencies": {
+        "@uppy/utils": "^6.0.2",
+        "cropperjs": "1.5.7",
+        "preact": "^10.5.13"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^4.2.0"
+      }
+    },
+    "node_modules/@uppy/informer": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@uppy/informer/-/informer-4.1.0.tgz",
+      "integrity": "sha512-Dzq7bEnUUePd7Syy6bDgzwSc16Re1tDYqP/sivtvPDrqINz8gUIST6IxN0GxRoSH732EjGiMlSf3OjwV/N18xQ==",
+      "dependencies": {
+        "@uppy/utils": "^6.0.2",
+        "preact": "^10.5.13"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^4.2.0"
+      }
+    },
+    "node_modules/@uppy/progress-bar": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@uppy/progress-bar/-/progress-bar-4.0.0.tgz",
+      "integrity": "sha512-hCUjlfGWHlvBPQDO5YBH/8HEr+3+ZEobTblBg0Wbn3ecJSiKkSRi0GkDVp3OMnwfqgK2wm8Ve+tR/5Gds7vE0A==",
+      "dependencies": {
+        "@uppy/utils": "^6.0.0",
+        "preact": "^10.5.13"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^4.0.0"
+      }
+    },
+    "node_modules/@uppy/provider-views": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@uppy/provider-views/-/provider-views-4.0.1.tgz",
+      "integrity": "sha512-oAOIVdCSPIpDZJXwU83o+13+qWYrIfRzJaXom7ZsJpj+WDbtFjML5iF3evDmqt22V3HwOC0N187lZvcO/9RwFA==",
+      "dependencies": {
+        "@uppy/utils": "^6.0.2",
+        "classnames": "^2.2.6",
+        "nanoid": "^5.0.0",
+        "p-queue": "^8.0.0",
+        "preact": "^10.5.13"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^4.1.1"
+      }
+    },
+    "node_modules/@uppy/provider-views/node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+    },
+    "node_modules/@uppy/provider-views/node_modules/p-queue": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-8.0.1.tgz",
+      "integrity": "sha512-NXzu9aQJTAzbBqOt2hwsR63ea7yvxJc0PwN/zobNAudYfb1B7R08SzB4TsLeSbUCuG467NhnoT0oO6w1qRO+BA==",
+      "dependencies": {
+        "eventemitter3": "^5.0.1",
+        "p-timeout": "^6.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@uppy/provider-views/node_modules/p-timeout": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-6.1.3.tgz",
+      "integrity": "sha512-UJUyfKbwvr/uZSV6btANfb+0t/mOhKV/KXcCUTp8FcQI+v/0d+wXqH4htrW0E4rR6WiEO/EPvUFiV9D5OI4vlw==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@uppy/status-bar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@uppy/status-bar/-/status-bar-4.0.3.tgz",
+      "integrity": "sha512-ckujiEQwHgpJGa5Q6OZF+hJ+3JSMgs/7vyl4aeBvV0zSWoPSg/W10TpyGeNvMaaAsbAs4UB+0LuUjVu/vSmFcw==",
+      "dependencies": {
+        "@transloadit/prettier-bytes": "^0.3.4",
+        "@uppy/utils": "^6.0.2",
+        "classnames": "^2.2.6",
+        "preact": "^10.5.13"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^4.1.2"
+      }
+    },
+    "node_modules/@uppy/thumbnail-generator": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@uppy/thumbnail-generator/-/thumbnail-generator-4.0.0.tgz",
+      "integrity": "sha512-nwgRO/LHLzUqzyB1TDl6g8LNmqtkswXpvRNcPij0gOrPTTWjGY6ULv+ywXYiF5baWF2aGS+K62jJSUGBWonx0w==",
+      "dependencies": {
+        "@uppy/utils": "^6.0.0",
+        "exifr": "^7.0.0"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^4.0.0"
+      }
+    },
+    "node_modules/@uppy/thumbnail-generator/node_modules/exifr": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/exifr/-/exifr-7.1.3.tgz",
+      "integrity": "sha512-g/aje2noHivrRSLbAUtBPWFbxKdKhgj/xr1vATDdUXPOFYJlQ62Ft0oy+72V6XLIpDJfHs6gXLbBLAolqOXYRw=="
+    },
+    "node_modules/@uppy/utils": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@uppy/utils/-/utils-6.0.3.tgz",
+      "integrity": "sha512-GBVzyAIeVKNe/F3TT63rXR80MSL9ov/FG3BbApO+4wbIt4vai7xpOxGCeTXpW2JjEeOwEb50n1fn92zMCdV9Dg==",
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "preact": "^10.5.13"
+      }
+    },
+    "node_modules/@uppy/vue": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@uppy/vue/-/vue-2.0.1.tgz",
+      "integrity": "sha512-JmU1WzisdRxw5WlEgZpIl8D2Q2AZgbvsmQyzHZwmGUuttBxKoBr4abguG95cT5qBA8raJzJhlxYRVwao2sbWBA==",
+      "dependencies": {
+        "shallow-equal": "^3.0.0"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^4.1.1",
+        "@uppy/dashboard": "^4.0.3",
+        "@uppy/drag-drop": "^4.0.2",
+        "@uppy/file-input": "^4.0.1",
+        "@uppy/progress-bar": "^4.0.0",
+        "@uppy/status-bar": "^4.0.2",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@uppy/dashboard": {
+          "optional": true
+        },
+        "@uppy/drag-drop": {
+          "optional": true
+        },
+        "@uppy/file-input": {
+          "optional": true
+        },
+        "@uppy/progress-bar": {
+          "optional": true
+        },
+        "@uppy/status-bar": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz",
+      "integrity": "sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==",
+      "dev": true,
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.6.tgz",
+      "integrity": "sha512-NMIrA7y5OOqddL9VtngPWYmdQU03htNKFtAYidbYfWA0TOhyGVd9tfcP4TsLWQ+RBWDZCbBqsr8xzU0ZOxYTCQ==",
+      "dev": true,
+      "dependencies": {
+        "@volar/language-core": "2.4.6",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@volar/typescript/node_modules/@volar/language-core": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.6.tgz",
+      "integrity": "sha512-FxUfxaB8sCqvY46YjyAAV6c3mMIq/NWQMVvJ+uS4yxr1KzOvyg61gAuOnNvgCvO4TZ7HcLExBEsWcDu4+K4E8A==",
+      "dev": true,
+      "dependencies": {
+        "@volar/source-map": "2.4.6"
+      }
+    },
+    "node_modules/@volar/typescript/node_modules/@volar/source-map": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.6.tgz",
+      "integrity": "sha512-Nsh7UW2ruK+uURIPzjJgF0YRGP5CX9nQHypA2OMqdM2FKy7rh+uv3XgPnWPw30JADbKvZ5HuBzG4gSbVDYVtiw==",
+      "dev": true
+    },
+    "node_modules/@volar/typescript/node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
+    },
+    "node_modules/@volar/typescript/node_modules/vscode-uri": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
+      "dev": true
+    },
+    "node_modules/@vue/language-core": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.6.tgz",
+      "integrity": "sha512-MW569cSky9R/ooKMh6xa2g1D0AtRKbL56k83dzus/bx//RDJk24RHWkMzbAlXjMdDNyxAaagKPRquBIxkxlCkg==",
+      "dev": true,
+      "dependencies": {
+        "@volar/language-core": "~2.4.1",
+        "@vue/compiler-dom": "^3.4.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.4.0",
+        "computeds": "^0.0.1",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz",
-      "integrity": "sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==",
+    "node_modules/@vue/language-core/node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/parser": {
-      "version": "7.25.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.7.tgz",
-      "integrity": "sha512-aZn7ETtQsjjGG5HruveUK06cU3Hljuhd9Iojm4M8WWv3wLE6OkE5PWbDUkItmMgegmccaITudyuW5RPYrYlgWw==",
+    "node_modules/@vue/language-core/node_modules/@babel/parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.9.tgz",
+      "integrity": "sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==",
+      "dev": true,
       "dependencies": {
-        "@babel/types": "^7.25.7"
+        "@babel/types": "^7.25.9"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -47,20 +376,305 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/types": {
-      "version": "7.25.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.7.tgz",
-      "integrity": "sha512-vwIVdXG+j+FOpkwqHRcBgHLYNL7XMkufrlaFvL9o6Ai9sJn9+PdyIL5qa0XzTZw084c+u9LOls53eoZWP/W5WQ==",
+    "node_modules/@vue/language-core/node_modules/@babel/types": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.9.tgz",
+      "integrity": "sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/@volar/language-core": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.6.tgz",
+      "integrity": "sha512-FxUfxaB8sCqvY46YjyAAV6c3mMIq/NWQMVvJ+uS4yxr1KzOvyg61gAuOnNvgCvO4TZ7HcLExBEsWcDu4+K4E8A==",
+      "dev": true,
+      "dependencies": {
+        "@volar/source-map": "2.4.6"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/@volar/source-map": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.6.tgz",
+      "integrity": "sha512-Nsh7UW2ruK+uURIPzjJgF0YRGP5CX9nQHypA2OMqdM2FKy7rh+uv3XgPnWPw30JADbKvZ5HuBzG4gSbVDYVtiw==",
+      "dev": true
+    },
+    "node_modules/@vue/language-core/node_modules/@vue/compiler-core": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
+      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.12",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/@vue/compiler-dom": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
+      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.5.12",
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+      "dev": true,
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/@vue/shared": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
+      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
+      "dev": true
+    },
+    "node_modules/@vue/language-core/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/@vue/language-core/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/computeds": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
+      "dev": true
+    },
+    "node_modules/@vue/language-core/node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true
+    },
+    "node_modules/@vue/language-core/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
+    "node_modules/@vue/language-core/node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true
+    },
+    "node_modules/@vue/language-core/node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
+    },
+    "node_modules/@vue/language-core/node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
+    "node_modules/cropperjs": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.7.tgz",
+      "integrity": "sha512-sGj+G/ofKh+f6A4BtXLJwtcKJgMUsXYVUubfTo9grERiDGXncttefmue/fyQFvn8wfdyoD1KhDRYLfjkJFl0yw=="
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
+    "node_modules/namespace-emitter": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/namespace-emitter/-/namespace-emitter-2.0.1.tgz",
+      "integrity": "sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g==",
+      "peer": true
+    },
+    "node_modules/nanoid": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
+      "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/preact": {
+      "version": "10.24.3",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz",
+      "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/shallow-equal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz",
+      "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg=="
+    },
+    "node_modules/typescript": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "devOptional": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.10",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
+      "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
+      "dev": true,
       "dependencies": {
-        "@babel/helper-string-parser": "^7.25.7",
-        "@babel/helper-validator-identifier": "^7.25.7",
-        "to-fast-properties": "^2.0.0"
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@esbuild/aix-ppc64": {
+    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
       "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
@@ -76,7 +690,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/android-arm": {
+    "node_modules/vite/node_modules/@esbuild/android-arm": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
       "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
@@ -92,7 +706,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/android-arm64": {
+    "node_modules/vite/node_modules/@esbuild/android-arm64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
       "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
@@ -108,7 +722,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/android-x64": {
+    "node_modules/vite/node_modules/@esbuild/android-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
       "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
@@ -124,7 +738,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/darwin-arm64": {
+    "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
       "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
@@ -140,7 +754,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/darwin-x64": {
+    "node_modules/vite/node_modules/@esbuild/darwin-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
       "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
@@ -156,7 +770,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/freebsd-arm64": {
+    "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
       "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
@@ -172,7 +786,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/freebsd-x64": {
+    "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
       "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
@@ -188,7 +802,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/linux-arm": {
+    "node_modules/vite/node_modules/@esbuild/linux-arm": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
       "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
@@ -204,7 +818,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/linux-arm64": {
+    "node_modules/vite/node_modules/@esbuild/linux-arm64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
       "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
@@ -220,7 +834,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/linux-ia32": {
+    "node_modules/vite/node_modules/@esbuild/linux-ia32": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
       "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
@@ -236,7 +850,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/linux-loong64": {
+    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
       "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
@@ -252,7 +866,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/linux-mips64el": {
+    "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
       "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
@@ -268,7 +882,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/linux-ppc64": {
+    "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
       "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
@@ -284,7 +898,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/linux-riscv64": {
+    "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
       "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
@@ -300,7 +914,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/linux-s390x": {
+    "node_modules/vite/node_modules/@esbuild/linux-s390x": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
       "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
@@ -316,7 +930,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/linux-x64": {
+    "node_modules/vite/node_modules/@esbuild/linux-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
       "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
@@ -332,7 +946,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/netbsd-x64": {
+    "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
       "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
@@ -348,7 +962,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/openbsd-x64": {
+    "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
       "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
@@ -364,7 +978,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/sunos-x64": {
+    "node_modules/vite/node_modules/@esbuild/sunos-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
       "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
@@ -380,7 +994,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/win32-arm64": {
+    "node_modules/vite/node_modules/@esbuild/win32-arm64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
       "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
@@ -396,7 +1010,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/win32-ia32": {
+    "node_modules/vite/node_modules/@esbuild/win32-ia32": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
       "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
@@ -412,7 +1026,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/win32-x64": {
+    "node_modules/vite/node_modules/@esbuild/win32-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
       "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
@@ -428,12 +1042,7 @@
         "node": ">=12"
       }
     },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
-    },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
+    "node_modules/vite/node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
       "integrity": "sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==",
@@ -446,7 +1055,7 @@
         "android"
       ]
     },
-    "node_modules/@rollup/rollup-android-arm64": {
+    "node_modules/vite/node_modules/@rollup/rollup-android-arm64": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.0.tgz",
       "integrity": "sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==",
@@ -459,7 +1068,7 @@
         "android"
       ]
     },
-    "node_modules/@rollup/rollup-darwin-arm64": {
+    "node_modules/vite/node_modules/@rollup/rollup-darwin-arm64": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.0.tgz",
       "integrity": "sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==",
@@ -472,7 +1081,7 @@
         "darwin"
       ]
     },
-    "node_modules/@rollup/rollup-darwin-x64": {
+    "node_modules/vite/node_modules/@rollup/rollup-darwin-x64": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.0.tgz",
       "integrity": "sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==",
@@ -485,7 +1094,7 @@
         "darwin"
       ]
     },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+    "node_modules/vite/node_modules/@rollup/rollup-linux-arm-gnueabihf": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.0.tgz",
       "integrity": "sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==",
@@ -498,7 +1107,7 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+    "node_modules/vite/node_modules/@rollup/rollup-linux-arm-musleabihf": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.0.tgz",
       "integrity": "sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==",
@@ -511,7 +1120,7 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+    "node_modules/vite/node_modules/@rollup/rollup-linux-arm64-gnu": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.0.tgz",
       "integrity": "sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==",
@@ -524,7 +1133,7 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
+    "node_modules/vite/node_modules/@rollup/rollup-linux-arm64-musl": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.0.tgz",
       "integrity": "sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==",
@@ -537,352 +1146,117 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.0.tgz",
-      "integrity": "sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.0.tgz",
-      "integrity": "sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.0.tgz",
-      "integrity": "sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz",
-      "integrity": "sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.0.tgz",
-      "integrity": "sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.0.tgz",
-      "integrity": "sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+    "node_modules/vite/node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
       "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.0.tgz",
-      "integrity": "sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.0.tgz",
-      "integrity": "sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "dev": true
-    },
-    "node_modules/@vitejs/plugin-vue": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz",
-      "integrity": "sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==",
-      "dev": true,
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      },
-      "peerDependencies": {
-        "vite": "^5.0.0",
-        "vue": "^3.2.25"
-      }
-    },
-    "node_modules/@volar/language-core": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.5.tgz",
-      "integrity": "sha512-F4tA0DCO5Q1F5mScHmca0umsi2ufKULAnMOVBfMsZdT4myhVl4WdKRwCaKcfOkIEuyrAVvtq1ESBdZ+rSyLVww==",
-      "dev": true,
-      "dependencies": {
-        "@volar/source-map": "2.4.5"
-      }
-    },
-    "node_modules/@volar/source-map": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.5.tgz",
-      "integrity": "sha512-varwD7RaKE2J/Z+Zu6j3mNNJbNT394qIxXwdvz/4ao/vxOfyClZpSDtLKkwWmecinkOVos5+PWkWraelfMLfpw==",
-      "dev": true
-    },
-    "node_modules/@volar/typescript": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.5.tgz",
-      "integrity": "sha512-mcT1mHvLljAEtHviVcBuOyAwwMKz1ibXTi5uYtP/pf4XxoAzpdkQ+Br2IC0NPCvLCbjPZmbf3I0udndkfB1CDg==",
-      "dev": true,
-      "dependencies": {
-        "@volar/language-core": "2.4.5",
-        "path-browserify": "^1.0.1",
-        "vscode-uri": "^3.0.8"
-      }
-    },
-    "node_modules/@vue/compiler-core": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.11.tgz",
-      "integrity": "sha512-PwAdxs7/9Hc3ieBO12tXzmTD+Ln4qhT/56S+8DvrrZ4kLDn4Z/AMUr8tXJD0axiJBS0RKIoNaR0yMuQB9v9Udg==",
-      "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.11",
-        "entities": "^4.5.0",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/@vue/compiler-dom": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.11.tgz",
-      "integrity": "sha512-pyGf8zdbDDRkBrEzf8p7BQlMKNNF5Fk/Cf/fQ6PiUz9at4OaUfyXW0dGJTo2Vl1f5U9jSLCNf0EZJEogLXoeew==",
-      "dependencies": {
-        "@vue/compiler-core": "3.5.11",
-        "@vue/shared": "3.5.11"
-      }
-    },
-    "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.11.tgz",
-      "integrity": "sha512-gsbBtT4N9ANXXepprle+X9YLg2htQk1sqH/qGJ/EApl+dgpUBdTv3yP7YlR535uHZY3n6XaR0/bKo0BgwwDniw==",
-      "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.5.11",
-        "@vue/compiler-dom": "3.5.11",
-        "@vue/compiler-ssr": "3.5.11",
-        "@vue/shared": "3.5.11",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.11",
-        "postcss": "^8.4.47",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.11.tgz",
-      "integrity": "sha512-P4+GPjOuC2aFTk1Z4WANvEhyOykcvEd5bIj2KVNGKGfM745LaXGr++5njpdBTzVz5pZifdlR1kpYSJJpIlSePA==",
-      "dependencies": {
-        "@vue/compiler-dom": "3.5.11",
-        "@vue/shared": "3.5.11"
-      }
-    },
-    "node_modules/@vue/compiler-vue2": {
-      "version": "2.7.16",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
-      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
-      "dev": true,
-      "dependencies": {
-        "de-indent": "^1.0.2",
-        "he": "^1.2.0"
-      }
-    },
-    "node_modules/@vue/language-core": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.6.tgz",
-      "integrity": "sha512-MW569cSky9R/ooKMh6xa2g1D0AtRKbL56k83dzus/bx//RDJk24RHWkMzbAlXjMdDNyxAaagKPRquBIxkxlCkg==",
-      "dev": true,
-      "dependencies": {
-        "@volar/language-core": "~2.4.1",
-        "@vue/compiler-dom": "^3.4.0",
-        "@vue/compiler-vue2": "^2.7.16",
-        "@vue/shared": "^3.4.0",
-        "computeds": "^0.0.1",
-        "minimatch": "^9.0.3",
-        "muggle-string": "^0.4.1",
-        "path-browserify": "^1.0.1"
-      },
-      "peerDependencies": {
-        "typescript": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vue/reactivity": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.11.tgz",
-      "integrity": "sha512-Nqo5VZEn8MJWlCce8XoyVqHZbd5P2NH+yuAaFzuNSR96I+y1cnuUiq7xfSG+kyvLSiWmaHTKP1r3OZY4mMD50w==",
-      "dependencies": {
-        "@vue/shared": "3.5.11"
-      }
-    },
-    "node_modules/@vue/runtime-core": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.11.tgz",
-      "integrity": "sha512-7PsxFGqwfDhfhh0OcDWBG1DaIQIVOLgkwA5q6MtkPiDFjp5gohVnJEahSktwSFLq7R5PtxDKy6WKURVN1UDbzA==",
-      "dependencies": {
-        "@vue/reactivity": "3.5.11",
-        "@vue/shared": "3.5.11"
-      }
-    },
-    "node_modules/@vue/runtime-dom": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.11.tgz",
-      "integrity": "sha512-GNghjecT6IrGf0UhuYmpgaOlN7kxzQBhxWEn08c/SQDxv1yy4IXI1bn81JgEpQ4IXjRxWtPyI8x0/7TF5rPfYQ==",
-      "dependencies": {
-        "@vue/reactivity": "3.5.11",
-        "@vue/runtime-core": "3.5.11",
-        "@vue/shared": "3.5.11",
-        "csstype": "^3.1.3"
-      }
-    },
-    "node_modules/@vue/server-renderer": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.11.tgz",
-      "integrity": "sha512-cVOwYBxR7Wb1B1FoxYvtjJD8X/9E5nlH4VSkJy2uMA1MzYNdzAAB//l8nrmN9py/4aP+3NjWukf9PZ3TeWULaA==",
-      "dependencies": {
-        "@vue/compiler-ssr": "3.5.11",
-        "@vue/shared": "3.5.11"
-      },
-      "peerDependencies": {
-        "vue": "3.5.11"
-      }
-    },
-    "node_modules/@vue/shared": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.11.tgz",
-      "integrity": "sha512-W8GgysJVnFo81FthhzurdRAWP/byq3q2qIw70e0JWblzVhjgOMiC2GyovXrZTFQJnFVryYaKGP3Tc9vYzYm6PQ=="
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.0.tgz",
+      "integrity": "sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+    "node_modules/vite/node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.0.tgz",
+      "integrity": "sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/computeds": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
-      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
-      "dev": true
+    "node_modules/vite/node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.0.tgz",
+      "integrity": "sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/copy-anything": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
-      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+    "node_modules/vite/node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz",
+      "integrity": "sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "optional": true,
-      "peer": true,
-      "dependencies": {
-        "is-what": "^3.14.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mesqueeb"
-      }
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    "node_modules/vite/node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.0.tgz",
+      "integrity": "sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/de-indent": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
-      "dev": true
+    "node_modules/vite/node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.0.tgz",
+      "integrity": "sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
-    "node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
+    "node_modules/vite/node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.0.tgz",
+      "integrity": "sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
-    "node_modules/errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+    "node_modules/vite/node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.0.tgz",
+      "integrity": "sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "optional": true,
-      "peer": true,
-      "dependencies": {
-        "prr": "~1.0.1"
-      },
-      "bin": {
-        "errno": "cli.js"
-      }
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/vite/node_modules/@types/estree": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "dev": true
     },
-    "node_modules/esbuild": {
+    "node_modules/vite/node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
       "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
@@ -920,12 +1294,7 @@
         "@esbuild/win32-x64": "0.21.5"
       }
     },
-    "node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-    },
-    "node_modules/fsevents": {
+    "node_modules/vite/node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
@@ -939,228 +1308,35 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true,
-      "bin": {
-        "he": "bin/he"
-      }
-    },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/image-size": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
-      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "image-size": "bin/image-size.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-what": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
-      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/less": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
-      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "copy-anything": "^2.0.1",
-        "parse-node-version": "^1.0.1",
-        "tslib": "^2.3.0"
-      },
-      "bin": {
-        "lessc": "bin/lessc"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "optionalDependencies": {
-        "errno": "^0.1.1",
-        "graceful-fs": "^4.1.2",
-        "image-size": "~0.5.0",
-        "make-dir": "^2.1.0",
-        "mime": "^1.4.1",
-        "needle": "^3.1.0",
-        "source-map": "~0.6.0"
-      }
-    },
-    "node_modules/magic-string": {
-      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0"
-      }
-    },
-    "node_modules/make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/make-dir/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "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,
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/muggle-string": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
-      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
-      "dev": true
-    },
-    "node_modules/nanoid": {
+    "node_modules/vite/node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "dev": true,
       "funding": [
         {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/needle": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
-      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "iconv-lite": "^0.6.3",
-        "sax": "^1.2.4"
-      },
-      "bin": {
-        "needle": "bin/needle"
-      },
-      "engines": {
-        "node": ">= 4.4.x"
-      }
-    },
-    "node_modules/parse-node-version": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
-      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/path-browserify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
-      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
-      "dev": true
-    },
-    "node_modules/picocolors": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
-    },
-    "node_modules/pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
       "engines": {
-        "node": ">=6"
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/postcss": {
+    "node_modules/vite/node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true
+    },
+    "node_modules/vite/node_modules/postcss": {
       "version": "8.4.47",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
       "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -1184,15 +1360,7 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/rollup": {
+    "node_modules/vite/node_modules/rollup": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz",
       "integrity": "sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==",
@@ -1227,182 +1395,274 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+    "node_modules/vite/node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true,
-      "optional": true,
-      "peer": true
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "node_modules/sax": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
-      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
-      "dev": true,
-      "optional": true,
-      "peer": true
+    "node_modules/vue": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz",
+      "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/compiler-sfc": "3.5.12",
+        "@vue/runtime-dom": "3.5.12",
+        "@vue/server-renderer": "3.5.12",
+        "@vue/shared": "3.5.12"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
     },
-    "node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+    "node_modules/vue-tsc": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.6.tgz",
+      "integrity": "sha512-f98dyZp5FOukcYmbFpuSCJ4Z0vHSOSmxGttZJCsFeX0M4w/Rsq0s4uKXjcSRsZqsRgQa6z7SfuO+y0HVICE57Q==",
       "dev": true,
+      "dependencies": {
+        "@volar/typescript": "~2.4.1",
+        "@vue/language-core": "2.1.6",
+        "semver": "^7.5.4"
+      },
       "bin": {
-        "semver": "bin/semver.js"
+        "vue-tsc": "bin/vue-tsc.js"
       },
-      "engines": {
-        "node": ">=10"
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
+    "node_modules/vue/node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+    "node_modules/vue/node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+    "node_modules/vue/node_modules/@babel/parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.9.tgz",
+      "integrity": "sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==",
+      "dependencies": {
+        "@babel/types": "^7.25.9"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
       "engines": {
-        "node": ">=4"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/tslib": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/typescript": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
-      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
-      "devOptional": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
+    "node_modules/vue/node_modules/@babel/types": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.9.tgz",
+      "integrity": "sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/vite": {
-      "version": "5.4.8",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
-      "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
-      "dev": true,
+    "node_modules/vue/node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
+    },
+    "node_modules/vue/node_modules/@vue/compiler-core": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
+      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
       "dependencies": {
-        "esbuild": "^0.21.3",
-        "postcss": "^8.4.43",
-        "rollup": "^4.20.0"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.12",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/compiler-dom": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
+      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.12",
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/compiler-sfc": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz",
+      "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.12",
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/compiler-ssr": "3.5.12",
+        "@vue/shared": "3.5.12",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.47",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/compiler-ssr": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
+      "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/reactivity": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz",
+      "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==",
+      "dependencies": {
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/runtime-core": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.12.tgz",
+      "integrity": "sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==",
+      "dependencies": {
+        "@vue/reactivity": "3.5.12",
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/runtime-dom": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz",
+      "integrity": "sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==",
+      "dependencies": {
+        "@vue/reactivity": "3.5.12",
+        "@vue/runtime-core": "3.5.12",
+        "@vue/shared": "3.5.12",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/server-renderer": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz",
+      "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.12",
+        "@vue/shared": "3.5.12"
       },
+      "peerDependencies": {
+        "vue": "3.5.12"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/shared": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
+      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg=="
+    },
+    "node_modules/vue/node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/vue/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "engines": {
-        "node": "^18.0.0 || >=20.0.0"
+        "node": ">=0.12"
       },
       "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^18.0.0 || >=20.0.0",
-        "less": "*",
-        "lightningcss": "^1.21.0",
-        "sass": "*",
-        "sass-embedded": "*",
-        "stylus": "*",
-        "sugarss": "*",
-        "terser": "^5.4.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        }
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/vscode-uri": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
-      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
-      "dev": true
+    "node_modules/vue/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
-    "node_modules/vue": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.11.tgz",
-      "integrity": "sha512-/8Wurrd9J3lb72FTQS7gRMNQD4nztTtKPmuDuPuhqXmmpD6+skVjAeahNpVzsuky6Sy9gy7wn8UadqPtt9SQIg==",
+    "node_modules/vue/node_modules/magic-string": {
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.11",
-        "@vue/compiler-sfc": "3.5.11",
-        "@vue/runtime-dom": "3.5.11",
-        "@vue/server-renderer": "3.5.11",
-        "@vue/shared": "3.5.11"
-      },
-      "peerDependencies": {
-        "typescript": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/vue/node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/vue-tsc": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.6.tgz",
-      "integrity": "sha512-f98dyZp5FOukcYmbFpuSCJ4Z0vHSOSmxGttZJCsFeX0M4w/Rsq0s4uKXjcSRsZqsRgQa6z7SfuO+y0HVICE57Q==",
-      "dev": true,
+    "node_modules/vue/node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
+    "node_modules/vue/node_modules/postcss": {
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "dependencies": {
-        "@volar/typescript": "~2.4.1",
-        "@vue/language-core": "2.1.6",
-        "semver": "^7.5.4"
-      },
-      "bin": {
-        "vue-tsc": "bin/vue-tsc.js"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       },
-      "peerDependencies": {
-        "typescript": ">=5.0.0"
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/vue/node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "engines": {
+        "node": ">=0.10.0"
       }
     }
   }
diff --git a/vite/package.json b/vite/package.json
index 7516a704eb..022064c811 100644
--- a/vite/package.json
+++ b/vite/package.json
@@ -9,6 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@uppy/dashboard": "^4.1.1",
+    "@uppy/drag-drop": "^4.0.3",
+    "@uppy/file-input": "^4.0.2",
+    "@uppy/image-editor": "^3.1.0",
+    "@uppy/progress-bar": "^4.0.0",
+    "@uppy/vue": "^2.0.1",
     "vue": "^3.5.10"
   },
   "devDependencies": {
diff --git a/vite/src/App.vue b/vite/src/App.vue
index 0f78e2020c..569a7a05f2 100644
--- a/vite/src/App.vue
+++ b/vite/src/App.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import LogoUpload from './components/LogoUpload.vue';
+// import UppyDashboard from './components/UppyDashboard.vue';
 </script>
 
 <template>
-  Hello from Vue!
+  <LogoUpload />
+  <!-- <UppyDashboard /> -->
 </template>
 
 <style scoped>
diff --git a/vite/src/components/LogoUpload.vue b/vite/src/components/LogoUpload.vue
new file mode 100644
index 0000000000..3a4e387725
--- /dev/null
+++ b/vite/src/components/LogoUpload.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import Uppy from '@uppy/core';
+import {
+  Dashboard
+} from '@uppy/vue';
+import type { UppyFile, Meta } from '@uppy/core';
+
+import '@uppy/core/dist/style.css';
+import '@uppy/dashboard/dist/style.css';
+
+const uppy = new Uppy({
+  autoProceed: false,
+  debug: true,
+  restrictions: {
+    maxNumberOfFiles: 1,
+    allowedFileTypes: ['image/*'],
+    maxFileSize: 1000000,
+  }
+})
+
+const errorMessage = ref<string | null>(null);
+
+uppy.on('file-added', async (file: UppyFile<Meta, Record<string, never>>) => {
+  console.log('file-added', file);
+  try {
+    const { height } = await getImgDimension(file);
+    if (height > 60) {
+      uppy.removeFile(file.id);
+      errorMessage.value = 'Image height exceeds 60px';
+    } else {
+      errorMessage.value = null;
+    }
+  } catch (error) {
+    console.error('Error getting image dimensions', error);
+    errorMessage.value = 'Error getting image dimensions';
+  }
+});
+
+async function getImgDimension(imgFile: UppyFile<Meta, Record<string, never>>): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(imgFile.data);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(img.src);
+      resolve({ width: img.width, height: img.height });
+    };
+    img.onerror = (error) => {
+      URL.revokeObjectURL(img.src);
+      reject(error);
+    };
+    img.src = url;
+  });
+}
+
+const ariaDescribedBy = computed(() => {
+  return errorMessage.value ? 'logo-upload-description logo-upload-error' : 'logo-upload-description';
+});
+</script>
+
+<template>
+  <div class="form-group">
+    <label class="control-label" for="logo-upload">Upload Logo</label>
+    <span id="logo-upload-description" class="control-description help-block">Please upload a logo image file.</span>
+    <Dashboard :uppy="uppy" :props="{
+      note: 'Images only, 1 file, maximum height of 60px, up to 1 MB',
+      proudlyDisplayPoweredByUppy: false,
+    }" :aria-describedby="ariaDescribedBy" />
+    <div role="alert">
+      <span v-if="errorMessage" class="error-message" id="logo-upload-error">{{ errorMessage }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import '../style.css';
+</style>
+<!-- Ref logo w h = 138px 58px -->
+<!-- height should be fixed, width should be variable and maintain aspect ratio -->
diff --git a/vite/src/components/UppyDashboard.vue b/vite/src/components/UppyDashboard.vue
new file mode 100644
index 0000000000..336a7a88e1
--- /dev/null
+++ b/vite/src/components/UppyDashboard.vue
@@ -0,0 +1,103 @@
+<!-- https://github.com/transloadit/uppy/blob/main/examples/vue3/src/App.vue -->
+<template>
+  <div id="uppyDashboard">
+    <h1>DEMO FROM REPO</h1>
+    <h2>Inline Dashboard</h2>
+    <label>
+      <input
+        type="checkbox"
+        :checked="showInlineDashboard"
+        @change="
+          (event) => {
+            showInlineDashboard = event.target.checked
+          }
+        "
+      />
+      Show Dashboard
+    </label>
+    <Dashboard
+      v-if="showInlineDashboard"
+      :uppy="uppy"
+      :props="{
+        metaFields: [{ id: 'name', name: 'Name', placeholder: 'File name' }],
+      }"
+    />
+    <h2>Modal Dashboard</h2>
+    <div>
+      <button type="button" @click="open = true">Show Dashboard</button>
+      <DashboardModal
+        :uppy="uppy2"
+        :open="open"
+        :props="{
+          onRequestCloseModal: handleClose,
+        }"
+      />
+    </div>
+
+    <h2>Drag Drop Area</h2>
+    <DragDrop
+      :uppy="uppy"
+      :props="{
+        locale: {
+          strings: {
+            chooseFile: 'Boop a file',
+            orDragDrop: 'or yoink it here',
+          },
+        },
+      }"
+    />
+
+    <h2>Progress Bar</h2>
+    <ProgressBar
+      :uppy="uppy"
+      :props="{
+        hideAfterFinish: false,
+      }"
+    />
+  </div>
+</template>
+
+<script setup>
+import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/vue'
+</script>
+
+<script>
+import Uppy from '@uppy/core'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  computed: {
+    uppy: () =>
+      new Uppy({ id: 'uppy1', autoProceed: true, debug: true }),
+    uppy2: () =>
+      new Uppy({ id: 'uppy2', autoProceed: false, debug: true }),
+  },
+  data() {
+    return {
+      open: false,
+      showInlineDashboard: false,
+    }
+  },
+  methods: {
+    handleClose() {
+      this.open = false
+    },
+  },
+})
+</script>
+
+<style src="@uppy/core/dist/style.css"></style>
+<style src="@uppy/dashboard/dist/style.css"></style>
+<style src="@uppy/drag-drop/dist/style.css"></style>
+<style src="@uppy/progress-bar/dist/style.css"></style>
+
+<style>
+#uppyDashboard {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
\ No newline at end of file
diff --git a/vite/src/style.css b/vite/src/style.css
new file mode 100644
index 0000000000..81eb8064bc
--- /dev/null
+++ b/vite/src/style.css
@@ -0,0 +1,29 @@
+.error-message {
+  color: rgb(121, 0, 0);
+  margin-top: 10px;
+}
+
+.uppy-Dashboard-inner {
+  background-color: #f8f9fa; /* Light grey background to match the theme */
+}
+
+.uppy-Dashboard-AddFiles {
+  background-color: #007bff; /* Bootstrap primary blue */
+  color: #fff; /* White text */
+}
+
+.uppy-Dashboard-AddFiles:hover {
+  background-color: #0056b3; /* Darker blue on hover */
+}
+
+.uppy-Dashboard-note {
+  color: #6c757d; /* Bootstrap secondary text color */
+}
+
+.uppy-DashboardItem-name {
+  color: #343a40; /* Dark grey text to match the theme */
+}
+
+.uppy-DashboardItem-status {
+  color: #6c757d; /* Bootstrap secondary text color */
+}
\ No newline at end of file
diff --git a/vite/tsconfig.app.json b/vite/tsconfig.app.json
index c54e60234b..26fa139969 100644
--- a/vite/tsconfig.app.json
+++ b/vite/tsconfig.app.json
@@ -5,6 +5,7 @@
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
+    "allowJs": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
@@ -20,5 +21,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.vue"]
 }

From f5f8ee9f223431863c494a27e821b3fce2fd5d09 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Fri, 25 Oct 2024 10:42:43 +0700
Subject: [PATCH 04/41] display spinner while scripts load

---
 less/index.less                        |  3 ++-
 less/modules/spinner.less              | 13 +++++++++++++
 protected/views/adminProject/_form.php |  3 +--
 vite/src/App.vue                       |  3 +--
 vite/src/components/LogoUpload.vue     |  2 +-
 5 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 less/modules/spinner.less

diff --git a/less/index.less b/less/index.less
index 0e17270e2d..a0ac382455 100644
--- a/less/index.less
+++ b/less/index.less
@@ -64,4 +64,5 @@
 @import "modules/team-grid.less";
 @import "modules/map.less";
 @import "modules/lists.less";
-@import "modules/tooltip.less";
\ No newline at end of file
+@import "modules/tooltip.less";
+@import "modules/spinner.less";
\ No newline at end of file
diff --git a/less/modules/spinner.less b/less/modules/spinner.less
new file mode 100644
index 0000000000..3d9d7381db
--- /dev/null
+++ b/less/modules/spinner.less
@@ -0,0 +1,13 @@
+.spinner {
+  border: 4px solid @color-gigadb-green;
+  border-top: 4px solid transparent;
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
\ No newline at end of file
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index a434584e87..d6554a0d5d 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -51,9 +51,8 @@
         <?php echo $form->error($model, 'image'); ?>
     </div>
 -->
-
     <div id="vue-client_project-image-location">
-      <p>You should not see this text. If you see this text, the Vue app is crashing.</p>
+      <div class="spinner"></div>
     </div>
     <div>
       <script type="module" src="http://localhost:5173/@vite/client"></script>
diff --git a/vite/src/App.vue b/vite/src/App.vue
index 569a7a05f2..b896b8f850 100644
--- a/vite/src/App.vue
+++ b/vite/src/App.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import LogoUpload from './components/LogoUpload.vue';
-// import UppyDashboard from './components/UppyDashboard.vue';
 </script>
 
 <template>
+  Lorem
   <LogoUpload />
-  <!-- <UppyDashboard /> -->
 </template>
 
 <style scoped>
diff --git a/vite/src/components/LogoUpload.vue b/vite/src/components/LogoUpload.vue
index 3a4e387725..bb7aa4b6f2 100644
--- a/vite/src/components/LogoUpload.vue
+++ b/vite/src/components/LogoUpload.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import Uppy from '@uppy/core';
 import {
   Dashboard

From 19c9c7ef4eebc23cfaabd08fdf7d8df66376b4fb Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Fri, 25 Oct 2024 10:53:02 +0700
Subject: [PATCH 05/41] renames controller and model variables to be more
 specific

---
 protected/controllers/AdminProjectController.php |  8 ++++----
 protected/models/Project.php                     |  8 ++++----
 protected/views/adminProject/_form.php           | 10 ++++++----
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index 24339f3fa4..97c3d8ec4d 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -59,13 +59,13 @@ public function actionCreate()
       Yii::log("action Create: project form data exists", "warning");
 			$model->attributes = $_POST['Project'];
 
-      $uploadedFile = CUploadedFile::getInstance($model, 'image');
+      $uploadedLogo = CUploadedFile::getInstance($model, 'image_logo');
 
-      Yii::log("action Create: uploaded file - " . $uploadedFile, "warning");
+      Yii::log("action Create: uploaded file - " . $uploadedLogo, "warning");
 
-      if ($uploadedFile) {
+      if ($uploadedLogo) {
         Yii::log("action Create: image form data exists", "warning");
-        if ($model->writeLogo(Yii::$app->cloudStore, $uploadedFile)) {
+        if ($model->writeLogo(Yii::$app->cloudStore, $uploadedLogo)) {
           Yii::log("action Create: logo uploaded successfully", "warning");
             // Logo uploaded successfully
         } else {
diff --git a/protected/models/Project.php b/protected/models/Project.php
index f85c95044c..e42fe498d8 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -141,15 +141,15 @@ function check_duplicate(){
    *
    * @param Filesystem $targetStorage
    * @param string $enclosingDirectory
-   * @param CUploadedFile $uploadedFile
+   * @param CUploadedFile $uploadedLogo
    * @return bool
    */
-  public function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedFile): bool
+  public function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedLogo): bool
   {
       Yii::log("writeLogo: Starting to process the uploaded file", "info");
 
       $slugger = new \Symfony\Component\String\Slugger\AsciiSlugger();
-      $info = pathinfo($uploadedFile->getName());
+      $info = pathinfo($uploadedLogo->getName());
       $fileName = $slugger->slug($info['filename'])->toString();
 
       Yii::log("writeLogo: Generated file name - " . $fileName, "info");
@@ -174,7 +174,7 @@ public function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedFile
       }
 
       if ($targetStorage->put(
-          $imagePath, file_get_contents($uploadedFile->getTempName()),
+          $imagePath, file_get_contents($uploadedLogo->getTempName()),
           ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
       )) {
           // $this->logo = sprintf("%s.%s", $fileName, $info['extension']);
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index d6554a0d5d..3adcb351cd 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -44,13 +44,15 @@
 		// ]);
 		?>
 
-<!-- mock input, vue app should render input with same id
+<!-- mock input, vue app should render input with same id -->
+<!--
     <div class="form-group">
-        <?php echo $form->labelEx($model, 'image'); ?>
-        <?php echo $form->fileField($model, 'image'); ?>
-        <?php echo $form->error($model, 'image'); ?>
+        <?php echo $form->labelEx($model, 'image_logo'); ?>
+        <?php echo $form->fileField($model, 'image_logo'); ?>
+        <?php echo $form->error($model, 'image_logo'); ?>
     </div>
 -->
+
     <div id="vue-client_project-image-location">
       <div class="spinner"></div>
     </div>

From 69e4e3f36f05ad136d47139c58102391becb6cd5 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Fri, 25 Oct 2024 16:33:54 +0700
Subject: [PATCH 06/41] feat: a11y uppy image loader

---
 .../controllers/AdminProjectController.php    |   7 +-
 protected/models/Project.php                  |   8 +-
 protected/views/adminProject/_form.php        |   2 +-
 vite/package-lock.json                        | 219 ++++++++++++++++++
 vite/package.json                             |   1 +
 vite/src/App.vue                              |  16 --
 vite/src/components/LogoUpload.vue            | 168 ++++++++++++--
 vite/src/components/UppyDashboard.vue         | 103 --------
 vite/src/main.ts                              |   2 +-
 vite/src/style.css                            |  29 ---
 10 files changed, 384 insertions(+), 171 deletions(-)
 delete mode 100644 vite/src/components/UppyDashboard.vue
 delete mode 100644 vite/src/style.css

diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index 97c3d8ec4d..9147c9a338 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -59,6 +59,10 @@ public function actionCreate()
       Yii::log("action Create: project form data exists", "warning");
 			$model->attributes = $_POST['Project'];
 
+      Yii::log("action Create: project form data - " . print_r($model->attributes, true), "warning");
+
+      Yii::log("action Create: image_logo - " . print_r($model->image_logo, true), "warning");
+
       $uploadedLogo = CUploadedFile::getInstance($model, 'image_logo');
 
       Yii::log("action Create: uploaded file - " . $uploadedLogo, "warning");
@@ -69,9 +73,10 @@ public function actionCreate()
           Yii::log("action Create: logo uploaded successfully", "warning");
             // Logo uploaded successfully
         } else {
-            Yii::log("Failed to write logo to storage for project " . $model->id, "error");
+            Yii::log("action Create: Failed to write logo to storage for project " . $model->id, "error");
         }
       }
+      // $this->redirect(array('create'));
 
 			if($model->save()) {
 				$this->redirect(array('view','id'=>$model->id));
diff --git a/protected/models/Project.php b/protected/models/Project.php
index e42fe498d8..13677f0d04 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -25,6 +25,7 @@ class Project extends CActiveRecord
   const NAMESPACE = "http://gigadb.org/namespaces/project";
 
   public $image;
+  public $image_logo;
 
 	/**
 	 * Returns the static model of the specified AR class.
@@ -58,7 +59,8 @@ public function rules()
 			array('name', 'length', 'max'=>255),
 			array('image_location', 'length', 'max'=>100),
       array('url','check_duplicate'),
-      array('image', 'file', 'types' => 'jpg, jpeg, png', 'allowEmpty' => true),
+      // array('image', 'file', 'types' => 'jpg, jpeg, png', 'allowEmpty' => true),
+      array('image_logo', 'file', 'types' => 'jpg, jpeg, png', 'allowEmpty' => true),
 			// The following rule is used by search().
 			// Please remove those attributes that should not be searched.
 			array('id, url, name, image_location', 'safe', 'on'=>'search'),
@@ -87,6 +89,7 @@ public function attributeLabels()
 			'url' => 'Url',
 			'name' => 'Name',
 			'image_location' => 'Image Location',
+      'image_logo' => 'Image Logo',
 		);
 	}
 
@@ -178,6 +181,7 @@ public function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedLogo
           ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
       )) {
           // $this->logo = sprintf("%s.%s", $fileName, $info['extension']);
+          $this->image_logo = sprintf("%s.%s", $fileName, $info['extension']);
           $this->image_location = sprintf("https://%s/%s", self::BUCKET, $imagePath);
 
           Yii::log("writeLogo: Image successfully written to storage", "info");
@@ -185,7 +189,7 @@ public function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedLogo
           return true;
       }
 
-      Yii::log("Error attempting to write image to the storage","error");
+      Yii::log("writeLogo: Error attempting to write image to the storage","error");
 
       return false;
   }
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index 3adcb351cd..abd904c31b 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -53,7 +53,7 @@
     </div>
 -->
 
-    <div id="vue-client_project-image-location">
+    <div id="vue-client_project-image-logo">
       <div class="spinner"></div>
     </div>
     <div>
diff --git a/vite/package-lock.json b/vite/package-lock.json
index af26d92084..c79941db7f 100644
--- a/vite/package-lock.json
+++ b/vite/package-lock.json
@@ -18,6 +18,7 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.1.4",
+        "less": "^4.2.0",
         "typescript": "^5.5.3",
         "vite": "^5.4.8",
         "vue-tsc": "^2.1.6"
@@ -538,21 +539,158 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^3.14.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/cropperjs": {
       "version": "1.5.7",
       "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.7.tgz",
       "integrity": "sha512-sGj+G/ofKh+f6A4BtXLJwtcKJgMUsXYVUubfTo9grERiDGXncttefmue/fyQFvn8wfdyoD1KhDRYLfjkJFl0yw=="
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/less": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
+      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/memoize-one": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
+    "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",
+      "optional": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/namespace-emitter": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/namespace-emitter/-/namespace-emitter-2.0.1.tgz",
@@ -576,6 +714,45 @@
         "node": "^18 || >=20"
       }
     },
+    "node_modules/needle": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
+      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/preact": {
       "version": "10.24.3",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz",
@@ -585,6 +762,30 @@
         "url": "https://opencollective.com/preact"
       }
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -602,6 +803,24 @@
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz",
       "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg=="
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
+      "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/typescript": {
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
diff --git a/vite/package.json b/vite/package.json
index 022064c811..9195eb666f 100644
--- a/vite/package.json
+++ b/vite/package.json
@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
+    "less": "^4.2.0",
     "typescript": "^5.5.3",
     "vite": "^5.4.8",
     "vue-tsc": "^2.1.6"
diff --git a/vite/src/App.vue b/vite/src/App.vue
index b896b8f850..5225a2e42b 100644
--- a/vite/src/App.vue
+++ b/vite/src/App.vue
@@ -3,21 +3,5 @@ import LogoUpload from './components/LogoUpload.vue';
 </script>
 
 <template>
-  Lorem
   <LogoUpload />
 </template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
diff --git a/vite/src/components/LogoUpload.vue b/vite/src/components/LogoUpload.vue
index bb7aa4b6f2..e515d5d3bb 100644
--- a/vite/src/components/LogoUpload.vue
+++ b/vite/src/components/LogoUpload.vue
@@ -1,42 +1,62 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import Uppy from '@uppy/core';
 import {
   Dashboard
 } from '@uppy/vue';
 import type { UppyFile, Meta } from '@uppy/core';
-
 import '@uppy/core/dist/style.css';
 import '@uppy/dashboard/dist/style.css';
 
+// image constraints
+const maxHeight = 60;
+const maxSize = 1000000;
+const maxSizeMb = maxSize / 1e6;
+
+const isWrapperFocusable = ref(true);
+const selectedFile = ref<UppyFile<Meta, Record<string, never>> | null>(null);
+
 const uppy = new Uppy({
   autoProceed: false,
   debug: true,
   restrictions: {
     maxNumberOfFiles: 1,
     allowedFileTypes: ['image/*'],
-    maxFileSize: 1000000,
+    maxFileSize: maxSize,
   }
 })
 
+const constraintsMessage = `Please upload one image file (max height ${maxHeight}px, max size ${maxSizeMb} MB)`
+const srOnlyConstraintsMessage = `Please upload one image file. Max height ${maxHeight} pixels, max size ${maxSizeMb} megabyte${maxSizeMb === 1 ? '' : 's'}. Press Enter key to browse your local files, or drag and drop an image into this box.`
 const errorMessage = ref<string | null>(null);
+const srOnlyErrorMessage = ref<string | null>(null);
+
+const handleFileSelection = (file: UppyFile<Meta, Record<string, never>>) => {
+  selectedFile.value = file;
+  // You might want to trigger any necessary form updates here
+}
 
 uppy.on('file-added', async (file: UppyFile<Meta, Record<string, never>>) => {
-  console.log('file-added', file);
   try {
     const { height } = await getImgDimension(file);
     if (height > 60) {
       uppy.removeFile(file.id);
+      srOnlyErrorMessage.value = 'Image height exceeds 60 pixels';
       errorMessage.value = 'Image height exceeds 60px';
     } else {
+      isWrapperFocusable.value = false;
       errorMessage.value = null;
+      handleFileSelection(file);
     }
   } catch (error) {
-    console.error('Error getting image dimensions', error);
     errorMessage.value = 'Error getting image dimensions';
   }
 });
 
+uppy.on('file-removed', () => {
+  isWrapperFocusable.value = true;
+});
+
 async function getImgDimension(imgFile: UppyFile<Meta, Record<string, never>>): Promise<{ width: number; height: number }> {
   return new Promise((resolve, reject) => {
     const url = URL.createObjectURL(imgFile.data);
@@ -53,27 +73,139 @@ async function getImgDimension(imgFile: UppyFile<Meta, Record<string, never>>):
   });
 }
 
-const ariaDescribedBy = computed(() => {
-  return errorMessage.value ? 'logo-upload-description logo-upload-error' : 'logo-upload-description';
-});
+function triggerUppyButton() {
+  const uppyDashboard = document.querySelector('.uppy-Dashboard-inner');
+  if (uppyDashboard) {
+    const triggerButton = uppyDashboard.querySelector('.uppy-Dashboard-browse') as HTMLButtonElement;
+    triggerButton?.click();
+  }
+}
 </script>
 
 <template>
-  <div class="form-group">
-    <label class="control-label" for="logo-upload">Upload Logo</label>
-    <span id="logo-upload-description" class="control-description help-block">Please upload a logo image file.</span>
-    <Dashboard :uppy="uppy" :props="{
-      note: 'Images only, 1 file, maximum height of 60px, up to 1 MB',
-      proudlyDisplayPoweredByUppy: false,
-    }" :aria-describedby="ariaDescribedBy" />
+  <div :class="`form-group ${errorMessage ? 'has-error' : ''}`">
+    <label class="control-label" for="logo-upload">Image Logo</label>
+    <!-- <span id="logo-upload-description" class="control-description help-block">Please upload a logo image file.</span> -->
+    <!-- <span id="logo-upload-constraints" class="control-description help-block">{{ constraintsMessage }}</span> -->
+    <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
+      :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
+      <Dashboard :uppy="uppy" :props="{
+        note: constraintsMessage,
+        proudlyDisplayPoweredByUppy: false,
+        hideUploadButton: true,
+        height: '300px',
+      }" />
+    </button>
     <div role="alert">
-      <span v-if="errorMessage" class="error-message" id="logo-upload-error">{{ errorMessage }}</span>
+      <div v-if="errorMessage" class="control-error help-block" id="logo-upload-error" aria-hidden="true">{{ errorMessage }}</div>
+      <span v-if="srOnlyErrorMessage" class="sr-only">{{ srOnlyErrorMessage }}</span>
     </div>
   </div>
+  <div v-if="selectedFile">
+    <!-- <p>Selected file</p> -->
+    <!-- <pre>{{ JSON.stringify(selectedFile, null, 2) }}</pre> -->
+    <!-- Use a hidden input to store the file information and send it to the controller on form submission -->
+    <input type="hidden" :value="selectedFile.name" name="Project[image_logo]" id="Project_image_logo" />
+    <!-- Display file name for visual representation -->
+    <!-- <div>Selected file: {{ selectedFile.name }}</div> -->
+  </div>
 </template>
 
-<style scoped>
-@import '../style.css';
+<style scoped lang="less">
+.uppy-dashboard-wrapper {
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  cursor: default;
+}
+
+.uppy-dashboard-wrapper:focus {
+  outline: none;
+}
+
+.uppy-dashboard-wrapper:focus-visible {
+  outline: 1px solid #08893e;
+  border: 1px solid #06b34d;
+  box-shadow: inset 0 1px 1px rgba(8, 137, 62, 0.075), 0 0 6px rgba(6, 179, 77, 0.5);
+  border-radius: 4px;
+}
+
+:deep(.uppy-Dashboard-inner) {
+
+  /* overrides */
+  .uppy-Dashboard-browse {
+    /* duplicating less variable here, would be better to reuse already defined color from variables.less */
+    color: #08893e;
+
+    &:focus,
+    &:hover {
+      border-bottom-color: #08893e;
+    }
+  }
+
+  .uppy-Dashboard-AddFiles-info {
+    display: block;
+  }
+
+  .uppy-DashboardContent-back {
+    color: #08893e;
+    background: transparent;
+    border: 1px #08893e solid;
+
+    &:focus {
+      outline: solid 2px #08893e;
+      outline-offset: 2px;
+    }
+
+    &:hover {
+      color: #fff;
+      background: #08893e;
+    }
+  }
+
+  .uppy-Dashboard-Item-action {
+
+    // color: white;
+    // background: black;
+    // border: 1px #08893e solid;
+    &:hover {
+      color: #08893e;
+      // background: #08893e;
+    }
+
+    &:focus {
+      outline: solid 2px #08893e;
+      outline-offset: 2px;
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  .uppy-StatusBar-actionBtn {
+    color: #fff;
+    background: #08893e;
+    border: 1px #08893e solid;
+
+    &:hover {
+      // color: #fff;
+      background: #0d6e36;
+    }
+
+    &:focus {
+      color: #fff;
+      outline: solid 2px #08893e;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+}
 </style>
 <!-- Ref logo w h = 138px 58px -->
 <!-- height should be fixed, width should be variable and maintain aspect ratio -->
diff --git a/vite/src/components/UppyDashboard.vue b/vite/src/components/UppyDashboard.vue
deleted file mode 100644
index 336a7a88e1..0000000000
--- a/vite/src/components/UppyDashboard.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<!-- https://github.com/transloadit/uppy/blob/main/examples/vue3/src/App.vue -->
-<template>
-  <div id="uppyDashboard">
-    <h1>DEMO FROM REPO</h1>
-    <h2>Inline Dashboard</h2>
-    <label>
-      <input
-        type="checkbox"
-        :checked="showInlineDashboard"
-        @change="
-          (event) => {
-            showInlineDashboard = event.target.checked
-          }
-        "
-      />
-      Show Dashboard
-    </label>
-    <Dashboard
-      v-if="showInlineDashboard"
-      :uppy="uppy"
-      :props="{
-        metaFields: [{ id: 'name', name: 'Name', placeholder: 'File name' }],
-      }"
-    />
-    <h2>Modal Dashboard</h2>
-    <div>
-      <button type="button" @click="open = true">Show Dashboard</button>
-      <DashboardModal
-        :uppy="uppy2"
-        :open="open"
-        :props="{
-          onRequestCloseModal: handleClose,
-        }"
-      />
-    </div>
-
-    <h2>Drag Drop Area</h2>
-    <DragDrop
-      :uppy="uppy"
-      :props="{
-        locale: {
-          strings: {
-            chooseFile: 'Boop a file',
-            orDragDrop: 'or yoink it here',
-          },
-        },
-      }"
-    />
-
-    <h2>Progress Bar</h2>
-    <ProgressBar
-      :uppy="uppy"
-      :props="{
-        hideAfterFinish: false,
-      }"
-    />
-  </div>
-</template>
-
-<script setup>
-import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/vue'
-</script>
-
-<script>
-import Uppy from '@uppy/core'
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  computed: {
-    uppy: () =>
-      new Uppy({ id: 'uppy1', autoProceed: true, debug: true }),
-    uppy2: () =>
-      new Uppy({ id: 'uppy2', autoProceed: false, debug: true }),
-  },
-  data() {
-    return {
-      open: false,
-      showInlineDashboard: false,
-    }
-  },
-  methods: {
-    handleClose() {
-      this.open = false
-    },
-  },
-})
-</script>
-
-<style src="@uppy/core/dist/style.css"></style>
-<style src="@uppy/dashboard/dist/style.css"></style>
-<style src="@uppy/drag-drop/dist/style.css"></style>
-<style src="@uppy/progress-bar/dist/style.css"></style>
-
-<style>
-#uppyDashboard {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
\ No newline at end of file
diff --git a/vite/src/main.ts b/vite/src/main.ts
index 0c8b20acbf..d82feb831e 100644
--- a/vite/src/main.ts
+++ b/vite/src/main.ts
@@ -1,4 +1,4 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#vue-client_project-image-location')
+createApp(App).mount('#vue-client_project-image-logo')
diff --git a/vite/src/style.css b/vite/src/style.css
deleted file mode 100644
index 81eb8064bc..0000000000
--- a/vite/src/style.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.error-message {
-  color: rgb(121, 0, 0);
-  margin-top: 10px;
-}
-
-.uppy-Dashboard-inner {
-  background-color: #f8f9fa; /* Light grey background to match the theme */
-}
-
-.uppy-Dashboard-AddFiles {
-  background-color: #007bff; /* Bootstrap primary blue */
-  color: #fff; /* White text */
-}
-
-.uppy-Dashboard-AddFiles:hover {
-  background-color: #0056b3; /* Darker blue on hover */
-}
-
-.uppy-Dashboard-note {
-  color: #6c757d; /* Bootstrap secondary text color */
-}
-
-.uppy-DashboardItem-name {
-  color: #343a40; /* Dark grey text to match the theme */
-}
-
-.uppy-DashboardItem-status {
-  color: #6c757d; /* Bootstrap secondary text color */
-}
\ No newline at end of file

From 5d2e114a4208732dc27e9c8c88ccd6d9fa843a35 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Fri, 25 Oct 2024 18:08:17 +0700
Subject: [PATCH 07/41] feat: native inplementation

---
 vite/src/components/LogoUpload.vue     | 249 ++++++-------------------
 vite/src/components/LogoUploadUppy.vue | 235 +++++++++++++++++++++++
 2 files changed, 294 insertions(+), 190 deletions(-)
 create mode 100644 vite/src/components/LogoUploadUppy.vue

diff --git a/vite/src/components/LogoUpload.vue b/vite/src/components/LogoUpload.vue
index e515d5d3bb..79125a4eff 100644
--- a/vite/src/components/LogoUpload.vue
+++ b/vite/src/components/LogoUpload.vue
@@ -1,211 +1,80 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import Uppy from '@uppy/core';
-import {
-  Dashboard
-} from '@uppy/vue';
-import type { UppyFile, Meta } from '@uppy/core';
-import '@uppy/core/dist/style.css';
-import '@uppy/dashboard/dist/style.css';
 
-// image constraints
-const maxHeight = 60;
-const maxSize = 1000000;
-const maxSizeMb = maxSize / 1e6;
+const MAX_FILE_SIZE = 1024 * 1024; // 1MB in bytes
+const MAX_HEIGHT = 60; // pixels
 
-const isWrapperFocusable = ref(true);
-const selectedFile = ref<UppyFile<Meta, Record<string, never>> | null>(null);
+const error = ref<string | null>(null);
+const selectedFile = ref<File | null>(null);
+const fileInputRef = ref<HTMLInputElement | null>(null);
 
-const uppy = new Uppy({
-  autoProceed: false,
-  debug: true,
-  restrictions: {
-    maxNumberOfFiles: 1,
-    allowedFileTypes: ['image/*'],
-    maxFileSize: maxSize,
-  }
-})
-
-const constraintsMessage = `Please upload one image file (max height ${maxHeight}px, max size ${maxSizeMb} MB)`
-const srOnlyConstraintsMessage = `Please upload one image file. Max height ${maxHeight} pixels, max size ${maxSizeMb} megabyte${maxSizeMb === 1 ? '' : 's'}. Press Enter key to browse your local files, or drag and drop an image into this box.`
-const errorMessage = ref<string | null>(null);
-const srOnlyErrorMessage = ref<string | null>(null);
-
-const handleFileSelection = (file: UppyFile<Meta, Record<string, never>>) => {
-  selectedFile.value = file;
-  // You might want to trigger any necessary form updates here
-}
-
-uppy.on('file-added', async (file: UppyFile<Meta, Record<string, never>>) => {
-  try {
-    const { height } = await getImgDimension(file);
-    if (height > 60) {
-      uppy.removeFile(file.id);
-      srOnlyErrorMessage.value = 'Image height exceeds 60 pixels';
-      errorMessage.value = 'Image height exceeds 60px';
-    } else {
-      isWrapperFocusable.value = false;
-      errorMessage.value = null;
-      handleFileSelection(file);
+const validateImage = (file: File): Promise<boolean> => {
+  return new Promise((resolve, reject) => {
+    // Check file size
+    if (file.size > MAX_FILE_SIZE) {
+      reject('File size must be less than 1MB');
+      return;
     }
-  } catch (error) {
-    errorMessage.value = 'Error getting image dimensions';
-  }
-});
 
-uppy.on('file-removed', () => {
-  isWrapperFocusable.value = true;
-});
+    // Check if it's an image
+    if (!file.type.startsWith('image/')) {
+      reject('File must be an image');
+      return;
+    }
 
-async function getImgDimension(imgFile: UppyFile<Meta, Record<string, never>>): Promise<{ width: number; height: number }> {
-  return new Promise((resolve, reject) => {
-    const url = URL.createObjectURL(imgFile.data);
+    // Create an image object to check dimensions
     const img = new Image();
+    const objectUrl = URL.createObjectURL(file);
+
     img.onload = () => {
-      URL.revokeObjectURL(img.src);
-      resolve({ width: img.width, height: img.height });
+      URL.revokeObjectURL(objectUrl);
+      if (img.height > MAX_HEIGHT) {
+        reject(`Image height must be ${MAX_HEIGHT}px or less (current height: ${img.height}px)`);
+        return;
+      }
+      resolve(true);
     };
-    img.onerror = (error) => {
-      URL.revokeObjectURL(img.src);
-      reject(error);
+
+    img.onerror = () => {
+      URL.revokeObjectURL(objectUrl);
+      reject('Error loading image');
     };
-    img.src = url;
+
+    img.src = objectUrl;
   });
-}
+};
 
-function triggerUppyButton() {
-  const uppyDashboard = document.querySelector('.uppy-Dashboard-inner');
-  if (uppyDashboard) {
-    const triggerButton = uppyDashboard.querySelector('.uppy-Dashboard-browse') as HTMLButtonElement;
-    triggerButton?.click();
+const handleFileChange = async (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  error.value = null;
+  selectedFile.value = null;
+
+  if (!file) return;
+
+  try {
+    await validateImage(file);
+    selectedFile.value = file;
+  } catch (err) {
+    error.value = err as string;
+    // Reset file input
+    if (fileInputRef.value) {
+      fileInputRef.value.value = '';
+    }
   }
-}
+};
 </script>
 
 <template>
-  <div :class="`form-group ${errorMessage ? 'has-error' : ''}`">
-    <label class="control-label" for="logo-upload">Image Logo</label>
-    <!-- <span id="logo-upload-description" class="control-description help-block">Please upload a logo image file.</span> -->
-    <!-- <span id="logo-upload-constraints" class="control-description help-block">{{ constraintsMessage }}</span> -->
-    <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
-      :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
-      <Dashboard :uppy="uppy" :props="{
-        note: constraintsMessage,
-        proudlyDisplayPoweredByUppy: false,
-        hideUploadButton: true,
-        height: '300px',
-      }" />
-    </button>
+  <div class="form-group">
+    <label for="Project_image_logo" class="control-label">Upload Logo</label>
+    <input ref="fileInputRef" type="file" id="Project_image_logo" class="form-control" accept="image/*"
+      @change="handleFileChange" name="Project[image_logo]" />
     <div role="alert">
-      <div v-if="errorMessage" class="control-error help-block" id="logo-upload-error" aria-hidden="true">{{ errorMessage }}</div>
-      <span v-if="srOnlyErrorMessage" class="sr-only">{{ srOnlyErrorMessage }}</span>
+      <div v-if="error" class="alert alert-danger mt-10">{{ error }}</div>
+    </div>
+    <div v-if="selectedFile" class="alert alert-gigadb-info mt-10">
+      Selected file: {{ selectedFile.name }} ({{ Math.round(selectedFile.size / 1024) }} KB)
     </div>
   </div>
-  <div v-if="selectedFile">
-    <!-- <p>Selected file</p> -->
-    <!-- <pre>{{ JSON.stringify(selectedFile, null, 2) }}</pre> -->
-    <!-- Use a hidden input to store the file information and send it to the controller on form submission -->
-    <input type="hidden" :value="selectedFile.name" name="Project[image_logo]" id="Project_image_logo" />
-    <!-- Display file name for visual representation -->
-    <!-- <div>Selected file: {{ selectedFile.name }}</div> -->
-  </div>
-</template>
-
-<style scoped lang="less">
-.uppy-dashboard-wrapper {
-  width: 100%;
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  border-radius: 4px;
-  border: 1px solid transparent;
-  cursor: default;
-}
-
-.uppy-dashboard-wrapper:focus {
-  outline: none;
-}
-
-.uppy-dashboard-wrapper:focus-visible {
-  outline: 1px solid #08893e;
-  border: 1px solid #06b34d;
-  box-shadow: inset 0 1px 1px rgba(8, 137, 62, 0.075), 0 0 6px rgba(6, 179, 77, 0.5);
-  border-radius: 4px;
-}
-
-:deep(.uppy-Dashboard-inner) {
-
-  /* overrides */
-  .uppy-Dashboard-browse {
-    /* duplicating less variable here, would be better to reuse already defined color from variables.less */
-    color: #08893e;
-
-    &:focus,
-    &:hover {
-      border-bottom-color: #08893e;
-    }
-  }
-
-  .uppy-Dashboard-AddFiles-info {
-    display: block;
-  }
-
-  .uppy-DashboardContent-back {
-    color: #08893e;
-    background: transparent;
-    border: 1px #08893e solid;
-
-    &:focus {
-      outline: solid 2px #08893e;
-      outline-offset: 2px;
-    }
-
-    &:hover {
-      color: #fff;
-      background: #08893e;
-    }
-  }
-
-  .uppy-Dashboard-Item-action {
-
-    // color: white;
-    // background: black;
-    // border: 1px #08893e solid;
-    &:hover {
-      color: #08893e;
-      // background: #08893e;
-    }
-
-    &:focus {
-      outline: solid 2px #08893e;
-      outline-offset: 2px;
-      border: none;
-      box-shadow: none;
-    }
-  }
-
-  .uppy-StatusBar-actionBtn {
-    color: #fff;
-    background: #08893e;
-    border: 1px #08893e solid;
-
-    &:hover {
-      // color: #fff;
-      background: #0d6e36;
-    }
-
-    &:focus {
-      color: #fff;
-      outline: solid 2px #08893e;
-      outline-offset: 2px;
-      box-shadow: none;
-    }
-  }
-}
-</style>
-<!-- Ref logo w h = 138px 58px -->
-<!-- height should be fixed, width should be variable and maintain aspect ratio -->
+</template>
\ No newline at end of file
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
new file mode 100644
index 0000000000..11d3879945
--- /dev/null
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import Uppy from '@uppy/core';
+import {
+  Dashboard
+} from '@uppy/vue';
+import type { UppyFile, Meta } from '@uppy/core';
+import Form from '@uppy/form';
+import '@uppy/core/dist/style.css';
+import '@uppy/dashboard/dist/style.css';
+
+// image constraints
+const maxHeight = 60;
+const maxSize = 1000000;
+const maxSizeMb = maxSize / 1e6;
+
+const isWrapperFocusable = ref(true);
+const selectedFile = ref<UppyFile<Meta, Record<string, never>> | null>(null);
+const fileData = ref<string | null>(null);
+
+const uppy = new Uppy({
+  autoProceed: false,
+  debug: true,
+  restrictions: {
+    maxNumberOfFiles: 1,
+    allowedFileTypes: ['image/*'],
+    maxFileSize: maxSize,
+  }
+})
+
+uppy.use(Form, {
+  target: '#project-form',
+  resultName: 'Project[image_logo]',
+  addResultToForm: true
+});
+
+uppy.on('complete', (result) => {
+  console.log('Upload complete:', result);
+});
+
+const constraintsMessage = `Please upload one image file (max height ${maxHeight}px, max size ${maxSizeMb} MB)`
+const srOnlyConstraintsMessage = `Please upload one image file. Max height ${maxHeight} pixels, max size ${maxSizeMb} megabyte${maxSizeMb === 1 ? '' : 's'}. Press Enter key to browse your local files, or drag and drop an image into this box.`
+const errorMessage = ref<string | null>(null);
+const srOnlyErrorMessage = ref<string | null>(null);
+
+const handleFileSelection = (file: UppyFile<Meta, Record<string, never>>) => {
+  // selectedFile.value = file;
+  // const fileInfo = {
+  //   id: file.id,
+  //   name: file.name,
+  //   type: file.type,
+  //   size: file.size,
+  //   meta: file.meta
+  // };
+
+
+  // fileData.value = JSON.stringify(fileInfo);
+  // You might want to trigger any necessary form updates here
+}
+
+uppy.on('file-added', async (file: UppyFile<Meta, Record<string, never>>) => {
+  console.log('file-added', file);
+
+  try {
+    const { height } = await getImgDimension(file);
+    if (height > 60) {
+      uppy.removeFile(file.id);
+      srOnlyErrorMessage.value = 'Image height exceeds 60 pixels';
+      errorMessage.value = 'Image height exceeds 60px';
+    } else {
+      isWrapperFocusable.value = false;
+      errorMessage.value = null;
+      handleFileSelection(file);
+    }
+  } catch (error) {
+    errorMessage.value = 'Error getting image dimensions';
+  }
+});
+
+uppy.on('file-removed', () => {
+  isWrapperFocusable.value = true;
+});
+
+async function getImgDimension(imgFile: UppyFile<Meta, Record<string, never>>): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(imgFile.data);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(img.src);
+      resolve({ width: img.width, height: img.height });
+    };
+    img.onerror = (error) => {
+      URL.revokeObjectURL(img.src);
+      reject(error);
+    };
+    img.src = url;
+  });
+}
+
+function triggerUppyButton() {
+  const uppyDashboard = document.querySelector('.uppy-Dashboard-inner');
+  if (uppyDashboard) {
+    const triggerButton = uppyDashboard.querySelector('.uppy-Dashboard-browse') as HTMLButtonElement;
+    triggerButton?.click();
+  }
+}
+</script>
+
+<template>
+  <div :class="`form-group ${errorMessage ? 'has-error' : ''}`">
+    <label class="control-label" for="logo-upload">Image Logo</label>
+    <!-- <span id="logo-upload-description" class="control-description help-block">Please upload a logo image file.</span> -->
+    <!-- <span id="logo-upload-constraints" class="control-description help-block">{{ constraintsMessage }}</span> -->
+    <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
+      :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
+      <Dashboard :uppy="uppy" :props="{
+        note: constraintsMessage,
+        proudlyDisplayPoweredByUppy: false,
+        hideUploadButton: true,
+        height: '300px',
+      }" />
+    </button>
+    <div role="alert">
+      <div v-if="errorMessage" class="control-error help-block" id="logo-upload-error" aria-hidden="true">{{ errorMessage }}</div>
+      <span v-if="srOnlyErrorMessage" class="sr-only">{{ srOnlyErrorMessage }}</span>
+    </div>
+  </div>
+  <!-- <div v-if="selectedFile"> -->
+    <!-- <p>Selected file</p> -->
+    <!-- <pre>{{ JSON.stringify(selectedFile, null, 2) }}</pre> -->
+    <!-- Use a hidden input to store the file information and send it to the controller on form submission -->
+    <!-- <input type="hidden" :value="fileData ?? ''" name="Project[image_logo]" id="Project_image_logo" /> -->
+    <!-- Display file name for visual representation -->
+    <!-- <div>Selected file: {{ selectedFile.name }}</div> -->
+  <!-- </div> -->
+</template>
+
+<style scoped lang="less">
+.uppy-dashboard-wrapper {
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  cursor: default;
+}
+
+.uppy-dashboard-wrapper:focus {
+  outline: none;
+}
+
+.uppy-dashboard-wrapper:focus-visible {
+  outline: 1px solid #08893e;
+  border: 1px solid #06b34d;
+  box-shadow: inset 0 1px 1px rgba(8, 137, 62, 0.075), 0 0 6px rgba(6, 179, 77, 0.5);
+  border-radius: 4px;
+}
+
+:deep(.uppy-Dashboard-inner) {
+
+  /* overrides */
+  .uppy-Dashboard-browse {
+    /* duplicating less variable here, would be better to reuse already defined color from variables.less */
+    color: #08893e;
+
+    &:focus,
+    &:hover {
+      border-bottom-color: #08893e;
+    }
+  }
+
+  .uppy-Dashboard-AddFiles-info {
+    display: block;
+  }
+
+  .uppy-DashboardContent-back {
+    color: #08893e;
+    background: transparent;
+    border: 1px #08893e solid;
+
+    &:focus {
+      outline: solid 2px #08893e;
+      outline-offset: 2px;
+    }
+
+    &:hover {
+      color: #fff;
+      background: #08893e;
+    }
+  }
+
+  .uppy-Dashboard-Item-action {
+
+    // color: white;
+    // background: black;
+    // border: 1px #08893e solid;
+    &:hover {
+      color: #08893e;
+      // background: #08893e;
+    }
+
+    &:focus {
+      outline: solid 2px #08893e;
+      outline-offset: 2px;
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  .uppy-StatusBar-actionBtn {
+    color: #fff;
+    background: #08893e;
+    border: 1px #08893e solid;
+
+    &:hover {
+      // color: #fff;
+      background: #0d6e36;
+    }
+
+    &:focus {
+      color: #fff;
+      outline: solid 2px #08893e;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+}
+</style>
+<!-- Ref logo w h = 138px 58px -->
+<!-- height should be fixed, width should be variable and maintain aspect ratio -->

From f87f9b72ec42c31efc0f76a4698d9487c1fde67b Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Tue, 29 Oct 2024 15:12:50 +0700
Subject: [PATCH 08/41] feat: custom image editor

---
 vite/package-lock.json                 |   1 +
 vite/src/App.vue                       |   4 +-
 vite/src/components/LogoUploadUppy.vue | 166 +++++++++++++++++++++----
 3 files changed, 142 insertions(+), 29 deletions(-)

diff --git a/vite/package-lock.json b/vite/package-lock.json
index c79941db7f..7cd75b53df 100644
--- a/vite/package-lock.json
+++ b/vite/package-lock.json
@@ -116,6 +116,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@uppy/image-editor/-/image-editor-3.1.0.tgz",
       "integrity": "sha512-Ijgn18td1yR9YeZbEbmdRq8e7ZcYoRunGjgkl/O9milHFHYVkt6F5o1sVgP0I7WczYWKtWha9mbhV6HJF5LUjg==",
+      "license": "MIT",
       "dependencies": {
         "@uppy/utils": "^6.0.2",
         "cropperjs": "1.5.7",
diff --git a/vite/src/App.vue b/vite/src/App.vue
index 5225a2e42b..0bb3794a5a 100644
--- a/vite/src/App.vue
+++ b/vite/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import LogoUpload from './components/LogoUpload.vue';
+import LogoUploadUppy from './components/LogoUploadUppy.vue';
 </script>
 
 <template>
-  <LogoUpload />
+  <LogoUploadUppy />
 </template>
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index 11d3879945..16b320fbb6 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -1,22 +1,47 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
 import Uppy from '@uppy/core';
+import type { UppyFile, Meta } from '@uppy/core';
 import {
   Dashboard
 } from '@uppy/vue';
-import type { UppyFile, Meta } from '@uppy/core';
-import Form from '@uppy/form';
+import ImageEditor from '@uppy/image-editor';
+
 import '@uppy/core/dist/style.css';
 import '@uppy/dashboard/dist/style.css';
+import '@uppy/image-editor/dist/style.min.css';
+
+/**
+
+flow
+
+- user drops or loads file in widget
+- is file height > 60px?
+  - yes: auto open editor
+  - no: do nothing
+- user resizes image in editor and saves
+  - dynamically show image dimensions
+  - while image height is > 60px, show warning message and keep "save" button disabled
+  - show "autocrop" button. On press:
+    - if image height > 60px, auto resize height to 60px keeping image proportions
+    - if image height <= 60px, do nothing
+- user clicks upload button -> server endpoint uploads file to S3 and returns url
+
+- widget props
+  - server endpoint url
+
+ */
 
 // image constraints
-const maxHeight = 60;
-const maxSize = 1000000;
+const maxHeight = 60; // in pixels
+const maxSize = 1000000; // in bytes
 const maxSizeMb = maxSize / 1e6;
 
 const isWrapperFocusable = ref(true);
-const selectedFile = ref<UppyFile<Meta, Record<string, never>> | null>(null);
-const fileData = ref<string | null>(null);
+const size = reactive({
+  height: 0,
+  width: 0,
+});
 
 const uppy = new Uppy({
   autoProceed: false,
@@ -28,10 +53,30 @@ const uppy = new Uppy({
   }
 })
 
-uppy.use(Form, {
-  target: '#project-form',
-  resultName: 'Project[image_logo]',
-  addResultToForm: true
+uppy.use(ImageEditor, {
+  quality: 0.8,
+  cropperOptions: {
+    viewMode: 1,
+    background: false,
+    autoCropArea: 1,
+    responsive: true,
+    // Show current dimensions in the cropper
+    crop(event) {
+      size.width = Math.round(event.detail.width);
+      size.height = Math.round(event.detail.height);
+    }
+  },
+  actions: {
+    revert: true,
+    rotate: true,
+    granularRotate: false,
+    flip: true,
+    zoomIn: true,
+    zoomOut: true,
+    cropSquare: false,
+    cropWidescreen: false,
+    cropWidescreenVertical: false,
+  }
 });
 
 uppy.on('complete', (result) => {
@@ -58,18 +103,29 @@ const handleFileSelection = (file: UppyFile<Meta, Record<string, never>>) => {
   // You might want to trigger any necessary form updates here
 }
 
+function openFileEditor(file: UppyFile<Meta, Record<string, never>>) {
+  const dashboard = uppy.getPlugin('Dashboard');
+  if (dashboard) {
+    // TODO fix typescript error
+    (dashboard as any).openFileEditor(file);
+  }
+}
+
 uppy.on('file-added', async (file: UppyFile<Meta, Record<string, never>>) => {
   console.log('file-added', file);
 
+  isWrapperFocusable.value = false;
+  errorMessage.value = null;
+
   try {
     const { height } = await getImgDimension(file);
-    if (height > 60) {
-      uppy.removeFile(file.id);
-      srOnlyErrorMessage.value = 'Image height exceeds 60 pixels';
-      errorMessage.value = 'Image height exceeds 60px';
+    if (height > maxHeight) {
+      // Show warning but don't remove file
+      errorMessage.value = `Image height (${height}px) exceeds ${maxHeight}px - please resize using the editor`;
+      srOnlyErrorMessage.value = `Image height of ${height} pixels exceeds maximum of ${maxHeight} pixels. Please use the editor to resize.`;
+      // Auto-open editor when height exceeds limit
+      openFileEditor(file);
     } else {
-      isWrapperFocusable.value = false;
-      errorMessage.value = null;
       handleFileSelection(file);
     }
   } catch (error) {
@@ -81,6 +137,22 @@ uppy.on('file-removed', () => {
   isWrapperFocusable.value = true;
 });
 
+uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never>>) => {
+  try {
+    const { height } = await getImgDimension(file);
+    if (height > maxHeight) {
+      errorMessage.value = `Image still exceeds ${maxHeight}px height - please resize further`;
+      srOnlyErrorMessage.value = `Image height still exceeds ${maxHeight} pixels. Please resize further.`;
+    } else {
+      errorMessage.value = null;
+      srOnlyErrorMessage.value = null;
+      handleFileSelection(file);
+    }
+  } catch (error) {
+    errorMessage.value = 'Error verifying image dimensions';
+  }
+});
+
 async function getImgDimension(imgFile: UppyFile<Meta, Record<string, never>>): Promise<{ width: number; height: number }> {
   return new Promise((resolve, reject) => {
     const url = URL.createObjectURL(imgFile.data);
@@ -117,22 +189,23 @@ function triggerUppyButton() {
         note: constraintsMessage,
         proudlyDisplayPoweredByUppy: false,
         hideUploadButton: true,
-        height: '300px',
+        // height: '300px', // do not use it because otherwise the image editor looks too small
       }" />
     </button>
+    <div v-if="size.width && size.height" class="dimensions-display">
+      <span>Current dimensions: {{ size.width }}px &times; {{ size.height }}px</span>
+      <span role="status" aria-live="polite">
+        <span v-if="size.height > maxHeight" class="dimension-warning">
+          (Height exceeds {{ maxHeight }}px limit)
+        </span>
+      </span>
+    </div>
     <div role="alert">
-      <div v-if="errorMessage" class="control-error help-block" id="logo-upload-error" aria-hidden="true">{{ errorMessage }}</div>
+      <div v-if="errorMessage" class="control-error help-block" id="logo-upload-error" aria-hidden="true">{{
+        errorMessage }}</div>
       <span v-if="srOnlyErrorMessage" class="sr-only">{{ srOnlyErrorMessage }}</span>
     </div>
   </div>
-  <!-- <div v-if="selectedFile"> -->
-    <!-- <p>Selected file</p> -->
-    <!-- <pre>{{ JSON.stringify(selectedFile, null, 2) }}</pre> -->
-    <!-- Use a hidden input to store the file information and send it to the controller on form submission -->
-    <!-- <input type="hidden" :value="fileData ?? ''" name="Project[image_logo]" id="Project_image_logo" /> -->
-    <!-- Display file name for visual representation -->
-    <!-- <div>Selected file: {{ selectedFile.name }}</div> -->
-  <!-- </div> -->
 </template>
 
 <style scoped lang="less">
@@ -194,6 +267,18 @@ function triggerUppyButton() {
     }
   }
 
+  .uppy-DashboardContent-save {
+    color: #08893e;
+    &:focus {
+      background: #08893e;
+      color: #fff;
+    }
+    &:hover {
+      background: #08893e;
+      color: #fff;
+    }
+  }
+
   .uppy-Dashboard-Item-action {
 
     // color: white;
@@ -229,6 +314,33 @@ function triggerUppyButton() {
       box-shadow: none;
     }
   }
+
+  .uppy-ImageCropper-controls {
+    padding-top: 0;
+  }
+}
+
+.dimensions-display {
+  margin-top: 12px;
+  font-size: 0.875rem;
+  color: #4a5568;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #f7fafc;
+  border-radius: 6px;
+}
+
+.dimension-warning {
+  color: #e53e3e;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  background: #fff5f5;
+  border-radius: 4px;
+  border: 1px solid #feb2b2;
 }
 </style>
 <!-- Ref logo w h = 138px 58px -->

From 51ab59cb0715df360275fd15c9325eb5d9587fd8 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Tue, 29 Oct 2024 16:29:04 +0700
Subject: [PATCH 09/41] refactor: cleanup current implementation

---
 vite/src/components/LogoUploadUppy.vue | 81 +++++++++++---------------
 1 file changed, 35 insertions(+), 46 deletions(-)

diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index 16b320fbb6..5ffbe20b66 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -29,19 +29,29 @@ flow
 
 - widget props
   - server endpoint url
-
  */
 
+// constants
+
 // image constraints
 const maxHeight = 60; // in pixels
 const maxSize = 1000000; // in bytes
 const maxSizeMb = maxSize / 1e6;
 
+const constraintsMessage = `Please upload one image file (max height ${maxHeight}px, max size ${maxSizeMb} MB)`
+const srOnlyConstraintsMessage = `Please upload one image file. Max height ${maxHeight} pixels, max size ${maxSizeMb} megabyte${maxSizeMb === 1 ? '' : 's'}. Press Enter key to browse your local files, or drag and drop an image into this box.`
+
+// state
+
 const isWrapperFocusable = ref(true);
 const size = reactive({
   height: 0,
   width: 0,
 });
+const errorMessage = ref<string | null>(null);
+const srOnlyErrorMessage = ref<string | null>(null);
+
+// uppy config
 
 const uppy = new Uppy({
   autoProceed: false,
@@ -68,9 +78,9 @@ uppy.use(ImageEditor, {
   },
   actions: {
     revert: true,
-    rotate: true,
+    rotate: false,
     granularRotate: false,
-    flip: true,
+    flip: false,
     zoomIn: true,
     zoomOut: true,
     cropSquare: false,
@@ -79,38 +89,32 @@ uppy.use(ImageEditor, {
   }
 });
 
-uppy.on('complete', (result) => {
-  console.log('Upload complete:', result);
-});
-
-const constraintsMessage = `Please upload one image file (max height ${maxHeight}px, max size ${maxSizeMb} MB)`
-const srOnlyConstraintsMessage = `Please upload one image file. Max height ${maxHeight} pixels, max size ${maxSizeMb} megabyte${maxSizeMb === 1 ? '' : 's'}. Press Enter key to browse your local files, or drag and drop an image into this box.`
-const errorMessage = ref<string | null>(null);
-const srOnlyErrorMessage = ref<string | null>(null);
-
-const handleFileSelection = (file: UppyFile<Meta, Record<string, never>>) => {
-  // selectedFile.value = file;
-  // const fileInfo = {
-  //   id: file.id,
-  //   name: file.name,
-  //   type: file.type,
-  //   size: file.size,
-  //   meta: file.meta
-  // };
-
-
-  // fileData.value = JSON.stringify(fileInfo);
-  // You might want to trigger any necessary form updates here
-}
-
 function openFileEditor(file: UppyFile<Meta, Record<string, never>>) {
   const dashboard = uppy.getPlugin('Dashboard');
   if (dashboard) {
-    // TODO fix typescript error
+    // TODO fix typescript error, avoid using any
     (dashboard as any).openFileEditor(file);
   }
 }
 
+async function getImgDimension(imgFile: UppyFile<Meta, Record<string, never>>): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(imgFile.data);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(img.src);
+      resolve({ width: img.width, height: img.height });
+    };
+    img.onerror = (error) => {
+      URL.revokeObjectURL(img.src);
+      reject(error);
+    };
+    img.src = url;
+  });
+}
+
+// file events
+
 uppy.on('file-added', async (file: UppyFile<Meta, Record<string, never>>) => {
   console.log('file-added', file);
 
@@ -125,8 +129,6 @@ uppy.on('file-added', async (file: UppyFile<Meta, Record<string, never>>) => {
       srOnlyErrorMessage.value = `Image height of ${height} pixels exceeds maximum of ${maxHeight} pixels. Please use the editor to resize.`;
       // Auto-open editor when height exceeds limit
       openFileEditor(file);
-    } else {
-      handleFileSelection(file);
     }
   } catch (error) {
     errorMessage.value = 'Error getting image dimensions';
@@ -137,6 +139,8 @@ uppy.on('file-removed', () => {
   isWrapperFocusable.value = true;
 });
 
+// file-editor events
+
 uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never>>) => {
   try {
     const { height } = await getImgDimension(file);
@@ -146,28 +150,13 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
     } else {
       errorMessage.value = null;
       srOnlyErrorMessage.value = null;
-      handleFileSelection(file);
     }
   } catch (error) {
     errorMessage.value = 'Error verifying image dimensions';
   }
 });
 
-async function getImgDimension(imgFile: UppyFile<Meta, Record<string, never>>): Promise<{ width: number; height: number }> {
-  return new Promise((resolve, reject) => {
-    const url = URL.createObjectURL(imgFile.data);
-    const img = new Image();
-    img.onload = () => {
-      URL.revokeObjectURL(img.src);
-      resolve({ width: img.width, height: img.height });
-    };
-    img.onerror = (error) => {
-      URL.revokeObjectURL(img.src);
-      reject(error);
-    };
-    img.src = url;
-  });
-}
+// methods
 
 function triggerUppyButton() {
   const uppyDashboard = document.querySelector('.uppy-Dashboard-inner');

From d19ad67b0bab48ac9d6163be32da57e845639378 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Tue, 29 Oct 2024 17:27:22 +0700
Subject: [PATCH 10/41] chore: comment feature and display upload button

---
 vite/src/components/LogoUploadUppy.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index 5ffbe20b66..290c63b78a 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -22,7 +22,7 @@ flow
 - user resizes image in editor and saves
   - dynamically show image dimensions
   - while image height is > 60px, show warning message and keep "save" button disabled
-  - show "autocrop" button. On press:
+  - show "autocrop" button. On press: --> this feature is way too complicated for what it's worth
     - if image height > 60px, auto resize height to 60px keeping image proportions
     - if image height <= 60px, do nothing
 - user clicks upload button -> server endpoint uploads file to S3 and returns url
@@ -177,8 +177,6 @@ function triggerUppyButton() {
       <Dashboard :uppy="uppy" :props="{
         note: constraintsMessage,
         proudlyDisplayPoweredByUppy: false,
-        hideUploadButton: true,
-        // height: '300px', // do not use it because otherwise the image editor looks too small
       }" />
     </button>
     <div v-if="size.width && size.height" class="dimensions-display">

From 5e3f38f65bd945e7cdfb4a838b4920f09e5cd05e Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Tue, 29 Oct 2024 19:11:59 +0700
Subject: [PATCH 11/41] feat: able to upload file and send data back to the
 client

---
 .../controllers/AdminProjectController.php    | 75 ++++++++++++++++++-
 protected/views/adminProject/_form.php        | 42 ++++++-----
 vite/package-lock.json                        | 75 ++++++++++++++++++-
 vite/package.json                             |  1 +
 vite/src/components/LogoUploadUppy.vue        | 67 +++++++++++------
 5 files changed, 217 insertions(+), 43 deletions(-)

diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index 9147c9a338..bd74ae3765 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -23,7 +23,7 @@ public function accessRules()
 	{
 		return array(
 			array('allow', // admin only
-				'actions'=>array('admin','delete','index','view','create','update'),
+				'actions'=>array('admin','delete','index','view','create','update','uploadLogo'),
 				'roles'=>array('admin'),
 			),
 			array('deny',  // deny all users
@@ -89,6 +89,79 @@ public function actionCreate()
 		));
 	}
 
+  private function validateFileSize($file, $maxSizeInBytes) {
+    return $file->getSize() <= $maxSizeInBytes;
+  }
+
+  // this method should be called by the uploader
+  public function actionUploadLogo() {
+    if (!isset($_FILES['logo_image'])) {
+      Yii::log("No logo_image file received in upload request", "warning");
+
+      // TODO research if this is the actual way to respond with 400
+      header('Content-Type: application/json');
+      http_response_code(400);
+      echo CJSON::encode([
+        'success' => false,
+        'message' => 'No file was uploaded',
+      ]);
+      Yii::app()->end();
+    }
+
+    $uploadedLogo = CUploadedFile::getInstanceByName('logo_image');
+
+    // Yii::log("action UploadLogo: uploaded file - " . print_r($uploadedLogo, true), "warning");
+    // action UploadLogo: uploaded file - CUploadedFile Object
+    // (
+    //     [_name:CUploadedFile:private] => G10Klogo_renamed.jpg
+    //     [_tempName:CUploadedFile:private] => /tmp/phpe2H3JK
+    //     [_type:CUploadedFile:private] => image/jpeg
+    //     [_size:CUploadedFile:private] => 7702
+    //     [_error:CUploadedFile:private] => 0
+    //     [_e:CComponent:private] =>
+    //     [_m:CComponent:private] =>
+    // )
+
+    // TODO validate file size server side (file size < 1MB)
+    if (!$this->validateFileSize($uploadedLogo, 1_000_000)) {
+      Yii::log("action UploadLogo: file size is greater than 1MB", "warning");
+      header('Content-Type: application/json');
+      http_response_code(400);
+      echo CJSON::encode([
+        'success' => false,
+        'message' => 'File size should be less than 1MB',
+      ]);
+      Yii::app()->end();
+    }
+    // TODO store file in S3 bucket
+    // TODO if a new file is uploaded, delete the old one
+    // Yii::log(print_r($_FILES['logo_image'], true), "warning");
+    /**
+     * (
+     *     [name] => G10Klogo_renamed.jpg
+     *     [type] => image/jpeg
+     *     [tmp_name] => /tmp/php4humoH
+     *     [error] => 0
+     *     [size] => 7702
+     * )
+     */
+
+    // Mock async process
+    sleep(1); // Simulate 1 second processing delay
+
+    // Mock response for now
+    $response = [
+        'success' => true,
+        'image_location' => 'https://assets.gigadb-cdn.net/assets/images/' . $_FILES['logo_image']['name']
+    ];
+    // TODO call writeLogo method that writes image to S3 bucket
+
+    // Send JSON response
+    header('Content-Type: application/json');
+    echo CJSON::encode($response);
+    Yii::app()->end();
+  }
+
 	/**
 	 * Updates a particular model.
 	 * If update is successful, the browser will be redirected to the 'view' page.
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index abd904c31b..0da35a9a10 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -33,26 +33,18 @@
 				'maxlength' => 255
 			]
 		]);
-    // field replaced by vue widget
-		// $this->widget('application.components.controls.TextField', [
-		// 	'form' => $form,
-		// 	'model' => $model,
-		// 	'attributeName' => 'image_location',
-		// 	'inputOptions' => [
-		// 		'maxlength' => 100
-		// 	]
-		// ]);
+    // TODO field replaced by vue widget, should remove / replace by thumbnail
+		$this->widget('application.components.controls.TextField', [
+			'form' => $form,
+			'model' => $model,
+			'attributeName' => 'image_location',
+			'inputOptions' => [
+				'maxlength' => 100,
+        'readonly' => true
+			]
+		]);
 		?>
 
-<!-- mock input, vue app should render input with same id -->
-<!--
-    <div class="form-group">
-        <?php echo $form->labelEx($model, 'image_logo'); ?>
-        <?php echo $form->fileField($model, 'image_logo'); ?>
-        <?php echo $form->error($model, 'image_logo'); ?>
-    </div>
--->
-
     <div id="vue-client_project-image-logo">
       <div class="spinner"></div>
     </div>
@@ -69,4 +61,16 @@
 		<?php $this->endWidget(); ?>
 	</div>
 
-</div>
\ No newline at end of file
+</div>
+
+<script>
+document.addEventListener('logo-uploaded', function(e) {
+    // handle successfully uploaded logo image from uppy
+    const imageLocation = e.detail.imageLocation;
+
+    const imageLocationInput = document.querySelector('input[name="Project[image_location]"]');
+    if (imageLocationInput instanceof HTMLInputElement) {
+      imageLocationInput.value = imageLocation;
+    }
+});
+</script>
\ No newline at end of file
diff --git a/vite/package-lock.json b/vite/package-lock.json
index 7cd75b53df..45986a8322 100644
--- a/vite/package-lock.json
+++ b/vite/package-lock.json
@@ -14,6 +14,7 @@
         "@uppy/image-editor": "^3.1.0",
         "@uppy/progress-bar": "^4.0.0",
         "@uppy/vue": "^2.0.1",
+        "@uppy/xhr-upload": "^4.2.1",
         "vue": "^3.5.10"
       },
       "devDependencies": {
@@ -29,6 +30,26 @@
       "resolved": "https://registry.npmjs.org/@transloadit/prettier-bytes/-/prettier-bytes-0.3.4.tgz",
       "integrity": "sha512-8/SnIF9Q2k52mbjRVAYLranwkaDTLb+O9r4Z/uo8uNw//SjygKvvbF4BHSOuReufaAyum1q13602VcNud25Dfg=="
     },
+    "node_modules/@types/retry": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz",
+      "integrity": "sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==",
+      "license": "MIT"
+    },
+    "node_modules/@uppy/companion-client": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@uppy/companion-client/-/companion-client-4.1.0.tgz",
+      "integrity": "sha512-nQ8CQfZcYVBNtFQ6ePj7FDIq38DXlH0YpzP/91LR9gnDVISJKKUuvWfr6tPktj1lRw9FZV8jLmlMKT2ituVKiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@uppy/utils": "^6.0.2",
+        "namespace-emitter": "^2.0.1",
+        "p-retry": "^6.1.0"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^4.2.0"
+      }
+    },
     "node_modules/@uppy/core": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@uppy/core/-/core-4.2.2.tgz",
@@ -270,6 +291,19 @@
         }
       }
     },
+    "node_modules/@uppy/xhr-upload": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@uppy/xhr-upload/-/xhr-upload-4.2.1.tgz",
+      "integrity": "sha512-pafgk0vLr+FKDHo+xmBMwNncj68oRNoaTnj0por7LPND0QGXV7xwBZnGGkQhiHLooV2MNBEhFQtx93A76cEINg==",
+      "license": "MIT",
+      "dependencies": {
+        "@uppy/companion-client": "^4.1.0",
+        "@uppy/utils": "^6.0.3"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^4.2.2"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz",
@@ -608,6 +642,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-network-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-network-error/-/is-network-error-1.1.0.tgz",
+      "integrity": "sha512-tUdRRAnhT+OtCZR/LxZelH/C7QtjtFrTu5tXCA8pl55eTUElUHT+GPYV8MBMBvea/j+NxQqVt3LbWMRir7Gx9g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-what": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
@@ -695,8 +741,7 @@
     "node_modules/namespace-emitter": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/namespace-emitter/-/namespace-emitter-2.0.1.tgz",
-      "integrity": "sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g==",
-      "peer": true
+      "integrity": "sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g=="
     },
     "node_modules/nanoid": {
       "version": "5.0.7",
@@ -733,6 +778,23 @@
         "node": ">= 4.4.x"
       }
     },
+    "node_modules/p-retry": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-6.2.0.tgz",
+      "integrity": "sha512-JA6nkq6hKyWLLasXQXUrO4z8BUZGUt/LjlJxx8Gb2+2ntodU/SS63YZ8b0LUTbQ8ZB9iwOfhEPhg4ykKnn2KsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/retry": "0.12.2",
+        "is-network-error": "^1.0.0",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse-node-version": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
@@ -771,6 +833,15 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
diff --git a/vite/package.json b/vite/package.json
index 9195eb666f..31bdbd6b4a 100644
--- a/vite/package.json
+++ b/vite/package.json
@@ -15,6 +15,7 @@
     "@uppy/image-editor": "^3.1.0",
     "@uppy/progress-bar": "^4.0.0",
     "@uppy/vue": "^2.0.1",
+    "@uppy/xhr-upload": "^4.2.1",
     "vue": "^3.5.10"
   },
   "devDependencies": {
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index 290c63b78a..b2a81200d9 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -6,13 +6,13 @@ import {
   Dashboard
 } from '@uppy/vue';
 import ImageEditor from '@uppy/image-editor';
+import XHR from '@uppy/xhr-upload';
 
 import '@uppy/core/dist/style.css';
 import '@uppy/dashboard/dist/style.css';
 import '@uppy/image-editor/dist/style.min.css';
 
 /**
-
 flow
 
 - user drops or loads file in widget
@@ -22,13 +22,10 @@ flow
 - user resizes image in editor and saves
   - dynamically show image dimensions
   - while image height is > 60px, show warning message and keep "save" button disabled
-  - show "autocrop" button. On press: --> this feature is way too complicated for what it's worth
-    - if image height > 60px, auto resize height to 60px keeping image proportions
-    - if image height <= 60px, do nothing
 - user clicks upload button -> server endpoint uploads file to S3 and returns url
 
 - widget props
-  - server endpoint url
+  - server endpoint url (?)
  */
 
 // constants
@@ -89,10 +86,17 @@ uppy.use(ImageEditor, {
   }
 });
 
+uppy.use(XHR, {
+  endpoint: `/adminProject/uploadLogo`,
+  formData: true,
+  fieldName: 'logo_image',
+  withCredentials: true
+});
+
 function openFileEditor(file: UppyFile<Meta, Record<string, never>>) {
   const dashboard = uppy.getPlugin('Dashboard');
   if (dashboard) {
-    // TODO fix typescript error, avoid using any
+    // TODO fix typescript error, avoid using `any`
     (dashboard as any).openFileEditor(file);
   }
 }
@@ -116,15 +120,12 @@ async function getImgDimension(imgFile: UppyFile<Meta, Record<string, never>>):
 // file events
 
 uppy.on('file-added', async (file: UppyFile<Meta, Record<string, never>>) => {
-  console.log('file-added', file);
-
   isWrapperFocusable.value = false;
   errorMessage.value = null;
 
   try {
     const { height } = await getImgDimension(file);
     if (height > maxHeight) {
-      // Show warning but don't remove file
       errorMessage.value = `Image height (${height}px) exceeds ${maxHeight}px - please resize using the editor`;
       srOnlyErrorMessage.value = `Image height of ${height} pixels exceeds maximum of ${maxHeight} pixels. Please use the editor to resize.`;
       // Auto-open editor when height exceeds limit
@@ -139,14 +140,45 @@ uppy.on('file-removed', () => {
   isWrapperFocusable.value = true;
 });
 
+uppy.on('upload-success', (file, response) => {
+  console.log('Upload successful', response.body);
+
+  if (response.body?.success) {
+    const customEvent = new CustomEvent('logo-uploaded', {
+      detail: {
+        imageLocation: response.body.image_location
+      },
+      bubbles: true
+    });
+    document.dispatchEvent(customEvent);
+  }
+});
+
+uppy.on('upload-error', (file, error, response) => {
+  if (typeof response === 'string') {
+    try {
+      const errorData = JSON.parse(response);
+      errorMessage.value = errorData.message;
+    } catch {
+      errorMessage.value = 'Failed to upload file. Please try again.';
+    }
+  } else {
+    errorMessage.value = 'Failed to upload file. Please try again.';
+  }
+});
+
+uppy.on('upload-start', () => {
+  errorMessage.value = '';
+});
+
 // file-editor events
 
 uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never>>) => {
   try {
     const { height } = await getImgDimension(file);
     if (height > maxHeight) {
-      errorMessage.value = `Image still exceeds ${maxHeight}px height - please resize further`;
-      srOnlyErrorMessage.value = `Image height still exceeds ${maxHeight} pixels. Please resize further.`;
+      errorMessage.value = `Image still exceeds ${maxHeight}px height - please crop further`;
+      srOnlyErrorMessage.value = `Image height still exceeds ${maxHeight} pixels. Please crop further.`;
     } else {
       errorMessage.value = null;
       srOnlyErrorMessage.value = null;
@@ -221,9 +253,8 @@ function triggerUppyButton() {
   border-radius: 4px;
 }
 
+/* uppy styles overrides */
 :deep(.uppy-Dashboard-inner) {
-
-  /* overrides */
   .uppy-Dashboard-browse {
     /* duplicating less variable here, would be better to reuse already defined color from variables.less */
     color: #08893e;
@@ -256,10 +287,12 @@ function triggerUppyButton() {
 
   .uppy-DashboardContent-save {
     color: #08893e;
+
     &:focus {
       background: #08893e;
       color: #fff;
     }
+
     &:hover {
       background: #08893e;
       color: #fff;
@@ -267,13 +300,8 @@ function triggerUppyButton() {
   }
 
   .uppy-Dashboard-Item-action {
-
-    // color: white;
-    // background: black;
-    // border: 1px #08893e solid;
     &:hover {
       color: #08893e;
-      // background: #08893e;
     }
 
     &:focus {
@@ -290,7 +318,6 @@ function triggerUppyButton() {
     border: 1px #08893e solid;
 
     &:hover {
-      // color: #fff;
       background: #0d6e36;
     }
 
@@ -330,5 +357,3 @@ function triggerUppyButton() {
   border: 1px solid #feb2b2;
 }
 </style>
-<!-- Ref logo w h = 138px 58px -->
-<!-- height should be fixed, width should be variable and maintain aspect ratio -->

From c04e70e7b1610c7c50e3bd74bf5ca8d5236170fa Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Tue, 29 Oct 2024 19:12:38 +0700
Subject: [PATCH 12/41] chore: restores actioncreate method to original
 functionality

---
 .../controllers/AdminProjectController.php    | 29 ++-----------------
 1 file changed, 3 insertions(+), 26 deletions(-)

diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index bd74ae3765..97fe361cd7 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -49,39 +49,16 @@ public function actionView($id)
 	 */
 	public function actionCreate()
 	{
-		$model = new Project;
+		$model=new Project;
 
 		// Uncomment the following line if AJAX validation is needed
 		// $this->performAjaxValidation($model);
 
 		if(isset($_POST['Project']))
 		{
-      Yii::log("action Create: project form data exists", "warning");
-			$model->attributes = $_POST['Project'];
-
-      Yii::log("action Create: project form data - " . print_r($model->attributes, true), "warning");
-
-      Yii::log("action Create: image_logo - " . print_r($model->image_logo, true), "warning");
-
-      $uploadedLogo = CUploadedFile::getInstance($model, 'image_logo');
-
-      Yii::log("action Create: uploaded file - " . $uploadedLogo, "warning");
-
-      if ($uploadedLogo) {
-        Yii::log("action Create: image form data exists", "warning");
-        if ($model->writeLogo(Yii::$app->cloudStore, $uploadedLogo)) {
-          Yii::log("action Create: logo uploaded successfully", "warning");
-            // Logo uploaded successfully
-        } else {
-            Yii::log("action Create: Failed to write logo to storage for project " . $model->id, "error");
-        }
-      }
-      // $this->redirect(array('create'));
-
-			if($model->save()) {
+			$model->attributes=$_POST['Project'];
+			if($model->save())
 				$this->redirect(array('view','id'=>$model->id));
-      }
-
 		}
 
 		$this->render('create',array(

From 1edd8c09dd5afa5d998c35bfb22ccbfd47756096 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Wed, 30 Oct 2024 10:24:29 +0700
Subject: [PATCH 13/41] feat: use write logo in project controller

---
 .../controllers/AdminProjectController.php    | 88 ++++++-------------
 protected/models/Project.php                  | 18 ++--
 2 files changed, 35 insertions(+), 71 deletions(-)

diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index 97fe361cd7..c47643dd27 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -66,77 +66,43 @@ public function actionCreate()
 		));
 	}
 
-  private function validateFileSize($file, $maxSizeInBytes) {
-    return $file->getSize() <= $maxSizeInBytes;
+  private function makeResponse($code, $message, $payload = []) {
+    $success = $code < 400;
+    header('Content-Type: application/json');
+    http_response_code($code);
+    echo CJSON::encode([
+      'success' => $success,
+      'message' => $message,
+      ...$payload,
+    ]);
+    Yii::app()->end();
   }
 
   // this method should be called by the uploader
   public function actionUploadLogo() {
     if (!isset($_FILES['logo_image'])) {
-      Yii::log("No logo_image file received in upload request", "warning");
-
-      // TODO research if this is the actual way to respond with 400
-      header('Content-Type: application/json');
-      http_response_code(400);
-      echo CJSON::encode([
-        'success' => false,
-        'message' => 'No file was uploaded',
-      ]);
-      Yii::app()->end();
+      $this->makeResponse(400, 'Invalid request. No file was uploaded.');
     }
 
     $uploadedLogo = CUploadedFile::getInstanceByName('logo_image');
 
-    // Yii::log("action UploadLogo: uploaded file - " . print_r($uploadedLogo, true), "warning");
-    // action UploadLogo: uploaded file - CUploadedFile Object
-    // (
-    //     [_name:CUploadedFile:private] => G10Klogo_renamed.jpg
-    //     [_tempName:CUploadedFile:private] => /tmp/phpe2H3JK
-    //     [_type:CUploadedFile:private] => image/jpeg
-    //     [_size:CUploadedFile:private] => 7702
-    //     [_error:CUploadedFile:private] => 0
-    //     [_e:CComponent:private] =>
-    //     [_m:CComponent:private] =>
-    // )
-
-    // TODO validate file size server side (file size < 1MB)
-    if (!$this->validateFileSize($uploadedLogo, 1_000_000)) {
-      Yii::log("action UploadLogo: file size is greater than 1MB", "warning");
-      header('Content-Type: application/json');
-      http_response_code(400);
-      echo CJSON::encode([
-        'success' => false,
-        'message' => 'File size should be less than 1MB',
-      ]);
-      Yii::app()->end();
+    if ($uploadedLogo->getSize() > 1_000_000) {
+      $message = 'Invalid request. Logo image size should be less than 1MB';
+      Yii::app()->user->setFlash('updateError', $message);
+      $this->makeResponse(400, $message);
     }
-    // TODO store file in S3 bucket
-    // TODO if a new file is uploaded, delete the old one
-    // Yii::log(print_r($_FILES['logo_image'], true), "warning");
-    /**
-     * (
-     *     [name] => G10Klogo_renamed.jpg
-     *     [type] => image/jpeg
-     *     [tmp_name] => /tmp/php4humoH
-     *     [error] => 0
-     *     [size] => 7702
-     * )
-     */
-
-    // Mock async process
-    sleep(1); // Simulate 1 second processing delay
-
-    // Mock response for now
-    $response = [
-        'success' => true,
-        'image_location' => 'https://assets.gigadb-cdn.net/assets/images/' . $_FILES['logo_image']['name']
-    ];
-    // TODO call writeLogo method that writes image to S3 bucket
-
-    // Send JSON response
-    header('Content-Type: application/json');
-    echo CJSON::encode($response);
-    Yii::app()->end();
+
+    $image_location = Project::writeLogo(Yii::$app->cloudStore, $uploadedLogo);
+
+    if (!$image_location) {
+      $message = 'Failed to save your logo image';
+      Yii::app()->user->setFlash('updateError', $message);
+      $this->makeResponse(500, $message);
+    }
+
+    $this->makeResponse(200, 'Logo uploaded successfully', [
+      'image_location' => $image_location
+  ]);
   }
 
 	/**
diff --git a/protected/models/Project.php b/protected/models/Project.php
index 13677f0d04..f392bb1521 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -145,9 +145,9 @@ function check_duplicate(){
    * @param Filesystem $targetStorage
    * @param string $enclosingDirectory
    * @param CUploadedFile $uploadedLogo
-   * @return bool
+   * @return bool|string
    */
-  public function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedLogo): bool
+  public static function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedLogo)
   {
       Yii::log("writeLogo: Starting to process the uploaded file", "info");
 
@@ -156,7 +156,7 @@ public function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedLogo
       $fileName = $slugger->slug($info['filename'])->toString();
 
       Yii::log("writeLogo: Generated file name - " . $fileName, "info");
-      $uuid = $this->getUuid();
+      $uuid = Uuid::uuid4()->toString();
 
       Yii::log("writeLogo: Generated UUID - " . $uuid, "info");
 
@@ -164,29 +164,27 @@ public function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedLogo
 
       Yii::log("writeLogo: Generated image path - " . $imagePath, "info");
 
-      // I expected YII_ENV_DEV to be true but it's not defined, so using a hardcoded temporary approach for now
+      // I expected YII_ENV_DEV to be true but it's not defined, so using a hardcoded temporary approach for now so app does not crash each time
       $isLocalDev = true;
       $hasBucketAccess = false;
       if ($isLocalDev && !$hasBucketAccess) {
           Yii::log("writeLogo: Local dev environment, skipping actual storage", "info");
 
           // Mock URL for local development
-          $this->image_location = "https://assets.gigadb-cdn.net/live/images/projects/genome_10k/G10Klogo.jpg";
+          $image_location = "https://assets.gigadb-cdn.net/" . Yii::$app->params['environment'] . "/images/projects/" . $uuid . "/" . $fileName . "." . $info['extension'];
 
-          return true;
+          return $image_location;
       }
 
       if ($targetStorage->put(
           $imagePath, file_get_contents($uploadedLogo->getTempName()),
           ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
       )) {
-          // $this->logo = sprintf("%s.%s", $fileName, $info['extension']);
-          $this->image_logo = sprintf("%s.%s", $fileName, $info['extension']);
-          $this->image_location = sprintf("https://%s/%s", self::BUCKET, $imagePath);
+          $image_location = sprintf("https://%s/%s", self::BUCKET, $imagePath);
 
           Yii::log("writeLogo: Image successfully written to storage", "info");
 
-          return true;
+          return $image_location;
       }
 
       Yii::log("writeLogo: Error attempting to write image to the storage","error");

From 010344266872884821c5da2581f3ba0d89cfc39c Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Wed, 30 Oct 2024 14:47:39 +0700
Subject: [PATCH 14/41] feat: setup logo cleanup on project delete and on logo
 upload

---
 .../controllers/AdminProjectController.php    | 34 ++++++--
 protected/models/Project.php                  | 28 +++++--
 protected/views/adminProject/_form.php        | 25 +++---
 vite/src/App.vue                              |  7 --
 vite/src/components/DebugDisplay.vue          | 35 ++++++++
 vite/src/components/LogoUpload.vue            | 80 -------------------
 vite/src/components/LogoUploadUppy.vue        | 58 +++++++++-----
 vite/src/composables/useLifecycleLogger.ts    | 15 ++++
 vite/src/main.ts                              | 12 ++-
 9 files changed, 158 insertions(+), 136 deletions(-)
 delete mode 100644 vite/src/App.vue
 create mode 100644 vite/src/components/DebugDisplay.vue
 delete mode 100644 vite/src/components/LogoUpload.vue
 create mode 100644 vite/src/composables/useLifecycleLogger.ts

diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index c47643dd27..42eeeb06a1 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -70,16 +70,16 @@ private function makeResponse($code, $message, $payload = []) {
     $success = $code < 400;
     header('Content-Type: application/json');
     http_response_code($code);
-    echo CJSON::encode([
+    echo CJSON::encode(array_merge([
       'success' => $success,
       'message' => $message,
-      ...$payload,
-    ]);
+    ], $payload));
     Yii::app()->end();
   }
 
-  // this method should be called by the uploader
-  public function actionUploadLogo() {
+  public function actionUploadLogo($existingLogoUrl = null) {
+    $existingLogoUrl = Yii::app()->request->getQuery('existingLogoUrl');
+    Yii::log("uploadLogo: existingLogoUrl = " . $existingLogoUrl, "info");
     if (!isset($_FILES['logo_image'])) {
       $this->makeResponse(400, 'Invalid request. No file was uploaded.');
     }
@@ -92,7 +92,7 @@ public function actionUploadLogo() {
       $this->makeResponse(400, $message);
     }
 
-    $image_location = Project::writeLogo(Yii::$app->cloudStore, $uploadedLogo);
+    $image_location = Project::writeLogo(Yii::$app->cloudStore, $uploadedLogo, $existingLogoUrl);
 
     if (!$image_location) {
       $message = 'Failed to save your logo image';
@@ -102,7 +102,7 @@ public function actionUploadLogo() {
 
     $this->makeResponse(200, 'Logo uploaded successfully', [
       'image_location' => $image_location
-  ]);
+    ]);
   }
 
 	/**
@@ -136,10 +136,28 @@ public function actionUpdate($id)
 	 */
 	public function actionDelete($id)
 	{
+    Yii::log("delete: $id");
 		if(Yii::app()->request->isPostRequest)
 		{
 			// we only allow deletion via POST request
-			$this->loadModel($id)->delete();
+			$model = $this->loadModel($id);
+      $logoUrl = $model->image_location;
+      $logoPath = str_replace('https://' . Project::BUCKET . '/', '', $logoUrl);
+      Yii::log("delete: $id, logoUrl = $logoUrl", "info");
+
+      // I expected YII_ENV_DEV to be true but it's not defined, so using a hardcoded temporary approach for now so app does not crash each time
+      $isLocalDev = true;
+      $hasStorageAccess = false;
+      if ($isLocalDev && !$hasStorageAccess) {
+        Yii::log("actionDelete: Local dev environment, skipping actual  delete", "info");
+      } else {
+        if (Yii::$app->cloudStore->delete($logoPath)) {
+          Yii::log("actionDelete: Deleted logo image" . $logoPath . " for project ". $id, "info");
+        }  else {
+          Yii::log("actionDelete: Failed to delete logo image" . $logoPath . " for project ". $id, "error");
+        }
+      }
+      $model->delete();
 
 			// if AJAX request (triggered by deletion via admin grid view), we should not redirect the browser
 			if(!isset($_GET['ajax']))
diff --git a/protected/models/Project.php b/protected/models/Project.php
index f392bb1521..99fc6c3f80 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -57,7 +57,7 @@ public function rules()
       array('url', 'url','message'=>'Please check the URL format'),
 			array('url', 'length', 'max'=>128),
 			array('name', 'length', 'max'=>255),
-			array('image_location', 'length', 'max'=>100),
+			array('image_location', 'length', 'max'=>255),
       array('url','check_duplicate'),
       // array('image', 'file', 'types' => 'jpg, jpeg, png', 'allowEmpty' => true),
       array('image_logo', 'file', 'types' => 'jpg, jpeg, png', 'allowEmpty' => true),
@@ -143,11 +143,11 @@ function check_duplicate(){
    * write a logo image to the desired (Flysystem managed) storage mechanism and update url property with the location
    *
    * @param Filesystem $targetStorage
-   * @param string $enclosingDirectory
    * @param CUploadedFile $uploadedLogo
+   * @param string|null $existingLogoUrl
    * @return bool|string
    */
-  public static function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedLogo)
+  public static function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedLogo, $existingLogoUrl = null)
   {
       Yii::log("writeLogo: Starting to process the uploaded file", "info");
 
@@ -163,15 +163,18 @@ public static function writeLogo(Filesystem $targetStorage, CUploadedFile $uploa
       $imagePath = sprintf("%s/images/projects/%s/%s.%s", Yii::$app->params['environment'], $uuid, $fileName, $info['extension'] );
 
       Yii::log("writeLogo: Generated image path - " . $imagePath, "info");
+      $image_location = sprintf("https://%s/%s", self::BUCKET, $imagePath);
 
       // I expected YII_ENV_DEV to be true but it's not defined, so using a hardcoded temporary approach for now so app does not crash each time
       $isLocalDev = true;
-      $hasBucketAccess = false;
-      if ($isLocalDev && !$hasBucketAccess) {
+      $hasStorageAccess = false;
+      if ($isLocalDev && !$hasStorageAccess) {
           Yii::log("writeLogo: Local dev environment, skipping actual storage", "info");
 
-          // Mock URL for local development
-          $image_location = "https://assets.gigadb-cdn.net/" . Yii::$app->params['environment'] . "/images/projects/" . $uuid . "/" . $fileName . "." . $info['extension'];
+          if ($existingLogoUrl !== null) {
+            $existingLogoPath = str_replace('https://' . self::BUCKET . '/', '', $existingLogoUrl);
+            Yii::log("writeLogo: Mocking deleting existing logo image with path " . $existingLogoPath, "info");
+          }
 
           return $image_location;
       }
@@ -180,7 +183,16 @@ public static function writeLogo(Filesystem $targetStorage, CUploadedFile $uploa
           $imagePath, file_get_contents($uploadedLogo->getTempName()),
           ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
       )) {
-          $image_location = sprintf("https://%s/%s", self::BUCKET, $imagePath);
+          if ($existingLogoUrl !== null) {
+            $existingLogoPath = str_replace('https://' . self::BUCKET . '/', '', $existingLogoUrl);
+            Yii::log("writeLogo: Deleting existing logo image with path " . $existingLogoPath, "info");
+
+            if ($targetStorage->delete($existingLogoPath)) {
+              Yii::log("writeLogo: Deleted existing logo image" . $existingLogoPath, "info");
+            }  else {
+              Yii::log("writeLogo: Failed to delete existing logo image" . $existingLogoUrl, "error");
+            }
+          }
 
           Yii::log("writeLogo: Image successfully written to storage", "info");
 
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index 0da35a9a10..0af4e4cd3a 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -34,18 +34,22 @@
 			]
 		]);
     // TODO field replaced by vue widget, should remove / replace by thumbnail
-		$this->widget('application.components.controls.TextField', [
-			'form' => $form,
-			'model' => $model,
-			'attributeName' => 'image_location',
-			'inputOptions' => [
-				'maxlength' => 100,
-        'readonly' => true
-			]
-		]);
+		// $this->widget('application.components.controls.TextField', [
+		// 	'form' => $form,
+		// 	'model' => $model,
+		// 	'attributeName' => 'image_location',
+		// 	'inputOptions' => [
+		// 		'maxlength' => 100,
+    //     'readonly' => true
+		// 	]
+		// ]);
+
+    // current image location in case user uploaded one already
+    $imageLocation = $model->image_location ?: null;
+    $endpoint = Yii::app()->createUrl('/adminProject/uploadLogo');
 		?>
 
-    <div id="vue-client_project-image-logo">
+    <div id="vue-client_project-image-logo" data-image-location="<?php echo $imageLocation; ?>" data-endpoint="<?php echo $endpoint; ?>">
       <div class="spinner"></div>
     </div>
     <div>
@@ -64,6 +68,7 @@
 </div>
 
 <script>
+  // TODO should this be removed? probably NOT because that way the Vue widget is more reusable (i.e. if we keep hidden input in the php view)
 document.addEventListener('logo-uploaded', function(e) {
     // handle successfully uploaded logo image from uppy
     const imageLocation = e.detail.imageLocation;
diff --git a/vite/src/App.vue b/vite/src/App.vue
deleted file mode 100644
index 0bb3794a5a..0000000000
--- a/vite/src/App.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import LogoUploadUppy from './components/LogoUploadUppy.vue';
-</script>
-
-<template>
-  <LogoUploadUppy />
-</template>
diff --git a/vite/src/components/DebugDisplay.vue b/vite/src/components/DebugDisplay.vue
new file mode 100644
index 0000000000..2d206a427e
--- /dev/null
+++ b/vite/src/components/DebugDisplay.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  endpoint: string;
+  imageLocation: string | null;
+}
+
+const props = defineProps<Props>();
+
+console.log('DebugDisplay props:', {
+  endpoint: props.endpoint,
+  imageLocation: props.imageLocation
+});
+
+</script>
+
+<template>
+  <div class="debug-display">
+    <pre>{{ props }}</pre>
+  </div>
+</template>
+
+<style scoped>
+.debug-display {
+  padding: 1rem;
+  background: #f5f5f5;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
diff --git a/vite/src/components/LogoUpload.vue b/vite/src/components/LogoUpload.vue
deleted file mode 100644
index 79125a4eff..0000000000
--- a/vite/src/components/LogoUpload.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const MAX_FILE_SIZE = 1024 * 1024; // 1MB in bytes
-const MAX_HEIGHT = 60; // pixels
-
-const error = ref<string | null>(null);
-const selectedFile = ref<File | null>(null);
-const fileInputRef = ref<HTMLInputElement | null>(null);
-
-const validateImage = (file: File): Promise<boolean> => {
-  return new Promise((resolve, reject) => {
-    // Check file size
-    if (file.size > MAX_FILE_SIZE) {
-      reject('File size must be less than 1MB');
-      return;
-    }
-
-    // Check if it's an image
-    if (!file.type.startsWith('image/')) {
-      reject('File must be an image');
-      return;
-    }
-
-    // Create an image object to check dimensions
-    const img = new Image();
-    const objectUrl = URL.createObjectURL(file);
-
-    img.onload = () => {
-      URL.revokeObjectURL(objectUrl);
-      if (img.height > MAX_HEIGHT) {
-        reject(`Image height must be ${MAX_HEIGHT}px or less (current height: ${img.height}px)`);
-        return;
-      }
-      resolve(true);
-    };
-
-    img.onerror = () => {
-      URL.revokeObjectURL(objectUrl);
-      reject('Error loading image');
-    };
-
-    img.src = objectUrl;
-  });
-};
-
-const handleFileChange = async (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  const file = target.files?.[0];
-  error.value = null;
-  selectedFile.value = null;
-
-  if (!file) return;
-
-  try {
-    await validateImage(file);
-    selectedFile.value = file;
-  } catch (err) {
-    error.value = err as string;
-    // Reset file input
-    if (fileInputRef.value) {
-      fileInputRef.value.value = '';
-    }
-  }
-};
-</script>
-
-<template>
-  <div class="form-group">
-    <label for="Project_image_logo" class="control-label">Upload Logo</label>
-    <input ref="fileInputRef" type="file" id="Project_image_logo" class="form-control" accept="image/*"
-      @change="handleFileChange" name="Project[image_logo]" />
-    <div role="alert">
-      <div v-if="error" class="alert alert-danger mt-10">{{ error }}</div>
-    </div>
-    <div v-if="selectedFile" class="alert alert-gigadb-info mt-10">
-      Selected file: {{ selectedFile.name }} ({{ Math.round(selectedFile.size / 1024) }} KB)
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index b2a81200d9..735504e9f8 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import Uppy from '@uppy/core';
 import type { UppyFile, Meta } from '@uppy/core';
 import {
@@ -7,26 +7,19 @@ import {
 } from '@uppy/vue';
 import ImageEditor from '@uppy/image-editor';
 import XHR from '@uppy/xhr-upload';
+import DebugDisplay from './DebugDisplay.vue';
+import DashboardPlugin from "@uppy/dashboard"
 
 import '@uppy/core/dist/style.css';
 import '@uppy/dashboard/dist/style.css';
 import '@uppy/image-editor/dist/style.min.css';
 
-/**
-flow
+// props
 
-- user drops or loads file in widget
-- is file height > 60px?
-  - yes: auto open editor
-  - no: do nothing
-- user resizes image in editor and saves
-  - dynamically show image dimensions
-  - while image height is > 60px, show warning message and keep "save" button disabled
-- user clicks upload button -> server endpoint uploads file to S3 and returns url
-
-- widget props
-  - server endpoint url (?)
- */
+const props = defineProps<{
+  endpoint: string;
+  imageLocation: string | null;
+}>();
 
 // constants
 
@@ -47,6 +40,10 @@ const size = reactive({
 });
 const errorMessage = ref<string | null>(null);
 const srOnlyErrorMessage = ref<string | null>(null);
+const uploadedImageLocation = ref<string | null>(props.imageLocation);
+const endpoint = computed(() => {
+  return `${props.endpoint}${uploadedImageLocation.value ? `?existingLogoUrl=${uploadedImageLocation.value}` : ''}`;
+})
 
 // uppy config
 
@@ -87,17 +84,16 @@ uppy.use(ImageEditor, {
 });
 
 uppy.use(XHR, {
-  endpoint: `/adminProject/uploadLogo`,
+  endpoint: endpoint.value,
   formData: true,
   fieldName: 'logo_image',
   withCredentials: true
 });
 
 function openFileEditor(file: UppyFile<Meta, Record<string, never>>) {
-  const dashboard = uppy.getPlugin('Dashboard');
+  const dashboard = uppy.getPlugin('Dashboard') as DashboardPlugin<Meta, Record<string, never>>;
   if (dashboard) {
-    // TODO fix typescript error, avoid using `any`
-    (dashboard as any).openFileEditor(file);
+    dashboard.openFileEditor(file);
   }
 }
 
@@ -144,13 +140,16 @@ uppy.on('upload-success', (file, response) => {
   console.log('Upload successful', response.body);
 
   if (response.body?.success) {
+    const { image_location } = response.body;
+    // allows to communicate with parent PHP view
     const customEvent = new CustomEvent('logo-uploaded', {
       detail: {
-        imageLocation: response.body.image_location
+        imageLocation: image_location
       },
       bubbles: true
     });
     document.dispatchEvent(customEvent);
+    uploadedImageLocation.value = image_location;
   }
 });
 
@@ -200,8 +199,13 @@ function triggerUppyButton() {
 </script>
 
 <template>
+  <input type="hidden" name="Project[image_location]" :value="uploadedImageLocation" />
+  <div class="form-group thumbnail-container" v-if="uploadedImageLocation">
+    <div class="control-label">Uploaded Logo</div>
+    <img :src="uploadedImageLocation" alt="Logo" />
+  </div>
   <div :class="`form-group ${errorMessage ? 'has-error' : ''}`">
-    <label class="control-label" for="logo-upload">Image Logo</label>
+    <label class="control-label" for="logo-upload">Upload a logo image</label>
     <!-- <span id="logo-upload-description" class="control-description help-block">Please upload a logo image file.</span> -->
     <!-- <span id="logo-upload-constraints" class="control-description help-block">{{ constraintsMessage }}</span> -->
     <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
@@ -225,6 +229,10 @@ function triggerUppyButton() {
       <span v-if="srOnlyErrorMessage" class="sr-only">{{ srOnlyErrorMessage }}</span>
     </div>
   </div>
+  <DebugDisplay v-bind="{
+    endpoint: endpoint,
+    imageLocation: uploadedImageLocation
+  }" />
 </template>
 
 <style scoped lang="less">
@@ -253,6 +261,14 @@ function triggerUppyButton() {
   border-radius: 4px;
 }
 
+.thumbnail-container {
+  .control-label {
+    font-weight: normal;
+    font-size: 13px;
+    color: #656565;
+    margin-bottom: 10px;  }
+}
+
 /* uppy styles overrides */
 :deep(.uppy-Dashboard-inner) {
   .uppy-Dashboard-browse {
diff --git a/vite/src/composables/useLifecycleLogger.ts b/vite/src/composables/useLifecycleLogger.ts
new file mode 100644
index 0000000000..e0f458d9cf
--- /dev/null
+++ b/vite/src/composables/useLifecycleLogger.ts
@@ -0,0 +1,15 @@
+// lifecycleLogger.js
+import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
+
+export function useLifecycleLogger(componentName: string, callback?: () => void) {
+  const runEffects = callback ?? (() => {})
+
+  console.log(`${componentName}: Component created`, runEffects())
+
+  onBeforeMount(() => console.log(`${componentName}: onBeforeMount`, runEffects()))
+  onMounted(() => console.log(`${componentName}: onMounted`, runEffects()))
+  onBeforeUpdate(() => console.log(`${componentName}: onBeforeUpdate`, runEffects()))
+  onUpdated(() => console.log(`${componentName}: onUpdated`, runEffects()))
+  onBeforeUnmount(() => console.log(`${componentName}: onBeforeUnmount`, runEffects()))
+  onUnmounted(() => console.log(`${componentName}: onUnmounted`, runEffects()))
+}
diff --git a/vite/src/main.ts b/vite/src/main.ts
index d82feb831e..6de66dca81 100644
--- a/vite/src/main.ts
+++ b/vite/src/main.ts
@@ -1,4 +1,12 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import LogoUploadUppy from './components/LogoUploadUppy.vue'
 
-createApp(App).mount('#vue-client_project-image-logo')
+const elId = '#vue-client_project-image-logo'
+const entryEl = document.querySelector(elId)
+if (entryEl && entryEl instanceof HTMLElement) {
+  const app = createApp(LogoUploadUppy, {
+    endpoint: entryEl.dataset.endpoint,
+    imageLocation: entryEl.dataset.imageLocation
+  })
+  app.mount(elId)
+}

From b251bd948e26eb7cda4ab9afbf9bfdfb682893c5 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Wed, 30 Oct 2024 16:26:54 +0700
Subject: [PATCH 15/41] feat: splits vue widget into components

---
 vite/src/components/DebugDisplay.vue         |  35 ----
 vite/src/components/HiddenInput.vue          |   9 +
 vite/src/components/LogoUploadUppy.vue       | 181 ++++---------------
 vite/src/components/StatusDisplay.vue        |  53 ++++++
 vite/src/components/UploadedLogoDisplay.vue  |  23 +++
 vite/src/components/UppyDashboardWrapper.vue |  54 ++++++
 vite/src/composables/useLifecycleLogger.ts   |  15 --
 vite/src/config.ts                           |   9 +
 vite/src/utils/getUppyImgDimensions.ts       |  17 ++
 9 files changed, 201 insertions(+), 195 deletions(-)
 delete mode 100644 vite/src/components/DebugDisplay.vue
 create mode 100644 vite/src/components/HiddenInput.vue
 create mode 100644 vite/src/components/StatusDisplay.vue
 create mode 100644 vite/src/components/UploadedLogoDisplay.vue
 create mode 100644 vite/src/components/UppyDashboardWrapper.vue
 delete mode 100644 vite/src/composables/useLifecycleLogger.ts
 create mode 100644 vite/src/config.ts
 create mode 100644 vite/src/utils/getUppyImgDimensions.ts

diff --git a/vite/src/components/DebugDisplay.vue b/vite/src/components/DebugDisplay.vue
deleted file mode 100644
index 2d206a427e..0000000000
--- a/vite/src/components/DebugDisplay.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  endpoint: string;
-  imageLocation: string | null;
-}
-
-const props = defineProps<Props>();
-
-console.log('DebugDisplay props:', {
-  endpoint: props.endpoint,
-  imageLocation: props.imageLocation
-});
-
-</script>
-
-<template>
-  <div class="debug-display">
-    <pre>{{ props }}</pre>
-  </div>
-</template>
-
-<style scoped>
-.debug-display {
-  padding: 1rem;
-  background: #f5f5f5;
-  border-radius: 4px;
-  font-family: monospace;
-}
-
-pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-</style>
diff --git a/vite/src/components/HiddenInput.vue b/vite/src/components/HiddenInput.vue
new file mode 100644
index 0000000000..e9c3a607f1
--- /dev/null
+++ b/vite/src/components/HiddenInput.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const props = defineProps<{
+  uploadedImageLocation: string | null;
+}>();
+</script>
+
+<template>
+  <input type="hidden" name="Project[image_location]" :value="props.uploadedImageLocation" />
+</template>
\ No newline at end of file
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index 735504e9f8..4218c6bbd5 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -1,52 +1,47 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue';
 import Uppy from '@uppy/core';
 import type { UppyFile, Meta } from '@uppy/core';
-import {
-  Dashboard
-} from '@uppy/vue';
 import ImageEditor from '@uppy/image-editor';
 import XHR from '@uppy/xhr-upload';
-import DebugDisplay from './DebugDisplay.vue';
 import DashboardPlugin from "@uppy/dashboard"
+import {
+  Dashboard
+} from '@uppy/vue';
+import { computed, reactive, ref } from 'vue';
+import HiddenInput from './HiddenInput.vue';
+import UploadedLogoDisplay from './UploadedLogoDisplay.vue';
+import UppyDashboardWrapper from './UppyDashboardWrapper.vue';
+import { config } from '../config';
+import { getUppyImgDimensions } from '../utils/getUppyImgDimensions';
+import StatusDisplay from './StatusDisplay.vue';
 
 import '@uppy/core/dist/style.css';
 import '@uppy/dashboard/dist/style.css';
 import '@uppy/image-editor/dist/style.min.css';
 
-// props
+const { maxHeight, maxSize, maxSizeMb } = config;
 
 const props = defineProps<{
   endpoint: string;
   imageLocation: string | null;
 }>();
 
-// constants
-
-// image constraints
-const maxHeight = 60; // in pixels
-const maxSize = 1000000; // in bytes
-const maxSizeMb = maxSize / 1e6;
-
 const constraintsMessage = `Please upload one image file (max height ${maxHeight}px, max size ${maxSizeMb} MB)`
-const srOnlyConstraintsMessage = `Please upload one image file. Max height ${maxHeight} pixels, max size ${maxSizeMb} megabyte${maxSizeMb === 1 ? '' : 's'}. Press Enter key to browse your local files, or drag and drop an image into this box.`
-
-// state
 
 const isWrapperFocusable = ref(true);
+const uploadedImageLocation = ref<string | null>(props.imageLocation);
+const errorMessage = ref<string | null>(null);
+const srOnlyErrorMessage = ref<string | null>(null);
 const size = reactive({
   height: 0,
   width: 0,
 });
-const errorMessage = ref<string | null>(null);
-const srOnlyErrorMessage = ref<string | null>(null);
-const uploadedImageLocation = ref<string | null>(props.imageLocation);
+
 const endpoint = computed(() => {
   return `${props.endpoint}${uploadedImageLocation.value ? `?existingLogoUrl=${uploadedImageLocation.value}` : ''}`;
 })
 
-// uppy config
-
+// initialize uppy here to avoid complexity
 const uppy = new Uppy({
   autoProceed: false,
   debug: true,
@@ -90,29 +85,6 @@ uppy.use(XHR, {
   withCredentials: true
 });
 
-function openFileEditor(file: UppyFile<Meta, Record<string, never>>) {
-  const dashboard = uppy.getPlugin('Dashboard') as DashboardPlugin<Meta, Record<string, never>>;
-  if (dashboard) {
-    dashboard.openFileEditor(file);
-  }
-}
-
-async function getImgDimension(imgFile: UppyFile<Meta, Record<string, never>>): Promise<{ width: number; height: number }> {
-  return new Promise((resolve, reject) => {
-    const url = URL.createObjectURL(imgFile.data);
-    const img = new Image();
-    img.onload = () => {
-      URL.revokeObjectURL(img.src);
-      resolve({ width: img.width, height: img.height });
-    };
-    img.onerror = (error) => {
-      URL.revokeObjectURL(img.src);
-      reject(error);
-    };
-    img.src = url;
-  });
-}
-
 // file events
 
 uppy.on('file-added', async (file: UppyFile<Meta, Record<string, never>>) => {
@@ -120,12 +92,15 @@ uppy.on('file-added', async (file: UppyFile<Meta, Record<string, never>>) => {
   errorMessage.value = null;
 
   try {
-    const { height } = await getImgDimension(file);
+    const { height } = await getUppyImgDimensions(file);
     if (height > maxHeight) {
-      errorMessage.value = `Image height (${height}px) exceeds ${maxHeight}px - please resize using the editor`;
+      errorMessage.value = `Image height (${height}px) exceeds ${maxHeight}px - please crop the image using the editor`;
       srOnlyErrorMessage.value = `Image height of ${height} pixels exceeds maximum of ${maxHeight} pixels. Please use the editor to resize.`;
       // Auto-open editor when height exceeds limit
-      openFileEditor(file);
+      const dashboard = uppy.getPlugin('Dashboard') as DashboardPlugin<Meta, Record<string, never>>;
+      if (dashboard) {
+        dashboard.openFileEditor(file);
+      }
     }
   } catch (error) {
     errorMessage.value = 'Error getting image dimensions';
@@ -174,7 +149,7 @@ uppy.on('upload-start', () => {
 
 uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never>>) => {
   try {
-    const { height } = await getImgDimension(file);
+    const { height } = await getUppyImgDimensions(file);
     if (height > maxHeight) {
       errorMessage.value = `Image still exceeds ${maxHeight}px height - please crop further`;
       srOnlyErrorMessage.value = `Image height still exceeds ${maxHeight} pixels. Please crop further.`;
@@ -187,89 +162,28 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
   }
 });
 
-// methods
-
-function triggerUppyButton() {
-  const uppyDashboard = document.querySelector('.uppy-Dashboard-inner');
-  if (uppyDashboard) {
-    const triggerButton = uppyDashboard.querySelector('.uppy-Dashboard-browse') as HTMLButtonElement;
-    triggerButton?.click();
-  }
-}
 </script>
 
 <template>
-  <input type="hidden" name="Project[image_location]" :value="uploadedImageLocation" />
-  <div class="form-group thumbnail-container" v-if="uploadedImageLocation">
-    <div class="control-label">Uploaded Logo</div>
-    <img :src="uploadedImageLocation" alt="Logo" />
-  </div>
-  <div :class="`form-group ${errorMessage ? 'has-error' : ''}`">
-    <label class="control-label" for="logo-upload">Upload a logo image</label>
-    <!-- <span id="logo-upload-description" class="control-description help-block">Please upload a logo image file.</span> -->
-    <!-- <span id="logo-upload-constraints" class="control-description help-block">{{ constraintsMessage }}</span> -->
-    <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
-      :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
+  <!-- hidden input -->
+  <HiddenInput :uploaded-image-location="uploadedImageLocation" />
+  <!-- uploaded logo display -->
+  <UploadedLogoDisplay v-if="uploadedImageLocation" :uploaded-image-location="uploadedImageLocation" />
+  <!-- UppyDashboardWrapper (a11y button wrapper) -->
+  <UppyDashboardWrapper :is-wrapper-focusable="isWrapperFocusable">
+    <template #uppy-dashboard>
+      <!-- Uppy Dashboard -->
       <Dashboard :uppy="uppy" :props="{
         note: constraintsMessage,
         proudlyDisplayPoweredByUppy: false,
       }" />
-    </button>
-    <div v-if="size.width && size.height" class="dimensions-display">
-      <span>Current dimensions: {{ size.width }}px &times; {{ size.height }}px</span>
-      <span role="status" aria-live="polite">
-        <span v-if="size.height > maxHeight" class="dimension-warning">
-          (Height exceeds {{ maxHeight }}px limit)
-        </span>
-      </span>
-    </div>
-    <div role="alert">
-      <div v-if="errorMessage" class="control-error help-block" id="logo-upload-error" aria-hidden="true">{{
-        errorMessage }}</div>
-      <span v-if="srOnlyErrorMessage" class="sr-only">{{ srOnlyErrorMessage }}</span>
-    </div>
-  </div>
-  <DebugDisplay v-bind="{
-    endpoint: endpoint,
-    imageLocation: uploadedImageLocation
-  }" />
+    </template>
+  </UppyDashboardWrapper>
+  <StatusDisplay :size="size" :error-message="errorMessage" :sr-only-error-message="srOnlyErrorMessage" />
+  <!-- Status display: dimensions, edit error message, upload error message -->
 </template>
 
 <style scoped lang="less">
-.uppy-dashboard-wrapper {
-  width: 100%;
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  border-radius: 4px;
-  border: 1px solid transparent;
-  cursor: default;
-}
-
-.uppy-dashboard-wrapper:focus {
-  outline: none;
-}
-
-.uppy-dashboard-wrapper:focus-visible {
-  outline: 1px solid #08893e;
-  border: 1px solid #06b34d;
-  box-shadow: inset 0 1px 1px rgba(8, 137, 62, 0.075), 0 0 6px rgba(6, 179, 77, 0.5);
-  border-radius: 4px;
-}
-
-.thumbnail-container {
-  .control-label {
-    font-weight: normal;
-    font-size: 13px;
-    color: #656565;
-    margin-bottom: 10px;  }
-}
-
-/* uppy styles overrides */
 :deep(.uppy-Dashboard-inner) {
   .uppy-Dashboard-browse {
     /* duplicating less variable here, would be better to reuse already defined color from variables.less */
@@ -349,27 +263,4 @@ function triggerUppyButton() {
     padding-top: 0;
   }
 }
-
-.dimensions-display {
-  margin-top: 12px;
-  font-size: 0.875rem;
-  color: #4a5568;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: #f7fafc;
-  border-radius: 6px;
-}
-
-.dimension-warning {
-  color: #e53e3e;
-  font-weight: 500;
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 8px;
-  background: #fff5f5;
-  border-radius: 4px;
-  border: 1px solid #feb2b2;
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/vite/src/components/StatusDisplay.vue b/vite/src/components/StatusDisplay.vue
new file mode 100644
index 0000000000..c7da41590e
--- /dev/null
+++ b/vite/src/components/StatusDisplay.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { config } from '../config';
+
+const { maxHeight } = config;
+
+const props = defineProps<{
+  size: { width: number; height: number };
+  errorMessage: string | null;
+  srOnlyErrorMessage: string | null;
+}>();
+
+</script>
+
+<template>
+  <div v-if="props.size.width && props.size.height" class="status-display">
+    <span>Current dimensions: {{ props.size.width }}px &times; {{ props.size.height }}px</span>
+    <span role="status" aria-live="polite">
+      <span v-if="props.size.height > maxHeight" class="status-error">
+         Height exceeds {{ maxHeight }}px limit
+      </span>
+    </span>
+  </div>
+  <div role="alert">
+    <div v-if="props.errorMessage" class="control-error help-block" id="logo-upload-error" aria-hidden="true">{{
+      props.errorMessage }}</div>
+    <span v-if="props.srOnlyErrorMessage" class="sr-only">{{ props.srOnlyErrorMessage }}</span>
+  </div>
+</template>
+
+<style scoped lang="less">
+.status-display {
+  margin-top: 12px;
+  font-size: 0.875rem;
+  color: #4a5568;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #f7fafc;
+  border-radius: 6px;
+}
+
+.status-error {
+  color: #e53e3e;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  background: #fff5f5;
+  border-radius: 4px;
+  border: 1px solid #feb2b2;
+}
+</style>
\ No newline at end of file
diff --git a/vite/src/components/UploadedLogoDisplay.vue b/vite/src/components/UploadedLogoDisplay.vue
new file mode 100644
index 0000000000..807c6e367d
--- /dev/null
+++ b/vite/src/components/UploadedLogoDisplay.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps<{
+  uploadedImageLocation: string;
+}>();
+</script>
+
+<template>
+  <div class="form-group thumbnail-container">
+    <div class="control-label">Uploaded Logo</div>
+    <img :src="props.uploadedImageLocation" alt="Logo" />
+  </div>
+</template>
+
+<style scoped lang="less">
+.thumbnail-container {
+  .control-label {
+    font-weight: normal;
+    font-size: 13px;
+    color: #656565;
+    margin-bottom: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/vite/src/components/UppyDashboardWrapper.vue b/vite/src/components/UppyDashboardWrapper.vue
new file mode 100644
index 0000000000..1bed352bf3
--- /dev/null
+++ b/vite/src/components/UppyDashboardWrapper.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { config } from '../config';
+
+const { maxHeight, maxSizeMb } = config;
+
+const props = defineProps<{
+  isWrapperFocusable: boolean;
+}>();
+
+const srOnlyConstraintsMessage = `Please upload one image file. Max height ${maxHeight} pixels, max size ${maxSizeMb} megabyte${maxSizeMb === 1 ? '' : 's'}. Press Enter key to browse your local files, or drag and drop an image into this box.`
+
+function triggerUppyButton() {
+  const uppyDashboard = document.querySelector('.uppy-Dashboard-inner');
+  if (uppyDashboard) {
+    const triggerButton = uppyDashboard.querySelector('.uppy-Dashboard-browse') as HTMLButtonElement;
+    triggerButton?.click();
+  }
+}
+</script>
+
+<template>
+  <button :tabindex="props.isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
+  :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
+    <slot name="uppy-dashboard"></slot>
+  </button>
+</template>
+
+<style scoped>
+.uppy-dashboard-wrapper {
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  cursor: default;
+}
+
+.uppy-dashboard-wrapper:focus {
+  outline: none;
+}
+
+.uppy-dashboard-wrapper:focus-visible {
+  outline: 1px solid #08893e;
+  border: 1px solid #06b34d;
+  box-shadow: inset 0 1px 1px rgba(8, 137, 62, 0.075), 0 0 6px rgba(6, 179, 77, 0.5);
+  border-radius: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/vite/src/composables/useLifecycleLogger.ts b/vite/src/composables/useLifecycleLogger.ts
deleted file mode 100644
index e0f458d9cf..0000000000
--- a/vite/src/composables/useLifecycleLogger.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// lifecycleLogger.js
-import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
-
-export function useLifecycleLogger(componentName: string, callback?: () => void) {
-  const runEffects = callback ?? (() => {})
-
-  console.log(`${componentName}: Component created`, runEffects())
-
-  onBeforeMount(() => console.log(`${componentName}: onBeforeMount`, runEffects()))
-  onMounted(() => console.log(`${componentName}: onMounted`, runEffects()))
-  onBeforeUpdate(() => console.log(`${componentName}: onBeforeUpdate`, runEffects()))
-  onUpdated(() => console.log(`${componentName}: onUpdated`, runEffects()))
-  onBeforeUnmount(() => console.log(`${componentName}: onBeforeUnmount`, runEffects()))
-  onUnmounted(() => console.log(`${componentName}: onUnmounted`, runEffects()))
-}
diff --git a/vite/src/config.ts b/vite/src/config.ts
new file mode 100644
index 0000000000..723daea9e2
--- /dev/null
+++ b/vite/src/config.ts
@@ -0,0 +1,9 @@
+const maxHeight = 60;
+const maxSize = 1000000;
+const maxSizeMb = maxSize / 1e6;
+
+export const config = {
+  maxHeight,
+  maxSize,
+  maxSizeMb
+}
diff --git a/vite/src/utils/getUppyImgDimensions.ts b/vite/src/utils/getUppyImgDimensions.ts
new file mode 100644
index 0000000000..5001a9d3db
--- /dev/null
+++ b/vite/src/utils/getUppyImgDimensions.ts
@@ -0,0 +1,17 @@
+import type { UppyFile, Meta } from '@uppy/core';
+
+export async function getUppyImgDimensions(imgFile: UppyFile<Meta, Record<string, never>>): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(imgFile.data);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(img.src);
+      resolve({ width: img.width, height: img.height });
+    };
+    img.onerror = (error) => {
+      URL.revokeObjectURL(img.src);
+      reject(error);
+    };
+    img.src = url;
+  });
+}
\ No newline at end of file

From 8a338dde0eb04a361c6efdd58a4715bccc3b89df Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Wed, 30 Oct 2024 16:41:50 +0700
Subject: [PATCH 16/41] chore: cleanup logs and accept hidden input name

---
 .../controllers/AdminProjectController.php    | 22 ++++--
 protected/models/Project.php                  | 23 +-----
 protected/views/adminProject/_form.php        | 32 +-------
 vite/src/components/HiddenInput.vue           |  5 +-
 vite/src/components/LogoUploadUppy.vue        | 73 ++++++++-----------
 vite/src/main.ts                              |  3 +-
 6 files changed, 60 insertions(+), 98 deletions(-)

diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index 42eeeb06a1..f92f13f219 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -66,6 +66,12 @@ public function actionCreate()
 		));
 	}
 
+  /**
+   * Make a JSON response with the given code, message, and payload.
+   * @param int $code The HTTP status code.
+   * @param string $message The message to include in the response.
+   * @param array $payload Additional data to include in the response.
+   */
   private function makeResponse($code, $message, $payload = []) {
     $success = $code < 400;
     header('Content-Type: application/json');
@@ -77,9 +83,11 @@ private function makeResponse($code, $message, $payload = []) {
     Yii::app()->end();
   }
 
-  public function actionUploadLogo($existingLogoUrl = null) {
+  /**
+   * Upload a logo image
+   */
+  public function actionUploadLogo() {
     $existingLogoUrl = Yii::app()->request->getQuery('existingLogoUrl');
-    Yii::log("uploadLogo: existingLogoUrl = " . $existingLogoUrl, "info");
     if (!isset($_FILES['logo_image'])) {
       $this->makeResponse(400, 'Invalid request. No file was uploaded.');
     }
@@ -143,20 +151,20 @@ public function actionDelete($id)
 			$model = $this->loadModel($id);
       $logoUrl = $model->image_location;
       $logoPath = str_replace('https://' . Project::BUCKET . '/', '', $logoUrl);
-      Yii::log("delete: $id, logoUrl = $logoUrl", "info");
 
       // I expected YII_ENV_DEV to be true but it's not defined, so using a hardcoded temporary approach for now so app does not crash each time
-      $isLocalDev = true;
-      $hasStorageAccess = false;
-      if ($isLocalDev && !$hasStorageAccess) {
-        Yii::log("actionDelete: Local dev environment, skipping actual  delete", "info");
+      $isTester = true;
+      if ($isTester) {
+        Yii::log("actionDelete: Tester environment, skipping actual delete", "info");
       } else {
         if (Yii::$app->cloudStore->delete($logoPath)) {
           Yii::log("actionDelete: Deleted logo image" . $logoPath . " for project ". $id, "info");
         }  else {
+          // fail silently
           Yii::log("actionDelete: Failed to delete logo image" . $logoPath . " for project ". $id, "error");
         }
       }
+
       $model->delete();
 
 			// if AJAX request (triggered by deletion via admin grid view), we should not redirect the browser
diff --git a/protected/models/Project.php b/protected/models/Project.php
index 99fc6c3f80..5d658807a1 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -149,27 +149,17 @@ function check_duplicate(){
    */
   public static function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedLogo, $existingLogoUrl = null)
   {
-      Yii::log("writeLogo: Starting to process the uploaded file", "info");
-
       $slugger = new \Symfony\Component\String\Slugger\AsciiSlugger();
       $info = pathinfo($uploadedLogo->getName());
       $fileName = $slugger->slug($info['filename'])->toString();
-
-      Yii::log("writeLogo: Generated file name - " . $fileName, "info");
       $uuid = Uuid::uuid4()->toString();
-
-      Yii::log("writeLogo: Generated UUID - " . $uuid, "info");
-
       $imagePath = sprintf("%s/images/projects/%s/%s.%s", Yii::$app->params['environment'], $uuid, $fileName, $info['extension'] );
-
-      Yii::log("writeLogo: Generated image path - " . $imagePath, "info");
       $image_location = sprintf("https://%s/%s", self::BUCKET, $imagePath);
 
       // I expected YII_ENV_DEV to be true but it's not defined, so using a hardcoded temporary approach for now so app does not crash each time
-      $isLocalDev = true;
-      $hasStorageAccess = false;
-      if ($isLocalDev && !$hasStorageAccess) {
-          Yii::log("writeLogo: Local dev environment, skipping actual storage", "info");
+      $isTester = true;
+      if ($isTester) {
+          Yii::log("writeLogo: Tester environment, skipping actual storage", "info");
 
           if ($existingLogoUrl !== null) {
             $existingLogoPath = str_replace('https://' . self::BUCKET . '/', '', $existingLogoUrl);
@@ -185,22 +175,17 @@ public static function writeLogo(Filesystem $targetStorage, CUploadedFile $uploa
       )) {
           if ($existingLogoUrl !== null) {
             $existingLogoPath = str_replace('https://' . self::BUCKET . '/', '', $existingLogoUrl);
-            Yii::log("writeLogo: Deleting existing logo image with path " . $existingLogoPath, "info");
-
             if ($targetStorage->delete($existingLogoPath)) {
               Yii::log("writeLogo: Deleted existing logo image" . $existingLogoPath, "info");
             }  else {
+              // fail silently
               Yii::log("writeLogo: Failed to delete existing logo image" . $existingLogoUrl, "error");
             }
           }
 
-          Yii::log("writeLogo: Image successfully written to storage", "info");
-
           return $image_location;
       }
 
-      Yii::log("writeLogo: Error attempting to write image to the storage","error");
-
       return false;
   }
 
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index 0af4e4cd3a..0e2098987e 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -33,23 +33,12 @@
 				'maxlength' => 255
 			]
 		]);
-    // TODO field replaced by vue widget, should remove / replace by thumbnail
-		// $this->widget('application.components.controls.TextField', [
-		// 	'form' => $form,
-		// 	'model' => $model,
-		// 	'attributeName' => 'image_location',
-		// 	'inputOptions' => [
-		// 		'maxlength' => 100,
-    //     'readonly' => true
-		// 	]
-		// ]);
 
-    // current image location in case user uploaded one already
-    $imageLocation = $model->image_location ?: null;
-    $endpoint = Yii::app()->createUrl('/adminProject/uploadLogo');
+    $existingImageLocation = $model->image_location ?: null;
+    $uploadLogoEndpoint = Yii::app()->createUrl('/adminProject/uploadLogo');
 		?>
 
-    <div id="vue-client_project-image-logo" data-image-location="<?php echo $imageLocation; ?>" data-endpoint="<?php echo $endpoint; ?>">
+    <div id="vue-client_project-image-logo" data-image-location="<?php echo $existingImageLocation; ?>" data-endpoint="<?php echo $uploadLogoEndpoint; ?>" data-hidden-input-name="Project[image_location]">
       <div class="spinner"></div>
     </div>
     <div>
@@ -65,17 +54,4 @@
 		<?php $this->endWidget(); ?>
 	</div>
 
-</div>
-
-<script>
-  // TODO should this be removed? probably NOT because that way the Vue widget is more reusable (i.e. if we keep hidden input in the php view)
-document.addEventListener('logo-uploaded', function(e) {
-    // handle successfully uploaded logo image from uppy
-    const imageLocation = e.detail.imageLocation;
-
-    const imageLocationInput = document.querySelector('input[name="Project[image_location]"]');
-    if (imageLocationInput instanceof HTMLInputElement) {
-      imageLocationInput.value = imageLocation;
-    }
-});
-</script>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/vite/src/components/HiddenInput.vue b/vite/src/components/HiddenInput.vue
index e9c3a607f1..4efa14e523 100644
--- a/vite/src/components/HiddenInput.vue
+++ b/vite/src/components/HiddenInput.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 const props = defineProps<{
   uploadedImageLocation: string | null;
+  name: string;
 }>();
 </script>
 
 <template>
-  <input type="hidden" name="Project[image_location]" :value="props.uploadedImageLocation" />
-</template>
\ No newline at end of file
+  <input type="hidden" :name="props.name" :value="props.uploadedImageLocation" />
+</template>
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index 4218c6bbd5..eed1c86091 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -24,6 +24,7 @@ const { maxHeight, maxSize, maxSizeMb } = config;
 const props = defineProps<{
   endpoint: string;
   imageLocation: string | null;
+  hiddenInputName?: string;
 }>();
 
 const constraintsMessage = `Please upload one image file (max height ${maxHeight}px, max size ${maxSizeMb} MB)`
@@ -41,7 +42,6 @@ const endpoint = computed(() => {
   return `${props.endpoint}${uploadedImageLocation.value ? `?existingLogoUrl=${uploadedImageLocation.value}` : ''}`;
 })
 
-// initialize uppy here to avoid complexity
 const uppy = new Uppy({
   autoProceed: false,
   debug: true,
@@ -85,8 +85,7 @@ uppy.use(XHR, {
   withCredentials: true
 });
 
-// file events
-
+// uppy file events
 uppy.on('file-added', async (file: UppyFile<Meta, Record<string, never>>) => {
   isWrapperFocusable.value = false;
   errorMessage.value = null;
@@ -111,23 +110,15 @@ uppy.on('file-removed', () => {
   isWrapperFocusable.value = true;
 });
 
+// uppy upload events
 uppy.on('upload-success', (file, response) => {
-  console.log('Upload successful', response.body);
-
   if (response.body?.success) {
     const { image_location } = response.body;
-    // allows to communicate with parent PHP view
-    const customEvent = new CustomEvent('logo-uploaded', {
-      detail: {
-        imageLocation: image_location
-      },
-      bubbles: true
-    });
-    document.dispatchEvent(customEvent);
     uploadedImageLocation.value = image_location;
   }
 });
 
+// parse response from upload server endpoint
 uppy.on('upload-error', (file, error, response) => {
   if (typeof response === 'string') {
     try {
@@ -145,7 +136,7 @@ uppy.on('upload-start', () => {
   errorMessage.value = '';
 });
 
-// file-editor events
+// file-editor plugin events
 
 uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never>>) => {
   try {
@@ -165,14 +156,10 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
 </script>
 
 <template>
-  <!-- hidden input -->
-  <HiddenInput :uploaded-image-location="uploadedImageLocation" />
-  <!-- uploaded logo display -->
+  <HiddenInput v-if="hiddenInputName" :uploaded-image-location="uploadedImageLocation" :name="hiddenInputName" />
   <UploadedLogoDisplay v-if="uploadedImageLocation" :uploaded-image-location="uploadedImageLocation" />
-  <!-- UppyDashboardWrapper (a11y button wrapper) -->
   <UppyDashboardWrapper :is-wrapper-focusable="isWrapperFocusable">
     <template #uppy-dashboard>
-      <!-- Uppy Dashboard -->
       <Dashboard :uppy="uppy" :props="{
         note: constraintsMessage,
         proudlyDisplayPoweredByUppy: false,
@@ -180,18 +167,22 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
     </template>
   </UppyDashboardWrapper>
   <StatusDisplay :size="size" :error-message="errorMessage" :sr-only-error-message="srOnlyErrorMessage" />
-  <!-- Status display: dimensions, edit error message, upload error message -->
 </template>
 
 <style scoped lang="less">
+/* duplicating less variable here, would be better to reuse already defined color from variables.less */
+@color-gigadb-green: #08893e;
+@color-true-white: #ffffff;
+@color-gigadb-green-800: #0d6e36;
+
+// uppy dashboard overrides to match the site theme
 :deep(.uppy-Dashboard-inner) {
   .uppy-Dashboard-browse {
-    /* duplicating less variable here, would be better to reuse already defined color from variables.less */
-    color: #08893e;
+    color: @color-gigadb-green;
 
     &:focus,
     &:hover {
-      border-bottom-color: #08893e;
+      border-bottom-color: @color-gigadb-green;
     }
   }
 
@@ -200,42 +191,42 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
   }
 
   .uppy-DashboardContent-back {
-    color: #08893e;
+    color: @color-gigadb-green;
     background: transparent;
-    border: 1px #08893e solid;
+    border: 1px @color-gigadb-green solid;
 
     &:focus {
-      outline: solid 2px #08893e;
+      outline: solid 2px @color-gigadb-green;
       outline-offset: 2px;
     }
 
     &:hover {
-      color: #fff;
-      background: #08893e;
+      color: @color-true-white;
+      background: @color-gigadb-green;
     }
   }
 
   .uppy-DashboardContent-save {
-    color: #08893e;
+    color: @color-gigadb-green;
 
     &:focus {
-      background: #08893e;
-      color: #fff;
+      background: @color-gigadb-green;
+      color: @color-true-white;
     }
 
     &:hover {
-      background: #08893e;
-      color: #fff;
+      background: @color-gigadb-green;
+      color: @color-true-white;
     }
   }
 
   .uppy-Dashboard-Item-action {
     &:hover {
-      color: #08893e;
+      color: @color-gigadb-green;
     }
 
     &:focus {
-      outline: solid 2px #08893e;
+      outline: solid 2px @color-gigadb-green;
       outline-offset: 2px;
       border: none;
       box-shadow: none;
@@ -243,17 +234,17 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
   }
 
   .uppy-StatusBar-actionBtn {
-    color: #fff;
-    background: #08893e;
-    border: 1px #08893e solid;
+    color: @color-true-white;
+    background: @color-gigadb-green;
+    border: 1px @color-gigadb-green solid;
 
     &:hover {
-      background: #0d6e36;
+      background: @color-gigadb-green-800;
     }
 
     &:focus {
-      color: #fff;
-      outline: solid 2px #08893e;
+      color: @color-true-white;
+      outline: solid 2px @color-gigadb-green;
       outline-offset: 2px;
       box-shadow: none;
     }
diff --git a/vite/src/main.ts b/vite/src/main.ts
index 6de66dca81..e3748c7e85 100644
--- a/vite/src/main.ts
+++ b/vite/src/main.ts
@@ -6,7 +6,8 @@ const entryEl = document.querySelector(elId)
 if (entryEl && entryEl instanceof HTMLElement) {
   const app = createApp(LogoUploadUppy, {
     endpoint: entryEl.dataset.endpoint,
-    imageLocation: entryEl.dataset.imageLocation
+    imageLocation: entryEl.dataset.imageLocation,
+    hiddenInputName: entryEl.dataset.hiddenInputName
   })
   app.mount(elId)
 }

From f10940d343081c899be914e420c071ad3e24a572 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Wed, 30 Oct 2024 17:56:32 +0700
Subject: [PATCH 17/41] feat: tweak image editor flow and improve a11y

---
 ...Display.vue => DashboardStatusDisplay.vue} |  16 +--
 .../components/ImageEditorStatusDisplay.vue   |  54 ++++++++
 vite/src/components/LogoUploadUppy.vue        | 119 +++++++++++++-----
 vite/src/components/UploadedLogoDisplay.vue   |   3 +-
 vite/src/components/UppyDashboardWrapper.vue  |  54 --------
 5 files changed, 144 insertions(+), 102 deletions(-)
 rename vite/src/components/{StatusDisplay.vue => DashboardStatusDisplay.vue} (56%)
 create mode 100644 vite/src/components/ImageEditorStatusDisplay.vue
 delete mode 100644 vite/src/components/UppyDashboardWrapper.vue

diff --git a/vite/src/components/StatusDisplay.vue b/vite/src/components/DashboardStatusDisplay.vue
similarity index 56%
rename from vite/src/components/StatusDisplay.vue
rename to vite/src/components/DashboardStatusDisplay.vue
index c7da41590e..d7852bd001 100644
--- a/vite/src/components/StatusDisplay.vue
+++ b/vite/src/components/DashboardStatusDisplay.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { config } from '../config';
 
-const { maxHeight } = config;
-
 const props = defineProps<{
-  size: { width: number; height: number };
   errorMessage: string | null;
   srOnlyErrorMessage: string | null;
 }>();
@@ -12,17 +10,9 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div v-if="props.size.width && props.size.height" class="status-display">
-    <span>Current dimensions: {{ props.size.width }}px &times; {{ props.size.height }}px</span>
-    <span role="status" aria-live="polite">
-      <span v-if="props.size.height > maxHeight" class="status-error">
-         Height exceeds {{ maxHeight }}px limit
-      </span>
-    </span>
-  </div>
+  <div v-if="props.errorMessage" class="control-error help-block" id="logo-upload-error" aria-hidden="true">{{
+    props.errorMessage }}</div>
   <div role="alert">
-    <div v-if="props.errorMessage" class="control-error help-block" id="logo-upload-error" aria-hidden="true">{{
-      props.errorMessage }}</div>
     <span v-if="props.srOnlyErrorMessage" class="sr-only">{{ props.srOnlyErrorMessage }}</span>
   </div>
 </template>
diff --git a/vite/src/components/ImageEditorStatusDisplay.vue b/vite/src/components/ImageEditorStatusDisplay.vue
new file mode 100644
index 0000000000..872b5d07e6
--- /dev/null
+++ b/vite/src/components/ImageEditorStatusDisplay.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { config } from '../config';
+
+const { maxHeight } = config;
+
+const props = defineProps<{
+  size: { width: number; height: number };
+}>();
+
+const errorMessage = computed(() => props.size.height > maxHeight ? `Height exceeds ${maxHeight}px limit` : null)
+const srOnlyErrorMessage = computed(() => props.size.height > maxHeight ? `Image height exceeds ${maxHeight} pixels. Please crop further.` : null)
+const srOnlySuccessMessage = computed(() => props.size.height <= maxHeight ? `Image height is valid` : null)
+
+</script>
+
+<template>
+  <div v-if="props.size.width && props.size.height" class="status-display">
+    <span>Current dimensions: {{ props.size.width }}px &times; {{ props.size.height }}px</span>
+    <span v-if="errorMessage" class="status-error" aria-hidden="true">
+      {{ errorMessage }}
+    </span>
+    <span role="status" aria-live="polite">
+      <span v-if="srOnlyErrorMessage" class="sr-only">{{ srOnlyErrorMessage }}</span>
+      <span v-if="srOnlySuccessMessage" class="sr-only">{{ srOnlySuccessMessage }}</span>
+    </span>
+  </div>
+</template>
+
+<style scoped lang="less">
+.status-display {
+  height: 40px;
+  margin-top: 12px;
+  font-size: 0.875rem;
+  color: #4a5568;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #f7fafc;
+  border-radius: 6px;
+}
+
+.status-error {
+  color: #a50f0f;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  background: #fff5f5;
+  border-radius: 4px;
+  border: 1px solid #feb2b2;
+}
+</style>
\ No newline at end of file
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index eed1c86091..9485d1ebfc 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+
 import Uppy from '@uppy/core';
 import type { UppyFile, Meta } from '@uppy/core';
+
 import ImageEditor from '@uppy/image-editor';
 import XHR from '@uppy/xhr-upload';
 import DashboardPlugin from "@uppy/dashboard"
-import {
-  Dashboard
-} from '@uppy/vue';
-import { computed, reactive, ref } from 'vue';
+import { Dashboard } from '@uppy/vue';
+
 import HiddenInput from './HiddenInput.vue';
+import DashboardStatusDisplay from './DashboardStatusDisplay.vue';
+import ImageEditorStatusDisplay from './ImageEditorStatusDisplay.vue';
 import UploadedLogoDisplay from './UploadedLogoDisplay.vue';
-import UppyDashboardWrapper from './UppyDashboardWrapper.vue';
+
 import { config } from '../config';
 import { getUppyImgDimensions } from '../utils/getUppyImgDimensions';
-import StatusDisplay from './StatusDisplay.vue';
 
 import '@uppy/core/dist/style.css';
 import '@uppy/dashboard/dist/style.css';
@@ -28,8 +30,18 @@ const props = defineProps<{
 }>();
 
 const constraintsMessage = `Please upload one image file (max height ${maxHeight}px, max size ${maxSizeMb} MB)`
+const srOnlyConstraintsMessage = `Please upload one image file. Maximum height ${maxHeight} pixels, maximum size ${maxSizeMb} megabyte${maxSizeMb === 1 ? '' : 's'}. Press Enter key to browse your local files, or drag and drop an image into this box.`
+
+function triggerUppyButton() {
+  const uppyDashboard = document.querySelector('.uppy-Dashboard-inner');
+  if (uppyDashboard) {
+    const triggerButton = uppyDashboard.querySelector('.uppy-Dashboard-browse') as HTMLButtonElement;
+    triggerButton?.click();
+  }
+}
 
 const isWrapperFocusable = ref(true);
+const isEditing = ref(false);
 const uploadedImageLocation = ref<string | null>(props.imageLocation);
 const errorMessage = ref<string | null>(null);
 const srOnlyErrorMessage = ref<string | null>(null);
@@ -85,22 +97,33 @@ uppy.use(XHR, {
   withCredentials: true
 });
 
+function openFileEditor(file: UppyFile<Meta, Record<string, never>>) {
+  const dashboard = uppy.getPlugin('Dashboard') as DashboardPlugin<Meta, Record<string, never>>;
+  if (dashboard) {
+    dashboard.openFileEditor(file);
+  }
+}
+
+async function handleImageHeightMsgs(file: UppyFile<Meta, Record<string, never>>, cbTooTall?: () => void) {
+  const { height } = await getUppyImgDimensions(file);
+  if (height > maxHeight) {
+    errorMessage.value = `Image height (${height}px) exceeds ${maxHeight}px - please crop the image using the editor`;
+    srOnlyErrorMessage.value = `Image height of ${height} pixels exceeds maximum of ${maxHeight} pixels. Please crop the image using the editor.`;
+    cbTooTall?.();
+  } else {
+    errorMessage.value = null;
+    srOnlyErrorMessage.value = null;
+  }
+}
+
 // uppy file events
 uppy.on('file-added', async (file: UppyFile<Meta, Record<string, never>>) => {
   isWrapperFocusable.value = false;
   errorMessage.value = null;
 
   try {
-    const { height } = await getUppyImgDimensions(file);
-    if (height > maxHeight) {
-      errorMessage.value = `Image height (${height}px) exceeds ${maxHeight}px - please crop the image using the editor`;
-      srOnlyErrorMessage.value = `Image height of ${height} pixels exceeds maximum of ${maxHeight} pixels. Please use the editor to resize.`;
-      // Auto-open editor when height exceeds limit
-      const dashboard = uppy.getPlugin('Dashboard') as DashboardPlugin<Meta, Record<string, never>>;
-      if (dashboard) {
-        dashboard.openFileEditor(file);
-      }
-    }
+    // NOTE when image is added, if it's too tall, open editor automatically. In this instance, it makes sense
+    await handleImageHeightMsgs(file, () => openFileEditor(file));
   } catch (error) {
     errorMessage.value = 'Error getting image dimensions';
   }
@@ -137,19 +160,21 @@ uppy.on('upload-start', () => {
 });
 
 // file-editor plugin events
+uppy.on('file-editor:start', () => {
+  isEditing.value = true;
+});
+uppy.on('file-editor:cancel', async (file: UppyFile<Meta, Record<string, never>>) => {
+  isEditing.value = false;
+});
 
 uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never>>) => {
   try {
-    const { height } = await getUppyImgDimensions(file);
-    if (height > maxHeight) {
-      errorMessage.value = `Image still exceeds ${maxHeight}px height - please crop further`;
-      srOnlyErrorMessage.value = `Image height still exceeds ${maxHeight} pixels. Please crop further.`;
-    } else {
-      errorMessage.value = null;
-      srOnlyErrorMessage.value = null;
-    }
+    // NOTE not forcefully opening the editor again here either, because user might decide to click "save" with the idea to switch image
+    await handleImageHeightMsgs(file);
   } catch (error) {
     errorMessage.value = 'Error verifying image dimensions';
+  } finally {
+    isEditing.value = false;
   }
 });
 
@@ -158,22 +183,48 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
 <template>
   <HiddenInput v-if="hiddenInputName" :uploaded-image-location="uploadedImageLocation" :name="hiddenInputName" />
   <UploadedLogoDisplay v-if="uploadedImageLocation" :uploaded-image-location="uploadedImageLocation" />
-  <UppyDashboardWrapper :is-wrapper-focusable="isWrapperFocusable">
-    <template #uppy-dashboard>
-      <Dashboard :uppy="uppy" :props="{
-        note: constraintsMessage,
-        proudlyDisplayPoweredByUppy: false,
-      }" />
-    </template>
-  </UppyDashboardWrapper>
-  <StatusDisplay :size="size" :error-message="errorMessage" :sr-only-error-message="srOnlyErrorMessage" />
+  <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
+    :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
+    <Dashboard :uppy="uppy" :props="{
+      note: constraintsMessage,
+      proudlyDisplayPoweredByUppy: false,
+    }" />
+  </button>
+  <ImageEditorStatusDisplay v-if="isEditing" :size="size" />
+  <DashboardStatusDisplay :size="size" :error-message="errorMessage" :sr-only-error-message="srOnlyErrorMessage" />
 </template>
 
 <style scoped lang="less">
 /* duplicating less variable here, would be better to reuse already defined color from variables.less */
 @color-gigadb-green: #08893e;
-@color-true-white: #ffffff;
+@color-gigadb-green-600: #06b34d;
 @color-gigadb-green-800: #0d6e36;
+@color-true-white: #ffffff;
+
+.uppy-dashboard-wrapper {
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  cursor: default;
+}
+
+.uppy-dashboard-wrapper:focus {
+  outline: none;
+}
+
+.uppy-dashboard-wrapper:focus-visible {
+  outline: 1px solid @color-gigadb-green;
+  border: 1px solid @color-gigadb-green-600;
+  box-shadow: inset 0 1px 1px rgba(8, 137, 62, 0.075), 0 0 6px rgba(6, 179, 77, 0.5);
+  border-radius: 4px;
+}
 
 // uppy dashboard overrides to match the site theme
 :deep(.uppy-Dashboard-inner) {
diff --git a/vite/src/components/UploadedLogoDisplay.vue b/vite/src/components/UploadedLogoDisplay.vue
index 807c6e367d..32a0ec775a 100644
--- a/vite/src/components/UploadedLogoDisplay.vue
+++ b/vite/src/components/UploadedLogoDisplay.vue
@@ -12,11 +12,12 @@ const props = defineProps<{
 </template>
 
 <style scoped lang="less">
+@color-darker-gray: #656565;
 .thumbnail-container {
   .control-label {
     font-weight: normal;
     font-size: 13px;
-    color: #656565;
+    color: @color-darker-gray;
     margin-bottom: 10px;
   }
 }
diff --git a/vite/src/components/UppyDashboardWrapper.vue b/vite/src/components/UppyDashboardWrapper.vue
deleted file mode 100644
index 1bed352bf3..0000000000
--- a/vite/src/components/UppyDashboardWrapper.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { config } from '../config';
-
-const { maxHeight, maxSizeMb } = config;
-
-const props = defineProps<{
-  isWrapperFocusable: boolean;
-}>();
-
-const srOnlyConstraintsMessage = `Please upload one image file. Max height ${maxHeight} pixels, max size ${maxSizeMb} megabyte${maxSizeMb === 1 ? '' : 's'}. Press Enter key to browse your local files, or drag and drop an image into this box.`
-
-function triggerUppyButton() {
-  const uppyDashboard = document.querySelector('.uppy-Dashboard-inner');
-  if (uppyDashboard) {
-    const triggerButton = uppyDashboard.querySelector('.uppy-Dashboard-browse') as HTMLButtonElement;
-    triggerButton?.click();
-  }
-}
-</script>
-
-<template>
-  <button :tabindex="props.isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
-  :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
-    <slot name="uppy-dashboard"></slot>
-  </button>
-</template>
-
-<style scoped>
-.uppy-dashboard-wrapper {
-  width: 100%;
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  border-radius: 4px;
-  border: 1px solid transparent;
-  cursor: default;
-}
-
-.uppy-dashboard-wrapper:focus {
-  outline: none;
-}
-
-.uppy-dashboard-wrapper:focus-visible {
-  outline: 1px solid #08893e;
-  border: 1px solid #06b34d;
-  box-shadow: inset 0 1px 1px rgba(8, 137, 62, 0.075), 0 0 6px rgba(6, 179, 77, 0.5);
-  border-radius: 4px;
-}
-</style>
\ No newline at end of file

From f3a29308efbf8888b9fc2919ef6e7cc694506d4a Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Thu, 31 Oct 2024 16:44:21 +0700
Subject: [PATCH 18/41] feat: save logo in temp storage

---
 .gitignore                                    |  1 +
 .../controllers/AdminProjectController.php    | 34 ++++++----
 protected/models/Project.php                  | 67 +++++++++++--------
 vite/src/components/LogoUploadUppy.vue        |  2 +-
 vite/src/components/UploadedLogoDisplay.vue   |  5 +-
 5 files changed, 65 insertions(+), 44 deletions(-)

diff --git a/.gitignore b/.gitignore
index 83b410cdc0..2380572c2e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,6 +28,7 @@ files/certs
 files/data/filetypes.json
 images/tempcaptcha/
 images/vue
+files/dev
 
 # nginx config created by generate_config.sh
 ops/configuration/nginx-conf/sites/staging/gigadb.staging.http.conf
diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index f92f13f219..3ff25a6217 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -1,5 +1,7 @@
 <?php
 
+use Ramsey\Uuid\Uuid;
+
 class AdminProjectController extends Controller
 {
 
@@ -57,6 +59,8 @@ public function actionCreate()
 		if(isset($_POST['Project']))
 		{
 			$model->attributes=$_POST['Project'];
+      // save logo in permanent storage
+      $model->writeLogo(Yii::$app->cloudStore, Yii::$app->params['environment'] . '/' . 'images/projects/' . $model->getUuid(), $model->logo_image);
 			if($model->save())
 				$this->redirect(array('view','id'=>$model->id));
 		}
@@ -87,7 +91,7 @@ private function makeResponse($code, $message, $payload = []) {
    * Upload a logo image
    */
   public function actionUploadLogo() {
-    $existingLogoUrl = Yii::app()->request->getQuery('existingLogoUrl');
+    // $existingLogoUrl = Yii::app()->request->getQuery('existingLogoUrl');
     if (!isset($_FILES['logo_image'])) {
       $this->makeResponse(400, 'Invalid request. No file was uploaded.');
     }
@@ -100,7 +104,10 @@ public function actionUploadLogo() {
       $this->makeResponse(400, $message);
     }
 
-    $image_location = Project::writeLogo(Yii::$app->cloudStore, $uploadedLogo, $existingLogoUrl);
+    $random_uuid = Uuid::uuid4()->toString();
+    $temp_logo_dir = Yii::$app->params['environment'] . '/images/projects/temp/' . $random_uuid;
+    $image_location = Project::writeLogo(Yii::$app->cloudStore, $temp_logo_dir, $uploadedLogo);
+    // no need to delete logs from temp directory, that can be done with cron job
 
     if (!$image_location) {
       $message = 'Failed to save your logo image';
@@ -145,24 +152,25 @@ public function actionUpdate($id)
 	public function actionDelete($id)
 	{
     Yii::log("delete: $id");
+    $storageBasePath = ''; // 'https://' . self::BUCKET
 		if(Yii::app()->request->isPostRequest)
 		{
 			// we only allow deletion via POST request
 			$model = $this->loadModel($id);
       $logoUrl = $model->image_location;
-      $logoPath = str_replace('https://' . Project::BUCKET . '/', '', $logoUrl);
+      $logoPath = str_replace($storageBasePath . '/', '', $logoUrl);
 
       // I expected YII_ENV_DEV to be true but it's not defined, so using a hardcoded temporary approach for now so app does not crash each time
-      $isTester = true;
-      if ($isTester) {
-        Yii::log("actionDelete: Tester environment, skipping actual delete", "info");
-      } else {
-        if (Yii::$app->cloudStore->delete($logoPath)) {
-          Yii::log("actionDelete: Deleted logo image" . $logoPath . " for project ". $id, "info");
-        }  else {
-          // fail silently
-          Yii::log("actionDelete: Failed to delete logo image" . $logoPath . " for project ". $id, "error");
-        }
+      // $isTester = false;
+      // if ($isTester) {
+      //   Yii::log("actionDelete: Tester environment, skipping actual delete", "info");
+      // } else {
+      // }
+      if (Yii::$app->cloudStore->delete($logoPath)) {
+        Yii::log("actionDelete: Deleted logo image" . $logoPath . " for project ". $id, "info");
+      }  else {
+        // fail silently
+        Yii::log("actionDelete: Failed to delete logo image" . $logoPath . " for project ". $id, "error");
       }
 
       $model->delete();
diff --git a/protected/models/Project.php b/protected/models/Project.php
index 5d658807a1..64d6ecd128 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -143,49 +143,60 @@ function check_duplicate(){
    * write a logo image to the desired (Flysystem managed) storage mechanism and update url property with the location
    *
    * @param Filesystem $targetStorage
+   * @param string $enclosingDirectory
    * @param CUploadedFile $uploadedLogo
-   * @param string|null $existingLogoUrl
    * @return bool|string
    */
-  public static function writeLogo(Filesystem $targetStorage, CUploadedFile $uploadedLogo, $existingLogoUrl = null)
+  public static function writeLogo(Filesystem $targetStorage, string $enclosingDirectory, CUploadedFile $uploadedLogo)
   {
+      // TODO change this before PR
+      $storageBasePath = Yii::getAlias('@web') . '/files'; // 'https://' . self::BUCKET
+
       $slugger = new \Symfony\Component\String\Slugger\AsciiSlugger();
       $info = pathinfo($uploadedLogo->getName());
+
       $fileName = $slugger->slug($info['filename'])->toString();
-      $uuid = Uuid::uuid4()->toString();
-      $imagePath = sprintf("%s/images/projects/%s/%s.%s", Yii::$app->params['environment'], $uuid, $fileName, $info['extension'] );
-      $image_location = sprintf("https://%s/%s", self::BUCKET, $imagePath);
 
-      // I expected YII_ENV_DEV to be true but it's not defined, so using a hardcoded temporary approach for now so app does not crash each time
-      $isTester = true;
-      if ($isTester) {
-          Yii::log("writeLogo: Tester environment, skipping actual storage", "info");
+      $logoPath = sprintf("%s/%s.%s", $enclosingDirectory, $fileName, $info['extension'] );
 
-          if ($existingLogoUrl !== null) {
-            $existingLogoPath = str_replace('https://' . self::BUCKET . '/', '', $existingLogoUrl);
-            Yii::log("writeLogo: Mocking deleting existing logo image with path " . $existingLogoPath, "info");
-          }
-
-          return $image_location;
-      }
+      $logoUrl = sprintf("%s/%s", $storageBasePath, $logoPath);
 
       if ($targetStorage->put(
-          $imagePath, file_get_contents($uploadedLogo->getTempName()),
+          $logoPath, file_get_contents($uploadedLogo->getTempName()),
           ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
       )) {
-          if ($existingLogoUrl !== null) {
-            $existingLogoPath = str_replace('https://' . self::BUCKET . '/', '', $existingLogoUrl);
-            if ($targetStorage->delete($existingLogoPath)) {
-              Yii::log("writeLogo: Deleted existing logo image" . $existingLogoPath, "info");
-            }  else {
-              // fail silently
-              Yii::log("writeLogo: Failed to delete existing logo image" . $existingLogoUrl, "error");
-            }
-          }
-
-          return $image_location;
+          return $logoUrl;
+      }
+
+      return false;
+  }
+
+  /**
+   * Delete an existing logo from storage
+   *
+   * @param Filesystem $targetStorage
+   * @return bool
+   */
+  public function deleteLogo(Filesystem $targetStorage): bool
+  {
+        // TODO change this before PR
+      $storageBasePath = Yii::getAlias('@web') . '/files'; // 'https://' . self::BUCKET
+      Yii::log("deleteLogo: Storage base path is " . $storageBasePath, "info");
+
+      Yii::log("deleteLogo: No existing logo URL provided, using project UUID", "info");
+      $uuid = $this->getUuid();
+      Yii::log("deleteLogo: Project UUID is " . $uuid, "info");
+      $logoPath = 'images/projects/' . Yii::$app->params['environment'] . '/' . $uuid;
+
+      Yii::log("deleteLogo: Attempting to delete logo directory at " . $logoPath, "info");
+
+      if ($targetStorage->deleteDirectory($logoPath)) {
+          Yii::log("deleteLogo: Successfully deleted logo directory " . $logoPath, "info");
+          return true;
       }
 
+      // fail silently
+      Yii::log("deleteLogo: Failed to delete logo directory " . $logoPath . ". Target storage returned false.", "error");
       return false;
   }
 
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index 9485d1ebfc..467af9c9b6 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -182,7 +182,7 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
 
 <template>
   <HiddenInput v-if="hiddenInputName" :uploaded-image-location="uploadedImageLocation" :name="hiddenInputName" />
-  <UploadedLogoDisplay v-if="uploadedImageLocation" :uploaded-image-location="uploadedImageLocation" />
+  <UploadedLogoDisplay :uploaded-image-location="uploadedImageLocation" />
   <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
     :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
     <Dashboard :uppy="uppy" :props="{
diff --git a/vite/src/components/UploadedLogoDisplay.vue b/vite/src/components/UploadedLogoDisplay.vue
index 32a0ec775a..c92a1677f3 100644
--- a/vite/src/components/UploadedLogoDisplay.vue
+++ b/vite/src/components/UploadedLogoDisplay.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 const props = defineProps<{
-  uploadedImageLocation: string;
+  uploadedImageLocation?: string | null;
 }>();
 </script>
 
 <template>
   <div class="form-group thumbnail-container">
     <div class="control-label">Uploaded Logo</div>
-    <img :src="props.uploadedImageLocation" alt="Logo" />
+    <img v-if="props.uploadedImageLocation" :src="props.uploadedImageLocation" alt="Logo" />
+    <div v-else class="help-block">You did not yet upload a logo</div>
   </div>
 </template>
 

From 1376054f5c03b35dc75109c6408f41baf27cb299 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Sun, 3 Nov 2024 18:07:58 +0700
Subject: [PATCH 19/41] feat: project CRUD wroks with logo

---
 .../controllers/AdminProjectController.php    | 216 +++++++++++++-----
 protected/models/Project.php                  | 153 +++++++++----
 protected/views/adminProject/_form.php        |   2 +-
 vite/README.md                                |  15 +-
 vite/src/components/LogoUploadUppy.vue        |  27 ++-
 5 files changed, 294 insertions(+), 119 deletions(-)

diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index 3ff25a6217..b67a59bd89 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -25,7 +25,7 @@ public function accessRules()
 	{
 		return array(
 			array('allow', // admin only
-				'actions'=>array('admin','delete','index','view','create','update','uploadLogo'),
+				'actions'=>array('admin','delete','index','view','create','update','uploadTempLogo'),
 				'roles'=>array('admin'),
 			),
 			array('deny',  // deny all users
@@ -51,18 +51,59 @@ public function actionView($id)
 	 */
 	public function actionCreate()
 	{
-		$model=new Project;
+		Yii::log("actionCreate: Starting project creation", "info");
+		$model = new Project;
 
 		// Uncomment the following line if AJAX validation is needed
 		// $this->performAjaxValidation($model);
 
 		if(isset($_POST['Project']))
 		{
+			Yii::log("actionCreate: POST data received - " . print_r($_POST['Project'], true), "info");
 			$model->attributes=$_POST['Project'];
-      // save logo in permanent storage
-      $model->writeLogo(Yii::$app->cloudStore, Yii::$app->params['environment'] . '/' . 'images/projects/' . $model->getUuid(), $model->logo_image);
-			if($model->save())
+      $storage = Yii::$app->cloudStore;
+      $tempImageLocation = $model->image_location;
+      $model->image_location = null;
+
+      Yii::log("actionCreate: Project attributes - " . print_r($model->attributes, true), "info");
+      Yii::log("actionCreate: Temp image location - " . $tempImageLocation, "info");
+
+			if($model->save()) {
+				Yii::log("actionCreate: Project saved successfully with ID " . $model->id, "info");
+         // first we need to get the project id, and then we create the logo path deterministically
+          if ($tempImageLocation) {
+            Yii::log("actionCreate: Processing temp image at " . $tempImageLocation, "info");
+            // get file from url and save it in project folder (instance dependent, deterministic path)
+            $logoUrl = $model->writeLogoFromUrl($storage, $tempImageLocation);
+            Yii::log("actionCreate: Logo URL after writeLogoFromUrl - " . ($logoUrl ?: 'null'), "info");
+            $tempLogoPath = str_replace(Project::getStorageBasePath() . '/', '', $tempImageLocation);
+            $tempDirectory = dirname($tempLogoPath);
+
+            // delete file from payload url (it's always temp url)
+            if ($storage->has($tempLogoPath)) {
+                Yii::log("actionCreate: Attempting to delete temp file at " . $tempLogoPath, "info");
+                if ($storage->deleteDir($tempDirectory)) {
+                    Yii::log("actionCreate: Deleted temp dir " . $tempDirectory, "info");
+                } else {
+                    Yii::log("actionCreate: Failed to delete temp dir " . $tempDirectory, "warning");
+                }
+            } else {
+                Yii::log("actionCreate: Temp image not found at " . $tempImageLocation, "warning");
+            }
+
+            if ($logoUrl) {
+                Yii::log("actionCreate: Updating project with new logo URL - " . $logoUrl, "info");
+                // Update only the image_location and skip validation of other fields
+                $model->image_location = $logoUrl;
+                // Use updateByPk to bypass validation
+                Project::model()->updateByPk($model->id, array('image_location' => $logoUrl));
+                Yii::log("actionCreate: Project updated with logo URL successfully", "info");
+            }
+          }
 				$this->redirect(array('view','id'=>$model->id));
+      } else {
+          Yii::log("actionCreate: Failed to save project - " . print_r($model->getErrors(), true), "error");
+      }
 		}
 
 		$this->render('create',array(
@@ -70,44 +111,27 @@ public function actionCreate()
 		));
 	}
 
-  /**
-   * Make a JSON response with the given code, message, and payload.
-   * @param int $code The HTTP status code.
-   * @param string $message The message to include in the response.
-   * @param array $payload Additional data to include in the response.
-   */
-  private function makeResponse($code, $message, $payload = []) {
-    $success = $code < 400;
-    header('Content-Type: application/json');
-    http_response_code($code);
-    echo CJSON::encode(array_merge([
-      'success' => $success,
-      'message' => $message,
-    ], $payload));
-    Yii::app()->end();
-  }
-
-  /**
-   * Upload a logo image
-   */
-  public function actionUploadLogo() {
-    // $existingLogoUrl = Yii::app()->request->getQuery('existingLogoUrl');
+  public function actionUploadTempLogo() {
+    Yii::log("actionUploadTempLogo: ", "info");
     if (!isset($_FILES['logo_image'])) {
       $this->makeResponse(400, 'Invalid request. No file was uploaded.');
     }
 
-    $uploadedLogo = CUploadedFile::getInstanceByName('logo_image');
+    // get multipart data file from request
+    $uploadedLogoFile = CUploadedFile::getInstanceByName('logo_image');
 
-    if ($uploadedLogo->getSize() > 1_000_000) {
+    if ($uploadedLogoFile->getSize() > 1_000_000) {
       $message = 'Invalid request. Logo image size should be less than 1MB';
       Yii::app()->user->setFlash('updateError', $message);
       $this->makeResponse(400, $message);
     }
 
-    $random_uuid = Uuid::uuid4()->toString();
-    $temp_logo_dir = Yii::$app->params['environment'] . '/images/projects/temp/' . $random_uuid;
-    $image_location = Project::writeLogo(Yii::$app->cloudStore, $temp_logo_dir, $uploadedLogo);
-    // no need to delete logs from temp directory, that can be done with cron job
+    $storage = Yii::$app->cloudStore;
+
+    // save file to temp folder
+    if ($uploadedLogoFile) {
+      $image_location = Project::writeLogoFromFile($storage, Project::getTempLogoPath(), $uploadedLogoFile);
+    }
 
     if (!$image_location) {
       $message = 'Failed to save your logo image';
@@ -115,11 +139,29 @@ public function actionUploadLogo() {
       $this->makeResponse(500, $message);
     }
 
+    // return temp file url
     $this->makeResponse(200, 'Logo uploaded successfully', [
       'image_location' => $image_location
     ]);
   }
 
+  /**
+   * Make a JSON response with the given code, message, and payload.
+   * @param int $code The HTTP status code.
+   * @param string $message The message to include in the response.
+   * @param array $payload Additional data to include in the response.
+   */
+  private function makeResponse($code, $message, $payload = []) {
+    $success = $code < 400;
+    header('Content-Type: application/json');
+    http_response_code($code);
+    echo CJSON::encode(array_merge([
+      'success' => $success,
+      'message' => $message,
+    ], $payload));
+    Yii::app()->end();
+  }
+
 	/**
 	 * Updates a particular model.
 	 * If update is successful, the browser will be redirected to the 'view' page.
@@ -127,16 +169,74 @@ public function actionUploadLogo() {
 	 */
 	public function actionUpdate($id)
 	{
-		$model=$this->loadModel($id);
+		Yii::log("actionUpdate: Starting update for project ID: $id", "info");
+		$model = $this->loadModel($id);
+		Yii::log("actionUpdate: Loaded model with name: " . $model->name, "info");
 
 		// Uncomment the following line if AJAX validation is needed
 		// $this->performAjaxValidation($model);
 
 		if(isset($_POST['Project']))
 		{
-			$model->attributes=$_POST['Project'];
-			if($model->save())
+      Yii::log("actionUpdate: Processing POST data for project", "info");
+      $prevAttributes = $model->attributes;
+      $newAttributes = $_POST['Project'];
+      Yii::log("actionUpdate: Previous image_location: " . $prevAttributes['image_location'], "info");
+      Yii::log("actionUpdate: New image_location: " . $newAttributes['image_location'], "info");
+
+			$model->attributes = $newAttributes;
+      $storage = Yii::$app->cloudStore;
+
+      // if there is a logo url and it's different from the previous one
+      if ($model->image_location && $model->image_location !== $prevAttributes['image_location']) {
+          Yii::log("actionUpdate: Detected logo change, processing new logo", "info");
+
+          // Delete old logo if it exists
+          if ($prevAttributes['image_location']) {
+              $oldPath = str_replace(Project::getStorageBasePath() . '/', '', $prevAttributes['image_location']);
+              $oldDir = dirname($oldPath);
+              if ($storage->has($oldPath)) {
+                  $deleteResult = $storage->deleteDir($oldDir);
+                  Yii::log("actionUpdate: Old logo deletion result: " . ($deleteResult ? 'success' : 'failed'), "info");
+              } else {
+                  Yii::log("actionUpdate: Old logo file not found at: " . $oldPath, "warning");
+              }
+          }
+
+          // save new file
+          $logoUrl = $model->writeLogoFromUrl($storage, $model->image_location);
+          Yii::log("actionUpdate: New logo URL: " . ($logoUrl ?: 'failed to generate'), "info");
+          if ($logoUrl) {
+              $model->image_location = $logoUrl;
+          } else {
+              Yii::log("actionUpdate: Failed to write new logo from URL", "error");
+          }
+
+          // TODO refactor into helper function
+          $tempImageLocation = $newAttributes['image_location'];
+          $tempLogoPath = str_replace(Project::getStorageBasePath() . '/', '', $tempImageLocation);
+          $tempDirectory = dirname($tempLogoPath);
+
+          // delete temp file
+          if ($storage->has($tempLogoPath)) {
+              Yii::log("actionCreate: Attempting to delete temp file at " . $tempLogoPath, "info");
+              if ($storage->deleteDir($tempDirectory)) {
+                  Yii::log("actionCreate: Deleted temp dir " . $tempDirectory, "info");
+              } else {
+                  Yii::log("actionCreate: Failed to delete temp dir " . $tempDirectory, "warning");
+              }
+          } else {
+              Yii::log("actionCreate: Temp image not found at " . $tempImageLocation, "warning");
+          }
+      }
+
+      // NOTE I think saving the model will trigger validation and thus fail if the URL or name are left unchanged
+			if($model->save()) {
+				Yii::log("actionUpdate: Successfully saved project changes", "info");
 				$this->redirect(array('view','id'=>$model->id));
+			} else {
+				Yii::log("actionUpdate: Failed to save project changes. Errors: " . print_r($model->getErrors(), true), "error");
+			}
 		}
 
 		$this->render('update',array(
@@ -151,36 +251,38 @@ public function actionUpdate($id)
 	 */
 	public function actionDelete($id)
 	{
-    Yii::log("delete: $id");
-    $storageBasePath = ''; // 'https://' . self::BUCKET
+		Yii::log("actionDelete: Starting deletion process for project ID: $id", "info");
+
 		if(Yii::app()->request->isPostRequest)
 		{
+			Yii::log("actionDelete: Received valid POST request", "info");
+
 			// we only allow deletion via POST request
 			$model = $this->loadModel($id);
-      $logoUrl = $model->image_location;
-      $logoPath = str_replace($storageBasePath . '/', '', $logoUrl);
-
-      // I expected YII_ENV_DEV to be true but it's not defined, so using a hardcoded temporary approach for now so app does not crash each time
-      // $isTester = false;
-      // if ($isTester) {
-      //   Yii::log("actionDelete: Tester environment, skipping actual delete", "info");
-      // } else {
-      // }
-      if (Yii::$app->cloudStore->delete($logoPath)) {
-        Yii::log("actionDelete: Deleted logo image" . $logoPath . " for project ". $id, "info");
-      }  else {
-        // fail silently
-        Yii::log("actionDelete: Failed to delete logo image" . $logoPath . " for project ". $id, "error");
-      }
+			Yii::log("actionDelete: Loaded project model with name: " . $model->name, "info");
 
-      $model->delete();
+			try {
+				if($model->delete()) {
+					Yii::log("actionDelete: Successfully deleted project with ID: $id", "info");
+				} else {
+					Yii::log("actionDelete: Failed to delete project. Errors: " . print_r($model->getErrors(), true), "error");
+				}
+			} catch(\Exception $e) {
+				Yii::log("actionDelete: Exception while deleting project: " . $e->getMessage(), "error");
+				throw $e;
+			}
 
 			// if AJAX request (triggered by deletion via admin grid view), we should not redirect the browser
-			if(!isset($_GET['ajax']))
-				$this->redirect(isset($_POST['returnUrl']) ? $_POST['returnUrl'] : array('admin'));
+			if(!isset($_GET['ajax'])) {
+				$redirectUrl = isset($_POST['returnUrl']) ? $_POST['returnUrl'] : array('admin');
+				Yii::log("actionDelete: Redirecting to: " . print_r($redirectUrl, true), "info");
+				$this->redirect($redirectUrl);
+			}
 		}
-		else
+		else {
+			Yii::log("actionDelete: Invalid request method - must be POST", "error");
 			throw new CHttpException(400,'Invalid request. Please do not repeat this request again.');
+		}
 	}
 
 	/**
diff --git a/protected/models/Project.php b/protected/models/Project.php
index 64d6ecd128..37f013ada0 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -23,10 +23,15 @@ class Project extends CActiveRecord
   /** @const string bucket name when storage is in the cloud  */
   const BUCKET = "assets.gigadb-cdn.net";
   const NAMESPACE = "http://gigadb.org/namespaces/project";
-
   public $image;
   public $image_logo;
 
+  public static function getStorageBasePath()
+  {
+    // TODO replace by prod val before PR, can also use the value directly where it's needed
+      return Yii::getAlias('@web') . '/files';   // 'https://' . self::BUCKET
+  }
+
 	/**
 	 * Returns the static model of the specified AR class.
 	 * @param string $className active record class name.
@@ -139,38 +144,68 @@ function check_duplicate(){
 
   }
 
-  /**
-   * write a logo image to the desired (Flysystem managed) storage mechanism and update url property with the location
-   *
-   * @param Filesystem $targetStorage
-   * @param string $enclosingDirectory
-   * @param CUploadedFile $uploadedLogo
-   * @return bool|string
-   */
-  public static function writeLogo(Filesystem $targetStorage, string $enclosingDirectory, CUploadedFile $uploadedLogo)
-  {
-      // TODO change this before PR
-      $storageBasePath = Yii::getAlias('@web') . '/files'; // 'https://' . self::BUCKET
+  public static function writeLogoFromFile(Filesystem $storage, string $enclosingDirectory, CUploadedFile $file) {
 
-      $slugger = new \Symfony\Component\String\Slugger\AsciiSlugger();
-      $info = pathinfo($uploadedLogo->getName());
+    // get slugified filename from file
+    $slugger = new \Symfony\Component\String\Slugger\AsciiSlugger();
+    $info = pathinfo($file->getName());
+    $fileName = $slugger->slug($info['filename'])->toString();
 
-      $fileName = $slugger->slug($info['filename'])->toString();
+    // build logo path
+    $logoPath = sprintf("%s/%s.%s", $enclosingDirectory, $fileName, $info['extension']);
+    $logoUrl = sprintf("%s/%s", Project::getStorageBasePath(), $logoPath);
 
-      $logoPath = sprintf("%s/%s.%s", $enclosingDirectory, $fileName, $info['extension'] );
+    Yii::log("writeLogoFromFile: logoPath: " . $logoPath . " logoUrl: " . $logoUrl, "info");
 
-      $logoUrl = sprintf("%s/%s", $storageBasePath, $logoPath);
-
-      if ($targetStorage->put(
-          $logoPath, file_get_contents($uploadedLogo->getTempName()),
-          ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
-      )) {
-          return $logoUrl;
-      }
+    if ($storage->put(
+      $logoPath,
+      file_get_contents($file->getTempName()),
+      ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
+    )) {
+      return $logoUrl;
+    }
 
-      return false;
+    return false;
   }
 
+  public function writeLogoFromUrl(Filesystem $storage, string $url) {
+    // remove the base path from the url to get the path
+    $enclosingDirectory = $this->getLogoPath();
+    $filename = basename($url);
+    $logoPath = sprintf("%s/%s", $enclosingDirectory, $filename);
+    $logoUrl = sprintf("%s/%s", Project::getStorageBasePath(), $logoPath);
+
+    Yii::log("writeLogoFromUrl: logoPath: " . $logoPath . " logoUrl: " . $logoUrl, "info");
+
+    try {
+        // Get the source path by removing the storage base path from the url
+        $sourcePath = str_replace(Project::getStorageBasePath() . '/', '', $url);
+        Yii::log("writeLogoFromUrl: Reading from source path: " . $sourcePath, "info");
+
+        // Read content from storage
+        $content = $storage->read($sourcePath);
+
+        if ($content === false) {
+            Yii::log("writeLogoFromUrl: Failed to read content from source path", "error");
+            return false;
+        }
+
+        // Write to new location
+        if ($storage->put(
+            $logoPath,
+            $content,
+            ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
+        )) {
+            return $logoUrl;
+        }
+    } catch (\Exception $e) {
+        Yii::log("writeLogoFromUrl: Error processing file: " . $e->getMessage(), "error");
+        return false;
+    }
+
+    return false;
+}
+
   /**
    * Delete an existing logo from storage
    *
@@ -179,35 +214,57 @@ public static function writeLogo(Filesystem $targetStorage, string $enclosingDir
    */
   public function deleteLogo(Filesystem $targetStorage): bool
   {
-        // TODO change this before PR
-      $storageBasePath = Yii::getAlias('@web') . '/files'; // 'https://' . self::BUCKET
-      Yii::log("deleteLogo: Storage base path is " . $storageBasePath, "info");
-
-      Yii::log("deleteLogo: No existing logo URL provided, using project UUID", "info");
-      $uuid = $this->getUuid();
-      Yii::log("deleteLogo: Project UUID is " . $uuid, "info");
-      $logoPath = 'images/projects/' . Yii::$app->params['environment'] . '/' . $uuid;
+      $logoPath = $this->getLogoPath();
 
       Yii::log("deleteLogo: Attempting to delete logo directory at " . $logoPath, "info");
 
-      if ($targetStorage->deleteDirectory($logoPath)) {
-          Yii::log("deleteLogo: Successfully deleted logo directory " . $logoPath, "info");
+
+      try {
+          if ($targetStorage->has($logoPath)) {
+              if ($targetStorage->deleteDir($logoPath)) {
+                  Yii::log("deleteLogo: Successfully deleted logo directory at " . $logoPath, "info");
+                  return true;
+              }
+          }
+          Yii::log("deleteLogo: Directory not found at " . $logoPath, "warning");
+          // return true to avoid aborting project deletion
+          return true;
+      } catch (\Exception $e) {
+          Yii::log("deleteLogo: Failed to delete logo directory: " . $e->getMessage(), "error");
+          // return true to avoid aborting project deletion
           return true;
       }
+  }
 
-      // fail silently
-      Yii::log("deleteLogo: Failed to delete logo directory " . $logoPath . ". Target storage returned false.", "error");
-      return false;
+  public function getLogoPath(): string
+  {
+    return Yii::$app->params['environment'] . '/images/projects/' . $this->getUuid();
   }
 
-      /**
-     * Return a UUID based on the project id
-     *
-     * @return string
-     */
-    public function getUuid()
-    {
-        return Uuid::uuid5(Uuid::NAMESPACE_URL, self::NAMESPACE."/id/".$this->id);
-    }
+  public static function getTempLogoPath(): string
+  {
+    return Yii::$app->params['environment'] . '/images/projects/temp/' . Uuid::uuid4()->toString();
+  }
 
+  /**
+   * Return a UUID based on the project id
+   *
+   * @return string
+   */
+  public function getUuid()
+  {
+      $uuid = Uuid::uuid5(Uuid::NAMESPACE_URL, self::NAMESPACE."/id/".$this->id);
+      return $uuid;
+  }
+
+  // this should ensure that logo file is cleaned up before project deletion
+  protected function beforeDelete()
+  {
+      if (!parent::beforeDelete()) {
+          return false;
+      }
+
+      Yii::log("Project::beforeDelete: Deleting logo for project " . $this->id, "info");
+      return $this->deleteLogo(Yii::$app->cloudStore); // if this returns false, project deletion will be aborted
+  }
 }
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index 0e2098987e..eccb0032e1 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -35,7 +35,7 @@
 		]);
 
     $existingImageLocation = $model->image_location ?: null;
-    $uploadLogoEndpoint = Yii::app()->createUrl('/adminProject/uploadLogo');
+    $uploadLogoEndpoint = Yii::app()->createUrl('/adminProject/uploadTempLogo');
 		?>
 
     <div id="vue-client_project-image-logo" data-image-location="<?php echo $existingImageLocation; ?>" data-endpoint="<?php echo $uploadLogoEndpoint; ?>" data-hidden-input-name="Project[image_location]">
diff --git a/vite/README.md b/vite/README.md
index e8ed87251e..b4adea54f5 100644
--- a/vite/README.md
+++ b/vite/README.md
@@ -2,10 +2,17 @@
 
 ## Tasks
 
-- [ ] add sr-only text to browse files button: upload logo, please upload one file as logo. maximum height, etc
-- [ ] adapt style to match gigadb theme, in the style.css file or in the component itself, or even better use directly the gigadb styles
-- [ ] the hidden file input should have a specific id for the backend controller (maybe with the metafields option?)
-- [ ] make the upload button displayed after adding file responsive (there's something apparent happening after user clicks it) or remove it (what does it do?)
+- [x] add sr-only text to browse files button: upload logo, please upload one file as logo. maximum height, etc
+- [x] adapt style to match gigadb theme, in the style.css file or in the component itself, or even better use directly the gigadb styles
+- [ ] try to use variables.less for colors
+- [x] create adds a new image to project
+- [x] update overrides image (delete old and create new)
+- [x] delete deletes image
+- [ ] refactor and delete logs
+- [ ] run related test suites
+- [ ] write new tests to cover new functionality
+- [ ] should work in production (i.e. prod container)
+- [ ] replace local values by production values
 
 ## Usage
 
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index 467af9c9b6..757bfa29d5 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -106,6 +106,7 @@ function openFileEditor(file: UppyFile<Meta, Record<string, never>>) {
 
 async function handleImageHeightMsgs(file: UppyFile<Meta, Record<string, never>>, cbTooTall?: () => void) {
   const { height } = await getUppyImgDimensions(file);
+
   if (height > maxHeight) {
     errorMessage.value = `Image height (${height}px) exceeds ${maxHeight}px - please crop the image using the editor`;
     srOnlyErrorMessage.value = `Image height of ${height} pixels exceeds maximum of ${maxHeight} pixels. Please crop the image using the editor.`;
@@ -134,6 +135,10 @@ uppy.on('file-removed', () => {
 });
 
 // uppy upload events
+uppy.on('upload-start', () => {
+  errorMessage.value = '';
+});
+
 uppy.on('upload-success', (file, response) => {
   if (response.body?.success) {
     const { image_location } = response.body;
@@ -143,20 +148,24 @@ uppy.on('upload-success', (file, response) => {
 
 // parse response from upload server endpoint
 uppy.on('upload-error', (file, error, response) => {
+  const defaultError = 'Failed to upload file. Please try again.';
+
+  if (!response) {
+    errorMessage.value = defaultError;
+    return;
+  }
+
   if (typeof response === 'string') {
     try {
-      const errorData = JSON.parse(response);
-      errorMessage.value = errorData.message;
+      const { message } = JSON.parse(response);
+      errorMessage.value = message || defaultError;
     } catch {
-      errorMessage.value = 'Failed to upload file. Please try again.';
+      errorMessage.value = defaultError;
     }
-  } else {
-    errorMessage.value = 'Failed to upload file. Please try again.';
+    return;
   }
-});
 
-uppy.on('upload-start', () => {
-  errorMessage.value = '';
+  errorMessage.value = defaultError;
 });
 
 // file-editor plugin events
@@ -169,7 +178,7 @@ uppy.on('file-editor:cancel', async (file: UppyFile<Meta, Record<string, never>>
 
 uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never>>) => {
   try {
-    // NOTE not forcefully opening the editor again here either, because user might decide to click "save" with the idea to switch image
+    // NOTE not forcefully opening the editor again here, because user might decide to click "save" with the idea to switch image
     await handleImageHeightMsgs(file);
   } catch (error) {
     errorMessage.value = 'Error verifying image dimensions';

From 8af0f3981838505712b668b10c05b1b49ebb21b7 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Sun, 3 Nov 2024 19:29:25 +0700
Subject: [PATCH 20/41] chore: delete logs

---
 .../controllers/AdminProjectController.php    | 297 +++++++-----------
 protected/models/Project.php                  | 136 ++++----
 vite/README.md                                |   2 +-
 3 files changed, 167 insertions(+), 268 deletions(-)

diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index b67a59bd89..375591d67f 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -1,7 +1,5 @@
 <?php
 
-use Ramsey\Uuid\Uuid;
-
 class AdminProjectController extends Controller
 {
 
@@ -51,98 +49,66 @@ public function actionView($id)
 	 */
 	public function actionCreate()
 	{
-		Yii::log("actionCreate: Starting project creation", "info");
-		$model = new Project;
-
-		// Uncomment the following line if AJAX validation is needed
-		// $this->performAjaxValidation($model);
+      $model = new Project;
+
+      // Uncomment the following line if AJAX validation is needed
+      // $this->performAjaxValidation($model);
+
+      if(isset($_POST['Project']))
+      {
+          $model->attributes = $_POST['Project'];
+          $storage = Yii::$app->cloudStore;
+          $tempImageLocation = $model->image_location;
+          $model->image_location = null;
+
+          // saving the model first to get an id, then writing the logo in a id-dependent path
+          if ($model->save()) {
+              if ($tempImageLocation) {
+                  $logoUrl = $model->writeLogoFromUrl($storage, $tempImageLocation);
+                  Project::deleteTempLogo($tempImageLocation);
+
+                  if ($logoUrl) {
+                      $model->image_location = $logoUrl;
+                      // Update only the image_location and skip validation of other fields
+                      Project::model()->updateByPk($model->id, array('image_location' => $logoUrl));
+                  }
+              }
 
-		if(isset($_POST['Project']))
-		{
-			Yii::log("actionCreate: POST data received - " . print_r($_POST['Project'], true), "info");
-			$model->attributes=$_POST['Project'];
-      $storage = Yii::$app->cloudStore;
-      $tempImageLocation = $model->image_location;
-      $model->image_location = null;
-
-      Yii::log("actionCreate: Project attributes - " . print_r($model->attributes, true), "info");
-      Yii::log("actionCreate: Temp image location - " . $tempImageLocation, "info");
-
-			if($model->save()) {
-				Yii::log("actionCreate: Project saved successfully with ID " . $model->id, "info");
-         // first we need to get the project id, and then we create the logo path deterministically
-          if ($tempImageLocation) {
-            Yii::log("actionCreate: Processing temp image at " . $tempImageLocation, "info");
-            // get file from url and save it in project folder (instance dependent, deterministic path)
-            $logoUrl = $model->writeLogoFromUrl($storage, $tempImageLocation);
-            Yii::log("actionCreate: Logo URL after writeLogoFromUrl - " . ($logoUrl ?: 'null'), "info");
-            $tempLogoPath = str_replace(Project::getStorageBasePath() . '/', '', $tempImageLocation);
-            $tempDirectory = dirname($tempLogoPath);
-
-            // delete file from payload url (it's always temp url)
-            if ($storage->has($tempLogoPath)) {
-                Yii::log("actionCreate: Attempting to delete temp file at " . $tempLogoPath, "info");
-                if ($storage->deleteDir($tempDirectory)) {
-                    Yii::log("actionCreate: Deleted temp dir " . $tempDirectory, "info");
-                } else {
-                    Yii::log("actionCreate: Failed to delete temp dir " . $tempDirectory, "warning");
-                }
-            } else {
-                Yii::log("actionCreate: Temp image not found at " . $tempImageLocation, "warning");
-            }
-
-            if ($logoUrl) {
-                Yii::log("actionCreate: Updating project with new logo URL - " . $logoUrl, "info");
-                // Update only the image_location and skip validation of other fields
-                $model->image_location = $logoUrl;
-                // Use updateByPk to bypass validation
-                Project::model()->updateByPk($model->id, array('image_location' => $logoUrl));
-                Yii::log("actionCreate: Project updated with logo URL successfully", "info");
-            }
+              $this->redirect(array('view','id'=>$model->id));
           }
-				$this->redirect(array('view','id'=>$model->id));
-      } else {
-          Yii::log("actionCreate: Failed to save project - " . print_r($model->getErrors(), true), "error");
       }
-		}
 
-		$this->render('create',array(
-			'model'=>$model,
-		));
+      $this->render('create',array(
+        'model'=>$model,
+      ));
 	}
 
+  /**
+   * Upload a logo file in a temp folder and return the URL of the uploaded file.
+   * @return void
+   */
   public function actionUploadTempLogo() {
-    Yii::log("actionUploadTempLogo: ", "info");
-    if (!isset($_FILES['logo_image'])) {
-      $this->makeResponse(400, 'Invalid request. No file was uploaded.');
-    }
-
-    // get multipart data file from request
-    $uploadedLogoFile = CUploadedFile::getInstanceByName('logo_image');
-
-    if ($uploadedLogoFile->getSize() > 1_000_000) {
-      $message = 'Invalid request. Logo image size should be less than 1MB';
-      Yii::app()->user->setFlash('updateError', $message);
-      $this->makeResponse(400, $message);
-    }
-
-    $storage = Yii::$app->cloudStore;
-
-    // save file to temp folder
-    if ($uploadedLogoFile) {
-      $image_location = Project::writeLogoFromFile($storage, Project::getTempLogoPath(), $uploadedLogoFile);
-    }
-
-    if (!$image_location) {
-      $message = 'Failed to save your logo image';
-      Yii::app()->user->setFlash('updateError', $message);
-      $this->makeResponse(500, $message);
-    }
-
-    // return temp file url
-    $this->makeResponse(200, 'Logo uploaded successfully', [
-      'image_location' => $image_location
-    ]);
+      if (!isset($_FILES['logo_image'])) {
+          $this->makeJSONResponse(400, 'Invalid request. No file was uploaded.');
+      }
+
+      $uploadedLogoFile = CUploadedFile::getInstanceByName('logo_image');
+
+      if ($uploadedLogoFile->getSize() > 1_000_000) {
+          $this->makeJSONResponse(400, 'Invalid request. Logo image size should be less than 1MB');
+      }
+
+      if ($uploadedLogoFile) {
+          $image_location = Project::writeLogoFromFile(Yii::$app->cloudStore, Project::getTempLogoPath(), $uploadedLogoFile);
+
+          if (!$image_location) {
+              $this->makeJSONResponse(500, 'Failed to save logo image');
+          }
+      }
+
+      $this->makeJSONResponse(200, 'Logo uploaded successfully', [
+          'image_location' => $image_location
+      ]);
   }
 
   /**
@@ -151,15 +117,15 @@ public function actionUploadTempLogo() {
    * @param string $message The message to include in the response.
    * @param array $payload Additional data to include in the response.
    */
-  private function makeResponse($code, $message, $payload = []) {
-    $success = $code < 400;
-    header('Content-Type: application/json');
-    http_response_code($code);
-    echo CJSON::encode(array_merge([
-      'success' => $success,
-      'message' => $message,
-    ], $payload));
-    Yii::app()->end();
+  private function makeJSONResponse($code, $message, $payload = []) {
+      $success = $code < 400;
+      header('Content-Type: application/json');
+      http_response_code($code);
+      echo CJSON::encode(array_merge([
+          'success' => $success,
+          'message' => $message,
+      ], $payload));
+      Yii::app()->end();
   }
 
 	/**
@@ -169,79 +135,44 @@ private function makeResponse($code, $message, $payload = []) {
 	 */
 	public function actionUpdate($id)
 	{
-		Yii::log("actionUpdate: Starting update for project ID: $id", "info");
-		$model = $this->loadModel($id);
-		Yii::log("actionUpdate: Loaded model with name: " . $model->name, "info");
+      $model = $this->loadModel($id);
 
-		// Uncomment the following line if AJAX validation is needed
-		// $this->performAjaxValidation($model);
+      // Uncomment the following line if AJAX validation is needed
+      // $this->performAjaxValidation($model);
 
-		if(isset($_POST['Project']))
-		{
-      Yii::log("actionUpdate: Processing POST data for project", "info");
-      $prevAttributes = $model->attributes;
-      $newAttributes = $_POST['Project'];
-      Yii::log("actionUpdate: Previous image_location: " . $prevAttributes['image_location'], "info");
-      Yii::log("actionUpdate: New image_location: " . $newAttributes['image_location'], "info");
-
-			$model->attributes = $newAttributes;
-      $storage = Yii::$app->cloudStore;
-
-      // if there is a logo url and it's different from the previous one
-      if ($model->image_location && $model->image_location !== $prevAttributes['image_location']) {
-          Yii::log("actionUpdate: Detected logo change, processing new logo", "info");
-
-          // Delete old logo if it exists
-          if ($prevAttributes['image_location']) {
-              $oldPath = str_replace(Project::getStorageBasePath() . '/', '', $prevAttributes['image_location']);
-              $oldDir = dirname($oldPath);
-              if ($storage->has($oldPath)) {
-                  $deleteResult = $storage->deleteDir($oldDir);
-                  Yii::log("actionUpdate: Old logo deletion result: " . ($deleteResult ? 'success' : 'failed'), "info");
-              } else {
-                  Yii::log("actionUpdate: Old logo file not found at: " . $oldPath, "warning");
+      if(isset($_POST['Project']))
+      {
+          $prevAttributes = $model->attributes;
+          $newAttributes = $_POST['Project'];
+          $model->attributes = $newAttributes;
+          $storage = Yii::$app->cloudStore;
+
+          $hasNewLogo = $model->image_location && $model->image_location !== $prevAttributes['image_location'];
+
+          if ($hasNewLogo) {
+              if ($prevAttributes['image_location']) {
+                  $model->deleteLogo($storage);
               }
-          }
 
-          // save new file
-          $logoUrl = $model->writeLogoFromUrl($storage, $model->image_location);
-          Yii::log("actionUpdate: New logo URL: " . ($logoUrl ?: 'failed to generate'), "info");
-          if ($logoUrl) {
-              $model->image_location = $logoUrl;
-          } else {
-              Yii::log("actionUpdate: Failed to write new logo from URL", "error");
-          }
+              $logoUrl = $model->writeLogoFromUrl($storage, $model->image_location);
 
-          // TODO refactor into helper function
-          $tempImageLocation = $newAttributes['image_location'];
-          $tempLogoPath = str_replace(Project::getStorageBasePath() . '/', '', $tempImageLocation);
-          $tempDirectory = dirname($tempLogoPath);
-
-          // delete temp file
-          if ($storage->has($tempLogoPath)) {
-              Yii::log("actionCreate: Attempting to delete temp file at " . $tempLogoPath, "info");
-              if ($storage->deleteDir($tempDirectory)) {
-                  Yii::log("actionCreate: Deleted temp dir " . $tempDirectory, "info");
-              } else {
-                  Yii::log("actionCreate: Failed to delete temp dir " . $tempDirectory, "warning");
+              if ($logoUrl) {
+                  $model->image_location = $logoUrl;
               }
-          } else {
-              Yii::log("actionCreate: Temp image not found at " . $tempImageLocation, "warning");
+
+              $tempImageLocation = $newAttributes['image_location'];
+              Project::deleteTempLogo($tempImageLocation);
           }
-      }
 
-      // NOTE I think saving the model will trigger validation and thus fail if the URL or name are left unchanged
-			if($model->save()) {
-				Yii::log("actionUpdate: Successfully saved project changes", "info");
-				$this->redirect(array('view','id'=>$model->id));
-			} else {
-				Yii::log("actionUpdate: Failed to save project changes. Errors: " . print_r($model->getErrors(), true), "error");
-			}
-		}
+          // NOTE I think saving the model will trigger validation and thus fail if the URL or name are left unchanged
+          if($model->save()) {
+            $this->redirect(array('view','id'=>$model->id));
+          }
+      }
 
-		$this->render('update',array(
-			'model'=>$model,
-		));
+      $this->render('update',array(
+          'model'=>$model,
+      ));
 	}
 
 	/**
@@ -251,38 +182,20 @@ public function actionUpdate($id)
 	 */
 	public function actionDelete($id)
 	{
-		Yii::log("actionDelete: Starting deletion process for project ID: $id", "info");
-
-		if(Yii::app()->request->isPostRequest)
-		{
-			Yii::log("actionDelete: Received valid POST request", "info");
-
-			// we only allow deletion via POST request
-			$model = $this->loadModel($id);
-			Yii::log("actionDelete: Loaded project model with name: " . $model->name, "info");
-
-			try {
-				if($model->delete()) {
-					Yii::log("actionDelete: Successfully deleted project with ID: $id", "info");
-				} else {
-					Yii::log("actionDelete: Failed to delete project. Errors: " . print_r($model->getErrors(), true), "error");
-				}
-			} catch(\Exception $e) {
-				Yii::log("actionDelete: Exception while deleting project: " . $e->getMessage(), "error");
-				throw $e;
-			}
-
-			// if AJAX request (triggered by deletion via admin grid view), we should not redirect the browser
-			if(!isset($_GET['ajax'])) {
-				$redirectUrl = isset($_POST['returnUrl']) ? $_POST['returnUrl'] : array('admin');
-				Yii::log("actionDelete: Redirecting to: " . print_r($redirectUrl, true), "info");
-				$this->redirect($redirectUrl);
-			}
-		}
-		else {
-			Yii::log("actionDelete: Invalid request method - must be POST", "error");
-			throw new CHttpException(400,'Invalid request. Please do not repeat this request again.');
-		}
+      if(Yii::app()->request->isPostRequest)
+      {
+          // we only allow deletion via POST request
+          $model = $this->loadModel($id);
+          $model->delete();
+
+          // if AJAX request (triggered by deletion via admin grid view), we should not redirect the browser
+          if(!isset($_GET['ajax'])) {
+            $this->redirect(isset($_POST['returnUrl']) ? $_POST['returnUrl'] : array('admin'));
+          }
+      }
+      else {
+          throw new CHttpException(400,'Invalid request. Please do not repeat this request again.');
+      }
 	}
 
 	/**
diff --git a/protected/models/Project.php b/protected/models/Project.php
index 37f013ada0..53843dec93 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -28,7 +28,7 @@ class Project extends CActiveRecord
 
   public static function getStorageBasePath()
   {
-    // TODO replace by prod val before PR, can also use the value directly where it's needed
+      // TODO replace by prod val before PR, can also use the value directly where it's needed
       return Yii::getAlias('@web') . '/files';   // 'https://' . self::BUCKET
   }
 
@@ -145,69 +145,68 @@ function check_duplicate(){
   }
 
   public static function writeLogoFromFile(Filesystem $storage, string $enclosingDirectory, CUploadedFile $file) {
+      $slugger = new \Symfony\Component\String\Slugger\AsciiSlugger();
+      $info = pathinfo($file->getName());
+      $fileName = $slugger->slug($info['filename'])->toString();
+      $logoPath = sprintf("%s/%s.%s", $enclosingDirectory, $fileName, $info['extension']);
+      $logoUrl = sprintf("%s/%s", Project::getStorageBasePath(), $logoPath);
+
+      if ($storage->put(
+        $logoPath,
+        file_get_contents($file->getTempName()),
+        ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
+      )) {
+        return $logoUrl;
+      }
 
-    // get slugified filename from file
-    $slugger = new \Symfony\Component\String\Slugger\AsciiSlugger();
-    $info = pathinfo($file->getName());
-    $fileName = $slugger->slug($info['filename'])->toString();
+      return false;
+  }
 
-    // build logo path
-    $logoPath = sprintf("%s/%s.%s", $enclosingDirectory, $fileName, $info['extension']);
-    $logoUrl = sprintf("%s/%s", Project::getStorageBasePath(), $logoPath);
+  public function writeLogoFromUrl(Filesystem $storage, string $url) {
+      $enclosingDirectory = $this->getLogoPath();
+      $filename = basename($url);
+      $logoPath = sprintf("%s/%s", $enclosingDirectory, $filename);
+      $logoUrl = sprintf("%s/%s", Project::getStorageBasePath(), $logoPath);
 
-    Yii::log("writeLogoFromFile: logoPath: " . $logoPath . " logoUrl: " . $logoUrl, "info");
+      $sourcePath = str_replace(Project::getStorageBasePath() . '/', '', $url);
+      $content = $storage->read($sourcePath);
 
-    if ($storage->put(
-      $logoPath,
-      file_get_contents($file->getTempName()),
-      ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
-    )) {
-      return $logoUrl;
-    }
+      if ($content === false) {
+          return false;
+      }
 
-    return false;
+      if ($storage->put(
+          $logoPath,
+          $content,
+          ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
+      )) {
+          return $logoUrl;
+      }
+
+      return false;
   }
 
-  public function writeLogoFromUrl(Filesystem $storage, string $url) {
-    // remove the base path from the url to get the path
-    $enclosingDirectory = $this->getLogoPath();
-    $filename = basename($url);
-    $logoPath = sprintf("%s/%s", $enclosingDirectory, $filename);
-    $logoUrl = sprintf("%s/%s", Project::getStorageBasePath(), $logoPath);
-
-    Yii::log("writeLogoFromUrl: logoPath: " . $logoPath . " logoUrl: " . $logoUrl, "info");
-
-    try {
-        // Get the source path by removing the storage base path from the url
-        $sourcePath = str_replace(Project::getStorageBasePath() . '/', '', $url);
-        Yii::log("writeLogoFromUrl: Reading from source path: " . $sourcePath, "info");
-
-        // Read content from storage
-        $content = $storage->read($sourcePath);
-
-        if ($content === false) {
-            Yii::log("writeLogoFromUrl: Failed to read content from source path", "error");
-            return false;
-        }
-
-        // Write to new location
-        if ($storage->put(
-            $logoPath,
-            $content,
-            ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
-        )) {
-            return $logoUrl;
-        }
-    } catch (\Exception $e) {
-        Yii::log("writeLogoFromUrl: Error processing file: " . $e->getMessage(), "error");
-        return false;
-    }
-
-    return false;
-}
+  /**
+   * Delete a temporary logo path from storage
+   *
+   * @param string $tempImageLocation a full URL for the temp logo image
+   * @return bool
+   */
+  public static function deleteTempLogo($tempImageLocation) {
+      $storage = Yii::$app->cloudStore;
+      $tempLogoPath = str_replace(Project::getStorageBasePath() . '/', '', $tempImageLocation);
+      $tempDirectory = dirname($tempLogoPath);
+
+      if ($storage->has($tempLogoPath)) {
+        $storage->deleteDir($tempDirectory);
+        return true;
+      }
+
+      return false;
+  }
 
   /**
-   * Delete an existing logo from storage
+   * Delete an existing logo path from storage
    *
    * @param Filesystem $targetStorage
    * @return bool
@@ -216,34 +215,22 @@ public function deleteLogo(Filesystem $targetStorage): bool
   {
       $logoPath = $this->getLogoPath();
 
-      Yii::log("deleteLogo: Attempting to delete logo directory at " . $logoPath, "info");
-
-
-      try {
-          if ($targetStorage->has($logoPath)) {
-              if ($targetStorage->deleteDir($logoPath)) {
-                  Yii::log("deleteLogo: Successfully deleted logo directory at " . $logoPath, "info");
-                  return true;
-              }
-          }
-          Yii::log("deleteLogo: Directory not found at " . $logoPath, "warning");
-          // return true to avoid aborting project deletion
-          return true;
-      } catch (\Exception $e) {
-          Yii::log("deleteLogo: Failed to delete logo directory: " . $e->getMessage(), "error");
-          // return true to avoid aborting project deletion
-          return true;
+      if ($targetStorage->has($logoPath)) {
+          $targetStorage->deleteDir($logoPath);
       }
+
+      // return true always to avoid aborting project deletion
+      return true;
   }
 
   public function getLogoPath(): string
   {
-    return Yii::$app->params['environment'] . '/images/projects/' . $this->getUuid();
+      return Yii::$app->params['environment'] . '/images/projects/' . $this->getUuid();
   }
 
   public static function getTempLogoPath(): string
   {
-    return Yii::$app->params['environment'] . '/images/projects/temp/' . Uuid::uuid4()->toString();
+      return Yii::$app->params['environment'] . '/images/projects/temp/' . Uuid::uuid4()->toString();
   }
 
   /**
@@ -264,7 +251,6 @@ protected function beforeDelete()
           return false;
       }
 
-      Yii::log("Project::beforeDelete: Deleting logo for project " . $this->id, "info");
       return $this->deleteLogo(Yii::$app->cloudStore); // if this returns false, project deletion will be aborted
   }
 }
diff --git a/vite/README.md b/vite/README.md
index b4adea54f5..3fef03a4a2 100644
--- a/vite/README.md
+++ b/vite/README.md
@@ -8,7 +8,7 @@
 - [x] create adds a new image to project
 - [x] update overrides image (delete old and create new)
 - [x] delete deletes image
-- [ ] refactor and delete logs
+- [x] refactor and delete logs
 - [ ] run related test suites
 - [ ] write new tests to cover new functionality
 - [ ] should work in production (i.e. prod container)

From 47a83abe6874e22c07e01cbb22318b8eb307f6d6 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Sun, 3 Nov 2024 20:55:50 +0700
Subject: [PATCH 21/41] feat: setup vue widget dev and prod

---
 .gitignore                                    |  1 +
 ops/deployment/docker-compose.yml             | 13 +++++--
 protected/models/Project.php                  |  4 +--
 protected/views/adminProject/_form.php        | 35 +++++++++++++++++--
 vite/.gitignore                               |  1 +
 vite/{Dockerfile => Dockerfile-dev}           |  1 -
 vite/Dockerfile-prod                          |  7 ++++
 vite/README.md                                |  6 ++--
 .../src/components/DashboardStatusDisplay.vue |  3 --
 vite/src/components/LogoUploadUppy.vue        |  6 ++--
 vite/vite.config.ts                           | 11 ++++++
 11 files changed, 70 insertions(+), 18 deletions(-)
 rename vite/{Dockerfile => Dockerfile-dev} (68%)
 create mode 100644 vite/Dockerfile-prod

diff --git a/.gitignore b/.gitignore
index 2380572c2e..5c8948387c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,6 +29,7 @@ files/data/filetypes.json
 images/tempcaptcha/
 images/vue
 files/dev
+js/vite-logo-upload
 
 # nginx config created by generate_config.sh
 ops/configuration/nginx-conf/sites/staging/gigadb.staging.http.conf
diff --git a/ops/deployment/docker-compose.yml b/ops/deployment/docker-compose.yml
index 610a8c352d..8c9f237a69 100644
--- a/ops/deployment/docker-compose.yml
+++ b/ops/deployment/docker-compose.yml
@@ -709,6 +709,7 @@ services:
   vite-project-image-location-dev:
     build:
       context: ${APPLICATION}/vite
+      dockerfile: Dockerfile-dev
       args:
         - NODE_VERSION=$NODE_VERSION
     volumes:
@@ -719,8 +720,14 @@ services:
     shm_size: '1gb' # to avoid a known issue
     ports:
       - 5173:5173
-    command: >
-      sh -c "npm install && npm run dev"
+
+  vite-project-image-location-prod:
+    build:
+      context: ${APPLICATION}/vite
+      dockerfile: Dockerfile-prod
+      args:
+        - NODE_VERSION=$NODE_VERSION
+    shm_size: '1gb'
 
 networks:
   web-tier:
@@ -734,4 +741,4 @@ networks:
 volumes:
   le_config:
   le_webrootpath:
-  portainer_data:
\ No newline at end of file
+  portainer_data:
diff --git a/protected/models/Project.php b/protected/models/Project.php
index 53843dec93..ba5b0cab6d 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -28,8 +28,8 @@ class Project extends CActiveRecord
 
   public static function getStorageBasePath()
   {
-      // TODO replace by prod val before PR, can also use the value directly where it's needed
-      return Yii::getAlias('@web') . '/files';   // 'https://' . self::BUCKET
+      // return Yii::getAlias('@web') . '/files'; // testing locally
+      return 'https://' . self::BUCKET;
   }
 
 	/**
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index eccb0032e1..d036caaff2 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -36,15 +36,44 @@
 
     $existingImageLocation = $model->image_location ?: null;
     $uploadLogoEndpoint = Yii::app()->createUrl('/adminProject/uploadTempLogo');
+    $manifestPath = Yii::getAlias('js/vite-logo-upload/.vite/manifest.json');
+    $manifest = [];
+
+    if (file_exists($manifestPath)) {
+      $manifest = json_decode(file_get_contents($manifestPath), true);
+    }
+
+    $entry = reset($manifest);
 		?>
 
-    <div id="vue-client_project-image-logo" data-image-location="<?php echo $existingImageLocation; ?>" data-endpoint="<?php echo $uploadLogoEndpoint; ?>" data-hidden-input-name="Project[image_location]">
+    <div
+      id="vue-client_project-image-logo"
+      data-image-location="<?php echo $existingImageLocation; ?>"
+      data-endpoint="<?php echo $uploadLogoEndpoint; ?>"
+      data-hidden-input-name="Project[image_location]"
+    >
       <div class="spinner"></div>
     </div>
-    <div>
+    <?php
+    $isDev = true; // TODO use a way to detect if we are in dev or prod environment
+    ?>
+    <?php if ($isDev): ?>
       <script type="module" src="http://localhost:5173/@vite/client"></script>
       <script type="module" src="http://localhost:5173/src/main.ts"></script>
-    </div>
+    <?php else: ?>
+      <!-- this requires running the build command, i.e. (cd vite && npm run build) -->
+      <!-- CSS for the entry point -->
+      <?php if (isset($entry['css'])): ?>
+        <?php foreach ($entry['css'] as $cssFile): ?>
+          <link rel="stylesheet" href="/js/vite-logo-upload/<?= $cssFile ?>" />
+        <?php endforeach; ?>
+      <?php endif; ?>
+
+      <!-- Main script file -->
+      <?php if (isset($entry['file'])): ?>
+        <script type="module" src="/js/vite-logo-upload/<?= $entry['file'] ?>"></script>
+      <?php endif; ?>
+    <?php endif; ?>
 
 		<div class="pull-right btns-row">
 			<a href="/adminProject/admin" class="btn background-btn-o">Cancel</a>
diff --git a/vite/.gitignore b/vite/.gitignore
index 2798dced6b..c9382336b7 100644
--- a/vite/.gitignore
+++ b/vite/.gitignore
@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 mock-files
+tsconfig.*.tsbuildinfo
\ No newline at end of file
diff --git a/vite/Dockerfile b/vite/Dockerfile-dev
similarity index 68%
rename from vite/Dockerfile
rename to vite/Dockerfile-dev
index 923d7f10fb..f42a63b9d7 100644
--- a/vite/Dockerfile
+++ b/vite/Dockerfile-dev
@@ -1,4 +1,3 @@
-# Using npm. An alternative would be to use bun (a faster bundler).
 ARG NODE_VERSION
 FROM node:${NODE_VERSION}-bullseye-slim
 WORKDIR /app
diff --git a/vite/Dockerfile-prod b/vite/Dockerfile-prod
new file mode 100644
index 0000000000..be1e8b6ce5
--- /dev/null
+++ b/vite/Dockerfile-prod
@@ -0,0 +1,7 @@
+ARG NODE_VERSION
+FROM node:${NODE_VERSION}-bullseye-slim as BUILD
+WORKDIR /app
+COPY package*.json .
+RUN npm ci
+COPY . .
+RUN npm run build
\ No newline at end of file
diff --git a/vite/README.md b/vite/README.md
index 3fef03a4a2..ae9f4c2750 100644
--- a/vite/README.md
+++ b/vite/README.md
@@ -9,9 +9,9 @@
 - [x] update overrides image (delete old and create new)
 - [x] delete deletes image
 - [x] refactor and delete logs
-- [ ] run related test suites
-- [ ] write new tests to cover new functionality
-- [ ] should work in production (i.e. prod container)
+- [x] run related test suites
+- [-] write new tests to cover new functionality
+- [x] should work in production (i.e. prod container)
 - [ ] replace local values by production values
 
 ## Usage
diff --git a/vite/src/components/DashboardStatusDisplay.vue b/vite/src/components/DashboardStatusDisplay.vue
index d7852bd001..fa3d1447db 100644
--- a/vite/src/components/DashboardStatusDisplay.vue
+++ b/vite/src/components/DashboardStatusDisplay.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { config } from '../config';
-
 const props = defineProps<{
   errorMessage: string | null;
   srOnlyErrorMessage: string | null;
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index 757bfa29d5..cf13d71794 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -139,7 +139,7 @@ uppy.on('upload-start', () => {
   errorMessage.value = '';
 });
 
-uppy.on('upload-success', (file, response) => {
+uppy.on('upload-success', (_, response) => {
   if (response.body?.success) {
     const { image_location } = response.body;
     uploadedImageLocation.value = image_location;
@@ -147,7 +147,7 @@ uppy.on('upload-success', (file, response) => {
 });
 
 // parse response from upload server endpoint
-uppy.on('upload-error', (file, error, response) => {
+uppy.on('upload-error', (_, __, response) => {
   const defaultError = 'Failed to upload file. Please try again.';
 
   if (!response) {
@@ -172,7 +172,7 @@ uppy.on('upload-error', (file, error, response) => {
 uppy.on('file-editor:start', () => {
   isEditing.value = true;
 });
-uppy.on('file-editor:cancel', async (file: UppyFile<Meta, Record<string, never>>) => {
+uppy.on('file-editor:cancel', async () => {
   isEditing.value = false;
 });
 
diff --git a/vite/vite.config.ts b/vite/vite.config.ts
index fb719d92c1..5e12cc5900 100644
--- a/vite/vite.config.ts
+++ b/vite/vite.config.ts
@@ -4,6 +4,17 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  build: {
+    manifest: true,
+    rollupOptions: {
+      input: 'src/main.ts',
+    },
+    modulePreload: {
+      polyfill: false,
+    },
+    outDir: '../js/vite-logo-upload',
+    emptyOutDir: true,
+  },
   server: {
     port: 5173,
     origin: 'http://localhost:5173',

From 7fbdf74e70580053818bd5f70dd9c68a021b1b2d Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Mon, 4 Nov 2024 06:46:50 +0700
Subject: [PATCH 22/41] refactor: adds global error handling

---
 .../components/ImageEditorStatusDisplay.vue   | 13 ++++----
 vite/src/components/LogoUploadUppy.vue        | 31 ++++++++++---------
 vite/src/main.ts                              | 14 +++++++++
 3 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/vite/src/components/ImageEditorStatusDisplay.vue b/vite/src/components/ImageEditorStatusDisplay.vue
index 872b5d07e6..4cdf7c6e9a 100644
--- a/vite/src/components/ImageEditorStatusDisplay.vue
+++ b/vite/src/components/ImageEditorStatusDisplay.vue
@@ -5,18 +5,19 @@ import { config } from '../config';
 const { maxHeight } = config;
 
 const props = defineProps<{
-  size: { width: number; height: number };
+  imageDimensions: { width: number; height: number };
 }>();
 
-const errorMessage = computed(() => props.size.height > maxHeight ? `Height exceeds ${maxHeight}px limit` : null)
-const srOnlyErrorMessage = computed(() => props.size.height > maxHeight ? `Image height exceeds ${maxHeight} pixels. Please crop further.` : null)
-const srOnlySuccessMessage = computed(() => props.size.height <= maxHeight ? `Image height is valid` : null)
+const isHeightExceeded = computed(() => props.imageDimensions.height > maxHeight);
+const errorMessage = computed(() => isHeightExceeded.value ? `Height exceeds ${maxHeight}px limit` : null)
+const srOnlyErrorMessage = computed(() => isHeightExceeded.value ? `Image height exceeds ${maxHeight} pixels. Please crop further.` : null)
+const srOnlySuccessMessage = computed(() => !isHeightExceeded.value ? `Image height is valid` : null)
 
 </script>
 
 <template>
-  <div v-if="props.size.width && props.size.height" class="status-display">
-    <span>Current dimensions: {{ props.size.width }}px &times; {{ props.size.height }}px</span>
+  <div v-if="props.imageDimensions.width && props.imageDimensions.height" class="status-display">
+    <span>Current dimensions: {{ props.imageDimensions.width }}px &times; {{ props.imageDimensions.height }}px</span>
     <span v-if="errorMessage" class="status-error" aria-hidden="true">
       {{ errorMessage }}
     </span>
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index cf13d71794..284207c1be 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -45,7 +45,7 @@ const isEditing = ref(false);
 const uploadedImageLocation = ref<string | null>(props.imageLocation);
 const errorMessage = ref<string | null>(null);
 const srOnlyErrorMessage = ref<string | null>(null);
-const size = reactive({
+const imageDimensions = reactive({
   height: 0,
   width: 0,
 });
@@ -73,8 +73,8 @@ uppy.use(ImageEditor, {
     responsive: true,
     // Show current dimensions in the cropper
     crop(event) {
-      size.width = Math.round(event.detail.width);
-      size.height = Math.round(event.detail.height);
+      imageDimensions.width = Math.round(event.detail.width);
+      imageDimensions.height = Math.round(event.detail.height);
     }
   },
   actions: {
@@ -190,17 +190,19 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
 </script>
 
 <template>
-  <HiddenInput v-if="hiddenInputName" :uploaded-image-location="uploadedImageLocation" :name="hiddenInputName" />
-  <UploadedLogoDisplay :uploaded-image-location="uploadedImageLocation" />
-  <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
-    :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
-    <Dashboard :uppy="uppy" :props="{
-      note: constraintsMessage,
-      proudlyDisplayPoweredByUppy: false,
-    }" />
-  </button>
-  <ImageEditorStatusDisplay v-if="isEditing" :size="size" />
-  <DashboardStatusDisplay :size="size" :error-message="errorMessage" :sr-only-error-message="srOnlyErrorMessage" />
+  <div class="app-entry-point">
+    <HiddenInput v-if="hiddenInputName" :uploaded-image-location="uploadedImageLocation" :name="hiddenInputName" />
+    <UploadedLogoDisplay :uploaded-image-location="uploadedImageLocation" />
+    <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
+      :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
+      <Dashboard :uppy="uppy" :props="{
+        note: constraintsMessage,
+        proudlyDisplayPoweredByUppy: false,
+      }" />
+    </button>
+    <ImageEditorStatusDisplay v-if="isEditing" :image-dimensions="imageDimensions" />
+    <DashboardStatusDisplay :image-dimensions="imageDimensions" :error-message="errorMessage" :sr-only-error-message="srOnlyErrorMessage" />
+  </div>
 </template>
 
 <style scoped lang="less">
@@ -237,6 +239,7 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
 
 // uppy dashboard overrides to match the site theme
 :deep(.uppy-Dashboard-inner) {
+  font-family: "Open Sans", Lato, "PT Sans", Arial, "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Zen Hei Mono", sans-serif;
   .uppy-Dashboard-browse {
     color: @color-gigadb-green;
 
diff --git a/vite/src/main.ts b/vite/src/main.ts
index e3748c7e85..22fcbf50b9 100644
--- a/vite/src/main.ts
+++ b/vite/src/main.ts
@@ -9,5 +9,19 @@ if (entryEl && entryEl instanceof HTMLElement) {
     imageLocation: entryEl.dataset.imageLocation,
     hiddenInputName: entryEl.dataset.hiddenInputName
   })
+  app.config.errorHandler = (err, _, info) => {
+    let msg = ''
+
+    if (err instanceof Error) {
+      msg = `Error: ${err.message}\nInfo: ${info}`
+    } else {
+      msg = `Error: ${err}\nInfo: ${info}`
+    }
+
+    import.meta.env.DEV && console.error(msg)
+    entryEl.textContent = import.meta.env.PROD
+      ? 'An unexpected error occurred. Please try again later.'
+      : msg
+  }
   app.mount(elId)
 }

From 05a841d9bc673feaafb1a3add55b12679fb65ed3 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Mon, 4 Nov 2024 08:18:44 +0700
Subject: [PATCH 23/41] feat: adds vue component unit testing

---
 vite/package-lock.json                        | 1546 ++++++++++++++---
 vite/package.json                             |    8 +-
 vite/src/components/HiddenInput.vue           |    2 +-
 vite/src/components/LogoUploadUppy.vue        |   28 +-
 vite/src/components/UploadedLogoDisplay.vue   |    2 +-
 vite/src/tests/HiddenInput.test.ts            |   39 +
 .../tests/ImageEditorStatusDisplay.test.ts    |   80 +
 .../ImageEditorStatusDisplay.type.test.ts     |   16 +
 vite/src/tests/LogoUploadUppy.test.ts         |  129 ++
 vite/src/tests/UploadedLogoDisplay.test.ts    |   33 +
 vite/tsconfig.node.json                       |    3 +-
 vite/vite.config.ts                           |    5 +
 12 files changed, 1601 insertions(+), 290 deletions(-)
 create mode 100644 vite/src/tests/HiddenInput.test.ts
 create mode 100644 vite/src/tests/ImageEditorStatusDisplay.test.ts
 create mode 100644 vite/src/tests/ImageEditorStatusDisplay.type.test.ts
 create mode 100644 vite/src/tests/LogoUploadUppy.test.ts
 create mode 100644 vite/src/tests/UploadedLogoDisplay.test.ts

diff --git a/vite/package-lock.json b/vite/package-lock.json
index 45986a8322..c8a4562db0 100644
--- a/vite/package-lock.json
+++ b/vite/package-lock.json
@@ -19,17 +19,117 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.1.4",
+        "@vue/compiler-dom": "^3.5.12",
+        "@vue/server-renderer": "^3.5.12",
+        "@vue/test-utils": "^2.4.6",
+        "happy-dom": "^15.8.2",
         "less": "^4.2.0",
         "typescript": "^5.5.3",
         "vite": "^5.4.8",
+        "vitest": "^2.1.4",
         "vue-tsc": "^2.1.6"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
+      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.26.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
+      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@transloadit/prettier-bytes": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/@transloadit/prettier-bytes/-/prettier-bytes-0.3.4.tgz",
       "integrity": "sha512-8/SnIF9Q2k52mbjRVAYLranwkaDTLb+O9r4Z/uo8uNw//SjygKvvbF4BHSOuReufaAyum1q13602VcNud25Dfg=="
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/retry": {
       "version": "0.12.2",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz",
@@ -317,6 +417,119 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.4.tgz",
+      "integrity": "sha512-DOETT0Oh1avie/D/o2sgMHGrzYUFFo3zqESB2Hn70z6QB1HrS2IQ9z5DfyTqU8sg4Bpu13zZe9V4+UTNQlUeQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "2.1.4",
+        "@vitest/utils": "2.1.4",
+        "chai": "^5.1.2",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.4.tgz",
+      "integrity": "sha512-Ky/O1Lc0QBbutJdW0rqLeFNbuLEyS+mIPiNdlVlp2/yhJ0SbyYqObS5IHdhferJud8MbbwMnexg4jordE5cCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "2.1.4",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.12"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.4.tgz",
+      "integrity": "sha512-L95zIAkEuTDbUX1IsjRl+vyBSLh3PwLLgKpghl37aCK9Jvw0iP+wKwIFhfjdUtA2myLgjrG6VU6JCFLv8q/3Ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.4.tgz",
+      "integrity": "sha512-sKRautINI9XICAMl2bjxQM8VfCMTB0EbsBc/EDFA57V6UQevEKY/TOPOF5nzcvCALltiLfXWbq4MaAwWx/YxIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "2.1.4",
+        "pathe": "^1.1.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.4.tgz",
+      "integrity": "sha512-3Kab14fn/5QZRog5BPj6Rs8dc4B+mim27XaKWFWHWA87R56AKjHTGcBFKpvZKDzC4u5Wd0w/qKsUIio3KzWW4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "2.1.4",
+        "magic-string": "^0.30.12",
+        "pathe": "^1.1.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.4.tgz",
+      "integrity": "sha512-4JOxa+UAizJgpZfaCPKK2smq9d8mmjZVPMt2kOsg/R8QkoRzydHH1qHxIYNvr1zlEaFj4SXiaaJWxq/LPLKaLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^3.0.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.4.tgz",
+      "integrity": "sha512-MXDnZn0Awl2S86PSNIim5PWXgIAx8CIkzu35mBdSApUip6RFOGXBCf3YFyeEu8n1IHk4bWD46DeYFu9mQlFIRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "2.1.4",
+        "loupe": "^3.1.2",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/@volar/typescript": {
       "version": "2.4.6",
       "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.6.tgz",
@@ -355,6 +568,45 @@
       "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
       "dev": true
     },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
+      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.12",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
+      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.12",
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
+      "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/shared": "3.5.12"
+      }
+    },
     "node_modules/@vue/language-core": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.6.tgz",
@@ -379,52 +631,6 @@
         }
       }
     },
-    "node_modules/@vue/language-core/node_modules/@babel/helper-string-parser": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@vue/language-core/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@vue/language-core/node_modules/@babel/parser": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.9.tgz",
-      "integrity": "sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.25.9"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@vue/language-core/node_modules/@babel/types": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.9.tgz",
-      "integrity": "sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@vue/language-core/node_modules/@volar/language-core": {
       "version": "2.4.6",
       "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.6.tgz",
@@ -440,29 +646,6 @@
       "integrity": "sha512-Nsh7UW2ruK+uURIPzjJgF0YRGP5CX9nQHypA2OMqdM2FKy7rh+uv3XgPnWPw30JADbKvZ5HuBzG4gSbVDYVtiw==",
       "dev": true
     },
-    "node_modules/@vue/language-core/node_modules/@vue/compiler-core": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
-      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.12",
-        "entities": "^4.5.0",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/@vue/language-core/node_modules/@vue/compiler-dom": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
-      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
-      "dev": true,
-      "dependencies": {
-        "@vue/compiler-core": "3.5.12",
-        "@vue/shared": "3.5.12"
-      }
-    },
     "node_modules/@vue/language-core/node_modules/@vue/compiler-vue2": {
       "version": "2.7.16",
       "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
@@ -473,27 +656,6 @@
         "he": "^1.2.0"
       }
     },
-    "node_modules/@vue/language-core/node_modules/@vue/shared": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
-      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
-      "dev": true
-    },
-    "node_modules/@vue/language-core/node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
-    },
-    "node_modules/@vue/language-core/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
     "node_modules/@vue/language-core/node_modules/computeds": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
@@ -506,24 +668,6 @@
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true
     },
-    "node_modules/@vue/language-core/node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/@vue/language-core/node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
-    },
     "node_modules/@vue/language-core/node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -560,20 +704,182 @@
       "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
       "dev": true
     },
-    "node_modules/@vue/language-core/node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/classnames": {
-      "version": "2.5.1",
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz",
+      "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.12",
+        "@vue/shared": "3.5.12"
+      },
+      "peerDependencies": {
+        "vue": "3.5.12"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
+      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/test-utils": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.6.tgz",
+      "integrity": "sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-beautify": "^1.14.9",
+        "vue-component-type-helpers": "^2.0.0"
+      }
+    },
+    "node_modules/abbrev": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chai": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.2.tgz",
+      "integrity": "sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/check-error": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
     "node_modules/copy-anything": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
@@ -592,6 +898,94 @@
       "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.7.tgz",
       "integrity": "sha512-sGj+G/ofKh+f6A4BtXLJwtcKJgMUsXYVUubfTo9grERiDGXncttefmue/fyQFvn8wfdyoD1KhDRYLfjkJFl0yw=="
     },
+    "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==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/editorconfig": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
+      "integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "9.0.1",
+        "semver": "^7.5.3"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/errno": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
@@ -606,6 +1000,80 @@
         "errno": "cli.js"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/expect-type": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.1.0.tgz",
+      "integrity": "sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -614,6 +1082,21 @@
       "license": "ISC",
       "optional": true
     },
+    "node_modules/happy-dom": {
+      "version": "15.8.2",
+      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-15.8.2.tgz",
+      "integrity": "sha512-MhU+SvFD6Ul002JPMY8WoKSV1EV+AK+sLfeqWluvUmD873G0DNXpsUdi7gmBgXo8Nwj44NeWCuWy8OmPDLqs1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.5.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-mimetype": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -642,6 +1125,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-network-error": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-network-error/-/is-network-error-1.1.0.tgz",
@@ -661,6 +1161,61 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/js-beautify": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.1.tgz",
+      "integrity": "sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.4",
+        "glob": "^10.3.3",
+        "js-cookie": "^3.0.5",
+        "nopt": "^7.2.0"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/less": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
@@ -693,6 +1248,29 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/loupe": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
+      "integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
     "node_modules/make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -738,6 +1316,39 @@
         "node": ">=4"
       }
     },
+    "node_modules/minimatch": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
+      "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/namespace-emitter": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/namespace-emitter/-/namespace-emitter-2.0.1.tgz",
@@ -778,6 +1389,22 @@
         "node": ">= 4.4.x"
       }
     },
+    "node_modules/nopt": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
+      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/p-retry": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-6.2.0.tgz",
@@ -795,6 +1422,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/parse-node-version": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
@@ -805,6 +1439,56 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathval": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
+      "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
     "node_modules/pify": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -825,6 +1509,13 @@
         "url": "https://opencollective.com/preact"
       }
     },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -867,23 +1558,237 @@
         "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=10"
+      }
+    },
+    "node_modules/shallow-equal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz",
+      "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg=="
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
+      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
+      "integrity": "sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinypool": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.1.tgz",
+      "integrity": "sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
       }
     },
-    "node_modules/shallow-equal": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz",
-      "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg=="
+    "node_modules/tinyrainbow": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz",
+      "integrity": "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
     },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+    "node_modules/tinyspy": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
+      "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
       "dev": true,
-      "license": "BSD-3-Clause",
-      "optional": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/tslib": {
@@ -965,6 +1870,28 @@
         }
       }
     },
+    "node_modules/vite-node": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.4.tgz",
+      "integrity": "sha512-kqa9v+oi4HwkG6g8ufRnb5AeplcRw8jUF6/7/Qz1qRQOXHImG8YnLbB+LLszENwFnoBl9xIf9nVdCFzNd7GQEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.3.7",
+        "pathe": "^1.1.2",
+        "vite": "^5.0.0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -1541,12 +2468,6 @@
         "win32"
       ]
     },
-    "node_modules/vite/node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "dev": true
-    },
     "node_modules/vite/node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -1617,12 +2538,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/vite/node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true
-    },
     "node_modules/vite/node_modules/postcss": {
       "version": "8.4.47",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
@@ -1686,13 +2601,70 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/vite/node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+    "node_modules/vitest": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.4.tgz",
+      "integrity": "sha512-eDjxbVAJw1UJJCHr5xr/xM86Zx+YxIEXGAR+bmnEID7z9qWfoxpHw0zdobz+TQAFOLT+nEXz3+gx6nUJ7RgmlQ==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "2.1.4",
+        "@vitest/mocker": "2.1.4",
+        "@vitest/pretty-format": "^2.1.4",
+        "@vitest/runner": "2.1.4",
+        "@vitest/snapshot": "2.1.4",
+        "@vitest/spy": "2.1.4",
+        "@vitest/utils": "2.1.4",
+        "chai": "^5.1.2",
+        "debug": "^4.3.7",
+        "expect-type": "^1.1.0",
+        "magic-string": "^0.30.12",
+        "pathe": "^1.1.2",
+        "std-env": "^3.7.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.1",
+        "tinypool": "^1.0.1",
+        "tinyrainbow": "^1.2.0",
+        "vite": "^5.0.0",
+        "vite-node": "2.1.4",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "@vitest/browser": "2.1.4",
+        "@vitest/ui": "2.1.4",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue": {
@@ -1715,6 +2687,13 @@
         }
       }
     },
+    "node_modules/vue-component-type-helpers": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.1.10.tgz",
+      "integrity": "sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue-tsc": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.6.tgz",
@@ -1732,74 +2711,6 @@
         "typescript": ">=5.0.0"
       }
     },
-    "node_modules/vue/node_modules/@babel/helper-string-parser": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/vue/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/vue/node_modules/@babel/parser": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.9.tgz",
-      "integrity": "sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==",
-      "dependencies": {
-        "@babel/types": "^7.25.9"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/vue/node_modules/@babel/types": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.9.tgz",
-      "integrity": "sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/vue/node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
-    },
-    "node_modules/vue/node_modules/@vue/compiler-core": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
-      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
-      "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.12",
-        "entities": "^4.5.0",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/vue/node_modules/@vue/compiler-dom": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
-      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
-      "dependencies": {
-        "@vue/compiler-core": "3.5.12",
-        "@vue/shared": "3.5.12"
-      }
-    },
     "node_modules/vue/node_modules/@vue/compiler-sfc": {
       "version": "3.5.12",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz",
@@ -1816,15 +2727,6 @@
         "source-map-js": "^1.2.0"
       }
     },
-    "node_modules/vue/node_modules/@vue/compiler-ssr": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
-      "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
-      "dependencies": {
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/shared": "3.5.12"
-      }
-    },
     "node_modules/vue/node_modules/@vue/reactivity": {
       "version": "3.5.12",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz",
@@ -1853,52 +2755,16 @@
         "csstype": "^3.1.3"
       }
     },
-    "node_modules/vue/node_modules/@vue/server-renderer": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz",
-      "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
-      "dependencies": {
-        "@vue/compiler-ssr": "3.5.12",
-        "@vue/shared": "3.5.12"
-      },
-      "peerDependencies": {
-        "vue": "3.5.12"
-      }
-    },
-    "node_modules/vue/node_modules/@vue/shared": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
-      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg=="
-    },
     "node_modules/vue/node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
-    "node_modules/vue/node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/vue/node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
-    "node_modules/vue/node_modules/magic-string": {
-      "version": "0.30.12",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
-      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0"
-      }
-    },
     "node_modules/vue/node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -1916,11 +2782,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/vue/node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
-    },
     "node_modules/vue/node_modules/postcss": {
       "version": "8.4.47",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
@@ -1948,12 +2809,155 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/vue/node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
       }
     }
   }
diff --git a/vite/package.json b/vite/package.json
index 31bdbd6b4a..873b63436a 100644
--- a/vite/package.json
+++ b/vite/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test:unit": "vitest"
   },
   "dependencies": {
     "@uppy/dashboard": "^4.1.1",
@@ -20,9 +21,14 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/compiler-dom": "^3.5.12",
+    "@vue/server-renderer": "^3.5.12",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^15.8.2",
     "less": "^4.2.0",
     "typescript": "^5.5.3",
     "vite": "^5.4.8",
+    "vitest": "^2.1.4",
     "vue-tsc": "^2.1.6"
   }
 }
diff --git a/vite/src/components/HiddenInput.vue b/vite/src/components/HiddenInput.vue
index 4efa14e523..d65e44f9e8 100644
--- a/vite/src/components/HiddenInput.vue
+++ b/vite/src/components/HiddenInput.vue
@@ -6,5 +6,5 @@ const props = defineProps<{
 </script>
 
 <template>
-  <input type="hidden" :name="props.name" :value="props.uploadedImageLocation" />
+  <input type="hidden" :name="props.name" :value="props.uploadedImageLocation || ''" />
 </template>
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index 284207c1be..e15e8cf424 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -157,8 +157,8 @@ uppy.on('upload-error', (_, __, response) => {
 
   if (typeof response === 'string') {
     try {
-      const { message } = JSON.parse(response);
-      errorMessage.value = message || defaultError;
+      const parsedResponse = JSON.parse(response);
+      errorMessage.value = parsedResponse?.message || defaultError;
     } catch {
       errorMessage.value = defaultError;
     }
@@ -190,19 +190,17 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
 </script>
 
 <template>
-  <div class="app-entry-point">
-    <HiddenInput v-if="hiddenInputName" :uploaded-image-location="uploadedImageLocation" :name="hiddenInputName" />
-    <UploadedLogoDisplay :uploaded-image-location="uploadedImageLocation" />
-    <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
-      :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
-      <Dashboard :uppy="uppy" :props="{
-        note: constraintsMessage,
-        proudlyDisplayPoweredByUppy: false,
-      }" />
-    </button>
-    <ImageEditorStatusDisplay v-if="isEditing" :image-dimensions="imageDimensions" />
-    <DashboardStatusDisplay :image-dimensions="imageDimensions" :error-message="errorMessage" :sr-only-error-message="srOnlyErrorMessage" />
-  </div>
+  <HiddenInput v-if="hiddenInputName" :uploaded-image-location="uploadedImageLocation" :name="hiddenInputName" />
+  <UploadedLogoDisplay :uploaded-image-location="uploadedImageLocation" />
+  <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
+    :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
+    <Dashboard :uppy="uppy" :props="{
+      note: constraintsMessage,
+      proudlyDisplayPoweredByUppy: false,
+    }" />
+  </button>
+  <ImageEditorStatusDisplay v-if="isEditing" :image-dimensions="imageDimensions" />
+  <DashboardStatusDisplay :error-message="errorMessage" :sr-only-error-message="srOnlyErrorMessage" />
 </template>
 
 <style scoped lang="less">
diff --git a/vite/src/components/UploadedLogoDisplay.vue b/vite/src/components/UploadedLogoDisplay.vue
index c92a1677f3..e038cae8f4 100644
--- a/vite/src/components/UploadedLogoDisplay.vue
+++ b/vite/src/components/UploadedLogoDisplay.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 <template>
   <div class="form-group thumbnail-container">
     <div class="control-label">Uploaded Logo</div>
-    <img v-if="props.uploadedImageLocation" :src="props.uploadedImageLocation" alt="Logo" />
+    <img v-if="props.uploadedImageLocation" :src="props.uploadedImageLocation" alt="Uploaded Logo" />
     <div v-else class="help-block">You did not yet upload a logo</div>
   </div>
 </template>
diff --git a/vite/src/tests/HiddenInput.test.ts b/vite/src/tests/HiddenInput.test.ts
new file mode 100644
index 0000000000..5fd12da44e
--- /dev/null
+++ b/vite/src/tests/HiddenInput.test.ts
@@ -0,0 +1,39 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import HiddenInput from '../components/HiddenInput.vue'
+
+const defaultProps = {
+  uploadedImageLocation: '/path/to/image.jpg',
+  name: 'hidden_input'
+}
+
+const createWrapper = (props = {}) => {
+  return mount(HiddenInput, {
+    props: {
+      ...defaultProps,
+      ...props
+    }
+  })
+}
+
+describe('HiddenInput', () => {
+  test('renders a hidden input with correct attributes', () => {
+    const wrapper = createWrapper()
+
+    const input = wrapper.find('input')
+    expect(input.exists()).toBe(true)
+    expect(input.attributes('type')).toBe('hidden')
+    expect(input.attributes('name')).toBe(defaultProps.name)
+    expect(input.attributes('value')).toBe(defaultProps.uploadedImageLocation)
+  })
+
+  test('handles null uploadedImageLocation', () => {
+    const wrapper = createWrapper({
+      uploadedImageLocation: null
+    })
+
+    const input = wrapper.find('input')
+    expect(input.exists()).toBe(true)
+    expect(input.attributes('value')).toBe('')
+  })
+})
\ No newline at end of file
diff --git a/vite/src/tests/ImageEditorStatusDisplay.test.ts b/vite/src/tests/ImageEditorStatusDisplay.test.ts
new file mode 100644
index 0000000000..7a6fe8fd27
--- /dev/null
+++ b/vite/src/tests/ImageEditorStatusDisplay.test.ts
@@ -0,0 +1,80 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ImageEditorStatusDisplay from '../components/ImageEditorStatusDisplay.vue'
+import { config } from '../config'
+
+const { maxHeight } = config
+
+describe('ImageEditorStatusDisplay', () => {
+  const createWrapper = (props = {}) => {
+    return mount(ImageEditorStatusDisplay, {
+      props: {
+        imageDimensions: { width: 800, height: 600 },
+        ...props
+      }
+    })
+  }
+
+  test('renders current dimensions correctly', () => {
+    const wrapper = createWrapper({
+      imageDimensions: { width: 1024, height: 768 }
+    })
+
+    expect(wrapper.text()).toContain('Current dimensions: 1024px × 768px')
+  })
+
+  test('does not render when dimensions are zero', () => {
+    const wrapper = createWrapper({
+      imageDimensions: { width: 0, height: 0 }
+    })
+
+    expect(wrapper.find('.status-display').exists()).toBe(false)
+  })
+
+  test('shows error when height exceeds maximum', () => {
+    const wrapper = createWrapper({
+      imageDimensions: { width: 800, height: maxHeight + 100 }
+    })
+
+    const errorElement = wrapper.find('.status-error')
+    expect(errorElement.exists()).toBe(true)
+    expect(errorElement.text()).toContain(`Height exceeds ${maxHeight}px limit`)
+  })
+
+  test('does not show error when height is within limit', () => {
+    const wrapper = createWrapper({
+      imageDimensions: { width: 800, height: maxHeight - 100 }
+    })
+
+    expect(wrapper.find('.status-error').exists()).toBe(false)
+  })
+
+  test('shows correct screen reader messages when height exceeds limit', () => {
+    const wrapper = createWrapper({
+      imageDimensions: { width: 800, height: maxHeight + 100 }
+    })
+
+    const srError = wrapper.find('.sr-only')
+    expect(srError.exists()).toBe(true)
+    expect(srError.text()).toContain(`Image height exceeds ${maxHeight} pixels`)
+  })
+
+  test('shows correct screen reader messages when height is within limit', () => {
+    const wrapper = createWrapper({
+      imageDimensions: { width: 800, height: maxHeight - 100 }
+    })
+
+    const srSuccess = wrapper.find('.sr-only')
+    expect(srSuccess.exists()).toBe(true)
+    expect(srSuccess.text()).toBe('Image height is valid')
+  })
+
+  test('handles edge case at exact maxHeight', () => {
+    const wrapper = createWrapper({
+      imageDimensions: { width: 800, height: maxHeight }
+    })
+
+    expect(wrapper.find('.status-error').exists()).toBe(false)
+    expect(wrapper.find('.sr-only').text()).toBe('Image height is valid')
+  })
+})
\ No newline at end of file
diff --git a/vite/src/tests/ImageEditorStatusDisplay.type.test.ts b/vite/src/tests/ImageEditorStatusDisplay.type.test.ts
new file mode 100644
index 0000000000..c6445b1bea
--- /dev/null
+++ b/vite/src/tests/ImageEditorStatusDisplay.type.test.ts
@@ -0,0 +1,16 @@
+import { describe, expectTypeOf, test } from 'vitest'
+import type { PropType } from 'vue'
+import ImageEditorStatusDisplay from '../components/ImageEditorStatusDisplay.vue'
+
+interface ImageDimensions {
+  width: number
+  height: number
+}
+
+describe('ImageEditorStatusDisplay types', () => {
+  test('prop types are correct', () => {
+    expectTypeOf<{
+      imageDimensions: PropType<ImageDimensions>
+    }>().toMatchTypeOf<typeof ImageEditorStatusDisplay['props']>()
+  })
+})
\ No newline at end of file
diff --git a/vite/src/tests/LogoUploadUppy.test.ts b/vite/src/tests/LogoUploadUppy.test.ts
new file mode 100644
index 0000000000..97072e777b
--- /dev/null
+++ b/vite/src/tests/LogoUploadUppy.test.ts
@@ -0,0 +1,129 @@
+import { test, expect, describe, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import LogoUploadUppy from '../components/LogoUploadUppy.vue'
+import { nextTick } from 'vue'
+
+const createEventEmitter = () => {
+  const listeners: Record<string, Function[]> = {}
+  return {
+    on: vi.fn((event: string, callback: Function) => {
+      listeners[event] = listeners[event] || []
+      listeners[event].push(callback)
+    }),
+    emit: vi.fn((event: string, ...args: any[]) => {
+      if (listeners[event]) {
+        listeners[event].forEach(callback => callback(...args))
+      }
+    }),
+    getPlugin: vi.fn(() => ({
+      openFileEditor: vi.fn()
+    }))
+  }
+}
+
+vi.mock('@uppy/core', () => ({
+  default: vi.fn().mockImplementation(() => {
+    const emitter = createEventEmitter()
+    return {
+      ...emitter,
+      use: vi.fn().mockReturnThis(),
+    }
+  })
+}))
+
+const defaultProps = {
+  endpoint: '/api/upload',
+  imageLocation: null,
+  hiddenInputName: 'logo_image'
+}
+
+const createMockFile = (overrides = {}) => ({
+  id: 'test-file-1',
+  name: 'test.jpg',
+  type: 'image/jpeg',
+  data: new Blob(),
+  size: 1234,
+  progress: {
+    percentage: 0,
+    bytesUploaded: 0,
+    bytesTotal: 1234
+  },
+  ...overrides
+})
+
+const createWrapper = (props = {}) => {
+  return mount(LogoUploadUppy, {
+    props: {
+      ...defaultProps,
+      ...props
+    }
+  })
+}
+
+describe('LogoUploadUppy', () => {
+  test('renders properly with default props', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.find('.uppy-dashboard-wrapper').exists()).toBe(true)
+  })
+
+  test('shows hidden input only when hiddenInputName is provided', async () => {
+    const wrapper = createWrapper({
+      hiddenInputName: undefined
+    })
+
+    expect(wrapper.find('input[type="hidden"]').exists()).toBe(false)
+
+    await wrapper.setProps({ hiddenInputName: 'test_input' })
+    expect(wrapper.find('input[type="hidden"]').exists()).toBe(true)
+  })
+
+  test('updates uploadedImageLocation when image is successfully uploaded', async () => {
+    const wrapper = createWrapper()
+
+    const vm = wrapper.vm as any
+    const response = {
+      body: {
+        success: true,
+        image_location: '/uploads/test.jpg'
+      }
+    }
+
+    vm.uppy.emit('upload-success', {}, response)
+    await nextTick()
+
+    expect(wrapper.emitted()).toBeTruthy()
+    expect(vm.uploadedImageLocation).toBe('/uploads/test.jpg')
+  })
+
+  test('handles error states correctly', async () => {
+    const wrapper = createWrapper()
+
+    const vm = wrapper.vm as any
+
+    vm.uppy.emit('upload-error', null, null, null)
+    await nextTick()
+    expect(vm.errorMessage).toBe('Failed to upload file. Please try again.')
+
+    const errorResponse = JSON.stringify({ message: 'Custom error message' })
+    vm.uppy.emit('upload-error', null, null, errorResponse)
+    await nextTick()
+    expect(vm.errorMessage).toBe('Custom error message')
+  })
+
+  test('manages focus states correctly', async () => {
+    const wrapper = createWrapper()
+
+    const vm = wrapper.vm as any
+    expect(vm.isWrapperFocusable).toBe(true)
+
+    const mockFile = createMockFile()
+
+    vm.uppy.emit('file-added', mockFile)
+    await nextTick()
+    expect(vm.isWrapperFocusable).toBe(false)
+
+    vm.uppy.emit('file-removed', mockFile)
+    await nextTick()
+    expect(vm.isWrapperFocusable).toBe(true)
+  })
+})
diff --git a/vite/src/tests/UploadedLogoDisplay.test.ts b/vite/src/tests/UploadedLogoDisplay.test.ts
new file mode 100644
index 0000000000..2ecfc49676
--- /dev/null
+++ b/vite/src/tests/UploadedLogoDisplay.test.ts
@@ -0,0 +1,33 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import UploadedLogoDisplay from '../components/UploadedLogoDisplay.vue'
+
+describe('UploadedLogoDisplay', () => {
+  const defaultImageLocation = '/path/to/logo.jpg'
+
+  const createWrapper = (props = {}) => {
+    return mount(UploadedLogoDisplay, {
+      props
+    })
+  }
+
+  test('displays image when uploadedImageLocation is provided', () => {
+    const wrapper = createWrapper({
+      uploadedImageLocation: defaultImageLocation
+    })
+
+    const img = wrapper.find('img')
+    expect(img.exists()).toBe(true)
+    expect(img.attributes('src')).toBe(defaultImageLocation)
+    expect(img.attributes('alt')).toBe('Uploaded Logo')
+    expect(wrapper.find('.help-block').exists()).toBe(false)
+  })
+
+  test('displays help text when uploadedImageLocation is not provided', () => {
+    const wrapper = createWrapper()
+
+    expect(wrapper.find('img').exists()).toBe(false)
+    expect(wrapper.find('.help-block').exists()).toBe(true)
+    expect(wrapper.find('.help-block').text()).toBe('You did not yet upload a logo')
+  })
+})
\ No newline at end of file
diff --git a/vite/tsconfig.node.json b/vite/tsconfig.node.json
index 0d3d71446a..322b5220b8 100644
--- a/vite/tsconfig.node.json
+++ b/vite/tsconfig.node.json
@@ -16,7 +16,8 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vitest/globals"]
   },
   "include": ["vite.config.ts"]
 }
diff --git a/vite/vite.config.ts b/vite/vite.config.ts
index 5e12cc5900..97b4139a7a 100644
--- a/vite/vite.config.ts
+++ b/vite/vite.config.ts
@@ -1,3 +1,4 @@
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
@@ -20,5 +21,9 @@ export default defineConfig({
     origin: 'http://localhost:5173',
     strictPort: true,
     host: true
+  },
+  test: {
+    globals: true,
+    environment: 'happy-dom'
   }
 })

From fa9044034376ecbd4dedd7e8e4bb710dca9e2650 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Mon, 4 Nov 2024 10:07:45 +0700
Subject: [PATCH 24/41] feat: validate image height before uploading

---
 vite/src/components/LogoUploadUppy.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index e15e8cf424..fc66b4e40c 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -61,7 +61,17 @@ const uppy = new Uppy({
     maxNumberOfFiles: 1,
     allowedFileTypes: ['image/*'],
     maxFileSize: maxSize,
-  }
+  },
+  onBeforeUpload: () => {
+		if (imageDimensions.height > maxHeight) {
+			uppy.log(
+				errorMessage.value ?? ''
+			);
+			uppy.info(errorMessage.value ?? '', 'error');
+			return false;
+		}
+		return true;
+	},
 })
 
 uppy.use(ImageEditor, {
@@ -105,7 +115,10 @@ function openFileEditor(file: UppyFile<Meta, Record<string, never>>) {
 }
 
 async function handleImageHeightMsgs(file: UppyFile<Meta, Record<string, never>>, cbTooTall?: () => void) {
-  const { height } = await getUppyImgDimensions(file);
+  const { height, width } = await getUppyImgDimensions(file);
+
+  imageDimensions.width = width;
+  imageDimensions.height = height;
 
   if (height > maxHeight) {
     errorMessage.value = `Image height (${height}px) exceeds ${maxHeight}px - please crop the image using the editor`;

From 6d3f072e6b82f37834fd9c74069f7286d92a9e08 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Mon, 4 Nov 2024 10:20:41 +0700
Subject: [PATCH 25/41] chore: use production version of vue app

---
 protected/views/adminProject/_form.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index d036caaff2..b6d162cd9d 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -55,7 +55,7 @@
       <div class="spinner"></div>
     </div>
     <?php
-    $isDev = true; // TODO use a way to detect if we are in dev or prod environment
+    $isDev = false; // TODO use a way to detect if we are in dev or prod environment
     ?>
     <?php if ($isDev): ?>
       <script type="module" src="http://localhost:5173/@vite/client"></script>

From a33135f3c4949c5e10e6e9462d4215f146757a92 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Mon, 4 Nov 2024 16:09:35 +0700
Subject: [PATCH 26/41] feat: tweak test scripts

---
 vite/.gitignore   | 4 ++--
 vite/package.json | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/vite/.gitignore b/vite/.gitignore
index c9382336b7..88662914e1 100644
--- a/vite/.gitignore
+++ b/vite/.gitignore
@@ -23,5 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 
-mock-files
-tsconfig.*.tsbuildinfo
\ No newline at end of file
+tsconfig.*.tsbuildinfo
+coverage
\ No newline at end of file
diff --git a/vite/package.json b/vite/package.json
index 873b63436a..f0329946b7 100644
--- a/vite/package.json
+++ b/vite/package.json
@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
-    "test:unit": "vitest"
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest --watch",
+    "test:unit:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@uppy/dashboard": "^4.1.1",

From 9110caed24103401defa53864b80ba8c8d080408 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Mon, 4 Nov 2024 20:17:40 +0700
Subject: [PATCH 27/41] feat: setup prod env

---
 .gitignore                             |  1 +
 ops/deployment/docker-compose.yml      | 13 ++++++++-----
 protected/views/adminProject/_form.php |  6 +++---
 up.sh                                  |  4 +++-
 vite/Dockerfile-prod                   |  7 -------
 vite/package-lock.json                 |  8 ++++----
 vite/package.json                      |  9 +++++++--
 vite/vite.config.ts                    |  1 -
 8 files changed, 26 insertions(+), 23 deletions(-)
 delete mode 100644 vite/Dockerfile-prod

diff --git a/.gitignore b/.gitignore
index 5c8948387c..d2eec477f6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -91,6 +91,7 @@ vault
 staging_vault
 live_vault
 js/fuw-*
+js/vite-logo-upload-*
 
 # docs
 docs/apidocs/phpdoc-cache-*
diff --git a/ops/deployment/docker-compose.yml b/ops/deployment/docker-compose.yml
index 8c9f237a69..59b17b1d85 100644
--- a/ops/deployment/docker-compose.yml
+++ b/ops/deployment/docker-compose.yml
@@ -721,13 +721,16 @@ services:
     ports:
       - 5173:5173
 
+  # Using similar workflow as js service
   vite-project-image-location-prod:
-    build:
-      context: ${APPLICATION}/vite
-      dockerfile: Dockerfile-prod
-      args:
-        - NODE_VERSION=$NODE_VERSION
+    image: node:$NODE_VERSION-bullseye-slim
+    working_dir: /var/www/vite
+    volumes:
+      - ${APPLICATION}/:/var/www
     shm_size: '1gb'
+    command: bash -c "npm run test:unit ; npm run build ; npm run deploy"
+    networks:
+      - web-tier
 
 networks:
   web-tier:
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index b6d162cd9d..2b790d704c 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -36,7 +36,7 @@
 
     $existingImageLocation = $model->image_location ?: null;
     $uploadLogoEndpoint = Yii::app()->createUrl('/adminProject/uploadTempLogo');
-    $manifestPath = Yii::getAlias('js/vite-logo-upload/.vite/manifest.json');
+    $manifestPath = Yii::getAlias('js/vite-logo-upload-1.0.0/.vite/manifest.json');
     $manifest = [];
 
     if (file_exists($manifestPath)) {
@@ -65,13 +65,13 @@
       <!-- CSS for the entry point -->
       <?php if (isset($entry['css'])): ?>
         <?php foreach ($entry['css'] as $cssFile): ?>
-          <link rel="stylesheet" href="/js/vite-logo-upload/<?= $cssFile ?>" />
+          <link rel="stylesheet" href="/js/vite-logo-upload-1.0.0/<?= $cssFile ?>" />
         <?php endforeach; ?>
       <?php endif; ?>
 
       <!-- Main script file -->
       <?php if (isset($entry['file'])): ?>
-        <script type="module" src="/js/vite-logo-upload/<?= $entry['file'] ?>"></script>
+        <script type="module" src="/js/vite-logo-upload-1.0.0/<?= $entry['file'] ?>"></script>
       <?php endif; ?>
     <?php endif; ?>
 
diff --git a/up.sh b/up.sh
index 7842ebf789..d48f137be6 100755
--- a/up.sh
+++ b/up.sh
@@ -65,7 +65,9 @@ docker-compose run --rm js bash -c "cd /var/www/ops/scripts/ && npm install"
 docker-compose run --rm js
 
 # Build and deploy the vite-project-image-location dev server
-docker-compose up -d --build vite-project-image-location-dev
+# docker-compose run --rm -w /var/www/vite vite-project-image-location-prod bash -c "npm install"
+docker-compose run --rm vite-project-image-location-prod bash -c "npm install"
+docker-compose run --rm vite-project-image-location-prod
 
 # Start Chome web driver container services for acceptance testing
 docker-compose up -d chrome
diff --git a/vite/Dockerfile-prod b/vite/Dockerfile-prod
deleted file mode 100644
index be1e8b6ce5..0000000000
--- a/vite/Dockerfile-prod
+++ /dev/null
@@ -1,7 +0,0 @@
-ARG NODE_VERSION
-FROM node:${NODE_VERSION}-bullseye-slim as BUILD
-WORKDIR /app
-COPY package*.json .
-RUN npm ci
-COPY . .
-RUN npm run build
\ No newline at end of file
diff --git a/vite/package-lock.json b/vite/package-lock.json
index c8a4562db0..ec5f9200b7 100644
--- a/vite/package-lock.json
+++ b/vite/package-lock.json
@@ -1,12 +1,12 @@
 {
-  "name": "vite",
-  "version": "0.0.0",
+  "name": "vite-project-uppy-logo-uploader",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "vite",
-      "version": "0.0.0",
+      "name": "vite-project-uppy-logo-uploader",
+      "version": "1.0.0",
       "dependencies": {
         "@uppy/dashboard": "^4.1.1",
         "@uppy/drag-drop": "^4.0.3",
diff --git a/vite/package.json b/vite/package.json
index f0329946b7..aee2bb353c 100644
--- a/vite/package.json
+++ b/vite/package.json
@@ -1,11 +1,13 @@
 {
-  "name": "vite",
+  "name": "vite-project-uppy-logo-uploader",
   "private": true,
-  "version": "0.0.0",
+  "description": "Vite project for uppy logo uploader",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
+    "deploy": "cp -r dist /var/www/js/vite-logo-upload-$npm_package_version",
     "preview": "vite preview",
     "test:unit": "vitest run",
     "test:unit:watch": "vitest --watch",
@@ -32,5 +34,8 @@
     "vite": "^5.4.8",
     "vitest": "^2.1.4",
     "vue-tsc": "^2.1.6"
+  },
+  "author": {
+    "name": "Luis Martinez"
   }
 }
diff --git a/vite/vite.config.ts b/vite/vite.config.ts
index 97b4139a7a..94113e019c 100644
--- a/vite/vite.config.ts
+++ b/vite/vite.config.ts
@@ -13,7 +13,6 @@ export default defineConfig({
     modulePreload: {
       polyfill: false,
     },
-    outDir: '../js/vite-logo-upload',
     emptyOutDir: true,
   },
   server: {

From 7c863a43dd7bc4d3a30fa9a8cbf062d7a11f4cf0 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Mon, 4 Nov 2024 22:17:53 +0700
Subject: [PATCH 28/41] refactor: cleanup vite app dev setup

---
 ops/deployment/docker-compose.yml      | 16 ---------
 protected/views/adminProject/_form.php |  2 +-
 vite/Dockerfile-dev                    |  8 -----
 vite/README.md                         | 46 ++++++++++++++------------
 4 files changed, 25 insertions(+), 47 deletions(-)
 delete mode 100644 vite/Dockerfile-dev

diff --git a/ops/deployment/docker-compose.yml b/ops/deployment/docker-compose.yml
index 59b17b1d85..3906c15f61 100644
--- a/ops/deployment/docker-compose.yml
+++ b/ops/deployment/docker-compose.yml
@@ -705,22 +705,6 @@ services:
       - le_config:/ca
     command: --domains '*.gigasciencejournal.com'
 
-  # Vite dev server for project image location
-  vite-project-image-location-dev:
-    build:
-      context: ${APPLICATION}/vite
-      dockerfile: Dockerfile-dev
-      args:
-        - NODE_VERSION=$NODE_VERSION
-    volumes:
-      # share host source code with the container to allow hot-reloading
-      - ${APPLICATION}/vite:/app:delegated
-      # use local node_modules
-      - /app/node_modules
-    shm_size: '1gb' # to avoid a known issue
-    ports:
-      - 5173:5173
-
   # Using similar workflow as js service
   vite-project-image-location-prod:
     image: node:$NODE_VERSION-bullseye-slim
diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index 2b790d704c..65f84c7174 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -55,7 +55,7 @@
       <div class="spinner"></div>
     </div>
     <?php
-    $isDev = false; // TODO use a way to detect if we are in dev or prod environment
+    $isDev = true; // TODO use a way to detect if we are in dev or prod environment
     ?>
     <?php if ($isDev): ?>
       <script type="module" src="http://localhost:5173/@vite/client"></script>
diff --git a/vite/Dockerfile-dev b/vite/Dockerfile-dev
deleted file mode 100644
index f42a63b9d7..0000000000
--- a/vite/Dockerfile-dev
+++ /dev/null
@@ -1,8 +0,0 @@
-ARG NODE_VERSION
-FROM node:${NODE_VERSION}-bullseye-slim
-WORKDIR /app
-COPY package*.json .
-RUN npm ci
-COPY . .
-EXPOSE 5173
-CMD ["npm", "run", "dev"]
\ No newline at end of file
diff --git a/vite/README.md b/vite/README.md
index ae9f4c2750..e0978c6542 100644
--- a/vite/README.md
+++ b/vite/README.md
@@ -16,34 +16,36 @@
 
 ## Usage
 
-### Dev
+## Local dev
 
-Run `./up.sh` script from root. This should build and run the docker container with the vite dev server and hot reloading
+If you need to do local development, simply run the following commands (you will need `node` and `npm` installed on your machine):
 
-Alternatively, run and build isolated from command line:
+```bash
+cd vite
+npm install
+npm run dev
+```
 
-Useful docker commands:
+The app should be served from http://localhost:5173
 
-```bash
-# (re)build and run container (e.g. if Dockerfile changed)
-NODE_VERSION=20.11.0 APPLICATION=../.. docker-compose -f ops/deployment/docker-compose.yml up --build vite-project-image-location-dev -d
-# run container
-NODE_VERSION=20.11.0 APPLICATION=../.. docker-compose -f ops/deployment/docker-compose.yml up vite-project-image-location-dev -d
-# stop container
-docker-compose down vite-project-image-location-dev
-# remove dangling images after building
-docker image prune -f
-# remove dangling volumes
-docker volume prune -f
-# Full cleanup
-docker system prune -a -f --volumes
+Because the vite config is not using a index.html as entry point, no app is visible directly on that URL though.
+
+Then make sure the entry point in the php application is using the local dev server
+
+```php
+<script type="module" src="http://localhost:5173/@vite/client"></script>
+<script type="module" src="http://localhost:5173/src/main.ts"></script>
 ```
 
-Dependencies are installed within the container. To install a new dependency:
+### Production
+
+Run `./up.sh` script from root. This should bundle the app and copy it to the js folder for the php application to use.
+
+To build the app in isolation from the rest of the commands, you can run the following commands from root:
 
 ```bash
-# access the container (run from root folder)
-docker-compose exec vite-project-image-location-dev sh
-# install new dependency
-npm install <package-name>
+NODE_VERSION=20.11.0 APPLICATION=../.. docker-compose run --rm vite-project-image-location-prod bash -c "npm install"
+NODE_VERSION=20.11.0 APPLICATION=../..docker-compose run --rm vite-project-image-location-prod
 ```
+
+Make sure the entry point of the php application is using the bundled files. You can see an example in `protected/views/adminProject/_form.php`
\ No newline at end of file

From 61cf404008c128b558593e27040ca5bc9a6f77e7 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Mon, 4 Nov 2024 22:27:58 +0700
Subject: [PATCH 29/41] chor: clean up readme

---
 vite/README.md | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/vite/README.md b/vite/README.md
index e0978c6542..5de69d4ab6 100644
--- a/vite/README.md
+++ b/vite/README.md
@@ -1,22 +1,8 @@
 # Vue client for project image location
 
-## Tasks
-
-- [x] add sr-only text to browse files button: upload logo, please upload one file as logo. maximum height, etc
-- [x] adapt style to match gigadb theme, in the style.css file or in the component itself, or even better use directly the gigadb styles
-- [ ] try to use variables.less for colors
-- [x] create adds a new image to project
-- [x] update overrides image (delete old and create new)
-- [x] delete deletes image
-- [x] refactor and delete logs
-- [x] run related test suites
-- [-] write new tests to cover new functionality
-- [x] should work in production (i.e. prod container)
-- [ ] replace local values by production values
-
 ## Usage
 
-## Local dev
+### Local dev
 
 If you need to do local development, simply run the following commands (you will need `node` and `npm` installed on your machine):
 

From 14a144cce949fd6570b37e27a7a6ea862d188ef7 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Tue, 5 Nov 2024 09:13:21 +0700
Subject: [PATCH 30/41] feat: separates form buttons from uppy widget

---
 vite/src/components/LogoUploadUppy.vue | 28 ++++++++++++++++----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index fc66b4e40c..d3940ea5b3 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -203,17 +203,19 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
 </script>
 
 <template>
-  <HiddenInput v-if="hiddenInputName" :uploaded-image-location="uploadedImageLocation" :name="hiddenInputName" />
-  <UploadedLogoDisplay :uploaded-image-location="uploadedImageLocation" />
-  <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
-    :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
-    <Dashboard :uppy="uppy" :props="{
-      note: constraintsMessage,
-      proudlyDisplayPoweredByUppy: false,
-    }" />
-  </button>
-  <ImageEditorStatusDisplay v-if="isEditing" :image-dimensions="imageDimensions" />
-  <DashboardStatusDisplay :error-message="errorMessage" :sr-only-error-message="srOnlyErrorMessage" />
+  <div class="logo-upload-uppy">
+    <HiddenInput v-if="hiddenInputName" :uploaded-image-location="uploadedImageLocation" :name="hiddenInputName" />
+    <UploadedLogoDisplay :uploaded-image-location="uploadedImageLocation" />
+    <button :tabindex="isWrapperFocusable ? 0 : -1" type="button" class="uppy-dashboard-wrapper"
+      :aria-label="`Upload Logo. ${srOnlyConstraintsMessage}`" @keydown.enter="triggerUppyButton">
+      <Dashboard :uppy="uppy" :props="{
+        note: constraintsMessage,
+        proudlyDisplayPoweredByUppy: false,
+      }" />
+    </button>
+    <ImageEditorStatusDisplay v-if="isEditing" :image-dimensions="imageDimensions" />
+    <DashboardStatusDisplay :error-message="errorMessage" :sr-only-error-message="srOnlyErrorMessage" />
+  </div>
 </template>
 
 <style scoped lang="less">
@@ -223,6 +225,10 @@ uppy.on('file-editor:complete', async (file: UppyFile<Meta, Record<string, never
 @color-gigadb-green-800: #0d6e36;
 @color-true-white: #ffffff;
 
+.logo-upload-uppy {
+  margin-bottom: 20px;
+}
+
 .uppy-dashboard-wrapper {
   width: 100%;
   background: none;

From d9dc59e1bf72e80524c3f611c6df52f2cdc8eb21 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Tue, 5 Nov 2024 09:35:51 +0700
Subject: [PATCH 31/41] chore: reset env

---
 protected/views/adminProject/_form.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index 65f84c7174..3860823151 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -55,7 +55,7 @@
       <div class="spinner"></div>
     </div>
     <?php
-    $isDev = true; // TODO use a way to detect if we are in dev or prod environment
+    $isDev = false;
     ?>
     <?php if ($isDev): ?>
       <script type="module" src="http://localhost:5173/@vite/client"></script>

From a15de36ae31d0737172623d377f502867715d4cb Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Tue, 5 Nov 2024 10:30:14 +0700
Subject: [PATCH 32/41] fix: typo

---
 vite/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vite/README.md b/vite/README.md
index 5de69d4ab6..18331d774e 100644
--- a/vite/README.md
+++ b/vite/README.md
@@ -31,7 +31,7 @@ To build the app in isolation from the rest of the commands, you can run the fol
 
 ```bash
 NODE_VERSION=20.11.0 APPLICATION=../.. docker-compose run --rm vite-project-image-location-prod bash -c "npm install"
-NODE_VERSION=20.11.0 APPLICATION=../..docker-compose run --rm vite-project-image-location-prod
+NODE_VERSION=20.11.0 APPLICATION=../.. docker-compose run --rm vite-project-image-location-prod
 ```
 
 Make sure the entry point of the php application is using the bundled files. You can see an example in `protected/views/adminProject/_form.php`
\ No newline at end of file

From 673784e2e76fab1cd12c2caaa5f41e0f687de891 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Tue, 5 Nov 2024 11:46:28 +0700
Subject: [PATCH 33/41] feat: adds e2e test of the logo upload flow

---
 playwright/images/G10Klogo.jpg                | Bin 0 -> 7702 bytes
 playwright/images/bgi_logo_new.png            | Bin 0 -> 9574 bytes
 playwright/images/tall-image.png              | Bin 0 -> 280 bytes
 playwright/package.json                       |   3 +-
 .../tests/admin-project-logo-upload.spec.js   | 112 ++++++++++++++++++
 vite/src/components/UploadedLogoDisplay.vue   |   4 +-
 6 files changed, 116 insertions(+), 3 deletions(-)
 create mode 100644 playwright/images/G10Klogo.jpg
 create mode 100644 playwright/images/bgi_logo_new.png
 create mode 100644 playwright/images/tall-image.png
 create mode 100644 playwright/tests/admin-project-logo-upload.spec.js

diff --git a/playwright/images/G10Klogo.jpg b/playwright/images/G10Klogo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..47d74b4f40985c497c43c69a408e3a361aa49a83
GIT binary patch
literal 7702
zcmbW5cTm$!_vizmN|Po<1f+KqK@ceqA~ga6LMQ@Ck4Wzlh@yaW4N_DfD!oQ(=m><~
zq(cxws8Rw11OkEZ!}q@P+?o5=z4z>XXV1*{oSpO8vpZ*J&!^890GADQ4Riq%6chmc
ziv~Ey0bc5aKwJR;BO`zm005u^P*bo0fEOCYMFUXq0;vC^0|15;SO3+`C?x)CLkR%H
zKmb(#wXwMv|H{S8f4%=ZQhuTQ*COr<@Lyf^uj%<LKpQ|wLGia!Ui1qAQUm`A4HXrT
znwEx^mX?NwhL(<jo|f(s9SsdV6a6Iy21Z6kT6!jCCPwB9mErFse|>@f@ug;<qoHH?
zf0pwf09HDHDj*I>Aq1dgr2w*0oTC8(7bMgd>-BfZ{woxeKq~5sh%Vx|FsQkF5k3$|
zc@Zo%)x|<kgkSszP_a_8UB9VC!*2SNR>+q_;nn-Ebi(&4+BnTdc13PE`bE-Ty28cH
z!z(H#E+HwUsB~Ld<&LWMeH~preFH=DM;4Y~D{C7kXBSsDcgQpUfWV;OkkA*e-$X^n
zyp4^6r+i3FOV9ZD>03^2UVcGgQE_Eebxkd*uD+qY1Krux-P7AQIyOErIW;|l!7VN=
zudJ^9Uf&?>?f*GAJR%;S{N<tm0RI=(zhwUh7wZKV<wXvtX#a9iPzGOoKvpX1>o;lG
zv`lHA`mzftyrSc{_x@`|8@=!?vt3R{zmZE<L=<tNguiJ2A^X1ri~Rp0`xoqgb726C
zK#Ggx0a*c>fU^$->Xs5kUs$_zXaT07)`cr5S>@deNo(_`o4s>?4tfa!=y+H(nRWaC
z5oe}Tu#S<fnzx_3kCf866uz!jL*19~DwWYcu`O8e`3^?l@b&K6R>y9`Q73{!PV}{L
zjgZ8oggv<K<Et6AC|c^bT}x5ddXPiOkr6y+MXeA7W(-73FZ?}q^56;_E==Gsvv%(=
zPLGwDq~{9w31a8)eA`)7mx+s+b~$$HGEcREo4$F`EJqSQ+4Lym?_RyLcDY*$X~Gm!
zAeCC+9i(w26SNA)&p-y<ihto-<j(<ZVPC83>T8JC76KbtO@wq{C3cnFGEd*?UDo~D
z;?nV?PCC<nvMC=+W<V06)xpDcBd0(Ss(tS>gkK?TRd|7qrkMxotO~Y};lS8J2~{U(
zCMcenbeh?3D))Ng99V1yDTN-->04fP+__p^!Y<nWKGoIMe@I`v!ht9Vi}5C3TW^GV
zm#?=-dZ-NU8&D|+39Y#+&@Gu>ecR#8Sg*n}{OqLIyhmarVNU&O4aRfb<8118ghy;%
z7qRKlx-P1jBkS8@>Sss*$o6(haP1khHV%2pRbZcPVMUe?G1rS6=rKU(M_Y@~&p_+l
zfEvg~EaZ2@+Sw<VhbC>rcs5tcL!v{e%`;6W=eRvZaGZw$H}soTF2%dsS3RJ8(}K4b
z9z`gUrvxe{TS)@M-|pE;6N*e0c^&r-xt{brN+=2uU=!1Wa`p(`EN-nh!rv^4=o8@k
zGt9Q$0zGj;RCv62q2Hr)m4}Y~e$YGZrB&S_%lo=`+od{h+N2KBbLONe%bBw^W|QvY
zTB9VZ2W#_*cxmJdjTi2tbHBH1-L}A8NQ``!0L3XxefVv}wT%`bqE~I<Ibc>pz&E(i
zsy{jNu{9fa_xR4epjRoG3w|0*=YYs)NNaU)Ty#81OuOKjiMLleZ&DF*=(+4xa6q)Q
zQ*3$ukQUI{DWQK5x=%77W9Jo#PGLn*o=K%J@z<T2jvCj9NuwDihfKS=p!)Y<CaDf#
z$&Z)(N~e2%MZ6)tKL=2?5%maM3)BTMP<7m(>ip4z(WXS<$JGqimJC+lDIlpQk7@jy
zV*0YWxrg)y)%XSIjWa8JtJ2#iFdinM`I8O!z{$<l-wy{XX7XPA?A!3y&8|wo^GMo}
zw-pRZ+|Sl{yz1S`mKM$dl@6zz``xX4=KzSTW}C+C-R@}5(m;q?tawdrUF70$zk$e{
zRPWt#%I;_$yQa(q$Cer*isT#uUKmQwH$t|RZGt}yE;j^brN@*yJc2K7++diENuaXU
z#gR}hPDd{#qcxKd72aD%=Kv;Al2wR*Tef`C@$>ENl@!Zq!-040$s%7f_VVJM4?nb>
zY<=>%U4!*3NlhGwr^T^E3)~+$n6p$@4J*^=0u}z5aZZFwlez?M73&M>h4Mvg8_?i7
zgMDd$)Nj!3962T66&tw*tV6wAwp-$lnR)Mz3(^+oM~{mw&C|-Ds(!gChUWlwc+DY%
z*MVN+R!GjHUHP}C79>5Q{S<B}Hb1?gDsJ`6OD?A}kwI<hDb4gO@GgajAB(W~$6YtP
zLvh5&N$NPZavM>Apjj_<Y9ypJ!MmM=3;Xl3zDSC8jT~iVb5OCSIHb4Mpzv9Q*~bL8
zxKnDvQm1m-rc?0k^dg95Ey2bXA@_ju3_}wjszn|9E7wm8d3UrG0(%RG^2Xy<5#`VP
zL-^aWSB>~NW*EM{>lggE$RMn1_c1QL%Q)mmw+lbJe@u;+a!^hAVvgs;fp^VZW466G
z`nOr}_mM<B?t)-Z&O1ixS=9+)b=@DWMV*e!?>7^u=iYGDHlU&pW)0GPJfxN17$xQ3
zVM53GY4QEpOiAE>Z8Co47$EF~|D~t$6t0l_()XR7;0<9$j%5}!Jq$9O%nu~6yha9i
zI-pfWzt<)ZJxs=g_x=>&_h0ed9$^vlMWmu=9Xpsom(F5{I$?`2{!`wc<t?{<n-XE2
zyc21I+D6fvLRZs{ABD#04y)f2W;RrOznns+wBS0UxYyI}muZuFh&7RGDJjoNM&XiV
z^U$}746}H;9vZZGRPU^nA)JqFj;dREVeVKaC=E&cR6My*pjt=vSLD#(woz8D5$|BI
zMjNTl>DGOo<fAT%H37AVq1Ihfd0z6Ez1+{mF*VU|A<7;0GOf*3BT9|OSaU8jo32Ww
zDlPW=P9IYSe1<l1B`<L!2Uj&w(Z~e{mXIAoB6zn7G}<JI%W-T#CMbo4-$}a@ECXMk
zw25k$&-mW!!<v;zSpC}5R;Ec5M@1<<T~gOx6#I(Pe0!4ip6ZI<dPCIsy|91@Mz+o(
zds~d{jl>*@pE_4N_z)t`xkei$UB)GzWQBItE9IU3v9X^Do1H(h#H_C@`fqvNQjTU$
z)Zz6Ff+weDBBlNP@<Q@Is2{nW%|#rIIn_tDD@}?;hJDct6}gd-<G)d89hdCby=ji;
zbkLvhteKO-kaV-9OF+NjA!3Ork)9t4mDvlCbQ%YR4IBesmKhV4Mq8d@i%t}ukJfg>
z$>R=HQ3ZG{oGeQRS+eoUiD-7cXYt0vP}`v##_Pi~4T)dpQe=nw=zt=u`@{Ioa{#pz
zL43=OWbQsM&^W55UP_eP2gMzRJegP0KT><^vx0W_d-?KVWb<AKN$00wLZx#F<;_h8
zA@XGFu8I6>GT+&UQ{Ny=1mfGq<Yd*e*XV}VO;Zq`t07o<8H*v|y>X{C3a|<iELo;C
zo+xAE7u_p5Y1=&3FxIGH8~Z(E8n@x7P%mLIYL*hz5b3Eqs5sU*mx~I^qDdA@B|UlO
zz|>?!pqcOQXh3$H-J9(KH{2MH`ehlEeweQ5tkB2G{$kjTV@|_CJzDE|?NO&ZQPQnF
zImYtAC%G!k_?m9Gil?H{rMYr%WVW$+zj>5|)?8~4UDq7?CDfcu-$_z;KL=dWbY;>;
zYt|SYre4FM!z7;6*G#S?rZMqKL}GIEq@Un1=@h<w-^6H@Hs%G-3Se%@(<N5?{8L^5
z$&4Nti)x?dvf6b2;Gl}i9UaoW`(5{?v@GSTiyr&v1cEz8Lt;(eh??r@7vkq_Ht+-F
z&1a!RnFuj%ZpTfFf_oNh{;4K$ht-NrLI@$_S$i_R+)se^9I#N*VA5^!))FIz*o|2f
z?c4%i$_Itf?J#FDa4Pio+?0^=gUzUSNsntn<cZ?ob|fZhrI9cd)0I`;cOx)dG%63L
zQT~sl<odu{G;;=0_9twi3|p1lG2#nZxZgB}clj{1WVB1Dje~G+yGc>P(J63UgJJuc
zcBt7!LEIxobUaQmAzojw1EURuGQPGnH(jyK6Q(npb9$d^*ZtL5ynv^ywW?yMG8@Pu
zWx0(xwQE^QA%%%2u|29P4OG*a?~^?1lWZl0nY@o7jFIX8U~6dG=V&_wD4-Tj#hVv3
zQGVx?GdQ#q2;8_y9e0RfMDxj~tj)FOzRX3>%qE3vAA(y6!CUksdSZv=S?-u^EkB2h
z;+)jU;{1k6CQjJa8W$u+?*hNU`D1Tr%b715Nv3~=v;N~f;}R&qW-~Vv5`(s>na?So
zw~s^yzSxVgO%rq$BCtCVd7ZGF-4_=*5L6fDJ{;@7)ao`&XCT8hFFl@OIW;Y)0GWJv
z{Lyj)c$!kH{?s&6Srx=;&S||eVH1!eHd|XH>%85d?ul6s<@>YC4Q;$swWaph_g3T^
z$ImNX2KPQeHhzI+52_%jpmHcDiStx<Lem9_F~O~&TVt;%*Uobjs0YWzPV^5uLm9kK
zb?;ex*?Y=;=X@RN{QpV6tOlm56p6D)jn)Q^v;G1Pp95-PTc%&2?q|v6P3#MaQkcHA
z_DOqKG#mGjr)!jk)rTbgRIS9S%$;9;KX~`f0Ti${?R4{t9EQ5vq`$t8!m{tAs__&+
zd<&Jic-y-wVku!h(jv>dGz;}q<Ew$NNoqzNZj8a6(u}&}X>~L9eE~D>955biOA%i*
zXl!cXNa_{keQ!5+9BPTzIJ(OKn_g>osCK~nv~odp!kre&m;&Bb|1R}%gy24#RyEYs
z)PL}L0${T#Nxhyrh<>x?<GR@bAooX55?Kj3i+0%dL_>@>(O?mkMr!vlVT}Pj*SC7B
z{M6F!93a*3^2-hLYFtD_N~ifLH&MBSJP4~Asw!DO2XF^yGGB9KSfXGko9}_1>5ldp
z_~B*Vtt<rqKSQNyWbL|7*`yb1KQC&&9u2YmXSZ|vwQr7XTj4X*$%jsFCDLZupln~)
zqx6J~X?jpflvXuGm(?eg3|z4ZM%l<l(sSFMkh1r}27?NRt1A4mqzpMxw4*B?^~=mF
zsj;>3F$x5G7AeA4Dn0Y_iLs>Tr&rDr$g~?^O$x4i)sspO1Mg}w+iHv0d-lH5k@45f
zv{mJvv11<1(^&rv^;pzA<!bL*x);e3jb+&pY5a8au&Cym)>A8i)(;gWX>0G6%jsw#
zNO$7w#jyw`1`;-x?CX~txID6DDnHw2KK^CBzGtg_skh=$sw_|-qsS@Sz|r3U;jn8q
zJWZZDynpu9++bJ17<#MRS|==z-bJA=ga2_wBR`0qGsE}D*>rlUBn4NQ37xp(Z=5r+
z@6Zog4}&4T?n5my2p8`X7VCTF9r<7C*~0DeToJN|dkwZ5;aNoyvk1mk$KiyQ+XRQ$
z>eee8!3f?bV`@&hy)IO@bWfm@kV=8u1|N{={)cEO8qRwFl^+vC(~EM_ON1=7a$z75
z$|Gu8I4f@vD>xbVEqjv9_|{EJ#(45iOJLED)fSoE!AwLg?bf4g-qH8vWFaW)t@-uI
z;=FRDWR@Y)wr~PPdYE<cXOx<bG@jN=x<^LSjfLBUFa;udmqBj1&&y6AJxiUc$2EOd
z)JP9Judgx0Sc*{kPG?L1EO@uz(dCO)#tY{JuXDiRcJ<FsHoxL5mmaUts#@H*Y5WEQ
ze~dCV_v~ZZ3Dj^-9eXzH3j60Az|th^`NiGx_6uvb$}yb&w_wjfIU40#Fn0dDMz~Qx
zop`g4KxH$=K4JjNGEWl(?3k43Y-6<Z9I?G~MAHmJJUiVkeJn14s&d;2c@|g3Z7kKB
zdkz40odev}*}M3KcXMwe=#;Xw@7KGDg>K2piq*SxUrG)XOcFF$X{x^pe0le@&FNwf
z<Pf;J8nbkl4%>(oOM{l}xDIRg!%tXDXZa0nkm66ejDut0R{-&7FY*k@3ksWTVTbTD
z?{>F;^eltg5yb6c{ux8M>A=-x`CiFl(|+kYG1i&U^)tRsESq>t9>9d}#4wd%<64Bz
znscNARZgwLIotdvwb=S(+m=ti$-X8vf%Br!lRrihazyz(W(o^r`H%47cYhCO4ft(|
z`NwD7X&XO;`0ET7+LdvpZDX2ci(49@GexjAS~ABRdeCzb`S#liAy%xp>O+K}O=QSY
zVTtB7&4mv?L(T!X?r1e-v7+!rl~egkGt(Ymg-&Kv0VZZ~{5^Nv-i(%Ktg!BGw&{#N
z`-^luh)~jrsA%1)!VTIQ*Ns8-%4duUexF2j6>z}A8w@z~M2-zEN6RrReI2?XJu0VU
z!c7!tZ;>2V^9{u{TLj>hkcvkYWBFABv3#YQ3hL;3hcp>ZmyP*}pZhXx5|)AG<>TIS
z)^{PR4I3?PmvCE2W+hQcT&a7VL$e~=69<q@u43as`%T@5P+}vQ4qS@)edHe^fPN9R
z`XvHn3+lh>E@;_vyi#vl>zOe;_omjjGpt~X;Ua_eF$)3-Ch;0~Aq~{su>qD=idy-0
z{l2a*#dz`Po>DhgS3yLo3a0p<?&^qcY^`fN$tFayrB~pPB_Uv%^}v()w}9$EWn`65
zCeIU}zP_cxC(QJvvpciA4$-XuHN7S8_#hv<Uyv5DaW&<9D~OMpNwE?2X|2z<(4=#K
zVj{hxe-uTX${N%d@@Y|6Mig8&x^*xE$;(3F#~1sF!O`E%3qC$w+MXG_y~Ekx2${?O
zY!l$&k%MUhdl%V-xRT{*e_7i;8=Y;y7=;2&y!rBsyWmPLGGCSiZ-@jVg^7~8;LaCZ
zZ@r<u1eDRPMh=1B^mc}Pbx0lxJeu~;&mX+^&~>vf2P3(j-MV2R4O?V+OTIxA$CVAo
z1~hsDJyfF+&%M2%cQ|Xt%?yk4=DFnu&}tb}(n<}{DmV`o@LAoTL6bv{X5z^1cF!<J
z5RLnDx&3;t`|Uugs5^`1DB;4k9eX2QrTRM%>mmc)&BpccYlvT4;TqDMZ&JOWpbsv_
z%n<c@%RP|A#g<zzJSj6>&lVyi$C(=f+vZuqvWzN=Q74&KCVk%{KCUG6i;emwR<OVB
zp^ZC^UpP8tCv^+ZodZ0U2ts|{G0Nih)<~s$n82QRoowrv%umijPl64YSN3z&*syZU
zV}BlCt6QUCxX-km(h!U{^KH12d;3Da*vi!>K=O-pA=y@}O8G4^FY?hO?8$WktRt<#
z>{$iz`KFnTAsqC~HIe1><&F}HW^1ipVQkB^wWGVPX#vLvgm7!{m_2s)=uQ=HXoNzZ
zYDQd=S%HAZRi#{u<`rioOf&T(iew(qqsoHUhJ5?A0Y;Je33}09@O|B>Ka=!f1$8ct
zoQ*|N%nEcaRIEL>x1qo#By-{wI|lUk`OlPV4^gPmGS6=l)*mx^M!pZ2-Mr(^S6Duv
zuYa6#=ubc-lEp3#lZG^*Y$^(?M=*&gJ8-S37;{6_Rb_|ZQia*n2jYdO;SX&c;T9o0
zf-l5sQG>Zd*?eL8J9EAazjD+}E0+AF-dQm>YRma1_GczRCQ1y)MMcKFM-O)zS`Pw(
zN7``}kEi>5d_RnO7PyI&j*ZMTLdt7L*1z@>hdb>R$OHNjJVZ-OxS_>4z@hXRD`v))
zFAyd;D7;kO`I!H6x9OfT8cP(HN6T|YOd*)mV91R$`<tJQ$MJ#kY#Yj8O{b)rob9T!
z))+wB^;lt1U6B6JY|k)%2MGXuKmen|y_Xa<Ics`rW)aLGdq+Ao@6gxdBxKvWN;ss^
z9(!v%B5(s41M#SlCjZ4@jP#){F@_M_-Xb%lnCLaMZ#oW@W=h-_O-;?u9uSHI`9MD>
ztLTUwrrL^`CVqXyVt%P)LCW~DudPm_aztQ3778Xk(<pHFBZxNZ>H4G60_lC@n@tv}
zV&(WM&lwL`TyO5I#`o7h8kEw$pQL5wK_(k=-=u^wRf=|*n6FaQk;StQ_6yM7(<n;<
z7LQ-R#-;N<KsD$^KGC<Nlau}Fa12p=*AN}xzMKU4;OV)6<62FOFzt(&#8yWaEyAW_
za3*MP1`pNbsO?iwDTJZ0*QpTX#^*bbe3&s^^6I;S@<1qsRu3|W=)$>!*I8te?@~3c
zFNHWTRY#>=W1cmdaE&zKyuFYZ7DA|dN?Gl!!+L#oHI$iK)JZoL%6KhU+ToMjnW}9#
z))>>0u3BN0$?tEbqSC%Cm!*&CJDM<9udHkhzk;gR=7r{aNX+1ut3`d6TjoYc*WMtP
zjjZPm3P-5iIsK!!m*KEmlX=&qJKrCa+=n7bF!E5gC~+8vpd+R%1kWrJP#vCLvcV5(
zvbFeLyfn+#XMj_t&F~y2F^?8ptrR5A5gJ$$G%J%675jH+iL(ZTh_AT*-?G&pB-8w$
zPkPq`+Hu|r=e~+gXmm+@%g2tQ6}ZnFoxE`BQJ$@w#(`78zMoUiK0@Uk?5u_c?nSBA
z6pte0YZCK6H3V6j*(ymxnm>Vz<e*9<eW(aQ2-YUk!cTOaYLB?yN)R#01;O&I*8T15
zN(u(=8on34Jm+W2qrPu{v_`aNi6*Nj;{>9bz;2>LFYyY!xWRh^b9a(l;v^jFqU^2x
z22*uJT!Nj1H72nk7k4RHX~U24CDc6f)hjKZst@cff3`<!^QnW)*ymZJD;f=@3>0_r
zj%&uYHB1RCTki{@Afmu7whK$O+_-DfB~L?q(RCG6(r7KqgiZH~7fn1hlW@JKEoXJD
zUR_J5eupPws73uO2eyFVg$COw{B~fgPUhN(kdN1`^Oh41Jww7IQOw=cJaUh7*lSv}
zFY1JY8&X?~6j^?!#(i%_KIm~Dsq74^RE`Z=^~WX18i&<>Sip%?8<AShYO1HCrpnWs
z-!C7+YOZd;m~vaIb{&$03D0JIaWmCd>sGk#U#_?souIXnZl-n)xYhq-Xp3O4zDqiE
zpU`wY2h7OhOghSRht2_3<8r4@3!d2vdTR7}G=@FBhMh$Wxc`ib<(;QP-3IdUpN0p_
z=>T^=b!9707x4O4dV(T~509l=_f<<)SU4sO59CF;sPLX5iz|6Y=~5=n4Wj<b!!I=}
zhvU>}2?#qPY>~kN7D?uvWQkYPu)XV+ws14<2XnSX^?bneP;jYC#BMnl$MUAh=o_p}
z;?#Hd9ALkTji-I9c-PKJzp^?-w{ib~8V<3)67}GpzOvN?PAb4%itgE*uesvOoIm$%
zQi3zhC*{|!Zf;69W`d&KM=bMhH)GyS+3G@T<F>x`eE=UL?vl|q-Z4<w-A&wFUcnnE
zIEUCGz%aYsP@102H!dUmYLpI2kU_DE-2eFHVWU;r&?C-X0qw`X7(l`BhszSZbP0H(
zRHVs*WH%9_H?PzgTZZ3IO-2U$PycvA&bg;(Ze#1>3AeS|{B@j6rk~5%h~Ou{E^eko
zLq$#2b%u)yZIf0}ppla^XPvi_i_BQj{iH;7nT2P#uv{JozF;S5koz3iS{U?ji7-<F
z<#5q-h$Sfewp+!7r+lSg<{b5nE@4PUpGcqtfa<g#QLSfga4OU=@4R-$pxZ#DF|^xz
zl3b9=ERd+GxZahs8ky<sU1e@99o%4~vH55?Nz()SQnla}%yIZl1l6u<Vj1z%PW#Dr
z;$i1#KuP?f85OMBxS#R4h4K}(<V9eLUE0S5Bxl5ra{$+J3sL!t2U(UVuyi-NuJLC;
zqk)`!6IaOcm9)umpzy3d=t?Zt@*3dsH<O|O<H~Sp-6B{2fV0e{fLX6I@3PZRzs~`n
zoIAUCQHM>A{3Veu-==0B8rcpS+%?b?&oMyC5<e2s(W+uqIms06M_gBU6DakghT>oB
z+YdOmp^opJB}OLfWCh{+omg*ZygR7_3sSs%hAv>et<K~;MfJCc)FgXliqjjKrS5pA
LADnrVoX`9Z+gt|d

literal 0
HcmV?d00001

diff --git a/playwright/images/bgi_logo_new.png b/playwright/images/bgi_logo_new.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a543aec0be1dee0014170d4d78f97b279c81f0c
GIT binary patch
literal 9574
zcmZ{K1ymeSwrw}=?lkUh3GOuR79h9<NYKW;u|VVQ5Ik705Zs;M76=j~1b25HnVC29
z|NH;lTBpvbQ~SuicU7%bcNI)SO&$}C3=IGPU@9trwO(}Xi}0f$y__Smy^3EH&{a!b
z8c;P3+I_i5wboaBr>Y8IeX&shh(J65{9nk+0RWN#5dUEV07^jef7@C>9st~nANNJx
zhT8!U{)MrB(SJwki@ZetQ%hMnSy)pmI+)v7YgwCHdB6DK^ML=Ukq7th_}V=9f7|>o
zI6&&A81zM<Ix85s0szE#e+6jsY5Ii}aKuhW-%VdtMcC5Gfz$kN5l$}$=f6<^Q7_>a
z)4|%!oZ8F5-qBUqON{m(2;mp|ubYdO`X3Ot4`Q_Xsv6WXP7rJA*PO37xoO4GsHv$%
zAy)5%wZL-!3V*p0qqTK&a~9^}^7QoN^yK4og4l5J2nh*sar1KV@^ZW&I9$CQ-ORl>
z99`-DndHCofUR9EA$HDgc217efAgAKIJvut(bE1c^zZSnJ{_F@UC7b(U#wpEae0|L
zbMbI;bN&B<-0a@{r@j9x>hGO@hW&%pKZ}XJOpUM%#M<1=38LfVWH0_d7f6)re<J?V
zsp#L7!s-w^>ldzn8Hw|Va{WKPf8j;B{?h$F=>KzW|KWX^TyeCQO8>o3;%F?KV`2aR
zZK5JrO2-R$XpEk0B%ASce0a3$z1`mjhDQM=(2!z)<5SW}r|76r=rc~eHfuzQaKt*C
z5shNs(dHWCU`9kq#)n6-@eb3|?y#c2D_|}_4N{Q?&{fwkS}E`*d0)G&wys|5>0RgS
z4qm8`8C|*k8EtRefAgq&IdA%0@zjFLQjCYBM8a&I7aH`x8EXz7fvetG?oG2Rct~|-
zdEe&75)Hqzny)!PfmB8}X@Ri!>ht&OjZ$&Xfo=(2T*cWW%-J|gi_#l{sCLI~a*O;D
z%&OxvbpihRCZ#T$V(lFYmZ@^WyyyJfA3~VEd@<P?q1|%c(5v<+uHsY#!~lMolkM!C
z6*vFv^_o0ZEa8`+cTWs&5(Z~x;z7l4`4_&uS(TOGbLqcb2rObd7UBVzE=7M`G)yJH
zrm#Gjj9?)ebx95Aw5AyOF-bvAm$~xGTL49fQDUiq*|0YFTo4s3$%BuYhF+o3^o4ok
z41e3rlJQG=h(eFWC;QHTy3=?~j)e!!jA!J)HrYq^Z2Tp{W94cU33^)OmO!=-jZbQ#
zPVG%clqcj5=QBp#{Z121OiE0>njXpqKW89UJkNz(3JN3S_{jZ)h#(g+qR`**=%i{F
zlLJbmv6NvQ6hQ%Vu;Y}d-&nBU?y&7P`l)pa$W>2}&UPu~YpLnz5h0ev?(TU<J0dQ(
zQU%(N9y4H7P*W^=8@Rac%tYvXhm&Cd=IqaTLdfQq^5)R66DFRreoSWUOitY&G5BpF
zo3o=;(ufq`XGZRD_f!M6^vrT$xX&OnTMObJJNrX2AO%svv-8~+>Uz?try8Vq_QQTG
z#gS-3JrS_PILhL1M`yB#f}clKv?p;Tj#HHVLyMZmA^rJq$>oSS4UmI@g<%e?L^e0(
zQYH^z`%=pPvpaFW0eX`O1@G<4^ls-%aPYE!R$zXm{GAOUG#W|4#&$Ktijs@~ChIwz
zInETn!iefgu{Wq8nH+_0QZ?JsBNYf7a!ASex>x)RpoE7DYck6+ZmrgY+iGHzW+$gP
zCE^54Z7nsLaDCk};%GH(RSVR1H*8A}0p>TQ4IlK5C*}H=JmTC<uA(o0{IT{3ExIdv
zeb}EM!vFCPq|3<xQCKn*-@u4Ssf9A3MX6-0GRb_6U?0Veh8Hu~a(+DP)bZ=6I68%|
ztFAn)l?7~(R7AO)<Un1)={n-VeGvVAA2wn})l`+NEIUW4W%3QkcKhZK;BKXM1IE(@
zDLa2?3@|_n_fW9DeAF^<%>~nb?Nh$7#rBtJU6gl_sJdMrvM(z)2=4r(#C)n}Fn=rS
zka<$Mmt4)&(P`SU3TVE-{5<%JuQcgq;K;DJc^zra27T_andDX;E@0<YrpSN9Qp>>o
z8)zZU1lr1DU{@-UP5CqK>i+&?QKJn)-+{8|503RFmR3KZH`=@jJEQ4-3~N_5Hp=%u
zuvvlUD^d(LpFmyGWIIvjQkDVTc}+E-&!*k6d*@QGlfRzz3AvyVAY)gt2X~@w1krlt
z5iet1mW<!9que?h2tTtEitOs<zGvAFS?{8o98*sX^{m!W_vRuZWF(B3ecDkf)C%E2
zy0iJrA3Gd-ZPAl}%b67->&{oyYklLL&z^H_lb<=WXr+@>Nzv6L0}#Wb^V<lD?_E>S
zD3somroF6y$NZqS752My-&rT|<S_Hgr{JPiOmr7C6idnS4{S8$G4eZMs@w(NC<wsq
zHCUL$7yXz*`q^Gp^aMe|aHKO^<)_<%n+Izh8X{Xxtt1C$9uFpAovS0|s+CTH5|oVD
zpax7F)CP`tVM+MY4TgxMM*7-y3r3Ze;>21rAz|t%6+y;%9tY233M869P{E^bo&6JW
zabZZvguLiG$PmxG<70MHLSPzq*QJLx1z?nZx%Ls75gG_AurP(Xz3Z13osCnjFQ6QH
zPO3a?lTID&qyPhSi^H-x=JOJ(0U?uxn#c$@ZS|u|LBxrb6>)`}v*vmZXv0<E_$-Qb
zTf2yoW0+dHkD9ukNItNT(ol1Ckvi@D3Swpei(&OcI!*4K5AvZlhmyil!+X?Q;t2b8
zyeN0h0hV~$6{L5Qt+>#f<Ee6LHVxZ=I_i78F2}d3y9z{J=Z>=U7SVa-!qMZOKWB&3
zMU<Eb!wHj<<q1n+*@c4;rST`}I;jsQmbp|1pLrBTe_l@W<3MTF2(|bw$#EL(gRJcy
z5b$AfxAsiQ_7kapa*|Y~-)*#G7!eGhHod=`U7~i}?@Fj<gVM19>fu7vx}_B5zB6e?
z$BsUsV)SWGKBRRkW-+`~YftS%mz1>fwni!NX1F_r*Zr1BO}e8xoQ5Y(U`da6lIfsN
z0z>ap_an0`Pg=ln+X{%hWqpVlNOMoCJM!8E6YPW;x;x7&Ai+%YX2ux}Y8Msa2~>=y
zP;@e84aY`2Gp-8KjQnnuVtmr5XbK~@9)J)xo-mlyu81?C+)RuMG~F04Qgu^%hG*g2
z3?l#~8|m1s$io@uZcR|;NKezeO!R|)YlF|3quUy;!Ph_E>4BC#W&C;VItBfh`y6<f
zA-}tn0m3Cy3D5u#+(>L{_#BSquOaTeq_bo;e7I!??o6Lnd@Yf~thFJrwV}pRaYf70
z8mqzN_E)k#y;nYK`<Bcnim39d*iM)*VpgI9#1zI#v<WQIU@wVnuCh*g)_vl*p^;>M
zAqK)N+FF#opK#HI20cgjMFk&2*=o?uV(6M32?sv5iBkh$tZ4YeLw(vH!HphyPtBjP
zMw+Zf?D{ItW{Xo)h$d$|P<Cp#q)&ew@(qMh^so7THTi?AmMalRzT9v&!3k+X7S;kn
zPCSGlnUyQzGO3_efsmvG?N>qZKOFD5QBGUex+>%5#J_XHlu^*$%Em+?UZO>~Q9z%F
zE>7ye*}#XY<b)gC(n}iZN70?B@LdEZTP-%1HMwB9#-a6*f>n6=UkGY9zJH)eS+-sD
z`dtjjj$TL1>}P8AnAoWFGbefB0h+=tz?ckd<9+6cSx70vN1nctSs8zluxwVAs0Tb&
zc(agqsI862oRZF0b+$S}{!SD7b-vq;{rjz|>kyY|x-+HQ;u@+C>y)AE$_Sf^UGYBN
zpq+JEzS-a4>rBNeUd%zeKBMFQg0hbla|$_DL6rj0fX8a^Po|*H^3j?`>FCZF({;gI
z>`5KdRT*yIk3V9)VRXL?iuH_`?Ggjy&d%20h4N6D1feGtB>6i-QLu&o5Rj4z5p`0f
z&9QC>@zDcXf~l2ES=0ReCA6@i5Xf)FDc)CVtmU-S-yKz!b$Kn1#e|4v-zA%(AE8yP
zy7FXp04;pcW<ij*U-M<8udGo(<Yz0-VGnm1o>F7G^8uCm3HFYO0`us-IQ_Ii@<FU9
zgGWuc`%n@@-NSy3>dJt3xZl|=6)$Xv%G==o#3Bn=yVEs%qrLlbCx$X#1S$0*fuELK
zHMR1(c>^17(jE`^d>UuixD`dHiRvvde9^*dtdCQP$Z!<^SX8EU9581Mn~V*Yok3{h
zC$+$qrn4u)X58!#3UD85KeKG}2EXfl*QJG;`u);Kl=f<}HZo!zZ|pLinhau@IJfPm
zKUljE<~8!#0Z-3Da3h#)Y!>6~0lxvdPvGi&zT7B}TsHpfuH4$&C^Jn_SeP>rzt)<s
zbitjJWyI3x1poaW#~S~u$1ieXP4HPr`;uMQg-`c9Q(Z+63;FjY$ubDnA@+{Rb#K3>
z+XrH8Q6eLXXdr_~@}?lj@3Fy;K<0`T=rn@jgC={cn{G4l_iVcA`1WdT3T`8365So?
zP1>4al4{O_C`c1YnRFjdiG0n?QRww{_iQ!}S6a?c^I86fC>0>?RdeflT~>%_ImNDb
zcbp5}Hq8n$2L@<>+So#89!;e~ecpyp&?W8%$%nozptdOO_>96Hp=VZlcAp~-n`g^+
z=-L!M&zp;Q!}ztu+@7i|KNA6BEs%D8e+oSI#iLZ}Yd;NFX4JPe@tk_|iSMjUx>lBQ
zV}=rcU#+bu#$yE{YzrC)As3qlPKZsusY+qEY^|@Fn|W(EsG`rfSt(SJbi_{_P`j5|
z1F2c>cHkvwHI^RtQ2AB(b^?dCN+$_Q#)TCO!5Vtv+-q3Kfv?Tttr3yKB}XG?Ad7;~
zVN|`=FkGz7xUeXfNcGx<w1S!!k&eV_2&I1!G+hpXS!YKTbibcUvODjUHdryTOCEH9
zX<wD1E5p2WbSu~Mi{ff(YkZh5f8f=wI6w-I<28yfQ0O$7^u%=FY3T{>vaWKMlZKCO
zLPy5KC+g)W?(Jxiu8}k`t~?bT{$#v0iRt`ZDL7YoK<wN?1S^hipgG2HL3)aWc>^6=
zC%W^Nl7k0jlU3`ikh8_ofbuFG2PqwodKL?vz#y?gZ-)s`VfGA@jqcv$K^Nkt(yLqR
z_&4UjJ)MUE`3O4gpgmAyj?9_4kmnPXmiz9pNwjH9%qs%S(-IR#D%L!a!GfH4D-B&}
zQhk6(gVkN5fr3uw)&|#5b4>m*gO9b~6Kjk7uEiFwvB)`W+U_`))GJ6>fn50F%}}uy
zSVinTx8vFuq;SK|Un-f0h_X$R^?cq>gjzu`l6)8Wb|N%CX0X2_b_4X&9IwapuCn!6
zJJHUFpPBbq52DX2QJhnF)5N&(LrvqhVjQ@JITt-n^+4y|fZ4!L^&p%0A^k{9=%=(S
z<hAJQAz8B~A)$NKx63#A_|%i7<9sWz^s#0Irh_i!-3&n;lvH=y;tyis%R+dlRE#cj
z@|a|geG$niS^e^M7xw-}Z_SlAl|0NdNfKq7Bds?ZEwD)P<%mrd{NLBBVek;eNOMsx
zV#zr}AfttY$v|#pxu=*CO~Od|J{|PEmT1n*xcD7Pwy5b+I$+k7e^U}``I_dAHwt+6
zb1r}k^5eud5UC~etK=6Gw*4KnsGgV~tF08ELncKlYlvAZU4!{-(~Jbs@7jtfbxx?>
z9GBm8cD!2<AN!H>6ftoh`}Z;aS3Y&1&6&l_Dv1Op<spi-G~<dH{C%M3rruS1*svh>
zU|A52S5({6UUff<FIM$c`Sm-8ZR3T8P7=dk`kP&a;d#ln-mfj>#iMuy%7kS<9cCp&
z5cA?Nxg@rnl=^-yqGMn!>AsFj_@+KC`OGJ#Dtn~u5}`l$R&e5)0)pt5JfMCMjscg0
zuuu{OO+m;`syfA=$w3-r8Vp7absv|^tnqE%dL69)ii3aXEc-SBMaCK1;&tU~tiX?u
z^@S7ox3gq{B^Gz@E!n1pnsYG*1whmS*X79b{8`M+Ynu}S%M)FnmmKWT@ai@Q4aYe!
zCkjcPr(v3wNXLwEceUk~=3arq5=?cNsisUTK6cVqWe4|jCrXYzM>}<juERQ9%W?GW
ztR9@VNQ}Zn$v%G4=qLA6a31E`I85gn7_=V&^kYJV&fCjyMb=j#wnb`#6s_IS6e5l)
zp=Qy3vZ=2Q6kN=uGgJu?hTUVQ$8gFi_Q?602TGw->2`}S#h!W7E$M{4feE?QJnWA{
zLUnGO8shVG#nJE<k>L$eS|sjFdOt&k8$YJ@Na`sTozU*9%k4bwmg2gLX(FDje}v?W
zxY^e`lt!+>r9?j+HVb3-`8xM)9uUrPZ(gwwXXxm~C=sMJ#GIJktG38iO((<@<B6%F
z#88OB3&oWSFkhD6VE0pRSXFbQtngAqHS2sn4bDc64De|q2%7wa^o%mm^Ic~+8aZ&Q
zba>6)#n+1jy~o{TZes!|k2l1}5S`y_QDl3B=4-0Vr=qEJU~^uyAPJLydaI{aTA1cQ
zGG*wk@n!{?nk`)s5k<uDw@~(gF+`~dM>Y2B`Pf>q*xH=P8g))Hb{(HrUEY>F595oS
zp<ZGsT?~D{=#yd`P}4pE8#gidw)Mf?;6D)}1sk72aDpp}5Tn!tis7_q^q;6d$qNL;
zcWF?Z1S<!!cSU=?0w}~&b%j0vm#W96L(RNbay}?UxvjEHq~k;URMMj9srfVBq-V8H
zpKu!$5(Y_MYKUd7^M&2RBN=M+EuOU@3#~KPVpViBl1p92uDq66kFG_aQ9TgCNZp^B
zs;Z@ITAvDW9G2a__a!8`bctn2PaWSTI$zNrBJLIo!z7!XaXgiFz8Y8Z+Nv^P5OkTZ
z65di_HK<M)DlUt`;P1B*C3>Z{TON|5Ev9!D#~=`(|HCu1h-KTO`OT+;;vujK{St1i
za-`<6w)bdF276auzVAY}2x5g##lyvJQt_@om#saASnpf7KK#mln{go-g2Dte4)`ea
zgL%=#ij~XrHYZ7AJ2`%j0Rj!2OpX|lx|oVcf8Nfqm|ytf)?~4xIreoOmT=Wo#hi9q
zA$>zvcRqS{`poOD$RAX<|4{3EeO=iAJPqcsKka00zpqWFXe#x}M1tco<fW-O8561A
z-M23{ZSdir2<_yp*|BQkm%x~3Bu?3Njf8ePV7@#MJ;+ZC$=>=gHt3&+JZFL|fSBQ~
zW?Vl3?!4;13G_KNhzdG81&}PwSg&}fQo{K=^v2~X;oaXd%A2TH!$0ufQN8g&bl>%)
zvk9M#qjj~SnJO(L|6tJT%Ifo>B)1&N>V*Cyi(OT=j)&6$62>YS=e1AGP0^>aJ=?bq
zj%ssk8lK{1hb{If6d28c@W5wIS)8vm{vav?*q3$4x2K<a8?M6Xd*j5_JtR&U8iBLz
z@~iH#m)V%<E3)o*tMMpT^m3&QJEG-uI1?YC25BzTqOUYfT*w;6)RW$A*J7ZKKx7sA
z=`9d426=|}h{<MN&&>(0kzro_D6JE02TCz~!$1&<MyZg&^*g6%yRW=B=1Drd3Dn%~
zm@4D2CkeHt-{>Fm(z$Z7F!*g=!{DW!<B|FttmF*Gh-q^mR~Kz~nS>DWPS~~-ZGcq>
zmSY|vU+(@COTD8g5vPkjE)rbZ?qINPFt?3Acp<~FNVnpPEhE8<J1Jm4hc^C|XF7ys
z2>6<AqQ8&qD`3!eZ=0nmOPUd|@3z2W!-)NQGVh|OEn7-r>EuDIl&#|8B320v%3vkn
zMpwnO^HDkf@X!88x~Bo7s|xHi5E6yk)3+Z&FQQm-yu{)E+M1VyJSM&6r+AY?7{+A|
zmhKu6&KiyWa7Jk5pv&f`uCQu#2hpa4FV59cZXcZiJc>r|MKvfq#9<@zNwqi`_!e{%
zcuP(=LVp;`dbcF!IhC`Arzp@Y<e$djY04mtk~);Ij@oCWT=a3lXs-dV?T5OaO{Zke
zT+dSQkW12VKipaGE+R#oR7JF8n0XNnK9S%3SKS>|p^SPV*?c+P3w5_C&pl}MZrza(
z<p-rDyb{P&MO+ebLgWf$+!wc-4~r(NKPZW2;qe?#VzTu0mx4U}6V9Lr%hd$y!4-6v
zC+WjHdbiOe_Dyv-vV2}OR~K9xnSVRYZX8$n+cy}r{0g)V-s?eDoBEvK#JwZrf=>uG
zE77QB{h<~Gm0r4|&Xc(IelK6_t7(P-q=*I2NSpR>$by7@(Pt+rB%QWK<?rL<%x-0!
zCsyDQ)<=zFDMWg`;XY>UHkf>&`T5Hm)oq3jH@^3Y$)%Tq*-HZnH*ONLe54o!CXXb&
z+6wk`=nw5V0ke7hOek9{CZx6A@JtNVHIw3#rqG+qsb?J+qr_VO<O2Dv#Epv{<ekA{
zUD-lcBlX=y{1}g*#ZW!+JkO!Z%Kzm2-2(uqFTe9cLOM+Y<V@l<HxmRX^!?`3^Ng|O
zK_`qpT#EiWx|v>}gHrg>lKLX1?8}qUp(?jTS(a+en}!WEy9H-_H4;6ihR%i@LPqBP
zPBji|T?siLz25eX`qc96U?$9E1sSem!wQl5J&Ke`$5*^5TfP)1DR~xK%pvwj0$-xx
z`AN~x*yL~L-v|o`7U;ktE^J%1`Oz*B!*{`+l)D18y##|>>i+F(M&h14!;W7c$~fY`
zaa^#di-i?esd~Kwq=ggN3JU+av7`yuNi$jU<{`Q%CL^^$Aqntw)VhpOSZ>w#l{NKH
z?qvk&x2wJXjK}Z4oGw9<wV3;0^ur;y{KOt?`D0y$-St6=04>g_u;6>7Ld#g)^XrMA
zEOeGl@e+j6mZU9uF6sc?iX6}P10T~c!$}k#m~a+iZmAO(m%1&?B}Fi$S8r1yMRJK4
zHxz3uwQJP<1|gfvZOR*ZQ0*@#T8Tjj(N}lQe)Hr{FkmBx_A%wsxL4=cIO*DC63#;*
zHv5h5fh%X%1zL=r0BV%sLqwNGN>{hq`wpwqnT|hn`a_-!&Emz>r^lp>n-7Kcpyx!$
zJYO8;n>H?owc1+DwX0X7xEi5he0Y{^*Y+>lUom7$Rv_6sg14u$Fu$RpD^8$C*37jk
z$bi=Vf<Wq%9CUoqK_G~{5)j<f6SEx*iUuAM&Y@e0H)sd`@J`M4T~>3@N|-gbpu@4|
z609v`iYmr^km_gRm&p|dAv~bZN?;kKJHuy#csua$r{>%7u<j`j<-ZQB7c9^xrAfAN
zZGhoePi+-E4jJa{POPhH<dM|FNM)?{^+_s6MW3+Rl>20;nUU&|2fo+w1Ftc(|G=5H
zTJ!8l6hw!~f#wA7wm*DMF{gaOT$;aT<KZvvF;TUIt-BUYtRfAZa31W%bfr;Dc^&R8
zBA!sZv=V^A)HYUzcb|i~^nh^egoS(F<VE(Ou(kdU)r@?qigGrLOz@WjK)IZNIV({I
zB<D+WQqmiyOFn-yZ|D1@d&S7vH_(q80hKv`&KXL1(RZCiBH>(|bJJF(bo8-O!&;=S
zikP6NbN57RDf`zf2oY+Z1!;S}uT3q`zz!KpLV`AL2U4rDZmrrerf!s-6F9!J$I~(4
zB6AuasN9{{3EjxaMGOXESo8YT!iBru-#doe?C^tf<ozOZwZ8+|GgOH;p62NU89Izz
z$>2>W?t)Jp=v*Yb4wt+#tzHv}#wZ@3lnbCDh*BW59aHXfKhwGqXL2!-uFYP~4RjSa
zt)9_<WR{{Ozr4-90?^1j?uY=yTCU&)XD?pSui4e%cnru%&@x%D6UpEDemZSv0*fxF
zZxB9$r_cUudD|x~Uly2bq6$!-@RtU@H!r1`g!nzH-$l`6t5Vy)9UzdZ5SbVpSq*{e
zmi2zsh0*Gty0AmhoF`H?u8rU=PiVRpp!_BXmQ>IWUzEhKb2~{~2yFII%_ys3`MEKr
zGjdZRbDA#aE9aLN983e?AJ$Z9WogIn_484E{X|W>vyT@WG05E*VClaM0)BV9<c6zz
zE06o!nrIx-o^o59u={<nF;6V4+I>jXNj9yh#YNrm-0X7Oog1e{?jT0+s|_}e6|djm
zN*7d*-hU_gl*z$FH}D4)gp(V2Tk>8L=^H}g*E-6*P1nh9SyNkqAKZWBKZ$kg7}2J(
z47gjw7TI`&MZ90FLoqCu2<?|3KO)|NatqoQRP`sJ`$uG93Sqy$s>0Vqf=yY2toYzM
zmKy!!-j}Sz8nbGUUP{sG;~PmjC&jmh)A7+XaCKWWAsFUu(ognwk9vV3tcDbX0|<xe
zsrum8Zv}HhZ&u*bzSnuHzi+)rAYyYV%+E{K2~;4!7T1G!%rcT}OK>cO?6ymHPu1)#
z+1p3Btiv}zjBsjbtO9~yt6o{*VZKZQ&%kVW`qMM2BW_SdNocX>Y7F&S1%c=`-@H*0
ziIC~C?VSM=!={f{&X$EEsT=l3cw!?#Uc{Cwy7Y;x^^Uf;b7?O3IR?~%-Wg8lBkLY4
zw%yf<lK^qv1tB<Hb9)qOJrS5CEBL}l_CX)+ouPQ;&&)ET-DjHZ*AH_M3`}Ay;ONM5
zr0kgeN<^kd{yuzGA1Sp+7-Eli>X+&)uv*g&_7e|ObYO-)+Y9N(WC1p#Ga2&d;)?e!
z@n7%R(xFt0vX-YP>0`wLWWg~ufelFIBflSJ`_hA><9c<Mduqg4gN{2hWS!7r1HWZA
zIV`b*M*}duZsGX3NT3rl>?l9r9K8W)T3@U0X`SbNQ$C#Y88oaIebJW|_k2=o-Y)i*
z+=EYFRfop&AgJ`BboPXnRb<>T)Hf2`UC&!B{z6W4Tr|?)I~!E77`R8ZGV7W;L&C6s
z70ZEOwa;QoIkyeMkt)<?FAM1iDvUJ!p?9TXQUhwnyKG<>k7)_{BYdr7K-efKWeY8{
zh$Ae0N3ToRFb0->Q#EE7kCTT#ZM$x+9bjKmy$y$R;=iaS{>)<jWQ^a$JScVhIwP5J
zjn}?Xltz31R}A*gwQK<a)_5cK3swZ8OAjZwMsd^Ta^8digy00U4@sdax+ev6P4doI
zI&Bk$y=*BJ*Hml4y`FD;*MiZhSZDSE*nM+;CwRWRA=CHa5(#?|2~>%O^(;{kgb@gX
zjQDQ^LivnF8*TR3^GRiM;k$|XE1Zq|n34MYb#`FXb<Dr&7zV&6kBQzA!H(#fbI$}1
ziMS*<2NX!-Iq*0PxXEHXpFkOZ%(`fDn~BKTLmtT!M6fr`#KTNAB-@Q??3r&ySNqk7
zI@)D&CNW1h=RFvgj9!5$Dzs43U8UeFk!~*9OceU70aWNI&@#$+*ro@Y^)XPl`wcf?
zxu)`Vps59{5VyAu3&|ZNIwYDPk?&Wv3&&joMX=pwao#HzwF8;qc@j!8fTeBUhKK#k
zK=sfv{i!W*E73Q+D@aEF(6GBK%{+dB$(WzMW_g$ldz;^_U=qen&57vw%u3WdwYRdy
zltmJX{S+rrKT`57q|I#P+o)9Q7P?djJeTCy4gX>X`thjd^QpVp&D(ELO_PmbVY2fn
zoU~zD4^bhqpB*5lLCjt)h0*f$5B?>!vBTef!V^}oCU+f?&x!BMA>UEQyjh<aS-6wP
zM|bG{gOpOqV0WQfLP*Zl6LwOD$OYer_o#7S6UgEAJI-9ZToS!T_l~KJ!B`M?X@UY3
zi$g7^+q(i<ERnIE$62l!w{^5IX~y())TPv^8&uZRvq_N1T>i2h_28P}%5--jW6*f{
z8@d|2t<6IdzW;tcAkkxr+nrnKW5UA7jV~y}f%=!Jtt&w_#wxp2onHo{HZ=Un#Lo)>
zuB%sGlceH)z_F?MS7^P&hC)hU#D+K#+sx%q(!_o16T5ZoeZ6e1ZLUh@bX0GHwloR4
zv7=}An-29<P^Y|9!Vc%4Up+HlI>yD6yP(bTRM>B|arc1mw9miE{g@OiHsL0FZMfz0
zHetm*Ws|wWL{2FOK7SP55KN7?x0#s|KoHJq@>iE_ku2!J8*=?AW6W!gvf={#qeuh2
zrI$5(=I1pN61;vSv&q7nQ>?*JXqxu8*My{1fr>J(9q@PWZc+0Ikz(o-%S^-Y36Bwm
z2fIqUy17f9OhDmEca2QD=k+U!D;(J}*O<RCe#=gO{X|8Qze*yP<|~Os6`;{+mp!2!
z568dN-4md98{dY}NGFEMpWr35P2Xa{^Z_Rk7?f$fd#auf`|P}FC)6e{C>=7ZQzTp1
z6-@kr1^FE7j&xbw^M|v<4p@IO<yKF@LWqoFubj0=x?BbKE;HEu1e<=%f&tHoXPt1G
zi<hh6!wkZ%{YFwZ65rE2<<cGah$1*g@Q$j?=%l&{7NHLe7&i09+;T*C!1{_fcJAdi
zZK(DtBXwAoq!;vnC#=g!ssC--oY(n$ZmRz$3G<W`$b#vMq`Fkzy8${(uHP=qPexX+
zQt4#2F<RT3G44QfN<SGelDRc{BvIl2H=}En82%X@{j8TNG{|t|@2^FQvTEQeX|v$}
E0&)P0T>t<8

literal 0
HcmV?d00001

diff --git a/playwright/images/tall-image.png b/playwright/images/tall-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..32e045e4e1f31109d2fd5741b2c1a91250173954
GIT binary patch
literal 280
zcmeAS@N?(olHy`uVBq!ia0vp^ZXnFU3?!Qw{%;3T5&=FTu9|xp{`2!WFK3LK$Xr>?
zIwg&LT>!^PE3V3;MlnD&oCO|{#S9F5M?jcysy3fAP;i;2i(`mK=i3RpxtbjWT=gf*
zev*#PxTMFm(zVRfI>T&h>&w<Z_AZ|p!VSVSnToqIpA|f3)aY9DN6edHZP`iRP>Bbn
z%YRwCeqt_udwKE+^NU3#Z?y0075^~p-ld#!CZ}M1#lw{6+l|Xw{wQ>~<_WjAr2Fw%
zwgyb|?336%-_o@0*1MQpCGlUb&n)Jc%USgC<;U*lzTGApe)KKQJIr9Tf2Bs(r+6EN
YiI>HfTHL$#0O(={Pgg&ebxsLQ09uG_IRF3v

literal 0
HcmV?d00001

diff --git a/playwright/package.json b/playwright/package.json
index c475f71895..b41a8ecee2 100644
--- a/playwright/package.json
+++ b/playwright/package.json
@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "npx playwright test"
+    "test": "npx playwright test",
+    "test:single": "npx playwright test --workers=1 --project=chromium"
   },
   "keywords": [],
   "author": "",
diff --git a/playwright/tests/admin-project-logo-upload.spec.js b/playwright/tests/admin-project-logo-upload.spec.js
new file mode 100644
index 0000000000..00ecfad544
--- /dev/null
+++ b/playwright/tests/admin-project-logo-upload.spec.js
@@ -0,0 +1,112 @@
+// note: run this test with `npm run test:single` to avoid issues with saving multiple projects with the same unique fields
+const { test, expect } = require("@playwright/test");
+const path = require("path");
+
+async function sleep(ms) {
+  await new Promise(resolve => setTimeout(resolve, ms));
+}
+
+test.describe("Project logo upload", () => {
+  test.use({ storageState: ".auth/admin.json" });
+
+  test("admin can create and edit project with logo", async ({ page }) => {
+    // CREATE
+    // Navigate to create project page
+    await page.goto("adminProject/create");
+
+    // Upload initial logo
+    const logoPath = path.join(__dirname, "../images/bgi_logo_new.png");
+    const fileChooserPromise = page.waitForEvent("filechooser");
+    await page.click(".uppy-Dashboard-browse");
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(logoPath);
+
+    // Verify logo appears in uploader preview
+    await expect(page.locator(".uppy-Dashboard-Item-previewImg")).toBeVisible();
+    await expect(page.locator('img[alt="bgi_logo_new.png"]')).toBeVisible();
+
+    // Submit upload and verify logo appears
+    await page.click('button[aria-label="Upload 1 file"]');
+    await page.waitForSelector("img.test-uploaded-project-logo");
+    await expect(page.locator("img.test-uploaded-project-logo")).toBeVisible();
+    let imagePath = await page
+      .locator("img.test-uploaded-project-logo")
+      .getAttribute("src");
+    expect(imagePath).toContain("bgi-logo-new.png");
+
+    // Fill in project details and submit
+    await page.getByLabel("Name").fill("Test Project");
+    await page.getByLabel("URL").fill("https://test-project.org");
+    await page.click('input[type="submit"]');
+
+    // Verify project was created with correct details
+    await page.waitForURL(/adminProject\/view/);
+    await expect(page.getByText("Test Project")).toBeVisible();
+    await expect(page.getByText("https://test-project.org")).toBeVisible();
+    await expect(page.getByText("bgi-logo-new.png")).toBeVisible();
+    const projectId = await page.url().split("/").pop();
+
+    // EDIT
+    // Navigate to edit project page
+    const newLogoPath = path.join(__dirname, "../images/G10Klogo.jpg");
+    await page.goto(`adminProject/update/id/${projectId}`);
+    await expect(page.locator("img.test-uploaded-project-logo")).toBeVisible();
+
+    // Upload new logo
+    const newFileChooserPromise = page.waitForEvent("filechooser");
+    await page.click(".uppy-Dashboard-browse");
+    const newFileChooser = await newFileChooserPromise;
+    await newFileChooser.setFiles(newLogoPath);
+
+    // Verify new logo appears in uploader preview
+    await expect(page.locator(".uppy-Dashboard-Item-previewImg")).toBeVisible();
+    await expect(page.locator('img[alt="G10Klogo.jpg"]')).toBeVisible();
+
+    // Submit new logo and verify it appears
+    await page.click('button[aria-label="Upload 1 file"]');
+    await sleep(500);
+    await page.waitForSelector("img.test-uploaded-project-logo");
+    await expect(page.locator("img.test-uploaded-project-logo")).toBeVisible();
+    imagePath = await page
+      .locator("img.test-uploaded-project-logo")
+      .getAttribute("src");
+    expect(imagePath).toContain("G10Klogo.jpg");
+
+    // Update project details and submit
+    await page.getByLabel("Name").fill("Updated Test Project");
+    await page.getByLabel("URL").fill("https://updated-test-project.org");
+    await page.click('input[type="submit"]');
+
+    // Verify project was updated with correct details
+    await page.waitForURL(/adminProject\/view/);
+    await expect(page.getByText("Updated Test Project")).toBeVisible();
+    await expect(page.getByText("https://updated-test-project.org")).toBeVisible();
+    await expect(page.getByText("G10Klogo.jpg")).toBeVisible();
+
+    // DELETE
+    // Clean up by deleting the project
+    await page.goto("adminProject/admin");
+    await expect(page.locator(`a[href="/adminProject/delete/id/${projectId}"]`)).toBeVisible();
+    page.on('dialog', dialog => dialog.accept());
+    await page.click(`a[href="/adminProject/delete/id/${projectId}"]`);
+    await expect(page.locator(`a[href="/adminProject/delete/id/${projectId}"]`)).not.toBeVisible();
+  });
+
+  test("cannot upload an image taller than 60px", async ({ page }) => {
+    await page.goto("adminProject/create");
+    const logoPath = path.join(__dirname, "../images/tall-image.png");
+    const fileChooserPromise = page.waitForEvent("filechooser");
+    await page.click(".uppy-Dashboard-browse");
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(logoPath);
+    await sleep(500);
+    await expect(page.locator(".uppy-ImageCropper")).toBeVisible();
+    await page.click("button.uppy-DashboardContent-save");
+    await sleep(500);
+    await expect(page.locator('img[alt="tall-image.png"]')).toBeVisible();
+    await page.click('button[aria-label="Upload 1 file"]');
+    await sleep(2000);
+    await expect(page.locator("img.test-uploaded-project-logo")).not.toBeVisible();
+    await expect(page.getByText("You did not yet upload a logo")).toBeVisible();
+  });
+});
diff --git a/vite/src/components/UploadedLogoDisplay.vue b/vite/src/components/UploadedLogoDisplay.vue
index e038cae8f4..28fee28bb1 100644
--- a/vite/src/components/UploadedLogoDisplay.vue
+++ b/vite/src/components/UploadedLogoDisplay.vue
@@ -7,8 +7,8 @@ const props = defineProps<{
 <template>
   <div class="form-group thumbnail-container">
     <div class="control-label">Uploaded Logo</div>
-    <img v-if="props.uploadedImageLocation" :src="props.uploadedImageLocation" alt="Uploaded Logo" />
-    <div v-else class="help-block">You did not yet upload a logo</div>
+    <img v-if="props.uploadedImageLocation" :src="props.uploadedImageLocation" alt="Uploaded Logo" class="test-uploaded-project-logo" />
+    <div v-else class="help-block no-logo-uploaded">You did not yet upload a logo</div>
   </div>
 </template>
 

From 1771019465a1c05fe6402407705e0e7b68846479 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Tue, 5 Nov 2024 12:30:38 +0700
Subject: [PATCH 34/41] feat: adds tests to readme

---
 .../tests/admin-project-logo-upload.spec.js   |  2 +-
 vite/README.md                                | 22 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/playwright/tests/admin-project-logo-upload.spec.js b/playwright/tests/admin-project-logo-upload.spec.js
index 00ecfad544..de6278ee5f 100644
--- a/playwright/tests/admin-project-logo-upload.spec.js
+++ b/playwright/tests/admin-project-logo-upload.spec.js
@@ -105,7 +105,7 @@ test.describe("Project logo upload", () => {
     await sleep(500);
     await expect(page.locator('img[alt="tall-image.png"]')).toBeVisible();
     await page.click('button[aria-label="Upload 1 file"]');
-    await sleep(2000);
+    await sleep(1000);
     await expect(page.locator("img.test-uploaded-project-logo")).not.toBeVisible();
     await expect(page.getByText("You did not yet upload a logo")).toBeVisible();
   });
diff --git a/vite/README.md b/vite/README.md
index 18331d774e..c57aabc075 100644
--- a/vite/README.md
+++ b/vite/README.md
@@ -34,4 +34,24 @@ NODE_VERSION=20.11.0 APPLICATION=../.. docker-compose run --rm vite-project-imag
 NODE_VERSION=20.11.0 APPLICATION=../.. docker-compose run --rm vite-project-image-location-prod
 ```
 
-Make sure the entry point of the php application is using the bundled files. You can see an example in `protected/views/adminProject/_form.php`
\ No newline at end of file
+Make sure the entry point of the php application is using the bundled files. You can see an example in `protected/views/adminProject/_form.php`
+
+## Tests
+
+### unit tests
+
+```sh
+npm run test:unit
+```
+
+### e2e tests
+
+From the root folder:
+
+```sh
+cd playwright
+npm install
+npm run test:single admin-project-logo-upload.spec.js
+```
+
+might need to run `npx playwright install` the first time

From aa43466bc47dc5e86a8aed47dfae47cefc6d432a Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Tue, 5 Nov 2024 13:02:19 +0700
Subject: [PATCH 35/41] chore: expands readme

---
 protected/views/adminProject/_form.php | 1 +
 vite/README.md                         | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/protected/views/adminProject/_form.php b/protected/views/adminProject/_form.php
index 3860823151..9cc4403c9b 100644
--- a/protected/views/adminProject/_form.php
+++ b/protected/views/adminProject/_form.php
@@ -55,6 +55,7 @@
       <div class="spinner"></div>
     </div>
     <?php
+    // Set to true to use the local server version of the Vue app
     $isDev = false;
     ?>
     <?php if ($isDev): ?>
diff --git a/vite/README.md b/vite/README.md
index c57aabc075..c9b404c195 100644
--- a/vite/README.md
+++ b/vite/README.md
@@ -23,6 +23,8 @@ Then make sure the entry point in the php application is using the local dev ser
 <script type="module" src="http://localhost:5173/src/main.ts"></script>
 ```
 
+See `protected/views/adminProject/_form.php`, a `$isDev` variable determines whether the local server or the build version is used.
+
 ### Production
 
 Run `./up.sh` script from root. This should bundle the app and copy it to the js folder for the php application to use.

From 5a15df3ad0f41c076b12bdcf3a7cb9e7e948fb17 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Tue, 5 Nov 2024 13:19:24 +0700
Subject: [PATCH 36/41] chore: up log

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb8dff7a63..de157a7972 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+- Feat #376: Uppy logo uploader for admin projects
 - Feat #1768: Alphabetically sorted dataset author dropdown options in adminDatasetAuthor form
 - Fix #1843: Add top margin to table footer in dataset page
 - Feat #2034: Maximize input text color contrast

From b6c936fa05f99bd3fbc23e651a67aa4c5dcd8eff Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Fri, 15 Nov 2024 12:17:42 +0700
Subject: [PATCH 37/41] chore: cleans up

---
 .gitignore                   |  1 -
 protected/models/Project.php | 15 +++++++++++++++
 up.sh                        |  1 -
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index d2eec477f6..9cb82741cc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,7 +29,6 @@ files/data/filetypes.json
 images/tempcaptcha/
 images/vue
 files/dev
-js/vite-logo-upload
 
 # nginx config created by generate_config.sh
 ops/configuration/nginx-conf/sites/staging/gigadb.staging.http.conf
diff --git a/protected/models/Project.php b/protected/models/Project.php
index ba5b0cab6d..5a8c782787 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -144,6 +144,14 @@ function check_duplicate(){
 
   }
 
+  /**
+   * Write a logo file to storage from an uploaded file
+   *
+   * @param Filesystem $storage The storage filesystem to write to
+   * @param string $enclosingDirectory The directory path to store the logo in
+   * @param CUploadedFile $file The uploaded file to write
+   * @return string|false The URL of the written logo file, or false if write failed
+   */
   public static function writeLogoFromFile(Filesystem $storage, string $enclosingDirectory, CUploadedFile $file) {
       $slugger = new \Symfony\Component\String\Slugger\AsciiSlugger();
       $info = pathinfo($file->getName());
@@ -162,6 +170,13 @@ public static function writeLogoFromFile(Filesystem $storage, string $enclosingD
       return false;
   }
 
+  /**
+   * Write a logo file to storage from a URL
+   *
+   * @param Filesystem $storage The storage filesystem to write to
+   * @param string $url The URL of the source logo file
+   * @return string|false The URL of the written logo file, or false if write failed
+   */
   public function writeLogoFromUrl(Filesystem $storage, string $url) {
       $enclosingDirectory = $this->getLogoPath();
       $filename = basename($url);
diff --git a/up.sh b/up.sh
index d48f137be6..c0c26adc81 100755
--- a/up.sh
+++ b/up.sh
@@ -65,7 +65,6 @@ docker-compose run --rm js bash -c "cd /var/www/ops/scripts/ && npm install"
 docker-compose run --rm js
 
 # Build and deploy the vite-project-image-location dev server
-# docker-compose run --rm -w /var/www/vite vite-project-image-location-prod bash -c "npm install"
 docker-compose run --rm vite-project-image-location-prod bash -c "npm install"
 docker-compose run --rm vite-project-image-location-prod
 

From 337108386cc9769d232f1a5542c633126f5a2acd Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Fri, 15 Nov 2024 20:00:57 +0700
Subject: [PATCH 38/41] feat: uses tmp folder to store temp uploaded logos in
 project admin form

---
 CHANGELOG.md                                  |  1 +
 ops/deployment/docker-compose.yml             |  1 +
 playwright/package-lock.json                  | 48 +++++++------
 .../controllers/AdminProjectController.php    |  6 +-
 protected/models/Project.php                  | 70 +++++++++++--------
 5 files changed, 72 insertions(+), 54 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 93bdb7506a..5603665dec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+- Feat #376: Use tmp folder to store temp uploaded logos in project admin form
 - Feat #376: Uppy logo uploader for admin projects
 - Feat #701: Code refactoring to separate upload status transitions and notifications to prepare for upload status overhaul
 - Security #1867: Update the gitlab static application security testing (SAST) job using the Semgrep-based analyzer
diff --git a/ops/deployment/docker-compose.yml b/ops/deployment/docker-compose.yml
index 3906c15f61..3d33be3dc3 100644
--- a/ops/deployment/docker-compose.yml
+++ b/ops/deployment/docker-compose.yml
@@ -103,6 +103,7 @@ services:
       # access to File Upload Wizard model classes
       - ../../fuw/app:/app
       - ../../gigadb:/gigadb
+      - /tmp:/var/www/datasetfiles
     expose:
       - "9000"
     extra_hosts:
diff --git a/playwright/package-lock.json b/playwright/package-lock.json
index cf988fe27d..f0420cfbaa 100644
--- a/playwright/package-lock.json
+++ b/playwright/package-lock.json
@@ -16,35 +16,38 @@
       }
     },
     "node_modules/@axe-core/playwright": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.0.tgz",
-      "integrity": "sha512-Pf/pkFrJ0PkBvZdDS57SgOT6/TRGPlmh8QJOmm/zpQfQPnfwHfP0LrpqueVhjhvKYD63M7NyLnj0G4Vo3kOaiA==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.10.1.tgz",
+      "integrity": "sha512-EV5t39VV68kuAfMKqb/RL+YjYKhfuGim9rgIaQ6Vntb2HgaCaau0h98Y3WEUqW1+PbdzxDtDNjFAipbtZuBmEA==",
+      "license": "MPL-2.0",
       "dependencies": {
-        "axe-core": "~4.8.2"
+        "axe-core": "~4.10.2"
       },
       "peerDependencies": {
         "playwright-core": ">= 1.0.0"
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.39.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.39.0.tgz",
-      "integrity": "sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==",
+      "version": "1.48.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.48.2.tgz",
+      "integrity": "sha512-54w1xCWfXuax7dz4W2M9uw0gDyh+ti/0K/MxcCUxChFh37kkdxPdfZDw5QBbuPUJHr1CiHJ1hXgSs+GgeQc5Zw==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.39.0"
+        "playwright": "1.48.2"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     },
     "node_modules/axe-core": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz",
-      "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.2.tgz",
+      "integrity": "sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==",
+      "license": "MPL-2.0",
       "engines": {
         "node": ">=4"
       }
@@ -55,6 +58,7 @@
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -64,32 +68,34 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.39.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.39.0.tgz",
-      "integrity": "sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==",
+      "version": "1.48.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.48.2.tgz",
+      "integrity": "sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.39.0"
+        "playwright-core": "1.48.2"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       },
       "optionalDependencies": {
         "fsevents": "2.3.2"
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.39.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz",
-      "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==",
+      "version": "1.48.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.48.2.tgz",
+      "integrity": "sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==",
+      "license": "Apache-2.0",
       "bin": {
         "playwright-core": "cli.js"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     }
   }
diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index 375591d67f..cfe6a1d254 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -65,7 +65,6 @@ public function actionCreate()
           if ($model->save()) {
               if ($tempImageLocation) {
                   $logoUrl = $model->writeLogoFromUrl($storage, $tempImageLocation);
-                  Project::deleteTempLogo($tempImageLocation);
 
                   if ($logoUrl) {
                       $model->image_location = $logoUrl;
@@ -99,7 +98,7 @@ public function actionUploadTempLogo() {
       }
 
       if ($uploadedLogoFile) {
-          $image_location = Project::writeLogoFromFile(Yii::$app->cloudStore, Project::getTempLogoPath(), $uploadedLogoFile);
+          $image_location = Project::writeTmpLogoFromFile($uploadedLogoFile);
 
           if (!$image_location) {
               $this->makeJSONResponse(500, 'Failed to save logo image');
@@ -159,9 +158,6 @@ public function actionUpdate($id)
               if ($logoUrl) {
                   $model->image_location = $logoUrl;
               }
-
-              $tempImageLocation = $newAttributes['image_location'];
-              Project::deleteTempLogo($tempImageLocation);
           }
 
           // NOTE I think saving the model will trigger validation and thus fail if the URL or name are left unchanged
diff --git a/protected/models/Project.php b/protected/models/Project.php
index 5a8c782787..14f6b99e53 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -144,6 +144,35 @@ function check_duplicate(){
 
   }
 
+  /**
+   * Write a logo file to the server's /tmp directory from an uploaded file
+   *
+   * @param CUploadedFile $file The uploaded file to write
+   * @return string|false The path of the written temp file, or false if write failed
+   */
+  public static function writeTmpLogoFromFile(CUploadedFile $file) {
+      $slugger = new \Symfony\Component\String\Slugger\AsciiSlugger();
+      $info = pathinfo($file->getName());
+      $fileName = $slugger->slug($info['filename'])->toString();
+      $filepath = '/datasetfiles/' . Uuid::uuid4()->toString() . '/' . $fileName . '.' . $info['extension'];
+      $fullTmpPath = Yii::getAlias('@webroot') . $filepath;
+
+      $dir = dirname($fullTmpPath);
+      if (!is_dir($dir)) {
+          if (!mkdir($dir, 0755, true)) {
+              Yii::log("Failed to create directory: " . $dir, 'error');
+              return false;
+          }
+      }
+
+      if (move_uploaded_file($file->getTempName(), $fullTmpPath)) {
+          return $filepath;
+      }
+
+      Yii::log("Failed to move uploaded file to: " . $fullTmpPath, 'error');
+      return false;
+  }
+
   /**
    * Write a logo file to storage from an uploaded file
    *
@@ -183,40 +212,30 @@ public function writeLogoFromUrl(Filesystem $storage, string $url) {
       $logoPath = sprintf("%s/%s", $enclosingDirectory, $filename);
       $logoUrl = sprintf("%s/%s", Project::getStorageBasePath(), $logoPath);
 
-      $sourcePath = str_replace(Project::getStorageBasePath() . '/', '', $url);
-      $content = $storage->read($sourcePath);
+      Yii::log("Writing logo from URL: " . $url, 'info');
+      Yii::log("Logo path: " . $logoPath, 'info');
+      Yii::log("Logo URL: " . $logoUrl, 'info');
 
-      if ($content === false) {
+      $sourcePath = Yii::getAlias('@webroot') . $url;
+      Yii::log("Source path: " . $sourcePath, 'info');
+
+      if (!file_exists($sourcePath)) {
+          Yii::log("Failed to read content from source path: " . $sourcePath, 'error');
           return false;
       }
 
+      Yii::log("Successfully read content from source path", 'info');
+
       if ($storage->put(
           $logoPath,
-          $content,
+          file_get_contents($sourcePath),
           ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
       )) {
+          Yii::log("Successfully wrote logo to storage at: " . $logoPath, 'info');
           return $logoUrl;
       }
 
-      return false;
-  }
-
-  /**
-   * Delete a temporary logo path from storage
-   *
-   * @param string $tempImageLocation a full URL for the temp logo image
-   * @return bool
-   */
-  public static function deleteTempLogo($tempImageLocation) {
-      $storage = Yii::$app->cloudStore;
-      $tempLogoPath = str_replace(Project::getStorageBasePath() . '/', '', $tempImageLocation);
-      $tempDirectory = dirname($tempLogoPath);
-
-      if ($storage->has($tempLogoPath)) {
-        $storage->deleteDir($tempDirectory);
-        return true;
-      }
-
+      Yii::log("Failed to write logo to storage at: " . $logoPath, 'error');
       return false;
   }
 
@@ -243,11 +262,6 @@ public function getLogoPath(): string
       return Yii::$app->params['environment'] . '/images/projects/' . $this->getUuid();
   }
 
-  public static function getTempLogoPath(): string
-  {
-      return Yii::$app->params['environment'] . '/images/projects/temp/' . Uuid::uuid4()->toString();
-  }
-
   /**
    * Return a UUID based on the project id
    *

From 487fe6ec8ad869a630a903ddea9db4946800235b Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Fri, 15 Nov 2024 20:19:36 +0700
Subject: [PATCH 39/41] chore: remove excessive logs

---
 protected/models/Project.php | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/protected/models/Project.php b/protected/models/Project.php
index 14f6b99e53..c2910f0fd4 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -208,30 +208,21 @@ public static function writeLogoFromFile(Filesystem $storage, string $enclosingD
    */
   public function writeLogoFromUrl(Filesystem $storage, string $url) {
       $enclosingDirectory = $this->getLogoPath();
+      $sourcePath = Yii::getAlias('@webroot') . $url;
       $filename = basename($url);
       $logoPath = sprintf("%s/%s", $enclosingDirectory, $filename);
       $logoUrl = sprintf("%s/%s", Project::getStorageBasePath(), $logoPath);
 
-      Yii::log("Writing logo from URL: " . $url, 'info');
-      Yii::log("Logo path: " . $logoPath, 'info');
-      Yii::log("Logo URL: " . $logoUrl, 'info');
-
-      $sourcePath = Yii::getAlias('@webroot') . $url;
-      Yii::log("Source path: " . $sourcePath, 'info');
-
       if (!file_exists($sourcePath)) {
           Yii::log("Failed to read content from source path: " . $sourcePath, 'error');
           return false;
       }
 
-      Yii::log("Successfully read content from source path", 'info');
-
       if ($storage->put(
           $logoPath,
           file_get_contents($sourcePath),
           ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
       )) {
-          Yii::log("Successfully wrote logo to storage at: " . $logoPath, 'info');
           return $logoUrl;
       }
 

From 8ab6092eb5861df7e272c8564714a399a8b942f9 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Mon, 18 Nov 2024 08:54:27 +0700
Subject: [PATCH 40/41] refactor: simplifies write logo fnc

---
 protected/models/Project.php | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/protected/models/Project.php b/protected/models/Project.php
index c2910f0fd4..bd5664c76c 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -209,9 +209,7 @@ public static function writeLogoFromFile(Filesystem $storage, string $enclosingD
   public function writeLogoFromUrl(Filesystem $storage, string $url) {
       $enclosingDirectory = $this->getLogoPath();
       $sourcePath = Yii::getAlias('@webroot') . $url;
-      $filename = basename($url);
-      $logoPath = sprintf("%s/%s", $enclosingDirectory, $filename);
-      $logoUrl = sprintf("%s/%s", Project::getStorageBasePath(), $logoPath);
+      $outputPath = sprintf("%s/%s", $enclosingDirectory, basename($url));
 
       if (!file_exists($sourcePath)) {
           Yii::log("Failed to read content from source path: " . $sourcePath, 'error');
@@ -219,14 +217,14 @@ public function writeLogoFromUrl(Filesystem $storage, string $url) {
       }
 
       if ($storage->put(
-          $logoPath,
+          $outputPath,
           file_get_contents($sourcePath),
           ['visibility' => AdapterInterface::VISIBILITY_PUBLIC]
       )) {
-          return $logoUrl;
+          return sprintf("%s/%s", Project::getStorageBasePath(), $outputPath);
       }
 
-      Yii::log("Failed to write logo to storage at: " . $logoPath, 'error');
+      Yii::log("Failed to write logo to storage at: " . $outputPath, 'error');
       return false;
   }
 

From 2bf354ea332f759c7e6a5480d71f1c672a5f7f13 Mon Sep 17 00:00:00 2001
From: luis-toptal <luis.martinez@toptal.com>
Date: Mon, 18 Nov 2024 09:24:26 +0700
Subject: [PATCH 41/41] refactor: update and write tmp logo, set uppy debug to
 false

---
 protected/controllers/AdminProjectController.php |  8 ++++----
 protected/models/Project.php                     | 15 ++++++++-------
 vite/src/components/LogoUploadUppy.vue           |  2 +-
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/protected/controllers/AdminProjectController.php b/protected/controllers/AdminProjectController.php
index cfe6a1d254..8debde9bea 100644
--- a/protected/controllers/AdminProjectController.php
+++ b/protected/controllers/AdminProjectController.php
@@ -153,14 +153,14 @@ public function actionUpdate($id)
                   $model->deleteLogo($storage);
               }
 
-              $logoUrl = $model->writeLogoFromUrl($storage, $model->image_location);
+              $newLogoUrl = $model->writeLogoFromUrl($storage, $model->image_location);
 
-              if ($logoUrl) {
-                  $model->image_location = $logoUrl;
+              if ($newLogoUrl) {
+                  $model->image_location = $newLogoUrl;
               }
           }
 
-          // NOTE I think saving the model will trigger validation and thus fail if the URL or name are left unchanged
+          // NOTE Saving the model will trigger validation and thus fail if the URL or name are left unchanged, we might not want that in the case where we need to update only the logo
           if($model->save()) {
             $this->redirect(array('view','id'=>$model->id));
           }
diff --git a/protected/models/Project.php b/protected/models/Project.php
index bd5664c76c..ff84222ddb 100644
--- a/protected/models/Project.php
+++ b/protected/models/Project.php
@@ -154,15 +154,16 @@ public static function writeTmpLogoFromFile(CUploadedFile $file) {
       $slugger = new \Symfony\Component\String\Slugger\AsciiSlugger();
       $info = pathinfo($file->getName());
       $fileName = $slugger->slug($info['filename'])->toString();
-      $filepath = '/datasetfiles/' . Uuid::uuid4()->toString() . '/' . $fileName . '.' . $info['extension'];
+      $filepath = sprintf('/datasetfiles/%s/%s.%s',
+        Uuid::uuid4()->toString(),
+        $fileName,
+        $info['extension']
+      );
       $fullTmpPath = Yii::getAlias('@webroot') . $filepath;
 
-      $dir = dirname($fullTmpPath);
-      if (!is_dir($dir)) {
-          if (!mkdir($dir, 0755, true)) {
-              Yii::log("Failed to create directory: " . $dir, 'error');
-              return false;
-          }
+      if (!is_dir($dir = dirname($fullTmpPath)) && !mkdir($dir, 0755, true)) {
+          Yii::log("Failed to create directory: " . $dir, 'error');
+          return false;
       }
 
       if (move_uploaded_file($file->getTempName(), $fullTmpPath)) {
diff --git a/vite/src/components/LogoUploadUppy.vue b/vite/src/components/LogoUploadUppy.vue
index d3940ea5b3..ae993d5f66 100644
--- a/vite/src/components/LogoUploadUppy.vue
+++ b/vite/src/components/LogoUploadUppy.vue
@@ -56,7 +56,7 @@ const endpoint = computed(() => {
 
 const uppy = new Uppy({
   autoProceed: false,
-  debug: true,
+  debug: false,
   restrictions: {
     maxNumberOfFiles: 1,
     allowedFileTypes: ['image/*'],