Merge pull request #3716 from imran-vz/feat/quick-service-switcher

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

Author: Siumauricio

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

@@ -92,6 +92,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

@@ -166,6 +166,11 @@ export const ShowProjects = () => {
 
 	return (
 		<>
+			{!isCloud && (
+				<div className="absolute top-4 right-4">
+					<TimeBadge />
+				</div>
+			)}
 			<BreadcrumbSidebar
 				list={[{ name: "Projects", href: "/dashboard/projects" }]}
 			/>
@@ -429,7 +434,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

@@ -908,6 +908,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={