feat(frontend): optimizations for slow internet situations

frontend/src/routes/[mnemonic]/+page.svelte

@@ -4,7 +4,11 @@
 	import { getContext, onMount } from 'svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { useQuery, useConvexClient } from 'convex-svelte';
-	import { usePollingQuery, usePollingMutation } from '$lib/convex-polling.svelte';
+	import {
+		usePollingQuery,
+		usePollingMutation,
+		usePollingClient
+	} from '$lib/convex-polling.svelte';
 	import { api } from '$lib/convex/_generated/api';
 	import type { Id } from '$lib/convex/_generated/dataModel';
 	import ChatMessage from '$lib/components/ChatMessage.svelte';
@@ -30,7 +34,6 @@
 	let activeRequestId: Id<'photoRequests'> | null = $state(null);
 	let previewPhoto: {
 		thumbnail: string;
-		fullBase64: string;
 		mediaType: string;
 		requestId: Id<'photoRequests'>;
 	} | null = $state(null);
@@ -206,15 +209,22 @@
 
 	$effect(() => {
 		const req = myActiveRequest.data;
-		if (req?.status === 'captured' && req.photoBase64 && req.photoMediaType) {
+		if (req?.status === 'captured' && req.photoMediaType) {
 			if (shownPreviewIds.has(req._id)) return;
 			shownPreviewIds.add(req._id);
-			previewPhoto = {
-				thumbnail: req.thumbnailBase64 || req.photoBase64,
-				fullBase64: req.photoBase64,
-				mediaType: req.photoMediaType,
-				requestId: req._id
-			};
+
+			const client = pollingClient ?? clientWs;
+			if (client) {
+				client.query(api.photoRequests.getPhotoPreview, { requestId: req._id }).then((data) => {
+					if (data) {
+						previewPhoto = {
+							thumbnail: data.thumbnailBase64,
+							mediaType: data.photoMediaType,
+							requestId: req._id
+						};
+					}
+				});
+			}
 		}
 	});
 
@@ -232,6 +242,7 @@
 	});
 
 	const clientWs = usePolling ? null : useConvexClient();
+	const pollingClient = usePolling ? usePollingClient() : null;
 	const createMessagePoll = usePolling ? usePollingMutation(api.messages.create) : null;
 	const registerDevicePoll = usePolling ? usePollingMutation(api.devicePairings.register) : null;
 	const heartbeatPoll = usePolling ? usePollingMutation(api.devicePairings.heartbeat) : null;
@@ -246,8 +257,10 @@
 		? usePollingMutation(api.photoRequests.markCaptureNow)
 		: null;
 	const submitPhotoPoll = usePolling ? usePollingMutation(api.photoRequests.submitPhoto) : null;
-	const markAcceptedPoll = usePolling ? usePollingMutation(api.photoRequests.markAccepted) : null;
 	const markRejectedPoll = usePolling ? usePollingMutation(api.photoRequests.markRejected) : null;
+	const acceptPhotoToDraftPoll = usePolling
+		? usePollingMutation(api.photoRequests.acceptPhotoToDraft)
+		: null;
 
 	$effect(() => {
 		if (!chatId || !deviceId) return;
@@ -467,21 +480,16 @@
 	function handlePreviewAccept() {
 		if (!previewPhoto || !chatId) return;
 
-		const photo = { base64: previewPhoto.fullBase64, mediaType: previewPhoto.mediaType };
 		const reqId = previewPhoto.requestId;
 		previewPhoto = null;
 
-		if (usePolling && addPhotoPoll && markAcceptedPoll) {
-			addPhotoPoll({ chatId, deviceId, photo });
-			markAcceptedPoll({ requestId: reqId });
+		if (usePolling && acceptPhotoToDraftPoll) {
+			acceptPhotoToDraftPoll({ requestId: reqId, chatId, deviceId });
 		} else if (clientWs) {
-			clientWs.mutation(api.photoDrafts.addPhoto, {
+			clientWs.mutation(api.photoRequests.acceptPhotoToDraft, {
+				requestId: reqId,
 				chatId,
-				deviceId,
-				photo
-			});
-			clientWs.mutation(api.photoRequests.markAccepted, {
-				requestId: reqId
+				deviceId
 			});
 		}
 	}