feat(mobile/map): floating add button to submit a mosque

Extends IconButton with an xl size (84 px, 150% of md) and
adds a pill-shape filled green FAB in the bottom-right of the
map screen that routes to /submit. Composes the existing
IconButton primitive so haptics, pressed scale, and shadows
stay consistent with the rest of the app. Safe-area aware.
Sits below the mosque bottom-sheet so a selected pin overlays
it naturally.

Author: Aqib-Rime

apps/mobile/components/ui/icon-button.tsx

@@ -9,6 +9,8 @@ const iconButtonVariants = cva("items-center justify-center", {
     size: {
       sm: "h-10 w-10",
       md: "h-14 w-14",
+      // 150% of md — used for the floating action button on the map.
+      xl: "size-[60px]",
     },
     shape: {
       pill: "rounded-pill",
@@ -27,9 +29,10 @@ const iconButtonVariants = cva("items-center justify-center", {
   },
 });
 
-const ICON_SIZE: Record<"sm" | "md", number> = {
+const ICON_SIZE: Record<"sm" | "md" | "xl", number> = {
   sm: 18,
   md: 22,
+  xl: 33,
 };
 
 const SHADOW_SM = {
@@ -86,7 +89,7 @@ export function IconButton({
   const resolvedTone: Tone =
     tone ?? (variantKey === "filled" ? "white" : "ink");
   const shadow =
-    variantKey === "ghost" ? null : sizeKey === "md" ? SHADOW_MD : SHADOW_SM;
+    variantKey === "ghost" ? null : sizeKey === "sm" ? SHADOW_SM : SHADOW_MD;
 
   return (
     <Pressable

apps/mobile/components/ui/icon.tsx

@@ -18,6 +18,7 @@ import {
   ParkingSquare,
   Pencil,
   Phone,
+  Plus,
   Route,
   Search,
   Settings2,
@@ -54,6 +55,7 @@ export const iconMap = {
   pencil: Pencil,
   phone: Phone,
   pin: MapPin,
+  plus: Plus,
   recenter: LocateFixed,
   search: Search,
   settings: Settings2,

apps/mobile/features/map/components/map-add-fab.tsx

@@ -0,0 +1,30 @@
+import { router } from "expo-router";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconButton } from "@/components/ui/icon-button";
+
+const MARGIN = 20;
+
+export function MapAddFab() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      pointerEvents="box-none"
+      className="absolute"
+      style={{
+        right: MARGIN,
+        bottom: insets.bottom + MARGIN,
+      }}
+    >
+      <IconButton
+        icon="plus"
+        size="xl"
+        shape="pill"
+        variant="filled"
+        accessibilityLabel="Submit a mosque"
+        onPress={() => router.push("/submit")}
+      />
+    </View>
+  );
+}

apps/mobile/features/map/components/map-screen.tsx

@@ -16,6 +16,7 @@ import {
 import { usePrayerTimes } from "@/features/prayer-times";
 import { useUserLocation } from "@/lib/use-user-location";
 import { DHAKA_REGION } from "../lib/region";
+import { MapAddFab } from "./map-add-fab";
 import { MapMarkers } from "./map-markers";
 import { MapMosqueSheet } from "./map-mosque-sheet";
 import { MapTopOverlay } from "./map-top-overlay";
@@ -193,6 +194,8 @@ export function MapScreen() {
         onCloseMenu={() => setMenuOpen(false)}
       />
 
+      <MapAddFab />
+
       <MapMosqueSheet
         ref={sheetRef}
         mosque={selected}