Mobile app link

src/components/general/OpenInAppDialog.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useRef } from "react";
+import useOnMobile from "@/components/general/hooks/useOnMobile";
+import { useRouter } from "next/router";
+import { Anchor, Button, Divider, Drawer, Image, Stack } from "@mantine/core";
+import { useDisclosure, useSessionStorage } from "@mantine/hooks";
+
+/**
+ * Component that shows an 'open in app' dialog for mobile users.
+ * @constructor
+ */
+const OpenInAppDialog = () => {
+    const router = useRouter();
+    const onMobile = useOnMobile();
+
+    const [hasBeenClosed, setHasBeenClosed] = useSessionStorage({
+        key: "open-in-app-dialog-closed",
+        defaultValue: false,
+        getInitialValueInEffect: false,
+    });
+
+    const [opened, { close, open }] = useDisclosure();
+
+    useEffect(() => {
+        if (onMobile && router.pathname !== "/" && !hasBeenClosed) {
+            open();
+        }
+    }, [hasBeenClosed, onMobile, open, router.pathname, setHasBeenClosed]);
+
+    return (
+        <Drawer
+            opened={opened}
+            onClose={() => {
+                close();
+                setHasBeenClosed(true);
+            }}
+            withCloseButton
+            size="30vh"
+            radius="md"
+            position={"bottom"}
+            title={"GameNode is (even) better in the app!"}
+        >
+            <Stack className={"w-full items-center"}>
+                <Anchor
+                    href={
+                        typeof window != "undefined"
+                            ? window.location.href
+                            : process.env.NEXT_PUBLIC_DOMAIN_WEBSITE
+                    }
+                >
+                    <Button size={"md"}>Open in app</Button>
+                </Anchor>
+                <Divider
+                    label={"OR"}
+                    orientation={"horizontal"}
+                    className={"w-full"}
+                />
+                <Anchor
+                    className={"w-40"}
+                    href={
+                        "https://play.google.com/store/apps/details?id=app.gamenode&pcampaignid=web_share"
+                    }
+                >
+                    <Image
+                        src={"/img/google_play_badge_english.png"}
+                        alt={"Get it on Google Play badge"}
+                    />
+                </Anchor>
+            </Stack>
+        </Drawer>
+    );
+};
+
+export default OpenInAppDialog;

src/components/general/RouterTransition.tsx

@@ -23,5 +23,5 @@ export function RouterTransition() {
         };
     }, [router]);
 
-    return <NavigationProgress className={"absolute"} />;
+    return <NavigationProgress className={"fixed"} />;
 }

src/components/globals.css

@@ -24,4 +24,4 @@ Styling for tiptap mentions
 .tiptap  span.mention {
     background-color: rgb(241 81 38 / 1);
     border-radius: var(--mantine-radius-xs);
-}
+}

src/pages/_app.tsx

@@ -33,6 +33,7 @@ import { theme } from "@/util/theme";
 import NotificationsManager from "@/components/general/NotificationsManager";
 import { useMatomoTracker } from "@/components/general/hooks/useMatomoTracker";
 import MatomoWrapper from "@/components/general/MatomoWrapper";
+import OpenInAppDialog from "@/components/general/OpenInAppDialog";
 
 /**
  * Basic configuration for wrapper services
@@ -78,6 +79,7 @@ export default function App({
             <SuperTokensProvider>
                 <QueryClientProvider client={queryClient}>
                     <NotificationsManager />
+                    <OpenInAppDialog />
                     <MatomoWrapper>
                         <GlobalAppShell>
                             <HydrationBoundary

src/pages/index.tsx

@@ -1,20 +1,24 @@
 import {
     ActionIcon,
+    Anchor,
     Box,
     Button,
     Container,
+    Divider,
     Flex,
     Grid,
     Group,
+    Image,
     SimpleGrid,
     Space,
     Stack,
     Text,
     Title,
+    Transition,
 } from "@mantine/core";
 import SimpleCard from "@/components/general/card/SimpleCard";
 import { IconChevronDown } from "@tabler/icons-react";
-import { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useSessionContext } from "supertokens-auth-react/recipe/session";
 import { useRouter } from "next/router";
 import Link from "next/link";
@@ -30,29 +34,35 @@ export default function Home() {
     }, [session, router]);
     return (
         <Container fluid h={"100%"}>
-            <Stack className="h-[80vh] mb-32">
-                <Stack gap={0} className="mt-32 lg:mt-40 w-full">
+            <Stack className="h-[80vh] mb-32 ">
+                <Stack gap={0} className="mt-32 lg:mt-40 mb-8 w-full max-w-fit">
                     <Title size={"h1"} className="text-7xl">
                         Play. Review. Share.
                     </Title>
-                </Stack>
 
-                <Link href={"/search"}>
-                    <Button size={"lg"}>Join in</Button>
-                </Link>
-                <Stack>
-                    <Text c={"dimmed"} fz={"1rem"}>
-                        Games metadata are a courtesy of{" "}
-                        <a
-                            className={"text-blue-800"}
-                            href={"https://igdb.com"}
+                    <Stack
+                        className={
+                            "mt-8 h-fit flex-col lg:flex-row lg:items-center"
+                        }
+                    >
+                        <Link href={"/search"}>
+                            <Button size={"lg"}>Join in</Button>
+                        </Link>
+                        <Divider label={"OR"} />
+                        <Anchor
+                            className={"w-44"}
+                            href={
+                                "https://play.google.com/store/apps/details?id=app.gamenode&pcampaignid=web_share"
+                            }
                         >
-                            IGDB
-                        </a>
-                        .
-                    </Text>
-                    <Text c={"dimmed"} fz={"0.9rem"}></Text>
+                            <Image
+                                src={"/img/google_play_badge_english.png"}
+                                alt={"Get it on Google Play badge"}
+                            />
+                        </Anchor>
+                    </Stack>
                 </Stack>
+
                 <Stack
                     gap={0}
                     align="center"
@@ -120,6 +130,13 @@ export default function Home() {
             <Title ta="center" size="h5">
                 GameNode is free (and ad-free!).
             </Title>
+            <Text c={"dimmed"} fz={"1rem"} className={"text-center"}>
+                Games metadata are a courtesy of{" "}
+                <a className={"text-blue-800"} href={"https://igdb.com"}>
+                    IGDB
+                </a>
+                .
+            </Text>
 
             <Space mb={"xl"} />
         </Container>