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,16 +134,24 @@ export function StepHandle() {
             />
           </TextField.Root>
         </View>
-        {draftValue !== '' && (
+
+        {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>
-        )}
-
-        {draftValue !== '' && (
             <View
               style={[
                 a.w_full,
@@ -188,6 +200,7 @@ export function StepHandle() {
                 )}
               </View>
             </View>
+          </>
         )}
       </View>
       <BackNextButtons