feat(ui): Add Vercel-style breadcrumb navigation with project and service switchers

apps/dokploy/__test__/setup.ts

@@ -12,6 +12,7 @@ vi.mock("@dokploy/server/db", () => {
 	chain.where = () => chain;
 	chain.values = () => chain;
 	chain.returning = () => Promise.resolve([{}]);
+	// biome-ignore lint/suspicious/noThenProperty: this is for testing
 	chain.then = undefined;
 
 	const tableMock = {

apps/dokploy/components/dashboard/project/add-compose.tsx

@@ -79,7 +79,7 @@ export const AddCompose = ({ environmentId, projectName }: Props) => {
 		api.compose.create.useMutation();
 
 	// Get environment data to extract projectId
-	const { data: environment } = api.environment.one.useQuery({ environmentId });
+	// const { data: environment } = api.environment.one.useQuery({ environmentId });
 
 	const hasServers = servers && servers.length > 0;
 	// Show dropdown logic based on cloud environment
@@ -117,6 +117,8 @@ export const AddCompose = ({ environmentId, projectName }: Props) => {
 				await utils.environment.one.invalidate({
 					environmentId,
 				});
+				// Invalidate the project query to refresh the project data for the advance-breadcrumb
+				await utils.project.all.invalidate();
 			})
 			.catch(() => {
 				toast.error("Error creating the compose");

apps/dokploy/components/dashboard/project/add-template.tsx

@@ -332,6 +332,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 												viewMode === "detailed" && "border-b",
 											)}
 										>
+											{/** biome-ignore lint/performance/noImgElement: this is a valid use for img tag */}
 											<img
 												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template?.id}/${template?.logo}`}
 												className={cn(

apps/dokploy/components/dashboard/project/advanced-environment-selector.tsx

@@ -98,6 +98,8 @@ export const AdvancedEnvironmentSelector = ({
 
 			toast.success("Environment created successfully");
 			utils.environment.byProjectId.invalidate({ projectId });
+			// Invalidate the project query to refresh the project data for the advance-breadcrumb
+			utils.project.all.invalidate();
 			setIsCreateDialogOpen(false);
 			setName("");
 			setDescription("");

apps/dokploy/components/dashboard/projects/show.tsx

@@ -13,7 +13,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
-import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
+import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { FocusShortcutInput } from "@/components/shared/focus-shortcut-input";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
@@ -169,9 +169,7 @@ export const ShowProjects = () => {
 
 	return (
 		<>
-			<BreadcrumbSidebar
-				list={[{ name: "Projects", href: "/dashboard/projects" }]}
-			/>
+			<AdvanceBreadcrumb />
 			{!isCloud && (
 				<div className="absolute top-4 right-4">
 					<TimeBadge />
@@ -564,7 +562,7 @@ export const ShowProjects = () => {
 																</CardTitle>
 															</CardHeader>
 															<CardFooter className="pt-4">
-																<div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
+																<div className="space-y-1 text-xs flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
 																	<DateTooltip date={project.createdAt}>
 																		Created
 																	</DateTooltip>

apps/dokploy/components/dashboard/settings/certificates/utils.ts

@@ -14,13 +14,13 @@ export const extractExpirationDate = (certData: string): Date | null => {
 
 		// Helper: read ASN.1 length field
 		function readLength(pos: number): { length: number; offset: number } {
-			// biome-ignore lint/style/noParameterAssign: <explanation>
+			// biome-ignore lint/style/noParameterAssign: this is for dynamic length calculation
 			let len = der[pos++];
 			if (len & 0x80) {
 				const bytes = len & 0x7f;
 				len = 0;
 				for (let i = 0; i < bytes; i++) {
-					// biome-ignore lint/style/noParameterAssign: <explanation>
+					// biome-ignore lint/style/noParameterAssign: this is for dynamic length calculation
 					len = (len << 8) + der[pos++];
 				}
 			}

apps/dokploy/components/layouts/side.tsx

@@ -905,6 +905,7 @@ export default function Page({ children }: Props) {
 			onOpenChange={(open) => {
 				setDefaultOpen(open);
 
+				// biome-ignore lint/suspicious/noDocumentCookie: this sets the cookie to keep the sidebar state.
 				document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}`;
 			}}
 			style={
@@ -1140,7 +1141,7 @@ export default function Page({ children }: Props) {
 								<div className="px-3 text-xs text-muted-foreground text-center group-data-[collapsible=icon]:hidden">
 									Version {dokployVersion}
 								</div>
-								<div className="hidden text-xs text-muted-foreground text-center group-data-[collapsible=icon]:block">
+								<div className="hidden text-[10px] text-muted-foreground text-center group-data-[collapsible=icon]:block w-full">
 									{dokployVersion}
 								</div>
 							</>