feat: patreon plug

src/app/auth/[provider]/page.tsx

@@ -25,53 +25,52 @@ export default function Page({
   const router = useRouter();
 
   useEffect(() => {
-    (async () => {
-      switch (params.provider) {
-        case 'wargaming': {
-          if (
-            !searchParams.expires_at ||
-            !searchParams.access_token ||
-            !searchParams.account_id
-          ) {
-            break;
-          }
-
-          mutateApp((draft) => {
-            draft.logins.wargaming = {
-              id: Number(searchParams.account_id),
-              token: searchParams.access_token,
-              expires: Number(searchParams.expires_at) * 1000,
-            };
-          });
-
+    switch (params.provider) {
+      case 'wargaming': {
+        if (
+          !searchParams.expires_at ||
+          !searchParams.access_token ||
+          !searchParams.account_id
+        ) {
           break;
         }
 
-        case 'patreon': {
-          if (!searchParams.code) break;
+        mutateApp((draft) => {
+          draft.logins.wargaming = {
+            id: Number(searchParams.account_id),
+            token: searchParams.access_token,
+            expires: Number(searchParams.expires_at) * 1000,
+          };
+        });
 
-          const data = (await fetch(
-            `/api/patreon/auth/${searchParams.code}`,
-          ).then((response) => response.json())) as PatreonAuthResponse;
-
-          mutateApp((draft) => {
-            draft.logins.patreon = {
-              token: data.access_token,
-              refreshToken: data.refresh_token,
-              expires: Date.now() + data.expires_in * 1000,
-            };
-          });
-
-          break;
-        }
-
-        default: {
-          console.error(`Unknown provider: ${params.provider}`);
-        }
+        break;
       }
 
-      router.push(searchParams.return ?? '/');
-    })();
+      case 'patreon': {
+        if (!searchParams.code) break;
+
+        // cannot await here because async breaks router.push :(
+        fetch(`/api/patreon/auth/${searchParams.code}`)
+          .then((response) => response.json() as Promise<PatreonAuthResponse>)
+          .then((data) => {
+            mutateApp((draft) => {
+              draft.logins.patreon = {
+                token: data.access_token,
+                refreshToken: data.refresh_token,
+                expires: Date.now() + data.expires_in * 1000,
+              };
+            });
+          });
+
+        break;
+      }
+
+      default: {
+        console.error(`Unknown provider: ${params.provider}`);
+      }
+    }
+
+    router.push(searchParams.return ?? '/');
   });
 
   return (

src/app/components/PatreonPlug.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { CheckIcon } from '@radix-ui/react-icons';
+import { Button, Flex, Link, Text } from '@radix-ui/themes';
+import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl';
+import { useAdExempt } from '../../hooks/useAdExempt';
+import { PatreonIcon } from '../../icons/Patreon';
+import { useApp } from '../../stores/app';
+
+export function PatreonPlug() {
+  const patreon = useApp((state) => state.logins.patreon);
+  const exempt = useAdExempt();
+
+  if (exempt) return null;
+
+  return (
+    <Flex
+      gap="2"
+      align="center"
+      direction="column"
+      justify="center"
+      p="4"
+      py="8"
+    >
+      <Flex gap="1" align="center">
+        <Text size="4">Active Patreon supports go ad-free</Text>
+        <CheckIcon width="1em" height="1em" />
+      </Flex>
+
+      <Flex gap="2">
+        <Link href="https://www.patreon.com/tresabhi" target="_blank">
+          <Button>
+            <PatreonIcon width={15} height={15} /> Support on Patreon
+          </Button>
+        </Link>
+        {!patreon && (
+          <Link href={patreonLoginUrl()}>
+            <Button variant="outline">Log in with Patreon</Button>
+          </Link>
+        )}
+      </Flex>
+    </Flex>
+  );
+}

src/app/page.tsx

@@ -5,15 +5,17 @@ import PageWrapper from '../components/PageWrapper';
 import { TOOLS } from '../constants/tools';
 import { ImgurSize, imgur } from '../core/blitzkit/imgur';
 import { Hero } from './components/Hero';
+import { PatreonPlug } from './components/PatreonPlug';
 
 export default function Page() {
   return (
     <>
       <Hero />
 
+      <PatreonPlug />
+
       <PageWrapper size={1028}>
         <Grid
-          p="4"
           gap="4"
           columns={{
             initial: undefined,