feat(ui): animate navigation and operation icons

src/shared/lib/bind-icon-animation.ts

@@ -0,0 +1,68 @@
+// React ref cleanup keeps native animation lifetimes tied to the mounted icon.
+const bindIconAnimation = (icon: SVGSVGElement | null) => {
+	if (!icon) return;
+	const target = icon.closest<HTMLElement>("a, button") ?? icon.parentElement;
+	if (!target) return;
+	let hovered = false;
+	let focused = false;
+	let running = false;
+	let disposed = false;
+
+	const release = () => {
+		if (!running && !hovered && !focused) {
+			icon.removeAttribute("data-icon-animating");
+		}
+	};
+	const start = () => {
+		if (icon.hasAttribute("data-icon-animating")) return;
+		icon.setAttribute("data-icon-animating", "");
+		running = true;
+		// Includes staggered/delayed children and finite iterations, without timers.
+		const animations = icon.getAnimations({ subtree: true });
+		void Promise.allSettled(
+			animations.map((animation) => animation.finished),
+		).then(() => {
+			if (disposed) return;
+			running = false;
+			release();
+		});
+	};
+	const enter = () => {
+		if (!window.matchMedia("(hover: hover)").matches) return;
+		hovered = true;
+		start();
+	};
+	const leave = () => {
+		hovered = false;
+		release();
+	};
+	const focus = () => {
+		focused =
+			target.matches(":focus-visible") ||
+			!!target.querySelector(":focus-visible");
+		if (focused) start();
+	};
+	const blur = (event: FocusEvent) => {
+		if (
+			event.relatedTarget instanceof Node &&
+			target.contains(event.relatedTarget)
+		)
+			return;
+		focused = false;
+		release();
+	};
+	target.addEventListener("mouseenter", enter);
+	target.addEventListener("mouseleave", leave);
+	target.addEventListener("focusin", focus);
+	target.addEventListener("focusout", blur);
+	return () => {
+		disposed = true;
+		target.removeEventListener("mouseenter", enter);
+		target.removeEventListener("mouseleave", leave);
+		target.removeEventListener("focusin", focus);
+		target.removeEventListener("focusout", blur);
+		icon.removeAttribute("data-icon-animating");
+	};
+};
+
+export { bindIconAnimation };