.

packages/web/src/routes/users.tsx

@@ -0,0 +1,89 @@
+import { useEffect } from "react"
+import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router"
+import { useLiveQuery } from "@tanstack/react-db"
+import { authClient } from "@/lib/auth-client"
+import { usersCollection } from "@/lib/collections"
+
+export const Route = createFileRoute("/users")({
+  ssr: false,
+  beforeLoad: async () => {
+    const res = await authClient.getSession()
+    if (!res.data?.session) {
+      throw redirect({ to: "/login" })
+    }
+  },
+  loader: async () => {
+    await usersCollection.preload()
+    return null
+  },
+  component: UsersPage,
+})
+
+function UsersPage() {
+  const navigate = useNavigate()
+  const { data: session } = authClient.useSession()
+  const { data: users } = useLiveQuery((q) => q.from({ usersCollection }))
+
+  useEffect(() => {
+    if (!session?.session) {
+      navigate({ to: "/login" })
+    }
+  }, [navigate, session])
+
+  if (!session?.session) {
+    return null
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-white px-4 py-10">
+      <div className="max-w-3xl mx-auto">
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <p className="text-sm text-slate-400">Signed in as</p>
+            <p className="text-lg font-semibold">
+              {session.user.email ?? session.user.id}
+            </p>
+          </div>
+          <button
+            className="rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm hover:border-cyan-400 transition-colors"
+            onClick={async () => {
+              await authClient.signOut()
+              navigate({ to: "/login" })
+            }}
+          >
+            Sign out
+          </button>
+        </div>
+
+        <div className="rounded-xl border border-slate-800 bg-slate-900">
+          <div className="border-b border-slate-800 px-4 py-3 flex items-center justify-between">
+            <h2 className="text-lg font-semibold">Users (Electric)</h2>
+            <span className="text-xs text-slate-400">
+              Live-synced via Electric shape
+            </span>
+          </div>
+          <div className="divide-y divide-slate-800">
+            {users?.map((user) => (
+              <div
+                key={user.id}
+                className="px-4 py-3 flex items-center justify-between"
+              >
+                <div>
+                  <p className="font-medium">{user.name || user.email}</p>
+                  <p className="text-sm text-slate-400">{user.email}</p>
+                </div>
+                <span className="text-xs text-slate-500">{user.id}</span>
+              </div>
+            ))}
+            {!users?.length ? (
+              <div className="px-4 py-6 text-center text-slate-400">
+                No users yet. Create an account from the login screen to seed
+                data.
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}