lightbox is now a route

src/components/UniversalPostRenderer.tsx

···
 import { useAtom } from "jotai";
 import * as React from "react";
 import { type SVGProps } from "react";
-import { createPortal } from "react-dom";
 
-import { ProfilePostComponent } from "~/routes/profile.$did/post.$rkey";
 import { likedPostsAtom } from "~/utils/atoms";
 import { useHydratedEmbed } from "~/utils/useHydrated";
 import {
···
   ref?: React.Ref<HTMLDivElement>;
   dataIndexPropPass?: number;
   nopics?: boolean;
+  lightboxCallback?: (d:LightboxProps) => void;
 }
 
 // export async function cachedGetRecord({
···
   ref,
   dataIndexPropPass,
   nopics,
+  lightboxCallback,
 }: UniversalPostRendererATURILoaderProps) {
   // /*mass comment*/ console.log("atUri", atUri);
   //const { get, set } = usePersistentStore();
···
       ref={ref}
       dataIndexPropPass={dataIndexPropPass}
       nopics={nopics}
+      lightboxCallback={lightboxCallback}
     />
   );
 }
···
   ref,
   dataIndexPropPass,
   nopics,
+  lightboxCallback,
 }: {
   postRecord: any;
   profileRecord: any;
···
   ref?: React.Ref<HTMLDivElement>;
   dataIndexPropPass?: number;
   nopics?: boolean;
+  lightboxCallback?: (d:LightboxProps) => void;
 }) {
   // /*mass comment*/ console.log(`received aturi: ${aturi} of post content: ${postRecord}`);
   const navigate = useNavigate();
···
         ref={ref}
         dataIndexPropPass={dataIndexPropPass}
         nopics={nopics}
+        lightboxCallback={lightboxCallback}
       />
     </>
   );
···
 
 import defaultpfp from "~/../public/favicon.png";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
+import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i";
 // import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed";
 // import type {
 //   ViewRecord,
···
   ref,
   dataIndexPropPass,
   nopics,
+  lightboxCallback
 }: {
   post: PostView;
   // optional for now because i havent ported every use to this yet
···
   ref?: React.Ref<HTMLDivElement>;
   dataIndexPropPass?: number;
   nopics?: boolean;
+  lightboxCallback?: (d:LightboxProps) => void;
 }) {
   const parsed = new AtUri(post.uri);
   const navigate = useNavigate();
···
                 navigate={navigate}
                 postid={{ did: post.author.did, rkey: parsed.rkey }}
                 nopics={nopics}
+                lightboxCallback={lightboxCallback}
               />
             ) : null}
             {post.embed && depth > 0 && (
···
   navigate,
   postid,
   nopics,
+  lightboxCallback
 }: {
   embed?: Embed;
   moderation?: ModerationDecision;
···
   navigate: (_: any) => void;
   postid?: { did: string; rkey: string };
   nopics?: boolean;
+  lightboxCallback?: (d:LightboxProps) => void;
 }) {
-  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+  //const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+  function setLightboxIndex(number:number) {
+    navigate({
+    to: "/profile/$did/post/$rkey/image/$i",
+    params: {
+      did: postid?.did,
+      rkey: postid?.rkey,
+      i: number.toString(),
+    },
+  });
+  }
   if (
     AppBskyEmbedRecordWithMedia.isView(embed) &&
     AppBskyEmbedRecord.isViewRecord(embed.record.record) &&
···
           navigate={navigate}
           postid={postid}
           nopics={nopics}
+          lightboxCallback={lightboxCallback}
         />
         {/* padding empty div of 8px height */}
         <div style={{ height: 12 }} />
···
 
   // image embed
   // =
-  if (AppBskyEmbedImages.isView(embed) && !nopics) {
+  if (AppBskyEmbedImages.isView(embed)) {
     const { images } = embed;
 
     const lightboxImages = images.map((img) => ({
       src: img.fullsize,
       alt: img.alt,
     }));
+    console.log("rendering images")
+    if (lightboxCallback) {
+      lightboxCallback({images: lightboxImages})
+      console.log("rendering images")
+    };
+
+    if (nopics) return;
 
     if (images.length > 0) {
       // const items = embed.images.map(img => ({
···
               }}
               className="border border-gray-200 dark:border-gray-800 was7 bg-gray-200 dark:bg-gray-900"
             >
-              {lightboxIndex !== null && (
+              {/* {lightboxIndex !== null && (
                 <Lightbox
                   images={lightboxImages}
                   index={lightboxIndex}
···
                   onNavigate={(newIndex) => setLightboxIndex(newIndex)}
                   post={postid}
                 />
-              )}
+              )} */}
               <img
                 src={image.fullsize}
                 alt={image.alt}
···
             }}
             className="border border-gray-200 dark:border-gray-800 was7"
           >
-            {lightboxIndex !== null && (
+            {/* {lightboxIndex !== null && (
               <Lightbox
                 images={lightboxImages}
                 index={lightboxIndex}
···
                 onNavigate={(newIndex) => setLightboxIndex(newIndex)}
                 post={postid}
               />
-            )}
+            )} */}
             {images.map((img, i) => (
               <div
                 key={i}
···
             }}
             className="border border-gray-200 dark:border-gray-800 was7"
           >
-            {lightboxIndex !== null && (
+            {/* {lightboxIndex !== null && (
               <Lightbox
                 images={lightboxImages}
                 index={lightboxIndex}
···
                 onNavigate={(newIndex) => setLightboxIndex(newIndex)}
                 post={postid}
               />
-            )}
+            )} */}
             {/* Left: 1:1 */}
             <div
               style={{ flex: 1, aspectRatio: "1 / 1", position: "relative" }}
···
             }}
             className="border border-gray-200 dark:border-gray-800 was7"
           >
-            {lightboxIndex !== null && (
+            {/* {lightboxIndex !== null && (
               <Lightbox
                 images={lightboxImages}
                 index={lightboxIndex}
···
                 onNavigate={(newIndex) => setLightboxIndex(newIndex)}
                 post={postid}
               />
-            )}
+            )} */}
             {images.map((img, i) => (
               <div
                 key={i}
···
   }
 
   return <div />;
-}
-
-type LightboxProps = {
-  images: { src: string; alt?: string }[];
-  index: number;
-  onClose: () => void;
-  onNavigate?: (newIndex: number) => void;
-  post?: { did: string; rkey: string };
-};
-export function Lightbox({
-  images,
-  index,
-  onClose,
-  onNavigate,
-  post,
-}: LightboxProps) {
-  const image = images[index];
-
-  useEffect(() => {
-    function handleKey(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
-      if (e.key === "ArrowRight" && onNavigate)
-        onNavigate((index + 1) % images.length);
-      if (e.key === "ArrowLeft" && onNavigate)
-        onNavigate((index - 1 + images.length) % images.length);
-    }
-    window.addEventListener("keydown", handleKey);
-    return () => window.removeEventListener("keydown", handleKey);
-  }, [index, images.length, onClose, onNavigate]);
-
-  return createPortal(
-    <>
-      {post && (
-        <div
-          onClick={(e) => {
-            e.stopPropagation();
-            e.nativeEvent.stopImmediatePropagation();
-          }}
-          className="lightbox-sidebar overscroll-none disablegutter border-l dark:border-gray-800 was7 border-gray-300 fixed z-50 flex top-0 right-0 flex-col max-w-[350px] min-w-[350px] max-h-screen overflow-y-scroll dark:bg-gray-950 bg-white"
-        >
-          <ProfilePostComponent
-            did={post.did}
-            rkey={post.rkey}
-            nopics={onClose}
-          />
-        </div>
-      )}
-      <div
-        className="lightbox fixed inset-0 z-50 flex items-center justify-center bg-black/80 w-screen lg:w-[calc(100vw-350px)] lg:max-w-[calc(100vw-350px)]"
-        onClick={(e) => {
-          e.stopPropagation();
-          onClose();
-        }}
-      >
-        <img
-          src={image.src}
-          alt={image.alt}
-          className="max-h-[90%] max-w-[90%] object-contain rounded-lg shadow-lg"
-          onClick={(e) => e.stopPropagation()}
-        />
-
-        {images.length > 1 && (
-          <>
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onNavigate?.((index - 1 + images.length) % images.length);
-              }}
-              className="absolute left-4 top-1/2 -translate-y-1/2 text-white text-4xl h-8 w-8 rounded-full bg-gray-900 flex items-center justify-center"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width={28}
-                height={28}
-                viewBox="0 0 24 24"
-              >
-                <g fill="none" fillRule="evenodd">
-                  <path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path>
-                  <path
-                    fill="currentColor"
-                    d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z"
-                  ></path>
-                </g>
-              </svg>
-            </button>
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onNavigate?.((index + 1) % images.length);
-              }}
-              className="absolute right-4 top-1/2 -translate-y-1/2 text-white text-4xl h-8 w-8 rounded-full bg-gray-900 flex items-center justify-center"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width={28}
-                height={28}
-                viewBox="0 0 24 24"
-              >
-                <g fill="none" fillRule="evenodd">
-                  <path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path>
-                  <path
-                    fill="currentColor"
-                    d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z"
-                  ></path>
-                </g>
-              </svg>
-            </button>
-          </>
-        )}
-      </div>
-    </>,
-    document.body
-  );
 }
 
 function getDomain(url: string) {

src/routeTree.gen.ts

···
 import { Route as PathlessLayoutNestedLayoutRouteBRouteImport } from './routes/_pathlessLayout/_nested-layout/route-b'
 import { Route as PathlessLayoutNestedLayoutRouteARouteImport } from './routes/_pathlessLayout/_nested-layout/route-a'
 import { Route as ProfileDidPostRkeyRouteImport } from './routes/profile.$did/post.$rkey'
+import { Route as ProfileDidPostRkeyImageIRouteImport } from './routes/profile.$did/post.$rkey.image.$i'
 
 const SettingsRoute = SettingsRouteImport.update({
   id: '/settings',
···
   path: '/profile/$did/post/$rkey',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ProfileDidPostRkeyImageIRoute =
+  ProfileDidPostRkeyImageIRouteImport.update({
+    id: '/image/$i',
+    path: '/image/$i',
+    getParentRoute: () => ProfileDidPostRkeyRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
···
   '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute
   '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
   '/profile/$did': typeof ProfileDidIndexRoute
-  '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRoute
+  '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren
+  '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
···
   '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute
   '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
   '/profile/$did': typeof ProfileDidIndexRoute
-  '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRoute
+  '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren
+  '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
···
   '/_pathlessLayout/_nested-layout/route-a': typeof PathlessLayoutNestedLayoutRouteARoute
   '/_pathlessLayout/_nested-layout/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
   '/profile/$did/': typeof ProfileDidIndexRoute
-  '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRoute
+  '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren
+  '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
···
     | '/route-b'
     | '/profile/$did'
     | '/profile/$did/post/$rkey'
+    | '/profile/$did/post/$rkey/image/$i'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
···
     | '/route-b'
     | '/profile/$did'
     | '/profile/$did/post/$rkey'
+    | '/profile/$did/post/$rkey/image/$i'
   id:
     | '__root__'
     | '/'
···
     | '/_pathlessLayout/_nested-layout/route-b'
     | '/profile/$did/'
     | '/profile/$did/post/$rkey'
+    | '/profile/$did/post/$rkey/image/$i'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
···
   SettingsRoute: typeof SettingsRoute
   CallbackIndexRoute: typeof CallbackIndexRoute
   ProfileDidIndexRoute: typeof ProfileDidIndexRoute
-  ProfileDidPostRkeyRoute: typeof ProfileDidPostRkeyRoute
+  ProfileDidPostRkeyRoute: typeof ProfileDidPostRkeyRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
···
       preLoaderRoute: typeof ProfileDidPostRkeyRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/profile/$did/post/$rkey/image/$i': {
+      id: '/profile/$did/post/$rkey/image/$i'
+      path: '/image/$i'
+      fullPath: '/profile/$did/post/$rkey/image/$i'
+      preLoaderRoute: typeof ProfileDidPostRkeyImageIRouteImport
+      parentRoute: typeof ProfileDidPostRkeyRoute
+    }
   }
 }
 
···
   PathlessLayoutRouteChildren,
 )
 
+interface ProfileDidPostRkeyRouteChildren {
+  ProfileDidPostRkeyImageIRoute: typeof ProfileDidPostRkeyImageIRoute
+}
+
+const ProfileDidPostRkeyRouteChildren: ProfileDidPostRkeyRouteChildren = {
+  ProfileDidPostRkeyImageIRoute: ProfileDidPostRkeyImageIRoute,
+}
+
+const ProfileDidPostRkeyRouteWithChildren =
+  ProfileDidPostRkeyRoute._addFileChildren(ProfileDidPostRkeyRouteChildren)
+
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   PathlessLayoutRoute: PathlessLayoutRouteWithChildren,
···
   SettingsRoute: SettingsRoute,
   CallbackIndexRoute: CallbackIndexRoute,
   ProfileDidIndexRoute: ProfileDidIndexRoute,
-  ProfileDidPostRkeyRoute: ProfileDidPostRkeyRoute,
+  ProfileDidPostRkeyRoute: ProfileDidPostRkeyRouteWithChildren,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/routes/profile.$did/post.$rkey.image.$i.tsx

···
+import {
+  createFileRoute,
+  useNavigate,
+  type UseNavigateResult,
+} from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { ProfilePostComponent } from "./post.$rkey";
+
+export const Route = createFileRoute("/profile/$did/post/$rkey/image/$i")({
+  component: Lightbox,
+});
+
+export type LightboxProps = {
+  images: { src: string; alt?: string }[];
+};
+
+function nextprev({
+  index,
+  images,
+  navigate,
+  did,
+  rkey,
+  prev,
+}: {
+  index?: number;
+  images?: LightboxProps["images"];
+  navigate: UseNavigateResult<string>;
+  did: string;
+  rkey: string;
+  prev?: boolean;
+}) {
+  const len = images?.length ?? 0;
+  if (len === 0) return;
+
+  const nextIndex = ((index ?? 0) + (prev ? -1 : 1) + len) % len;
+
+  navigate({
+    to: "/profile/$did/post/$rkey/image/$i",
+    params: {
+      did,
+      rkey,
+      i: nextIndex.toString(),
+    },
+    replace: true,
+  });
+}
+
+export function Lightbox() {
+  console.log("hey the $i route is loaded w!!!");
+  const { did, rkey, i } = Route.useParams();
+  const [images, setImages] = useState<LightboxProps["images"] | undefined>(
+    undefined
+  );
+  const index = Number(i);
+  const navigate = useNavigate();
+  const post = true;
+  const image = images?.[index] ?? undefined;
+
+  function lightboxCallback(d: LightboxProps) {
+    console.log("callback actually called!");
+    setImages(d.images);
+  }
+
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") window.history.back();
+      if (e.key === "ArrowRight")
+        nextprev({ index, images, navigate, did, rkey });
+      //onNavigate((index + 1) % images.length);
+      if (e.key === "ArrowLeft")
+        nextprev({ index, images, navigate, did, rkey, prev: true });
+      //onNavigate((index - 1 + images.length) % images.length);
+    }
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [index, navigate, did, rkey, images]);
+
+  return createPortal(
+    <>
+      {post && (
+        <div
+          onClick={(e) => {
+            e.stopPropagation();
+            e.nativeEvent.stopImmediatePropagation();
+          }}
+          className="lightbox-sidebar hidden lg:flex overscroll-none disablegutter border-l dark:border-gray-800 was7 border-gray-300 fixed z-50 flex top-0 right-0 flex-col max-w-[350px] min-w-[350px] max-h-screen overflow-y-scroll dark:bg-gray-950 bg-white"
+        >
+          <ProfilePostComponent
+            key={`/profile/${did}/post/${rkey}`}
+            did={did}
+            rkey={rkey}
+            nopics
+            lightboxCallback={lightboxCallback}
+          />
+        </div>
+      )}
+      <div
+        className="lightbox fixed inset-0 z-50 flex items-center justify-center bg-black/80 w-screen lg:w-[calc(100vw-350px)] lg:max-w-[calc(100vw-350px)]"
+        onClick={(e) => {
+          e.stopPropagation();
+          window.history.back();
+        }}
+      >
+        <img
+          src={image?.src}
+          alt={image?.alt}
+          className="max-h-[90%] max-w-[90%] object-contain rounded-lg shadow-lg"
+          onClick={(e) => e.stopPropagation()}
+        />
+
+        {(images?.length ?? 0) > 1 && (
+          <>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                nextprev({ index, images, navigate, did, rkey, prev: true });
+              }}
+              className="absolute left-4 top-1/2 -translate-y-1/2 text-white text-4xl h-8 w-8 rounded-full bg-gray-900 flex items-center justify-center"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={28}
+                height={28}
+                viewBox="0 0 24 24"
+              >
+                <g fill="none" fillRule="evenodd">
+                  <path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path>
+                  <path
+                    fill="currentColor"
+                    d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z"
+                  ></path>
+                </g>
+              </svg>
+            </button>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                nextprev({ index, images, navigate, did, rkey });
+              }}
+              className="absolute right-4 top-1/2 -translate-y-1/2 text-white text-4xl h-8 w-8 rounded-full bg-gray-900 flex items-center justify-center"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={28}
+                height={28}
+                viewBox="0 0 24 24"
+              >
+                <g fill="none" fillRule="evenodd">
+                  <path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path>
+                  <path
+                    fill="currentColor"
+                    d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z"
+                  ></path>
+                </g>
+              </svg>
+            </button>
+          </>
+        )}
+      </div>
+    </>,
+    document.body
+  );
+}

src/routes/profile.$did/post.$rkey.tsx

···
 import { useQueryClient } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 import React, { useLayoutEffect } from "react";
 
 import { Header } from "~/components/Header";
···
   useQueryIdentity,
   useQueryPost,
 } from "~/utils/useQuery";
+
+import type { LightboxProps } from "./post.$rkey.image.$i";
 
 //const HANDLE_DID_CACHE_TIMEOUT = 60 * 60 * 1000; // 1 hour
 
···
   did,
   rkey,
   nopics,
+  lightboxCallback
 }: {
   did: string;
   rkey: string;
-  nopics?: () => void;
+  nopics?: boolean;
+  lightboxCallback?: (d:LightboxProps) => void;
 }) {
   //const { get, set } = usePersistentStore();
   const queryClient = useQueryClient();
···
 
   return (
     <>
+      <Outlet />
       <Header
         title={`Post`}
-        backButtonCallback={
-          nopics
-            ? nopics
-            : () => {
-                if (window.history.length > 1) {
-                  window.history.back();
-                } else {
-                  window.location.assign("/");
-                }
-              }
-        }
+        backButtonCallback={() => {
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.assign("/");
+          }
+        }}
       />
 
       {parentsLoading && (
···
           detailed={true}
           topReplyLine={parentsLoading || parents.length > 0}
           nopics={!!nopics}
+          lightboxCallback={lightboxCallback}
         />
       </div>
       <div