Function Announcement

webview-ui/src/components/chat/Announcement.tsx:25–80

({ hideAnnouncement }: AnnouncementProps)

 */

const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
	const { t } = useAppTranslation()
	const [open, setOpen] = useState(true)

	return (
		<Dialog
			open={open}
			onOpenChange={(open) => {
				setOpen(open)

				if (!open) {
					hideAnnouncement()
				}
			}}>
			<DialogContent>
				<DialogHeader>
					<DialogTitle>{t("chat:announcement.title", { version: Package.version })}</DialogTitle>
				</DialogHeader>
				<div>
					<div className="mb-4">
						<p className="mb-3">{t("chat:announcement.release.heading")}</p>
						<ul className="list-disc list-inside text-sm space-y-1.5">
							<li>{t("chat:announcement.release.highlight1")}</li>
							<li>{t("chat:announcement.release.highlight2")}</li>
							<li>{t("chat:announcement.release.highlight3")}</li>
						</ul>
					</div>

					<div className="mt-4 text-sm text-center text-vscode-descriptionForeground">
						<div className="flex items-center justify-center gap-4">
							<SocialLink
								icon={<SiX className="w-4 h-4" aria-hidden />}
								label="X"
								href="https://x.com/ZooCodeDev"
							/>
							<SocialLink
								icon={<SiDiscord className="w-4 h-4" aria-hidden />}
								label="Discord"
								href="https://discord.gg/VxfP4Vx3gX"
							/>
							<SocialLink
								icon={<SiReddit className="w-4 h-4" aria-hidden />}
								label="Reddit"
								href="https://www.reddit.com/r/ZooCode/"
							/>
						</div>
					</div>

					<div className="mt-3 text-sm text-center text-vscode-descriptionForeground">
						<Trans i18nKey="chat:announcement.support" components={{ githubLink: <GitHubLink /> }} />
					</div>
				</div>
			</DialogContent>
		</Dialog>
	)
}

const SocialLink = ({ icon, label, href }: { icon: ReactNode; label: string; href: string }) => (