Scope knowledge and image libraries by brand

apps/admin-web/src/components/ImageLibraryPicker.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { imagesApi } from '@/lib/api'
 import { formatBytes, formatPercentage } from '@/lib/display'
+import { useCompanyStore } from '@/stores/company'
 import type { ImageAssetItem } from '@geo/shared-types'
 import { useQuery } from '@tanstack/vue-query'
 import { computed, ref, watch } from 'vue'
@@ -20,6 +21,8 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const companyStore = useCompanyStore()
+const currentBrandId = computed(() => companyStore.currentBrandId)
 
 // State
 const selectedFolderId = ref<number | null>(null)
@@ -31,7 +34,8 @@ const selectedId = ref<number | null>(null)
 
 // Queries
 const foldersQuery = useQuery({
-  queryKey: ['images', 'folders'],
+  queryKey: computed(() => ['images', 'folders', currentBrandId.value]),
+  enabled: computed(() => Boolean(currentBrandId.value)),
   queryFn: () => imagesApi.listFolders(),
 })
 
@@ -40,6 +44,7 @@ const imagesQuery = useQuery({
     'images',
     'list',
     'picker',
+    currentBrandId.value,
     {
       folder_id: selectedFolderId.value,
       q: debouncedSearch.value,
@@ -47,6 +52,7 @@ const imagesQuery = useQuery({
       page_size: pageSize.value,
     },
   ]),
+  enabled: computed(() => Boolean(currentBrandId.value)),
   queryFn: () =>
     imagesApi.list({
       folder_id: selectedFolderId.value ?? undefined,
@@ -77,6 +83,12 @@ watch(searchKeyword, () => {
   }, 300)
 })
 
+watch(currentBrandId, () => {
+  selectedFolderId.value = null
+  selectedId.value = null
+  currentPage.value = 1
+})
+
 function handleSelect(image: ImageAssetItem) {
   selectedId.value = image.id
   emit('select', image)