Add comment field that is shown on account hover. Update discord link

src/app/components/Characters/CharacterDialog.tsx

@@ -16,9 +16,11 @@ export const CharacterDialog = ({
   updateCharacter: (characer: AccessToken, update: CharacterUpdate) => void;
 }) => {
   const [account, setAccount] = useState("");
+  const [comment, setComment] = useState("");
 
   useEffect(() => {
     if (character?.account) setAccount(character.account);
+    if (character?.comment) setComment(character.comment);
   }, [character]);
 
   const logout = (character: AccessToken) => {
@@ -29,8 +31,8 @@ export const CharacterDialog = ({
 
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     if (event.key === "Enter") {
-      character && updateCharacter(character, { account });
       closeDialog();
+      character && updateCharacter(character, { account, comment });
     }
   };
 
@@ -46,10 +48,20 @@ export const CharacterDialog = ({
         onChange={(event) => setAccount(event.target.value)}
         onKeyDown={handleKeyDown}
       />
+      <TextField
+        id="outlined-basic"
+        label="Comment"
+        variant="outlined"
+        value={comment ?? ""}
+        sx={{ margin: 1 }}
+        multiline={true}
+        onChange={(event) => setComment(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
       <DialogActions>
         <Button
           onClick={() => {
-            character && updateCharacter(character, { account });
+            character && updateCharacter(character, { account, comment });
             closeDialog();
           }}
           variant="contained"

src/app/components/Characters/CharacterRow.tsx

@@ -7,7 +7,7 @@ import { styled, useTheme } from "@mui/material/styles";
 import React from "react";
 import { CharacterDialog } from "./CharacterDialog";
 import { AccessToken } from "@/types";
-import { Box, Button } from "@mui/material";
+import { Box, Button, Tooltip } from "@mui/material";
 import { EVE_IMAGE_URL } from "@/const";
 import { CharacterContext } from "@/app/context/Context";
 
@@ -38,30 +38,32 @@ export const CharacterRow = ({ character }: { character: AccessToken }) => {
         updateCharacter={updateCharacter}
         closeDialog={() => setSelectedCharacter(undefined)}
       />
-      <Box
+      <Tooltip title={character.comment}>
-        display="flex"
+        <Box
-        flexDirection="column"
+          display="flex"
-        maxWidth={120}
+          flexDirection="column"
-        onClick={() => setSelectedCharacter(character)}
+          maxWidth={120}
-      >
+          onClick={() => setSelectedCharacter(character)}
-        <Image
-          src={`${EVE_IMAGE_URL}/characters/${character.character.characterId}/portrait?size=128`}
-          alt=""
-          width={theme.custom.cardImageSize}
-          height={theme.custom.cardImageSize}
-          style={{ marginBottom: "0.2rem", borderRadius: 8 }}
-        />
-        <Button
-          style={{
-            padding: 6,
-            fontSize: theme.custom.smallText,
-            lineHeight: 1,
-          }}
-          variant="outlined"
         >
-          {character.character.name}
+          <Image
-        </Button>
+            src={`${EVE_IMAGE_URL}/characters/${character.character.characterId}/portrait?size=128`}
-      </Box>
+            alt=""
+            width={theme.custom.cardImageSize}
+            height={theme.custom.cardImageSize}
+            style={{ marginBottom: "0.2rem", borderRadius: 8 }}
+          />
+          <Button
+            style={{
+              padding: 6,
+              fontSize: theme.custom.smallText,
+              lineHeight: 1,
+            }}
+            variant="outlined"
+          >
+            {character.character.name}
+          </Button>
+        </Box>
+      </Tooltip>
     </StackItem>
   );
 };

src/app/components/Discord/DiscordButton.tsx

@@ -4,7 +4,7 @@ export const DiscordButton = () => {
     <Box>
       <Tooltip title="Come nerd out in discord about PI and this tool">
         <Button
-          href="https://discord.gg/MDapvGyw"
+          href="https://discord.gg/qQK7vu3y9"
           target="_blank"
           style={{ width: "100%" }}
           sx={{ color: "white", display: "block" }}

src/app/page.tsx

@@ -42,6 +42,7 @@ const Home = () => {
         return {
           ...c,
           ...(updates.account ? { account: updates.account } : {}),
+          ...(updates.comment ? { comment: updates.comment } : {}),
         };
       return c;
     });

src/pages/api/refresh.ts

@@ -1,7 +1,7 @@
 import { AccessToken } from "@/types";
 import { extractCharacterFromToken } from "@/utils";
-import { NextApiRequest, NextApiResponse } from "next";
 import crypto from "crypto-js";
+import { NextApiRequest, NextApiResponse } from "next";
 
 const EVE_SSO_TOKEN_URL = "https://login.eveonline.com/v2/oauth/token";
 const EVE_SSO_CLIENT_ID = process.env.EVE_SSO_CLIENT_ID ?? "";
@@ -46,6 +46,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
         character,
         needsLogin: false,
         account: accessToken.account,
+        comment: accessToken.comment
       };
 
       console.log("Refresh", character.name, character.characterId);

src/pages/api/token.ts

@@ -47,6 +47,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       character,
       needsLogin: false,
       account: "-",
+      comment: "",
     };
     res.json(token);
   } else {

src/types.ts

@@ -8,6 +8,7 @@ export interface AccessToken {
   character: Character;
   account: string;
   needsLogin: boolean;
+  comment: string;
 }
 
 export interface Character {
@@ -28,6 +29,7 @@ export interface CharacterPlanets {
 
 export interface CharacterUpdate {
   account?: string;
+  comment?: string;
 }
 
 export type Planet = EsiType<"v1", "getCharactersCharacterIdPlanets">[number];