Burn it all to the ground and start with bun and a reorg

src/app/(root)/photos/page.tsx

@@ -1,31 +1,28 @@
 import Image from "next/image";
-import FilteredLightbox from "@/components/lightbox";
-import { trpc } from "@/trpc/server";
-import { TRPCProvider } from "@/trpc/client";
+import FilteredLightbox from "@/app/_components/lightbox";
+import { api } from "@/trpc/server";
 
 export default async function Photos(): Promise<React.JSX.Element> {
-  const { data: images } = await trpc.photos.list();
+	const { data: images } = await api.photos.list();
 
-  return (
-    <div className="mx-auto">
-      <TRPCProvider>
-        <FilteredLightbox imageData={images}>
-          {images.map((image) => (
-            <Image
-              key={image.src}
-              alt={image.src}
-              src={image.src}
-              className="object-contain h-60 w-80"
-              sizes="100vw"
-              loading="lazy"
-              width={image.width}
-              height={image.height}
-              blurDataURL={image.blur}
-              placeholder="blur"
+	return (
+		<div className="mx-auto">
+      <FilteredLightbox imageData={images}>
+        {images.map((image) => (
+          <Image
+          key={image.src}
+            alt={image.src}
+            src={image.src}
+            className="h-60 w-80 object-contain"
+            sizes="100vw"
+            loading="lazy"
+            width={image.width}
+            height={image.height}
+            blurDataURL={image.blur}
+            placeholder="blur"
             />
           ))}
-        </FilteredLightbox>
-      </TRPCProvider>
-    </div>
-  );
+      </FilteredLightbox>
+		</div>
+	);
 }