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
-        display="flex"
-        flexDirection="column"
-        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"
+      <Tooltip title={character.comment}>
+        <Box
+          display="flex"
+          flexDirection="column"
+          maxWidth={120}
+          onClick={() => setSelectedCharacter(character)}
         >
-          {character.character.name}
-        </Button>
-      </Box>
+          <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}
+          </Button>
+        </Box>
+      </Tooltip>
     </StackItem>
   );
 };