fix(cloud): redirect to tasks when initial login

frontend/src/app.tsx

@@ -2,16 +2,25 @@ import type { Clerk } from "@clerk/clerk-js";
 import * as Sentry from "@sentry/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { createRouter, RouterProvider } from "@tanstack/react-router";
+import { createRouter, Link, RouterProvider } from "@tanstack/react-router";
 import { Suspense } from "react";
 import {
+	Button,
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
 	ConfigProvider,
 	FullscreenLoading,
 	getConfig,
+	H2,
 	ThirdPartyProviders,
 	Toaster,
 	TooltipProvider,
 } from "@/components";
+import { RouteLayout } from "./app/route-layout";
+import { RootLayout } from "./components/layout";
 import { clerk } from "./lib/auth";
 import { queryClient } from "./queries/global";
 import { routeTree } from "./routeTree.gen";
@@ -49,6 +58,31 @@ export const router = createRouter({
 		console.error("Router caught an error:", error);
 		Sentry.captureException(error);
 	},
+	defaultNotFoundComponent: () => (
+		<RouteLayout>
+			<div className="bg-card h-full border my-2 mr-2 rounded-lg">
+				<div className="mt-2 flex flex-col items-center justify-center h-full">
+					<div className="w-full sm:w-96">
+						<Card>
+							<CardHeader>
+								<CardTitle className="flex items-center">
+									404
+								</CardTitle>
+								<CardDescription>
+									The page was not found
+								</CardDescription>
+							</CardHeader>
+							<CardContent>
+								<Button asChild variant="secondary">
+									<Link to="/">Go home</Link>
+								</Button>
+							</CardContent>
+						</Card>
+					</div>
+				</div>
+			</div>
+		</RouteLayout>
+	),
 });
 
 function InnerApp() {

frontend/src/app/context-switcher.tsx

@@ -132,7 +132,11 @@ function ProjectBreadcrumb({
 		return <Skeleton className={cn("h-5 w-32", className)} />;
 	}
 
-	return <span className={className}>{data?.displayName}</span>;
+	return (
+		<span className={className}>
+			{data?.displayName || "Unknown Project"}
+		</span>
+	);
 }
 
 function NamespaceBreadcrumb({
@@ -154,7 +158,11 @@ function NamespaceBreadcrumb({
 		return <Skeleton className="h-5 w-32" />;
 	}
 
-	return <span className={className}>{data?.displayName}</span>;
+	return (
+		<span className={className}>
+			{data?.displayName || "Unknown Namespace"}
+		</span>
+	);
 }
 
 function Content({ onClose }: { onClose?: () => void }) {

frontend/src/app/route-error.tsx

@@ -0,0 +1,52 @@
+import { type ErrorComponentProps, Link } from "@tanstack/react-router";
+import {
+	Button,
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components";
+import { RouteLayout } from "./route-layout";
+
+export const RouteError = ({ error }: ErrorComponentProps) => {
+	return (
+		<RouteLayout>
+			<div className="bg-card h-full border my-2 mr-2 rounded-lg">
+				<div className="mt-2 flex flex-col items-center justify-center h-full">
+					<div className="w-full sm:w-96">
+						<Card>
+							<CardHeader>
+								<CardTitle className="flex items-center">
+									{"statusCode" in error &&
+									error.statusCode === 404
+										? "Resource not found"
+										: "body" in error &&
+												error.body &&
+												typeof error.body ===
+													"object" &&
+												"message" in error.body
+											? String(error.body.message)
+											: error.message}
+								</CardTitle>
+								<CardDescription>
+									{"statusCode" in error &&
+									error.statusCode === 404
+										? "The resource you are looking for does not exist or you do not have access to it."
+										: "An unexpected error occurred. Please try again later."}
+								</CardDescription>
+							</CardHeader>
+							<CardContent>
+								<Button asChild variant="secondary">
+									<Link to="." reloadDocument>
+										Retry
+									</Link>
+								</Button>
+							</CardContent>
+						</Card>
+					</div>
+				</div>
+			</div>
+		</RouteLayout>
+	);
+};

frontend/src/app/user-dropdown.tsx

@@ -131,7 +131,7 @@ function Preview({ org }: { org: string }) {
 			className="text-muted-foreground justify-between py-1 min-h-8 gap-2 w-full"
 			endIcon={<Icon icon={faChevronDown} />}
 		>
-			<div className="flex gap-2 items-center w-full">
+			<div className="flex gap-2 items-center w-full min-w-0">
 				<Avatar className="size-5">
 					<AvatarImage src={data?.imageUrl} />
 					<AvatarFallback>
@@ -142,11 +142,13 @@ function Preview({ org }: { org: string }) {
 						)}
 					</AvatarFallback>
 				</Avatar>
-				{isLoading ? (
-					<Skeleton className="w-full h-4 flex-1" />
-				) : (
-					data?.name
-				)}
+				<span className="text-sm truncate">
+					{isLoading ? (
+						<Skeleton className="w-full h-4 flex-1" />
+					) : (
+						data?.name
+					)}
+				</span>
 			</div>
 		</Button>
 	);

frontend/src/components/fullscreen-loading.tsx

@@ -1,12 +1,17 @@
 import { AssetImage } from "./asset-image";
 
-export function FullscreenLoading() {
+export function FullscreenLoading({
+	children,
+}: {
+	children?: React.ReactNode;
+}) {
 	return (
-		<div className="min-h-screen flex items-center justify-center">
+		<div className="min-h-screen flex items-center justify-center flex-col">
 			<AssetImage
 				className="animate-pulse h-10"
 				src="/logo/icon-white.svg"
 			/>
+			{children}
 		</div>
 	);
 }