Revert "feat(studio): finish 404 migration (body move, drop pages/404.tsx)"

This reverts commit 3db8fd7d6b.

apps/studio/TANSTACK_MIGRATION.md

@@ -310,7 +310,7 @@ These are the layout-only TanStack files. Most hold a single product layout comp
 
 ### Error pages (handled at root)
 
-- [x] A→done `__root.tsx` — `notFoundComponent` wired to `components/ui/NotFound.tsx` (body moved out of `pages/404.tsx`, Next file deleted, `next/link` + `next/legacy/image` swapped for native equivalents)
+- [x] A `__root.tsx` — wired `notFoundComponent` to `pages/404.tsx`
 - [ ] `__root.tsx` — wire `errorComponent` for `pages/500.tsx` / `_error.jsx`
 
 ---

apps/studio/pages/404.tsx

@@ -1,31 +1,39 @@
-import { Link } from '@tanstack/react-router'
+import { NextPage } from 'next'
 import { useTheme } from 'next-themes'
+import Image from 'next/legacy/image'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { Button } from 'ui'
 
 import { BASE_PATH } from '@/lib/constants'
 
-export function NotFound() {
+const Error404: NextPage = ({}) => {
   const { resolvedTheme } = useTheme()
-  const [show404, setShow404] = useState(false)
+  const [show404, setShow404] = useState<boolean>(false)
 
   useEffect(() => {
-    const id = window.setTimeout(() => setShow404(true), 500)
-    return () => window.clearTimeout(id)
+    setTimeout(() => {
+      setShow404(true)
+    }, 500)
   }, [])
 
-  const logoSrc = resolvedTheme?.includes('dark')
-    ? `${BASE_PATH}/img/supabase-dark.svg`
-    : `${BASE_PATH}/img/supabase-light.svg`
-
   return (
     <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center">
       <div className="absolute top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
         <nav className="relative flex items-center justify-between sm:h-10">
           <div className="flex shrink-0 grow items-center lg:grow-0">
             <div className="flex w-full items-center justify-between md:w-auto">
-              <Link to="/projects">
-                <img src={logoSrc} alt="supabase" height={24} width={120} />
+              <Link href="/projects">
+                <Image
+                  src={
+                    resolvedTheme?.includes('dark')
+                      ? `${BASE_PATH}/img/supabase-dark.svg`
+                      : `${BASE_PATH}/img/supabase-light.svg`
+                  }
+                  alt="supabase"
+                  height={24}
+                  width={120}
+                />
               </Link>
             </div>
           </div>
@@ -51,10 +59,12 @@ export function NotFound() {
         </div>
         <div className="flex items-center space-x-4">
           <Button asChild size="small">
-            <Link to="/projects">Head back</Link>
+            <Link href="/projects">Head back</Link>
           </Button>
         </div>
       </div>
     </div>
   )
 }
+
+export default Error404

apps/studio/routes/__root.tsx

@@ -65,7 +65,6 @@ import { UpdateBillingAddressModal } from '@/components/interfaces/App/UpdateBil
 import { MainScrollContainerProvider } from '@/components/layouts/MainScrollContainerContext'
 import { BannerStackProvider } from '@/components/ui/BannerStack/BannerStackProvider'
 import { GlobalErrorBoundaryState } from '@/components/ui/ErrorBoundary/GlobalErrorBoundaryState'
-import { NotFound } from '@/components/ui/NotFound'
 import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
 import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
 import { AuthProvider } from '@/lib/auth'
@@ -73,6 +72,7 @@ import { API_URL, BASE_PATH, IS_PLATFORM, useDefaultProvider } from '@/lib/const
 import { ProfileProvider } from '@/lib/profile'
 import { Telemetry } from '@/lib/telemetry'
 import { Toaster } from '@/lib/toaster'
+import Error404 from '@/pages/404'
 import { AiAssistantStateContextProvider } from '@/state/ai-assistant-state'
 
 dayjs.extend(customParseFormat)
@@ -249,6 +249,10 @@ const errorBoundaryHandler = (error: Error, info: ErrorInfo) => {
   console.error(error.stack)
 }
 
+function NotFound() {
+  return <Error404 />
+}
+
 export const Route = createRootRouteWithContext<RouterContext>()({
   head: buildRootHead,
   component: RootComponent,