Merge branch 'staging' of https://github.com/VAR-Virtual-Air-Rescue/var-monorepo into staging

apps/dispatch/app/(app)/dispatch/_components/navbar/Navbar.tsx

@@ -7,14 +7,22 @@ import AdminPanel from "_components/navbar/AdminPanel";
 import { getServerSession } from "api/auth/[...nextauth]/auth";
 import { WarningAlert } from "_components/navbar/PageAlert";
 import { Radar } from "lucide-react";
+import { ChangelogWrapper } from "_components/navbar/ChangelogWrapper";
+import { prisma } from "@repo/db";
 
 export default async function Navbar() {
 	const session = await getServerSession();
+	const latestChangelog = await prisma.changelog.findFirst({
+		orderBy: {
+			createdAt: "desc",
+		},
+	});
 
 	return (
 		<div className="navbar bg-base-100 flex justify-between gap-5 shadow-sm">
 			<div className="flex items-center gap-2">
-				<p className="text-xl font-semibold normal-case">VAR Leitstelle V2</p>
+				<p className="text-xl font-semibold normal-case">VAR Leitstelle</p>
+				<ChangelogWrapper latestChangelog={latestChangelog} />
 				{session?.user.permissions.includes("ADMIN_KICK") && <AdminPanel />}
 			</div>
 			<WarningAlert />

apps/dispatch/app/(app)/pilot/_components/navbar/Navbar.tsx

@@ -5,12 +5,20 @@ import Link from "next/link";
 import { Settings } from "./_components/Settings";
 import { WarningAlert } from "_components/navbar/PageAlert";
 import { Radar } from "lucide-react";
+import { prisma } from "@repo/db";
+import { ChangelogWrapper } from "_components/navbar/ChangelogWrapper";
 
-export default function Navbar() {
+export default async function Navbar() {
+	const latestChangelog = await prisma.changelog.findFirst({
+		orderBy: {
+			createdAt: "desc",
+		},
+	});
 	return (
 		<div className="navbar bg-base-100 flex justify-between gap-5 shadow-sm">
 			<div className="flex items-center gap-2">
 				<p className="text-xl font-semibold normal-case">VAR Operations Center</p>
+				<ChangelogWrapper latestChangelog={latestChangelog} />
 			</div>
 			<WarningAlert />
 			<div className="flex items-center gap-5">

apps/dispatch/app/(app)/pilot/page.tsx

@@ -33,20 +33,20 @@ const PilotPage = () => {
 		<div className="ease relative flex h-screen w-full flex-1 overflow-hidden transition-all duration-500">
 			{/* <MapToastCard2 /> */}
 			<div className="relative flex h-full w-full flex-1">
-				<div className="z-999999 absolute left-0 top-1/2 flex -translate-y-1/2 transform flex-col space-y-2 pl-4">
+				<div className="absolute left-0 top-1/2 z-20 flex -translate-y-1/2 transform flex-col space-y-2 pl-4">
 					<Chat />
 					<Report />
 					<BugReport />
 				</div>
 				<div className="flex h-full w-2/3">
 					<div className="relative flex h-full flex-1">
-						<div className="top-19/20 z-999999 absolute left-0 -translate-y-1/2 transform pl-4">
+						<div className="top-19/20 absolute left-0 z-20 -translate-y-1/2 transform pl-4">
 							<div className="flex items-center justify-between gap-4">
 								<SettingsBoard />
 							</div>
 						</div>
 						<Map />
-						<div className="z-99999 absolute right-10 top-5 space-y-2">
+						<div className="absolute right-10 top-5 z-20 space-y-2">
 							{!simulatorConnected && status === "connected" && (
 								<SimConnectionAlert lastUpdated={ownAircraft?.lastHeartbeat} />
 							)}

apps/dispatch/app/_components/SmartPopup.tsx

@@ -113,7 +113,6 @@ export const SmartPopup = (
 	);
 
 	const handleConflict = useCallback(() => {
-		console.log("handleConflict in smartMarker", id, options);
 		const newAnchor = calculateAnchor(id, "popup", options);
 		setAnchor(newAnchor);
 	}, [id, options]);

apps/dispatch/app/_components/map/Map.tsx

@@ -37,7 +37,7 @@ const Map = () => {
 	return (
 		<MapContainer
 			ref={ref}
-			className="flex-1 bg-base-200"
+			className="bg-base-200 z-10 flex-1"
 			center={map.center}
 			zoom={map.zoom}
 			fadeAnimation={false}

apps/dispatch/app/_components/navbar/ChangelogWrapper.tsx

@@ -0,0 +1,34 @@
+"use client";
+import { Changelog } from "@repo/db";
+import { ChangelogModalBtn } from "@repo/shared-components";
+import { useMutation } from "@tanstack/react-query";
+import { editUserAPI } from "_querys/user";
+import { useSession } from "next-auth/react";
+import toast from "react-hot-toast";
+
+export const ChangelogWrapper = ({ latestChangelog }: { latestChangelog: Changelog | null }) => {
+	const { data: session } = useSession();
+	const editUserMutation = useMutation({
+		mutationFn: editUserAPI,
+	});
+
+	const autoOpen = !session?.user.changelogAck && !!latestChangelog;
+
+	if (!latestChangelog) return null;
+	if (!session) return null;
+
+	return (
+		<ChangelogModalBtn
+			hideIcon
+			className="text-sm text-gray-500"
+			latestChangelog={latestChangelog}
+			autoOpen={autoOpen}
+			onClose={async () => {
+				await editUserMutation.mutateAsync({ id: session?.user.id, user: { changelogAck: true } });
+				if (!session?.user.changelogAck) {
+					toast.success("Changelog als gelesen markiert");
+				}
+			}}
+		/>
+	);
+};

apps/dispatch/app/tracker/_components/ConnectedDispatcher.tsx

@@ -23,14 +23,14 @@ export const ConnectedDispatcher = () => {
 
 	return (
 		<div className="min-w-120">
-			<div className="collapse collapse-arrow bg-base-100 border-base-300 border">
+			<div className="collapse-arrow bg-base-100 border-base-300 collapse border">
 				<input type="checkbox" />
 				{/* <div className="collapse-title font-semibold">Kein Disponent Online</div> */}
-				<div className="collapse-title font-semibold flex items-center justify-between">
+				<div className="collapse-title flex items-center justify-between font-semibold">
 					<span>
 						{connections} {connections == 1 ? "Verbundenes Mitglied" : "Verbundene Mitglieder"}
 					</span>
-					<div className="gap-2 flex items-center">
+					<div className="flex items-center gap-2">
 						<div
 							className={`badge badge-outline ${
 								(dispatcher?.length || 0) > 0 ? "badge-success" : "badge-error"
@@ -65,7 +65,7 @@ export const ConnectedDispatcher = () => {
 												className="tooltip tooltip-right"
 												data-tip={`vorraussichtliche Abmeldung in ${formatDistance(new Date(), new Date(d.esimatedLogoutTime), { locale: de })}`}
 											>
-												<p className="text-gray-500 font-thin ">
+												<p className="font-thin text-gray-500">
 													{new Date(d.esimatedLogoutTime).toLocaleTimeString([], {
 														hour: "2-digit",
 														minute: "2-digit",
@@ -76,7 +76,7 @@ export const ConnectedDispatcher = () => {
 									</div>
 									<div>
 										<div>{asPublicUser(d.publicUser).fullName}</div>
-										<div className="text-xs uppercase font-semibold opacity-60">{d.zone}</div>
+										<div className="text-xs font-semibold uppercase opacity-60">{d.zone}</div>
 									</div>
 									<div>
 										{(() => {