Use Dexie instead of Pinia store values in tileList inside mapEditor

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>