Moved files into separate folders

src/components/utilities/assetManager/partials/tile/TileDetails.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="h-full overflow-auto">
+    <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
+      <div class="filler"></div>
+      <img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
+      <button class="btn-bordeaux px-4 py-1.5 min-w-24" type="button" @click.prevent="removeTile">Remove</button>
+      <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+    </div>
+    <div class="m-2.5 p-2.5 block">
+      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
+        <div class="w-full flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="name">Name</label>
+          <input v-model="tileName" class="input-cyan" type="text" name="name" placeholder="Tile #1" />
+        </div>
+        <div class="w-full flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="origin-x">Tags</label>
+          <ChipsInput v-model="tileTags" @update:modelValue="tileTags = $event" />
+        </div>
+        <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Tile } from '@/types'
+import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManager'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useGameStore } from '@/stores/game'
+import config from '@/config'
+import ChipsInput from '@/components/forms/ChipsInput.vue'
+
+const gameStore = useGameStore()
+const assetManagerStore = useAssetManagerStore()
+const zoneEditorStore = useZoneEditorStore()
+
+const selectedTile = computed(() => assetManagerStore.selectedTile)
+
+const tileName = ref('')
+const tileTags = ref()
+
+if (!selectedTile.value) {
+  console.error('No tile selected')
+}
+
+if (selectedTile.value) {
+  tileName.value = selectedTile.value.name
+  tileTags.value = selectedTile.value.tags
+}
+
+watch(selectedTile, (tile: Tile | null) => {
+  if (!tile) return
+  tileName.value = tile.name
+  tileTags.value = tile.tags
+})
+
+function removeTile() {
+  gameStore.connection?.emit('gm:tile:remove', { tile: selectedTile.value?.id }, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to remove tile')
+      return
+    }
+    refreshTileList()
+  })
+}
+
+function refreshTileList(unsetSelectedTile = true) {
+  gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
+    assetManagerStore.setTileList(response)
+
+    if (unsetSelectedTile) {
+      assetManagerStore.setSelectedTile(null)
+    }
+
+    if (zoneEditorStore.active) {
+      console.log('Refreshing tile list for zone store')
+      zoneEditorStore.setTileList(response)
+    }
+  })
+}
+
+function saveTile() {
+  if (!selectedTile.value) {
+    console.error('No tile selected')
+    return
+  }
+
+  gameStore.connection?.emit(
+    'gm:tile:update',
+    {
+      id: selectedTile.value.id,
+      name: tileName.value,
+      tags: tileTags.value
+    },
+    (response: boolean) => {
+      if (!response) {
+        console.error('Failed to save tile')
+        return
+      }
+      refreshTileList(false)
+    }
+  )
+}
+
+onMounted(() => {
+  if (!selectedTile.value) return
+})
+
+onBeforeUnmount(() => {
+  assetManagerStore.setSelectedTile(null)
+})
+</script>

src/components/utilities/assetManager/partials/tile/TileList.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
+    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 py-1.5 px-4 inline-flex hover:bg-cyan hover:cursor-pointer">
+      <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
+      Upload tile(s)
+    </label>
+    <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
+    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+  </div>
+  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+    <div v-bind="wrapperProps" ref="elementToScroll">
+      <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
+        <div class="flex items-center gap-2.5">
+          <div class="h-7 w-16 max-w-16 flex justify-center">
+            <img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
+          </div>
+          <span>{{ tile.name }}</span>
+        </div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+      </a>
+    </div>
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
+      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import config from '@/config'
+import { useGameStore } from '@/stores/game'
+import { onMounted, ref, computed } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManager'
+import { useAssetStore } from '@/stores/assets'
+import type { Tile } from '@/types'
+import { useVirtualList } from '@vueuse/core'
+
+const gameStore = useGameStore()
+const tileUploadField = ref(null)
+const assetManagerStore = useAssetManagerStore()
+const assetStore = useAssetStore()
+
+const searchQuery = ref('')
+
+const hasScrolled = ref(false)
+const elementToScroll = ref()
+
+const handleFileUpload = (e: Event) => {
+  const files = (e.target as HTMLInputElement).files
+  if (!files) return
+  gameStore.connection?.emit('gm:tile:upload', files, (response: boolean) => {
+    if (!response) {
+      if (config.development) console.error('Failed to upload tile')
+      return
+    }
+
+    assetStore.fetchAssets()
+
+    gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
+      assetManagerStore.setTileList(response)
+    })
+  })
+}
+
+const handleSearch = () => {
+  // Trigger a re-render of the virtual list
+  virtualList.value?.scrollTo(0)
+}
+
+const filteredTiles = computed(() => {
+  if (!searchQuery.value) {
+    return assetManagerStore.tileList
+  }
+  return assetManagerStore.tileList.filter((tile) => tile.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+})
+
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredTiles, {
+  itemHeight: 48
+})
+
+const virtualList = ref({ scrollTo })
+
+const onScroll = () => {
+  let scrollTop = elementToScroll.value.style.marginTop.replace('px', '')
+
+  if (scrollTop > 80) {
+    hasScrolled.value = true
+  } else if (scrollTop <= 80) {
+    hasScrolled.value = false
+  }
+}
+
+function toTop() {
+  virtualList.value?.scrollTo(0)
+}
+
+onMounted(() => {
+  gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
+    assetManagerStore.setTileList(response)
+  })
+})
+</script>