Alert mode to filter only planets that need an action

src/app/components/PlanetaryInteraction/PlanetCard.tsx

@@ -15,8 +15,8 @@ import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
 import Button from "@mui/material/Button";
-import { timeColor } from "./timeColors";
-import { ColorContext } from "@/app/context/Context";
+import { alertModeVisibility, extractorsHaveExpired, timeColor } from "./timeColors";
+import { ColorContext, SessionContext,  } from "@/app/context/Context";
 
 const StackItem = styled(Stack)(({ theme }) => ({
   ...theme.typography.body2,
@@ -43,6 +43,8 @@ export const PlanetCard = ({
   planet: Planet;
   character: AccessToken;
 }) => {
+  const { alertMode } = useContext(SessionContext);
+
   const [planetInfo, setPlanetInfo] = useState<PlanetInfo | undefined>(
     undefined,
   );
@@ -63,7 +65,7 @@ export const PlanetCard = ({
     setPlanetRenderOpen(false);
   };
 
-  const extractors =
+  const extractorsExpiryTime =
     (planetInfo &&
       planetInfo.pins
         .filter((p) => EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id))
@@ -97,6 +99,7 @@ export const PlanetCard = ({
   };
 
   const { colors } = useContext(ColorContext);
+  const expired = extractorsHaveExpired(extractorsExpiryTime) 
 
   useEffect(() => {
     getPlanet(character, planet).then(setPlanetInfo);
@@ -108,6 +111,7 @@ export const PlanetCard = ({
       height="100%"
       position="relative"
       minHeight={theme.custom.cardMinHeight}
+      visibility={alertModeVisibility(alertMode, expired)}
     >
       <Image
         src={`/${planet.planet_type}.png`}
@@ -117,12 +121,7 @@ export const PlanetCard = ({
         style={{ borderRadius: 8, marginRight: 4 }}
         onClick={handle3DrenderOpen}
       />
-      {extractors.some((e) => {
-        if (!e) return true;
-        const dateExtractor = DateTime.fromISO(e);
-        const dateNow = DateTime.now();
-        return dateExtractor < dateNow;
-      }) && (
+      {expired && (
         <Image
           width={32}
           height={32}
@@ -140,7 +139,7 @@ export const PlanetCard = ({
         </Typography>
       </div>
 
-      {extractors.map((e, idx) => {
+      {extractorsExpiryTime.map((e, idx) => {
         return (
           <Typography
             key={`${e}-${idx}-${character.character.characterId}`}

src/app/components/PlanetaryInteraction/PlanetTableRow.tsx

@@ -22,7 +22,7 @@ import Image from "next/image";
 import React, { forwardRef, useContext, useEffect, useState } from "react";
 import Countdown from "react-countdown";
 import PinsCanvas3D from "./PinsCanvas3D";
-import { timeColor } from "./timeColors";
+import { timeColor, extractorsHaveExpired, alertModeVisibility } from "./timeColors";
 
 const Transition = forwardRef(function Transition(
   props: TransitionProps & {
@@ -52,7 +52,7 @@ export const PlanetTableRow = ({
     setPlanetRenderOpen(false);
   };
 
-  const { piPrices } = useContext(SessionContext);
+  const { piPrices, alertMode } = useContext(SessionContext);
   const [planetInfo, setPlanetInfo] = useState<PlanetInfo | undefined>(
     undefined,
   );
@@ -174,9 +174,10 @@ export const PlanetTableRow = ({
     getPlanetUniverse(planet).then(setPlanetInfoUniverse);
   }, [planet, character]);
 
+  const expired = extractorsHaveExpired(extractors.map(e => e.expiry_time)) 
   const { colors } = useContext(ColorContext);
   return (
-    <TableRow sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
+    <TableRow style={{ visibility: alertModeVisibility(alertMode, expired) }} sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
       <TableCell component="th" scope="row">
         <Tooltip
           title={`${

src/app/components/PlanetaryInteraction/timeColors.ts

@@ -19,3 +19,17 @@ export const timeColor = (
   if (dateExtractor.minus({ hours: 48 }) < dateNow) return colors.twoDaysColor;
   return colors.defaultColor;
 };
+
+export const extractorsHaveExpired = (extractorsExpiryTime: (string | undefined)[]) =>
+  extractorsExpiryTime.some((e) => {
+    if (!e) return true;
+    const dateExtractor = DateTime.fromISO(e);
+    const dateNow = DateTime.now();
+    return dateExtractor < dateNow;
+  });
+
+export const alertModeVisibility = (alertMode: boolean, expired: boolean) => {
+  if(alertMode && expired) return 'visible'
+  if(alertMode && !expired) return 'collapse'
+  return 'visible'
+}