feat(mobile/submissions): red inline errors and gold warning toast

Field errors below "Mosque name" and "Location" now render in
the danger red (the CVA tone merge was previously winning with
the ink base class, so they showed black). The invalid-submit
toast is reclassified from the dark error red to the gold
warning tone — still clearly signals "heads up" but matches
the warning-style intent of a form correction rather than a
hard failure. Submit uses TanStack Form's revalidateLogic so
the button stays enabled, validation fires on first submit,
then re-validates on every change so fixes clear immediately.

Author: Aqib-Rime

apps/mobile/features/submissions/components/submission-edit-screen.tsx

@@ -1,4 +1,4 @@
-import { useForm, useStore } from "@tanstack/react-form";
+import { revalidateLogic, useForm, useStore } from "@tanstack/react-form";
 import { router, useLocalSearchParams } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { useEffect, useState } from "react";
@@ -8,11 +8,13 @@ import { Button } from "@/components/ui/button";
 import { useAppDialog } from "@/components/ui/dialog";
 import { IconButton } from "@/components/ui/icon-button";
 import { Text } from "@/components/ui/text";
+import { useAppToast } from "@/components/ui/toast";
 import {
   useDeleteMySubmission,
   useMySubmission,
   useUpdateMySubmission,
 } from "../hooks/use-submissions";
+import { collectInvalidLabels } from "../lib/collect-invalid-labels";
 import {
   EMPTY_SUBMISSION,
   type MosqueSubmissionInput,
@@ -27,10 +29,26 @@ export function SubmissionEditScreen() {
   const del = useDeleteMySubmission();
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const dialog = useAppDialog();
+  const toast = useAppToast();
 
   const form = useForm({
     defaultValues: EMPTY_SUBMISSION,
-    validators: { onChange: mosqueSubmissionSchema },
+    validationLogic: revalidateLogic({
+      mode: "submit",
+      modeAfterSubmission: "change",
+    }),
+    validators: { onDynamic: mosqueSubmissionSchema },
+    onSubmitInvalid: ({ formApi }) => {
+      const missing = collectInvalidLabels(formApi.state.fieldMeta);
+      toast.show({
+        title: "Missing info",
+        body:
+          missing.length > 0
+            ? `Please fix: ${missing.join(", ")}`
+            : "Please fix the highlighted fields.",
+        tone: "warning",
+      });
+    },
     onSubmit: async ({ value }) => {
       if (!id) return;
       try {
@@ -73,7 +91,6 @@ export function SubmissionEditScreen() {
   }, [submission]);
 
   const isSubmitting = useStore(form.store, (s) => s.isSubmitting);
-  const canSubmit = useStore(form.store, (s) => s.canSubmit);
 
   const readOnly = submission && submission.status !== "pending";
 
@@ -167,7 +184,7 @@ export function SubmissionEditScreen() {
               <Button
                 label={isSubmitting ? "Saving…" : "Save changes"}
                 onPress={() => form.handleSubmit()}
-                disabled={!canSubmit || isSubmitting}
+                disabled={isSubmitting}
               />
               <Button
                 label="Withdraw submission"
@@ -181,6 +198,7 @@ export function SubmissionEditScreen() {
       )}
 
       {dialog.element}
+      {toast.element}
     </View>
   );
 }

apps/mobile/features/submissions/components/submission-form-fields.tsx

@@ -57,7 +57,7 @@ export function SubmissionFormFields({ form, isSubmitting }: Props) {
               editable={!isSubmitting}
             />
             {fieldError(field.state.meta.errors) ? (
-              <Text variant="caption" className="text-[#b04a3a]">
+              <Text variant="caption" tone="danger">
                 {fieldError(field.state.meta.errors)}
               </Text>
             ) : null}
@@ -80,20 +80,31 @@ export function SubmissionFormFields({ form, isSubmitting }: Props) {
         )}
       </form.Field>
 
-      <View className="gap-s-2">
-        <form.Subscribe selector={(s) => [s.values.lat, s.values.lng] as const}>
-          {([lat, lng]) => (
-            <LocationPicker
-              lat={lat}
-              lng={lng}
-              onChange={(newLat, newLng) => {
-                form.setFieldValue("lat", newLat);
-                form.setFieldValue("lng", newLng);
-              }}
-            />
-          )}
-        </form.Subscribe>
-      </View>
+      <form.Field name="lat">
+        {(latField) => (
+          <View className="gap-s-2">
+            <form.Subscribe
+              selector={(s) => [s.values.lat, s.values.lng] as const}
+            >
+              {([lat, lng]) => (
+                <LocationPicker
+                  lat={lat}
+                  lng={lng}
+                  onChange={(newLat, newLng) => {
+                    form.setFieldValue("lat", newLat);
+                    form.setFieldValue("lng", newLng);
+                  }}
+                />
+              )}
+            </form.Subscribe>
+            {fieldError(latField.state.meta.errors) ? (
+              <Text variant="caption" tone="danger">
+                {fieldError(latField.state.meta.errors)}
+              </Text>
+            ) : null}
+          </View>
+        )}
+      </form.Field>
 
       <form.Field name="area">
         {(field) => (

apps/mobile/features/submissions/components/submit-mosque-screen.tsx

@@ -1,4 +1,4 @@
-import { useForm, useStore } from "@tanstack/react-form";
+import { revalidateLogic, useForm, useStore } from "@tanstack/react-form";
 import { router } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { useState } from "react";
@@ -8,7 +8,9 @@ import { Button } from "@/components/ui/button";
 import { useAppDialog } from "@/components/ui/dialog";
 import { IconButton } from "@/components/ui/icon-button";
 import { Text } from "@/components/ui/text";
+import { useAppToast } from "@/components/ui/toast";
 import { useSubmitMosque } from "../hooks/use-submissions";
+import { collectInvalidLabels } from "../lib/collect-invalid-labels";
 import {
   EMPTY_SUBMISSION,
   type MosqueSubmissionInput,
@@ -20,10 +22,28 @@ export function SubmitMosqueScreen() {
   const submit = useSubmitMosque();
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const dialog = useAppDialog();
+  const toast = useAppToast();
 
   const form = useForm({
     defaultValues: EMPTY_SUBMISSION,
-    validators: { onChange: mosqueSubmissionSchema },
+    // Don't run validation until the user taps Submit; once they have,
+    // validate on every change so errors clear as they fix each field.
+    validationLogic: revalidateLogic({
+      mode: "submit",
+      modeAfterSubmission: "change",
+    }),
+    validators: { onDynamic: mosqueSubmissionSchema },
+    onSubmitInvalid: ({ formApi }) => {
+      const missing = collectInvalidLabels(formApi.state.fieldMeta);
+      toast.show({
+        title: "Missing info",
+        body:
+          missing.length > 0
+            ? `Please fix: ${missing.join(", ")}`
+            : "Please fix the highlighted fields.",
+        tone: "warning",
+      });
+    },
     onSubmit: async ({ value }) => {
       try {
         await submit.mutateAsync(value as MosqueSubmissionInput);
@@ -46,7 +66,6 @@ export function SubmitMosqueScreen() {
   });
 
   const isSubmitting = useStore(form.store, (s) => s.isSubmitting);
-  const canSubmit = useStore(form.store, (s) => s.canSubmit);
 
   return (
     <View className="flex-1 bg-cream">
@@ -76,7 +95,8 @@ export function SubmitMosqueScreen() {
       >
         <Text variant="body" tone="muted" className="mb-s-4">
           Fill in what you know — the admin team reviews every submission before
-          it goes live on the map. You can edit anything until it's approved.
+          it goes live on the map. You can edit anything until it&apos;s
+          approved.
         </Text>
 
         {errorMessage ? (
@@ -93,12 +113,13 @@ export function SubmitMosqueScreen() {
           <Button
             label={isSubmitting ? "Submitting…" : "Submit for review"}
             onPress={() => form.handleSubmit()}
-            disabled={!canSubmit || isSubmitting}
+            disabled={isSubmitting}
           />
         </View>
       </ScrollView>
 
       {dialog.element}
+      {toast.element}
     </View>
   );
 }

apps/mobile/features/submissions/lib/collect-invalid-labels.ts

@@ -0,0 +1,36 @@
+/**
+ * Map raw field names to the user-facing labels shown in the validation toast.
+ * Only required fields belong here — optional fields should never produce
+ * errors that need explaining to the user.
+ */
+const FIELD_LABELS: Record<string, string> = {
+  name: "Mosque name",
+  lat: "Location",
+  lng: "Location",
+  city: "City",
+};
+
+type FieldMetaLike = { errors?: readonly unknown[] } | undefined;
+
+/**
+ * Walks a TanStack Form fieldMeta record and returns the user-facing labels
+ * of fields that currently have validation errors. Duplicates are de-duped
+ * (e.g. lat + lng both erroring maps to one "Location" entry).
+ *
+ * TanStack Form's fieldMeta values are typed as `AnyFieldMeta | undefined`
+ * because a field may not yet have been registered; we treat those as no
+ * errors via optional chaining.
+ */
+export function collectInvalidLabels(
+  fieldMeta: Record<string, FieldMetaLike> | undefined,
+): string[] {
+  if (!fieldMeta) return [];
+  const labels = new Set<string>();
+  for (const [field, meta] of Object.entries(fieldMeta)) {
+    const errorCount = meta?.errors?.length ?? 0;
+    if (errorCount === 0) continue;
+    const label = FIELD_LABELS[field];
+    if (label) labels.add(label);
+  }
+  return Array.from(labels);
+}

apps/mobile/features/submissions/lib/schemas.ts

@@ -19,21 +19,28 @@ export const TAG_OPTIONS = [
   "Madrasa",
 ] as const;
 
-export const mosqueSubmissionSchema = z.object({
-  name: z.string().min(1, "Name is required").max(200),
-  subtitle: z.string().max(200).nullable(),
-  about: z.string().max(2000).nullable(),
-  address: z.string().max(300).nullable(),
-  street: z.string().max(200).nullable(),
-  area: z.string().max(100).nullable(),
-  city: z.string().min(1).max(100),
-  lat: z.number().min(-90).max(90),
-  lng: z.number().min(-180).max(180),
-  open: z.boolean(),
-  tags: z.array(z.string()),
-  facilities: z.array(z.string()),
-  photos: z.array(z.string().url()),
-});
+export const mosqueSubmissionSchema = z
+  .object({
+    name: z.string().min(1, "Name is required").max(200),
+    subtitle: z.string().max(200).nullable(),
+    about: z.string().max(2000).nullable(),
+    address: z.string().max(300).nullable(),
+    street: z.string().max(200).nullable(),
+    area: z.string().max(100).nullable(),
+    city: z.string().min(1).max(100),
+    lat: z.number().min(-90).max(90),
+    lng: z.number().min(-180).max(180),
+    open: z.boolean(),
+    tags: z.array(z.string()),
+    facilities: z.array(z.string()),
+    photos: z.array(z.string().url()),
+  })
+  // The empty form starts at (0,0) — a valid coordinate in the ocean but
+  // never a valid mosque. Require the user to pick a real location.
+  .refine((v) => !(v.lat === 0 && v.lng === 0), {
+    message: "Pick the mosque's location on the map",
+    path: ["lat"],
+  });
 
 export type MosqueSubmissionInput = z.infer<typeof mosqueSubmissionSchema>;