+ );
+ }
+
+ // Route based on identifier prefix
+ if (identifier.startsWith("npub1")) {
+ return ;
+ } else if (identifier.startsWith("nevent1")) {
+ return ;
+ } else if (identifier.startsWith("note1")) {
+ return ;
+ } else if (identifier.startsWith("naddr1")) {
+ return ;
+ }
+
+ // Not a recognized NIP-19 identifier
+ return null;
+}
diff --git a/src/components/pages/PreviewAddressPage.tsx b/src/components/pages/PreviewAddressPage.tsx
new file mode 100644
index 0000000..de2425d
--- /dev/null
+++ b/src/components/pages/PreviewAddressPage.tsx
@@ -0,0 +1,74 @@
+import { useEffect } from "react";
+import { useParams, useNavigate } from "react-router";
+import { useNip19Decode } from "@/hooks/useNip19Decode";
+import { EventDetailViewer } from "../EventDetailViewer";
+import { nip19 } from "nostr-tools";
+import { toast } from "sonner";
+
+/**
+ * PreviewAddressPage - Preview or redirect naddr identifiers
+ * Route: /:identifier (where identifier starts with naddr1)
+ * For spellbooks (kind 30777), redirects to /:actor/:identifier
+ * For all other addressable events, shows detail view
+ */
+export default function PreviewAddressPage() {
+ const { identifier } = useParams<{ identifier: string }>();
+ const navigate = useNavigate();
+
+ // Decode the naddr identifier (synchronous, memoized)
+ const { decoded, error } = useNip19Decode(identifier, "naddr");
+
+ // Handle redirect for spellbooks
+ useEffect(() => {
+ if (!decoded || decoded.type !== "naddr") return;
+
+ const pointer = decoded.data;
+
+ // Check if it's a spellbook (kind 30777) - redirect to spellbook route
+ if (pointer.kind === 30777) {
+ const npub = nip19.npubEncode(pointer.pubkey);
+ navigate(`/${npub}/${pointer.identifier}`, { replace: true });
+ }
+ }, [decoded, navigate]);
+
+ // Show error toast when error occurs
+ useEffect(() => {
+ if (error) {
+ toast.error("Invalid naddr identifier");
+ }
+ }, [error]);
+
+ // Error state
+ if (error) {
+ return (
+
+
+ {error}
+
+
+
+ );
+ }
+
+ // Type guard to ensure we have the correct decoded type
+ if (!decoded || decoded.type !== "naddr") {
+ return null;
+ }
+
+ // If it's a spellbook, return null (redirect will happen in useEffect)
+ if (decoded.data.kind === 30777) {
+ return null;
+ }
+
+ // Show detail view for all other addressable events
+ return (
+
+
+
+ );
+}
diff --git a/src/components/pages/PreviewEventPage.tsx b/src/components/pages/PreviewEventPage.tsx
new file mode 100644
index 0000000..5ad35ef
--- /dev/null
+++ b/src/components/pages/PreviewEventPage.tsx
@@ -0,0 +1,71 @@
+import { useMemo, useEffect } from "react";
+import { useParams, useNavigate } from "react-router";
+import { useNip19Decode } from "@/hooks/useNip19Decode";
+import type { EventPointer } from "nostr-tools/nip19";
+import { EventDetailViewer } from "../EventDetailViewer";
+import { toast } from "sonner";
+
+/**
+ * PreviewEventPage - Preview a Nostr event from a nevent or note identifier
+ * Route: /:identifier (where identifier starts with nevent1 or note1)
+ * This page shows a single event view without affecting user's workspace layout
+ */
+export default function PreviewEventPage() {
+ const { identifier } = useParams<{ identifier: string }>();
+ const navigate = useNavigate();
+
+ // Decode the event identifier (synchronous, memoized)
+ const { decoded, error } = useNip19Decode(identifier);
+
+ // Convert decoded entity to EventPointer
+ const pointer: EventPointer | null = useMemo(() => {
+ if (!decoded) return null;
+
+ if (decoded.type === "nevent") {
+ return decoded.data;
+ } else if (decoded.type === "note") {
+ // note is just an event ID, convert to EventPointer
+ return { id: decoded.data };
+ }
+ return null;
+ }, [decoded]);
+
+ // Show error toast when error occurs
+ useEffect(() => {
+ if (error) {
+ toast.error("Invalid event identifier");
+ }
+ }, [error]);
+
+ // Validate that we got an event-type entity
+ useEffect(() => {
+ if (decoded && decoded.type !== "nevent" && decoded.type !== "note") {
+ toast.error(
+ `Invalid identifier type: expected nevent or note, got ${decoded.type}`,
+ );
+ }
+ }, [decoded]);
+
+ // Error state
+ if (error || !pointer) {
+ return (
+
+
+ {error || "Failed to decode event identifier"}
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
diff --git a/src/components/pages/PreviewProfilePage.tsx b/src/components/pages/PreviewProfilePage.tsx
new file mode 100644
index 0000000..2eab548
--- /dev/null
+++ b/src/components/pages/PreviewProfilePage.tsx
@@ -0,0 +1,53 @@
+import { useParams, useNavigate } from "react-router";
+import { useNip19Decode } from "@/hooks/useNip19Decode";
+import { ProfileViewer } from "../ProfileViewer";
+import { useEffect } from "react";
+import { toast } from "sonner";
+
+/**
+ * PreviewProfilePage - Preview a Nostr profile from an npub identifier
+ * Route: /:identifier (where identifier starts with npub1)
+ * This page shows a single profile view without affecting user's workspace layout
+ */
+export default function PreviewProfilePage() {
+ const { identifier } = useParams<{ identifier: string }>();
+ const navigate = useNavigate();
+
+ // Decode the npub identifier (synchronous, memoized)
+ const { decoded, error } = useNip19Decode(identifier, "npub");
+
+ // Show error toast when error occurs
+ useEffect(() => {
+ if (error) {
+ toast.error("Invalid npub identifier");
+ }
+ }, [error]);
+
+ // Error state
+ if (error) {
+ return (
+
+
+ {error}
+
+
+
+ );
+ }
+
+ // Type guard to ensure we have the correct decoded type
+ if (!decoded || decoded.type !== "npub") {
+ return null;
+ }
+
+ return (
+