Add retry button and relayout to accommodate

src/ageAssurance/data.tsx

@@ -136,6 +136,15 @@ export async function prefetchConfig() {
     }
   })
 }
+export async function refetchConfig() {
+  logger.debug(`refetchConfig: fetching...`)
+  const res = await getConfig()
+  qc.setQueryData<AppBskyAgeassuranceGetConfig.OutputSchema>(
+    configQueryKey,
+    res,
+  )
+  return res
+}
 export function useConfigQuery() {
   return useQuery(
     {

src/components/ageAssurance/AgeAssuranceAdmonition.tsx

@@ -21,7 +21,7 @@ export function AgeAssuranceAdmonition({
 
   if (aa.state.access === aa.Access.Full) return null
   if (aa.state.error === 'config') {
-    return <AgeAssuranceConfigUnavailableError style={[a.pr_4xl]} />
+    return <AgeAssuranceConfigUnavailableError style={style} />
   }
 
   return (

src/components/ageAssurance/AgeAssuranceDismissibleNotice.tsx

@@ -5,6 +5,7 @@ import {useLingui} from '@lingui/react'
 import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs'
 import {atoms as a, type ViewStyleProp} from '#/alf'
 import {AgeAssuranceAdmonition} from '#/components/ageAssurance/AgeAssuranceAdmonition'
+import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
 import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {Button, ButtonIcon} from '#/components/Button'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
@@ -26,33 +27,37 @@ export function AgeAssuranceDismissibleNotice({style}: ViewStyleProp & {}) {
 
   return (
     <View style={style}>
-      <View>
+      {aa.state.error === 'config' ? (
-        <AgeAssuranceAdmonition>{copy.notice}</AgeAssuranceAdmonition>
+        <AgeAssuranceConfigUnavailableError />
+      ) : (
+        <View>
+          <AgeAssuranceAdmonition>{copy.notice}</AgeAssuranceAdmonition>
 
-        <Button
+          <Button
-          label={_(msg`Don't show again`)}
+            label={_(msg`Don't show again`)}
-          size="tiny"
+            size="tiny"
-          variant="solid"
+            variant="solid"
-          color="secondary_inverted"
+            color="secondary_inverted"
-          shape="round"
+            shape="round"
-          onPress={() => {
+            onPress={() => {
-            save({
+              save({
-              id: Nux.AgeAssuranceDismissibleNotice,
+                id: Nux.AgeAssuranceDismissibleNotice,
-              completed: true,
+                completed: true,
-              data: undefined,
+                data: undefined,
-            })
+              })
-            logger.metric('ageAssurance:dismissSettingsNotice', {})
+              logger.metric('ageAssurance:dismissSettingsNotice', {})
-          }}
+            }}
-          style={[
+            style={[
-            a.absolute,
+              a.absolute,
-            {
+              {
-              top: 12,
+                top: 12,
-              right: 12,
+                right: 12,
-            },
+              },
-          ]}>
+            ]}>
-          <ButtonIcon icon={X} />
+            <ButtonIcon icon={X} />
-        </Button>
+          </Button>
-      </View>
+        </View>
+      )}
     </View>
   )
 }

src/components/ageAssurance/AgeAssuranceErrors.tsx

@@ -1,16 +1,37 @@
-import {Trans} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {type ViewStyleProp} from '#/alf'
-import {Admonition} from '#/components/Admonition'
+import * as Admonition from '#/components/Admonition'
+import {ButtonIcon, ButtonText} from '#/components/Button'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as RetryIcon} from '#/components/icons/ArrowRotate'
+import {refetchConfig} from '#/ageAssurance/data'
 
 export function AgeAssuranceConfigUnavailableError(props: ViewStyleProp) {
+  const {_} = useLingui()
   return (
-    <Admonition type="error" style={props.style}>
+    <Admonition.Outer type="error" style={props.style}>
-      <Trans>
+      <Admonition.Row>
-        We were unable to load age assurance configuration for your region,
+        <Admonition.Icon />
-        probably due to a network error. Some content and features may be
+        <Admonition.Content>
-        unavailable temporarily. Please try again later.
+          <Admonition.Text>
-      </Trans>
+            <Trans>
-    </Admonition>
+              We were unable to load the age assurance configuration for your
+              region, probably due to a network error. Some content and features
+              may be unavailable temporarily. Please try again later.
+            </Trans>
+          </Admonition.Text>
+        </Admonition.Content>
+        <Admonition.Button
+          color="negative_subtle"
+          label={_(msg`Retry`)}
+          onPress={() => refetchConfig().catch(() => {})}>
+          <ButtonText>
+            <Trans>Retry</Trans>
+          </ButtonText>
+          <ButtonIcon icon={RetryIcon} />
+        </Admonition.Button>
+      </Admonition.Row>
+    </Admonition.Outer>
   )
 }