feat(bulk): gallerySelection Pinia store with order, mode, bulk actions

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/stores/gallerySelection.js

@@ -0,0 +1,76 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { useApi } from '../composables/useApi.js'
+
+export const useGallerySelectionStore = defineStore('gallerySelection', () => {
+  const api = useApi()
+
+  const isSelectMode = ref(false)
+  const order = ref([])            // image ids, selection order = source of truth
+  const commonTags = ref([])
+  const consensus = ref({})        // { category: [ {canonical_tag_id,...} ] }
+
+  const count = computed(() => order.value.length)
+  function isSelected(id) { return order.value.includes(id) }
+
+  function toggle(id) {
+    const i = order.value.indexOf(id)
+    if (i === -1) order.value.push(id)
+    else order.value.splice(i, 1)
+  }
+  function clear() {
+    order.value = []
+    commonTags.value = []
+    consensus.value = {}
+  }
+  function enterSelectMode() { isSelectMode.value = true }
+  function exitSelectMode() { isSelectMode.value = false; clear() }
+
+  async function loadCommonTags() {
+    if (order.value.length === 0) { commonTags.value = []; return }
+    const body = await api.post('/api/images/common-tags', {
+      body: { image_ids: order.value }
+    })
+    commonTags.value = body.tags
+  }
+
+  async function loadConsensus() {
+    if (order.value.length === 0) { consensus.value = {}; return }
+    const body = await api.post('/api/suggestions/bulk', {
+      body: { image_ids: order.value }
+    })
+    consensus.value = body.suggestions
+  }
+
+  async function refresh() {
+    await Promise.all([loadCommonTags(), loadConsensus()])
+  }
+
+  async function bulkAdd(tagId, source = 'manual') {
+    const body = await api.post('/api/images/bulk/tags', {
+      body: { image_ids: order.value, tag_id: tagId, source }
+    })
+    await refresh()
+    window.__fcToast?.({
+      text: `Added to ${body.added_count} image(s)`, type: 'success'
+    })
+    return body
+  }
+
+  async function bulkRemove(tagId) {
+    const body = await api.post('/api/images/bulk/tags/remove', {
+      body: { image_ids: order.value, tag_id: tagId }
+    })
+    await refresh()
+    window.__fcToast?.({
+      text: `Removed from ${body.removed_count} image(s)`, type: 'success'
+    })
+    return body
+  }
+
+  return {
+    isSelectMode, order, commonTags, consensus, count,
+    isSelected, toggle, clear, enterSelectMode, exitSelectMode,
+    loadCommonTags, loadConsensus, refresh, bulkAdd, bulkRemove
+  }
+})

frontend/test/gallerySelection.spec.js

@@ -0,0 +1,64 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { useGallerySelectionStore } from '../src/stores/gallerySelection.js'
+
+function stubFetch(handler) {
+  globalThis.fetch = vi.fn(async (url, init) => {
+    const { status, body } = handler(url, init)
+    return {
+      ok: status >= 200 && status < 300,
+      status,
+      statusText: String(status),
+      text: async () => (body == null ? '' : JSON.stringify(body))
+    }
+  })
+}
+
+describe('gallerySelection store', () => {
+  beforeEach(() => setActivePinia(createPinia()))
+  afterEach(() => vi.restoreAllMocks())
+
+  it('toggle adds/removes preserving order; count/isSelected track it', () => {
+    const s = useGallerySelectionStore()
+    s.toggle(5); s.toggle(9); s.toggle(2)
+    expect(s.order).toEqual([5, 9, 2])
+    expect(s.isSelected(9)).toBe(true)
+    expect(s.count).toBe(3)
+    s.toggle(9)
+    expect(s.order).toEqual([5, 2])
+    expect(s.isSelected(9)).toBe(false)
+  })
+
+  it('exitSelectMode clears selection and mode', () => {
+    const s = useGallerySelectionStore()
+    s.enterSelectMode(); s.toggle(1)
+    expect(s.isSelectMode).toBe(true)
+    s.exitSelectMode()
+    expect(s.isSelectMode).toBe(false)
+    expect(s.order).toEqual([])
+  })
+
+  it('bulkAdd posts the id list + source and refreshes', async () => {
+    const s = useGallerySelectionStore()
+    s.toggle(1); s.toggle(2)
+    const calls = []
+    stubFetch((url, init) => {
+      calls.push({ url, body: JSON.parse(init.body) })
+      if (url.includes('/bulk/tags')) return { status: 200, body: { added_count: 2, total: 2 } }
+      if (url.includes('common-tags')) return { status: 200, body: { tags: [] } }
+      if (url.includes('suggestions/bulk')) return { status: 200, body: { suggestions: {}, evaluated: 2, threshold: 0.8 } }
+      return { status: 200, body: {} }
+    })
+    await s.bulkAdd(42, 'ml_accepted')
+    const add = calls.find(c => c.url.includes('/api/images/bulk/tags'))
+    expect(add.body).toEqual({ image_ids: [1, 2], tag_id: 42, source: 'ml_accepted' })
+  })
+
+  it('loadCommonTags stores returned tags', async () => {
+    const s = useGallerySelectionStore()
+    s.toggle(3)
+    stubFetch(() => ({ status: 200, body: { tags: [{ id: 7, name: 'x', kind: 'general' }] } }))
+    await s.loadCommonTags()
+    expect(s.commonTags).toEqual([{ id: 7, name: 'x', kind: 'general' }])
+  })
+})