Alert mode to filter only planets that need an action

src/app/components/AlertModeButton/AlertModeButton.tsx

@@ -0,0 +1,21 @@
+import { SessionContext } from "@/app/context/Context";
+import { Button, Tooltip } from "@mui/material";
+import { useContext } from "react";
+
+export const AlertModeButton = () => {
+  const { alertMode, toggleAlertMode } = useContext(SessionContext);
+  return (
+    <Tooltip title="Toggle alert mode to show only accounts and planets that need action.">
+      <Button
+        style={{
+          backgroundColor: alertMode
+            ? "rgba(144, 202, 249, 0.08)"
+            : "inherit",
+        }}
+        onClick={toggleAlertMode}
+      >
+        Alert mode
+      </Button>
+    </Tooltip>
+  );
+};

src/app/components/AppBar/AppBar.tsx

@@ -18,6 +18,7 @@ import { GitHubButton } from "../Github/GitHubButton";
 import { LoginButton } from "../Login/LoginButton";
 import { PlanModeButton } from "../PlanModeButton/PlanModeButton";
 import { SettingsButton } from "../Settings/SettingsButtons";
+import { AlertModeButton } from "../AlertModeButton/AlertModeButton";
 
 function ResponsiveAppBar() {
   const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
@@ -111,6 +112,9 @@ function ResponsiveAppBar() {
               <MenuItem onClick={handleCloseNavMenu}>
                 <PlanModeButton />
               </MenuItem>
+              <MenuItem onClick={handleCloseNavMenu}>
+                <AlertModeButton />
+              </MenuItem>
             </Menu>
           </Box>
           <PublicIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
@@ -149,6 +153,7 @@ function ResponsiveAppBar() {
             <SettingsButton />
             <CompactModeButton />
             <PlanModeButton />
+            <AlertModeButton />
           </Box>
         </Toolbar>
       </Container>

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 { alertModeVisibility, extractorsHaveExpired, timeColor } from "./timeColors";
-import { ColorContext } from "@/app/context/Context";
+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) => {
+      {expired && (
-        if (!e) return true;
-        const dateExtractor = DateTime.fromISO(e);
-        const dateNow = DateTime.now();
-        return dateExtractor < dateNow;
-      }) && (
         <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'
+}

src/app/context/Context.tsx

@@ -24,6 +24,8 @@ export const SessionContext = createContext<{
   toggleCompactMode: () => void;
   planMode: boolean;
   togglePlanMode: () => void;
+  alertMode: boolean;
+  toggleAlertMode: () => void;
   piPrices: EvePraisalResult | undefined;
 }>({
   sessionReady: false,
@@ -35,6 +37,8 @@ export const SessionContext = createContext<{
   toggleCompactMode: () => {},
   planMode: false,
   togglePlanMode: () => {},
+  alertMode: false,
+  toggleAlertMode: () => {},
   piPrices: undefined,
 });
 export type ColorSelectionType = {

src/app/page.tsx

@@ -27,6 +27,7 @@ const Home = () => {
     undefined,
   );
   const [colors, setColors] = useState<ColorSelectionType>(defaultColors);
+  const [alertMode, setAlertMode] = useState(false);
   const searchParams = useSearchParams();
   const code = searchParams && searchParams.get("code");
 
@@ -98,15 +99,26 @@ const Home = () => {
     setPlanMode(!planMode);
   };
 
+  const toggleAlertMode = () => {
+    setAlertMode(!alertMode);
+  };
+
   useEffect(() => {
     const storedCompactMode = localStorage.getItem("compactMode");
     if (!storedCompactMode) return;
     storedCompactMode === "true" ? setCompactMode(true) : false;
   }, []);
+
   useEffect(() => {
     const storedColors = localStorage.getItem("colors");
     if (!storedColors) return;
-    setColors(JSON.parse(storedColors))
+    setColors(JSON.parse(storedColors));
+  }, []);
+
+  useEffect(() => {
+    const storedAlertMode = localStorage.getItem("alertMode");
+    if (!storedAlertMode) return;
+    setAlertMode(JSON.parse(storedAlertMode));
   }, []);
 
   useEffect(() => {
@@ -114,7 +126,11 @@ const Home = () => {
   }, [compactMode]);
 
   useEffect(() => {
-    localStorage.setItem("colors", JSON.stringify(colors))
+    localStorage.setItem("alertMode", alertMode ? "true" : "false");
+  }, [alertMode]);
+
+  useEffect(() => {
+    localStorage.setItem("colors", JSON.stringify(colors));
   }, [colors]);
 
   // Initialize EVE PI
@@ -162,6 +178,8 @@ const Home = () => {
         planMode,
         togglePlanMode,
         piPrices,
+        alertMode,
+        toggleAlertMode,
       }}
     >
       <CharacterContext.Provider