From 71dd706e3ea9800638d9e2773c9c2b3a0aafbaaa Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quentingliech@gmail.com>
Date: Sun, 29 Mar 2026 22:34:59 +0200
Subject: [PATCH] refactor(web): replace RepoShell React context with router
 context
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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) <noreply@anthropic.com>
---
 webui2/src/lib/repo.tsx     | 31 +++++++------------------------
 webui2/src/routes/$repo.tsx |  2 --
 2 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/webui2/src/lib/repo.tsx b/webui2/src/lib/repo.tsx
index c4f688714f35695b72ac00ef1c96f1e749db132d..78c995331ff0f8c685d6b1a48b0febb03b078bff 100644
--- a/webui2/src/lib/repo.tsx
+++ b/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;
 }
diff --git a/webui2/src/routes/$repo.tsx b/webui2/src/routes/$repo.tsx
index 8eaac5c9d2457e7291396cca9cb49ee6b9408728..25332233f84492f4ac0333315f5f7681e889e8cc 100644
--- a/webui2/src/routes/$repo.tsx
+++ b/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;