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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.35.6",
+  "version": "1.35.7",
   "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

@@ -91,7 +91,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]));
 
@@ -192,11 +192,11 @@ export function CreationsGalleryScreen({
 
   // 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",
+    queued: t("generator.status.queued"),
+    processing: t("generator.status.processing"),
+    uploading: t("generator.status.uploading"),
+    completed: t("generator.status.completed"),
+    failed: t("generator.status.failed"),
   }), [t]);
 
   const renderHeader = useMemo(() => {
@@ -212,7 +212,7 @@ export function CreationsGalleryScreen({
           <PendingJobsSection
             jobs={pendingJobs}
             onCancel={removeJob}
-            title={pendingJobsTitle || t("creations.pendingJobs") || "Processing..."}
+            title={pendingJobsTitle || t("creations.pendingJobs")}
             statusLabels={pendingJobStatusLabels}
             getTypeLabel={getScenarioTitle}
           />
@@ -227,6 +227,8 @@ export function CreationsGalleryScreen({
               countLabel={t(config.translations.photoCount)}
               showFilter={showFilter}
               filterButtons={filterButtons}
+              pendingCount={pendingJobs.filter((j) => j.status === "processing" || j.status === "queued").length}
+              pendingLabel={t("creations.processing")}
             />
           </View>
         )}