Навалил модалку с полной инфой

app/assets/mui/themes/home.ts

@@ -67,6 +67,17 @@ const customTheme = (outerTheme: Theme) =>
                         },
                     }
                 }
+            },
+            MuiPaper: {
+                styleOverrides: {
+                    root: {
+                        '--TextField-brandBorderColor': '#E0E3E7',
+                        backgroundColor: '#282c34',
+                        color: 'var(--TextField-brandBorderColor)',
+                        width: '90%',
+                        maxWidth: '90%!important'
+                    }
+                }
             }
         }
     });

app/assets/styles/home.css

@@ -33,3 +33,49 @@
 .loader {
     text-align: center;
 }
+
+.report-tag {
+    --main-color: #E0E3E7;
+    --hover-color: #6F7E8C;
+    --tag-color-good: #25cc00;
+    --tag-color-ok: #ffdf00;
+    --tag-color-bad: #cc5e00;
+    --tag-color-very-bad: #d10000;
+    border-radius: 20px;
+    padding: 5px 10px;
+    cursor: default;
+    border: 1px solid var(--main-color);
+    color: var(--main-color);
+    margin-right: 10px;
+    &:hover {
+        border: 1px solid var(--hover-color);
+        color: var(--hover-color);
+        > .report-tag-count-good {
+            color: var(--tag-color-good);
+        }
+        > .report-tag-count-ok {
+            color: var(--tag-color-ok);
+        }
+        > .report-tag-count-bad {
+            color: var(--tag-color-bad);
+        }
+        > .report-tag-count-very-bad {
+            color: var(--tag-color-very-bad);
+        }
+    }
+}
+
+.report-tag-list {
+    display: flex;
+    margin-top: 10px;
+}
+
+.report-comment:hover {
+    background-color: #383d49;
+    cursor: default;
+}
+
+.report-nickname:hover {
+    background-color: #383d49;
+    cursor: default;
+}

app/components/itemDialog.tsx

@@ -0,0 +1,107 @@
+import type {BlacklistItem} from "~/classes/blacklistItem";
+import {List, Dialog, DialogContent, DialogTitle, ListItem, ListItemText, Divider} from "@mui/material";
+
+function NicknameList({nicknames}: {nicknames: string[]|undefined}){
+    if (!nicknames){
+        return (<></>)
+    }
+    if (nicknames.length > 0){
+        return (
+            <>
+                <p>Nicknames:</p>
+                <List>
+                    {nicknames.map((item) => {
+                        return <ListItem className="report-nickname">{item}</ListItem>
+                    })}
+                </List>
+            </>
+        )
+    } else {
+        return (<></>)
+    }
+}
+
+function CommentsList({comments}: {comments: string[]|undefined}){
+    if (!comments){
+        return (<></>)
+    }
+    if (comments.length > 0){
+        return (
+            <>
+                <p>Comments:</p>
+                <List>
+                    {comments.map((item) => {
+                        return <ListItem className="report-comment">{item}</ListItem>
+                    })}
+                </List>
+            </>
+        )
+    } else {
+        return (<></>)
+    }
+}
+
+function Tag({tag, name}:{tag: number|undefined, name: string}){
+    let classColor = "report-tag-count-good";
+    if (tag){
+        if (tag <= 10){
+            classColor = "report-tag-count-good";
+        } else if (tag > 10 && tag <= 25) {
+            classColor = "report-tag-count-ok";
+        } else if (tag > 25 && tag <= 50) {
+            classColor = "report-tag-count-bad";
+        } else {
+            classColor = "report-tag-count-very-bad";
+        }
+    }
+
+    return (
+        <>
+            <div className="report-tag">
+                <span className={classColor}>{tag} </span>
+                <span>{name}</span>
+            </div>
+        </>
+    )
+}
+
+function TagList({afk, cheater, griefer, toxic, useless, smurf}:{afk: number|undefined, cheater: number|undefined, griefer: number|undefined, toxic: number|undefined, useless: number|undefined, smurf: number|undefined}){
+    return (
+        <>
+            <div className="report-tag-list">
+                <Tag tag={afk} name={'AFK'}/>
+                <Tag tag={cheater} name={'Cheater'}/>
+                <Tag tag={griefer} name={'Griefer'}/>
+                <Tag tag={toxic} name={'Toxic'}/>
+                <Tag tag={useless} name={'Useless'}/>
+                <Tag tag={smurf} name={'Smurf'}/>
+            </div>
+        </>
+    )
+}
+
+export default function ItemDialog({ blacklistItem, open, handleClose }: { blacklistItem: BlacklistItem|null, open: boolean, handleClose: Function }){
+    return (
+        <Dialog
+            open={open}
+            onClose={() => handleClose()}
+        >
+            <DialogTitle>
+                <p>{blacklistItem?.link}</p>
+                <TagList
+                    afk={blacklistItem?.afk}
+                    cheater={blacklistItem?.cheater}
+                    griefer={blacklistItem?.griefer}
+                    toxic={blacklistItem?.toxic}
+                    useless={blacklistItem?.useless}
+                    smurf={blacklistItem?.smurf}
+                />
+            </DialogTitle>
+            <Divider sx={{marginTop: '10px', marginBottom: '10px', alignSelf: 'center'}}/>
+            <DialogContent>
+                <NicknameList nicknames={blacklistItem?.nicknames}/>
+                <CommentsList comments={blacklistItem?.comments}/>
+            </DialogContent>
+        </Dialog>
+    )
+}

app/components/itemList.tsx

@@ -1,7 +1,7 @@
 import {BlacklistItem} from "~/classes/blacklistItem";
 import {Button, CircularProgress} from "@mui/material";
 
-export default function ItemList({ isFetching, blacklistItems }: { isFetching: boolean, blacklistItems: BlacklistItem[] }) {
+export default function ItemList({ isFetching, blacklistItems, showDialog }: { isFetching: boolean, blacklistItems: BlacklistItem[], showDialog: Function }) {
     if (isFetching){
         return(
             <div className="loader">
@@ -13,7 +13,7 @@ export default function ItemList({ isFetching, blacklistItems }: { isFetching: b
             <div className="list-container">
                 <div className="item-list">
                     {blacklistItems.map((item) => {
-                        return <Button variant="text">{item.link}</Button>
+                        return <Button onClick={() => showDialog(item)} variant="text">{item.link}</Button>
                     })}
                 </div>
             </div>

app/routes/home.tsx

@@ -11,6 +11,7 @@ import customTheme from "~/assets/mui/themes/home";
 import {BlacklistItem} from "~/classes/blacklistItem";
 import {ResponseError} from "~/classes/responseError";
 import ItemList from "~/components/itemList";
+import ItemDialog from "~/components/itemDialog";
 
 export default function Home() {
     const outerTheme = useTheme();
@@ -18,6 +19,8 @@ export default function Home() {
     const [searchText, setSearchText] = useState('');
     const [isFetchingList, setIsFetchingList] = useState(false);
     const [blacklistItems, setBlacklistItems] = useState<BlacklistItem[]>([]);
+    const [showDialog, setShowDialog] = useState(false);
+    const [currentDialogBlacklistItem, setCurrentDialogBlacklistItem] = useState<BlacklistItem|null>(null);
 
     useEffect(() => {
         let isIgnore = false;
@@ -42,6 +45,16 @@ export default function Home() {
         setSearchText(text);
     }
 
+    function handleItemClick(item: BlacklistItem){
+        setCurrentDialogBlacklistItem(item);
+        console.log(item);
+        setShowDialog(true);
+    }
+
+    const handleDialogClose = () => {
+        setShowDialog(false);
+    };
+
     return (
         <ThemeProvider theme={customTheme(outerTheme)}>
             <div className="bg-dark">
@@ -58,14 +71,8 @@ export default function Home() {
                 <div style={{justifyItems: 'center'}}>
                     <Divider sx={{marginTop: '10px', marginBottom: '10px'}}/>
                 </div>
-                <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems}></ItemList>
-                {/*<div className="list-container">*/}
-                {/*    <div className="item-list">*/}
-                {/*        {blacklistItems.map((item, i) => {*/}
-                {/*            return <Button variant="text">{item.link}</Button>*/}
-                {/*        })}*/}
-                {/*    </div>*/}
-                {/*</div>*/}
+                <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems} showDialog={handleItemClick}></ItemList>
+                <ItemDialog blacklistItem={currentDialogBlacklistItem} open={showDialog} handleClose={handleDialogClose}></ItemDialog>
             </div>
         </ThemeProvider>
     );