feat(upload): add realtime SSE updates

app/admin/upload/actions.ts

@@ -4,6 +4,7 @@ import { requireAdmin } from "@/lib/auth/auth";
 import { db } from "@/db";
 import { videoUploadJobs, videoUploads } from "@/db/schema";
 import { eq } from "drizzle-orm";
+import { sse } from "@/lib/realtime/sse";
 import { revalidatePath } from "next/cache";
 
 export async function createVideoUpload(formData: FormData) {
@@ -28,5 +29,11 @@ export async function retryVideoJob(jobId: string) {
 		.update(videoUploads)
 		.set({ status: "partial", updatedAt: new Date() })
 		.where(eq(videoUploads.id, job.uploadId));
+	await sse.uploads.pub("update", {
+		uploadId: job.uploadId,
+		jobId: job.id,
+		platform: job.platform,
+		status: "pending",
+	});
 	revalidatePath("/admin/upload/history");
 }

app/admin/upload/history/page.tsx

@@ -1,5 +1,6 @@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { RealtimeRefresh } from "@/components/realtime-refresh";
 import {
 	Card,
 	CardContent,
@@ -44,6 +45,8 @@ export default async function AdminUploadHistoryPage() {
 		]);
 
 	return (
+		<>
+			<RealtimeRefresh topic="uploads" />
 		<Card>
 			<CardHeader>
 				<CardTitle>Upload history</CardTitle>
@@ -92,5 +95,6 @@ export default async function AdminUploadHistoryPage() {
 				)}
 			</CardContent>
 		</Card>
+		</>
 	);
 }

app/admin/upload/video/page.tsx

@@ -3,6 +3,7 @@ import {
 	getLatestYoutubeVideos,
 } from "@/lib/video/video-platforms";
 import { LatestCard } from "./latest-card";
+import { RealtimeRefresh } from "@/components/realtime-refresh";
 
 export const dynamic = "force-dynamic";
 
@@ -13,9 +14,12 @@ export default async function AdminUploadVideoPage() {
 	]);
 
 	return (
+		<>
+			<RealtimeRefresh topic="uploads" debounceMs={500} />
 		<section className="grid gap-4 xl:grid-cols-2">
 			<LatestCard title="Latest YouTube videos" videos={youtube} />
 			<LatestCard title="Latest TikTok videos" videos={tiktok} />
 		</section>
+		</>
 	);
 }