react-native-inapp-inspector 2.3.17 → 2.3.19

package/dist/commonjs/components/Inspector/MediaGalleryTab.js

@@ -49,21 +49,26 @@ const capture_1 = require("../../capture");
 const helpers_1 = require("../../helpers");
 const toast_1 = require("../../helpers/toast");
 const i18n_1 = require("../../i18n");
+const InspectorContext_1 = require("./InspectorContext");
 const MediaGalleryTab = () => {
     const { t } = (0, i18n_1.useTranslation)();
+    const { refreshMediaCount, switchActiveTab } = (0, InspectorContext_1.useInspector)();
     const [mediaList, setMediaList] = (0, react_1.useState)([]);
     const [refreshing, setRefreshing] = (0, react_1.useState)(false);
     const [selectedFilter, setSelectedFilter] = (0, react_1.useState)('all');
     const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
+    const [selectedIds, setSelectedIds] = (0, react_1.useState)(new Set());
+    const [viewMode, setViewMode] = (0, react_1.useState)('grid');
     const loadMedia = (0, react_1.useCallback)(async () => {
         try {
             const items = await capture_1.ScreenCapture.getMediaList();
             setMediaList(items);
+            refreshMediaCount?.().catch(() => { });
         }
         catch {
             setMediaList([]);
         }
-    }, []);
+    }, [refreshMediaCount]);
     (0, react_1.useEffect)(() => {
         loadMedia();
     }, [loadMedia]);
@@ -80,11 +85,57 @@ const MediaGalleryTab = () => {
     const totalStorageBytes = (0, react_1.useMemo)(() => {
         return mediaList.reduce((sum, item) => sum + (item.sizeBytes || 0), 0);
     }, [mediaList]);
+    const toggleSelect = (0, react_1.useCallback)((id) => {
+        setSelectedIds(prev => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
     const handleDeleteItem = async (item) => {
         await capture_1.ScreenCapture.deleteMedia(item.uri);
+        setSelectedIds(prev => {
+            const next = new Set(prev);
+            next.delete(item.id);
+            return next;
+        });
         await loadMedia();
+        const count = await refreshMediaCount?.();
+        if (count === 0) {
+            switchActiveTab('apis');
+        }
         (0, toast_1.showToast)(t('mediaGallery.deleted'));
     };
+    const handleDeleteSelected = () => {
+        const count = selectedIds.size;
+        if (count === 0)
+            return;
+        react_native_1.Alert.alert(t('mediaGallery.deleteSelectedTitle'), t('mediaGallery.deleteSelectedMessage', { count }), [
+            { text: t('common.cancel'), style: 'cancel' },
+            {
+                text: t('mediaGallery.delete'),
+                style: 'destructive',
+                onPress: async () => {
+                    const itemsToDelete = mediaList.filter(item => selectedIds.has(item.id));
+                    for (const item of itemsToDelete) {
+                        await capture_1.ScreenCapture.deleteMedia(item.uri);
+                    }
+                    setSelectedIds(new Set());
+                    await loadMedia();
+                    const remainingCount = await refreshMediaCount?.();
+                    if (remainingCount === 0) {
+                        switchActiveTab('apis');
+                    }
+                    (0, toast_1.showToast)(t('mediaGallery.deletedCount', { count: itemsToDelete.length }));
+                },
+            },
+        ]);
+    };
     const handleClearAll = () => {
         react_native_1.Alert.alert(t('mediaGallery.purgeTitle'), t('mediaGallery.purgeMessage', { count: mediaList.length, size: (0, helpers_1.formatBytes)(totalStorageBytes) }), [
             { text: t('common.cancel'), style: 'cancel' },
@@ -93,7 +144,10 @@ const MediaGalleryTab = () => {
                 style: 'destructive',
                 onPress: async () => {
                     await capture_1.ScreenCapture.clearAllMedia();
+                    setSelectedIds(new Set());
                     await loadMedia();
+                    await refreshMediaCount?.();
+                    switchActiveTab('apis');
                     (0, toast_1.showToast)(t('mediaGallery.allPurged'));
                 },
             },
@@ -103,14 +157,45 @@ const MediaGalleryTab = () => {
         const gifResult = await capture_1.ScreenCapture.convertToGif(item.uri, { fps: 12, width: 480 });
         if (gifResult) {
             await loadMedia();
+            refreshMediaCount?.().catch(() => { });
         }
     };
-    const renderItem = ({ item }) => {
+    const renderFilterIcon = (filterKey, isActive) => {
+        const iconColor = isActive ? AppColors_1.AppColors.sky400 : AppColors_1.AppColors.slate400;
+        const iconSize = 12;
+        switch (filterKey) {
+            case 'all':
+                return <NetworkIcons_1.ScreencastIcon size={iconSize} color={iconColor}/>;
+            case 'image':
+                return <NetworkIcons_1.ImageIcon size={iconSize} color={iconColor}/>;
+            case 'video':
+                return <NetworkIcons_1.FilmIcon size={iconSize} color={iconColor}/>;
+            case 'gif':
+                return <NetworkIcons_1.GifIcon size={iconSize} color={iconColor}/>;
+        }
+    };
+    const renderGridItem = ({ item }) => {
         const isVideo = item.type === 'video';
         const isGif = item.type === 'gif';
-        return (<TouchableScale_1.default onPress={() => setSelectedItem(item)} style={galleryStyles.card}>
+        const thumbUri = isVideo ? item.thumbnailUri : item.uri;
+        const isSelected = selectedIds.has(item.id);
+        return (<TouchableScale_1.default onPress={() => setSelectedItem(item)} style={[galleryStyles.card, isSelected && galleryStyles.cardSelected]}>
         <react_native_1.View style={galleryStyles.thumbnailContainer}>
-          <react_native_1.Image source={{ uri: item.uri }} style={galleryStyles.thumbnail} resizeMode="cover"/>
+          {thumbUri ? (<react_native_1.Image source={{ uri: thumbUri }} style={galleryStyles.thumbnail} resizeMode="cover"/>) : (<react_native_1.View style={galleryStyles.thumbnailFallback}>
+              {isVideo ? (<NetworkIcons_1.FilmIcon size={26} color={AppColors_1.AppColors.sky400}/>) : (<NetworkIcons_1.ImageIcon size={26} color={AppColors_1.AppColors.slate400}/>)}
+            </react_native_1.View>)}
+
+          
+          <react_native_1.TouchableOpacity onPress={() => toggleSelect(item.id)} style={[
+                galleryStyles.checkbox,
+                isSelected && galleryStyles.checkboxSelected,
+            ]} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            {isSelected && <NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.white}/>}
+          </react_native_1.TouchableOpacity>
+
+          {isVideo && (<react_native_1.View style={galleryStyles.miniPlayCircle}>
+              <NetworkIcons_1.PlayIcon size={14} color={AppColors_1.AppColors.white}/>
+            </react_native_1.View>)}
           <react_native_1.View style={galleryStyles.typeBadge}>
             {isVideo ? (<NetworkIcons_1.FilmIcon size={11} color={AppColors_1.AppColors.sky400}/>) : isGif ? (<NetworkIcons_1.GifIcon size={11} color={AppColors_1.AppColors.warningAmber}/>) : (<NetworkIcons_1.ImageIcon size={11} color={AppColors_1.AppColors.emerald500}/>)}
             <react_native_1.Text style={galleryStyles.typeBadgeText}>
@@ -135,6 +220,59 @@ const MediaGalleryTab = () => {
         </react_native_1.View>
       </TouchableScale_1.default>);
     };
+    const renderListItem = ({ item }) => {
+        const isVideo = item.type === 'video';
+        const isGif = item.type === 'gif';
+        const thumbUri = isVideo ? item.thumbnailUri : item.uri;
+        const isSelected = selectedIds.has(item.id);
+        return (<TouchableScale_1.default onPress={() => setSelectedItem(item)} style={[galleryStyles.listRow, isSelected && galleryStyles.listRowSelected]}>
+        
+        <react_native_1.TouchableOpacity onPress={() => toggleSelect(item.id)} style={[
+                galleryStyles.listCheckbox,
+                isSelected && galleryStyles.checkboxSelected,
+            ]} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+          {isSelected && <NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.white}/>}
+        </react_native_1.TouchableOpacity>
+
+        
+        <react_native_1.View style={galleryStyles.listThumbContainer}>
+          {thumbUri ? (<react_native_1.Image source={{ uri: thumbUri }} style={galleryStyles.listThumb} resizeMode="cover"/>) : (<react_native_1.View style={galleryStyles.listThumbFallback}>
+              {isVideo ? (<NetworkIcons_1.FilmIcon size={18} color={AppColors_1.AppColors.sky400}/>) : (<NetworkIcons_1.ImageIcon size={18} color={AppColors_1.AppColors.slate400}/>)}
+            </react_native_1.View>)}
+          {isVideo && (<react_native_1.View style={galleryStyles.listMiniPlay}>
+              <NetworkIcons_1.PlayIcon size={10} color={AppColors_1.AppColors.white}/>
+            </react_native_1.View>)}
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={galleryStyles.listInfo}>
+          <react_native_1.Text style={galleryStyles.listTitle} numberOfLines={1}>
+            {item.filename}
+          </react_native_1.Text>
+          <react_native_1.View style={galleryStyles.listMetaRow}>
+            <react_native_1.View style={galleryStyles.listBadge}>
+              {isVideo ? (<NetworkIcons_1.FilmIcon size={10} color={AppColors_1.AppColors.sky400}/>) : isGif ? (<NetworkIcons_1.GifIcon size={10} color={AppColors_1.AppColors.warningAmber}/>) : (<NetworkIcons_1.ImageIcon size={10} color={AppColors_1.AppColors.emerald500}/>)}
+              <react_native_1.Text style={galleryStyles.listBadgeText}>
+                {item.format.toUpperCase()}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={galleryStyles.cardMeta}>
+              {(0, helpers_1.formatBytes)(item.sizeBytes)}
+            </react_native_1.Text>
+            <react_native_1.Text style={galleryStyles.cardMetaDot}>•</react_native_1.Text>
+            <react_native_1.Text style={galleryStyles.cardMeta}>
+              {new Date(item.timestamp).toLocaleDateString([], { month: 'short', day: 'numeric' })}{' '}
+              {new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        
+        <react_native_1.TouchableOpacity onPress={() => handleDeleteItem(item)} style={galleryStyles.listDeleteBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+          <NetworkIcons_1.TrashIcon size={14} color={AppColors_1.AppColors.red500}/>
+        </react_native_1.TouchableOpacity>
+      </TouchableScale_1.default>);
+    };
     return (<react_native_1.View style={galleryStyles.container}>
       
       <react_native_1.View style={galleryStyles.filterBar}>
@@ -152,6 +290,7 @@ const MediaGalleryTab = () => {
                     galleryStyles.chip,
                     isActive && galleryStyles.chipActive,
                 ]}>
+                {renderFilterIcon(filterKey, isActive)}
                 <react_native_1.Text style={[
                     galleryStyles.chipText,
                     isActive && galleryStyles.chipTextActive,
@@ -162,15 +301,68 @@ const MediaGalleryTab = () => {
         })}
         </react_native_1.View>
 
-        {mediaList.length > 0 && (<react_native_1.TouchableOpacity onPress={handleClearAll} style={galleryStyles.clearBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
-            <NetworkIcons_1.TrashIcon size={13} color={AppColors_1.AppColors.red500}/>
-            <react_native_1.Text style={galleryStyles.clearBtnText}>{t('mediaGallery.purge', { size: (0, helpers_1.formatBytes)(totalStorageBytes) })}</react_native_1.Text>
-          </react_native_1.TouchableOpacity>)}
+        
+        <react_native_1.View style={galleryStyles.viewToggleContainer}>
+          <react_native_1.TouchableOpacity onPress={() => setViewMode('grid')} style={[
+            galleryStyles.viewToggleBtn,
+            viewMode === 'grid' && galleryStyles.viewToggleBtnActive,
+        ]}>
+            <NetworkIcons_1.GridIcon size={13} color={viewMode === 'grid' ? AppColors_1.AppColors.white : AppColors_1.AppColors.slate400}/>
+          </react_native_1.TouchableOpacity>
+          <react_native_1.TouchableOpacity onPress={() => setViewMode('list')} style={[
+            galleryStyles.viewToggleBtn,
+            viewMode === 'list' && galleryStyles.viewToggleBtnActive,
+        ]}>
+            <NetworkIcons_1.ListIcon size={13} color={viewMode === 'list' ? AppColors_1.AppColors.white : AppColors_1.AppColors.slate400}/>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
       </react_native_1.View>
 
       
-      <react_native_1.FlatList data={filteredMedia} keyExtractor={item => item.id} renderItem={renderItem} numColumns={2} columnWrapperStyle={galleryStyles.columnWrapper} contentContainerStyle={galleryStyles.listContent} refreshControl={<react_native_1.RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={AppColors_1.AppColors.sky400}/>} ListEmptyComponent={<EmptyState_1.default customTitle={t('mediaGallery.noMediaTitle')} customSub={t('mediaGallery.noMediaDesc')}/>}/>
+      {mediaList.length > 0 && (<react_native_1.View style={galleryStyles.subBar}>
+          <react_native_1.View style={galleryStyles.resultCountWrapper}>
+            <react_native_1.Text style={[
+                galleryStyles.resultCountText,
+                selectedIds.size > 0 && galleryStyles.resultCountTextSelected,
+            ]}>
+              {selectedIds.size > 0
+                ? t('mediaGallery.selectedOfResults', {
+                    selected: selectedIds.size,
+                    total: filteredMedia.length,
+                    defaultValue: `Selected ${selectedIds.size} of ${filteredMedia.length} results`,
+                })
+                : filteredMedia.length !== mediaList.length
+                    ? t('mediaGallery.showingFilteredResults', {
+                        count: filteredMedia.length,
+                        total: mediaList.length,
+                        defaultValue: `Showing ${filteredMedia.length} of ${mediaList.length} results`,
+                    })
+                    : t('mediaGallery.showingResults', {
+                        count: filteredMedia.length,
+                        defaultValue: `Showing ${filteredMedia.length} results`,
+                    })}
+            </react_native_1.Text>
+          </react_native_1.View>
 
+          <react_native_1.View style={galleryStyles.actionsGroup}>
+            {selectedIds.size > 0 && (<react_native_1.TouchableOpacity onPress={handleDeleteSelected} style={galleryStyles.deleteBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+                <NetworkIcons_1.TrashIcon size={13} color={AppColors_1.AppColors.red500}/>
+                <react_native_1.Text style={galleryStyles.deleteBtnText}>
+                  {t('mediaGallery.deleteSelected', { count: selectedIds.size })}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>)}
+
+            <react_native_1.TouchableOpacity onPress={handleClearAll} style={galleryStyles.clearBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+              <NetworkIcons_1.TrashIcon size={13} color={AppColors_1.AppColors.red500}/>
+              <react_native_1.Text style={galleryStyles.clearBtnText}>
+                {t('mediaGallery.purge', { size: (0, helpers_1.formatBytes)(totalStorageBytes) })}
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.View>)}
+
+      
+      <react_native_1.FlatList key={viewMode} data={filteredMedia} keyExtractor={item => item.id} renderItem={viewMode === 'grid' ? renderGridItem : renderListItem} numColumns={viewMode === 'grid' ? 2 : 1} columnWrapperStyle={viewMode === 'grid' ? galleryStyles.columnWrapper : undefined} contentContainerStyle={galleryStyles.listContent} refreshControl={<react_native_1.RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={AppColors_1.AppColors.sky400}/>} ListEmptyComponent={<EmptyState_1.default customTitle={t('mediaGallery.noMediaTitle')} customSub={t('mediaGallery.noMediaDesc')} showReload={false}/>}/>
 
       
       <MediaPreviewModal_1.MediaPreviewModal item={selectedItem} visible={!!selectedItem} onClose={() => setSelectedItem(null)} onDelete={handleDeleteItem} onConvertToGif={handleConvertToGif}/>
@@ -189,19 +381,22 @@ const galleryStyles = react_native_1.StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'space-between',
         paddingHorizontal: 12,
-        paddingVertical: 10,
+        paddingVertical: 9,
         borderBottomWidth: 1,
         borderBottomColor: AppColors_1.AppColors.borderGlassLight,
-        flexWrap: 'wrap',
         gap: 8,
     },
     chipGroup: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 6,
+        flexShrink: 1,
     },
     chip: {
-        paddingHorizontal: 9,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4.5,
+        paddingHorizontal: 8,
         paddingVertical: 4.5,
         borderRadius: 6,
         backgroundColor: AppColors_1.AppColors.whiteAlpha06,
@@ -221,6 +416,71 @@ const galleryStyles = react_native_1.StyleSheet.create({
         fontFamily: AppFonts_1.AppFonts.interBold,
         color: AppColors_1.AppColors.sky400,
     },
+    subBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 7,
+        backgroundColor: `${AppColors_1.AppColors.slate900}99`,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.borderGlassLight,
+        gap: 8,
+    },
+    resultCountWrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexShrink: 1,
+    },
+    resultCountText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.slate400,
+    },
+    resultCountTextSelected: {
+        fontFamily: AppFonts_1.AppFonts.interSemiBold,
+        color: AppColors_1.AppColors.sky400,
+    },
+    actionsGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    viewToggleContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.whiteAlpha06,
+        borderRadius: 6,
+        padding: 2,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.whiteAlpha10,
+    },
+    viewToggleBtn: {
+        paddingHorizontal: 7,
+        paddingVertical: 4,
+        borderRadius: 4,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    viewToggleBtnActive: {
+        backgroundColor: `${AppColors_1.AppColors.violet600}80`,
+    },
+    deleteBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+        backgroundColor: `${AppColors_1.AppColors.red500}26`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.red500}80`,
+    },
+    deleteBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.red500,
+    },
     clearBtn: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -239,7 +499,7 @@ const galleryStyles = react_native_1.StyleSheet.create({
     },
     listContent: {
         padding: 12,
-        gap: 12,
+        gap: 10,
     },
     columnWrapper: {
         gap: 12,
@@ -252,6 +512,10 @@ const galleryStyles = react_native_1.StyleSheet.create({
         borderColor: AppColors_1.AppColors.borderGlassLight,
         overflow: 'hidden',
     },
+    cardSelected: {
+        borderColor: AppColors_1.AppColors.violet600,
+        borderWidth: 1.5,
+    },
     thumbnailContainer: {
         width: '100%',
         height: 110,
@@ -262,6 +526,50 @@ const galleryStyles = react_native_1.StyleSheet.create({
         width: '100%',
         height: '100%',
     },
+    thumbnailFallback: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: AppColors_1.AppColors.slate900,
+    },
+    checkbox: {
+        position: 'absolute',
+        top: 6,
+        left: 6,
+        width: 22,
+        height: 22,
+        borderRadius: 5,
+        borderWidth: 1.5,
+        borderColor: 'rgba(255, 255, 255, 0.65)',
+        backgroundColor: 'rgba(15, 23, 42, 0.65)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10,
+    },
+    checkboxSelected: {
+        backgroundColor: AppColors_1.AppColors.violet600,
+        borderColor: AppColors_1.AppColors.violet600,
+    },
+    miniPlayCircle: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        width: 32,
+        height: 32,
+        marginTop: -16,
+        marginLeft: -16,
+        borderRadius: 16,
+        backgroundColor: `${AppColors_1.AppColors.sky400}D9`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingLeft: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.4,
+        shadowRadius: 4,
+        elevation: 4,
+    },
     typeBadge: {
         position: 'absolute',
         top: 6,
@@ -304,4 +612,101 @@ const galleryStyles = react_native_1.StyleSheet.create({
         fontSize: 10,
         color: AppColors_1.AppColors.whiteAlpha30,
     },
+    listRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.slate800,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.borderGlassLight,
+        padding: 8,
+        gap: 10,
+    },
+    listRowSelected: {
+        borderColor: AppColors_1.AppColors.violet600,
+        borderWidth: 1.5,
+        backgroundColor: `${AppColors_1.AppColors.violet600}14`,
+    },
+    listCheckbox: {
+        width: 20,
+        height: 20,
+        borderRadius: 4,
+        borderWidth: 1.5,
+        borderColor: 'rgba(255, 255, 255, 0.65)',
+        backgroundColor: 'rgba(15, 23, 42, 0.65)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    listThumbContainer: {
+        width: 46,
+        height: 46,
+        borderRadius: 6,
+        backgroundColor: AppColors_1.AppColors.slate850,
+        overflow: 'hidden',
+        position: 'relative',
+    },
+    listThumb: {
+        width: '100%',
+        height: '100%',
+    },
+    listThumbFallback: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: AppColors_1.AppColors.slate900,
+    },
+    listMiniPlay: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        width: 20,
+        height: 20,
+        marginTop: -10,
+        marginLeft: -10,
+        borderRadius: 10,
+        backgroundColor: `${AppColors_1.AppColors.sky400}D9`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingLeft: 1,
+    },
+    listInfo: {
+        flex: 1,
+        gap: 4,
+        minWidth: 0,
+    },
+    listTitle: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.white,
+    },
+    listMetaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        flexWrap: 'wrap',
+    },
+    listBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        backgroundColor: AppColors_1.AppColors.badgeGlassDark,
+        paddingHorizontal: 4,
+        paddingVertical: 1.5,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.borderGlassMedium,
+    },
+    listBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 8.5,
+        color: AppColors_1.AppColors.slate200,
+    },
+    listDeleteBtn: {
+        padding: 6,
+        borderRadius: 6,
+        backgroundColor: `${AppColors_1.AppColors.red500}14`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.red500}33`,
+    },
 });