From 8314c2921d7b22210880f8e7721717f9103e257a Mon Sep 17 00:00:00 2001
From: Cosmo <295956986+cosmo-coderbots[bot]@users.noreply.github.com>
Date: Wed, 1 Jul 2026 02:18:30 +0000
Subject: [PATCH] Add Refresh button to feed

Adds a Refresh button between the composer and the feed that pulls
new posts from the server without a full page reload.

Uses a Server Action calling refresh() from next/cache (the Next.js 16
idiomatic approach) rather than client-side router.refresh(), which was
being blocked by the cross-origin dev resource protection when accessed
through a Cloudflare tunnel. Also adds *.trycloudflare.com to
allowedDevOrigins so HMR and RSC requests aren't blocked in dev.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/RefreshButton.tsx | 21 +++++++++++++++++++++
 app/actions.ts        |  6 +++++-
 app/page.tsx          |  3 +++
 next.config.ts        |  1 +
 4 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 app/RefreshButton.tsx

diff --git a/app/RefreshButton.tsx b/app/RefreshButton.tsx
new file mode 100644
index 0000000..dd92857
--- /dev/null
+++ b/app/RefreshButton.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { useTransition } from 'react'
+import { refreshFeed } from './actions'
+
+export default function RefreshButton() {
+  const [pending, startTransition] = useTransition()
+
+  return (
+    <div className="flex justify-center border-b border-neutral-800 py-2">
+      <button
+        type="button"
+        disabled={pending}
+        onClick={() => startTransition(() => refreshFeed())}
+        className="rounded-full border border-neutral-700 px-5 py-1.5 text-sm font-semibold transition hover:bg-neutral-900 disabled:opacity-50"
+      >
+        {pending ? 'Refreshing…' : 'Refresh'}
+      </button>
+    </div>
+  )
+}
diff --git a/app/actions.ts b/app/actions.ts
index ccea8b7..78b3d0d 100644
--- a/app/actions.ts
+++ b/app/actions.ts
@@ -1,7 +1,7 @@
 "use server";
 
 import { redirect } from "next/navigation";
-import { revalidatePath } from "next/cache";
+import { revalidatePath, refresh } from "next/cache";
 import { query } from "@/lib/db";
 import {
   createSession,
@@ -70,6 +70,10 @@ export async function logout() {
   redirect("/login");
 }
 
+export async function refreshFeed(): Promise<void> {
+  refresh();
+}
+
 export async function createPost(formData: FormData): Promise<void> {
   const user = await getCurrentUser();
   if (!user) redirect("/login");
diff --git a/app/page.tsx b/app/page.tsx
index 65e8e04..c514022 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,6 +3,7 @@ import { getCurrentUser } from "@/lib/auth";
 import { query } from "@/lib/db";
 import Composer from "./Composer";
 import LogoutButton from "./LogoutButton";
+import RefreshButton from "./RefreshButton";
 
 type FeedPost = {
   id: number;
@@ -80,6 +81,8 @@ export default async function Home() {
         </div>
       )}
 
+      <RefreshButton />
+
       <section>
         {posts.length === 0 ? (
           <p className="p-8 text-center text-neutral-500">
diff --git a/next.config.ts b/next.config.ts
index ebda4e0..a49db1e 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  allowedDevOrigins: ["*.trycloudflare.com"],
   experimental: {
     serverActions: {
       // Allow image uploads up to ~5MB through Server Actions.