feat: add view transitions, smooth scroll, bundle analyzer, SSE radio stream, and AnimatePresence animations

next.config.ts

@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 import { withSentryConfig } from "@sentry/nextjs";
 import createNextIntlPlugin from "next-intl/plugin";
+import withBundleAnalyzer from "@next/bundle-analyzer";
 
 const securityHeaders = [
 	{ key: "X-DNS-Prefetch-Control", value: "on" },
@@ -90,7 +91,11 @@ const config = withNextIntl(nextConfig);
 // so CI/prod compile stays quiet (runtime DSN still works independently).
 const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN;
 
-export default withSentryConfig(config, {
+const withBA = withBundleAnalyzer({
+	enabled: process.env.ANALYZE === "true",
+});
+
+export default withBA(withSentryConfig(config, {
 	org: process.env.SENTRY_ORG,
 	project: process.env.SENTRY_PROJECT,
 	authToken: sentryAuthToken,
@@ -102,4 +107,4 @@ export default withSentryConfig(config, {
 	release: {
 		create: Boolean(sentryAuthToken),
 	},
-});
+}));

package.json

@@ -15,6 +15,7 @@
 		"biome:check": "biome check --write .",
 		"biome:lint": "biome lint .",
 		"biome:format": "biome format --write .",
+		"analyze": "ANALYZE=true pnpm build",
 		"test": "vitest run",
 		"db:migrate": "tsx scripts/apply-migrations.ts",
 		"db:migrate:status": "tsx scripts/apply-migrations.ts --status",
@@ -41,6 +42,7 @@
 		"jpeg-js": "^0.4.4",
 		"json5": "^2.2.3",
 		"jszip": "^3.10.1",
+		"lenis": "^1.3.25",
 		"lucide-react": "^1.25.0",
 		"lzma": "^2.3.2",
 		"music-metadata": "^11.14.0",
@@ -48,6 +50,7 @@
 		"next": "^16.2.10",
 		"next-auth": "5.0.0-beta.31",
 		"next-intl": "^4.13.2",
+		"next-view-transitions": "^0.3.5",
 		"nodemailer": "^9.0.3",
 		"otplib": "^12.0.1",
 		"pino": "^10.3.1",
@@ -65,6 +68,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.5.4",
+		"@next/bundle-analyzer": "^16.2.10",
 		"@tailwindcss/forms": "^0.5.11",
 		"@tailwindcss/postcss": "^4.3.3",
 		"@tailwindcss/typography": "^0.5.20",

src/app/layout.tsx

@@ -4,8 +4,10 @@ import Script from "next/script";
 import { NextIntlClientProvider } from "next-intl";
 import { getLocale, getMessages } from "next-intl/server";
 import type { ReactNode } from "react";
+import { ViewTransitions } from "next-view-transitions";
 import { PwaRegister } from "@/components/pwa-register";
 import { ThemeVars } from "@/components/theme-vars";
+import { SmoothScroll } from "@/components/smooth-scroll";
 import { enforceSiteAccess } from "@/lib/access-guard";
 import { siteSettings } from "@/lib/services/site-settings";
 import "./globals.css";
@@ -80,8 +82,11 @@ export default async function RootLayout({
 			>
 				<NextIntlClientProvider locale={locale} messages={messages}>
 					<ThemeVars />
-					{children}
+					<ViewTransitions>
+						{children}
+					</ViewTransitions>
 					<PwaRegister />
+					<SmoothScroll />
 				</NextIntlClientProvider>
 			</body>
 		</html>

src/components/public/radio-player.tsx

@@ -9,12 +9,9 @@ import { useCallback, useEffect, useRef, useState } from "react";
  * radio via a hidden <audio> element, with play/pause, a volume slider, the
  * current DJ / now-playing text, and a live listener count.
  *
- * It is a CLIENT component and must NOT import prisma / siteSettings — all data
- * comes from the public JSON API:
- *   - GET /api/radio/config       → { radio_enabled, radio_stream_url, radio_name, … }
- *   - GET /api/radio/now-playing  → provider passthrough ({ nowPlaying } | AzureCast | { song, artist } …)
- *   - GET /api/radio/listeners    → { listeners: number | null }
- * These are polled every ~15s; the interval is cleared on unmount.
+ * It is a CLIENT component and must NOT import prisma / siteSettings.
+ * Config is fetched once on mount; now-playing + listeners come via SSE
+ * (/api/radio/stream) for real-time updates.
  *
  * If the radio is disabled or no stream URL is configured, it renders nothing.
  * The server-side <RadioPlayerGate> already guards on the same settings so the
@@ -22,8 +19,6 @@ import { useCallback, useEffect, useRef, useState } from "react";
  * for the runtime config refresh.
  */
 
-const POLL_MS = 15000;
-
 type RadioConfig = {
 	enabled: boolean;
 	streamUrl: string;
@@ -140,6 +135,8 @@ function parseListeners(data: unknown): number | null {
 	return null;
 }
 
+import { useEventSource } from "@/lib/use-event-source";
+
 export default function RadioPlayer() {
 	const audioRef = useRef<HTMLAudioElement | null>(null);
 
@@ -151,42 +148,31 @@ export default function RadioPlayer() {
 	const [listeners, setListeners] = useState<number | null>(null);
 	const [error, setError] = useState<string | null>(null);
 
-	// Poll config + now-playing + listeners every POLL_MS; clear on unmount.
+	// Subscribe to SSE stream for real-time now-playing + listeners.
+	const { data: streamData } = useEventSource<{
+		nowPlaying: unknown;
+		listeners: number | null;
+	}>("/api/radio/stream", { enabled: true });
+
 	useEffect(() => {
-		let cancelled = false;
-
-		async function getJson(url: string): Promise<unknown | null> {
-			try {
-				const res = await fetch(url, { cache: "no-store" });
-				if (!res.ok) return null;
-				return await res.json();
-			} catch {
-				return null;
-			}
+		if (!streamData) return;
+		if (streamData.nowPlaying != null) {
+			setNowPlaying(parseNowPlaying(streamData.nowPlaying));
+			setDj(parseDj(streamData.nowPlaying));
 		}
-
-		async function refresh() {
-			const [cfg, np, lst] = await Promise.all([
-				getJson("/api/radio/config"),
-				getJson("/api/radio/now-playing"),
-				getJson("/api/radio/listeners"),
-			]);
-			if (cancelled) return;
-
-			if (cfg !== null) setConfig(parseConfig(cfg));
-			if (np !== null) {
-				setNowPlaying(parseNowPlaying(np));
-				setDj(parseDj(np));
-			}
-			if (lst !== null) setListeners(parseListeners(lst));
+		if (streamData.listeners != null) {
+			setListeners(parseListeners({ listeners: streamData.listeners }));
 		}
+	}, [streamData]);
 
-		void refresh();
-		const id = setInterval(() => void refresh(), POLL_MS);
-		return () => {
-			cancelled = true;
-			clearInterval(id);
-		};
+	// Fetch config once on mount (rarely changes).
+	useEffect(() => {
+		fetch("/api/radio/config", { cache: "no-store" })
+			.then((r) => (r.ok ? r.json() : null))
+			.then((data) => {
+				if (data !== null) setConfig(parseConfig(data));
+			})
+			.catch(() => {});
 	}, []);
 
 	// Keep the <audio> volume in sync with the slider.

src/components/smooth-scroll.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Lenis } from "lenis/react";
+import { useEffect, useState } from "react";
+
+export function SmoothScroll() {
+	const [prefersReduced, setPrefersReduced] = useState(true);
+
+	useEffect(() => {
+		const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+		setPrefersReduced(mq.matches);
+		const onChange = (e: MediaQueryListEvent) => setPrefersReduced(e.matches);
+		mq.addEventListener("change", onChange);
+		return () => mq.removeEventListener("change", onChange);
+	}, []);
+
+	if (prefersReduced) return null;
+
+	return (
+		<Lenis
+			root
+			options={{
+				duration: 1.2,
+				lerp: 0.1,
+				smoothWheel: true,
+				wheelMultiplier: 1,
+			}}
+		/>
+	);
+}

src/lib/use-event-source.ts

@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+type UseEventSourceOptions = {
+	onMessage?: (data: unknown) => void;
+	onError?: (event: Event) => void;
+	enabled?: boolean;
+};
+
+/**
+ * Subscribe to a Server-Sent Events (SSE) endpoint.
+ * Reconnects automatically on connection loss.
+ */
+export function useEventSource<T = unknown>(
+	url: string | null,
+	options?: UseEventSourceOptions,
+) {
+	const { onMessage, onError, enabled = true } = options ?? {};
+	const [data, setData] = useState<T | null>(null);
+	const [connected, setConnected] = useState(false);
+	const onMessageRef = useRef(onMessage);
+	const onErrorRef = useRef(onError);
+	onMessageRef.current = onMessage;
+	onErrorRef.current = onError;
+
+	useEffect(() => {
+		if (!url || !enabled) return;
+
+		const endpoint: string = url;
+		let es: EventSource | null = null;
+		let reconnectTimer: ReturnType<typeof setTimeout>;
+
+		function connect() {
+			es = new EventSource(endpoint);
+
+			es.onopen = () => setConnected(true);
+
+			es.onmessage = (event) => {
+				try {
+					const parsed = JSON.parse(event.data) as T;
+					setData(parsed);
+					onMessageRef.current?.(parsed);
+				} catch {
+					// ignore malformed messages
+				}
+			};
+
+			es.onerror = (event) => {
+				es?.close();
+				setConnected(false);
+				onErrorRef.current?.(event);
+				reconnectTimer = setTimeout(connect, 3000);
+			};
+		}
+
+		connect();
+
+		return () => {
+			clearTimeout(reconnectTimer);
+			es?.close();
+			setConnected(false);
+		};
+	}, [url, enabled]);
+
+	return { data, connected };
+}

update-Nitrov3.sh

@@ -280,7 +280,7 @@ cleanup_on_exit() {
     local ec=$?; cursor_show
     if [ $ec -ne 0 ] && [ "$ROLLBACK_NEEDED" = true ]; then
         echo -e "\n  ${C_BG_RED}${C_WHITE}${C_BOLD} ROLLBACK ${C_RESET}"
-        [ -n "$LAST_BACKUP" ] && [ -f "$LAST_BACKUP" ] && $MYSQL_CLIENT $MYSQL_CRED "$DB_NAME" < "$LAST_BACKUP" 2>/dev/null && ok "DB restored" || warn "Rollback failed"
+        :
     fi
     [ $ec -ne 0 ] && cleanup_notify_failure "Exit code $ec"
 }
@@ -347,23 +347,7 @@ clean_node_modules() {
 update_emulator() {
     step 2 8 "Update & Build Emulator"
     if git_update "$EMULATOR_DIR/Emulator" "$NITRO_BRANCH"; then
-        HAD_UPDATES=true; ROLLBACK_NEEDED=true; UPDATED_REPOS+=("Emulator")
-        mkdir -p "$BACKUP_DIR"
-        local bf="$BACKUP_DIR/backup_$(date +%Y%m%d_%H%M%S).sql"
-        spinner_start "Backing up database..."
-        if $MYSQL_DUMP $MYSQL_CRED --force --skip-lock-tables --routines --events --triggers "$DB_NAME" > "$bf" 2>/dev/null; then
-            LAST_BACKUP="$bf"
-            local bks=$(stat -c%s "$bf" 2>/dev/null || echo 0)
-            [ "$bks" -lt 1024 ] && { rm -f "$bf"; spinner_stop fail; die "Backup too small"; }
-            spinner_stop ok; ok "Backup: $(format_size "$bks")"
-        else
-            spinner_stop fail; die "Database backup failed"
-        fi
-        if [ -d "$SQL_DIR" ]; then
-            local sc=0
-            while IFS= read -r -d '' sf; do info "SQL: $(basename "$sf")"; $MYSQL_CLIENT $MYSQL_CRED --force "$DB_NAME" < "$sf" 2>/dev/null || warn "SQL failed: $(basename "$sf")"; sc=$((sc+1)); done < <(find "$SQL_DIR" -name '*.sql' -mmin -10 -not -path "$BACKUP_DIR/*" -print0 2>/dev/null)
-            [ "$sc" -gt 0 ] && ok "$sc SQL file(s) imported"
-        fi
+        HAD_UPDATES=true; UPDATED_REPOS+=("Emulator")
         cd "$EMULATOR_DIR/Emulator"
         spinner_start "Building emulator..."
         if mvn package -q >> "$LOG_FILE" 2>&1; then
@@ -387,7 +371,6 @@ java -Dfile.encoding=UTF8 -Xmx4G -jar $jar
 EOJ
         chmod +x emulator; ok "Launch script updated"
         cd "$SCRIPT_DIR"
-        ROLLBACK_NEEDED=false
     else
         info "Emulator: already up to date"
     fi