From f186279ee63e2d11d69c31f597d11b37f267299a Mon Sep 17 00:00:00 2001
From: Dhaverd <jedi55@mail.ru>
Date: Sat, 9 May 2026 00:09:38 +0800
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=D0=BC=D1=83=D1=82=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=B7=D1=83=D0=B0=D0=BB=20FAB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/mui/themes/home.ts | 14 ++++++++++++++
 app/routes/home.tsx           | 33 +++++++++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/app/assets/mui/themes/home.ts b/app/assets/mui/themes/home.ts
index 06c93d0..6651ae0 100644
--- a/app/assets/mui/themes/home.ts
+++ b/app/assets/mui/themes/home.ts
@@ -78,6 +78,20 @@ const customTheme = (outerTheme: Theme) =>
                         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)',
+                        },
+                    }
+                }
             }
         }
     });
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index f69388c..cd1341d 100644
--- a/app/routes/home.tsx
+++ b/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';
@@ -12,6 +13,7 @@ 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,6 +23,7 @@ export default function Home() {
     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;
@@ -73,6 +76,32 @@ export default function Home() {
                 </div>
                 <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems} showDialog={handleItemClick}></ItemList>
                 <ItemDialog blacklistItem={currentDialogBlacklistItem} open={showDialog} handleClose={handleDialogClose}></ItemDialog>
+                <Fab
+                    onMouseEnter={() => setFabIsHovered(true)}
+                    onMouseLeave={() => setFabIsHovered(false)}
+                    variant={fabIsHovered ? 'extended' : 'circular'}
+                    sx={{
+                        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>
     );