Add minimal UI for game requests

Fix some minor bugs

app/src/main/frontend/views/MainLayout.tsx

@@ -1,11 +1,21 @@
 import {useEffect, useState} from 'react';
 import ProfileMenu from "Frontend/components/ProfileMenu";
-import {Button, Divider, Link, Navbar, NavbarBrand, NavbarContent, NavbarItem, Tooltip} from "@heroui/react";
+import {
+    Button,
+    Divider,
+    Link,
+    Navbar,
+    NavbarBrand,
+    NavbarContent,
+    NavbarItem,
+    Tooltip,
+    useDisclosure
+} from "@heroui/react";
 import GameyfinLogo from "Frontend/components/theming/GameyfinLogo";
 import * as PackageJson from "../../../../package.json";
 import {Outlet, useLocation, useNavigate} from "react-router";
 import {useAuth} from "Frontend/util/auth";
-import {ArrowLeft, DiceSix, Heart, House, ListMagnifyingGlass, SignIn} from "@phosphor-icons/react";
+import {ArrowLeft, DiceSix, Heart, House, ListMagnifyingGlass, PlusCircle, SignIn} from "@phosphor-icons/react";
 import Confetti, {ConfettiProps} from "react-confetti-boom";
 import {useTheme} from "next-themes";
 import {useUserPreferenceService} from "Frontend/util/user-preference-service";
@@ -14,6 +24,7 @@ import {useSnapshot} from "valtio/react";
 import {gameState} from "Frontend/state/GameState";
 import ScanProgressPopover from "Frontend/components/general/ScanProgressPopover";
 import {isAdmin} from "Frontend/util/utils";
+import RequestGameModal from "Frontend/components/general/modals/RequestGameModal";
 
 export default function MainLayout() {
     const navigate = useNavigate();
@@ -26,6 +37,8 @@ export default function MainLayout() {
     const [isExploding, setIsExploding] = useState(false);
     const games = useSnapshot(gameState).games;
 
+    const requestGameModal = useDisclosure();
+
     useEffect(() => {
         userPreferenceService.sync()
             .then(() => loadUserTheme().catch(console.error))
@@ -93,7 +106,17 @@ export default function MainLayout() {
                         </Button>
                     </Tooltip>
                 </NavbarContent>}
-                <NavbarContent justify="end">
+                <NavbarContent justify="end" className="items-center">
+                    {auth.state.user &&
+                        <NavbarItem>
+                            <Tooltip content="Request a game" placement="bottom">
+                                <Button isIconOnly color="primary" variant="light"
+                                        onPress={requestGameModal.onOpen}>
+                                    <PlusCircle size={26} weight="fill"/>
+                                </Button>
+                            </Tooltip>
+                        </NavbarItem>
+                    }
                     {isAdmin(auth) &&
                         <NavbarItem>
                             <ScanProgressPopover/>
@@ -142,6 +165,10 @@ export default function MainLayout() {
                     </p>
                 </footer>
             </div>
+
+
+            <RequestGameModal isOpen={requestGameModal.isOpen}
+                              onOpenChange={requestGameModal.onOpenChange}/>
         </div>
     );
 }