feat(profile): add helper sublabel below display name input field

apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/DisplayTextInput.kt

@@ -1,9 +1,12 @@
 package com.flipcash.app.core.ui
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.text.input.InputTransformation
 import androidx.compose.foundation.text.input.KeyboardActionHandler
 import androidx.compose.foundation.text.input.TextFieldState
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -30,39 +33,52 @@ fun DisplayTextInput(
     placeholder: String,
     modifier: Modifier = Modifier,
     textModifier: Modifier = Modifier,
+    sublabel: String? = null,
     style: TextStyle = CodeTheme.typography.displayMedium.copy(
         color = CodeTheme.colors.textMain,
         fontWeight = FontWeight.SemiBold,
     ),
     placeholderStyle: TextStyle = style.copy(color = CodeTheme.colors.textTertiary),
+    sublabelStyle: TextStyle = CodeTheme.typography.textSmall.copy(
+        color = CodeTheme.colors.textSecondary,
+    ),
     minLines: Int = 1,
     maxLines: Int = 1,
     enabled: Boolean = true,
     keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
     onKeyboardAction: KeyboardActionHandler? = null,
     inputTransformation: InputTransformation? = null,
 ) {
-    TextInput(
-        state = state,
-        modifier = modifier,
-        textModifier = textModifier,
-        placeholder = placeholder,
-        style = style,
-        placeholderStyle = placeholderStyle,
-        textFieldAlignment = Alignment.TopStart,
-        maxLines = maxLines,
-        minLines = minLines,
-        minHeight = 0.dp,
-        shape = RectangleShape,
-        enabled = enabled,
-        colors = inputColors(
-            backgroundColor = Color.Transparent,
-            borderColor = Color.Transparent,
-            unfocusedBorderColor = Color.Transparent,
-            placeholderColor = placeholderStyle.color,
-        ),
-        keyboardOptions = keyboardOptions,
-        onKeyboardAction = onKeyboardAction,
-        inputTransformation = inputTransformation,
-    )
+    Column(verticalArrangement = Arrangement.spacedBy(CodeTheme.dimens.grid.x2)) {
+        TextInput(
+            state = state,
+            modifier = modifier,
+            textModifier = textModifier,
+            placeholder = placeholder,
+            style = style,
+            placeholderStyle = placeholderStyle,
+            textFieldAlignment = Alignment.TopStart,
+            maxLines = maxLines,
+            minLines = minLines,
+            minHeight = 0.dp,
+            shape = RectangleShape,
+            enabled = enabled,
+            colors = inputColors(
+                backgroundColor = Color.Transparent,
+                borderColor = Color.Transparent,
+                unfocusedBorderColor = Color.Transparent,
+                placeholderColor = placeholderStyle.color,
+            ),
+            keyboardOptions = keyboardOptions,
+            onKeyboardAction = onKeyboardAction,
+            inputTransformation = inputTransformation,
+        )
+
+        if (sublabel != null) {
+            Text(
+                text = sublabel,
+                style = sublabelStyle,
+            )
+        }
+    }
 }

apps/flipcash/core/src/main/res/values/strings.xml

@@ -887,6 +887,7 @@
     <string name="action_startReceivingTips">Start Receiving Tips</string>
 
     <string name="title_profileNameSelection">What is your name?</string>
+    <string name="subtitle_profileNameSelection">This is how you\'ll appear to others</string>
     <string name="hint_profileName">Your Name</string>
     <string name="error_title_profileNameNotAllowed">This Name is Not Allowed</string>
     <string name="error_description_profileNameNotAllowed">Try a different name</string>

apps/flipcash/features/user-profile/src/main/kotlin/com/flipcash/app/userprofile/internal/name/NameEntryScreen.kt

@@ -122,27 +122,32 @@ private fun NameEntryScreenContent(
         }
     ) { padding ->
         val focusRequester = remember { FocusRequester() }
-        DisplayTextInput(
-            state = state.nameFieldState,
-            placeholder = stringResource(R.string.hint_profileName),
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(padding)
-                .focusRequester(focusRequester),
-            textModifier = Modifier.sharedElementTransition(
-                transition = SharedTransition.CurrencyName,
-            ),
-            keyboardOptions = KeyboardOptions(
-                capitalization = KeyboardCapitalization.Words,
-                keyboardType = KeyboardType.Text,
-                imeAction = ImeAction.Done,
-            ),
-            onKeyboardAction = {
-                keyboard.hideIfVisible {
-                    dispatchEvent(NameEntryViewModel.Event.CheckName)
-                }
-            },
-        )
+        // Apply the scaffold's content padding to the wrapper, not the field —
+        // padding on the field itself inflates its box and pushes the sublabel
+        // far below the entered text instead of letting it sit just underneath.
+        Column(modifier = Modifier.padding(padding)) {
+            DisplayTextInput(
+                state = state.nameFieldState,
+                placeholder = stringResource(R.string.hint_profileName),
+                sublabel = stringResource(R.string.subtitle_profileNameSelection),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .focusRequester(focusRequester),
+                textModifier = Modifier.sharedElementTransition(
+                    transition = SharedTransition.CurrencyName,
+                ),
+                keyboardOptions = KeyboardOptions(
+                    capitalization = KeyboardCapitalization.Words,
+                    keyboardType = KeyboardType.Text,
+                    imeAction = ImeAction.Done,
+                ),
+                onKeyboardAction = {
+                    keyboard.hideIfVisible {
+                        dispatchEvent(NameEntryViewModel.Event.CheckName)
+                    }
+                },
+            )
+        }
 
         LaunchedEffect(Unit) {
             focusRequester.requestFocus()