fix+upstream: hooks-order crash, ConfirmDialog/PageHeader/skeletons, styled error boundary

Hoists hooks above early return (render-time Navigate); ports finance's
ConfirmDialog/PageHeader/loading/states + APC error-copy mapper; removes
window.confirm, dead appbar search, and seeded fake notifications; wires toasts.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/routes/activity.tsx

@@ -1,13 +1,8 @@
 import { Activity } from "lucide-react"
 
 import { AppShell } from "~/components/layout/app-shell"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card"
+import { PageHeader } from "~/components/layout/page-header"
+import { EmptyState } from "~/components/states"
 import { pageTitle } from "~/lib/page-meta"
 
 export const meta = () => pageTitle("Activity")
@@ -15,29 +10,21 @@ export const meta = () => pageTitle("Activity")
 export default function ActivityRoute() {
   return (
     <AppShell title="Activity">
-      <Card>
-        <CardHeader>
-          <CardTitle>Activity</CardTitle>
-          <CardDescription>
-            Event stream, audit log, recent changes.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/20 bg-muted/30 p-12 text-center">
-            <div className="flex size-12 items-center justify-center rounded-xl bg-background text-muted-foreground">
-              <Activity className="size-6" />
-            </div>
-            <div className="max-w-md">
-              <p className="font-medium">No activity yet</p>
-              <p className="mt-1 text-sm text-muted-foreground">
-                Once your app is doing things, this is where audit events,
-                webhook deliveries, and recent changes show up — pair with{" "}
-                <code className="font-mono text-xs">@crema/log-ui</code>.
-              </p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      <PageHeader
+        title="Activity"
+        description="Event stream, audit log, recent changes."
+      />
+      <EmptyState
+        icon={<Activity className="size-6" />}
+        title="No activity yet"
+        description={
+          <>
+            Once your app is doing things, this is where audit events, webhook
+            deliveries, and recent changes show up — pair with{" "}
+            <code className="font-mono text-xs">@crema/log-ui</code>.
+          </>
+        }
+      />
     </AppShell>
   )
 }