update verified follow pack to new layout

src/AppRouter.tsx

@@ -68,6 +68,7 @@ const UserListsPage = lazy(() => import("./pages/UserListsPage").then(m => ({ de
 const WalletSettingsPage = lazy(() => import("./pages/WalletSettingsPage").then(m => ({ default: m.WalletSettingsPage })));
 const WalletPage = lazy(() => import("./pages/WalletPage").then(m => ({ default: m.WalletPage })));
 const WorldPage = lazy(() => import("./pages/WorldPage").then(m => ({ default: m.WorldPage })));
+const VerifiedPage = lazy(() => import("./pages/VerifiedPage").then(m => ({ default: m.VerifiedPage })));
 const FollowPage = lazy(() => import("./pages/FollowPage").then(m => ({ default: m.FollowPage })));
 const RemoteLoginSuccessPage = lazy(() => import("./pages/RemoteLoginSuccessPage").then(m => ({ default: m.RemoteLoginSuccessPage })));
 
@@ -169,6 +170,7 @@ export function AppRouter() {
             <Route path="/themes" element={<ThemesPage />} />
             <Route path="/bookmarks" element={<BookmarksPage />} />
             <Route path="/wallet" element={<WalletPage />} />
+            <Route path="/verified" element={<VerifiedPage />} />
             <Route path="/world" element={<WorldPage />} />
             <Route path="/badges" element={<BadgesPage />} />
             <Route path="/communities" element={<CommunitiesPage />} />

src/lib/agoraDefaults.ts

@@ -36,5 +36,5 @@ export const VERIFIED_FOLLOW_PACK = {
   relays: decoded.data.relays,
 } as const;
 
-/** Sidebar path for the verified follow pack — routes to the rich FollowPackView. */
-export const VERIFIED_FOLLOW_PACK_PATH = `/follow/${VERIFIED_FOLLOW_PACK_NADDR}`;
+/** Sidebar path for the in-app Verified page. */
+export const VERIFIED_PAGE_PATH = '/verified';

src/lib/sidebarItems.tsx

@@ -35,7 +35,7 @@ import {
   WalletMinimal,
   Zap,
 } from "lucide-react";
-import { VERIFIED_FOLLOW_PACK_PATH } from "@/lib/agoraDefaults";
+import { VERIFIED_PAGE_PATH } from "@/lib/agoraDefaults";
 import { CardsIcon } from "@/components/icons/CardsIcon";
 import { ChestIcon } from "@/components/icons/ChestIcon";
 
@@ -125,7 +125,7 @@ export const SIDEBAR_ITEMS: SidebarItemDef[] = [
   {
     id: "verified",
     label: "Verified",
-    path: VERIFIED_FOLLOW_PACK_PATH,
+    path: VERIFIED_PAGE_PATH,
     icon: BadgeCheck,
   },
   {

src/pages/VerifiedPage.tsx

@@ -0,0 +1,62 @@
+import { useSeoMeta } from '@unhead/react';
+import { BadgeCheck, Users } from 'lucide-react';
+import { useAppContext } from '@/hooks/useAppContext';
+import { useAddrEvent } from '@/hooks/useEvent';
+import { VERIFIED_FOLLOW_PACK } from '@/lib/agoraDefaults';
+import { PageHeader } from '@/components/PageHeader';
+import { FollowPackDetailContent } from '@/components/FollowPackDetailContent';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function VerifiedPage() {
+  const { config } = useAppContext();
+  const { data: event, isLoading, isError } = useAddrEvent(
+    {
+      kind: VERIFIED_FOLLOW_PACK.kind,
+      pubkey: VERIFIED_FOLLOW_PACK.pubkey,
+      identifier: VERIFIED_FOLLOW_PACK.identifier,
+    },
+    VERIFIED_FOLLOW_PACK.relays,
+  );
+
+  useSeoMeta({
+    title: `Verified | ${config.appName}`,
+    description: 'Discover and follow verified accounts curated for Agora.',
+  });
+
+  return (
+    <main>
+      <PageHeader title="Verified" icon={<BadgeCheck className="size-5 text-primary" />} />
+      <div className="max-w-2xl mx-auto w-full">
+        {isLoading ? (
+          <div className="px-4 py-4 space-y-4">
+            <Skeleton className="h-40 w-full" />
+            <Skeleton className="h-6 w-2/3" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-4/5" />
+          </div>
+        ) : isError || !event ? (
+          <div className="px-4 py-4">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg flex items-center gap-2">
+                  <Users className="size-5 text-muted-foreground" />
+                  Verified pack unavailable
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  We could not load the verified follow pack right now. Please try again shortly.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        ) : (
+          <FollowPackDetailContent event={event} />
+        )}
+      </div>
+    </main>
+  );
+}
+
+export default VerifiedPage;