Moved tile list to its own component

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;

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>