new users hint for handle

src/screens/Signup/StepHandle.tsx

@@ -9,10 +9,11 @@ import {
   maxServiceHandleLength,
   validateHandle,
 } from '#/lib/strings/handles'
-import {useAgent} from '#/state/session'
+import {useAgent, useSession} from '#/state/session'
 import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useSignupContext} from '#/screens/Signup/state'
 import {atoms as a, useTheme} from '#/alf'
+import {Admonition} from '#/components/Admonition'
 import * as TextField from '#/components/forms/TextField'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At'
@@ -29,6 +30,9 @@ export function StepHandle() {
   const handleValueRef = useRef<string>(state.handle)
   const [draftValue, setDraftValue] = React.useState(state.handle)
   const isLoading = useThrottledValue(state.isLoading, 500)
+  const {accounts} = useSession()
+
+  const isFirstTimeUser = accounts.length === 0
 
   const onNextPress = React.useCallback(async () => {
     const handle = handleValueRef.current.trim()
@@ -130,64 +134,73 @@ export function StepHandle() {
             />
           </TextField.Root>
         </View>
-        {draftValue !== '' && (
-          <Text style={[a.text_md]}>
-            <Trans>Your full username will be</Trans>{' '}
-            <Text style={[a.text_md, a.font_bold]}>
-              @{createFullHandle(draftValue, state.userDomain)}
-            </Text>
-          </Text>
-        )}
 
-        {draftValue !== '' && (
-          <View
-            style={[
-              a.w_full,
-              a.rounded_sm,
-              a.border,
-              a.p_md,
-              a.gap_sm,
-              t.atoms.border_contrast_low,
-            ]}>
-            {state.error ? (
-              <View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}>
-                <IsValidIcon valid={false} />
-                <Text style={[a.text_md, a.flex_1]}>{state.error}</Text>
-              </View>
-            ) : undefined}
-            {validCheck.hyphenStartOrEnd ? (
-              <View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}>
-                <IsValidIcon valid={validCheck.handleChars} />
-                <Text style={[a.text_md, a.flex_1]}>
-                  <Trans>Only contains letters, numbers, and hyphens</Trans>
-                </Text>
-              </View>
-            ) : (
-              <View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}>
-                <IsValidIcon valid={validCheck.hyphenStartOrEnd} />
-                <Text style={[a.text_md, a.flex_1]}>
-                  <Trans>Doesn't begin or end with a hyphen</Trans>
-                </Text>
-              </View>
-            )}
-            <View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}>
-              <IsValidIcon
-                valid={validCheck.frontLength && validCheck.totalLength}
-              />
-              {!validCheck.totalLength ? (
-                <Text style={[a.text_md, a.flex_1]}>
-                  <Trans>
-                    No longer than {maxServiceHandleLength(state.userDomain)}{' '}
-                    characters
-                  </Trans>
-                </Text>
+        {draftValue === '' ? (
+          isFirstTimeUser && (
+            <Admonition type="tip">
+              <Trans>
+                This is the unique name for your account. Pick something
+                memorable!
+              </Trans>
+            </Admonition>
+          )
+        ) : (
+          <>
+            <Text style={[a.text_md]}>
+              <Trans>Your full username will be</Trans>{' '}
+              <Text style={[a.text_md, a.font_bold]}>
+                @{createFullHandle(draftValue, state.userDomain)}
+              </Text>
+            </Text>
+            <View
+              style={[
+                a.w_full,
+                a.rounded_sm,
+                a.border,
+                a.p_md,
+                a.gap_sm,
+                t.atoms.border_contrast_low,
+              ]}>
+              {state.error ? (
+                <View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}>
+                  <IsValidIcon valid={false} />
+                  <Text style={[a.text_md, a.flex_1]}>{state.error}</Text>
+                </View>
+              ) : undefined}
+              {validCheck.hyphenStartOrEnd ? (
+                <View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}>
+                  <IsValidIcon valid={validCheck.handleChars} />
+                  <Text style={[a.text_md, a.flex_1]}>
+                    <Trans>Only contains letters, numbers, and hyphens</Trans>
+                  </Text>
+                </View>
               ) : (
-                <Text style={[a.text_md, a.flex_1]}>
-                  <Trans>At least 3 characters</Trans>
-                </Text>
+                <View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}>
+                  <IsValidIcon valid={validCheck.hyphenStartOrEnd} />
+                  <Text style={[a.text_md, a.flex_1]}>
+                    <Trans>Doesn't begin or end with a hyphen</Trans>
+                  </Text>
+                </View>
               )}
+              <View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}>
+                <IsValidIcon
+                  valid={validCheck.frontLength && validCheck.totalLength}
+                />
+                {!validCheck.totalLength ? (
+                  <Text style={[a.text_md, a.flex_1]}>
+                    <Trans>
+                      No longer than {maxServiceHandleLength(state.userDomain)}{' '}
+                      characters
+                    </Trans>
+                  </Text>
+                ) : (
+                  <Text style={[a.text_md, a.flex_1]}>
+                    <Trans>At least 3 characters</Trans>
+                  </Text>
+                )}
+              </View>
             </View>
-          </View>
+          </>
         )}
       </View>
       <BackNextButtons