feat(upload): add realtime SSE updates

components/realtime-refresh.tsx

@@ -14,6 +14,11 @@ type FormRealtimeRefreshProps = {
   debounceMs?: number;
 };
 
+type UploadRealtimeRefreshProps = {
+  topic: "uploads";
+  debounceMs?: number;
+};
+
 type LeaderboardRealtimeRefreshProps =
   | {
       topic: "leaderboards";
@@ -30,12 +35,13 @@ type LeaderboardRealtimeRefreshProps =
 
 type RealtimeRefreshProps =
   | FormRealtimeRefreshProps
+  | UploadRealtimeRefreshProps
   | LeaderboardRealtimeRefreshProps;
 
 export function RealtimeRefresh(props: RealtimeRefreshProps) {
   const router = useRouter();
   const topic = props.topic;
-  const formId = topic === "leaderboards" ? undefined : props.formId;
+  const formId = topic === "forms" || topic === "submissions" ? props.formId : undefined;
   const leaderboard = topic === "leaderboards" ? props.leaderboard : undefined;
   const channelId = topic === "leaderboards" ? props.channelId : undefined;
   const debounceMs = props.debounceMs ?? (topic === "leaderboards" ? 500 : 150);
@@ -45,7 +51,9 @@ export function RealtimeRefresh(props: RealtimeRefreshProps) {
       ? leaderboard === "xp"
         ? { kind: "xp" as const }
         : { kind: "vc" as const, channelId }
-      : { kind: "form" as const, formId };
+      : topic === "uploads"
+        ? { kind: "uploads" as const }
+        : { kind: "form" as const, formId };
 
     return startRealtimeRefresh({
       filter,
@@ -60,6 +68,9 @@ export function RealtimeRefresh(props: RealtimeRefreshProps) {
         if (topic === "submissions") {
           return sse.submissions.sub("update", handlers.onForm, options);
         }
+        if (topic === "uploads") {
+          return sse.uploads.sub("update", handlers.onUpload, options);
+        }
         return sse.leaderboards.subMany({
           xp: handlers.onXp,
           vc: handlers.onVc,