[APP] Add Expo Router formSheet modal for typical dish details

README.md

@@ -4,6 +4,12 @@
 
 A smart travel planning assistant that leverages Google Gemini AI to create personalized trip itineraries. Simply input your destination, travel dates, budget, and number of travelers to receive customized travel plans tailored specifically to your needs - eliminating hours of research and planning.
 
+## AI Generation Pipeline
+
+<div align="center">
+  <img src="wiki/docs/diagrams/AI_Generation_Pipeline.png" alt="AI Generation Pipeline" width="100%">
+</div>
+
 ## AI Model
 
 HolidAI is powered by Google's Gemini 2.5 Flash model, a state-of-the-art large language model specifically optimized for fast, efficient responses while maintaining high-quality outputs. The model is particularly well-suited for travel planning tasks due to its:

app.json

@@ -8,7 +8,7 @@
     "scheme": "holidai",
     "userInterfaceStyle": "automatic",
     "splash": {
-      "image": "./features/core/ui/assets/images/logo_round.png",
+      "image": "./features/core/ui/assets/images/logo.png",
       "resizeMode": "contain",
       "backgroundColor": "#220059"
     },
@@ -53,13 +53,13 @@
         "expo-splash-screen",
         {
           "backgroundColor": "#220059",
-          "image": "./features/core/ui/assets/images/logo_round.png",
+          "image": "./features/core/ui/assets/images/logo.png",
+          "imageWidth": 150,
           "dark": {
-            "image": "./features/core/ui/assets/images/logo_round.png",
+            "image": "./features/core/ui/assets/images/logo.png",
             "backgroundColor": "#220059"
           },
           "ios": {
-            "imageWidth": 100,
             "resizeMode": "contain"
           },
           "android": {

app/(main)/(authenticated)/create-trip/_layout.tsx

@@ -1,4 +1,4 @@
-import { Routes, navigationService } from '@/features/core/navigation';
+import { Modals, Routes, formSheetOptions, navigationService } from '@/features/core/navigation';
 import { CustomHeader, icons } from '@/features/core/ui';
 import { Stack } from 'expo-router';
 
@@ -72,6 +72,7 @@ export default function CreateTripLayout() {
           headerShown: false,
         }}
       />
+      <Stack.Screen name={Modals.TypicalDishes} options={formSheetOptions} />
     </Stack>
   );
 }

app/(main)/(authenticated)/create-trip/typical-dishes-modal.tsx

@@ -0,0 +1,7 @@
+import { TypicalDishesModalPage } from '@/features/trips/pages';
+
+const TypicalDishesModal = () => {
+  return <TypicalDishesModalPage />;
+};
+
+export default TypicalDishesModal;

convex/validators/Trips.ts

@@ -47,10 +47,19 @@ export const Weather = v.object({
   weatherOutdoorActivitiesNotes: v.string(),
 });
 
+export const TypicalDish = v.object({
+  name: v.string(),
+  searchTerm: v.string(),
+  description: v.string(),
+  ingredients: v.array(v.string()),
+  isGlutenFree: v.boolean(),
+  isVegetarian: v.boolean(),
+});
+
 export const Food = v.object({
   foodGeneralNotes: v.string(),
   foodBudgetNotes: v.string(),
-  typicalDishes: v.array(v.string()),
+  typicalDishes: v.array(TypicalDish),
 });
 
 export const TripAiResp = v.object({

features/core/images/data/dtos/WikimediaSearchResponseDTO.ts

@@ -0,0 +1,28 @@
+export type WikimediaExtMetadataDTO = {
+  Restrictions?: { value: string };
+  DeletionReason?: { value: string };
+};
+
+export type WikimediaImageInfoDTO = {
+  thumburl: string;
+  width: number;
+  height: number;
+  extmetadata?: WikimediaExtMetadataDTO;
+};
+
+export type WikimediaCategoryDTO = {
+  title: string;
+};
+
+export type WikimediaPageDTO = {
+  pageid: number;
+  title: string;
+  categories?: WikimediaCategoryDTO[];
+  imageinfo?: WikimediaImageInfoDTO[];
+};
+
+export type WikimediaSearchResponseDTO = {
+  query?: {
+    pages?: Record<string, WikimediaPageDTO>;
+  };
+};

features/core/images/data/repositories/WikimediaDishImageRepository.ts

@@ -0,0 +1,78 @@
+import type { Result } from '@/features/core/error';
+import { ok } from '@/features/core/error';
+import type { IHttpClient } from '@/features/core/http';
+import { HTTP_TYPES } from '@/features/core/http';
+import type {
+  WikimediaPageDTO,
+  WikimediaSearchResponseDTO,
+} from '@/features/core/images/data/dtos/WikimediaSearchResponseDTO';
+import type { ImageFetchOptions } from '@/features/core/images/domain/entities/ImageFetchOptions';
+import type { ImageResult } from '@/features/core/images/domain/entities/ImageResult';
+import { FOOD_CATEGORY_KEYWORDS } from '@/features/core/images/domain/entities/foodCategoryKeywords';
+import type { IImageRepository } from '@/features/core/images/domain/entities/repositories/IImageRepository';
+import { inject, injectable } from 'inversify';
+
+const BASE_URL = 'https://commons.wikimedia.org/w/api.php';
+const USER_AGENT = 'HolidAI/1.0 (https://github.com/timothyrusso/holidai)';
+const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png'] as const;
+const MIN_IMAGE_DIMENSION_PX = 400;
+
+@injectable()
+export class WikimediaDishImageRepository implements IImageRepository {
+  constructor(@inject(HTTP_TYPES.HttpClient) private readonly http: IHttpClient) {}
+
+  async getImage(dish: string, options?: ImageFetchOptions): Promise<Result<ImageResult | null>> {
+    const urlWidth = options?.maxWidthPx ?? 800;
+    const params = new URLSearchParams({
+      action: 'query',
+      generator: 'search',
+      gsrsearch: `${dish} food haswbstatement:P180`,
+      gsrnamespace: '6',
+      gsrlimit: '20',
+      gsrsort: 'relevance',
+      prop: 'imageinfo|categories',
+      iiprop: 'url|dimensions|extmetadata',
+      cllimit: '50',
+      iiurlwidth: String(urlWidth),
+      iimetadataversion: 'latest',
+      format: 'json',
+      origin: '*',
+    });
+
+    const result = await this.http.get<WikimediaSearchResponseDTO>(`${BASE_URL}?${params.toString()}`, {
+      headers: { 'User-Agent': USER_AGENT },
+    });
+
+    if (!result.success) return result;
+
+    const pages = Object.values(result.data.query?.pages ?? {});
+    const info = pages.find(p => this.isUsableImage(p, dish))?.imageinfo?.[0] ?? null;
+
+    if (!info) return ok(null);
+    return ok({ url: info.thumburl });
+  }
+
+  private isUsableImage(page: WikimediaPageDTO, dish: string): boolean {
+    const info = page.imageinfo?.[0];
+    if (!info?.thumburl) return false;
+    if (info.width < MIN_IMAGE_DIMENSION_PX && info.height < MIN_IMAGE_DIMENSION_PX) return false;
+    if (!this.isAllowedImageExtension(info.thumburl)) return false;
+    if (info.extmetadata?.Restrictions?.value) return false;
+    if (!this.hasFoodCategory(page, dish)) return false;
+    return true;
+  }
+
+  private isAllowedImageExtension(url: string): boolean {
+    const lower = url.toLowerCase();
+    return ALLOWED_IMAGE_EXTENSIONS.some(ext => lower.endsWith(ext));
+  }
+
+  private hasFoodCategory(page: WikimediaPageDTO, dish: string): boolean {
+    if (!page.categories?.length) return false;
+    const lowerDish = dish.toLowerCase();
+    return page.categories.some(cat => {
+      const lowerCat = cat.title.toLowerCase();
+      return lowerCat.includes(lowerDish) || FOOD_CATEGORY_KEYWORDS.some(kw => lowerCat.includes(kw));
+    });
+  }
+}

features/core/images/di/config.ts

@@ -4,10 +4,12 @@ import { ContainerModule } from 'inversify';
 import { container } from '@/features/core/container';
 import { GooglePlacesImageRepository } from '@/features/core/images/data/repositories/GooglePlacesImageRepository';
 import { UnsplashImageRepository } from '@/features/core/images/data/repositories/UnsplashImageRepository';
+import { WikimediaDishImageRepository } from '@/features/core/images/data/repositories/WikimediaDishImageRepository';
 import { IMAGES_TYPES } from '@/features/core/images/di/types';
 import { FetchGooglePlaceImageUseCase } from '@/features/core/images/useCases/FetchGooglePlaceImageUseCase';
 import { FetchGooglePlaceImagesUseCase } from '@/features/core/images/useCases/FetchGooglePlaceImagesUseCase';
 import { FetchUnsplashImageUseCase } from '@/features/core/images/useCases/FetchUnsplashImageUseCase';
+import { FetchWikimediaDishImageUseCase } from '@/features/core/images/useCases/FetchWikimediaDishImageUseCase';
 
 const imagesModule = new ContainerModule(({ bind }) => {
   bind<string>(IMAGES_TYPES.UnsplashApiKey).toConstantValue(Constants.expoConfig?.extra?.unsplashAccessKey ?? '');
@@ -18,6 +20,8 @@ const imagesModule = new ContainerModule(({ bind }) => {
   bind(IMAGES_TYPES.FetchUnsplashImageUseCase).to(FetchUnsplashImageUseCase).inSingletonScope();
   bind(IMAGES_TYPES.FetchGooglePlaceImageUseCase).to(FetchGooglePlaceImageUseCase).inSingletonScope();
   bind(IMAGES_TYPES.FetchGooglePlaceImagesUseCase).to(FetchGooglePlaceImagesUseCase).inSingletonScope();
+  bind(IMAGES_TYPES.WikimediaDishImageRepository).to(WikimediaDishImageRepository).inSingletonScope();
+  bind(IMAGES_TYPES.FetchWikimediaDishImageUseCase).to(FetchWikimediaDishImageUseCase).inSingletonScope();
 });
 
 container.load(imagesModule);

features/core/images/di/resolve.ts

@@ -5,6 +5,7 @@ import { IMAGES_TYPES } from '@/features/core/images/di/types';
 import type { FetchGooglePlaceImageUseCase } from '@/features/core/images/useCases/FetchGooglePlaceImageUseCase';
 import type { FetchGooglePlaceImagesUseCase } from '@/features/core/images/useCases/FetchGooglePlaceImagesUseCase';
 import type { FetchUnsplashImageUseCase } from '@/features/core/images/useCases/FetchUnsplashImageUseCase';
+import type { FetchWikimediaDishImageUseCase } from '@/features/core/images/useCases/FetchWikimediaDishImageUseCase';
 
 export const fetchUnsplashImageUseCase = container.get<FetchUnsplashImageUseCase>(
   IMAGES_TYPES.FetchUnsplashImageUseCase,
@@ -15,3 +16,6 @@ export const fetchGooglePlaceImageUseCase = container.get<FetchGooglePlaceImageU
 export const fetchGooglePlaceImagesUseCase = container.get<FetchGooglePlaceImagesUseCase>(
   IMAGES_TYPES.FetchGooglePlaceImagesUseCase,
 );
+export const fetchWikimediaDishImageUseCase = container.get<FetchWikimediaDishImageUseCase>(
+  IMAGES_TYPES.FetchWikimediaDishImageUseCase,
+);

features/core/images/di/types.ts

@@ -7,4 +7,6 @@ export const IMAGES_TYPES = {
   FetchUnsplashImageUseCase: Symbol.for('Images.FetchUnsplashImageUseCase'),
   FetchGooglePlaceImageUseCase: Symbol.for('Images.FetchGooglePlaceImageUseCase'),
   FetchGooglePlaceImagesUseCase: Symbol.for('Images.FetchGooglePlaceImagesUseCase'),
+  WikimediaDishImageRepository: Symbol.for('Images.WikimediaDishImageRepository'),
+  FetchWikimediaDishImageUseCase: Symbol.for('Images.FetchWikimediaDishImageUseCase'),
 } as const;