app/assets/styles/home.css

@@ -71,30 +71,6 @@
     margin-top: 10px;
 }
 
-@media (width <= 570px) {
-
-    .report-tag-list {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
-    }
-
-    .report-tag {
-        > .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-comment:hover {
     background-color: #383d49;
     cursor: default;

app/components/itemDialog.tsx

@@ -4,46 +4,29 @@ import NicknameList from "~/components/itemDialog/nicknameList";
 import CommentsList from "~/components/itemDialog/commentsList";
 import TagList from "~/components/itemDialog/tagList";
 import TitleHeader from "~/components/itemDialog/titleHeader";
-import useWindowDimensions from "~/hooks/windowDimensions";
-import trimLink from "~/functions/trimLink";
 
 export default function ItemDialog({ blacklistItem, open, handleClose }: { blacklistItem: BlacklistItem|null, open: boolean, handleClose: Function }){
-    if (blacklistItem){
+    return (
-        const { width } = useWindowDimensions();
+        <Dialog
-        return (
+            open={open}
-            <Dialog
+            onClose={() => handleClose()}
-                open={open}
+        >
-                onClose={() => handleClose()}
+            <DialogTitle>
-            >
+                <TitleHeader name={blacklistItem?.link} handleClose={handleClose}/>
-                <DialogTitle>
+                <TagList
-                    <TitleHeader name={width < 570 ? trimLink(blacklistItem?.link) : blacklistItem?.link} handleClose={handleClose}/>
+                    afk={blacklistItem?.afk}
-                    <TagList
+                    cheater={blacklistItem?.cheater}
-                        afk={blacklistItem?.afk}
+                    griefer={blacklistItem?.griefer}
-                        cheater={blacklistItem?.cheater}
+                    toxic={blacklistItem?.toxic}
-                        griefer={blacklistItem?.griefer}
+                    useless={blacklistItem?.useless}
-                        toxic={blacklistItem?.toxic}
+                    smurf={blacklistItem?.smurf}
-                        useless={blacklistItem?.useless}
+                />
-                        smurf={blacklistItem?.smurf}
+            </DialogTitle>
-                    />
+            <Divider sx={{marginTop: '10px', marginBottom: '10px', alignSelf: 'center'}}/>
-                </DialogTitle>
+            <DialogContent>
-                <Divider sx={{marginTop: '10px', marginBottom: '10px', alignSelf: 'center'}}/>
+                <NicknameList nicknames={blacklistItem?.nicknames}/>
-                <DialogContent>
+                <CommentsList comments={blacklistItem?.comments}/>
-                    <NicknameList nicknames={blacklistItem?.nicknames}/>
+            </DialogContent>
-                    <CommentsList comments={blacklistItem?.comments}/>
+        </Dialog>
-                </DialogContent>
+    )
-            </Dialog>
-        )
-    } else {
-        return (
-            <Dialog
-                open={open}
-                onClose={() => handleClose()}
-            >
-                <DialogContent>
-                    Error: No item
-                </DialogContent>
-            </Dialog>
-        )
-    }
-
 }

app/components/itemList.tsx

@@ -1,7 +1,5 @@
 import {BlacklistItem} from "~/classes/blacklistItem";
 import {Button, CircularProgress} from "@mui/material";
-import useWindowDimensions from "~/hooks/windowDimensions";
-import trimLink from "~/functions/trimLink";
 
 export default function ItemList({ isFetching, blacklistItems, showDialog }: { isFetching: boolean, blacklistItems: BlacklistItem[], showDialog: Function }) {
     if (isFetching){
@@ -12,12 +10,11 @@ export default function ItemList({ isFetching, blacklistItems, showDialog }: { i
         )
     } else {
         if (blacklistItems.length > 0){
-            const { width } = useWindowDimensions();
             return (
                 <div className="list-container">
                     <div className="item-list">
                         {blacklistItems.map((item) => {
-                            return <Button onClick={() => showDialog(item)} variant="text">{width < 570 ? trimLink(item.link) : item.link}</Button>
+                            return <Button onClick={() => showDialog(item)} variant="text">{item.link}</Button>
                         })}
                     </div>
                 </div>

app/components/reportDialog.tsx

@@ -1,3 +1,4 @@
+import type {BlacklistItem} from "~/classes/blacklistItem";
 import {
     Button,
     Checkbox,
@@ -40,16 +41,8 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han
 
     const handleSend = async () => {
         setLoading(true);
-
-        let cleanLink = link.trim().toLowerCase();
-
-        if (cleanLink.endsWith('/')) {
-            cleanLink = cleanLink.slice(0, -1);
-        }
-
-        setLink(cleanLink);
         let blacklistReport = new BlacklistReport(
-            cleanLink,
+            link,
             nickname,
             comment,
             afk,
@@ -59,9 +52,8 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han
             useless,
             smurf
         );
-
         await sendReport(blacklistReport).then((result: boolean) => {
-            setLoading(false);
+            setLoading(true);
             clearValues();
             handleClose();
         });
@@ -146,7 +138,7 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han
                         />
                     </div>
                     <div style={{width: '100%', display: 'flex', justifyContent: 'space-around'}}>
-                        <Button loading={loading} onClick={() => handleSend()} variant="contained">Send</Button>
+                        <Button onClick={() => handleSend()} variant="contained">Send</Button>
                         <Button onClick={() => handleClose()} variant="outlined">Cancel</Button>
                     </div>
                 </DialogContent>

app/functions/trimLink.ts

@@ -1,9 +0,0 @@
-export default function trimLink(link: string){
-    if (link.includes('/id')){
-        return link.split('/id')[1];
-    } else if (link.includes('/profiles')){
-        return link.split('/profiles')[1];
-    } else {
-        return link;
-    }
-}

app/hooks/windowDimensions.ts

@@ -1,27 +0,0 @@
-import { useState, useEffect } from "react";
-
-export default function useWindowDimensions() {
-    // На сервере инициализируем значениями по умолчанию (0 или null)
-    const [dimensions, setDimensions] = useState({
-        width: typeof window !== 'undefined' ? window.innerWidth : 0,
-        height: typeof window !== 'undefined' ? window.innerHeight : 0,
-    });
-
-    useEffect(() => {
-        // Этот код гарантированно выполнится ТОЛЬКО в браузере
-        function handleResize() {
-            setDimensions({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-
-        // Устанавливаем точные размеры сразу при монтировании
-        handleResize();
-
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-
-    return dimensions;
-}