Merge pull request #389 from GCWing/fix/web-ui-announcement-eslint

fix(web-ui): ESLint errors in announcement components (CI)

Author: GCWing

src/web-ui/src/shared/announcement-system/components/FeatureModalPage.tsx

@@ -91,7 +91,6 @@ const FeatureModalPage: React.FC<Props> = ({ page, active }) => {
         <div className="feature-modal-page__rule" aria-hidden />
         <div
           className="feature-modal-page__body"
-          // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{ __html: renderBody(page.body) }}
         />
       </div>

src/web-ui/src/shared/announcement-system/components/MediaRenderer.tsx

@@ -7,6 +7,59 @@ interface Props {
   active: boolean;
 }
 
+interface LottieProps {
+  src: string;
+  active: boolean;
+}
+
+const LottieRenderer: React.FC<LottieProps> = ({ src, active }) => {
+  const [LottieComponent, setLottieComponent] =
+    React.useState<React.ComponentType<any> | null>(null);
+  const [loadError, setLoadError] = React.useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    const pkg = '@lottiefiles/dotlottie-react';
+    import(/* @vite-ignore */ pkg)
+      .then((mod: any) => {
+        if (!cancelled) setLottieComponent(() => mod.DotLottieReact ?? mod.default);
+      })
+      .catch(() => {
+        if (!cancelled) setLoadError(true);
+      });
+    return () => { cancelled = true; };
+  }, []);
+
+  if (loadError) {
+    return (
+      <div className="announcement-media">
+        <div className="announcement-media__placeholder">
+          Lottie library not available
+        </div>
+      </div>
+    );
+  }
+
+  if (!LottieComponent) {
+    return (
+      <div className="announcement-media">
+        <div className="announcement-media__placeholder">Loading…</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="announcement-media">
+      <LottieComponent
+        src={src}
+        autoplay={active}
+        loop
+        style={{ width: '100%', height: '100%' }}
+      />
+    </div>
+  );
+};
+
 /**
  * Renders a media asset inside a modal page.
  *
@@ -68,61 +121,4 @@ const MediaRenderer: React.FC<Props> = ({ media, active }) => {
   );
 };
 
-// ─── Lazy Lottie renderer ─────────────────────────────────────────────────────
-
-interface LottieProps {
-  src: string;
-  active: boolean;
-}
-
-const LottieRenderer: React.FC<LottieProps> = ({ src, active }) => {
-  const [LottieComponent, setLottieComponent] =
-    React.useState<React.ComponentType<any> | null>(null);
-  const [loadError, setLoadError] = React.useState(false);
-
-  useEffect(() => {
-    let cancelled = false;
-    // Dynamically resolve the Lottie package name to avoid a hard static
-    // dependency when the package is not yet installed.
-    const pkg = '@lottiefiles/dotlottie-react';
-    import(/* @vite-ignore */ pkg)
-      .then((mod: any) => {
-        if (!cancelled) setLottieComponent(() => mod.DotLottieReact ?? mod.default);
-      })
-      .catch(() => {
-        if (!cancelled) setLoadError(true);
-      });
-    return () => { cancelled = true; };
-  }, []);
-
-  if (loadError) {
-    return (
-      <div className="announcement-media">
-        <div className="announcement-media__placeholder">
-          Lottie library not available
-        </div>
-      </div>
-    );
-  }
-
-  if (!LottieComponent) {
-    return (
-      <div className="announcement-media">
-        <div className="announcement-media__placeholder">Loading…</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="announcement-media">
-      <LottieComponent
-        src={src}
-        autoplay={active}
-        loop
-        style={{ width: '100%', height: '100%' }}
-      />
-    </div>
-  );
-};
-
 export default MediaRenderer;