feat(mobile/mosques): hero photo + gallery on detail screen

Renders photos[0] as full-bleed 4:3 hero with back and save
buttons overlaid via absolute-positioned safe-area view; photo
strip below when photos.length > 1; thumbnail in bottom sheet.

Author: Aqib-Rime

apps/mobile/features/mosques/components/mosque-detail-content.tsx

@@ -9,6 +9,7 @@ import { MosqueDetailTabs, type MosqueTab } from "./mosque-detail-tabs";
 import { MosqueEventsTab } from "./mosque-events-tab";
 import { MosqueMetaRow } from "./mosque-meta-row";
 import { MosqueOverviewTab } from "./mosque-overview-tab";
+import { MosquePhotoHero, MosquePhotoStrip } from "./mosque-photo-gallery";
 import { MosqueReviewsTab } from "./mosque-reviews-tab";
 
 export function MosqueDetailContent({ data }: { data: MosqueDetail }) {
@@ -31,7 +32,9 @@ export function MosqueDetailContent({ data }: { data: MosqueDetail }) {
         />
       }
     >
-      <View className="px-s-6 pt-s-2">
+      <MosquePhotoHero photos={mosque.photos} />
+
+      <View className="px-s-6 pt-s-5">
         <Text variant="display-lg">{mosque.name}</Text>
         {mosque.subtitle ? (
           <Text variant="body" tone="muted" className="mt-s-1">
@@ -48,6 +51,12 @@ export function MosqueDetailContent({ data }: { data: MosqueDetail }) {
         </View>
       </View>
 
+      {mosque.photos.length > 1 ? (
+        <View className="mt-s-5">
+          <MosquePhotoStrip photos={mosque.photos} />
+        </View>
+      ) : null}
+
       <View className="mt-s-5">
         <MosqueDetailTabs active={tab} onChange={setTab} />
       </View>

apps/mobile/features/mosques/components/mosque-detail-header.tsx

@@ -0,0 +1,31 @@
+import { router } from "expo-router";
+import { View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { IconButton } from "@/components/ui/icon-button";
+import { MosqueSaveButton } from "./mosque-save-button";
+
+type Props = {
+  mosqueId?: string;
+  isSaved?: boolean;
+};
+
+export function MosqueDetailOverlay({ mosqueId, isSaved }: Props) {
+  return (
+    <View pointerEvents="box-none" className="absolute inset-x-0 top-0 z-10">
+      <SafeAreaView edges={["top"]} pointerEvents="box-none">
+        <View className="flex-row items-center justify-between px-s-5 py-s-3">
+          <IconButton
+            icon="back"
+            onPress={() => router.back()}
+            accessibilityLabel="Back"
+          />
+          {mosqueId ? (
+            <MosqueSaveButton mosqueId={mosqueId} isSaved={isSaved ?? false} />
+          ) : (
+            <View className="h-10 w-10" />
+          )}
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+}

apps/mobile/features/mosques/components/mosque-detail-overlay.tsx

@@ -2,20 +2,18 @@ import { useLocalSearchParams } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { useEffect } from "react";
 import { View } from "react-native";
-import { useThemeScheme } from "@/features/theme/hooks/use-theme-scheme";
 import { useMosque } from "../hooks/use-mosques";
 import { usePushRecentMosque } from "../hooks/use-recent-mosques";
 import { MosqueDetailContent } from "./mosque-detail-content";
 import { MosqueDetailError } from "./mosque-detail-error";
-import { MosqueDetailHeader } from "./mosque-detail-header";
+import { MosqueDetailOverlay } from "./mosque-detail-overlay";
 import { MosqueDetailSkeleton } from "./mosque-detail-skeleton";
 import { MosqueDirectionsFooter } from "./mosque-directions-footer";
 
 export function MosqueDetailScreen() {
   const { id } = useLocalSearchParams<{ id: string }>();
   const { data, isLoading, error, refetch } = useMosque(id);
   const pushRecent = usePushRecentMosque();
-  const scheme = useThemeScheme();
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: pushRecent is a stable mutation; we only want to fire when the id changes
   useEffect(() => {
@@ -24,8 +22,7 @@ export function MosqueDetailScreen() {
 
   return (
     <View className="flex-1 bg-cream">
-      <StatusBar style={scheme === "dark" ? "light" : "dark"} />
-      <MosqueDetailHeader mosqueId={data?.mosque.id} isSaved={data?.isSaved} />
+      <StatusBar style="light" />
 
       {isLoading ? (
         <MosqueDetailSkeleton />
@@ -37,6 +34,8 @@ export function MosqueDetailScreen() {
           <MosqueDirectionsFooter mosque={data.mosque} />
         </>
       )}
+
+      <MosqueDetailOverlay mosqueId={data?.mosque.id} isSaved={data?.isSaved} />
     </View>
   );
 }

apps/mobile/features/mosques/components/mosque-detail-screen.tsx

@@ -0,0 +1,53 @@
+import { Image } from "expo-image";
+import { FlatList, View } from "react-native";
+import { MosqueMark } from "@/components/ui/mosque-mark";
+
+type Props = {
+  photos: string[];
+};
+
+export function MosquePhotoHero({ photos }: Props) {
+  const uri = photos[0];
+
+  if (!uri) {
+    return (
+      <View className="aspect-[4/3] items-center justify-center bg-green-tint">
+        <MosqueMark size="xl" />
+      </View>
+    );
+  }
+
+  return (
+    <View className="aspect-[4/3] bg-line">
+      <Image
+        source={{ uri }}
+        contentFit="cover"
+        style={{ width: "100%", height: "100%" }}
+        transition={200}
+      />
+    </View>
+  );
+}
+
+export function MosquePhotoStrip({ photos }: Props) {
+  const rest = photos.slice(1);
+  if (rest.length === 0) return null;
+
+  return (
+    <FlatList
+      data={rest}
+      keyExtractor={(uri) => uri}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={{ paddingHorizontal: 24, gap: 8 }}
+      renderItem={({ item }) => (
+        <Image
+          source={{ uri: item }}
+          contentFit="cover"
+          style={{ width: 120, height: 88, borderRadius: 8 }}
+          transition={200}
+        />
+      )}
+    />
+  );
+}

apps/mobile/features/mosques/components/mosque-photo-gallery.tsx

@@ -1,6 +1,8 @@
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
+import { Image } from "expo-image";
 import { useMemo } from "react";
 import { View } from "react-native";
+import { MosqueMark } from "@/components/ui/mosque-mark";
 import { Text } from "@/components/ui/text";
 import { useSavedMosques } from "../hooks/use-mosques";
 import type { MosqueListItem } from "../lib/types";
@@ -16,6 +18,7 @@ export function MosqueSheetContent({ mosque }: { mosque: MosqueListItem }) {
     () => Boolean(saved.data?.data.some((m) => m.id === mosque.id)),
     [saved.data, mosque.id],
   );
+  const thumb = mosque.photos?.[0];
 
   return (
     <BottomSheetScrollView
@@ -24,6 +27,16 @@ export function MosqueSheetContent({ mosque }: { mosque: MosqueListItem }) {
     >
       <View className="px-s-6 pt-s-2">
         <View className="flex-row items-start gap-s-3">
+          {thumb ? (
+            <Image
+              source={{ uri: thumb }}
+              contentFit="cover"
+              style={{ width: 56, height: 56, borderRadius: 8 }}
+              transition={200}
+            />
+          ) : (
+            <MosqueMark size="md" />
+          )}
           <View className="flex-1">
             <Text variant="display-md">{mosque.name}</Text>
             {mosque.subtitle ? (