From 028ea11c18ca8c960b8c6ae8594148b54962a0c7 Mon Sep 17 00:00:00 2001
From: AINDUSTRIES <contact.aindustries@gmail.com>
Date: Thu, 30 Jul 2026 00:55:44 +0200
Subject: [PATCH] Revamped settings ui

---
 app/components/settings.tsx | 86 ++++++++++++++++++++++++++++---------
 1 file changed, 65 insertions(+), 21 deletions(-)

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index e338d04..e72f86d 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -1,4 +1,15 @@
-import { Modal, Button, InputGroup, Input, TextField } from "@heroui/react";
+import {
+    Modal,
+    Button,
+    InputGroup,
+    Input,
+    TextField,
+    Form,
+    Fieldset,
+    Description,
+    Label,
+    Typography,
+} from "@heroui/react";
 import type { Dispatch, SetStateAction } from "react";
 import { useAuth } from "~/hooks/auth";
 
@@ -9,43 +20,76 @@ export function Settings({
     show: boolean;
     setShow: Dispatch<SetStateAction<boolean>>;
 }) {
-    const {user, loading, login, logout} = useAuth();
+    const { user, loading, login, logout } = useAuth();
     return (
         <div>
             <Modal isOpen={show}>
                 <Modal.Backdrop
+                    variant="blur"
                     shouldCloseOnInteractOutside={(_element) => {
                         setShow(false);
                         return true;
                     }}
                 >
-                    <Modal.Container>
+                    <Modal.Container size="lg">
                         <Modal.Dialog>
                             <Modal.CloseTrigger
                                 onPress={() => {
                                     setShow(false);
                                 }}
                             />
-                            <Modal.Header>
-                                <Modal.Heading>Account settings</Modal.Heading>
-                            </Modal.Header>
                             <Modal.Body>
-                                <InputGroup>
-                                    <InputGroup.Prefix>Username</InputGroup.Prefix>
-                                    <InputGroup.Input defaultValue={user?.name}></InputGroup.Input>
-                                </InputGroup>
+                                <Form className="w-full">
+                                    <Fieldset>
+                                        <Typography.Heading level={3}>
+                                            Account settings.
+                                        </Typography.Heading>
+                                        <Typography.Paragraph size="sm">
+                                            Update your profile information
+                                            either manually or from Steam.{" "}
+                                            <br />
+                                            Change several settings concerning
+                                            some functionnalities of the app.
+                                        </Typography.Paragraph>
+                                        <Fieldset.Group>
+                                            <TextField name="username">
+                                                <Label>Username</Label>
+                                                <Input
+                                                    placeholder={user?.name}
+                                                    variant="secondary"
+                                                ></Input>
+                                            </TextField>
+                                            <TextField name="avatar">
+                                                <Label>Avatar URL</Label>
+                                                <Input
+                                                    placeholder={user?.avatar}
+                                                    variant="secondary"
+                                                ></Input>
+                                                <Description>
+                                                    The URL must be a valid
+                                                    image url.
+                                                </Description>
+                                            </TextField>
+                                        </Fieldset.Group>
+                                        <Fieldset.Actions className="flex justify-end">
+                                            <div className="flex-1">
+                                                <Button variant="tertiary">
+                                                    Load from Steam
+                                                </Button>
+                                            </div>
+                                            <Button
+                                                variant="secondary"
+                                                onPress={() => {
+                                                    setShow(false);
+                                                }}
+                                            >
+                                                Cancel
+                                            </Button>
+                                            <Button type="submit">Save</Button>
+                                        </Fieldset.Actions>
+                                    </Fieldset>
+                                </Form>
                             </Modal.Body>
-                            <Modal.Footer>
-                                <Button
-                                    variant="secondary"
-                                    onPress={() => {
-                                        setShow(false);
-                                    }}
-                                >
-                                    Cancel
-                                </Button>
-                                <Button>Save</Button>
-                            </Modal.Footer>
                         </Modal.Dialog>
                     </Modal.Container>
                 </Modal.Backdrop>