refactor(web): replace RepoShell React context with router context

Quentin Gliech and Claude Opus 4.6 (1M context) created 1 month ago

remove the hand-rolled RepoContext/RepoShell pattern — the $repo
route's beforeLoad already provides `ref` in the router context

- useRepo() now reads from useRouteContext({ strict: false })
  instead of a dedicated React context
- remove RepoShell component — TanStack Router renders Outlet
  automatically when no component is specified
- remove createContext/useContext/Outlet imports from repo.tsx

Co-Authored-By: Claude Opus 4.6 (1M context) <[e-mail]>

Change summary

webui2/src/lib/repo.tsx     | 31 +++++++------------------------
webui2/src/routes/$repo.tsx |  2 --
2 files changed, 7 insertions(+), 26 deletions(-)

Detailed changes

webui2/src/lib/repo.tsx

@@ -1,29 +1,12 @@
-// Provides the current repository slug (the $repo URL segment) to all
-// components rendered inside a /$repo/* route.
+// Returns the resolved repo ref from the router context.
+// Returns null when rendered outside of a /$repo route (e.g. the picker page).
 //
-// Usage:
-//   - Wrap the /$repo route subtree with <RepoShell /> as the route element.
-//   - Read the current slug in any child component with useRepo().
-//   - Pass the slug as `ref` to all GraphQL repository queries.
-
-import { Outlet, useParams } from "@tanstack/react-router";
-import { createContext, useContext } from "react";
+// The $repo route's beforeLoad normalizes the slug ("_" → null) and provides
+// it as context.ref, so callers don't need to handle the "_" case.
 
-const RepoContext = createContext<string | null>(null);
+import { useRouteContext } from "@tanstack/react-router";
 
-// Route element for /$repo routes. Reads the $repo param and provides it
-// via context so any descendant can call useRepo() without prop drilling.
-export function RepoShell() {
-  const { repo } = useParams({ strict: false });
-  return (
-    <RepoContext.Provider value={repo ?? null}>
-      <Outlet />
-    </RepoContext.Provider>
-  );
-}
-
-// Returns the current repo slug from the nearest RepoShell ancestor.
-// Returns null when rendered outside of a /$repo route (e.g. the picker page).
 export function useRepo(): string | null {
-  return useContext(RepoContext);
+  const context = useRouteContext({ strict: false });
+  return (context as { ref?: string | null }).ref ?? null;
 }

webui2/src/routes/$repo.tsx

@@ -6,10 +6,8 @@ import {
   type AllIdentitiesQuery,
   AllIdentitiesDocument,
 } from "@/__generated__/graphql";
-import { RepoShell } from "@/lib/repo";
 
 export const Route = createFileRoute("/$repo")({
-  component: RepoShell,
   beforeLoad: ({ params: { repo }, context: { preloadQuery } }) => {
     // Normalize the repo slug: "_" means the default (null) repo
     const ref = repo === "_" ? null : repo;