feat: add Redis-backed SSE updates

app/form/[id]/page.tsx

@@ -5,6 +5,7 @@ import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { notFound } from "next/navigation";
 import LoginDialog from "@/components/login-dialog";
 import { canAccessForm, getSessionDiscordId } from "@/lib/auth";
+import { RealtimeRefresh } from "@/components/realtime-refresh";
 
 export const dynamic = "force-dynamic";
 
@@ -53,6 +54,7 @@ export default async function FormsSubmitPage(
 
   return (
     <>
+      <RealtimeRefresh topic="forms" formId={form.id} />
       <div className="max-w-2xl mx-auto p-4 md:p-6 space-y-6">
         <FormFillerClient 
           form={form} 

app/form/page.tsx

@@ -9,6 +9,7 @@ import { HtmlDisplay } from "@/components/html-display";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { canAccessForm, getSessionDiscordId } from "@/lib/auth";
+import { RealtimeRefresh } from "@/components/realtime-refresh";
 
 export const dynamic = "force-dynamic";
 
@@ -28,28 +29,31 @@ export default async function FormsListingPage() {
   }
 
   return (
-    <div className="max-w-4xl mx-auto p-4 md:p-6 space-y-6">
-      <h1 className="text-3xl font-bold tracking-tight">Form ทั้งหมด</h1>
-      {visibleForms.length === 0 ? (
-        <p className="text-muted-foreground">ตอนนี้ยังไม่เปิดรับสัก Form</p>
-      ) : (
-        <div className="flex flex-col gap-4">
-          {visibleForms.map((form) => (
-            <Link key={form.id} href={`/form/${form.id}`}>
-              <Card className="hover:bg-muted/50 transition-colors h-full flex flex-col">
-                <CardHeader>
-                  <CardTitle>{form.title}</CardTitle>
-                  {form.description && (
-                    <div className="line-clamp-3 text-sm text-muted-foreground mt-1.5">
-                      <HtmlDisplay html={form.description} />
-                    </div>
-                  )}
-                </CardHeader>
-              </Card>
-            </Link>
-          ))}
-        </div>
-      )}
-    </div>
+    <>
+      <RealtimeRefresh topic="forms" />
+      <div className="max-w-4xl mx-auto p-4 md:p-6 space-y-6">
+        <h1 className="text-3xl font-bold tracking-tight">Form ทั้งหมด</h1>
+        {visibleForms.length === 0 ? (
+          <p className="text-muted-foreground">ตอนนี้ยังไม่เปิดรับสัก Form</p>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {visibleForms.map((form) => (
+              <Link key={form.id} href={`/form/${form.id}`}>
+                <Card className="hover:bg-muted/50 transition-colors h-full flex flex-col">
+                  <CardHeader>
+                    <CardTitle>{form.title}</CardTitle>
+                    {form.description && (
+                      <div className="line-clamp-3 text-sm text-muted-foreground mt-1.5">
+                        <HtmlDisplay html={form.description} />
+                      </div>
+                    )}
+                  </CardHeader>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
   );
 }