Code improvements

src/components/utilities/assetManager/AssetManager.vue

@@ -19,12 +19,25 @@
 
     <!-- Assets -->
     <div class="assets active">
-      <a class="asset">
+      <div class="asset">
+        <!-- @TODO: can this pls be less html, make input 100% and fix the spacing below -->
+        <div class="modal-form">
+          <div class="form-fields">
+            <div class="form-field">
+              <input class="input-cyan" placeholder="Search..." />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="asset">
         <span class="asset-name">Upload new</span>
         <input ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
-      </a>
-      <a class="asset">
-        <span class="asset-name" v-for="(tile, index) in tiles" :key="index">{{ tile }}</span>
+      </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>
     <div class="assets">
@@ -63,6 +76,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import {useSocketStore} from '@/stores/socket'
+import config from '@/config'
 
 const socket = useSocketStore()
 const tileUploadField = ref(null)
@@ -71,7 +85,15 @@ const tiles = ref()
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
   if (!files) return
-  socket.connection.emit('gm:tile:upload', files)
+  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(() => {
@@ -81,7 +103,7 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scroped>
 @import '@/assets/scss/main';
 
 .container {
@@ -101,6 +123,7 @@ onMounted(() => {
   }
 
   .assets {
+    overflow:auto;
     width: 35%;
     display: none;
     &.active {
@@ -145,6 +168,16 @@ onMounted(() => {
     }
   }
 
+  .asset-details {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    img {
+      height: 28px;
+    }
+  }
+
   .asset-categories, .assets, .asset-info {
     flex-direction: column;
     position: relative;
@@ -158,6 +191,7 @@ onMounted(() => {
       background-color: $dark-cyan;
     }
     .category, .asset, .image-container {
+
       position: relative;
       padding: 10px;
       &::after {