Use PhosphorIcons instead of FontAwesome

Start implementation of setup process

frontend/App.tsx

@@ -3,16 +3,19 @@ import {AuthProvider} from 'Frontend/util/auth.js';
 import {RouterProvider} from 'react-router-dom';
 import "./main.css";
 import {ThemeProvider} from "@material-tailwind/react";
-import React from 'react';
+import {IconContext} from "@phosphor-icons/react";
+import {StrictMode} from "react";
 
 export default function App() {
     return (
-        <React.StrictMode>
+        <StrictMode>
             <AuthProvider>
                 <ThemeProvider>
-                    <RouterProvider router={router}/>
+                    <IconContext.Provider value={{size: 20}}>
+                        <RouterProvider router={router}/>
+                    </IconContext.Provider>
                 </ThemeProvider>
             </AuthProvider>
-        </React.StrictMode>
+        </StrictMode>
     );
 }

frontend/components/ProfileMenu.tsx

@@ -1,17 +1,9 @@
 import {useState} from "react";
 import {Button, Menu, MenuHandler, MenuItem, MenuList} from "@material-tailwind/react";
-import {
-    faChevronDown,
-    faChevronUp,
-    faCog,
-    faQuestionCircle,
-    faSignOut,
-    faUser
-} from "@fortawesome/free-solid-svg-icons";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {useAuth} from "Frontend/util/auth";
 import {Avatar} from "@hilla/react-components/Avatar";
 import {useNavigate} from "react-router-dom";
+import {CaretDown, CaretUp, GearFine, IconContext, Question, SignOut, User} from "@phosphor-icons/react";
 
 export default function ProfileMenu() {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -21,23 +13,23 @@ export default function ProfileMenu() {
     const profileMenuItems = [
         {
             label: "My Profile",
-            icon: faUser,
+            icon: <User/>,
             onClick: () => alert("Profile")
         },
         {
             label: "Administration",
-            icon: faCog,
+            icon: <GearFine/>,
             onClick: () => alert("Administration"),
             showIf: state.user?.authorities?.some(a => a?.includes("ADMIN"))
         },
         {
             label: "Help",
-            icon: faQuestionCircle,
+            icon: <Question/>,
             onClick: () => window.open("https://github.com/gameyfin/gameyfin/tree/v2", "_blank")
         },
         {
             label: "Sign Out",
-            icon: faSignOut,
+            icon: <SignOut/>,
             onClick: () => logout(),
             color: "red-500"
         },
@@ -54,10 +46,9 @@ export default function ProfileMenu() {
                         name={state.user?.name}
                         abbr={state.user?.name?.substring(0, 2)}
                     />
-                    <FontAwesomeIcon
-                        icon={isMenuOpen ? faChevronUp : faChevronDown}
-                        className="h-2 w-2"
-                    />
+                    <IconContext.Provider value={{size: 12}}>
+                        {isMenuOpen ? <CaretUp/> : <CaretDown/>}
+                    </IconContext.Provider>
                 </Button>
             </MenuHandler>
             <MenuList className="p-1">
@@ -71,7 +62,7 @@ export default function ProfileMenu() {
                                     color ? `hover:${color}/10 focus:${color}/10 active:${color}/10` : ""
                                 }`}
                             >
-                                <FontAwesomeIcon icon={icon} color={color ? color : ""} className="h-4 w-4"/>
+                                {icon}
                                 <p color={color ? color : ""}>{label}</p>
                             </MenuItem> : null
                     );

frontend/routes.tsx

@@ -3,6 +3,7 @@ import {createBrowserRouter, RouteObject} from 'react-router-dom';
 import LoginView from "Frontend/views/LoginView";
 import MainLayout from "Frontend/views/MainLayout";
 import TestView from "Frontend/views/TestView";
+import SetupView from "Frontend/views/SetupView";
 
 export const routes = protectRoutes([
     {
@@ -15,6 +16,10 @@ export const routes = protectRoutes([
     {
         path: '/login',
         element: <LoginView/>
+    },
+    {
+        path: '/setup',
+        element: <SetupView/>
     }
 ]) as RouteObject[];
 

frontend/views/LoginView.tsx

@@ -2,8 +2,7 @@ import {useAuth} from "Frontend/util/auth";
 import {useState} from "react";
 import {Link, useNavigate} from "react-router-dom";
 import {Alert, Button, Card, Input, Spinner, Typography} from "@material-tailwind/react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faCircleInfo, faCircleXmark} from "@fortawesome/free-solid-svg-icons";
+import {XCircle} from "@phosphor-icons/react";
 
 export default function LoginView() {
     const {state, login} = useAuth();
@@ -28,13 +27,13 @@ export default function LoginView() {
                     src="/images/Logo.svg"
                 />
                 <div className="mt-8 mb-2 w-80 max-w-screen-lg sm:w-96">
-                    { hasError &&
+                    {hasError &&
                         <Alert
-                            icon={ <FontAwesomeIcon icon={faCircleXmark}/> }
+                            icon={<XCircle color="white" weight="fill"/>}
                             className="mb-4 bg-red-500"
                         >
                             Wrong username and/or password
-                        </Alert> }
+                        </Alert>}
                     <form
                         className="mb-1 flex flex-col gap-6"
                         onSubmit={async e => {

frontend/views/SetupView.tsx

@@ -0,0 +1,90 @@
+import {Button, Card, Spinner, Step, Stepper, Typography} from "@material-tailwind/react";
+import {useState} from "react";
+import {ArrowLeft, ArrowRight, Check, GearFine, HandWaving, User} from "@phosphor-icons/react";
+
+export default function SetupView() {
+    const [activeStep, setActiveStep] = useState(0);
+    const [isLastStep, setIsLastStep] = useState(false);
+    const [isFirstStep, setIsFirstStep] = useState(false);
+    const [isLoading, setLoading] = useState(false);
+
+    const steps = [<WelcomeStep/>, <UserStep/>, <SettingsStep/>];
+
+    const handleNext = () => !isLastStep && setActiveStep((cur) => cur + 1);
+    const handlePrev = () => !isFirstStep && setActiveStep((cur) => cur - 1);
+    const finish = () => {
+        alert("Setup finished");
+    }
+
+    function WelcomeStep() {
+        return (
+            <div className="flex flex-col gap-12 w-full items-center">
+                <Typography variant="h4">Welcome to Gameyfin 👋</Typography>
+                <text className="w-1/3 min-w-[500px] text-justify">
+                    Gameyfin is a cutting-edge software tailored for gamers seeking efficient management of their video
+                    game collections. <br/><br/> With its intuitive interface and comprehensive features, Gameyfin
+                    simplifies the organization of game libraries. Users can effortlessly add games through manual input
+                    or
+                    automated recognition, categorize them based on various criteria like genre or platform, track
+                    in-game
+                    progress, and share achievements with friends. <br/><br/> Notably, Gameyfin stands out for its
+                    user-friendly
+                    design and adaptability, offering ample customization options to meet diverse user preferences.
+                </text>
+                <Typography variant="h5">Let's get started!</Typography>
+            </div>
+        );
+    }
+
+    function UserStep() {
+        return (
+            <>
+            </>
+        );
+    }
+
+    function SettingsStep() {
+        return (
+            <>
+            </>
+        );
+    }
+
+    return (
+        <div className="flex h-screen">
+            <div className="fixed size-full bg-gradient-to-br from-gf-primary to-gf-secondary"></div>
+            <Card className="w-3/4 h-3/4 m-auto p-8" shadow={true}>
+                <div className="w-full mb-8">
+                    <Stepper
+                        activeStep={activeStep}
+                        isLastStep={(value) => setIsLastStep(value)}
+                        isFirstStep={(value) => setIsFirstStep(value)}
+                    >
+                        <Step onClick={() => setActiveStep(0)}>
+                            <HandWaving/>
+                        </Step>
+                        <Step onClick={() => setActiveStep(1)}>
+                            <User/>
+                        </Step>
+                        <Step onClick={() => setActiveStep(2)}>
+                            <GearFine/>
+                        </Step>
+                    </Stepper>
+                </div>
+                <div className="flex flex-grow justify-center">
+                    {steps[activeStep]}
+                </div>
+                <div className="bottom-0 w-full">
+                    <div className="flex justify-between">
+                        <Button onClick={handlePrev} disabled={isFirstStep} className="rounded-full">
+                            <ArrowLeft/>
+                        </Button>
+                        <Button onClick={isLastStep ? finish : handleNext} className="rounded-full">
+                            {isLoading ? <Spinner/> : isLastStep ? <Check/> : <ArrowRight/>}
+                        </Button>
+                    </div>
+                </div>
+            </Card>
+        </div>
+    );
+}