Formatted code

src/components/gameMaster/mapEditor/partials/MapObjectList.vue

@@ -44,23 +44,26 @@
 import config from '@/application/config'
 import type { MapObject } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
+import { MapObjectStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { computed, onMounted, ref } from 'vue'
+import { liveQuery } from 'dexie'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-const gameStore = useGameStore()
+const mapObjectStorage = new MapObjectStorage()
 const isModalOpen = ref(false)
 const mapEditorStore = useMapEditorStore()
 const searchQuery = ref('')
 const selectedTags = ref<string[]>([])
+const mapObjectList = ref<MapObject[]>([])
 
 const uniqueTags = computed(() => {
-  const allTags = mapEditorStore.mapObjectList.flatMap((obj) => obj.tags || [])
+  const allTags = mapObjectList.value.flatMap((obj) => obj.tags || [])
   return Array.from(new Set(allTags))
 })
 
 const filteredMapObjects = computed(() => {
-  return mapEditorStore.mapObjectList.filter((object) => {
+  return mapObjectList.value.filter((object) => {
     const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
     const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some((tag) => object.tags.includes(tag)))
     return matchesSearch && matchesTags
@@ -75,10 +78,23 @@ const toggleTag = (tag: string) => {
   }
 }
 
-onMounted(async () => {
+let subscription: any = null
+
+onMounted(() => {
   isModalOpen.value = true
-  gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
-    // mapEditorStore.setMapObjectList(response)
+  subscription = liveQuery(() => mapObjectStorage.liveQuery()).subscribe({
+    next: (result) => {
+      mapObjectList.value = result
+    },
+    error: (error) => {
+      console.error('Failed to fetch tiles:', error)
+    }
   })
 })
+
+onUnmounted(() => {
+  if (subscription) {
+    subscription.unsubscribe()
+  }
+})
 </script>