Using the new category to filter skins shown in the right panel

.gitignore

@@ -6,3 +6,5 @@ pnpm-lock.yaml
 # React Router
 /.react-router/
 /build/
+
+public/skins/

app/components/agent.tsx

@@ -0,0 +1,14 @@
+import { Surface } from "@heroui/react";
+import type { AgentInfo } from "~/types/skin";
+
+export function Agent({ agent }: { agent: AgentInfo }) {
+    return (
+        <Surface className="bg-[#1f2937] flex justify-center flex-1 min-h-0 p-4">
+            <img
+                src={`/skins/${agent.name}_big.png`}
+                className="pointer-events-none object-contain object-bottom h-full w-full"
+                alt="Agent image"
+            />
+        </Surface>
+    );
+}

app/components/float.tsx

@@ -0,0 +1,85 @@
+import { Slider, Label, Typography, Input } from "@heroui/react";
+import {
+    useEffect,
+    type ChangeEvent,
+    type Dispatch,
+    type SetStateAction,
+} from "react";
+import { AgentInfo, WeaponInfo } from "~/types/skin";
+
+export function Float({
+    skin,
+    setSkin,
+    acceptInput = false,
+    hasLabel = false,
+}: {
+    skin: WeaponInfo;
+    setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>;
+    minFloat?: number;
+    maxFloat?: number;
+    acceptInput?: boolean;
+    hasLabel?: boolean;
+}) {
+    useEffect(() => {
+        const newSkin = new WeaponInfo(skin);
+        newSkin.float = Math.max(
+            skin.min_float,
+            Math.min(skin.max_float, skin.float),
+        );
+        setSkin(newSkin);
+    }, [skin.min_float, skin.max_float]);
+
+    const handleChange = (newValue: number | number[]) => {
+        const val = Array.isArray(newValue) ? newValue[0] : newValue;
+        const newSkin = new WeaponInfo(skin);
+        newSkin.float = Math.max(skin.min_float, Math.min(skin.max_float, val));
+        setSkin(newSkin);
+    };
+
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const val = event.currentTarget.valueAsNumber;
+        const newSkin = new WeaponInfo(skin);
+        newSkin.float = Math.max(skin.min_float, Math.min(skin.max_float, val));
+        setSkin(newSkin);
+    };
+
+    return (
+        <>
+            {hasLabel && (
+                <div className="flex items-center gap-2">
+                    <Typography.Paragraph>Float</Typography.Paragraph>
+                    <Input
+                        className="flex-1"
+                        id="float"
+                        type="number"
+                        step={0.0001}
+                        value={skin.float}
+                        onChange={handleInputChange}
+                    />
+                </div>
+            )}
+            <Slider
+                value={skin.float}
+                maxValue={1}
+                step={0.0001}
+                onChange={handleChange}
+            >
+                <Slider.Track
+                    className="border-0 h-2 rounded-xl"
+                    style={{
+                        background:
+                            "linear-gradient(90deg, var(--color-green-800) 7%, var(--color-green-500) 7%, var(--color-green-500) 15%, var(--color-lime-400) 15%, var(--color-lime-400) 38%, var(--color-orange-400) 38%, var(--color-orange-400) 38%, var(--color-orange-400) 45%, var(--color-red-400) 45%",
+                    }}
+                >
+                    <div
+                        className="h-full rounded-xl"
+                        style={{
+                            background: `linear-gradient(90deg, rgba(0, 0, 0, 0.8) ${skin.min_float * 100}%, transparent ${skin.min_float * 100}%, transparent ${skin.max_float * 100}%, rgba(0, 0, 0, 0.8) ${skin.max_float * 100}%)`,
+                        }}
+                    />
+                    <Slider.Thumb className="w-1" isDisabled={!acceptInput} />
+                </Slider.Track>
+            </Slider>
+        </>
+    );
+}

app/components/header.tsx

@@ -44,7 +44,7 @@ export function Header() {
                 <img className="h-12" src={porning} alt="Porning logo" />
                 </div>
                 <ButtonGroup >
-                    <Button onClick={() => {window.open("steam://rungame/730//+connect cs.p0rning.com", "_blank")}}><Typography.Paragraph>Connect to server</Typography.Paragraph></Button>
+                    <Button onClick={() => {window.open(`steam://connect/${import.meta.env.VITE_SERVER_IP}`, "_blank")}}><Typography.Paragraph>Connect to server</Typography.Paragraph></Button>
                     <User>
                     <ButtonGroup.Separator />
                     </User>

app/components/inventory.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useState } from "react";
+import { Skeleton, Surface } from "@heroui/react";
+import { Agent } from "./agent";
+import { SkinTile } from "./skin_tile";
+import { useNotification } from "~/hooks/notification";
+import { WeaponInfo, AgentInfo } from "~/types/skin";
+import { useApi } from "~/hooks/api";
+
+export function Inventory({ side }: { side: "T" | "CT" }) {
+    const [loading, setLoading] = useState(true);
+    const [agent, setAgent] = useState<AgentInfo>();
+    const [gloves, setGloves] = useState<WeaponInfo>();
+    const [knife, setKnife] = useState<WeaponInfo>();
+    const [weapons, setWeapons] = useState<Array<WeaponInfo>>([]);
+    const { notify } = useNotification();
+    const { get } = useApi();
+
+    const setWeapon = (index:number, newWeapon:WeaponInfo) => {
+        setWeapons(weapons.map((v,i) => (i===index ? newWeapon: v)))
+    }
+
+    useEffect(() => {
+        const fetch_weapons = async () => {
+            let [success, data] = await get(`skin?team=${side}&category=Knives`)
+
+            setKnife(new WeaponInfo(data[0]));
+
+            [success, data] = await get(`skin?team=${side}&category=Gloves`)
+
+            setGloves(new WeaponInfo(data[0]));
+
+            [success, data] = await get(`skin?team=${side}&category=Weapons`);
+
+            setWeapons(data.map((item: any) => (new WeaponInfo(item))));
+
+            [success, data] = await get(`agent?team=${side}`);
+
+            setAgent(new AgentInfo(data));
+
+            setLoading(false);
+        };
+
+        if (loading) fetch_weapons();
+    }, [loading]);
+
+    useEffect(() => {
+        setLoading(true);
+    }, [side]);
+
+    if (loading) {
+        return (
+            <div className="flex flex-1 gap-2 min-h-0">
+                <Surface
+                    className="flex flex-col rounded-xl w-1/3 p-4 gap-2"
+                    variant="secondary"
+                >
+                    <Skeleton className="flex-1 h-55 w-full rounded-xl" />
+                    <div className="flex gap-2">
+                        <Skeleton className="flex-1 h-55 rounded-xl" />
+                        <Skeleton className="flex-1 h-55 rounded-xl" />
+                        <Skeleton className="flex-1 h-55 rounded-xl" />
+                    </div>
+                </Surface>
+                <Surface
+                    className="flex-1 flex flex-col rounded-xl w-2/3 p-4"
+                    variant="secondary"
+                >
+                    <div className="absolute inset-4 flex-1 grid grid-cols-5 gap-2 overflow-y-scroll">
+                        {Array.from({ length: 50 }, (_, index) => (
+                            <Skeleton
+                                key={index}
+                                className="flex-1 h-55 rounded-xl"
+                            />
+                        ))}
+                    </div>
+                </Surface>
+            </div>
+        );
+    } else {
+        return (
+            <div className="flex flex-1 gap-2 min-h-0">
+                <Surface
+                    className="flex flex-col rounded-xl w-1/3 p-4 gap-2 min-h-0"
+                    variant="secondary"
+                >
+                    {agent && <Agent agent={agent}></Agent>}
+                    <div className="flex gap-2">
+                        {knife && (
+                            <SkinTile
+                                skin={knife}
+                                setSkin={(newSkin) => setKnife(newSkin as WeaponInfo)}
+                                side={side}
+                            ></SkinTile>
+                        )}
+                        {gloves && (
+                            <SkinTile
+                                skin={gloves}
+                                setSkin={(newSkin) => setGloves(newSkin as WeaponInfo)}
+                                side={side}
+                            ></SkinTile>
+                        )}
+                        {agent && (
+                            <SkinTile
+                                skin={agent}
+                                setSkin={(newSkin) => setAgent(newSkin as AgentInfo)}
+                                side={side}
+                            ></SkinTile>
+                        )}
+                    </div>
+                </Surface>
+                <Surface
+                    className="flex-1 flex flex-col rounded-xl w-2/3 p-4"
+                    variant="secondary"
+                >
+                    <div className="absolute inset-4 flex-1 grid grid-cols-5 gap-2 overflow-y-scroll">
+                        {weapons.map((v, i) => (
+                            <SkinTile
+                                key={i}
+                                skin={v}
+                                setSkin={(newWeapon) => setWeapon(i, newWeapon as WeaponInfo)}
+                                side={side}
+                            />
+                        ))}
+                    </div>
+                </Surface>
+            </div>
+        );
+    }
+}

app/components/notification.tsx

@@ -14,7 +14,7 @@ export function Notification({
     message,
 }: NotificationType) {
     return (
-        <div className="flex justify-center fixed top-12 w-dvw z-50">
+        <div className="flex justify-center fixed top-12 w-dvw z-1000">
             <Alert className="w-fit h-fit border border-white" status={type}>
                 {loading ? (
                     <Alert.Indicator>

app/components/settings.tsx

@@ -1,7 +1,6 @@
 import {
     Modal,
     Button,
-    InputGroup,
     Input,
     TextField,
     Form,
@@ -9,9 +8,14 @@ import {
     Description,
     Label,
     Typography,
+    Spinner,
+    AlertDialog,
+    useOverlayState,
 } from "@heroui/react";
-import type { Dispatch, SetStateAction } from "react";
+import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
+import { useApi } from "~/hooks/api";
 import { useAuth } from "~/hooks/auth";
+import { useNotification } from "~/hooks/notification";
 
 export function Settings({
     show,
@@ -20,13 +24,89 @@ export function Settings({
     show: boolean;
     setShow: Dispatch<SetStateAction<boolean>>;
 }) {
-    const { user, loading, login, logout } = useAuth();
+    const { user, update, logout } = useAuth();
+    const { notify } = useNotification();
+    const [loading, setLoading] = useState(false);
+    const [canClose, setCanClose] = useState(true);
+    const deleteState = useOverlayState();
+    const { get, post } = useApi();
+
+    useEffect(() => {
+        if (!deleteState.isOpen) {
+            setTimeout(() => {
+                setCanClose(true);
+            }, 100);
+        }
+    }, [deleteState]);
+
+    const notifySucess = () => {
+        notify(
+            {
+                type: "success",
+                loading: false,
+                title: "Settings successfully updated!",
+                message: "",
+            },
+            2000,
+        );
+    };
+
+    const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const data: Record<string, string> = {};
+
+        // Convert FormData to plain object
+        formData.forEach((value, key) => {
+            data[key] = value.toString();
+        });
+
+        const save = async () => {
+            setLoading(true);
+            let ok = await post("update", data);
+
+            if (ok) {
+                await update();
+                notifySucess();
+            }
+            setLoading(false);
+        };
+
+        save();
+    };
+
+    const loadFromSteam = async () => {
+        setLoading(true);
+        let [ok, _] = await get("reload");
+        
+        if (ok) {
+            await update();
+            notifySucess();
+        }
+
+        setLoading(false);
+    };
+
+    const deleteAccount = async () => {
+        setLoading(true);
+        let [ok, _] = await get("delete");
+
+        if (ok) {
+            await logout();
+            notifySucess();
+        }
+
+        setLoading(false);
+        deleteState.close();
+    };
+
     return (
         <div>
             <Modal isOpen={show}>
                 <Modal.Backdrop
                     variant="blur"
                     shouldCloseOnInteractOutside={(_element) => {
+                        if (!canClose) return false;
                         setShow(false);
                         return true;
                     }}
@@ -39,14 +119,14 @@ export function Settings({
                                 }}
                             />
                             <Modal.Body>
-                                <Form className="w-full">
+                                <Form className="w-full" onSubmit={onSubmit}>
                                     <Fieldset>
                                         <Typography.Heading level={3}>
                                             Account settings.
                                         </Typography.Heading>
                                         <Typography.Paragraph size="sm">
                                             Update your profile information
-                                            either manually or from Steam.{" "}
+                                            either manually or from Steam.
                                             <br />
                                             Change several settings concerning
                                             some functionnalities of the app.
@@ -70,22 +150,67 @@ export function Settings({
                                                     image url.
                                                 </Description>
                                             </TextField>
+                                            <Button
+                                                className="w-full"
+                                                variant="tertiary"
+                                                isPending={loading}
+                                                onPress={() => {
+                                                    loadFromSteam();
+                                                }}
+                                            >
+                                                {loading ? (
+                                                    <Spinner
+                                                        color="current"
+                                                        size="md"
+                                                    />
+                                                ) : (
+                                                    "Load from Steam"
+                                                )}
+                                            </Button>
                                         </Fieldset.Group>
                                         <Fieldset.Actions className="flex justify-end">
                                             <div className="flex-1">
-                                                <Button variant="tertiary">
+                                                <Button
-                                                    Load from Steam
+                                                    variant="danger"
+                                                    isPending={loading}
+                                                    onPress={() => {
+                                                        deleteState.open();
+                                                        setCanClose(false);
+                                                    }}
+                                                >
+                                                    {loading ? (
+                                                        <Spinner
+                                                            color="current"
+                                                            size="md"
+                                                        />
+                                                    ) : (
+                                                        "Delete account"
+                                                    )}
                                                 </Button>
                                             </div>
+
                                             <Button
                                                 variant="secondary"
                                                 onPress={() => {
                                                     setShow(false);
                                                 }}
+                                                isPending={loading}
                                             >
                                                 Cancel
                                             </Button>
-                                            <Button type="submit">Save</Button>
+                                            <Button
+                                                type="submit"
+                                                isPending={loading}
+                                            >
+                                                {loading ? (
+                                                    <Spinner
+                                                        color="current"
+                                                        size="md"
+                                                    />
+                                                ) : (
+                                                    "Save"
+                                                )}
+                                            </Button>
                                         </Fieldset.Actions>
                                     </Fieldset>
                                 </Form>
@@ -94,6 +219,50 @@ export function Settings({
                     </Modal.Container>
                 </Modal.Backdrop>
             </Modal>
+            <AlertDialog>
+                <AlertDialog.Backdrop
+                    isOpen={deleteState.isOpen}
+                    onOpenChange={deleteState.setOpen}
+                >
+                    <AlertDialog.Container>
+                        <AlertDialog.Dialog>
+                            <AlertDialog.CloseTrigger />
+                            <AlertDialog.Header>
+                                <AlertDialog.Icon status="danger" />
+                                <AlertDialog.Heading>
+                                    Delete account permanently?
+                                </AlertDialog.Heading>
+                            </AlertDialog.Header>
+                            <AlertDialog.Body>
+                                <p>
+                                    This will permanently delete your account
+                                    and all of its data. This action cannot be
+                                    undone.
+                                </p>
+                            </AlertDialog.Body>
+                            <AlertDialog.Footer>
+                                <Button slot="close" variant="tertiary">
+                                    {loading ? (
+                                        <Spinner color="current" size="md" />
+                                    ) : (
+                                        "Cancel"
+                                    )}
+                                </Button>
+                                <Button
+                                    onClick={deleteAccount}
+                                    variant="danger"
+                                >
+                                    {loading ? (
+                                        <Spinner color="current" size="md" />
+                                    ) : (
+                                        "Delete account"
+                                    )}
+                                </Button>
+                            </AlertDialog.Footer>
+                        </AlertDialog.Dialog>
+                    </AlertDialog.Container>
+                </AlertDialog.Backdrop>
+            </AlertDialog>
         </div>
     );
 }

app/components/skin_dialog.tsx

@@ -0,0 +1,182 @@
+import { Button, Input, Modal, Surface, Typography } from "@heroui/react";
+import {
+    useEffect,
+    useState,
+    type ChangeEvent,
+    type Dispatch,
+    type SetStateAction,
+} from "react";
+import { AgentInfo, WeaponInfo } from "~/types/skin";
+import { Float } from "./float";
+import { SkinSelector } from "./skin_selector";
+
+export function SkinDialog({
+    isOpen,
+    setIsOpen,
+    skin,
+    setSkin,
+    side,
+}: {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    skin: WeaponInfo | AgentInfo;
+    setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>;
+    side: "T" | "CT";
+}) {
+    const [selectorOpen, setSelectorOpen] = useState(false);
+    const [canClose, setCanClose] = useState(true);
+    const [localSkin, setLocalSkin] = useState(skin);
+    const acolor = `${localSkin.color}64`;
+
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        if (localSkin instanceof AgentInfo) return;
+        const newSkin = new WeaponInfo(localSkin);
+        newSkin.pattern = event.currentTarget.valueAsNumber;
+        setLocalSkin(newSkin);
+    };
+
+    const applySkin = (side: "SIDE" | "BOTH") => {
+        setSkin(localSkin);
+    };
+
+    useEffect(() => {
+        if (!selectorOpen) {
+            setTimeout(() => {
+                setCanClose(true);
+            }, 100);
+        }
+    }, [selectorOpen]);
+
+    useEffect(() => {
+        if (isOpen) {
+            setLocalSkin(skin);
+        }
+    }, [isOpen, skin]);
+
+    return (
+        <>
+            <Modal isOpen={isOpen}>
+                <Modal.Backdrop
+                    variant="blur"
+                    shouldCloseOnInteractOutside={(_element) => {
+                        if (canClose) {
+                            setIsOpen(false);
+                        }
+                        return canClose;
+                    }}
+                >
+                    <Modal.Container size="lg">
+                        <Modal.Dialog>
+                            <Modal.CloseTrigger
+                                onPress={() => {
+                                    if (!selectorOpen) {
+                                        setIsOpen(false);
+                                    }
+                                }}
+                            />
+                            <Modal.Body>
+                                <div className="flex flex-col gap-2">
+                                    <Typography.Heading
+                                        level={4}
+                                        className="py-1 text-wrap"
+                                    >
+                                        {localSkin.display}
+                                    </Typography.Heading>
+                                    <div className="gap-0">
+                                        <div className="bg-mist-700 flex flex-col h-full p-0 rounded-none gap-0 w-full">
+                                            <div
+                                                className="bg-linear-to-b pointer-events-none w-full h-full relative"
+                                                style={{
+                                                    background: `linear-gradient(to bottom, #1f2937, ${acolor})`,
+                                                }}
+                                            >
+                                                <img
+                                                    src={`/skins/${localSkin.name}_${localSkin instanceof WeaponInfo ? localSkin.paint_index : 0}.png`}
+                                                    className="pointer-events-none object-contain object-bottom h-full"
+                                                    alt="Weapon image"
+                                                />
+                                            </div>
+                                            <div
+                                                className={`h-1 w-full`}
+                                                style={{
+                                                    background: `${localSkin.color}`,
+                                                }}
+                                            ></div>
+                                        </div>
+                                    <Button
+                                        onClick={() => {
+                                            setCanClose(false);
+                                            setSelectorOpen(true);
+                                        }}
+                                        className="w-full rounded-b-xl rounded-t-none"
+                                    >
+                                        Change skin
+                                    </Button>
+                                    </div>
+                                    {localSkin instanceof WeaponInfo && (
+                                        <Float
+                                            skin={localSkin}
+                                            setSkin={setLocalSkin}
+                                            acceptInput
+                                            hasLabel
+                                        />
+                                    )}
+                                    {localSkin instanceof WeaponInfo && (
+                                        <div className="flex items-center gap-2">
+                                            <Typography.Paragraph>
+                                                Pattern:{" "}
+                                            </Typography.Paragraph>
+                                            <Input
+                                                className="flex-1"
+                                                id="pattern"
+                                                type="number"
+                                                step={1}
+                                                value={localSkin.pattern}
+                                                onChange={handleInputChange}
+                                            />
+                                        </div>
+                                    )}
+                                    <Typography.Code>
+                                        Transaction id: {localSkin.id}
+                                    </Typography.Code>
+                                    <div className="flex gap-2 justify-end">
+                                        <div className="flex-1">
+                                            <Button>Inspect</Button>
+                                        </div>
+                                        {localSkin instanceof WeaponInfo && (
+                                            <Button
+                                                onClick={() => {
+                                                    applySkin("BOTH");
+                                                }}
+                                                variant="secondary"
+                                            >
+                                                Apply to Both
+                                            </Button>
+                                        )}
+                                        <Button
+                                            onClick={() => {
+                                                applySkin("SIDE");
+                                            }}
+                                        >
+                                            Apply
+                                            {localSkin instanceof WeaponInfo
+                                                ? ` to ${side}`
+                                                : ""}
+                                        </Button>
+                                    </div>
+                                </div>
+                            </Modal.Body>
+                        </Modal.Dialog>
+                    </Modal.Container>
+                </Modal.Backdrop>
+            </Modal>
+            <SkinSelector
+                isOpen={selectorOpen}
+                setIsOpen={setSelectorOpen}
+                skin={localSkin}
+                setSkin={setLocalSkin}
+                side={side}
+            />
+        </>
+    );
+}

app/components/skin_selector.tsx

@@ -0,0 +1,116 @@
+import { Button, Modal, Typography } from "@heroui/react";
+import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
+import { useApi } from "~/hooks/api";
+import { useNotification } from "~/hooks/notification";
+import { AgentInfo, WeaponInfo } from "~/types/skin";
+
+interface Info {
+    name: string;
+    paint_index: number;
+    display: string;
+    color: string;
+    min_float: number;
+    max_float: number;
+}
+
+export function SkinSelector({
+    isOpen,
+    setIsOpen,
+    skin,
+    setSkin,
+    side,
+}: {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    skin: WeaponInfo | AgentInfo;
+    setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>;
+    side: "T" | "CT" | "BOTH";
+}) {
+    const [skins, setSkins] = useState<Array<Info>>([]);
+    const { notify } = useNotification();
+    const { get } = useApi();
+
+    const setPaint = (v: Info) => {
+        if (skin instanceof WeaponInfo) {
+            const newSkin = new WeaponInfo(skin);
+            newSkin.name = v.name;
+            newSkin.paint_index = v.paint_index;
+            newSkin.display = v.display === "" ? newSkin.display : newSkin.display.split("|")[0] + " | " + v.display;
+            newSkin.min_float = v.min_float;
+            newSkin.max_float = v.max_float;
+            newSkin.color = v.color;
+            setSkin(newSkin);
+        } else {
+            const newSkin = new AgentInfo(skin);
+            newSkin.name = v.name;
+            newSkin.color = v.color;
+            setSkin(newSkin);
+        }
+    };
+
+    useEffect(() => {
+        const fetchSkins = async () => {
+            let [_, response] = await get(`index?weapon=${skin.weapon_id}&team=${side}${skin instanceof AgentInfo ? "&agent=true" : ""}&gloves=${skin.name.includes("gloves") || skin.name.includes("wraps")}`)
+
+            setSkins(response);
+        };
+        if (skins.length === 0 && isOpen) {
+            fetchSkins();
+        }
+    }, [isOpen]);
+
+    return (
+        <Modal isOpen={isOpen}>
+            <Modal.Backdrop
+                variant="blur"
+                shouldCloseOnInteractOutside={(_element) => {
+                    setIsOpen(false);
+                    return true;
+                }}
+            >
+                <Modal.Container size="cover">
+                    <Modal.Dialog>
+                        <Modal.CloseTrigger
+                            onPress={() => {
+                                setIsOpen(false);
+                            }}
+                        />
+                        <Modal.Body className="mt-6">
+                            <div className="grid grid-cols-4 gap-2">
+                                {skins &&
+                                    skins.map((v, i) => (
+                                        <Button
+                                            onClick={() => {
+                                                setPaint(v);
+                                                setIsOpen(false);
+                                            }}
+                                            className="flex flex-col w-full h-fit items-center justify-start rounded-none p-0"
+                                            style={{
+                                                background: `linear-gradient(to bottom, #1f2937, ${v.color}64)`,
+                                            }}
+                                        >
+                                            <img
+                                                key={i}
+                                                src={`/skins/${v.name}_${skin instanceof WeaponInfo ? v.paint_index : 0}.png`}
+                                                className="pointer-events-none object-contain object-bottom"
+                                                alt="Weapon image"
+                                            />
+                                            <Typography.Heading level={3}>
+                                                {v.display}
+                                            </Typography.Heading>
+                                            <div
+                                                className="h-1 w-full"
+                                                style={{
+                                                    backgroundColor: v.color,
+                                                }}
+                                            ></div>
+                                        </Button>
+                                    ))}
+                            </div>
+                        </Modal.Body>
+                    </Modal.Dialog>
+                </Modal.Container>
+            </Modal.Backdrop>
+        </Modal>
+    );
+}

app/components/skin_tile.tsx

@@ -0,0 +1,68 @@
+import { Button, Typography } from "@heroui/react";
+import { Float } from "./float";
+import { useState, type Dispatch, type SetStateAction } from "react";
+import { SkinDialog } from "./skin_dialog";
+import { WeaponInfo, AgentInfo } from "~/types/skin";
+
+export function SkinTile({
+    skin,
+    setSkin,
+    side,
+}: {
+    skin: WeaponInfo | AgentInfo;
+    setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>
+    side: "T" | "CT";
+}) {
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const acolor = `${skin.color}64`;
+    return (
+        <>
+            <SkinDialog
+                isOpen={isDialogOpen}
+                setIsOpen={setIsDialogOpen}
+                skin={skin}
+                setSkin={setSkin}
+                side={side}
+            />
+            <Button
+                onClick={() => setIsDialogOpen(true)}
+                className="bg-mist-700 flex flex-col h-full p-0 rounded-none gap-0 hover:bg-indigo-800 active:bg-indigo-900"
+            >
+                <div className="flex flex-col w-full h-full">
+                    <div
+                        className="bg-linear-to-b pointer-events-none w-full h-full"
+                        style={{
+                            background: `linear-gradient(to bottom, #1f2937, ${acolor})`,
+                        }}
+                    >
+                        <img
+                            src={`/skins/${skin.name}_${skin instanceof WeaponInfo ? skin.paint_index : 0}.png`}
+                            className="pointer-events-none object-contain object-bottom h-full"
+                            alt="Weapon image"
+                        />
+                    </div>
+                    <div
+                        className={`h-1 w-full`}
+                        style={{ background: `${skin.color}` }}
+                    ></div>
+                    <div className="px-2">
+                        <Typography.Heading
+                            level={6}
+                            className="py-1 text-wrap"
+                        >
+                            {skin.display}
+                        </Typography.Heading>
+                        {skin instanceof WeaponInfo && (
+                            <Float skin={skin} setSkin={setSkin} />
+                        )}
+                        {skin instanceof WeaponInfo && (
+                            <Typography.Paragraph>
+                                Pattern: {skin.pattern}
+                            </Typography.Paragraph>
+                        )}
+                    </div>
+                </div>
+            </Button>
+        </>
+    );
+}

app/hooks/api.tsx

@@ -0,0 +1,96 @@
+import {
+    useState,
+    createContext,
+    useContext,
+    type PropsWithChildren,
+} from "react";
+import { useNotification } from "./notification";
+import type { NotificationType } from "~/components/notification";
+
+type ApiContextType = {
+    get: (arg0: string) => Promise<[boolean, any]>;
+    post: (arg0: string, arg1: any) => Promise<boolean>;
+};
+
+const apiContext = createContext<ApiContextType>({
+    get: async (_: string) => {
+        return [true, undefined];
+    },
+    post: async (_a: string, _b: any) => {
+        return true;
+    },
+});
+
+export function ApiProvider({ children }: PropsWithChildren) {
+    const { notify } = useNotification();
+
+    const get = async (endpoint: string): Promise<[boolean, any]> => {
+        let response = await fetch(
+            `${import.meta.env.VITE_BASE_API_URL}/${endpoint}`,
+            { credentials: "include" },
+        ).catch((e) => notifyError(notify, e.code, e.message));
+
+        if (!response) {
+            notifyError(notify, 1, "No data in response from server.");
+            return [false, undefined];
+        }
+
+        if (!response.ok) {
+            notifyError(notify, response.status, await response.text());
+            return [false, undefined];
+        }
+        const text = await response.text();
+        const data = text ? JSON.parse(text) : undefined;
+
+        return [true, data];
+    };
+
+    const post = async (endpoint: string, data: any) => {
+        let response = await fetch(
+            `${import.meta.env.VITE_BASE_API_URL}/${endpoint}`,
+            {
+                credentials: "include",
+                method: "POST",
+                body: JSON.stringify(data),
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            },
+        ).catch((e) => notifyError(notify, e.code, e.message));
+
+        if (!response) {
+            notifyError(notify, 1, "No data in response from server.");
+            return false;
+        } else if (!response.ok) {
+            notifyError(notify, response.status, await response.text());
+            return false;
+        }
+        return true;
+    };
+
+    return (
+        <apiContext.Provider value={{ get, post }}>
+            {children}
+        </apiContext.Provider>
+    );
+}
+
+export function useApi() {
+    return useContext(apiContext);
+}
+
+function notifyError(
+    notify: (arg0: NotificationType, arg1: number) => void,
+    code: number,
+    message: string,
+) {
+    notify(
+        {
+            type: "danger",
+            loading: false,
+            title: "Oops, something went wrong.",
+            message: `There was an issue on our end: ${message} (Error ${code})`,
+        },
+        10000,
+    );
+}

app/hooks/auth.tsx

@@ -7,6 +7,7 @@ import {
 } from "react";
 import { useLocation, useSearchParams } from "react-router";
 import { useNotification } from "./notification";
+import { useApi } from "./api";
 
 type User = {
     id: string;
@@ -20,6 +21,7 @@ type AuthContextType = {
     loading: boolean;
     login: () => void;
     logout: () => Promise<void>;
+    update: () => Promise<boolean>;
 };
 
 const AuthContext = createContext<AuthContextType>({
@@ -27,6 +29,9 @@ const AuthContext = createContext<AuthContextType>({
     loading: false,
     login: () => {},
     logout: async () => {},
+    update: async () => {
+        return false;
+    },
 });
 
 export function AuthProvider({ children }: PropsWithChildren) {
@@ -35,6 +40,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
     const [searchParams, setSeachParams] = useSearchParams();
     const { notify } = useNotification();
     const location = useLocation();
+    const { get } = useApi();
 
     useEffect(() => {
         const load = async () => {
@@ -52,42 +58,10 @@ export function AuthProvider({ children }: PropsWithChildren) {
                 );
                 let query = searchParams.toString();
                 setSeachParams({}, { replace: true });
-                let response = await fetch(
+                await get(`login?${query}`);
-                    `${import.meta.env.VITE_BASE_API_URL}/login?${query}`,
-                    { credentials: "include" },
-                )
-                    .then((r) => r.text())
-                    .catch((e) => {
-                        notify(
-                            {
-                                type: "danger",
-                                loading: false,
-                                title: "An error occured.",
-                                message: `An error occured: ${e}`,
-                            },
-                            10000,
-                        );
-                    });
             }
 
-            let data = await fetch(`${import.meta.env.VITE_BASE_API_URL}/me`, {
+            if (await update()) {
-                credentials: "include",
-            })
-                .then((r) => r.json())
-                .catch((e) => {
-                    notify(
-                        {
-                            type: "danger",
-                            loading: false,
-                            title: "An error occured.",
-                            message: `An error occured: ${e}`,
-                        },
-                        10000,
-                    );
-                });
-
-            if (data !== undefined) {
-            setUser(data);
                 notify(
                     {
                         type: "success",
@@ -98,7 +72,6 @@ export function AuthProvider({ children }: PropsWithChildren) {
                     2000,
                 );
             }
-
             setLoading(false);
         };
 
@@ -112,10 +85,8 @@ export function AuthProvider({ children }: PropsWithChildren) {
     };
 
     const logout = async () => {
-        await fetch(import.meta.env.VITE_BASE_API_URL + "/logout", {
+        const [ok, _] = await get("logout");
-            credentials: "include",
+        if (ok) {
-        })
-            .then(() => {
             setUser(null);
             notify(
                 {
@@ -126,22 +97,21 @@ export function AuthProvider({ children }: PropsWithChildren) {
                 },
                 2000,
             );
-            })
+        }
-            .catch((e) => {
+    };
-                notify(
+
-                    {
+    const update = async () => {
-                        type: "danger",
+        let [_, data] = await get("me");
-                        loading: false,
+
-                        title: "An error occured.",
+        if (data !== undefined) {
-                        message: `An error occured: ${e}`,
+            setUser(data);
-                    },
+            return true;
-                    10000,
+        }
-                );
+        return false;
-            });
     };
 
     return (
-        <AuthContext.Provider value={{ user, loading, login, logout }}>
+        <AuthContext.Provider value={{ user, loading, login, logout, update }}>
             {children}
         </AuthContext.Provider>
     );

app/pages/base.tsx

@@ -6,11 +6,12 @@ import { Header } from "~/components/header";
 export default function Base({
     children,
     needsLogin = false,
-}: PropsWithChildren<{ needsLogin?: boolean }>) {
+    fixedHeight = false,
+}: PropsWithChildren<{ needsLogin?: boolean, fixedHeight?: boolean }>) {
     return (
         <>
-            <div className="flex flex-col pt-20 min-h-dvh">
+            <div className={`flex flex-col pt-20 min-h-dvh ${fixedHeight && "h-dvh"}`}>
-                <div className="flex flex-col flex-1">
+                <div className="flex flex-col flex-1 min-h-0">
                     {needsLogin ? <Guard>{children}</Guard> : children}
                 </div>
                 <Footer />

app/pages/inventory.tsx

@@ -1,5 +1,49 @@
+import { useState } from "react";
 import Base from "./base";
+import { Button, Surface, Tabs } from "@heroui/react";
+import { Inventory } from "~/components/inventory";
 
 export function InventoryPage() {
-    return <Base needsLogin>INVENTORY</Base>;
+    const [side, setSide] = useState<"T" | "CT">("T");
+    return (
+        <Base needsLogin fixedHeight>
+            <Surface
+                className="flex flex-col flex-1 min-h-0 h-0 shadow-lg shadow-indigo-900 ring-1 ring-indigo-800 p-2 m-2 rounded-3xl gap-2"
+                variant="default"
+            >
+                <div className="w-full h-min flex justify-between items-center">
+                    <Tabs
+                        selectedKey={side}
+                        onSelectionChange={(key) => {
+                            switch (key) {
+                                case "T": {
+                                    setSide("T");
+                                    break;
+                                }
+                                case "CT": {
+                                    setSide("CT");
+                                    break;
+                                }
+                            }
+                        }}
+                    >
+                        <Tabs.ListContainer>
+                            <Tabs.List>
+                                <Tabs.Tab className="w-fit" id="T">
+                                    Terrorist
+                                    <Tabs.Indicator />
+                                </Tabs.Tab>
+                                <Tabs.Tab className="w-fit" id="CT">
+                                    Counter-Terrorist
+                                    <Tabs.Indicator />
+                                </Tabs.Tab>
+                            </Tabs.List>
+                        </Tabs.ListContainer>
+                    </Tabs>
+                    <Button>Need help?</Button>
+                </div>
+                <Inventory side={side} />
+            </Surface>
+        </Base>
+    );
 }

app/root.tsx

@@ -11,6 +11,7 @@ import type { Route } from "./+types/root";
 import "./app.css";
 import { AuthProvider } from "./hooks/auth";
 import { NotificationProvider } from "./hooks/notification";
+import { ApiProvider } from "./hooks/api";
 
 export const links: Route.LinksFunction = () => [
     { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -39,7 +40,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
             </head>
             <body className="bg-background text-foreground">
                 <NotificationProvider>
+                    <ApiProvider>
                         <AuthProvider>{children}</AuthProvider>
+                    </ApiProvider>
                 </NotificationProvider>
                 <ScrollRestoration />
                 <Scripts />

app/types/skin.ts

@@ -0,0 +1,28 @@
+export class WeaponInfo {
+  id!: string;
+  weapon_id!: string;
+  name!: string;
+  color!: string;
+  display!: string;
+  paint_index!: number;
+  float!: number;
+  min_float!: number;
+  max_float!: number;
+  pattern!: number;
+  
+  constructor(data: WeaponInfo) {
+    Object.assign(this, data);
+  }
+}
+
+export class AgentInfo {
+  id!: string;
+  weapon_id!: string;
+  name!: string;
+  color!: string;
+  display!: string;
+  
+  constructor(data: AgentInfo) {
+    Object.assign(this, data);
+  }
+}