ui tweaks. add FAQ section. move filters to submenu

2025-04-25 09:38:10 +03:00
parent a1f682e9fc
commit de49595f55
8 changed files with 234 additions and 130 deletions
--- a/src/app/components/AlertModeButton/AlertModeButton.tsx
+++ b/src/app/components/AlertModeButton/AlertModeButton.tsx
@@ -1,21 +0,0 @@
-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>
-  );
-};
--- a/src/app/components/AppBar/AppBar.tsx
+++ b/src/app/components/AppBar/AppBar.tsx
@@ -12,20 +12,25 @@ import * as React from "react";
 import { DowloadButton } from "../Backup/DowloadButton";
 import { UploadButton } from "../Backup/UploadButton";
 import { CCPButton } from "../CCP/CCPButton";
-import { CompactModeButton } from "../CompactModeButton/CompactModeButton";
 import { DiscordButton } from "../Discord/DiscordButton";
 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";
-import { SupportButton } from "../SupportButton/SupportButton";
-
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+} from "@mui/material";
+import { useState } from "react";

 function ResponsiveAppBar() {
  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
    null,
  );
+  const [faqOpen, setFaqOpen] = useState(false);

  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorElNav(event.currentTarget);
@@ -102,23 +107,26 @@ function ResponsiveAppBar() {
              <MenuItem onClick={handleCloseNavMenu}>
                <GitHubButton />
              </MenuItem>
-              <MenuItem onClick={handleCloseNavMenu}>
-                <CCPButton />
-              </MenuItem>
-              <MenuItem onClick={handleCloseNavMenu}>
-                <SupportButton />
-              </MenuItem>
+
              <MenuItem onClick={handleCloseNavMenu}>
                <SettingsButton />
              </MenuItem>
-              <MenuItem onClick={handleCloseNavMenu}>
-                <CompactModeButton />
+              <MenuItem
+                onClick={() => {
+                  handleCloseNavMenu();
+                  setFaqOpen(true);
+                }}
+              >
+                <Button
+                  href=""
+                  style={{ width: "100%" }}
+                  sx={{ color: "white", display: "flex", justifyContent: "flex-start" }}
+                >
+                  FAQ
+                </Button>
              </MenuItem>
              <MenuItem onClick={handleCloseNavMenu}>
-                <PlanModeButton />
-              </MenuItem>
-              <MenuItem onClick={handleCloseNavMenu}>
-                <AlertModeButton />
+                <CCPButton />
              </MenuItem>
            </Menu>
          </Box>
@@ -146,7 +154,7 @@ function ResponsiveAppBar() {
              flexGrow: 1,
              display: { xs: "none", md: "flex" },
              alignItems: "center",
-              gap: "0.2rem"
+              gap: "0.2rem",
            }}
          >
            <LoginButton />
@@ -154,15 +162,132 @@ function ResponsiveAppBar() {
            <UploadButton />
            <DiscordButton />
            <GitHubButton />
-            <CCPButton />
-            <SupportButton />
+           
            <SettingsButton />
-            <CompactModeButton />
-            <PlanModeButton />
-            <AlertModeButton />
+            <Button onClick={() => setFaqOpen(true)} color="inherit">
+              FAQ
+            </Button>
+            <CCPButton />
          </Box>
        </Toolbar>
      </Container>
+      <Dialog
+        open={faqOpen}
+        onClose={() => setFaqOpen(false)}
+        aria-labelledby="faq-dialog-title"
+      >
+        <DialogTitle id="faq-dialog-title">
+          Frequently Asked Questions
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            <strong>EVE Online Partner Code</strong>
+            <br />
+            Consider using my partner code for CCP related purchases to support
+            this project:
+            <Button
+              href=""
+              style={{ width: "100%" }}
+              sx={{ color: "white", display: "block" }}
+              onClick={() => {
+                navigator.clipboard.writeText("CALLIEVE");
+              }}
+            >
+              CALLIEVE
+            </Button>{" "}
+            Click button above to copy to clipboard.
+            <br />
+            <br />
+            <strong>What is this application?</strong>
+            <br />
+            This EVE Online Planetary Interaction tool that helps you track and
+            manage your colonies and production chains. Main usecase is to see
+            if your extractors are running.
+            <br />
+            <br />
+            <strong>How do I add characters?</strong>
+            <br />
+            You can add characters by clicking the &quot;Add Character&quot;
+            button in the app bar and following the authentication process.
+            <br />
+            <br />
+            <strong>Why don&apos;t my storage numbers add up?</strong>
+            <br />
+            EVE Online API (ESI) provides planetary interaction endpoints. These
+            are updated when you submit changes to planet. For example after an
+            extractor restart.
+            <br />
+            <br />
+            <strong>What does exclude mean?</strong>
+            <br />
+            Exclude means that this planet will not be counted in totals. This
+            is useful if you have longer production chains where exports of a
+            planet are consumed by another planet.
+            <br />
+            <br />
+            <strong>How do see my planets production chains?</strong>
+            <br />
+            Click on the planet row to open the extraction simulation.
+            <br />
+            <br />
+            <strong>What is Compact Mode?</strong>
+            <br />
+            Compact Mode reduces the size of character cards to show more
+            information at once. You can toggle it in the settings.
+            <br />
+            <br />
+            <strong>What is Alert Mode?</strong>
+            <br />
+            Alert mode shows only the planets that have extractors offline and
+            need attention.
+            <br />
+            <br />
+            <strong>What does off-blanace mean?</strong>
+            <br />
+            Off-blanace alert shows up for planets that have two extractors that
+            are extracting different amount of material. Treshold can be set in
+            settings. Generally you want to keep this below 1000.
+            <br />
+            <br />
+            <strong>How do I reorder accounts?</strong>
+            <br />
+            You can drag and drop account cards to reorder them. The order will
+            be saved automatically.
+            <br />
+            <br />
+            <strong>How do I add a character to account groups?</strong>
+            <br />
+            You can add a character to an account group by clicking the cog on
+            the character card and typing in the account/group name.
+            <br />
+            <br />
+            <strong>I like icons! Why so much text?</strong>
+            <br />
+            Toggle this option in settings.
+            <br />
+            <br />
+            <strong>I like colors! Why your alert colors are so ugly?</strong>
+            <br />
+            Change the color scheme in settings.
+            <br />
+            <br />
+            <strong>What does the 3D view do?</strong>
+            <br />
+            Nothing. Just made it for fun
+            <br />
+            <br />
+            <strong>Why are planet settings empty?</strong>
+            <br />
+            Its a work in progress feature. Plan is to be able to configuer
+            planet and planet exports to belong to production chains.
+            <br />
+            <br />
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setFaqOpen(false)}>Close</Button>
+        </DialogActions>
+      </Dialog>
    </AppBar>
  );
 }
--- a/src/app/components/CompactModeButton/CompactModeButton.tsx
+++ b/src/app/components/CompactModeButton/CompactModeButton.tsx
@@ -1,21 +0,0 @@
-import { SessionContext } from "@/app/context/Context";
-import { Button, Tooltip } from "@mui/material";
-import { useContext } from "react";
-
-export const CompactModeButton = () => {
-  const { compactMode, toggleCompactMode } = useContext(SessionContext);
-  return (
-    <Tooltip title="Toggle compact layout for widescreen">
-      <Button
-        style={{
-          backgroundColor: compactMode
-            ? "rgba(144, 202, 249, 0.08)"
-            : "inherit",
-        }}
-        onClick={toggleCompactMode}
-      >
-        Compact mode
-      </Button>
-    </Tooltip>
-  );
-};
--- a/src/app/components/MainGrid.tsx
+++ b/src/app/components/MainGrid.tsx
@@ -6,15 +6,21 @@ import {
  ThemeProvider,
  createTheme,
  Button,
+  Tooltip,
 } from "@mui/material";
 import { AccountCard } from "./Account/AccountCard";
 import { AccessToken } from "@/types";
 import { CharacterContext, SessionContext } from "../context/Context";
 import ResponsiveAppBar from "./AppBar/AppBar";
 import { Summary } from "./Summary/Summary";
-import { DragDropContext, Droppable, Draggable, DropResult } from "@hello-pangea/dnd";
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  DropResult,
+} from "@hello-pangea/dnd";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";

 interface Grouped {
  [key: string]: AccessToken[];
@@ -43,6 +49,7 @@ declare module "@mui/material/styles" {

 export const MainGrid = () => {
  const { characters, updateCharacter } = useContext(CharacterContext);
+  const { compactMode, toggleCompactMode, alertMode, toggleAlertMode, planMode, togglePlanMode } = useContext(SessionContext);
  const [accountOrder, setAccountOrder] = useState<string[]>([]);
  const [allCollapsed, setAllCollapsed] = useState(false);

@@ -54,15 +61,19 @@ export const MainGrid = () => {
        group[account ?? ""] = group[account ?? ""] ?? [];
        group[account ?? ""].push(character);
        return group;
-      }, {})
+      }, {}),
    );

-    const savedOrder = localStorage.getItem('accountOrder');
+    const savedOrder = localStorage.getItem("accountOrder");
    if (savedOrder) {
      try {
        const parsedOrder = JSON.parse(savedOrder);
-        const validOrder = parsedOrder.filter((account: string) => currentAccounts.includes(account));
-        const newAccounts = currentAccounts.filter(account => !validOrder.includes(account));
+        const validOrder = parsedOrder.filter((account: string) =>
+          currentAccounts.includes(account),
+        );
+        const newAccounts = currentAccounts.filter(
+          (account) => !validOrder.includes(account),
+        );
        setAccountOrder([...validOrder, ...newAccounts]);
      } catch (e) {
        setAccountOrder(currentAccounts);
@@ -74,7 +85,7 @@ export const MainGrid = () => {

  useEffect(() => {
    if (accountOrder.length > 0) {
-      localStorage.setItem('accountOrder', JSON.stringify(accountOrder));
+      localStorage.setItem("accountOrder", JSON.stringify(accountOrder));
    }
  }, [accountOrder]);

@@ -85,7 +96,6 @@ export const MainGrid = () => {
    return group;
  }, {});

-  const { compactMode } = useContext(SessionContext);
  const [darkTheme, setDarkTheme] = useState(
    createTheme({
      palette: {
@@ -138,14 +148,62 @@ export const MainGrid = () => {
      <Box sx={{ flexGrow: 1 }}>
        <ResponsiveAppBar />
        {compactMode ? <></> : <Summary characters={characters} />}
-        <Box sx={{ display: 'flex', justifyContent: 'flex-start', padding: 1 }}>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "flex-start",
+            padding: 1,
+            gap: 1,
+          }}
+        >
          <Button
-            startIcon={allCollapsed ? <KeyboardArrowDownIcon /> : <KeyboardArrowUpIcon />}
+            startIcon={
+              allCollapsed ? <KeyboardArrowDownIcon /> : <KeyboardArrowUpIcon />
+            }
            onClick={() => setAllCollapsed(!allCollapsed)}
            size="small"
          >
-            {allCollapsed ? 'Expand All' : 'Collapse All'}
+            {allCollapsed ? "Expand All" : "Collapse All"}
          </Button>
+          <Tooltip title="Toggle compact layout for widescreen">
+            <Button
+              size="small"
+              style={{
+                backgroundColor: compactMode
+                  ? "rgba(144, 202, 249, 0.08)"
+                  : "inherit",
+              }}
+              onClick={toggleCompactMode}
+            >
+              Compact mode
+            </Button>
+          </Tooltip>
+          <Tooltip title="Toggle alert mode to show only accounts and planets that need action.">
+            <Button
+              size="small"
+              style={{
+                backgroundColor: alertMode
+                  ? "rgba(144, 202, 249, 0.08)"
+                  : "inherit",
+              }}
+              onClick={toggleAlertMode}
+            >
+              Alert mode
+            </Button>
+          </Tooltip>
+          <Tooltip title="Toggle plan mode that show layout for widescreen">
+            <Button
+              size="small"
+              style={{
+                backgroundColor: planMode
+                  ? "rgba(144, 202, 249, 0.08)"
+                  : "inherit",
+              }}
+              onClick={togglePlanMode}
+            >
+              Plan mode
+            </Button>
+          </Tooltip>
        </Box>
        <DragDropContextComponent onDragEnd={handleDragEnd}>
          <DroppableComponent droppableId="accounts">
@@ -153,7 +211,7 @@ export const MainGrid = () => {
              <Grid
                container
                spacing={1}
-                sx={{ padding: 1, width: '100%' }}
+                sx={{ padding: 1, width: "100%" }}
                {...provided.droppableProps}
                ref={provided.innerRef}
              >
@@ -172,17 +230,18 @@ export const MainGrid = () => {
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        sx={{
-                          '& > *': {
-                            width: '100%',
+                          "& > *": {
+                            width: "100%",
                          },
                        }}
                      >
-                        {groupByAccount[account] && groupByAccount[account].length > 0 && (
-                          <AccountCard 
-                            characters={groupByAccount[account]} 
-                            isCollapsed={allCollapsed}
-                          />
-                        )}
+                        {groupByAccount[account] &&
+                          groupByAccount[account].length > 0 && (
+                            <AccountCard
+                              characters={groupByAccount[account]}
+                              isCollapsed={allCollapsed}
+                            />
+                          )}
                      </Grid>
                    )}
                  </DraggableComponent>
--- a/src/app/components/PlanModeButton/PlanModeButton.tsx
+++ b/src/app/components/PlanModeButton/PlanModeButton.tsx
@@ -1,15 +0,0 @@
-import { SessionContext } from "@/app/context/Context";
-import { Button, Tooltip } from "@mui/material";
-import { useContext } from "react";
-
-export const PlanModeButton = () => {
-  const { planMode, togglePlanMode } = useContext(SessionContext);
-  return (
-    <Tooltip title="Toggle plan mode that show layout for widescreen">
-      <Button onClick={togglePlanMode} style={{backgroundColor: planMode ? 'rgba(144, 202, 249, 0.08)' : 'inherit'}}>
-        Plan mode
-
-      </Button>
-    </Tooltip>
-  );
-};
--- a/src/app/components/PlanetaryInteraction/PlanetTableRow.tsx
+++ b/src/app/components/PlanetaryInteraction/PlanetTableRow.tsx
@@ -167,20 +167,20 @@ export const PlanetTableRow = ({
          />
          {amount !== undefined && (
            <Typography fontSize={theme.custom.smallText} style={{ marginLeft: "5px", flexShrink: 0 }}>
-              {amount}/h
+              {amount}
            </Typography>
          )}
        </div>
      );
    }
    return (
-      <div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
        <Typography fontSize={theme.custom.smallText}>
          {PI_TYPES_MAP[typeId].name}
        </Typography>
        {amount !== undefined && (
          <Typography fontSize={theme.custom.smallText} style={{ marginLeft: "5px", flexShrink: 0 }}>
-            {amount}/h
+            {amount}
          </Typography>
        )}
      </div>
--- a/src/app/components/PlanetaryInteraction/PlanetaryInteractionRow.tsx
+++ b/src/app/components/PlanetaryInteraction/PlanetaryInteractionRow.tsx
@@ -84,8 +84,8 @@ const PlanetaryIteractionTable = ({
                </Tooltip>
              </TableCell>
              <TableCell width="2%">
-                <Tooltip title="How many units per hour factories are producing">
-                  <Typography fontSize={theme.custom.smallText}>u/h</Typography>
+                <Tooltip title="How many units per hour factories are producing on this planet">
+                  <Typography fontSize={theme.custom.smallText}>uph</Typography>
                </Tooltip>
              </TableCell>
              <TableCell width="4%" align="right">
@@ -98,7 +98,7 @@ const PlanetaryIteractionTable = ({
              <TableCell width="10%">
                <Tooltip title="Storage facility fill rate">
                  <Typography fontSize={theme.custom.smallText}>
-                    Storage Fill rate
+                    Storage%
                  </Typography>
                </Tooltip>
              </TableCell>
--- a/src/app/components/SupportButton/SupportButton.tsx
+++ b/src/app/components/SupportButton/SupportButton.tsx
@@ -1,23 +0,0 @@
-import { Box, Button, Tooltip } from "@mui/material";
-export const SupportButton = () => {
-  return (
-    <Box>
-      <Tooltip
-        title={`
-          Consider using code 'CALLIEVE' on EVE store checkout to support the project! Click to copy to clipboard ;)
-        `}
-      >
-        <Button
-          href=""
-          style={{ width: "100%" }}
-          sx={{ color: "white", display: "block" }}
-          onClick={() => {
-            navigator.clipboard.writeText("CALLIEVE");
-          }}
-        >
-          CALLIEVE
-        </Button>
-      </Tooltip>
-    </Box>
-  );
-};