fix: useCurrentApp not working reliably and bake names into parent route

Hopefully the root files for the apps can be moved to the actual files soonish. Am discussing with tanstack-router people

apps/forge/src/config/appLinks.ts

@@ -1,10 +1,11 @@
 // appLinks.ts
 import { Apps } from "@/types/app.ts";
+import { appRoutes } from "@/types/common";
 
 export type AppLink = {
   app: Apps; // Identifier for the app
   displayName: string; // User-facing name
-  path?: string; // Path for the link
+  path?: appRoutes; // Path for the link
   children?: AppLink[]; // Nested links, specific to the same app
   index?: number; // Index of the link in the navbar (PER LEVEL)
   id: string; // Unique identifier for the link
@@ -23,7 +24,6 @@ export const appLinks: AppLink[] = [
   {
     app: "Sign In",
     displayName: "Actions",
-    path: "/signin/actions",
     index: 2,
     id: "signin_actions_root",
     children: [

apps/forge/src/hooks/useCurrentApp.ts

@@ -1,29 +1,16 @@
-import { useState, useEffect } from "react";
-import { useMatchRoute, useRouterState } from "@tanstack/react-router";
 import { Apps } from "@/types/app.ts";
-import { appRoutes } from "@/types/common.ts";
-import { appNavMapping } from "@/config/nav.ts";
+import { useMatches } from "@tanstack/react-router";
 
 const useCurrentApp = (): Apps | undefined => {
-  const [currentApp, setCurrentApp] = useState<Apps | undefined>(undefined);
-  const matchRoute = useMatchRoute();
+  const matchWithTitle = useMatches()
+    .reverse()
+    .find((d) => d.staticData.title);
 
-  const routerChanged = useRouterState().resolvedLocation.pathname;
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Needed to include router state or else this doesn't update quick enough (side effect is it updates too much)>
-  useEffect(() => {
-    for (const [routeSegment, app] of Object.entries(appNavMapping)) {
-      const route = routeSegment as appRoutes;
-      const match = matchRoute({ to: `/${route}`, fuzzy: true });
-      if (match) {
-        console.log("updating");
-        setCurrentApp(app);
-        return; // Stop the loop once a match is found
-      }
-    }
-  }, [matchRoute, routerChanged]);
-
-  return currentApp;
+  const title = matchWithTitle?.staticData.title;
+  if (!title) {
+    throw new Error("Page has no title. This should have been set in the root directory in a file with the app's name");
+  }
+  return title;
 };
 
 export default useCurrentApp;

apps/forge/src/main.tsx

@@ -15,6 +15,7 @@ import { routeTree } from "@/routeTree.gen.ts";
 import { Toaster } from "@ui/components/ui/sonner.tsx";
 import posthog from "posthog-js";
 import { PersistGate } from "redux-persist/integration/react";
+import { Apps } from "./types/app";
 
 // Begin Router
 const queryClient = new QueryClient();
@@ -35,6 +36,9 @@ declare module "@tanstack/react-router" {
   interface Register {
     router: typeof router;
   }
+  interface StaticDataRouteOption {
+    title?: Apps;
+  }
 }
 
 function InnerApp() {

apps/forge/src/routes/admin.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/admin")({
+  staticData: { title: "Admin" },
+});

apps/forge/src/routes/auth.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/auth")({
+  staticData: { title: "Auth" },
+});

apps/forge/src/routes/index.tsx

@@ -25,4 +25,4 @@ const IndexComponent = () => {
   );
 };
 
-export const Route = createFileRoute("/")({ component: IndexComponent });
+export const Route = createFileRoute("/")({ component: IndexComponent, staticData: { title: "Main" } });

apps/forge/src/routes/printing.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/printing")({
+  staticData: { title: "Printing" },
+});

apps/forge/src/routes/signin.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/signin")({
+  staticData: { title: "Sign In" },
+});

apps/forge/src/routes/socials.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/socials")({ staticData: { title: "Socials" } });

apps/forge/src/routes/training.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/training")({
+  staticData: { title: "Training" },
+});

apps/forge/src/routes/user.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/user")({
+  component: () => ({ title: "User" }),
+});

apps/forge/src/types/app.ts

@@ -1 +1 @@
-export type Apps = "Main" | "Sign In" | "Printing" | "User" | "Admin" | "Training" | "Auth";
+export type Apps = "Main" | "Sign In" | "Printing" | "User" | "Admin" | "Training" | "Auth" | "Socials";