@umituz/react-native-ai-generation-content 1.35.6 → 1.35.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.35.6",
+  "version": "1.35.8",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/creations/presentation/components/GalleryEmptyStates.tsx

@@ -102,9 +102,9 @@ export function GalleryEmptyStates({
         return (
             <View style={styles.centerContainer}>
                 <EmptyState
-                    title={t("common.no_results") || "No results"}
-                    description={t("common.no_results_description") || "Try changing your filters"}
-                    actionLabel={t("common.clear_all") || "Clear All"}
+                    title={t("common.no_results")}
+                    description={t("common.no_results_description")}
+                    actionLabel={t("common.clear_all")}
                     onAction={onClearFilters}
                 />
             </View>

package/src/domains/creations/presentation/components/GalleryHeader.tsx

@@ -19,6 +19,10 @@ interface GalleryHeaderProps {
   readonly filterButtons?: FilterButtonConfig[];
   readonly showFilter?: boolean;
   readonly style?: ViewStyle;
+  /** Number of pending/processing jobs to show as badge */
+  readonly pendingCount?: number;
+  /** Label for pending badge tooltip */
+  readonly pendingLabel?: string;
 }
 
 export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
@@ -28,6 +32,8 @@ export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
   filterButtons = [],
   showFilter = true,
   style,
+  pendingCount = 0,
+  pendingLabel,
 }) => {
   const tokens = useAppDesignTokens();
   const styles = useStyles(tokens);
@@ -35,9 +41,20 @@ export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
   return (
     <View style={[styles.headerArea, style]}>
       <View>
-        <AtomicText style={styles.title}>{title}</AtomicText>
+        <View style={styles.titleRow}>
+          <AtomicText style={styles.title}>{title}</AtomicText>
+          {pendingCount > 0 && (
+            <View style={[styles.pendingBadge, { backgroundColor: tokens.colors.primary }]}>
+              <AtomicIcon name="Loader" size="xs" color="onPrimary" />
+              <AtomicText style={[styles.pendingBadgeText, { color: tokens.colors.onPrimary }]}>
+                {pendingCount}
+              </AtomicText>
+            </View>
+          )}
+        </View>
         <AtomicText style={styles.subtitle}>
           {count} {countLabel}
+          {pendingCount > 0 && pendingLabel ? ` · ${pendingCount} ${pendingLabel}` : ""}
         </AtomicText>
       </View>
       {showFilter && filterButtons.length > 0 && (
@@ -83,11 +100,28 @@ const useStyles = (tokens: DesignTokens) =>
       paddingVertical: tokens.spacing.sm,
       marginBottom: tokens.spacing.sm,
     },
+    titleRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens.spacing.sm,
+      marginBottom: 4,
+    },
     title: {
       fontSize: 20,
       fontWeight: "700",
       color: tokens.colors.textPrimary,
-      marginBottom: 4,
+    },
+    pendingBadge: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 4,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 12,
+    },
+    pendingBadgeText: {
+      fontSize: 12,
+      fontWeight: "600",
     },
     subtitle: {
       fontSize: 14,

package/src/domains/creations/presentation/hooks/useGalleryFilters.ts

@@ -4,9 +4,10 @@
  * SOLID: Coordinates filter hooks without business logic
  */
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo } from "react";
 import type { Creation } from "../../domain/entities/Creation";
 import type { FilterOption } from "../../domain/types/creation-filter";
+import type { BackgroundJob } from "../../../../domain/entities/job.types";
 import { useFilter } from "./useFilter";
 import { useCreationsFilter } from "./useCreationsFilter";
 
@@ -15,6 +16,8 @@ interface UseGalleryFiltersProps {
   readonly statusOptions: FilterOption[];
   readonly mediaOptions: FilterOption[];
   readonly t: (key: string) => string;
+  /** Pending background jobs to include in status counts */
+  readonly pendingJobs?: BackgroundJob[];
 }
 
 interface UseGalleryFiltersReturn {
@@ -36,12 +39,30 @@ export function useGalleryFilters({
   creations,
   statusOptions,
   mediaOptions,
-  t
+  t,
+  pendingJobs = [],
 }: UseGalleryFiltersProps): UseGalleryFiltersReturn {
   const [statusFilterVisible, setStatusFilterVisible] = useState(false);
   const [mediaFilterVisible, setMediaFilterVisible] = useState(false);
 
-  const statusFilter = useFilter({ options: statusOptions, t });
+  // Calculate pending jobs count for status filter
+  const processingJobsCount = useMemo(() => {
+    return pendingJobs.filter(
+      (job) => job.status === "processing" || job.status === "queued",
+    ).length;
+  }, [pendingJobs]);
+
+  // Enrich status options with dynamic counts
+  const enrichedStatusOptions = useMemo(() => {
+    return statusOptions.map((option) => {
+      if (option.id === "processing" && processingJobsCount > 0) {
+        return { ...option, count: processingJobsCount };
+      }
+      return option;
+    });
+  }, [statusOptions, processingJobsCount]);
+
+  const statusFilter = useFilter({ options: enrichedStatusOptions, t });
   const mediaFilter = useFilter({ options: mediaOptions, t });
 
   const { filtered, isFiltered, activeFiltersCount } = useCreationsFilter({

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -13,7 +13,7 @@ import {
 import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useGalleryFilters } from "../hooks/useGalleryFilters";
-import { GalleryHeader, CreationCard, GalleryEmptyStates, PendingJobsSection } from "../components";
+import { GalleryHeader, CreationCard, GalleryEmptyStates } from "../components";
 import { ResultPreviewScreen } from "../../../result-preview/presentation/components/ResultPreviewScreen";
 import { StarRatingPicker } from "../../../result-preview/presentation/components/StarRatingPicker";
 import { useResultActions } from "../../../result-preview/presentation/hooks/useResultActions";
@@ -33,10 +33,8 @@ interface CreationsGalleryScreenProps {
   readonly onEmptyAction?: () => void;
   readonly emptyActionLabel?: string;
   readonly showFilter?: boolean;
-  /** Show pending generation jobs at the top */
+  /** Show pending generation jobs badge in header */
   readonly showPendingJobs?: boolean;
-  /** Title for the pending jobs section */
-  readonly pendingJobsTitle?: string;
 }
 
 export function CreationsGalleryScreen({
@@ -49,7 +47,6 @@ export function CreationsGalleryScreen({
   emptyActionLabel,
   showFilter = config.showFilter ?? true,
   showPendingJobs = true,
-  pendingJobsTitle,
 }: CreationsGalleryScreenProps) {
   const tokens = useAppDesignTokens();
   const { share } = useSharing();
@@ -61,7 +58,7 @@ export function CreationsGalleryScreen({
   const { data: creations, isLoading, refetch } = useCreations({ userId, repository });
 
   // Background jobs for pending generations
-  const { jobs: pendingJobs, removeJob } = usePendingJobs();
+  const { jobs: pendingJobs } = usePendingJobs();
 
   // Auto-select creation when initialCreationId is provided
   useEffect(() => {
@@ -91,7 +88,7 @@ export function CreationsGalleryScreen({
   const showStatusFilter = config.filterConfig?.showStatusFilter ?? true;
   const showMediaFilter = config.filterConfig?.showMediaFilter ?? true;
 
-  const filters = useGalleryFilters({ creations, statusOptions, mediaOptions, t });
+  const filters = useGalleryFilters({ creations, statusOptions, mediaOptions, t, pendingJobs });
 
   useAppFocusEffect(useCallback(() => { void refetch(); }, [refetch]));
 
@@ -190,49 +187,30 @@ export function CreationsGalleryScreen({
     />
   ), [handleShareCard, handleDelete, handleFavorite, handleCardPress, getScenarioTitle]);
 
-  // Status labels for pending jobs
-  const pendingJobStatusLabels = useMemo(() => ({
-    queued: t("generator.status.queued") || "Waiting in queue...",
-    processing: t("generator.status.processing") || "Processing...",
-    uploading: t("generator.status.uploading") || "Uploading...",
-    completed: t("generator.status.completed") || "Completed",
-    failed: t("generator.status.failed") || "Failed",
-  }), [t]);
+  // Calculate active pending jobs count once
+  const activePendingCount = useMemo(() => {
+    if (!showPendingJobs) return 0;
+    return pendingJobs.filter((j) => j.status === "processing" || j.status === "queued").length;
+  }, [showPendingJobs, pendingJobs]);
 
   const renderHeader = useMemo(() => {
-    const hasPendingJobs = showPendingJobs && pendingJobs.length > 0;
     const hasCreations = creations && creations.length > 0;
-
-    if (!hasPendingJobs && !hasCreations && !isLoading) return null;
+    if (!hasCreations && !isLoading) return null;
 
     return (
-      <View>
-        {/* Pending Jobs Section */}
-        {showPendingJobs && (
-          <PendingJobsSection
-            jobs={pendingJobs}
-            onCancel={removeJob}
-            title={pendingJobsTitle || t("creations.pendingJobs") || "Processing..."}
-            statusLabels={pendingJobStatusLabels}
-            getTypeLabel={getScenarioTitle}
-          />
-        )}
-
-        {/* Gallery Header */}
-        {hasCreations && (
-          <View style={[styles.header, { backgroundColor: tokens.colors.surface, borderBottomColor: tokens.colors.border }]}>
-            <GalleryHeader
-              title={t(config.translations.title)}
-              count={filters.filtered.length}
-              countLabel={t(config.translations.photoCount)}
-              showFilter={showFilter}
-              filterButtons={filterButtons}
-            />
-          </View>
-        )}
+      <View style={[styles.header, { backgroundColor: tokens.colors.surface, borderBottomColor: tokens.colors.border }]}>
+        <GalleryHeader
+          title={t(config.translations.title)}
+          count={filters.filtered.length}
+          countLabel={t(config.translations.photoCount)}
+          showFilter={showFilter}
+          filterButtons={filterButtons}
+          pendingCount={activePendingCount}
+          pendingLabel={t("creations.processing")}
+        />
       </View>
     );
-  }, [creations, isLoading, filters.filtered.length, showFilter, filterButtons, t, config, tokens, showPendingJobs, pendingJobs, removeJob, pendingJobsTitle, pendingJobStatusLabels, getScenarioTitle]);
+  }, [creations, isLoading, filters.filtered.length, showFilter, filterButtons, t, config, tokens, activePendingCount]);
 
   const renderEmpty = useMemo(() => (
     <GalleryEmptyStates

package/src/domains/generation/wizard/presentation/hooks/useWizardGeneration.ts

@@ -30,7 +30,8 @@ export interface UseWizardGenerationProps {
   readonly wizardData: Record<string, unknown>;
   readonly userId?: string;
   readonly isGeneratingStep: boolean;
-  readonly alertMessages?: AlertMessages;
+  /** Required - alert messages for error states */
+  readonly alertMessages: AlertMessages;
   readonly onSuccess?: (result: unknown) => void;
   readonly onError?: (error: string) => void;
   readonly onCreditsExhausted?: () => void;
@@ -40,8 +41,6 @@ export interface UseWizardGenerationProps {
 
 export interface UseWizardGenerationReturn {
   readonly isGenerating: boolean;
-  /** Current job ID if tracking is enabled */
-  readonly currentJobId: string | null;
 }
 
 export const useWizardGeneration = (
@@ -69,7 +68,7 @@ export const useWizardGeneration = (
     if (typeof __DEV__ !== "undefined" && __DEV__) {
       console.log("[useWizardGeneration] Initialized", {
         scenarioId: scenario.id,
-        outputType: scenario.outputType || "video",
+        outputType: scenario.outputType,
         trackAsBackgroundJob,
       });
     }
@@ -125,13 +124,7 @@ export const useWizardGeneration = (
     strategy,
     {
       userId,
-      alertMessages: alertMessages || {
-        networkError: "No internet connection",
-        policyViolation: "Content policy violation",
-        saveFailed: "Failed to save",
-        creditFailed: "Failed to deduct credits",
-        unknown: "An error occurred",
-      },
+      alertMessages,
       onCreditsExhausted,
       onSuccess: handleSuccess,
       onError: handleError,
@@ -158,7 +151,7 @@ export const useWizardGeneration = (
           }
 
           // Create background job for tracking
-          if (trackAsBackgroundJob) {
+          if (trackAsBackgroundJob && scenario.outputType) {
             const jobId = `wizard-${scenario.id}-${Date.now()}`;
             currentJobIdRef.current = jobId;
 
@@ -166,10 +159,10 @@ export const useWizardGeneration = (
               id: jobId,
               input: {
                 scenarioId: scenario.id,
-                scenarioTitle: scenario.title || scenario.id,
-                outputType: scenario.outputType || "video",
+                scenarioTitle: scenario.title,
+                outputType: scenario.outputType,
               },
-              type: scenario.outputType || "video",
+              type: scenario.outputType,
               status: "processing",
               progress: 10,
             });
@@ -186,7 +179,7 @@ export const useWizardGeneration = (
             console.error("[useWizardGeneration] Input build error:", error);
           }
           hasStarted.current = false;
-          onError?.(error.message || "Failed to prepare generation");
+          onError?.(error.message);
         });
     }
 
@@ -204,8 +197,5 @@ export const useWizardGeneration = (
     addJob,
   ]);
 
-  return {
-    isGenerating,
-    currentJobId: currentJobIdRef.current,
-  };
+  return { isGenerating };
 };