Polish mobile and web experience

apps/mobile/components/businesses/BusinessForm.tsx

@@ -17,7 +17,7 @@ import { fonts, spacing } from "@/constants/theme";
 import { useAppTheme } from "@/contexts/ThemeContext";
 import type { ThemeColors } from "@/lib/theme-palette";
 import { useThemedStyles } from "@/lib/use-themed-styles";
-import { isRequiredString } from "@/lib/form-validation";
+import { isRequiredString, useFieldVisibility } from "@/lib/form-validation";
 import { api } from "@/lib/trpc";
 
 type BusinessFormValues = {
@@ -78,6 +78,7 @@ export function BusinessForm({
 
   const [values, setValues] = useState<BusinessFormValues>(emptyValues);
   const [fieldError, setFieldError] = useState<string | null>(null);
+  const { touch, visible, markSubmitted } = useFieldVisibility();
 
   const switchProps = {
     trackColor: { false: colors.switchTrackOff, true: colors.switchTrackOn },
@@ -154,6 +155,7 @@ export function BusinessForm({
   }
 
   function handleSave() {
+    markSubmitted();
     if (!canSave) return;
 
     const payload = buildPayload();
@@ -203,8 +205,9 @@ export function BusinessForm({
             label="Name"
             value={values.name}
             onChangeText={(v) => patch("name", v)}
+            onBlur={() => touch("name")}
             required
-            error={nameError}
+            error={visible("name") ? nameError : undefined}
           />
           <Input
             label="Nickname"
@@ -281,7 +284,7 @@ export function BusinessForm({
           />
         </Card>
 
-        {fieldError ? <Text style={styles.error}>{fieldError}</Text> : null}
+        {fieldError ? <Text selectable style={styles.error}>{fieldError}</Text> : null}
 
         <View style={styles.actions}>
           <Button