[feature] Realtime site lifecycle

package.json

@@ -36,10 +36,12 @@
 		"next": "^16.2.4",
 		"next-auth": "^5.0.0-beta.31",
 		"next-intl": "^4.11.0",
+		"next-themes": "^0.4.6",
 		"react": "^19.2.5",
 		"react-dom": "^19.2.5",
 		"react-hook-form": "^7.75.0",
 		"recharts": "^3.8.1",
+		"sonner": "^2.0.7",
 		"swagger-jsdoc": "^6.2.8",
 		"swagger-ui-dist": "^5.32.5",
 		"tailwind-merge": "^3.5.0",

src/app/(root)/new/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { decode } from "html-entities";
-import { Edit, Eye } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
 import { useCallback, useEffect, useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
@@ -20,6 +20,7 @@ import type { ServiceResponse } from "@/types/response";
 import { type SiteForm, siteSchema } from "@/types/site";
 
 export default function SiteAddPage() {
+	const router = useRouter();
 	const locale = useLocale();
 	const errorMessages = useZodErrorMessages();
 
@@ -327,24 +328,12 @@ export default function SiteAddPage() {
 			loadingText: translations.actions("creating"),
 			successTitle: translations.site("create.success"),
 			successMessage: translations.site("create.successMessage"),
-			successActions: [
-				{
-					label: translations.site("visitSite"),
-					url: (formData: SiteForm) => formData.url,
-					icon: Eye,
-				},
-				{
-					label: translations.site("edit"),
-					url: (_formData: SiteForm, response: unknown) => {
-						const r = response as ServiceResponse<{ siteId: string }>;
-						if (r?.success) return `/sites/${r.data.siteId}/edit`;
-						return "/error";
-					},
-					icon: Edit,
-				},
-			],
 			errorMessage: translations.site("create.error"),
-			onSuccess: () => {},
+			onSuccess: (_data: SiteForm, response: unknown) => {
+				const r = response as ServiceResponse<{ siteId: string }>;
+				// The Form already fired the success toast; give it a beat before navigating to the detail page.
+				if (r?.success) setTimeout(() => router.push(`/sites/${r.data.siteId}/edit`), 1200);
+			},
 			onError: (err) => console.error("Error creating site:", err),
 			onFieldChange: async (fieldName: string, value: unknown) => {
 				if (fieldName === "backupEnvironment" && typeof value === "string") {

src/app/(root)/page.tsx

@@ -1,9 +1,10 @@
 "use client";
-import { AlertTriangle, ArrowLeft, BarChart3, Calendar, ChevronRight, Download, Filter, GlobeIcon, Info, Languages, Layers, MoreHorizontal, Pencil, Plus, Tags, Zap } from "lucide-react";
+import { AlertTriangle, ArrowLeft, BarChart3, Calendar, ChevronRight, Download, Filter, GlobeIcon, Info, Languages, Layers, Loader2, MoreHorizontal, Pencil, Plus, Tags, Zap } from "lucide-react";
 import moment from "moment";
 import Link from "next/link";
 import { useLocale, useTranslations } from "next-intl";
 import React, { useEffect, useState } from "react";
+import { ActionLink } from "@/components/ui/action";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -13,6 +14,7 @@ import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, type TableColumn } from "@/components/ui/table";
 import { useAbility } from "@/hooks/useAbility";
+import { useServerEvents } from "@/hooks/useServerEvents";
 import "moment/locale/fr";
 import { useSearchParams } from "next/navigation";
 import { DeleteDialog } from "@/components/dialog/delete";
@@ -22,21 +24,46 @@ import { LANGUAGES } from "@/constants/languages";
 import { THEMES } from "@/constants/theme";
 import { deleteSiteAction, listSites } from "@/services/site";
 import type { InfrastructureType } from "@/types/infrastructure";
-import type { Site, SiteListFilters } from "@/types/site";
+import type { Site, SiteEvent, SiteListFilters } from "@/types/site";
 import { isDatabaseSite, isKubernetesSite, isNoneSite } from "@/types/site";
 import type { ThemeType } from "@/types/theme";
 
 export default function SiteListPage() {
 	const ability = useAbility();
 	const searchParams = useSearchParams();
 	const [sites, setSites] = useState<Site[]>([]);
+	const [deletingIds, setDeletingIds] = useState<Set<string>>(new Set());
 
 	useEffect(() => {
 		listSites().then(({ sites: data }) => {
 			if (data) setSites(data);
 		});
 	}, []);
 
+	const removeFromSet = (set: Set<string>, id: string): Set<string> => {
+		if (!set.has(id)) return set;
+		const next = new Set(set);
+		next.delete(id);
+		return next;
+	};
+
+	useServerEvents<{ site: SiteEvent }>("/api/sites/events", {
+		site: (event) => {
+			switch (event.type) {
+				case "added":
+				case "modified":
+					// Upsert with the authoritative site; `creating`/`deletedAt` flags live on the object itself.
+					setSites((prev) => (prev.some((s) => s.id === event.id) ? prev.map((s) => (s.id === event.id ? event.site : s)) : [event.site, ...prev]));
+					if (!event.site.deletedAt) setDeletingIds((prev) => removeFromSet(prev, event.id));
+					break;
+				case "deleted":
+					setSites((prev) => prev.filter((s) => s.id !== event.id));
+					setDeletingIds((prev) => removeFromSet(prev, event.id));
+					break;
+			}
+		},
+	});
+
 	const getInitialFilters = () => {
 		const filters: SiteListFilters = {
 			url: searchParams.get("url") || "",
@@ -248,20 +275,36 @@ export default function SiteListPage() {
 			width: "w-[55%]",
 			align: "left",
 			sortable: true,
-			render: (site) => (
-				<div className="flex items-center justify-between gap-2">
-					<a href={site.url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 font-medium text-blue-600 hover:underline">
-						<GlobeIcon className="size-6 shrink-0" />
-						<span className="text-base font-medium leading-relaxed">{site.url}</span>
-					</a>
-					{!site.managed && (
-						<div className="flex items-center gap-1 text-yellow-500 px-2 py-1">
-							<AlertTriangle className="size-5" />
-							<p className="font-medium">{translations.site("unmanaged")}</p>
-						</div>
-					)}
-				</div>
-			),
+			render: (site) => {
+				const isDeleting = deletingIds.has(site.id) || Boolean(site.deletedAt);
+				const isCreating = Boolean(site.creating);
+				return (
+					<div className="flex items-center justify-between gap-2">
+						<a href={site.url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 font-medium text-blue-600 hover:underline">
+							<GlobeIcon className="size-6 shrink-0" />
+							<span className="text-base font-medium leading-relaxed">{site.url}</span>
+						</a>
+						{isDeleting ? (
+							<div className="flex items-center gap-1 text-red-500 px-2 py-1">
+								<Loader2 className="size-5 animate-spin" />
+								<p className="font-medium">{translations.site("deleting")}</p>
+							</div>
+						) : isCreating ? (
+							<div className="flex items-center gap-1 text-blue-500 px-2 py-1">
+								<Loader2 className="size-5 animate-spin" />
+								<p className="font-medium">{translations.site("creating")}</p>
+							</div>
+						) : (
+							!site.managed && (
+								<div className="flex items-center gap-1 text-yellow-500 px-2 py-1">
+									<AlertTriangle className="size-5" />
+									<p className="font-medium">{translations.site("unmanaged")}</p>
+								</div>
+							)
+						)}
+					</div>
+				);
+			},
 		},
 		{
 			key: "infrastructure",
@@ -300,42 +343,42 @@ export default function SiteListPage() {
 			width: "w-[15%]",
 			align: "left",
 			sortable: false,
-			render: (site) => (
-				<div className="flex gap-1.5 items-center py-1">
-					{ability.can("read", "Site") && (
-						<Button variant="outline" className="p-1 w-9 h-9 border-2 border-green-500 text-green-600 hover:text-green-600 hover:bg-green-100" asChild>
-							<Link prefetch={false} href={`/search?url=${site.url}`}>
+			render: (site) => {
+				const isDeleting = deletingIds.has(site.id) || Boolean(site.deletedAt);
+				const isCreating = Boolean(site.creating);
+				const locked = isDeleting || isCreating;
+				return (
+					<div className="flex gap-1.5 items-center py-1">
+						{ability.can("read", "Site") && (
+							<ActionLink href={`/search?url=${site.url}`} locked={locked} className="p-1 w-9 h-9 border-2 border-green-500 text-green-600 hover:text-green-600 hover:bg-green-100">
 								<Info strokeWidth={2.3} className="size-5" />
-							</Link>
-						</Button>
-					)}
-					{ability.can("update", "Site") && (
-						<Button variant="outline" className="p-1 w-9 h-9 border-2 border-blue-400 text-blue-600 hover:text-blue-600 hover:bg-blue-100" asChild>
-							<Link prefetch={false} href={`/sites/${site.id}/edit`}>
+							</ActionLink>
+						)}
+						{ability.can("update", "Site") && (
+							<ActionLink href={`/sites/${site.id}/edit`} locked={locked} className="p-1 w-9 h-9 border-2 border-blue-400 text-blue-600 hover:text-blue-600 hover:bg-blue-100">
 								<Pencil strokeWidth={2.3} className="size-5" />
-							</Link>
-						</Button>
-					)}
-					{ability.can("associate", "Tag") && (
-						<Button variant="outline" className="p-1 w-9 h-9 border-2 border-blue-400 text-blue-600 hover:text-blue-600 hover:bg-blue-100" asChild>
-							<Link prefetch={false} href={`/sites/${site.id}/tags`}>
+							</ActionLink>
+						)}
+						{ability.can("associate", "Tag") && (
+							<ActionLink href={`/sites/${site.id}/tags`} locked={locked} className="p-1 w-9 h-9 border-2 border-blue-400 text-blue-600 hover:text-blue-600 hover:bg-blue-100">
 								<Tags strokeWidth={2.3} className="size-5" />
-							</Link>
-						</Button>
-					)}
-					{ability.can("delete", "Site") && (
-						<DeleteDialog
-							icon={GlobeIcon}
-							displayName={site.url}
-							type="site"
-							onDelete={async () => {
-								await deleteSiteAction(site.id);
-								setSites((prev) => prev.filter((s) => s.id !== site.id));
-							}}
-						/>
-					)}
-				</div>
-			),
+							</ActionLink>
+						)}
+						{ability.can("delete", "Site") && (
+							<DeleteDialog
+								icon={GlobeIcon}
+								displayName={site.url}
+								type="site"
+								disabled={locked}
+								onDelete={async () => {
+									await deleteSiteAction(site.id);
+									setDeletingIds((prev) => new Set([...prev, site.id]));
+								}}
+							/>
+						)}
+					</div>
+				);
+			},
 		},
 	];
 

src/app/(root)/sites/[siteId]/edit/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { decode } from "html-entities";
-import { Info, Pencil, Plus, Tags, Trash2 } from "lucide-react";
+import { CircleCheck, Info, Loader2, Pencil, Plus, Tags, Trash2 } from "lucide-react";
 import moment from "moment";
 import "moment/locale/fr";
 import Link from "next/link";
@@ -13,14 +13,15 @@ import { OPTIONAL_CATEGORIES } from "@/constants/categories";
 import { INFRASTRUCTURES } from "@/constants/infrastructures";
 import { DEFAULT_LANGUAGE, LANGUAGES } from "@/constants/languages";
 import { THEMES } from "@/constants/theme";
+import { useServerEvents } from "@/hooks/useServerEvents";
 import { useZodErrorMessages } from "@/hooks/zod";
 import { getPersons, getUnits } from "@/services/api";
 import { getSiteLogsAction } from "@/services/logs";
 import { getSite, updateSiteAction } from "@/services/site";
 import type { FieldConfig, FormConfig, SectionConfig, SelectOption } from "@/types/form";
 import type { LogType } from "@/types/log";
 import type { ServiceResponse } from "@/types/response";
-import { isKubernetesSite, type Site, type SiteForm, siteSchema } from "@/types/site";
+import { isKubernetesSite, type Site, type SiteEvent, type SiteForm, siteSchema } from "@/types/site";
 
 const LOG_ACTION_CONFIG: Record<string, { color: string; icon: React.ComponentType<{ className?: string }> }> = {
 	create: { color: "#10b981", icon: Plus },
@@ -45,6 +46,7 @@ export default function SiteUpdatePage() {
 	const errorMessages = useZodErrorMessages();
 
 	const [site, setSite] = useState<Site | null>(null);
+	const [wasCreating, setWasCreating] = useState(false);
 	const [units, setUnits] = useState<SelectOption[]>([]);
 	const [persons, setPersons] = useState<SelectOption[]>([]);
 	const [loadings, setLoadings] = useState<{ [key: string]: boolean }>({});
@@ -57,13 +59,25 @@ export default function SiteUpdatePage() {
 
 	useEffect(() => {
 		getSite(siteId).then(({ site: data }) => {
-			if (data) setSite(data);
+			if (data) {
+				setSite(data);
+				if (data.creating) setWasCreating(true);
+			}
 		});
 		getSiteLogsAction(siteId).then(({ logs }) => {
 			setSiteLogs(logs.filter((l) => ["create", "update", "delete"].includes(l.data.action)).slice(0, 2));
 		});
 	}, [siteId]);
 
+	// Keep the lifecycle flags (`creating`/`deletedAt`/`managed`) in sync in real time without clobbering the form's loaded data.
+	useServerEvents<{ site: SiteEvent }>("/api/sites/events", {
+		site: (event) => {
+			if (event.id !== siteId || event.type === "deleted") return;
+			if (event.site.creating) setWasCreating(true);
+			setSite((prev) => (prev ? { ...prev, creating: event.site.creating, deletedAt: event.site.deletedAt, managed: event.site.managed } : event.site));
+		},
+	});
+
 	useEffect(() => {
 		const loadData = async () => {
 			setLoadings({ units: true, persons: true });
@@ -308,8 +322,27 @@ export default function SiteUpdatePage() {
 		<div className="w-full flex-1 flex flex-col h-full">
 			<div className="p-6 pb-4 shrink-0 mt-1">
 				<div className="flex items-start justify-between">
-					<div>
-						<h1 className="text-3xl font-bold">{translations.site("update.title")}</h1>
+					<div className="flex min-w-0 items-center gap-3">
+						{site && (
+							<h1 className="flex min-w-0 items-baseline gap-2 text-3xl font-bold">
+								<span className="font-normal text-muted-foreground">{site.creating ? translations.site("createPrefix") : translations.site("editPrefix")}</span>
+								<span className="text-muted-foreground">·</span>
+								<span className="truncate">{"title" in site && site.title ? decode(site.title) : site.url}</span>
+							</h1>
+						)}
+						{site?.creating ? (
+							<span className="inline-flex shrink-0 items-center gap-1.5 border border-blue-200 bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-600">
+								<Loader2 className="size-3.5 animate-spin" />
+								{translations.site("creating")}
+							</span>
+						) : (
+							wasCreating && (
+								<span className="inline-flex shrink-0 items-center gap-1.5 border border-green-200 bg-green-50 px-2.5 py-1 text-xs font-medium text-green-600">
+									<CircleCheck className="size-3.5" />
+									{translations.site("created")}
+								</span>
+							)
+						)}
 					</div>
 					<div className="flex gap-2">
 						<Button variant="outline" asChild>

src/app/api/sites/events/route.ts

@@ -0,0 +1,19 @@
+import type { NextRequest } from "next/server";
+import { watchKubernetesSites } from "@/lib/kubernetes";
+import { createSSEStream } from "@/lib/sse";
+import { auth } from "@/services/auth";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request: NextRequest) {
+	const session = await auth();
+	if (!session?.user) return new Response("Unauthorized", { status: 401 });
+
+	return createSSEStream(request, async (connection) => {
+		const watch = await watchKubernetesSites(
+			(event) => connection.send("site", event),
+			() => connection.close(),
+		);
+		return () => watch.abort();
+	});
+}