uwu

apps/forge/package.json

@@ -13,7 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.4.2",
+    "@hookform/resolvers": "^3.6.0",
     "@ignis/errors": "workspace:*",
     "@ignis/ts-config": "workspace:*",
     "@ignis/types": "workspace:*",
@@ -24,9 +24,9 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@tailwindcss/typography": "^0.5.13",
-    "@tanstack/react-query": "^5.40.0",
-    "@tanstack/react-query-devtools": "^5.40.0",
-    "@tanstack/react-router": "^1.34.7",
+    "@tanstack/react-query": "^5.45.0",
+    "@tanstack/react-query-devtools": "^5.45.0",
+    "@tanstack/react-router": "^1.38.1",
     "@tanstack/react-table": "^8.17.3",
     "@tanstack/router-devtools": "1.0.0",
     "autoprefixer": "^10.4.19",
@@ -35,16 +35,16 @@
     "clsx": "^2.1.1",
     "cmdk": "^0.2.1",
     "date-fns": "^3.6.0",
-    "framer-motion": "^11.2.9",
+    "framer-motion": "^11.2.10",
     "fuse.js": "^7.0.0",
-    "jotai": "^2.8.2",
+    "jotai": "^2.8.3",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.300.0",
     "md5": "^2.3.0",
     "memoize-one": "^6.0.0",
     "next-themes": "^0.2.1",
     "postcss": "^8.4.38",
-    "posthog-js": "^1.136.2",
+    "posthog-js": "^1.139.2",
     "react": "^18.3.1",
     "react-cookie": "^6.1.3",
     "react-day-picker": "^8.10.1",
@@ -59,24 +59,24 @@
     "redux-persist": "^6.0.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
-    "sonner": "^1.4.41",
+    "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^9.0.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@tanstack/router-cli": "^1.33.12",
-    "@tanstack/router-vite-plugin": "^1.34.1",
+    "@tanstack/router-cli": "^1.37.0",
+    "@tanstack/router-vite-plugin": "^1.38.0",
     "@types/js-cookie": "^3.0.6",
     "@types/md5": "^2.3.5",
-    "@types/node": "^20.12.13",
+    "@types/node": "^20.14.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "typescript": "^5.4.5",
-    "vite": "^5.2.12"
+    "vite": "^5.3.1"
   }
 }

apps/forge/src/components/images/UwUImage.tsx

@@ -0,0 +1,27 @@
+// UwUImage.tsx
+
+interface UwUImageProps {
+    normalSrc?: string;
+    uwuSrc: string;
+    alt: string;
+    className?: string;
+}
+
+const UwUImage: React.FC<UwUImageProps> = ({ normalSrc, uwuSrc, alt, className }) => {
+    const isUwu = localStorage.getItem('uwu') === 'true';
+
+    // If normalSrc is not provided and uwu mode is not enabled, do not render the image
+    if (!normalSrc && !isUwu) {
+        return null;
+    }
+
+    return (
+        <img
+            src={isUwu ? uwuSrc : normalSrc}
+            alt={alt}
+            className={`rounded-lg shadow-lg ${className}`}
+        />
+    );
+};
+
+export default UwUImage;

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

@@ -1,7 +1,7 @@
 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,
@@ -21,7 +21,7 @@ export default function AppSwitcher() {
       <NavigationMenuList>
         <NavigationMenuItem>
           <ContextMenuWrapper>
-            <NavigationMenuTrigger className="bg-card">iForge | {currentapp}</NavigationMenuTrigger>
+            <NavigationMenuTrigger className="bg-card"><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/routing/Forbidden.tsx

@@ -2,28 +2,39 @@ import Title from "@/components/title";
 import { RootComponentInner } from "@/routes/__root";
 import { Link } from "@tanstack/react-router";
 import { Button } from "@ui/components/ui/button.tsx";
+import UwUImage from "@/components/images/UwUImage.tsx";
 
 export const Forbidden = () => {
-  return (
-    <RootComponentInner>
-      <>
-        <Title prompt="Forbidden" />
-        <div className="flex items-center justify-center w-full min-h-[80vh] px-4">
-          <div className="grid items-center gap-4 text-center">
-            <div className="space-y-2">
-              <h1 className="text-4xl font-bold tracking-tighter sm:text-6xl">403 - Forbidden</h1>
-              <p className="max-w-[600px] mx-auto text-accent-foreground md:text-xl/relaxed">
-                Some wires have been crossed, you cannot access the requested page.
-              </p>
-            </div>
-            <div className="flex justify-center space-x-2">
-              <Link to="/">
-                <Button variant="outline">Go to Homepage</Button>
-              </Link>
-            </div>
-          </div>
-        </div>
-      </>
-    </RootComponentInner>
-  );
+	return (
+		<RootComponentInner>
+			<>
+				<Title prompt="Forbidden" />
+				<div className="flex items-center justify-center w-full min-h-[80vh] px-4">
+					<div className="grid items-center gap-4 text-center">
+						<div className="space-y-2">
+							<h1 className="text-4xl font-bold tracking-tighter sm:text-6xl">
+								403 - Forbidden
+							</h1>
+							<div className="flex items-center justify-center w-full">
+								<UwUImage
+									uwuSrc="/uwu/403 Forbidden.png"
+									alt="404 Error"
+									className="w-1/3"
+								/>
+							</div>
+							<p className="max-w-[600px] mx-auto text-accent-foreground md:text-xl/relaxed">
+								Some wires have been crossed, you cannot access the requested
+								page.
+							</p>
+						</div>
+						<div className="flex justify-center space-x-2">
+							<Link to="/">
+								<Button variant="outline">Go to Homepage</Button>
+							</Link>
+						</div>
+					</div>
+				</div>
+			</>
+		</RootComponentInner>
+	);
 };

apps/forge/src/components/routing/GenericError.tsx

@@ -1,29 +1,42 @@
 import Title from "@/components/title";
-import { RootComponentInner } from "@/routes/__root";
 import { Link } from "@tanstack/react-router";
 import { Button } from "@ui/components/ui/button.tsx";
+import UwUImage from "@/components/images/UwUImage.tsx";
 
 export const GenericError = () => {
   return (
-    <RootComponentInner>
       <>
         <Title prompt="Error!" />
         <div className="flex items-center justify-center w-full min-h-[80vh] px-4">
           <div className="grid items-center gap-4 text-center">
             <div className="space-y-2">
-              <h1 className="text-4xl font-bold tracking-tighter sm:text-6xl">Oopsie! - It broke.</h1>
+              <h1 className="text-4xl font-bold tracking-tighter sm:text-6xl">
+                Oopsie! - It broke.
+              </h1>
+              <div className="flex items-center justify-center w-full">
+                <UwUImage
+                    uwuSrc="/uwu/500 InternalServerError.png"
+                    alt="500 Error"
+                    className="w-1/3"
+                />
+              </div>
               <p className="max-w-[600px] mx-auto text-accent-foreground md:text-xl/relaxed">
-                Oops! Something has broken! You can try to close to tab and navigate to the site again!
+                Oops! Something has broken! You can try to close the tab and
+                navigate to the site again!
               </p>
               <p className="text-sm text-accent-foreground">
-                Note: This site is still under development. For assistance, join our{" "}
-                <a className="text-primary" href={import.meta.env.VITE_DISCORD_URL}>
+                Note: This site is still under development. For assistance, join
+                our{" "}
+                <a
+                    className="text-primary"
+                    href={import.meta.env.VITE_DISCORD_URL}
+                >
                   Discord server
                 </a>
                 .
               </p>
             </div>
-            <div className="flex justify-center space-x-2">
+            <div className="flex justify-around space-x-2">
               <Link to="/">
                 <Button variant="outline">Go to Homepage</Button>
               </Link>
@@ -35,6 +48,5 @@ export const GenericError = () => {
           </div>
         </div>
       </>
-    </RootComponentInner>
   );
 };

apps/forge/src/components/routing/NotFound.tsx

@@ -1,36 +1,48 @@
 import Title from "@/components/title";
-import { RootComponentInner } from "@/routes/__root";
 import { Link } from "@tanstack/react-router";
 import { Button } from "@ui/components/ui/button.tsx";
+import UwUImage from "@/components/images/UwUImage.tsx";
 
 export const NotFound = () => {
-  return (
-    <RootComponentInner>
-      <>
-        <Title prompt="Not Found" />
-        <div className="flex items-center justify-center w-full min-h-[80vh] px-4">
-          <div className="grid items-center gap-4 text-center">
-            <div className="space-y-2">
-              <h1 className="text-4xl font-bold tracking-tighter sm:text-6xl">404 - Page Not Found</h1>
-              <p className="max-w-[600px] mx-auto text-accent-foreground md:text-xl/relaxed">
-                Oops! The page you are looking for does not exist or is under construction.
-              </p>
-              <p className="text-sm text-accent-foreground">
-                Note: This site is still under development. For assistance, join our{" "}
-                <a className="text-primary" href={import.meta.env.VITE_DISCORD_URL}>
-                  Discord server
-                </a>
-                .
-              </p>
-            </div>
-            <div className="flex justify-center space-x-2">
-              <Link to="/">
-                <Button variant="outline">Go to Homepage</Button>
-              </Link>
-            </div>
-          </div>
-        </div>
-      </>
-    </RootComponentInner>
-  );
+	return (
+		<>
+			<Title prompt="Not Found" />
+			<div className="flex items-center justify-center w-full min-h-[80vh] px-4">
+				<div className="grid items-center gap-4 text-center">
+					<div className="space-y-2">
+						<h1 className="text-4xl font-bold tracking-tighter sm:text-6xl">
+							404 - Page Not Found
+						</h1>
+						<div className="flex items-center justify-center w-full">
+							<UwUImage
+								uwuSrc="/uwu/404 NotFound.png"
+								alt="404 Error"
+								className="w-1/3"
+							/>
+						</div>
+						<p className="max-w-[600px] mx-auto text-accent-foreground md:text-xl/relaxed">
+							Oops! The page you are looking for does not exist or is under
+							construction.
+						</p>
+						<p className="text-sm text-accent-foreground">
+							Note: This site is still under development. For assistance, join
+							our{" "}
+							<a
+								className="text-primary"
+								href={import.meta.env.VITE_DISCORD_URL}
+							>
+								Discord server
+							</a>
+							.
+						</p>
+					</div>
+					<div className="flex justify-center space-x-2">
+						<Link to="/">
+							<Button variant="outline">Go to Homepage</Button>
+						</Link>
+					</div>
+				</div>
+			</div>
+		</>
+	);
 };

apps/forge/src/lib/utils.ts

@@ -1,11 +1,12 @@
-import { RootState } from "@/redux/store";
+import type { RootState } from "@/redux/store";
 import { ErrorCodes } from "@ignis/errors";
 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 { UCARD_LENGTH } from "./constants";
+import type {Apps} from "@/types/app.ts";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -52,3 +53,24 @@ export function extractError(error: Error): string {
 export function uCardNumberToString(ucard_number: number): string {
   return ucard_number.toString().padStart(UCARD_LENGTH, "0");
 }
+
+export function currentAppToColor(currentApp: Apps | undefined): 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 "";
+  }
+}