Use Dexie instead of Pinia store values in tileList inside mapEditor

src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue

@@ -55,12 +55,10 @@ import type { MapObject } from '@/application/types'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
-import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
-const mapEditorStore = useMapEditorStore()
 
 const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
 
@@ -105,10 +103,6 @@ function refreshObjectList(unsetSelectedMapObject = true) {
     if (unsetSelectedMapObject) {
       assetManagerStore.setSelectedMapObject(null)
     }
-
-    if (mapEditorStore.active) {
-      mapEditorStore.setMapObjectList(response)
-    }
   })
 }
 

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

@@ -30,9 +30,11 @@ import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
+import { TileStorage } from '@/storage/storages'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
+const tileStorage = new TileStorage()
 
 const selectedTile = computed(() => assetManagerStore.selectedTile)
 
@@ -54,12 +56,13 @@ watch(selectedTile, (tile: Tile | null) => {
   tileTags.value = tile.tags
 })
 
-function deleteTile() {
-  gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, (response: boolean) => {
+async function deleteTile() {
+  gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, async (response: boolean) => {
     if (!response) {
       console.error('Failed to delete tile')
       return
     }
+    await tileStorage.delete(selectedTile.value!.id)
     refreshTileList()
   })
 }

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

@@ -78,7 +78,7 @@ const toggleTag = (tag: string) => {
 onMounted(async () => {
   isModalOpen.value = true
   gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
-    mapEditorStore.setMapObjectList(response)
+    // mapEditorStore.setMapObjectList(response)
   })
 })
 </script>

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

@@ -84,26 +84,27 @@
 import config from '@/application/config'
 import type { Tile } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { TileStorage } from '@/storage/storages'
+import { liveQuery } from 'dexie'
 
-const gameStore = useGameStore()
-const isModalOpen = ref(false)
+const tileStorage = new TileStorage()
 const mapEditorStore = useMapEditorStore()
 const searchQuery = ref('')
 const selectedTags = ref<string[]>([])
 const tileCategories = ref<Map<string, string>>(new Map())
 const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
+const tiles = ref<Tile[]>([])
 
 const uniqueTags = computed(() => {
-  const allTags = mapEditorStore.tileList.flatMap((tile) => tile.tags || [])
+  const allTags = tiles.value.flatMap((tile) => tile.tags || [])
   return Array.from(new Set(allTags))
 })
 
 const groupedTiles = computed(() => {
   const groups: { parent: Tile; children: Tile[] }[] = []
-  const filteredTiles = mapEditorStore.tileList.filter((tile) => {
+  const filteredTiles = tiles.value.filter((tile) => {
     const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
     const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag)))
     return matchesSearch && matchesTags
@@ -173,10 +174,8 @@ function processTile(tile: Tile) {
 }
 
 function getDominantColor(imageData: ImageData) {
-  let r = 0,
-    g = 0,
-    b = 0,
-    total = 0
+  let r = 0, g = 0, b = 0, total = 0
+
   for (let i = 0; i < imageData.data.length; i += 4) {
     if (imageData.data[i + 3] > 0) {
       // Only consider non-transparent pixels
@@ -186,6 +185,7 @@ function getDominantColor(imageData: ImageData) {
       total++
     }
   }
+
   return {
     r: Math.round(r / total),
     g: Math.round(g / total),
@@ -226,7 +226,22 @@ function isActiveTile(tile: Tile): boolean {
   return mapEditorStore.selectedTile === tile.id
 }
 
-onMounted(async () => {
-  isModalOpen.value = true
+let subscription: any = null
+
+onMounted(() => {
+  subscription = liveQuery(() => tileStorage.liveQuery()).subscribe({
+    next: (result) => {
+      tiles.value = result
+    },
+    error: (error) => {
+      console.error('Failed to fetch tiles:', error)
+    }
+  })
+})
+
+onUnmounted(() => {
+  if (subscription) {
+    subscription.unsubscribe()
+  }
 })
 </script>

src/storage/baseStorage.ts

@@ -68,6 +68,10 @@ export class BaseStorage<T extends { id: string }> {
     }
   }
 
+  liveQuery() {
+    return this.dexie.table(this.tableName).toArray()
+  }
+
   async reset() {
     try {
       await this.dexie.table(this.tableName).clear()