@umituz/react-native-ai-creations 1.2.3 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -16,11 +16,10 @@ import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
 import { CreationCard } from "../components/CreationCard";
-import { FilterChips } from "../components/FilterChips";
 import { EmptyState } from "../components/EmptyState";
 import { FilterBottomSheet, type FilterCategory } from "@umituz/react-native-filter";
 import { BottomSheetModalRef } from "@umituz/react-native-bottom-sheet";
-import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system-atoms";
+import { AtomicIcon, AtomicText, AtomicButton } from "@umituz/react-native-design-system-atoms";
 
 interface CreationsGalleryScreenProps {
   readonly userId: string | null;
@@ -55,11 +54,29 @@ export function CreationsGalleryScreen({
   const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } =
     useCreationsFilter({ creations });
 
-  const availableTypes = useMemo(() => {
-    if (!creations) return [];
-    const types = new Set(creations.map((c) => c.type));
-    return Array.from(types);
-  }, [creations]);
+  const allCategories = useMemo(() => {
+    const categories: FilterCategory[] = [];
+
+    // Add dynamic types category if types exist
+    if (config.types.length > 0) {
+      categories.push({
+        id: 'type', // This ID matches logic in useFilter? No, filter logic is flat ID based. 'type' is category ID.
+        title: t('creations.category') || 'Category',
+        multiSelect: false,
+        options: config.types.map(t => ({
+          id: t.id,
+          label: t.labelKey, // In a real app we'd translate this, but for now passing key or mocked
+          icon: 'Image', // Default icon since types have emojis which might not work with AtomicIcon
+        }))
+      });
+    }
+
+    if (config.filterCategories) {
+      categories.push(...config.filterCategories);
+    }
+
+    return categories;
+  }, [config.types, config.filterCategories, t]);
 
   const handleView = useCallback(
     (creation: Creation) => {
@@ -124,19 +141,37 @@ export function CreationsGalleryScreen({
         headerArea: {
           flexDirection: "row",
           alignItems: "center",
-          paddingRight: tokens.spacing.md,
+          justifyContent: 'space-between',
+          paddingHorizontal: tokens.spacing.md,
+          paddingVertical: tokens.spacing.sm,
+          marginBottom: tokens.spacing.sm,
         },
         filterButton: {
-          padding: tokens.spacing.sm,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: tokens.spacing.xs,
+          paddingVertical: tokens.spacing.xs,
+          paddingHorizontal: tokens.spacing.md,
           borderRadius: (tokens as any).borders?.radius?.full || 999,
           backgroundColor: tokens.colors.surfaceVariant,
-          marginLeft: tokens.spacing.sm,
+          borderWidth: 1,
+          borderColor: 'transparent',
         },
         filterButtonActive: {
           backgroundColor: tokens.colors.primary + "15",
+          borderColor: tokens.colors.primary + "30",
+        },
+        badge: {
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: tokens.colors.primary,
+          position: 'absolute',
+          top: 6,
+          right: 6,
         },
         list: {
-          padding: tokens.spacing.md,
+          paddingHorizontal: tokens.spacing.md,
           paddingBottom: insets.bottom + tokens.spacing.xl,
           gap: tokens.spacing.md,
         },
@@ -176,24 +211,20 @@ export function CreationsGalleryScreen({
   return (
     <View style={styles.container}>
       <View style={styles.headerArea}>
-        {config.types.length > 0 && availableTypes.length > 1 && (
-          <FilterChips
-            style={{ flex: 1 }}
-            types={config.types}
-            availableTypes={availableTypes}
-            selectedType={selectedIds[0] || "all"}
-            allLabel={t(config.translations.filterAll)}
-            onSelect={(type) => toggleFilter(type, false)}
-          />
-        )}
-        {(config.filterCategories?.length || 0) > 0 && (
-          <TouchableOpacity
-            onPress={() => filterSheetRef.current?.present()}
-            style={[styles.filterButton, isFiltered && styles.filterButtonActive]}
-          >
-            <AtomicIcon name="ListFilter" size="md" color={isFiltered ? "primary" : "secondary"} />
-          </TouchableOpacity>
-        )}
+        <View>
+          <AtomicText type="headlineSmall">{t(config.translations.title) || 'My Creations'}</AtomicText>
+          <AtomicText type="bodySmall" style={{ opacity: 0.6 }}>{filtered.length} {t(config.translations.photoCount) || 'photos'}</AtomicText>
+        </View>
+        <TouchableOpacity
+          onPress={() => filterSheetRef.current?.present()}
+          style={[styles.filterButton, isFiltered && styles.filterButtonActive]}
+        >
+          <AtomicIcon name="ListFilter" size="sm" color={isFiltered ? "primary" : "secondary"} />
+          <AtomicText type="labelMedium" color={isFiltered ? "primary" : "secondary"}>Filter</AtomicText>
+          {isFiltered && (
+            <View style={styles.badge} />
+          )}
+        </TouchableOpacity>
       </View>
       <FlatList
         data={filtered}
@@ -218,19 +249,17 @@ export function CreationsGalleryScreen({
         onImageChange={handleImageChange}
       />
 
-      {config.filterCategories && (
-        <FilterBottomSheet
-          ref={filterSheetRef}
-          categories={config.filterCategories as FilterCategory[]}
-          selectedIds={selectedIds}
-          onFilterPress={(id, catId) => {
-            const category = config.filterCategories?.find(c => c.id === catId);
-            toggleFilter(id, category?.multiSelect);
-          }}
-          onClearFilters={clearFilters}
-          title={t("common.filter")}
-        />
-      )}
+      <FilterBottomSheet
+        ref={filterSheetRef}
+        categories={allCategories as FilterCategory[]}
+        selectedIds={selectedIds}
+        onFilterPress={(id, catId) => {
+          const category = allCategories.find(c => c.id === catId);
+          toggleFilter(id, category?.multiSelect);
+        }}
+        onClearFilters={clearFilters}
+        title={t("common.filter")}
+      />
     </View>
   );
 }