From e206395079a451a34f7752ad537d40bd21adddae Mon Sep 17 00:00:00 2001
From: marcy <69540471+reeesespuffs@users.noreply.github.com>
Date: Sat, 30 Aug 2025 20:03:05 -0400
Subject: [PATCH 1/3] fix: AgeGate unreadable in darkmode & add revite's
 geoblock feature

Signed-off-by: marcy <69540471+reeesespuffs@users.noreply.github.com>
---
 .../client/src/interface/channels/AgeGate.tsx | 80 +++++++++++++------
 1 file changed, 55 insertions(+), 25 deletions(-)

diff --git a/packages/client/src/interface/channels/AgeGate.tsx b/packages/client/src/interface/channels/AgeGate.tsx
index d9dce8de..08c1f7dc 100644
--- a/packages/client/src/interface/channels/AgeGate.tsx
+++ b/packages/client/src/interface/channels/AgeGate.tsx
@@ -1,14 +1,19 @@
-import { JSXElement, Match, Switch, createEffect } from "solid-js";
+import { JSXElement, Match, Switch, onMount, createSignal } from "solid-js";
 
 import { Trans } from "@lingui-solid/solid/macro";
 import { styled } from "styled-system/jsx";
 
 import { useState } from "@revolt/state";
 import { LAYOUT_SECTIONS } from "@revolt/state/stores/Layout";
-import { Button, Checkbox, iconSize } from "@revolt/ui";
+import { Button, Checkbox, iconSize, Text } from "@revolt/ui";
 
 import MdWarning from "@material-design-icons/svg/round/warning.svg?component-solid";
 
+type GeoBlock = {
+  countryCode: string;
+  isAgeRestrictedGeo: boolean;
+};
+
 /**
  * Age gate filter for any content
  */
@@ -21,21 +26,55 @@ export function AgeGate(props: {
 }) {
   const state = useState();
 
-  const confirmed = state.layout.getSectionState(LAYOUT_SECTIONS.MATURE, false);
-  const allowed = state.layout.getSectionState(
+  const confirmed = () => state.layout.getSectionState(LAYOUT_SECTIONS.MATURE, false);
+  const allowed = () => state.layout.getSectionState(
     props.contentId + "-nsfw",
     false,
   );
 
+  const [geoBlock, setGeoBlock] = createSignal<GeoBlock | null>(null);
+
+  onMount(() => {
+    fetch("https://geo.revolt.chat")
+      .then((res) => res.json())
+      .then((data) => setGeoBlock(data))
+      .catch(() => setGeoBlock(null));
+  });
+
   return (
     <Switch fallback={props.children}>
-      <Match when={props.enabled && (!confirmed || !allowed)}>
+      <Match when={geoBlock() && geoBlock()!.isAgeRestrictedGeo && props.enabled}>
+        <Base>
+          <MdWarning {...iconSize("8em")} />
+          <Text class="headline" size="large">
+            {props.contentName}
+          </Text>
+
+          <Text class="body" size="large">
+            {geoBlock()!.countryCode === "GB" ? (
+            <Trans>
+              This channel is not available in your region while we review options on legalcompliance.
+            </Trans>
+            ) : (
+              <Trans>This content is not available in your region.</Trans>
+            )}
+          </Text>
+
+          <Button variant="text" onPress={() => history.back()}>
+            <Trans>Back</Trans>
+          </Button>
+        </Base>
+      </Match>
+      <Match when={props.enabled && (!confirmed() || !allowed())}>
         <Base>
           <MdWarning {...iconSize("8em")} />
-          <Title>{props.contentName}</Title>
-          <SubText>
+          <Text class="headline" size="large">
+            {props.contentName}
+          </Text>
+
+          <Text class="body" size="large">
             <Trans>This channel is marked as mature.</Trans>
-          </SubText>
+          </Text>
 
           <Confirmation>
             <Checkbox
@@ -47,18 +86,19 @@ export function AgeGate(props: {
                 state.layout.toggleSectionState(LAYOUT_SECTIONS.MATURE, false)
               }
             />
-
-            <Trans>I confirm that I am at least 18 years old.</Trans>
+            <Text class="body" size="large">
+              <Trans>I confirm that I am at least 18 years old.</Trans>
+            </Text>
           </Confirmation>
 
           <Actions>
-            <Button variant="secondary" onPress={() => history.back()}>
+            <Button variant="text" onPress={() => history.back()}>
               <Trans>Back</Trans>
             </Button>
             <Button
-              variant="primary"
+              variant="filled"
               onPress={() =>
-                state.layout.getSectionState(LAYOUT_SECTIONS.MATURE) &&
+                confirmed() &&
                 state.layout.setSectionState(props.contentId + "-nsfw", true)
               }
             >
@@ -82,27 +122,17 @@ const Base = styled("div", {
     padding: "var(--gap-lg)",
     userSelect: "none",
     overflowY: "auto",
+    color: "var(--md-sys-color-on-surface)",
 
     "& svg": {
       // TODO
       fill: "orange",
     },
 
-    gap: "var(--gap-sm)",
-  },
-});
-
-const Title = styled("h2", {
-  base: {
-    fontSize: "2em",
-    fontWeight: "black",
+    gap: "var(--gap-md)",
   },
 });
 
-const SubText = styled("span", {
-  base: {},
-});
-
 const Confirmation = styled("label", {
   base: {
     display: "flex",

From 1d7d9bb1d312c32f6177be6436e29d78a155b366 Mon Sep 17 00:00:00 2001
From: marcy <69540471+reeesespuffs@users.noreply.github.com>
Date: Mon, 1 Sep 2025 08:55:47 -0400
Subject: [PATCH 2/3] update AgeGate to use useQuery

Signed-off-by: marcy <69540471+reeesespuffs@users.noreply.github.com>
---
 .../client/src/interface/channels/AgeGate.tsx | 151 ++++++++++--------
 1 file changed, 81 insertions(+), 70 deletions(-)

diff --git a/packages/client/src/interface/channels/AgeGate.tsx b/packages/client/src/interface/channels/AgeGate.tsx
index 08c1f7dc..0c335223 100644
--- a/packages/client/src/interface/channels/AgeGate.tsx
+++ b/packages/client/src/interface/channels/AgeGate.tsx
@@ -1,11 +1,12 @@
-import { JSXElement, Match, Switch, onMount, createSignal } from "solid-js";
+import { JSXElement, Match, Switch, Suspense} from "solid-js";
 
 import { Trans } from "@lingui-solid/solid/macro";
 import { styled } from "styled-system/jsx";
 
+import { useQuery } from "@tanstack/solid-query";
 import { useState } from "@revolt/state";
 import { LAYOUT_SECTIONS } from "@revolt/state/stores/Layout";
-import { Button, Checkbox, iconSize, Text } from "@revolt/ui";
+import { Button, Checkbox, iconSize, Text, CircularProgress } from "@revolt/ui";
 
 import MdWarning from "@material-design-icons/svg/round/warning.svg?component-solid";
 
@@ -32,82 +33,92 @@ export function AgeGate(props: {
     false,
   );
 
-  const [geoBlock, setGeoBlock] = createSignal<GeoBlock | null>(null);
-
-  onMount(() => {
-    fetch("https://geo.revolt.chat")
-      .then((res) => res.json())
-      .then((data) => setGeoBlock(data))
-      .catch(() => setGeoBlock(null));
-  });
+  const geoQuery = useQuery(() => ({
+    queryKey: ["geoblock"],
+    queryFn: async (): Promise<GeoBlock> => {
+      const response = await fetch("https://geo.revolt.chat");
+      if (!response.ok) {
+        throw new Error("Failed to fetch geo data");
+      }
+      return response.json();
+    },
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    throwOnError: true
+  }));
 
   return (
-    <Switch fallback={props.children}>
-      <Match when={geoBlock() && geoBlock()!.isAgeRestrictedGeo && props.enabled}>
-        <Base>
-          <MdWarning {...iconSize("8em")} />
-          <Text class="headline" size="large">
-            {props.contentName}
-          </Text>
-
-          <Text class="body" size="large">
-            {geoBlock()!.countryCode === "GB" ? (
-            <Trans>
-              This channel is not available in your region while we review options on legalcompliance.
-            </Trans>
-            ) : (
-              <Trans>This content is not available in your region.</Trans>
-            )}
-          </Text>
-
-          <Button variant="text" onPress={() => history.back()}>
-            <Trans>Back</Trans>
-          </Button>
-        </Base>
-      </Match>
-      <Match when={props.enabled && (!confirmed() || !allowed())}>
-        <Base>
-          <MdWarning {...iconSize("8em")} />
-          <Text class="headline" size="large">
-            {props.contentName}
-          </Text>
-
-          <Text class="body" size="large">
-            <Trans>This channel is marked as mature.</Trans>
-          </Text>
-
-          <Confirmation>
-            <Checkbox
-              checked={state.layout.getSectionState(
-                LAYOUT_SECTIONS.MATURE,
-                false,
-              )}
-              onChange={() =>
-                state.layout.toggleSectionState(LAYOUT_SECTIONS.MATURE, false)
-              }
-            />
+    <Suspense fallback={<CircularProgress />}>
+      <Switch fallback={props.children}>
+        <Match when={props.enabled && (
+           geoQuery.isLoading ||
+           geoQuery.error||
+          (geoQuery.data && geoQuery.data.isAgeRestrictedGeo))
+        }>
+          <Base>
+            <MdWarning {...iconSize("8em")} />
+            <Text class="headline" size="large">
+              {props.contentName}
+            </Text>
+
             <Text class="body" size="large">
-              <Trans>I confirm that I am at least 18 years old.</Trans>
+              {geoQuery.data?.countryCode == "GB" ? (
+              <Trans>
+                This channel is not available in your region while we review options on legalcompliance.
+              </Trans>
+              ) : (
+                <Trans>This content is not available in your region.</Trans>
+              )}
             </Text>
-          </Confirmation>
 
-          <Actions>
             <Button variant="text" onPress={() => history.back()}>
               <Trans>Back</Trans>
             </Button>
-            <Button
-              variant="filled"
-              onPress={() =>
-                confirmed() &&
-                state.layout.setSectionState(props.contentId + "-nsfw", true)
-              }
-            >
-              <Trans>Enter Channel</Trans>
-            </Button>
-          </Actions>
-        </Base>
-      </Match>
-    </Switch>
+          </Base>
+        </Match>
+        <Match when={props.enabled && (!confirmed() || !allowed())}>
+          <Base>
+            <MdWarning {...iconSize("8em")} />
+            <Text class="headline" size="large">
+              {props.contentName}
+            </Text>
+
+            <Text class="body" size="large">
+              <Trans>This channel is marked as mature.</Trans>
+            </Text>
+
+            <Confirmation>
+              <Checkbox
+                checked={state.layout.getSectionState(
+                  LAYOUT_SECTIONS.MATURE,
+                  false,
+                )}
+                onChange={() =>
+                  state.layout.toggleSectionState(LAYOUT_SECTIONS.MATURE, false)
+                }
+              />
+              <Text class="body" size="large">
+                <Trans>I confirm that I am at least 18 years old.</Trans>
+              </Text>
+            </Confirmation>
+
+            <Actions>
+              <Button variant="text" onPress={() => history.back()}>
+                <Trans>Back</Trans>
+              </Button>
+              <Button
+                variant="filled"
+                onPress={() =>
+                  confirmed() &&
+                  state.layout.setSectionState(props.contentId + "-nsfw", true)
+                }
+              >
+                <Trans>Enter Channel</Trans>
+              </Button>
+            </Actions>
+          </Base>
+        </Match>
+      </Switch>
+    </Suspense>
   );
 }
 

From b65d95633ebf2ee65dbc5010d59c1466481b452b Mon Sep 17 00:00:00 2001
From: izzy <me@insrt.uk>
Date: Fri, 5 Sep 2025 20:34:22 +0200
Subject: [PATCH 3/3] chore: format AgeGate.tsx, add space to 'legalcompliance'

---
 .../client/src/interface/channels/AgeGate.tsx | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/interface/channels/AgeGate.tsx b/packages/client/src/interface/channels/AgeGate.tsx
index 0c335223..077f4e37 100644
--- a/packages/client/src/interface/channels/AgeGate.tsx
+++ b/packages/client/src/interface/channels/AgeGate.tsx
@@ -1,12 +1,12 @@
-import { JSXElement, Match, Switch, Suspense} from "solid-js";
+import { JSXElement, Match, Suspense, Switch } from "solid-js";
 
 import { Trans } from "@lingui-solid/solid/macro";
+import { useQuery } from "@tanstack/solid-query";
 import { styled } from "styled-system/jsx";
 
-import { useQuery } from "@tanstack/solid-query";
 import { useState } from "@revolt/state";
 import { LAYOUT_SECTIONS } from "@revolt/state/stores/Layout";
-import { Button, Checkbox, iconSize, Text, CircularProgress } from "@revolt/ui";
+import { Button, Checkbox, CircularProgress, Text, iconSize } from "@revolt/ui";
 
 import MdWarning from "@material-design-icons/svg/round/warning.svg?component-solid";
 
@@ -27,11 +27,10 @@ export function AgeGate(props: {
 }) {
   const state = useState();
 
-  const confirmed = () => state.layout.getSectionState(LAYOUT_SECTIONS.MATURE, false);
-  const allowed = () => state.layout.getSectionState(
-    props.contentId + "-nsfw",
-    false,
-  );
+  const confirmed = () =>
+    state.layout.getSectionState(LAYOUT_SECTIONS.MATURE, false);
+  const allowed = () =>
+    state.layout.getSectionState(props.contentId + "-nsfw", false);
 
   const geoQuery = useQuery(() => ({
     queryKey: ["geoblock"],
@@ -43,17 +42,20 @@ export function AgeGate(props: {
       return response.json();
     },
     staleTime: 5 * 60 * 1000, // 5 minutes
-    throwOnError: true
+    throwOnError: true,
   }));
 
   return (
     <Suspense fallback={<CircularProgress />}>
       <Switch fallback={props.children}>
-        <Match when={props.enabled && (
-           geoQuery.isLoading ||
-           geoQuery.error||
-          (geoQuery.data && geoQuery.data.isAgeRestrictedGeo))
-        }>
+        <Match
+          when={
+            props.enabled &&
+            (geoQuery.isLoading ||
+              geoQuery.error ||
+              (geoQuery.data && geoQuery.data.isAgeRestrictedGeo))
+          }
+        >
           <Base>
             <MdWarning {...iconSize("8em")} />
             <Text class="headline" size="large">
@@ -62,9 +64,10 @@ export function AgeGate(props: {
 
             <Text class="body" size="large">
               {geoQuery.data?.countryCode == "GB" ? (
-              <Trans>
-                This channel is not available in your region while we review options on legalcompliance.
-              </Trans>
+                <Trans>
+                  This channel is not available in your region while we review
+                  options on legal compliance.
+                </Trans>
               ) : (
                 <Trans>This content is not available in your region.</Trans>
               )}