chore: add ripple effect

frontend/src/container/MySettings/MySettings.styles.scss

@@ -153,3 +153,18 @@
 
 	border-radius: 3px;
 }
+
+// Disable default fade so the JS-driven clip-path ripple isn't crossfaded.
+::view-transition-old(root),
+::view-transition-new(root) {
+	animation: none;
+	mix-blend-mode: normal;
+}
+
+::view-transition-old(root) {
+	z-index: 1;
+}
+
+::view-transition-new(root) {
+	z-index: 2;
+}

frontend/src/container/MySettings/index.tsx

@@ -15,6 +15,11 @@ import { UserPreference } from 'types/api/preferences/preference';
 import { showErrorNotification } from 'utils/error';
 
 import LicenseSection from './LicenseSection';
+import {
+	canAnimateThemeRipple,
+	getRippleOrigin,
+	runThemeRipple,
+} from './themeRipple';
 import TimezoneAdaptation from './TimezoneAdaptation/TimezoneAdaptation';
 import UserInfo from './UserInfo';
 
@@ -88,22 +93,35 @@ function MySettings(): JSX.Element {
 		return isDarkMode ? 'dark' : 'light';
 	});
 
-	const handleThemeChange = ({ target: { value } }: RadioChangeEvent): void => {
-		logEvent('Account Settings: Theme Changed', {
-			theme: value,
-		});
-		setTheme(value);
+	const handleThemeChange = (event: RadioChangeEvent): void => {
+		const { value } = event.target;
+		logEvent('Account Settings: Theme Changed', { theme: value });
 
-		if (value === 'auto') {
-			setAutoSwitch(true);
-		} else {
+		const willFlipDarkMode =
+			value !== 'auto' && (value === 'dark') !== isDarkMode;
+
+		const applyChange = (): void => {
+			setTheme(value);
+			if (value === 'auto') {
+				setAutoSwitch(true);
+				return;
+			}
 			setAutoSwitch(false);
-			// Only toggle if the current theme is different from the target
-			const targetIsDark = value === 'dark';
-			if (targetIsDark !== isDarkMode) {
+			if (willFlipDarkMode) {
 				toggleTheme();
 			}
+		};
+
+		// Only ripple on a real dark↔light flip, and only when the browser
+		// supports View Transitions and the user hasn't opted out of motion.
+		if (!willFlipDarkMode || !canAnimateThemeRipple()) {
+			applyChange();
+			return;
 		}
+
+		const clickedTarget = event.nativeEvent?.target as HTMLElement | null;
+		const clickedButton = clickedTarget?.closest('.ant-radio-button-wrapper');
+		runThemeRipple(getRippleOrigin(clickedButton), applyChange);
 	};
 
 	useEffect(() => {
@@ -143,7 +161,7 @@ function MySettings(): JSX.Element {
 				value: checked,
 			},
 			{
-				onError: (error) => {
+				onError: (error: unknown) => {
 					// Revert the state if the API call fails
 					setSideNavPinned(!checked);
 					updateUserPreferenceInContext({

frontend/src/container/MySettings/themeRipple.ts

@@ -0,0 +1,76 @@
+import { flushSync } from 'react-dom';
+
+const RIPPLE_DURATION_MS = 500;
+const RIPPLE_EASING = 'ease-in-out';
+
+type ViewTransition = { ready: Promise<void> };
+type DocumentWithVT = Document & {
+	startViewTransition?: (callback: () => void) => ViewTransition;
+};
+
+export type RippleOrigin = { x: number; y: number };
+
+export function getRippleOrigin(
+	element: Element | null | undefined,
+): RippleOrigin {
+	const rect = element?.getBoundingClientRect();
+	if (!rect) {
+		return { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+	}
+	return {
+		x: rect.left + rect.width / 2,
+		y: rect.top + rect.height / 2,
+	};
+}
+
+export function canAnimateThemeRipple(): boolean {
+	const doc = document as DocumentWithVT;
+	if (typeof doc.startViewTransition !== 'function') {
+		return false;
+	}
+	return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+// Runs `applyChange` inside a View Transition and grows a circular clip-path
+// from `origin` until it covers the viewport. Callers should gate on
+// canAnimateThemeRipple() first; this is a safe no-animation fallback otherwise.
+export function runThemeRipple(
+	origin: RippleOrigin,
+	applyChange: () => void,
+): void {
+	const doc = document as DocumentWithVT;
+	if (!doc.startViewTransition) {
+		applyChange();
+		return;
+	}
+
+	const transition = doc.startViewTransition(() => {
+		flushSync(applyChange);
+	});
+
+	const endRadius = distanceToFurthestCorner(origin);
+	const fromCircle = `circle(0px at ${origin.x}px ${origin.y}px)`;
+	const toCircle = `circle(${endRadius}px at ${origin.x}px ${origin.y}px)`;
+
+	transition.ready
+		.then(() => {
+			document.documentElement.animate(
+				{ clipPath: [fromCircle, toCircle] },
+				{
+					duration: RIPPLE_DURATION_MS,
+					easing: RIPPLE_EASING,
+					pseudoElement: '::view-transition-new(root)',
+				},
+			);
+		})
+		.catch(() => {
+			// Transition cancelled — applyChange has already run, so nothing to do.
+		});
+}
+
+function distanceToFurthestCorner({ x, y }: RippleOrigin): number {
+	return Math.hypot(
+		Math.max(x, window.innerWidth - x),
+		Math.max(y, window.innerHeight - y),
+	);
+}