significant refactor

src/app/routes/_authed/profile.$playerId.tsx

@@ -1,7 +1,7 @@
-import Page from "@/components/page";
 import Profile from "@/features/players/components/profile";
 import { playerQueries } from "@/features/players/queries";
-import { redirect, createFileRoute } from "@tanstack/react-router";
+import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
+import { createFileRoute } from "@tanstack/react-router";
 import { z } from "zod";
 
 const searchSchema = z.object({
@@ -12,22 +12,22 @@ export const Route = createFileRoute("/_authed/profile/$playerId")({
   validateSearch: searchSchema,
   beforeLoad: async ({ params, context }) => {
     const { queryClient } = context;
-    const player = await queryClient.ensureQueryData(playerQueries.details(params.playerId))
-    if (!player) throw redirect({ to: '/' });
-    return {
-      player
-    }
+    await prefetchServerQuery(
+      queryClient,
+      playerQueries.details(params.playerId)
+    );
   },
   loader: ({ params, context }) => ({
     header: {
       collapsed: true,
       withBackButton: true,
-      settingsLink: context?.auth.user.id === params.playerId ? 'settings' : undefined
+      settingsLink:
+        context?.auth.user.id === params.playerId ? "/settings" : undefined,
     },
-    refresh: [playerQueries.details(params.playerId).queryKey]
+    refresh: [playerQueries.details(params.playerId).queryKey],
   }),
   component: () => {
-    const { player } = Route.useRouteContext();
-    return <Profile player={player} />
+    const { playerId } = Route.useParams();
+    return <Profile id={playerId} />;
   },
-})
+});