[nvim] envrc to flake, setup tanstack query for data loading

src/routes/_authenticated/campaigns.index.tsx

@@ -9,7 +9,12 @@ import { useRouter } from "@tanstack/react-router";
 export const Route = createFileRoute("/_authenticated/campaigns/")({
   loader: async () => {
     const records = await pb.collection("campaigns").getFullList();
-    return { campaigns: records.map((rec: any) => ({ id: rec.id, name: rec.name })) as Campaign[] };
+    return {
+      campaigns: records.map((rec: any) => ({
+        id: rec.id,
+        name: rec.name,
+      })) as Campaign[],
+    };
   },
   component: RouteComponent,
   pendingComponent: Loader,
@@ -23,24 +28,26 @@ function RouteComponent() {
     await router.invalidate();
   };
 
-  if (!campaigns || campaigns.length === 0) return <div>No campaigns found.</div>;
-
   return (
     <div className="max-w-xl mx-auto py-8">
       <h2 className="text-xl font-bold mb-4 text-slate-100">Your Campaigns</h2>
-      <ul className="space-y-2">
-        {campaigns.map((c) => (
-          <li key={c.id}>
-            <Link
-              to="/campaigns/$campaignId"
-              params={{ campaignId: c.id }}
-              className="block px-4 py-2 rounded bg-slate-800 hover:bg-violet-700 text-slate-100 transition-colors"
-            >
-              {c.name}
-            </Link>
-          </li>
-        ))}
-      </ul>
+      {!campaigns || campaigns.length === 0 ? (
+        <div>No campaigns found.</div>
+      ) : (
+        <ul className="space-y-2">
+          {campaigns.map((c) => (
+            <li key={c.id}>
+              <Link
+                to="/campaigns/$campaignId"
+                params={{ campaignId: c.id }}
+                className="block px-4 py-2 rounded bg-slate-800 hover:bg-violet-700 text-slate-100 transition-colors"
+              >
+                {c.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
       <div className="mt-8">
         <CreateCampaignButton onCreated={handleCreated} />
       </div>