feat: media picker and image removal

web/src/stores/__tests__/seenImages.spec.ts

@@ -0,0 +1,30 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { useSeenImagesStore } from '../seenImages'
+
+beforeEach(() => {
+	setActivePinia(createPinia())
+})
+
+describe('seenImages store', () => {
+	it('finds a remembered image by id', () => {
+		const store = useSeenImagesStore()
+
+		store.remember([{ id: 1, filename: 'north-wall.jpg', size: 4089446, extra: true } as never])
+
+		expect(store.find(1)).toEqual({ id: 1, filename: 'north-wall.jpg', size: 4089446 })
+	})
+
+	it('knows nothing about an image it has not seen', () => {
+		expect(useSeenImagesStore().find(7)).toBeNull()
+	})
+
+	it('keeps the latest record of an image', () => {
+		const store = useSeenImagesStore()
+		store.remember([{ id: 1, filename: 'north-wall.jpg', size: 10 }])
+
+		store.remember([{ id: 1, filename: 'renamed.jpg', size: 10 }])
+
+		expect(store.find(1)?.filename).toBe('renamed.jpg')
+	})
+})

web/src/stores/seenImages.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface SeenImage {
+	id: number
+	filename: string
+	size: number
+}
+
+export const useSeenImagesStore = defineStore('seenImages', () => {
+	const byId = ref<Record<number, SeenImage>>({})
+
+	function remember(images: SeenImage[]) {
+		for (const { id, filename, size } of images) {
+			byId.value[id] = { id, filename, size }
+		}
+	}
+
+	function find(id: number): SeenImage | null {
+		return byId.value[id] ?? null
+	}
+
+	return { remember, find }
+})