@umituz/react-native-ai-generation-content 1.12.11 → 1.12.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.12.11",
+  "version": "1.12.14",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -78,4 +78,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/domains/creations/domain/entities/Creation.ts

@@ -12,6 +12,7 @@ export interface Creation {
   readonly originalUri?: string;
   readonly createdAt: Date;
   readonly isShared: boolean;
+  readonly isFavorite: boolean;
 }
 
 export interface CreationDocument {
@@ -26,6 +27,7 @@ export interface CreationDocument {
   readonly type?: string;
   readonly status?: string;
   readonly isShared: boolean;
+  readonly isFavorite: boolean;
   readonly createdAt: FirebaseTimestamp | Date; // Allow Date for writing
   readonly completedAt?: FirebaseTimestamp | Date;
 }
@@ -47,5 +49,6 @@ export function mapDocumentToCreation(
     originalUri: data.originalImageUrl || data.originalImage,
     createdAt: (data.createdAt as any)?.toDate?.() || (data.createdAt instanceof Date ? data.createdAt : new Date()),
     isShared: data.isShared ?? false,
+    isFavorite: data.isFavorite ?? false,
   };
 }

package/src/domains/creations/domain/repositories/ICreationsRepository.ts

@@ -15,6 +15,8 @@ export interface ICreationsRepository {
     updates: Partial<Creation>,
   ): Promise<boolean>;
   delete(userId: string, creationId: string): Promise<boolean>;
+  deleteMultiple(userId: string, creationIds: string[]): Promise<boolean>;
+  toggleFavorite(userId: string, creationId: string): Promise<boolean>;
   updateShared(
     userId: string,
     creationId: string,

package/src/domains/creations/domain/value-objects/CreationsConfig.ts

@@ -52,6 +52,7 @@ export interface CreationsConfig {
   readonly gridColumns?: number;
   readonly pathBuilder?: PathBuilder;
   readonly documentMapper?: DocumentMapper;
+  readonly enableFiltering?: boolean;
 }
 
 export const DEFAULT_TRANSLATIONS: CreationsTranslations = {

package/src/domains/creations/infrastructure/repositories/CreationsRepository.ts

@@ -157,6 +157,7 @@ export class CreationsRepository
       createdAt: creation.createdAt,
       metadata: creation.metadata || {},
       isShared: creation.isShared || false,
+      isFavorite: creation.isFavorite || false,
     };
 
     await setDoc(docRef, data);
@@ -183,6 +184,9 @@ export class CreationsRepository
       if (updates.isShared !== undefined) {
         updateData.isShared = updates.isShared;
       }
+      if (updates.isFavorite !== undefined) {
+        updateData.isFavorite = updates.isFavorite;
+      }
       if (updates.uri !== undefined) {
         updateData.uri = updates.uri;
       }
@@ -215,6 +219,32 @@ export class CreationsRepository
     }
   }
 
+  async deleteMultiple(userId: string, creationIds: string[]): Promise<boolean> {
+    try {
+      const promises = creationIds.map((id) => this.delete(userId, id));
+      const results = await Promise.all(promises);
+      return results.every((r) => r);
+    } catch {
+      return false;
+    }
+  }
+
+  async toggleFavorite(userId: string, creationId: string): Promise<boolean> {
+    const docRef = this.getDocRef(userId, creationId);
+    if (!docRef) return false;
+
+    try {
+      const docSnap = await getDoc(docRef);
+      if (!docSnap.exists()) return false;
+
+      const current = docSnap.data() as CreationDocument;
+      await updateDoc(docRef, { isFavorite: !current.isFavorite });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
   async updateShared(
     userId: string,
     creationId: string,

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

@@ -19,6 +19,10 @@ interface CreationCardProps {
   readonly onView?: (creation: Creation) => void;
   readonly onShare: (creation: Creation) => void;
   readonly onDelete: (creation: Creation) => void;
+  readonly onToggleFavorite?: (creation: Creation) => void;
+  readonly isSelected?: boolean;
+  readonly onSelect?: (creation: Creation) => void;
+  readonly isSelectionMode?: boolean;
 }
 
 export function CreationCard({
@@ -27,6 +31,10 @@ export function CreationCard({
   onView,
   onShare,
   onDelete,
+  onToggleFavorite,
+  isSelected,
+  onSelect,
+  isSelectionMode,
 }: CreationCardProps) {
   const tokens = useAppDesignTokens();
 
@@ -40,6 +48,14 @@ export function CreationCard({
     () => onDelete(creation),
     [creation, onDelete],
   );
+  const handleToggleFavorite = useCallback(
+    () => onToggleFavorite?.(creation),
+    [creation, onToggleFavorite],
+  );
+  const handleSelect = useCallback(
+    () => onSelect?.(creation),
+    [creation, onSelect],
+  );
 
   const formattedDate = useMemo(() => {
     const date =
@@ -63,11 +79,42 @@ export function CreationCard({
           borderRadius: tokens.spacing.md,
           overflow: "hidden",
           marginBottom: tokens.spacing.md,
+          borderWidth: 1,
+          borderColor: isSelected ? tokens.colors.primary : "transparent",
+        },
+        imageContainer: {
+          width: 100,
+          height: 100,
+          position: "relative",
         },
         thumbnail: {
           width: 100,
           height: 100,
         },
+        favoriteBtn: {
+          position: "absolute",
+          top: 4,
+          right: 4,
+          width: 28,
+          height: 28,
+          borderRadius: 14,
+          backgroundColor: "rgba(255,255,255,0.7)",
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        selectionOverlay: {
+          position: "absolute",
+          top: 4,
+          left: 4,
+          width: 24,
+          height: 24,
+          borderRadius: 12,
+          backgroundColor: isSelected ? tokens.colors.primary : "rgba(255,255,255,0.5)",
+          justifyContent: "center",
+          alignItems: "center",
+          borderWidth: 1,
+          borderColor: tokens.colors.primary,
+        },
         content: {
           flex: 1,
           padding: tokens.spacing.md,
@@ -103,12 +150,33 @@ export function CreationCard({
           alignItems: "center",
         },
       }),
-    [tokens],
+    [tokens, isSelected],
   );
 
   return (
-    <View style={styles.container}>
-      <Image source={{ uri: creation.uri }} style={styles.thumbnail} />
+    <TouchableOpacity
+      activeOpacity={0.9}
+      style={styles.container}
+      onPress={isSelectionMode ? handleSelect : handleView}
+      onLongPress={handleSelect}
+    >
+      <View style={styles.imageContainer}>
+        <Image source={{ uri: creation.uri }} style={styles.thumbnail} />
+        {isSelectionMode && (
+          <View style={styles.selectionOverlay}>
+            {isSelected && <AtomicIcon name="checkmark-circle" size="xs" color="white" />}
+          </View>
+        )}
+        {!isSelectionMode && onToggleFavorite && (
+          <TouchableOpacity style={styles.favoriteBtn} onPress={handleToggleFavorite}>
+            <AtomicIcon
+              name={creation.isFavorite ? "heart" : "heart-outline"}
+              size="xs"
+              color={creation.isFavorite ? "error" : "secondary"}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
       <View style={styles.content}>
         <View>
           <View style={styles.typeRow}>
@@ -117,20 +185,17 @@ export function CreationCard({
           </View>
           <AtomicText style={styles.dateText}>{formattedDate}</AtomicText>
         </View>
-        <View style={styles.actions}>
-          {onView && (
-            <TouchableOpacity style={styles.actionBtn} onPress={handleView}>
-              <AtomicIcon name="eye" size="sm" color="primary" />
+        {!isSelectionMode && (
+          <View style={styles.actions}>
+            <TouchableOpacity style={styles.actionBtn} onPress={handleShare}>
+              <AtomicIcon name="share-social" size="sm" color="primary" />
             </TouchableOpacity>
-          )}
-          <TouchableOpacity style={styles.actionBtn} onPress={handleShare}>
-            <AtomicIcon name="share-social" size="sm" color="primary" />
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.actionBtn} onPress={handleDelete}>
-            <AtomicIcon name="trash" size="sm" color="error" />
-          </TouchableOpacity>
-        </View>
+            <TouchableOpacity style={styles.actionBtn} onPress={handleDelete}>
+              <AtomicIcon name="trash" size="sm" color="error" />
+            </TouchableOpacity>
+          </View>
+        )}
       </View>
-    </View>
+    </TouchableOpacity>
   );
 }

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

@@ -13,6 +13,10 @@ interface CreationsGridProps {
     readonly onView: (creation: Creation) => void;
     readonly onShare: (creation: Creation) => void;
     readonly onDelete: (creation: Creation) => void;
+    readonly onToggleFavorite?: (creation: Creation) => void;
+    readonly selectedIds?: string[];
+    readonly onSelect?: (creation: Creation) => void;
+    readonly isSelectionMode?: boolean;
     readonly contentContainerStyle?: any;
     readonly ListEmptyComponent?: React.ReactElement | null;
     readonly ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null;
@@ -26,6 +30,10 @@ export const CreationsGrid: React.FC<CreationsGridProps> = ({
     onView,
     onShare,
     onDelete,
+    onToggleFavorite,
+    selectedIds = [],
+    onSelect,
+    isSelectionMode = false,
     contentContainerStyle,
     ListEmptyComponent,
     ListHeaderComponent,
@@ -40,6 +48,10 @@ export const CreationsGrid: React.FC<CreationsGridProps> = ({
             onView={() => onView(item)}
             onShare={() => onShare(item)}
             onDelete={() => onDelete(item)}
+            onToggleFavorite={onToggleFavorite}
+            isSelected={selectedIds.includes(item.id)}
+            onSelect={onSelect}
+            isSelectionMode={isSelectionMode}
         />
     );
 

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

@@ -10,7 +10,12 @@ interface GalleryHeaderProps {
     readonly onFilterPress: () => void;
     readonly filterLabel?: string;
     readonly filterIcon?: any;
+    readonly onFavoritesPress?: () => void;
+    readonly showOnlyFavorites?: boolean;
     readonly style?: any;
+    readonly subtitle?: string;
+    readonly isFilterEnabled?: boolean;
+    readonly showCount?: boolean;
 }
 
 export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
@@ -21,6 +26,11 @@ export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
     onFilterPress,
     filterLabel = 'Filter',
     filterIcon = 'filter-outline',
+    onFavoritesPress,
+    showOnlyFavorites = false,
+    subtitle,
+    isFilterEnabled = true,
+    showCount = true,
     style,
 }) => {
     const tokens = useAppDesignTokens();
@@ -28,29 +38,46 @@ export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
 
     return (
         <View style={[styles.headerArea, style]}>
-            <View>
-                <AtomicText style={styles.title}>{title}</AtomicText>
+            <View style={styles.titleArea}>
+                {!!title && <AtomicText style={styles.title}>{title}</AtomicText>}
                 <AtomicText style={styles.subtitle}>
-                    {count} {countLabel}
+                    {subtitle || (showCount ? `${count} ${countLabel}` : '')}
                 </AtomicText>
             </View>
-            <TouchableOpacity
-                onPress={onFilterPress}
-                style={[styles.filterButton, isFiltered && styles.filterButtonActive]}
-                activeOpacity={0.7}
-            >
-                <AtomicIcon
-                    name={filterIcon}
-                    size="sm"
-                    color={isFiltered ? "primary" : "secondary"}
-                />
-                <AtomicText style={[styles.filterText, { color: isFiltered ? tokens.colors.primary : tokens.colors.textSecondary }]}>
-                    {filterLabel}
-                </AtomicText>
-                {isFiltered && (
-                    <View style={styles.badge} />
+            <View style={styles.actions}>
+                {onFavoritesPress && (
+                    <TouchableOpacity
+                        onPress={onFavoritesPress}
+                        style={[styles.actionButton, showOnlyFavorites && styles.actionButtonActive]}
+                        activeOpacity={0.7}
+                    >
+                        <AtomicIcon
+                            name={showOnlyFavorites ? "heart" : "heart-outline"}
+                            size="sm"
+                            color={showOnlyFavorites ? "error" : "secondary"}
+                        />
+                    </TouchableOpacity>
+                )}
+                {isFilterEnabled && (
+                    <TouchableOpacity
+                        onPress={onFilterPress}
+                        style={[styles.filterButton, isFiltered && styles.filterButtonActive]}
+                        activeOpacity={0.7}
+                    >
+                        <AtomicIcon
+                            name={filterIcon}
+                            size="sm"
+                            color={isFiltered ? "primary" : "secondary"}
+                        />
+                        <AtomicText style={[styles.filterText, { color: isFiltered ? tokens.colors.primary : tokens.colors.textSecondary }]}>
+                            {filterLabel}
+                        </AtomicText>
+                        {isFiltered && (
+                            <View style={styles.badge} />
+                        )}
+                    </TouchableOpacity>
                 )}
-            </TouchableOpacity>
+            </View>
         </View>
     );
 };
@@ -64,6 +91,10 @@ const useStyles = (tokens: any) => StyleSheet.create({
         paddingVertical: tokens.spacing.sm,
         marginBottom: tokens.spacing.sm,
     },
+    titleArea: {
+        flex: 1,
+        marginRight: tokens.spacing.md,
+    },
     title: {
         fontSize: 20,
         fontWeight: "700",
@@ -75,6 +106,25 @@ const useStyles = (tokens: any) => StyleSheet.create({
         color: tokens.colors.textSecondary,
         opacity: 0.6
     },
+    actions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: tokens.spacing.sm,
+    },
+    actionButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: tokens.colors.surfaceVariant,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: 'transparent',
+    },
+    actionButtonActive: {
+        backgroundColor: tokens.colors.primary + "15",
+        borderColor: tokens.colors.primary + "30",
+    },
     filterButton: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -85,6 +135,7 @@ const useStyles = (tokens: any) => StyleSheet.create({
         backgroundColor: tokens.colors.surfaceVariant,
         borderWidth: 1,
         borderColor: 'transparent',
+        height: 40,
     },
     filterButtonActive: {
         backgroundColor: tokens.colors.primary + "15",

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

@@ -5,3 +5,5 @@
 export { useCreations } from "./useCreations";
 export { useDeleteCreation } from "./useDeleteCreation";
 export { useCreationsFilter } from "./useCreationsFilter";
+export { useToggleFavorite } from "./useToggleFavorite";
+export { useDeleteMultipleCreations } from "./useDeleteMultipleCreations";

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

@@ -1,6 +1,6 @@
 /**
  * useCreationsFilter Hook
- * Handles filtering of creations by type
+ * Handles filtering of creations by type, search, and favorites
  */
 
 import { useState, useMemo, useCallback } from "react";
@@ -16,41 +16,55 @@ export function useCreationsFilter({
   defaultFilterId = "all"
 }: UseCreationsFilterProps) {
   const [selectedIds, setSelectedIds] = useState<string[]>([defaultFilterId]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showOnlyFavorites, setShowOnlyFavorites] = useState(false);
 
   const filtered = useMemo(() => {
     if (!creations) return [];
-    if (selectedIds.includes(defaultFilterId)) return creations;
 
-    return creations.filter((c) =>
-      selectedIds.includes(c.type) ||
-      selectedIds.some(id => (c as any).metadata?.tags?.includes(id))
-    );
-  }, [creations, selectedIds, defaultFilterId]);
+    let result = creations;
+
+    // 1. Filter by Favorites
+    if (showOnlyFavorites) {
+      result = result.filter(c => c.isFavorite);
+    }
+
+    // 2. Filter by Category/Type
+    if (!selectedIds.includes(defaultFilterId)) {
+      result = result.filter((c) =>
+        selectedIds.includes(c.type) ||
+        selectedIds.some(id => (c as any).metadata?.tags?.includes(id))
+      );
+    }
+
+    // 3. Filter by Search Query
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(c =>
+        c.prompt?.toLowerCase().includes(query) ||
+        c.type.toLowerCase().includes(query)
+      );
+    }
+
+    return result;
+  }, [creations, selectedIds, defaultFilterId, searchQuery, showOnlyFavorites]);
 
   const toggleFilter = useCallback((filterId: string, multiSelect: boolean = false) => {
     setSelectedIds(prev => {
-      // If selecting 'all', clear everything else
       if (filterId === defaultFilterId) return [defaultFilterId];
 
       let newIds: string[];
       if (!multiSelect) {
-        // Single select
-        // If we tap the already selected item in single mode, should we Deselect it? 
-        // Typically in radio-button style filters, no. But let's assume valid toggling behavior suitable for the UI.
-        // If single select, simply switch to the new one.
         if (prev.includes(filterId) && prev.length === 1) return prev;
         newIds = [filterId];
       } else {
-        // Multi select
         if (prev.includes(filterId)) {
           newIds = prev.filter(id => id !== filterId);
         } else {
-          // Remove 'all' if present
           newIds = [...prev.filter(id => id !== defaultFilterId), filterId];
         }
       }
 
-      // If nothing selected, revert to 'all'
       if (newIds.length === 0) return [defaultFilterId];
       return newIds;
     });
@@ -58,13 +72,19 @@ export function useCreationsFilter({
 
   const clearFilters = useCallback(() => {
     setSelectedIds([defaultFilterId]);
+    setSearchQuery("");
+    setShowOnlyFavorites(false);
   }, [defaultFilterId]);
 
   return {
     filtered,
     selectedIds,
+    searchQuery,
+    setSearchQuery,
+    showOnlyFavorites,
+    setShowOnlyFavorites,
     toggleFilter,
     clearFilters,
-    isFiltered: !selectedIds.includes(defaultFilterId),
+    isFiltered: !selectedIds.includes(defaultFilterId) || !!searchQuery || showOnlyFavorites,
   };
 }

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

@@ -0,0 +1,57 @@
+/**
+ * useDeleteMultipleCreations Hook
+ * Handles batch deletion of user creations with optimistic update
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
+import type { Creation } from "../../domain/entities/Creation";
+
+interface UseDeleteMultipleCreationsProps {
+    readonly userId: string | null;
+    readonly repository: ICreationsRepository;
+}
+
+export function useDeleteMultipleCreations({
+    userId,
+    repository,
+}: UseDeleteMultipleCreationsProps) {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: async (creationIds: string[]) => {
+            if (!userId) return false;
+            return repository.deleteMultiple(userId, creationIds);
+        },
+        onMutate: async (creationIds) => {
+            if (!userId) return;
+
+            await queryClient.cancelQueries({
+                queryKey: ["creations", userId],
+            });
+
+            const previous = queryClient.getQueryData<Creation[]>([
+                "creations",
+                userId,
+            ]);
+
+            queryClient.setQueryData<Creation[]>(
+                ["creations", userId],
+                (old) =>
+                    old?.filter((c) => !creationIds.includes(c.id)) ?? [],
+            );
+
+            return { previous };
+        },
+        onError: (_err, _ids, rollback) => {
+            if (userId && rollback?.previous) {
+                queryClient.setQueryData(["creations", userId], rollback.previous);
+            }
+        },
+        onSettled: () => {
+            if (userId) {
+                queryClient.invalidateQueries({ queryKey: ["creations", userId] });
+            }
+        },
+    });
+}

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

@@ -0,0 +1,59 @@
+/**
+ * useToggleFavorite Hook
+ * Handles favoriting/unfavoriting of user creations with optimistic update
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
+import type { Creation } from "../../domain/entities/Creation";
+
+interface UseToggleFavoriteProps {
+    readonly userId: string | null;
+    readonly repository: ICreationsRepository;
+}
+
+export function useToggleFavorite({
+    userId,
+    repository,
+}: UseToggleFavoriteProps) {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: async (creationId: string) => {
+            if (!userId) return false;
+            return repository.toggleFavorite(userId, creationId);
+        },
+        onMutate: async (creationId) => {
+            if (!userId) return;
+
+            await queryClient.cancelQueries({
+                queryKey: ["creations", userId],
+            });
+
+            const previous = queryClient.getQueryData<Creation[]>([
+                "creations",
+                userId,
+            ]);
+
+            queryClient.setQueryData<Creation[]>(
+                ["creations", userId],
+                (old) =>
+                    old?.map((c) =>
+                        c.id === creationId ? { ...c, isFavorite: !c.isFavorite } : c,
+                    ) ?? [],
+            );
+
+            return { previous };
+        },
+        onError: (_err, _id, rollback) => {
+            if (userId && rollback?.previous) {
+                queryClient.setQueryData(["creations", userId], rollback.previous);
+            }
+        },
+        onSettled: () => {
+            if (userId) {
+                queryClient.invalidateQueries({ queryKey: ["creations", userId] });
+            }
+        },
+    });
+}

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

@@ -1,29 +1,45 @@
 import React, { useMemo, useCallback, useState } from "react";
-import { View, StyleSheet, ActivityIndicator } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import { useSharing } from "@umituz/react-native-design-system";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { View, StyleSheet } from "react-native";
+import {
+  useAppDesignTokens,
+  useSharing,
+  ScreenLayout,
+  ScreenHeader,
+  useAlert,
+  AlertMode,
+  type BottomSheetModalRef
+} from "@umituz/react-native-design-system";
 import { useFocusEffect } from "@react-navigation/native";
 import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
-import { useAlert, AlertMode, type BottomSheetModalRef, type FilterCategory } from "@umituz/react-native-design-system";
-import { GalleryHeader, CreationsGrid, FilterBottomSheet, CreationImageViewer, CreationsGalleryEmptyState } from "../components";
+import { useToggleFavorite } from "../hooks/useToggleFavorite";
+import { useDeleteMultipleCreations } from "../hooks/useDeleteMultipleCreations";
+import {
+  GalleryHeader,
+  CreationsGrid,
+  FilterBottomSheet,
+  CreationImageViewer,
+  CreationsGalleryEmptyState
+} from "../components";
+import { SearchBar } from "@umituz/react-native-design-system";
 import { getTranslatedTypes, getFilterCategoriesFromConfig } from "../utils/filterUtils";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
-import { CreationDetailScreen } from "./CreationDetailScreen";
 
 interface CreationsGalleryScreenProps {
   readonly userId: string | null;
   readonly repository: ICreationsRepository;
   readonly config: CreationsConfig;
-  readonly t: (key: string) => string;
+  readonly t: (key: string, options?: any) => string;
   readonly enableEditing?: boolean;
   readonly onImageEdit?: (uri: string, creationId: string) => void | Promise<void>;
   readonly onEmptyAction?: () => void;
   readonly emptyActionLabel?: string;
+  readonly onBackPress?: () => void;
+  readonly headerTitle?: string;
+  readonly showCount?: boolean;
 }
 
 export function CreationsGalleryScreen({
@@ -35,9 +51,11 @@ export function CreationsGalleryScreen({
   onImageEdit,
   onEmptyAction,
   emptyActionLabel,
+  onBackPress,
+  headerTitle,
+  showCount = true,
 }: CreationsGalleryScreenProps) {
   const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
   const { share } = useSharing();
   const alert = useAlert();
 
@@ -48,8 +66,27 @@ export function CreationsGalleryScreen({
 
   const { data: creationsData, isLoading, refetch } = useCreations({ userId, repository });
   const creations = creationsData as Creation[] | undefined;
+
   const deleteMutation = useDeleteCreation({ userId, repository });
-  const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } = useCreationsFilter({ creations });
+  const toggleFavoriteMutation = useToggleFavorite({ userId, repository });
+  const deleteMultipleMutation = useDeleteMultipleCreations({ userId, repository });
+
+  const {
+    filtered,
+    selectedIds: selectedCategoryIds,
+    searchQuery,
+    setSearchQuery,
+    showOnlyFavorites,
+    setShowOnlyFavorites,
+    toggleFilter,
+    clearFilters,
+    isFiltered
+  } = useCreationsFilter({ creations });
+
+  const [selectedItemIds, setSelectedItemIds] = useState<string[]>([]);
+  const [isSelectionMode, setIsSelectionMode] = useState(false);
+
+
 
   // Refetch creations when screen comes into focus
   useFocusEffect(
@@ -85,37 +122,96 @@ export function CreationsGalleryScreen({
     );
   }, [alert, config, deleteMutation, t]);
 
+  const handleToggleFavorite = useCallback((creation: Creation) => {
+    toggleFavoriteMutation.mutate(creation.id);
+  }, [toggleFavoriteMutation]);
+
+  const toggleSelection = useCallback((creation: Creation) => {
+    setSelectedItemIds(prev => {
+      const isSelected = prev.includes(creation.id);
+      const next = isSelected ? prev.filter(id => id !== creation.id) : [...prev, creation.id];
+      if (next.length === 0) setIsSelectionMode(false);
+      else setIsSelectionMode(true);
+      return next;
+    });
+  }, []);
+
+  const handleDeleteSelected = useCallback(() => {
+    if (selectedItemIds.length === 0) return;
+
+    alert.showWarning(
+      t(config.translations.deleteTitle),
+      t("common.delete_selected_confirm") || `Are you sure you want to delete ${selectedItemIds.length} items?`,
+      {
+        mode: AlertMode.MODAL,
+        actions: [
+          { id: 'cancel', label: t("common.cancel"), onPress: () => { } },
+          {
+            id: 'delete', label: t("common.delete"), style: 'destructive', onPress: async () => {
+              const success = await deleteMultipleMutation.mutateAsync(selectedItemIds);
+              if (success) {
+                setSelectedItemIds([]);
+                setIsSelectionMode(false);
+              }
+            }
+          }
+        ]
+      }
+    );
+  }, [alert, config, deleteMultipleMutation, selectedItemIds, t]);
+
   // Handle viewing a creation - shows detail screen
   const handleView = useCallback((creation: Creation) => {
     setSelectedCreation(creation);
-  }, []);
+    setViewerIndex(filtered.findIndex(c => c.id === creation.id));
+    setViewerVisible(true);
+  }, [filtered]);
 
-
-  const styles = useStyles(tokens);
+  const screenTitle = headerTitle || t(config.translations.title) || 'My Creations';
+  const showScreenHeader = !!onBackPress;
 
   return (
-    <View style={styles.container}>
-      {/* Header is always shown unless we are in "System Empty" without data? 
-          User requested: "herhangi bir creations yoksa buradaki no creations gözükmeli" (if no creations, show no creations).
-          Currently we show header always, except logic below might hide it. 
-          Actually, let's keep header always visible IF we have creations. 
-          If !creations, we pass `renderEmptyComponent`, but Grid has header support. 
-          
-          However, to match previous request "filter gözükebilir" (filter can be visible), we'll keep header outside.
-          BUT, if NO creations, showing filter header is weird. 
-          
-          Let's conditonally render header: Only if we have creations OR loading. 
-          If loaded and 0 creations -> Hide header (Clean Empty State).
-      */}
+    <ScreenLayout
+      edges={['top']}
+      scrollable={false}
+      header={
+        <View>
+          {showScreenHeader && (
+            <ScreenHeader
+              title={isSelectionMode ? `${selectedItemIds.length} Selected` : screenTitle}
+              onBackPress={isSelectionMode ? () => { setIsSelectionMode(false); setSelectedItemIds([]); } : onBackPress}
+              rightAction={isSelectionMode ? {
+                icon: 'trash',
+                onPress: handleDeleteSelected,
+              } : undefined}
+            />
+          )}
+          {!isSelectionMode && (
+            <View style={{ paddingHorizontal: tokens.spacing.md, paddingBottom: tokens.spacing.xs }}>
+              <SearchBar
+                placeholder={t("common.search") || "Search Prompt..."}
+                value={searchQuery}
+                onChangeText={setSearchQuery}
+              />
+            </View>
+          )}
+        </View>
+      }
+      contentContainerStyle={{ paddingHorizontal: 0 }}
+    >
       {(!creations || creations?.length === 0) && !isLoading ? null : (
         <GalleryHeader
-          title={t(config.translations.title) || 'My Creations'}
+          title={showScreenHeader || isSelectionMode ? '' : screenTitle}
           count={filtered.length}
-          countLabel={t(config.translations.photoCount) || 'photos'}
+          countLabel=''
+          subtitle={showCount ? t(config.translations.photoCount, { count: filtered.length }) : undefined}
           isFiltered={isFiltered}
           filterLabel={t(config.translations.filterLabel) || 'Filter'}
           onFilterPress={() => filterSheetRef.current?.present()}
-          style={{ paddingTop: insets.top + tokens.spacing.md }}
+          onFavoritesPress={() => setShowOnlyFavorites(!showOnlyFavorites)}
+          showOnlyFavorites={showOnlyFavorites}
+          isFilterEnabled={config.enableFiltering ?? false}
+          showCount={showCount}
         />
       )}
 
@@ -128,7 +224,11 @@ export function CreationsGalleryScreen({
         onView={handleView}
         onShare={handleShare}
         onDelete={handleDelete}
-        contentContainerStyle={{ paddingBottom: insets.bottom + tokens.spacing.xl }}
+        onToggleFavorite={handleToggleFavorite}
+        isSelectionMode={isSelectionMode}
+        selectedIds={selectedItemIds}
+        onSelect={toggleSelection}
+        contentContainerStyle={{ paddingBottom: tokens.spacing.xl }}
         ListEmptyComponent={
           <CreationsGalleryEmptyState
             isLoading={isLoading}
@@ -156,15 +256,11 @@ export function CreationsGalleryScreen({
       <FilterBottomSheet
         ref={filterSheetRef}
         categories={allCategories}
-        selectedIds={selectedIds}
+        selectedIds={selectedCategoryIds}
         onFilterPress={(id, catId) => toggleFilter(id, allCategories.find(c => c.id === catId)?.multiSelect)}
         onClearFilters={clearFilters}
         title={t(config.translations.filterTitle) || t("common.filter")}
       />
-    </View>
+    </ScreenLayout>
   );
 }
-
-const useStyles = (tokens: any) => StyleSheet.create({
-  container: { flex: 1, backgroundColor: tokens.colors.background },
-});