Add thumbnail upload support to UploadModal and R2Service

- Added file input and browse button for thumbnails in `upload-modal.html`.
- Updated `UploadModal.js` to handle thumbnail file selection and UI toggling.
- Updated `r2Service.js` to upload thumbnail file (if present) to R2 and update metadata.
- Ensured thumbnail keys are derived from video keys for consistent naming.

js/services/r2Service.js

@@ -636,6 +636,7 @@ class R2Service {
   async handleCloudflareUploadSubmit({
     npub = "",
     file = null,
+    thumbnailFile = null,
     metadata = {},
     settingsInput = null,
     publishVideoNote,
@@ -748,6 +749,33 @@ class R2Service {
     try {
       const s3 = makeR2Client({ accountId, accessKeyId, secretAccessKey });
 
+      if (thumbnailFile) {
+        this.setCloudflareUploadStatus("Uploading thumbnail...", "info");
+        const thumbExt = thumbnailFile.name.split('.').pop() || 'jpg';
+        const thumbKey = key.replace(/\.[^/.]+$/, "") + `.thumb.${thumbExt}`;
+
+        try {
+            await multipartUpload({
+                s3,
+                bucket: bucketEntry.bucket,
+                key: thumbKey,
+                file: thumbnailFile,
+                contentType: thumbnailFile.type || "image/jpeg",
+            });
+            const thumbUrl = buildPublicUrl(bucketEntry.publicBaseUrl, thumbKey);
+            if (typeof metadata === "object") {
+                metadata.thumbnail = thumbUrl;
+            }
+        } catch (err) {
+            userLogger.warn("Thumbnail upload failed, continuing with video...", err);
+        }
+      }
+
+      this.setCloudflareUploadStatus(
+        statusMessage,
+        bucketResult?.usedManagedFallback ? "warning" : "info"
+      );
+
       await multipartUpload({
         s3,
         bucket: bucketEntry.bucket,