From 8896624e0310f6c51b8c14d03327d1c60246b9c4 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 23 Jun 2024 16:50:28 +0200
Subject: [PATCH] Moved tile list to its own component

---
 package-lock.json                             | 177 ++++++++++--------
 .../utilities/assetManager/AssetManager.vue   |  62 ++----
 .../assetManager/partials/TileList.vue        |  52 +++++
 3 files changed, 163 insertions(+), 128 deletions(-)
 create mode 100644 src/components/utilities/assetManager/partials/TileList.vue

diff --git a/package-lock.json b/package-lock.json
index 46ce8bc..3995fdd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2244,39 +2244,39 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.29",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.29.tgz",
-      "integrity": "sha512-TFKiRkKKsRCKvg/jTSSKK7mYLJEQdUiUfykbG49rubC9SfDyvT2JrzTReopWlz2MxqeLyxh9UZhvxEIBgAhtrg==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.30.tgz",
+      "integrity": "sha512-ZL8y4Xxdh8O6PSwfdZ1IpQ24PjTAieOz3jXb/MDTfDtANcKBMxg1KLm6OX2jofsaQGYfIVzd3BAG22i56/cF1w==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/shared": "3.4.29",
+        "@vue/shared": "3.4.30",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.29",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.29.tgz",
-      "integrity": "sha512-A6+iZ2fKIEGnfPJejdB7b1FlJzgiD+Y/sxxKwJWg1EbJu6ZPgzaPQQ51ESGNv0CP6jm6Z7/pO6Ia8Ze6IKrX7w==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.30.tgz",
+      "integrity": "sha512-+16Sd8lYr5j/owCbr9dowcNfrHd+pz+w2/b5Lt26Oz/kB90C9yNbxQ3bYOvt7rI2bxk0nqda39hVcwDFw85c2Q==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.4.29",
-        "@vue/shared": "3.4.29"
+        "@vue/compiler-core": "3.4.30",
+        "@vue/shared": "3.4.30"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.29",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.29.tgz",
-      "integrity": "sha512-zygDcEtn8ZimDlrEQyLUovoWgKQic6aEQqRXce2WXBvSeHbEbcAsXyCk9oG33ZkyWH4sl9D3tkYc1idoOkdqZQ==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.30.tgz",
+      "integrity": "sha512-8vElKklHn/UY8+FgUFlQrYAPbtiSB2zcgeRKW7HkpSRn/JjMRmZvuOtwDx036D1aqKNSTtXkWRfqx53Qb+HmMg==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/compiler-core": "3.4.29",
-        "@vue/compiler-dom": "3.4.29",
-        "@vue/compiler-ssr": "3.4.29",
-        "@vue/shared": "3.4.29",
+        "@vue/compiler-core": "3.4.30",
+        "@vue/compiler-dom": "3.4.30",
+        "@vue/compiler-ssr": "3.4.30",
+        "@vue/shared": "3.4.30",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.10",
         "postcss": "^8.4.38",
@@ -2284,13 +2284,13 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.29",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.29.tgz",
-      "integrity": "sha512-rFbwCmxJ16tDp3N8XCx5xSQzjhidYjXllvEcqX/lopkoznlNPz3jyy0WGJCyhAaVQK677WWFt3YO/WUEkMMUFQ==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.30.tgz",
+      "integrity": "sha512-ZJ56YZGXJDd6jky4mmM0rNaNP6kIbQu9LTKZDhcpddGe/3QIalB1WHHmZ6iZfFNyj5mSypTa4+qDJa5VIuxMSg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.29",
-        "@vue/shared": "3.4.29"
+        "@vue/compiler-dom": "3.4.30",
+        "@vue/shared": "3.4.30"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -2300,28 +2300,31 @@
       "license": "MIT"
     },
     "node_modules/@vue/devtools-core": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.3.3.tgz",
-      "integrity": "sha512-i6Bwkx4OwfY0QVHjAdsivhlzZ2HMj7fbNRYJsWspQ+dkA1f3nTzycPqZmVUsm2TGkbQlhTMhCAdDoP97JKoc+g==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.3.4.tgz",
+      "integrity": "sha512-HiaskdszC1ajYhZkglBzc4BBb4OHAhYonoOaQMx62ZId++ezpd4n0CbM9SXYp8o1JhxImSdueKgJgtyvhm4vAA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-kit": "^7.3.3",
-        "@vue/devtools-shared": "^7.3.3",
+        "@vue/devtools-kit": "^7.3.4",
+        "@vue/devtools-shared": "^7.3.4",
         "mitt": "^3.0.1",
         "nanoid": "^3.3.4",
         "pathe": "^1.1.2",
         "vite-hot-client": "^0.2.3"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
       }
     },
     "node_modules/@vue/devtools-kit": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.3.3.tgz",
-      "integrity": "sha512-m+dFI57BrzKYPKq73mt4CJ5GWld5OLBseLHPHGVP7CaILNY9o1gWVJWAJeF8XtQ9LTiMxZSaK6NcBsFuxAhD0g==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.3.4.tgz",
+      "integrity": "sha512-DalQZWaFLRyA4qfKT0WT7e+q2AwvYoTwd0pWqswHqcpviXw+oU6FlSJHMrEACB3lBHjN1KBS9Kh527sWIe1vcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-shared": "^7.3.3",
+        "@vue/devtools-shared": "^7.3.4",
         "birpc": "^0.2.17",
         "hookable": "^5.5.3",
         "mitt": "^3.0.1",
@@ -2331,9 +2334,9 @@
       }
     },
     "node_modules/@vue/devtools-shared": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.3.tgz",
-      "integrity": "sha512-JQTVDM1WE4RRAsHTZvAB7+jczdHcbHgNUU/MWSIx5sV7FzCmnyWETPQ7K4/Y477weqT5xbybtBaK/OpzdaCiBQ==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.4.tgz",
+      "integrity": "sha512-5S5cHh7oWLZdboujnLteR3rT8UGfKHfA34aGLyFRB/B5TqBxmeLW1Rq32xW6TCDEy4isoYsYHGwJVp6DQcpiDA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2381,17 +2384,18 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "2.0.21",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.21.tgz",
-      "integrity": "sha512-vjs6KwnCK++kIXT+eI63BGpJHfHNVJcUCr3RnvJsccT3vbJnZV5IhHR2puEkoOkIbDdp0Gqi1wEnv3hEd3WsxQ==",
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.22.tgz",
+      "integrity": "sha512-dNTAAtEOuMiz7N1s5tKpypnVVCtawxVSF5BukD0ELcYSw+DSbrSlYYSw8GuwvurodCeYFSHsmslE+c2sYDNoiA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "~2.3.0-alpha.15",
+        "@volar/language-core": "~2.3.1",
         "@vue/compiler-dom": "^3.4.0",
         "@vue/shared": "^3.4.0",
         "computeds": "^0.0.1",
         "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
         "path-browserify": "^1.0.1",
         "vue-template-compiler": "^2.7.14"
       },
@@ -2405,53 +2409,53 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.29",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.29.tgz",
-      "integrity": "sha512-w8+KV+mb1a8ornnGQitnMdLfE0kXmteaxLdccm2XwdFxXst4q/Z7SEboCV5SqJNpZbKFeaRBBJBhW24aJyGINg==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.30.tgz",
+      "integrity": "sha512-bVJurnCe3LS0JII8PPoAA63Zd2MBzcKrEzwdQl92eHCcxtIbxD2fhNwJpa+KkM3Y/A4T5FUnmdhgKwOf6BfbcA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.4.29"
+        "@vue/shared": "3.4.30"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.29",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.29.tgz",
-      "integrity": "sha512-s8fmX3YVR/Rk5ig0ic0NuzTNjK2M7iLuVSZyMmCzN/+Mjuqqif1JasCtEtmtoJWF32pAtUjyuT2ljNKNLeOmnQ==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.30.tgz",
+      "integrity": "sha512-qaFEbnNpGz+tlnkaualomogzN8vBLkgzK55uuWjYXbYn039eOBZrWxyXWq/7qh9Bz2FPifZqGjVDl/FXiq9L2g==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.4.29",
-        "@vue/shared": "3.4.29"
+        "@vue/reactivity": "3.4.30",
+        "@vue/shared": "3.4.30"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.29",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.29.tgz",
-      "integrity": "sha512-gI10atCrtOLf/2MPPMM+dpz3NGulo9ZZR9d1dWo4fYvm+xkfvRrw1ZmJ7mkWtiJVXSsdmPbcK1p5dZzOCKDN0g==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.30.tgz",
+      "integrity": "sha512-tV6B4YiZRj5QsaJgw2THCy5C1H+2UeywO9tqgWEc21tn85qHEERndHN/CxlyXvSBFrpmlexCIdnqPuR9RM9thw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.4.29",
-        "@vue/runtime-core": "3.4.29",
-        "@vue/shared": "3.4.29",
+        "@vue/reactivity": "3.4.30",
+        "@vue/runtime-core": "3.4.30",
+        "@vue/shared": "3.4.30",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.29",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.29.tgz",
-      "integrity": "sha512-HMLCmPI2j/k8PVkSBysrA2RxcxC5DgBiCdj7n7H2QtR8bQQPqKAe8qoaxLcInzouBmzwJ+J0x20ygN/B5mYBng==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.30.tgz",
+      "integrity": "sha512-TBD3eqR1DeDc0cMrXS/vEs/PWzq1uXxnvjoqQuDGFIEHFIwuDTX/KWAQKIBjyMWLFHEeTDGYVsYci85z2UbTDg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.29",
-        "@vue/shared": "3.4.29"
+        "@vue/compiler-ssr": "3.4.30",
+        "@vue/shared": "3.4.30"
       },
       "peerDependencies": {
-        "vue": "3.4.29"
+        "vue": "3.4.30"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.29",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.29.tgz",
-      "integrity": "sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.30.tgz",
+      "integrity": "sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg==",
       "license": "MIT"
     },
     "node_modules/@vue/test-utils": {
@@ -5056,6 +5060,13 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "license": "MIT"
     },
+    "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,
+      "license": "MIT"
+    },
     "node_modules/mustache": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
@@ -6836,15 +6847,15 @@
       }
     },
     "node_modules/vite-plugin-vue-devtools": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.3.3.tgz",
-      "integrity": "sha512-LWOCjArhHaSJ/rzInFkCnEccUB/F1sxyof0govFPpUeglq3CLnkP7bj55bQAixwYBN2pwK9DmDidcXXrX6QVFw==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.3.4.tgz",
+      "integrity": "sha512-5WKGIFldO9/E/J6d+x286ENieFUsexcg8Qgh/js3rEJtzipHzxiD47xMJVSBhl14n1E4jABIMuwmn1FYtpwm3w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-core": "^7.3.3",
-        "@vue/devtools-kit": "^7.3.3",
-        "@vue/devtools-shared": "^7.3.3",
+        "@vue/devtools-core": "^7.3.4",
+        "@vue/devtools-kit": "^7.3.4",
+        "@vue/devtools-shared": "^7.3.4",
         "execa": "^8.0.1",
         "sirv": "^2.0.4",
         "vite-plugin-inspect": "^0.8.4",
@@ -6952,16 +6963,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.4.29",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.29.tgz",
-      "integrity": "sha512-8QUYfRcYzNlYuzKPfge1UWC6nF9ym0lx7mpGVPJYNhddxEf3DD0+kU07NTL0sXuiT2HuJuKr/iEO8WvXvT0RSQ==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.30.tgz",
+      "integrity": "sha512-NcxtKCwkdf1zPsr7Y8+QlDBCGqxvjLXF2EX+yi76rV5rrz90Y6gK1cq0olIhdWGgrlhs9ElHuhi9t3+W5sG5Xw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.29",
-        "@vue/compiler-sfc": "3.4.29",
-        "@vue/runtime-dom": "3.4.29",
-        "@vue/server-renderer": "3.4.29",
-        "@vue/shared": "3.4.29"
+        "@vue/compiler-dom": "3.4.30",
+        "@vue/compiler-sfc": "3.4.30",
+        "@vue/runtime-dom": "3.4.30",
+        "@vue/server-renderer": "3.4.30",
+        "@vue/shared": "3.4.30"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -6973,9 +6984,9 @@
       }
     },
     "node_modules/vue-component-type-helpers": {
-      "version": "2.0.21",
-      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.21.tgz",
-      "integrity": "sha512-3NaicyZ7N4B6cft4bfb7dOnPbE9CjLcx+6wZWAg5zwszfO4qXRh+U52dN5r5ZZfc6iMaxKCEcoH9CmxxoFZHLg==",
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.22.tgz",
+      "integrity": "sha512-gPr2Ba7efUwy/Vfbuf735bHSVdN4ycoZUCHfypkI33M9DUH+ieRblLLVM2eImccFYaWNWwEzURx02EgoXDBmaQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -7016,14 +7027,14 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "2.0.21",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.21.tgz",
-      "integrity": "sha512-E6x1p1HaHES6Doy8pqtm7kQern79zRtIewkf9fiv7Y43Zo4AFDS5hKi+iHi2RwEhqRmuiwliB1LCEFEGwvxQnw==",
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.22.tgz",
+      "integrity": "sha512-lMBIwPBO0sxCcmvu45yt1b035AaQ8/XSXQDk8m75y4j0jSXY/y/XzfEtssQ9JMS47lDaR10O3/926oCs8OeGUw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/typescript": "~2.3.0-alpha.15",
-        "@vue/language-core": "2.0.21",
+        "@volar/typescript": "~2.3.1",
+        "@vue/language-core": "2.0.22",
         "semver": "^7.5.4"
       },
       "bin": {
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index a5f5eee..adff4ea 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -3,10 +3,10 @@
     <div class="asset-categories">
 
       <!-- Asset Categories -->
-      <a class="category selected">
+      <a class="category" :class="{ selected: selectedCategory === 'tiles' }" @click="() => selectedCategory = 'tiles'">
         <span class="category-name">Tiles</span>
       </a>
-      <a class="category">
+      <a class="category" :class="{ selected: selectedCategory === 'objects' }" @click="() => selectedCategory = 'objects'">
         <span class="category-name">Objects</span>
       </a>
       <a class="category">
@@ -19,25 +19,10 @@
     <div class="divider categories"></div>
 
     <!-- Assets -->
-    <div class="assets active" ref="elementToScroll" @scroll="onScroll">
-      <div class="asset">
-        <input class="input-cyan search-field" placeholder="Search..." />
-      </div>
-      <div class="asset add-new">
-        <span class="asset-name">Upload new</span>
-        <label for="upload-asset" class="file-upload">
-          <input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
-          Choose file
-        </label>
-      </div>
-      <a class="asset" v-for="(tile, index) in tiles" :key="index">
-        <div class="asset-details">
-          <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
-          <span class="asset-name">{{ tile }}</span>
-        </div>
-      </a>
+    <div class="assets" :class="{ active: selectedCategory === 'tiles' }" ref="elementToScroll" @scroll="onScroll">
+      <TileList />
     </div>
-    <div class="assets">
+    <div class="assets" :class="{ active: selectedCategory === 'objects' }">
       <a class="asset selected">
         <span class="asset-name">Wall #1</span>
       </a>
@@ -54,6 +39,7 @@
     <div class="divider assets-list"></div>
 
     <div class="asset-info">
+
       <div class="image-container">
         <img src="/assets/placeholders/wall-1.png" />
       </div>
@@ -70,6 +56,7 @@
           </div>
         </form>
       </div>
+
     </div>
   </div>
 </template>
@@ -77,11 +64,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import {useSocketStore} from '@/stores/socket'
-import config from '@/config'
+import TileList from '@/components/utilities/assetManager/partials/TileList.vue'
 
 const socket = useSocketStore()
-const tileUploadField = ref(null)
-const tiles = ref()
+
+const selectedCategory = ref('tiles')
 const hasScrolled = ref(false)
 const elementToScroll = ref() 
 
@@ -102,30 +89,9 @@ function toTop() {
     behavior: "smooth",
   });
 }
-
-
-const handleFileUpload = (e: Event) => {
-  const files = (e.target as HTMLInputElement).files
-  if (!files) return
-  socket.connection.emit('gm:tile:upload', files, (response: boolean) => {
-    if (!response) {
-      console.error('Failed to upload tile')
-      return
-    }
-    socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-      tiles.value = response
-    })
-  })
-}
-
-onMounted(() => {
-  socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-    tiles.value = response
-  })
-})
 </script>
 
-<style lang="scss" scroped>
+<style lang="scss">
 @import '@/assets/scss/main';
 
 .container {
@@ -241,6 +207,12 @@ onMounted(() => {
     }
   }
 
+  .category {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
   .asset-categories, .assets, .asset-info {
     flex-direction: column;
     position: relative;
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
new file mode 100644
index 0000000..34a7335
--- /dev/null
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="asset">
+    <input class="input-cyan search-field" placeholder="Search..." />
+  </div>
+  <div class="asset add-new">
+    <span class="asset-name">Upload new</span>
+    <label for="upload-asset" class="file-upload">
+      <input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
+      Choose file
+    </label>
+  </div>
+  <a class="asset" v-for="(tile, index) in tiles" :key="index">
+    <div class="asset-details">
+      <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
+      <span class="asset-name">{{ tile }}</span>
+    </div>
+  </a>
+</template>
+
+<script setup lang="ts">
+import {useSocketStore} from '@/stores/socket'
+import config from '@/config'
+import { onMounted, ref } from 'vue'
+
+const socket = useSocketStore()
+const tileUploadField = ref(null)
+const tiles = ref()
+
+const handleFileUpload = (e: Event) => {
+  const files = (e.target as HTMLInputElement).files
+  if (!files) return
+  socket.connection.emit('gm:tile:upload', files, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to upload tile')
+      return
+    }
+    socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+      tiles.value = response
+    })
+  })
+}
+
+onMounted(() => {
+  socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+    tiles.value = response
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file