repo.tsx

 1// Provides the current repository slug (the $repo URL segment) to all
 2// components rendered inside a /$repo/* route.
 3//
 4// Usage:
 5//   - Wrap the /$repo route subtree with <RepoShell /> as the route element.
 6//   - Read the current slug in any child component with useRepo().
 7//   - Pass the slug as `ref` to all GraphQL repository queries.
 8
 9import { Outlet, useParams } from "@tanstack/react-router";
10import { createContext, useContext } from "react";
11
12const RepoContext = createContext<string | null>(null);
13
14// Route element for /$repo routes. Reads the $repo param and provides it
15// via context so any descendant can call useRepo() without prop drilling.
16export function RepoShell() {
17  const { repo } = useParams({ strict: false });
18  return (
19    <RepoContext.Provider value={repo ?? null}>
20      <Outlet />
21    </RepoContext.Provider>
22  );
23}
24
25// Returns the current repo slug from the nearest RepoShell ancestor.
26// Returns null when rendered outside of a /$repo route (e.g. the picker page).
27export function useRepo(): string | null {
28  return useContext(RepoContext);
29}