Намутил визуал FAB

app/api.ts

@@ -20,6 +20,7 @@ const getReportData = (data: AxiosResponse<any, any, {}>): BlacklistItem[] => {
             value.griefer,
             value.toxic,
             value.useless,
+            value.smurf
         );
         blacklistItems.push(blacklistItem);
     }

app/assets/mui/themes/home.ts

@@ -67,6 +67,31 @@ const customTheme = (outerTheme: Theme) =>
                         },
                     }
                 }
+            },
+            MuiPaper: {
+                styleOverrides: {
+                    root: {
+                        '--TextField-brandBorderColor': '#E0E3E7',
+                        backgroundColor: '#282c34',
+                        color: 'var(--TextField-brandBorderColor)',
+                        width: '90%',
+                        maxWidth: '90%!important'
+                    }
+                }
+            },
+            MuiFab: {
+                styleOverrides: {
+                    root: {
+                        '--Fab-text-color': '#E0E3E7',
+                        '--Fab-bg-color': '#282c34',
+                        '--Fab-bg-color-hover': '#3b444c',
+                        backgroundColor: 'var(--Fab-bg-color)',
+                        color: 'var(--Fab-text-color)',
+                        '&:hover': {
+                            backgroundColor: 'var(--Fab-bg-color-hover)',
+                        },
+                    }
+                }
             }
         }
     });

app/assets/styles/home.css

@@ -32,4 +32,59 @@
 
 .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;
+}
+
+.report-content-header {
+    font-weight: bold;
+}
+
+.report-title-header {
+    display: flex;
+    justify-content: space-between;
 }

app/classes/blacklistItem.ts

@@ -2,13 +2,14 @@ export class BlacklistItem {
     link: string;
     nicknames: string[];
     comments: string[];
-    afk: boolean;
+    afk: number;
-    cheater: boolean;
+    cheater: number;
-    griefer: boolean;
+    griefer: number;
-    toxic: boolean;
+    toxic: number;
-    useless: boolean;
+    useless: number;
+    smurf: number;
 
-    constructor(link: string, nicknames: string[], comments: string[], afk: boolean, cheater: boolean, griefer: boolean, toxic: boolean, useless: boolean) {
+    constructor(link: string, nicknames: string[], comments: string[], afk: number, cheater: number, griefer: number, toxic: number, useless: number, smurf: number) {
         this.link = link;
         this.nicknames = nicknames;
         this.comments = comments;
@@ -17,5 +18,6 @@ export class BlacklistItem {
         this.griefer = griefer;
         this.toxic = toxic;
         this.useless = useless;
+        this.smurf = smurf;
     }
 }

app/components/itemDialog.tsx

@@ -0,0 +1,32 @@
+import type {BlacklistItem} from "~/classes/blacklistItem";
+import {Dialog, DialogContent, DialogTitle, Divider} from "@mui/material";
+import NicknameList from "~/components/itemDialog/nicknameList";
+import CommentsList from "~/components/itemDialog/commentsList";
+import TagList from "~/components/itemDialog/tagList";
+import TitleHeader from "~/components/itemDialog/titleHeader";
+
+export default function ItemDialog({ blacklistItem, open, handleClose }: { blacklistItem: BlacklistItem|null, open: boolean, handleClose: Function }){
+    return (
+        <Dialog
+            open={open}
+            onClose={() => handleClose()}
+        >
+            <DialogTitle>
+                <TitleHeader name={blacklistItem?.link} handleClose={handleClose}/>
+                <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/itemDialog/commentsList.tsx

@@ -0,0 +1,21 @@
+import {List, ListItem} from "@mui/material";
+
+export default function CommentsList({comments}: {comments: string[]|undefined}){
+    if (!comments){
+        return (<></>)
+    }
+    if (comments.length > 0){
+        return (
+            <>
+                <p className="report-content-header">Comments:</p>
+                <List>
+                    {comments.map((item) => {
+                        return <ListItem className="report-comment">{item}</ListItem>
+                    })}
+                </List>
+            </>
+        )
+    } else {
+        return (<></>)
+    }
+}

app/components/itemDialog/nicknameList.tsx

@@ -0,0 +1,21 @@
+import {List, ListItem} from "@mui/material";
+
+export default function NicknameList({nicknames}: {nicknames: string[]|undefined}){
+    if (!nicknames){
+        return (<></>)
+    }
+    if (nicknames.length > 0){
+        return (
+            <>
+                <p className="report-content-header">Nicknames:</p>
+                <List>
+                    {nicknames.map((item) => {
+                        return <ListItem className="report-nickname">{item}</ListItem>
+                    })}
+                </List>
+            </>
+        )
+    } else {
+        return (<></>)
+    }
+}

app/components/itemDialog/tag.tsx

@@ -0,0 +1,23 @@
+export default 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>
+        </>
+    )
+}

app/components/itemDialog/tagList.tsx

@@ -0,0 +1,16 @@
+import Tag from "~/components/itemDialog/tag";
+
+export default 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>
+        </>
+    )
+}

app/components/itemDialog/titleHeader.tsx

@@ -0,0 +1,15 @@
+import {IconButton} from "@mui/material";
+import CloseIcon from '@mui/icons-material/Close';
+
+export default function TitleHeader({ name, handleClose }:{ name: string|undefined, handleClose: Function }){
+    return (
+        <>
+            <div className="report-title-header">
+                <p>{name}</p>
+                <IconButton aria-label="Close">
+                    <CloseIcon sx={{color: "#E0E3E7"}} onClick={() => handleClose()}/>
+                </IconButton>
+            </div>
+        </>
+    )
+}

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

@@ -1,9 +1,10 @@
 import {useEffect, useState} from "react";
 import '../assets/styles/home.css';
 import {
-    Divider,
+    Box,
+    Divider, Fab,
     TextField,
-    ThemeProvider,
+    ThemeProvider, Typography,
     useTheme
 } from "@mui/material";
 import {getAll} from '~/api';
@@ -11,6 +12,8 @@ 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";
+import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag';
 
 export default function Home() {
     const outerTheme = useTheme();
@@ -18,6 +21,9 @@ 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);
+    const [fabIsHovered, setFabIsHovered] = useState(false);
 
     useEffect(() => {
         let isIgnore = false;
@@ -42,6 +48,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 +74,34 @@ export default function Home() {
                 <div style={{justifyItems: 'center'}}>
                     <Divider sx={{marginTop: '10px', marginBottom: '10px'}}/>
                 </div>
-                <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems}></ItemList>
+                <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems} showDialog={handleItemClick}></ItemList>
-                {/*<div className="list-container">*/}
+                <ItemDialog blacklistItem={currentDialogBlacklistItem} open={showDialog} handleClose={handleDialogClose}></ItemDialog>
-                {/*    <div className="item-list">*/}
+                <Fab
-                {/*        {blacklistItems.map((item, i) => {*/}
+                    onMouseEnter={() => setFabIsHovered(true)}
-                {/*            return <Button variant="text">{item.link}</Button>*/}
+                    onMouseLeave={() => setFabIsHovered(false)}
-                {/*        })}*/}
+                    variant={fabIsHovered ? 'extended' : 'circular'}
-                {/*    </div>*/}
+                    sx={{
-                {/*</div>*/}
+                        position: 'absolute',
+                        bottom: 16,
+                        right: 16,
+                        width: fabIsHovered ? '160px' : '56px', // Переход между кругом и овалом
+                        transition: 'width 0.3s ease-in-out',
+                        overflow: 'hidden',
+                    }}
+                >
+                    <OutlinedFlagIcon />
+                    <Box
+                        sx={{
+                            opacity: fabIsHovered ? 1 : 0,
+                            ml: fabIsHovered ? 1 : 0,
+                            width: fabIsHovered ? 'auto' : 0,
+                            transition: 'all 0.1s ease-in-out',
+                            whiteSpace: 'nowrap',
+                        }}
+                    >
+                        <Typography variant="button">{fabIsHovered ? 'Send report' : ''}</Typography>
+                    </Box>
+                </Fab>
             </div>
         </ThemeProvider>
     );