fix: fixed navigation for the time being

Author: Sampiiiii

apps/forge/index.html

@@ -33,8 +33,8 @@
 
     <!-- Dynamically load Futura -->
     <script>
-        const isDevelopment = process.env.NODE_ENV === 'development';
-        const fontDir = isDevelopment ? 'http://localhost:4000/fonts' : '/cdn/fonts';
+        const isDevelopment = '%MODE%' === 'development';
+        const fontUrl = isDevelopment ? 'http://localhost:4000/fonts' : 'https://cdn.iforge.sheffield.ac.uk/fonts';
 
         const style = document.createElement('style');
         style.innerHTML = `

apps/forge/package.json

@@ -26,9 +26,9 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@reduxjs/toolkit": "^2.2.8",
     "@tailwindcss/typography": "^0.5.15",
-    "@tanstack/react-query": "^5.59.3",
-    "@tanstack/react-query-devtools": "^5.59.3",
-    "@tanstack/react-router": "^1.63.5",
+    "@tanstack/react-query": "^5.59.13",
+    "@tanstack/react-query-devtools": "^5.59.13",
+    "@tanstack/react-router": "^1.64.3",
     "@tanstack/react-table": "^8.20.5",
     "@tanstack/router-devtools": "1.62.1",
     "@udecode/plate-serializer-md": "^33.0.0",
@@ -41,7 +41,7 @@
     "embla-carousel-autoplay": "^8.3.0",
     "embla-carousel-react": "^8.3.0",
     "embla-carousel-wheel-gestures": "^8.0.1",
-    "framer-motion": "^11.11.4",
+    "framer-motion": "^11.11.8",
     "fuse.js": "^7.0.0",
     "jotai": "^2.10.0",
     "js-cookie": "^3.0.5",
@@ -53,7 +53,7 @@
     "postcss": "^8.4.47",
     "posthog-js": "^1.167.0",
     "react": "^18.3.1",
-    "react-cookie": "^7.2.0",
+    "react-cookie": "^7.2.1",
     "react-day-picker": "^9.1.3",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
@@ -76,13 +76,13 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@tanstack/router-cli": "^1.63.5",
-    "@tanstack/router-vite-plugin": "^1.63.5",
+    "@tanstack/router-cli": "^1.64.0",
+    "@tanstack/router-vite-plugin": "^1.64.0",
     "@types/js-cookie": "^3.0.6",
     "@types/md5": "^2.3.5",
     "@types/node": "^22.7.5",
     "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "sharp": "^0.33.5",

apps/forge/src/components/dev/Tailwind-Indicator.tsx

@@ -1,5 +1,5 @@
 export const TailwindIndicator = () => {
-  if (process.env.NODE_ENV === "production") return null;
+  if (import.meta.env.PROD) return null;
 
   return (
     <div className="fixed top-1 left-1 z-50 flex h-6 w-6 items-center justify-center bg-gray-800 p-3 rounded-lg font-mono text-xs text-white">

apps/forge/src/components/navbar/appNav/appLinkDropdown.tsx

@@ -17,7 +17,7 @@ const DropdownLink: React.FC<DropdownLinkProps> = ({ link, onClick, activeId, on
     const isActive = linkItem.id === activeId;
 
     // Link styles
-    const linkClasses = `flex justify-center items-center p-2 text-sm font-medium rounded-md text-card-foreground hover:bg-accent ${
+    const linkClasses = `flex justify-center items-center p-2 text-sm font-medium rounded-md text-card-foreground hover:bg-accent font-futura ${
       isActive ? "border-2 border-accent/40" : ""
     }`;
 

apps/forge/src/components/navbar/appSwitcher/ListItem.tsx

@@ -1,12 +1,13 @@
 import { cn } from "@/lib/utils";
+import { RoutePath } from "@/types/router";
 import { Link } from "@tanstack/react-router";
 import { NavigationMenuLink } from "@ui/components/ui/navigation-menu";
 import React, { AnchorHTMLAttributes, ReactNode } from "react";
 
 interface ListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   icon?: ReactNode;
   title: string;
-  to: string;
+  to: RoutePath;
   onClick?: () => void;
 }
 

apps/forge/src/components/navbar/appSwitcher/index.tsx

@@ -1,8 +1,6 @@
-import React from "react";
 import ContextMenuWrapper from "@/components/navbar/appSwitcher/ContextMenu.tsx";
 import ListItem from "@/components/navbar/appSwitcher/ListItem";
-import useCurrentApp from "@/hooks/useCurrentApp.ts";
-import { cn } from "@/lib/utils.ts";
+import { cn, currentAppToColor } from "@/lib/utils.ts";
 import { Link } from "@tanstack/react-router";
 import {
   NavigationMenu,
@@ -13,6 +11,7 @@ import {
   NavigationMenuTrigger,
 } from "@ui/components/ui/navigation-menu";
 import { BookOpen, PenLine, Printer } from "lucide-react";
+import useCurrentApp from "@/hooks/useCurrentApp";
 
 interface AppSwitcherProps {
   onLinkClick?: () => void;
@@ -32,7 +31,9 @@ export default function AppSwitcher({ onLinkClick }: AppSwitcherProps) {
       <NavigationMenuList>
         <NavigationMenuItem>
           <ContextMenuWrapper>
-            <NavigationMenuTrigger className="bg-card font-futura">iForge | {currentapp}</NavigationMenuTrigger>
+            <NavigationMenuTrigger className="bg-card font-futura">
+              <span className={`border-b-2 ${currentAppToColor(currentapp)}`}>iForge | {currentapp}</span>
+            </NavigationMenuTrigger>
           </ContextMenuWrapper>
           <NavigationMenuContent>
             <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">

apps/forge/src/components/navbar/userNav/index.tsx

@@ -3,7 +3,6 @@ import { useUser } from "@/lib/utils";
 import { Link } from "@tanstack/react-router";
 import { Badge } from "@ui/components/ui/badge";
 import { Button } from "@ui/components/ui/button";
-import React from "react";
 
 import { USER_EMAIL_DOMAIN } from "@/config/constants.ts";
 import {

apps/forge/src/components/title/index.tsx

@@ -3,17 +3,17 @@ import React from "react";
 import { Helmet } from "react-helmet-async";
 
 interface TitleProps {
-    prompt: string;
+  prompt: string;
 }
 
 const Title: React.FC<TitleProps> = ({ prompt }) => {
-    const isDevelopment = process.env.NODE_ENV === "development";
+  const isDevelopment = import.meta.env.DEV;
 
-    return (
-        <Helmet>
-            <title>{isDevelopment ? `DEV iForge | ${prompt}` : `iForge | ${prompt}`}</title>
-        </Helmet>
-    );
+  return (
+    <Helmet>
+      <title>{isDevelopment ? `DEV iForge | ${prompt}` : `iForge | ${prompt}`}</title>
+    </Helmet>
+  );
 };
 
 export default Title;

apps/forge/src/hooks/useCurrentApp.ts

@@ -1,21 +1,39 @@
 import { Apps } from "@/types/app.ts";
-import { useMatches, useParentMatches } from "@tanstack/react-router";
+import { useLocation } from "@tanstack/react-router";
+import { useMemo } from "react";
 
-const useCurrentApp = (): Apps | undefined => {
-  const parent = useParentMatches();
-  const matchWithTitle = useMatches()
-    .reverse()
-    .find((d) => d.staticData?.title);
+const useCurrentApp = (): Apps => {
+  const pathname = useLocation({
+    select: (location) => location.pathname,
+  });
 
-  if (!matchWithTitle) {
-    if (parent.length === 0) {
-      return "Error"; // not found
-    }
-    console.error("No match with title found", parent);
-    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 useMemo(() => {
+    // Split the pathname and get the first segment
+    const segments = pathname.split("/").filter(Boolean);
+    const firstSegment = segments[0]?.toLowerCase();
 
-  return matchWithTitle.staticData.title;
+    switch (firstSegment) {
+      case "":
+      case undefined:
+        return "Main";
+      case "signin":
+        return "Sign In";
+      case "printing":
+        return "Printing";
+      case "user":
+        return "User";
+      case "admin":
+        return "Admin";
+      case "training":
+        return "Training";
+      case "auth":
+        return "Auth";
+      case "socials":
+        return "Socials";
+      default:
+        return "Error";
+    }
+  }, [pathname]); // Only recalculate when pathname changes
 };
 
 export default useCurrentApp;

apps/forge/src/lib/utils.ts

@@ -1,14 +1,14 @@
 import { RootState } from "@/redux/store";
 import { ErrorCodes } from "@ignis/errors";
-import { Location, Training } from "@ignis/types/training";
 import { deserializeMd as deserializeMd_ } from "@udecode/plate-serializer-md";
 import { createPlateEditor } from "@ui/components/plate-ui/plate-editor";
 import { isAxiosError } from "axios";
 import { type ClassValue, clsx } from "clsx";
 import md5 from "md5";
 import { useSelector } from "react-redux";
 import { twMerge } from "tailwind-merge";
-import { LOCATIONS, UCARD_LENGTH } from "./constants";
+import { UCARD_LENGTH } from "./constants";
+import { Apps } from "@/types/app";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -98,3 +98,24 @@ export function serializeTrainingTags(badges_: TrainingTag[]): Required<Training
 
   return training as Required<TrainingForTags>;
 }
+
+export function currentAppToColor(currentApp: Apps): string {
+  switch (currentApp) {
+    case "Admin":
+      return "border-purple-600";
+    case "Auth":
+      return "border-fuchisa-600";
+    case "Main":
+      return "border-red-700";
+    case "Printing":
+      return "border-orange-500";
+    case "Sign In":
+      return "border-rose-700";
+    case "Training":
+      return "border-green-700";
+    case "User":
+      return "border-indigo-600";
+    default:
+      return "";
+  }
+}