Improved Changelog, Changelog in Dispatch

packages/shared-components/components/Changelog.tsx

@@ -0,0 +1,102 @@
+"use client";
+import { useState } from "react";
+import { Button, cn } from "@repo/shared-components";
+import MDEditor from "@uiw/react-md-editor";
+import { RefreshCw } from "lucide-react";
+import { Changelog } from "@repo/db";
+
+export const ChangelogModal = ({
+	latestChangelog,
+	isOpen,
+	onClose,
+}: {
+	latestChangelog: Changelog;
+	isOpen: boolean;
+	onClose: () => void;
+}) => {
+	return (
+		<dialog open={isOpen} className="modal p-4">
+			<div className="modal-box max-h-11/12 w-11/12 max-w-2xl overflow-y-auto">
+				<form method="dialog">
+					<button
+						className="btn btn-sm btn-circle btn-ghost absolute right-3 top-3"
+						onClick={onClose}
+					>
+						✕
+					</button>
+				</form>
+				<h3 className="flex items-center gap-2 text-lg font-bold">
+					<span className="text-primary">{latestChangelog.title}</span> ist nun Verfügbar!
+				</h3>
+
+				<div className="flex flex-col items-center">
+					{latestChangelog.previewImage && (
+						<img
+							src={latestChangelog.previewImage}
+							alt="Preview"
+							className="mt-4 h-auto w-full object-cover"
+						/>
+					)}
+				</div>
+
+				<div className="text-base-content/80 mb-2 mt-4 text-left">
+					<MDEditor.Markdown
+						source={latestChangelog.text}
+						style={{
+							backgroundColor: "transparent",
+						}}
+					/>
+				</div>
+
+				<div className="modal-action">
+					<Button className="btn btn-info btn-outline" onClick={onClose}>
+						Weiter zum HUB
+					</Button>
+				</div>
+			</div>
+			<label className="modal-backdrop" htmlFor="changelogModalToggle">
+				Close
+			</label>
+		</dialog>
+	);
+};
+
+export const ChangelogModalBtn = ({
+	latestChangelog,
+	autoOpen,
+	onClose,
+	className = "",
+	hideIcon = false,
+}: {
+	latestChangelog: Changelog | null | undefined;
+	autoOpen: boolean;
+	onClose?: () => void;
+	className?: string;
+	hideIcon?: boolean;
+}) => {
+	const [isOpen, setIsOpen] = useState(autoOpen);
+
+	if (!latestChangelog) return null;
+
+	return (
+		<>
+			<a
+				href="#!"
+				className={cn("hover:text-primary flex items-center gap-1", className)}
+				onClick={() => setIsOpen(true)}
+			>
+				{!hideIcon && <RefreshCw size={12} />} {latestChangelog.title}
+			</a>
+			<ChangelogModal
+				latestChangelog={latestChangelog}
+				isOpen={isOpen}
+				onClose={() => {
+					setIsOpen(false);
+					if (onClose) {
+						onClose();
+					}
+				}}
+			/>
+		</>
+	);
+};

packages/shared-components/components/index.ts

@@ -2,3 +2,4 @@ export * from "./Badge";
 export * from "./PenaltyDropdown";
 export * from "./Maintenance";
 export * from "./Button";
+export * from "./Changelog";

packages/shared-components/package.json

@@ -10,8 +10,10 @@
 		"@repo/db": "workspace:*",
 		"@repo/typescript-config": "workspace:*",
 		"@types/node": "^22.15.29",
+		"@uiw/react-md-editor": "^4.0.8",
 		"clsx": "^2.1.1",
 		"date-fns": "^4.1.0",
+		"lucide-react": "^0.525.0",
 		"tailwind-merge": "^3.3.1"
 	},
 	"devDependencies": {