Build Analyzer: Highlight when section/card active

app/routes/analyzer.tsx

@@ -48,6 +48,7 @@ import {
   subWeaponImageUrl,
 } from "~/utils/urls";
 import { getAbilityChunksMapAsArray } from "~/modules/analyzer/abilityChunksCalc";
+import clsx from "clsx";
 
 export const CURRENT_PATCH = "1.2";
 
@@ -503,6 +504,12 @@ export default function BuildAnalyzerPage() {
               title={t("analyzer:stat.category.actionsPerInkTank")}
               containerClassName="analyzer__table-container"
             >
+              {/** Hack the :has ;) */}
+              {build
+                .flat()
+                .some((ability) => ability === "ISM" || ability === "ISS") ? (
+                <div className="analyzer__stat-card-highlighted" />
+              ) : null}
               <ConsumptionTable
                 options={analyzed.stats.fullInkTankOptions}
                 subWeaponId={analyzed.weapon.subWeaponSplId}
@@ -794,7 +801,7 @@ function StatCategory({
   textBelow?: string;
 }) {
   return (
-    <details>
+    <details className="analyzer__details">
       <summary className="analyzer__summary">{title}</summary>
       <div className={containerClassName}>{children}</div>
       {textBelow && (
@@ -816,10 +823,17 @@ function StatCard({
   popoverInfo?: string;
 }) {
   const { t } = useTranslation("analyzer");
+
   const baseValue = typeof stat === "number" ? stat : stat.baseValue;
+  const showBuildValue =
+    typeof stat !== "number" && stat.value !== stat.baseValue;
 
   return (
-    <div className="analyzer__stat-card">
+    <div
+      className={clsx("analyzer__stat-card", {
+        "analyzer__stat-card-highlighted": showBuildValue,
+      })}
+    >
       <div className="analyzer__stat-card__title-and-value-container">
         <h3 className="analyzer__stat-card__title">
           {title}{" "}
@@ -843,7 +857,7 @@ function StatCard({
               {suffix}
             </div>
           </div>
-          {typeof stat !== "number" && stat.value !== stat.baseValue && (
+          {showBuildValue ? (
             <div className="analyzer__stat-card__value">
               <h4 className="analyzer__stat-card__value__title">
                 {t("build")}
@@ -853,7 +867,7 @@ function StatCard({
                 {suffix}
               </div>
             </div>
-          )}
+          ) : null}
         </div>
       </div>
       <div className="analyzer__stat-card__ability-container">

app/styles/analyzer.css

@@ -83,6 +83,10 @@
   padding-inline: var(--s-3);
 }
 
+.analyzer__details:has(.analyzer__stat-card-highlighted) .analyzer__summary {
+  background-color: var(--theme-transparent);
+}
+
 .analyzer__stat-collection {
   display: grid;
   gap: var(--s-2);
@@ -100,6 +104,10 @@
   gap: var(--s-4);
 }
 
+.analyzer__stat-card-highlighted {
+  background-color: var(--theme-transparent);
+}
+
 .analyzer__stat-card__title-and-value-container {
   display: flex;
   height: 100%;