feat: implement storage quota management for uploads

- Added storage quota enforcement for audio and image uploads in the respective routes.
- Introduced reservation system to manage concurrent uploads and prevent quota overages.
- Enhanced comment creation to account for audio and image attachment sizes against user quotas.
- Created new UploadReservation model to track in-flight upload reservations.
- Backfilled existing video assets with size information from R2.
- Added progress component for UI feedback during uploads.
- Updated API responses to include reservation IDs for better quota management.
- Adjusted error handling to return appropriate storage limit exceeded messages.

components/video-page/hooks/use-comment-actions.ts

@@ -207,7 +207,7 @@ export function useCommentActions({
           ...(imageData && { imageUrl: imageData.url }),
           ...(isGuest && normalizedGuestName && { guestName: normalizedGuestName }),
           ...(selectedTagId && { tagId: selectedTagId }),
-          ...(serializedAnnotation && { annotationData: serializedAnnotation }),
+          ...(effectiveStrokes && { annotationData: effectiveStrokes }),
         }),
       });
 
@@ -830,7 +830,9 @@ export function useCommentActions({
     try {
       const body: Record<string, unknown> = { content: editText };
       if (editTagId !== undefined) body.tagId = editTagId;
-      if (finalAnnotationData !== undefined) body.annotationData = finalAnnotationData;
+      if (finalAnnotationData !== undefined) {
+        body.annotationData = finalAnnotationData !== null ? JSON.parse(finalAnnotationData) : null;
+      }
       if (isGuest && normalizedGuestName) body.guestName = normalizedGuestName;
       const res = await fetch(`/api/comments/${commentId}`, {
         method: 'PATCH',

components/video-page/hooks/use-video-assets.ts

@@ -13,6 +13,7 @@ type CreateAssetPayload = {
   providerVideoId?: string;
   thumbnailUrl?: string;
   uploadToken?: string;
+  reservationId?: string | null;
 };
 
 interface UseVideoAssetsParams {