app/api.ts

@@ -20,7 +20,6 @@ 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,31 +67,6 @@ 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

@@ -33,58 +33,3 @@
 .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,14 +2,13 @@ export class BlacklistItem {
     link: string;
     nicknames: string[];
     comments: string[];
-    afk: number;
+    afk: boolean;
-    cheater: number;
+    cheater: boolean;
-    griefer: number;
+    griefer: boolean;
-    toxic: number;
+    toxic: boolean;
-    useless: number;
+    useless: boolean;
-    smurf: number;
 
-    constructor(link: string, nicknames: string[], comments: string[], afk: number, cheater: number, griefer: number, toxic: number, useless: number, smurf: number) {
+    constructor(link: string, nicknames: string[], comments: string[], afk: boolean, cheater: boolean, griefer: boolean, toxic: boolean, useless: boolean) {
         this.link = link;
         this.nicknames = nicknames;
         this.comments = comments;
@@ -18,6 +17,5 @@ export class BlacklistItem {
         this.griefer = griefer;
         this.toxic = toxic;
         this.useless = useless;
-        this.smurf = smurf;
     }
 }

app/components/itemDialog.tsx

@@ -1,32 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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, showDialog }: { isFetching: boolean, blacklistItems: BlacklistItem[], showDialog: Function }) {
+export default function ItemList({ isFetching, blacklistItems }: { isFetching: boolean, blacklistItems: BlacklistItem[] }) {
     if (isFetching){
         return(
             <div className="loader">
@@ -13,7 +13,7 @@ export default function ItemList({ isFetching, blacklistItems, showDialog }: { i
             <div className="list-container">
                 <div className="item-list">
                     {blacklistItems.map((item) => {
-                        return <Button onClick={() => showDialog(item)} variant="text">{item.link}</Button>
+                        return <Button variant="text">{item.link}</Button>
                     })}
                 </div>
             </div>

app/routes/home.tsx

@@ -1,10 +1,9 @@
 import {useEffect, useState} from "react";
 import '../assets/styles/home.css';
 import {
-    Box,
+    Divider,
-    Divider, Fab,
     TextField,
-    ThemeProvider, Typography,
+    ThemeProvider,
     useTheme
 } from "@mui/material";
 import {getAll} from '~/api';
@@ -12,8 +11,6 @@ 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();
@@ -21,9 +18,6 @@ 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;
@@ -48,16 +42,6 @@ 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">
@@ -74,34 +58,14 @@ export default function Home() {
                 <div style={{justifyItems: 'center'}}>
                     <Divider sx={{marginTop: '10px', marginBottom: '10px'}}/>
                 </div>
-                <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems} showDialog={handleItemClick}></ItemList>
+                <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems}></ItemList>
-                <ItemDialog blacklistItem={currentDialogBlacklistItem} open={showDialog} handleClose={handleDialogClose}></ItemDialog>
+                {/*<div className="list-container">*/}
-                <Fab
+                {/*    <div className="item-list">*/}
-                    onMouseEnter={() => setFabIsHovered(true)}
+                {/*        {blacklistItems.map((item, i) => {*/}
-                    onMouseLeave={() => setFabIsHovered(false)}
+                {/*            return <Button variant="text">{item.link}</Button>*/}
-                    variant={fabIsHovered ? 'extended' : 'circular'}
+                {/*        })}*/}
-                    sx={{
+                {/*    </div>*/}
-                        position: 'absolute',
+                {/*</div>*/}
-                        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>
     );