Dev

src/components/collection/collection-entry/view/CollectionEntriesView.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { CollectionEntry, Game } from "@/wrapper/server";
-import { Skeleton, Stack } from "@mantine/core";
+import { Flex, Skeleton, Stack } from "@mantine/core";
 import GameView from "@/components/game/view/GameView";
 import CenteredLoading from "@/components/general/CenteredLoading";
 import { Box, Space } from "@mantine/core";
@@ -53,21 +53,27 @@ const CollectionEntriesView = ({
                     mt={"md"}
                 >
                     <Box className="w-full flex justify-between mb-8">
-                        <SelectWithOrdering
-                            description={"Order by"}
-                            data={[
-                                {
-                                    value: "addedDate",
-                                    label: "Added Date",
-                                },
-                                { value: "releaseDate", label: "Release Date" },
-                            ]}
-                            defaultValue={"addedDate"}
-                            onChange={onChangeOrder}
-                        />
-                        <Box>
-                            <GameViewLayoutSwitcher setLayout={setLayout} />
+                        <Box className={"max-w-40"}>
+                            <SelectWithOrdering
+                                description={"Order by"}
+                                data={[
+                                    {
+                                        value: "addedDate",
+                                        label: "Added Date",
+                                    },
+                                    {
+                                        value: "releaseDate",
+                                        label: "Release Date",
+                                    },
+                                ]}
+                                defaultValue={"addedDate"}
+                                onChange={onChangeOrder}
+                            />
                         </Box>
+
+                        <Flex className={""}>
+                            <GameViewLayoutSwitcher setLayout={setLayout} />
+                        </Flex>
                     </Box>
                     <GameView.Content items={games!}>
                         {isLoading && buildLoadingSkeletons()}

src/components/general/input/select/SelectWithOrdering.tsx

@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import { Group, Select, SelectProps, Text } from "@mantine/core";
 import { IconSortAscending, IconSortDescending } from "@tabler/icons-react";
 
-interface Props extends Omit<SelectProps, "onChange" | "value"> {
+interface Props
+    extends Omit<SelectProps, "onChange" | "value" | "allowDeselect"> {
     defaultValue: string;
     onChange: (value: string, order: "ASC" | "DESC") => void;
 }
@@ -23,28 +24,31 @@ const SelectWithOrdering = ({
         "ASC" | "DESC"
     >("DESC");
 
+    console.log(internalSelectedItem, internalSelectedOrdering);
+
     return (
         <Select
             {...others}
+            value={internalSelectedItem}
             defaultValue={defaultValue}
-            allowDeselect={false}
             data={data}
+            // Necessary to trigger "onChange" when selecting the same option
+            allowDeselect={true}
             onChange={(v) => {
+                // v != null -> new value selected
                 if (v) {
                     // Only changes value when selecting another option
-                    if (v !== internalSelectedItem) {
-                        onChange(v, internalSelectedOrdering);
-                        setInternalSelectedItem(v);
-                        return;
-                    }
-
-                    const updatedOrdering =
-                        internalSelectedOrdering === "ASC" ? "DESC" : "ASC";
-
-                    setInternalSelectedOrdering(updatedOrdering);
-                    onChange(v, updatedOrdering);
+                    onChange(v, internalSelectedOrdering);
+                    setInternalSelectedItem(v);
                     return;
                 }
+
+                const updatedOrdering =
+                    internalSelectedOrdering === "ASC" ? "DESC" : "ASC";
+
+                setInternalSelectedOrdering(updatedOrdering);
+                onChange(internalSelectedItem, updatedOrdering);
+                return;
             }}
             renderOption={({ option, checked }) => {
                 return (

src/components/general/shell/GlobalShellFooter.tsx

@@ -19,12 +19,7 @@ type IFooterLink = { href: string; label: string; external?: boolean };
 const links: IFooterLink[] = [
     { label: "About", href: "/about" },
     { label: "Privacy", href: "/privacy" },
-    { label: "Terms of Service", href: "/tos" },
-    {
-        label: "Donate",
-        href: "https://patreon.com/GameNodeApp",
-        external: true,
-    },
+    { label: "Terms", href: "/tos" },
 ];
 
 const GlobalShellFooter = () => {

src/components/general/shell/GlobalShellHeader/GlobalShellHeader.tsx

@@ -16,8 +16,6 @@ export default function GlobalShellHeader({
     toggleSidebar,
 }: IGlobalShellHeaderProps) {
     const userId = useUserId();
-    const [preferencesModalOpened, preferencesModalUtils] =
-        useDisclosure(false);
     return (
         <header className="h-full">
             <Container
@@ -29,7 +27,7 @@ export default function GlobalShellHeader({
                     onClick={toggleSidebar}
                     size="sm"
                 />
-                <Link href={"/search"}>
+                <Link href={"/"}>
                     <GameNodeLogo className="ms-6 w-22 h-auto max-h-full" />
                 </Link>
                 <Group className="ms-auto">

src/components/general/shell/GlobalShellNavbar/GlobalShellNavbar.tsx

@@ -1,6 +1,7 @@
 import {
     AppShell,
     Box,
+    Divider,
     Group,
     ScrollArea,
     Stack,
@@ -17,6 +18,8 @@ import {
     IconUserShield,
     IconSettings,
     IconLogout,
+    IconHeart,
+    IconHeartFilled,
 } from "@tabler/icons-react";
 import { UserButton } from "@/components/general/input/UserButton/UserButton";
 import Link from "next/link";
@@ -145,28 +148,42 @@ export default function GlobalShellNavbar({
                 </div>
             </div>
             <GlobalShellNavbarCollections onClose={onClose} />
-            {isLoggedIn && (
-                <div
-                    className={`${classes.section} mt-auto mb-0 flex flex-col `}
-                >
+            <div className={`${classes.section} mt-auto mb-0 flex flex-col `}>
+                {isLoggedIn && (
                     <Link href={"/preferences"} onClick={onClose}>
-                        <Group className={"gap-1 px-md"}>
+                        <Group className={"gap-1 px-md py-sm"}>
                             <IconSettings></IconSettings>
                             <Text span>Settings</Text>
                         </Group>
                     </Link>
+                )}
+                <Link
+                    href={"https://patreon.com/GameNodeApp"}
+                    target={"_blank"}
+                    onClick={onClose}
+                >
+                    <Group
+                        className={
+                            "gap-1 w-full px-md py-sm bg-[#f96854] text-white"
+                        }
+                    >
+                        <IconHeartFilled />
+                        <Text span>Support us</Text>
+                    </Group>
+                </Link>
+                {isLoggedIn && (
                     <Link href={"/auth/logout"}>
                         <Group
                             className={
-                                "gap-1 w-full px-md py-sm mt-4 bg-[#F49898] text-white"
+                                "gap-1 w-full px-md py-sm bg-[#F49898] text-white"
                             }
                         >
                             <IconLogout />
                             <Text span>Logout</Text>
                         </Group>
                     </Link>
-                </div>
-            )}
+                )}
+            </div>
         </nav>
     );
 }