Thirdshop/Kazier
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add list view

Browse Source
This commit is contained in:
m
2026-08-28 23:03:35 +02:00
parent 57d8e70d7f
commit 523454fe91
15 changed files with 422 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/components/FileCard.tsx
+176 -36
View File
@@ -1,12 +1,19 @@
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
import { Image } from 'expo-image';
import { MaterialIcons } from '@expo/vector-icons';
import { FileItem } from '../types';
import { TagChip } from './TagChip';
import { SyncStatusBadge } from './SyncStatusBadge';
import type { ComponentProps } from 'react';
type IconName = ComponentProps<typeof MaterialIcons>['name'];
interface FileCardProps {
file: FileItem;
onPress?: (file: FileItem) => void;
onLongPress?: (file: FileItem) => void;
selected?: boolean;
}
function formatSize(bytes: number) {
@@ -15,34 +22,112 @@ function formatSize(bytes: number) {
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}
export function FileCard({ file, onPress }: FileCardProps) {
const imageUri = file.thumbnailUrl || (file.url && file.mimeType?.startsWith('image/') ? file.url : undefined);
function getFileInfo(mimeType: string, fileName: string): { icon: IconName; color: string; bg: string } {
if (mimeType.startsWith('image/')) return { icon: 'image', color: '#4CAF50', bg: '#E8F5E9' };
if (mimeType === 'application/pdf') return { icon: 'picture-as-pdf', color: '#E53935', bg: '#FFEBEE' };
if (mimeType.includes('word') || mimeType.includes('document')) return { icon: 'description', color: '#1565C0', bg: '#E3F2FD' };
if (mimeType.includes('spreadsheet') || mimeType.includes('excel') || mimeType.includes('csv')) return { icon: 'table-chart', color: '#2E7D32', bg: '#E8F5E9' };
if (mimeType.includes('presentation') || mimeType.includes('powerpoint')) return { icon: 'slideshow', color: '#E65100', bg: '#FFF3E0' };
if (mimeType.startsWith('text/')) return { icon: 'article', color: '#546E7A', bg: '#ECEFF1' };
if (mimeType.startsWith('video/')) return { icon: 'movie', color: '#6A1B9A', bg: '#F3E5F5' };
if (mimeType.startsWith('audio/')) return { icon: 'audiotrack', color: '#AD1457', bg: '#FCE4EC' };
if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('rar') || mimeType.includes('tar')) return { icon: 'folder-zip', color: '#6D4C41', bg: '#EFEBE9' };
if (mimeType.includes('json') || mimeType.includes('xml')) return { icon: 'code', color: '#37474F', bg: '#ECEFF1' };
return { icon: 'insert-drive-file', color: '#757575', bg: '#F5F5F5' };
}
function getExtension(fileName: string): string {
const ext = fileName.split('.').pop();
return ext ? ext.toUpperCase() : '';
}
export function FileCard({ file, onPress, onLongPress, selected }: FileCardProps) {
const info = getFileInfo(file.mimeType, file.name);
const ext = getExtension(file.name);
const imageUri = file.thumbnailUrl || file.thumbnailLocal || (file.url && file.mimeType?.startsWith('image/') ? file.url : undefined) || (file.localUri && file.mimeType?.startsWith('image/') ? file.localUri : undefined);
const isFolder = file.isFolder;
const isUploading = file.isUploading;
return (
<TouchableOpacity style={styles.container} onPress={() => onPress?.(file)}>
{imageUri && (
<View style={styles.imageContainer}>
<Image source={{ uri: imageUri }} style={styles.image} contentFit="cover" cachePolicy="memory-disk" transition={200} />
</View>
)}
<TouchableOpacity
style={[styles.container, selected && styles.containerSelected]}
onPress={() => onPress?.(file)}
onLongPress={() => onLongPress?.(file)}
delayLongPress={400}
activeOpacity={0.7}
>
<View style={styles.thumbnailWrap}>
{isFolder ? (
<View style={[styles.thumbnail, styles.placeholder, { backgroundColor: '#FFF3E0' }]}>
<MaterialIcons name="folder" size={30} color="#F57C00" />
</View>
) : imageUri ? (
<Image
source={{ uri: imageUri }}
style={styles.thumbnail}
contentFit="cover"
cachePolicy="memory-disk"
transition={200}
/>
) : (
<View style={[styles.thumbnail, styles.placeholder, { backgroundColor: info.bg }]}>
{isUploading ? (
<ActivityIndicator size="small" color="#1976D2" />
) : (
<>
<MaterialIcons name={info.icon} size={26} color={info.color} />
{ext.length <= 4 && <Text style={[styles.ext, { color: info.color }]}>{ext}</Text>}
</>
)}
</View>
)}
<View style={styles.header}>
<Text style={styles.name} numberOfLines={1}>
{file.name}
</Text>
<Text style={styles.size}>{formatSize(file.size)}</Text>
{selected && (
<View style={styles.selectedOverlay}>
<View style={styles.checkCircle}>
<MaterialIcons name="check" size={16} color="#fff" />
</View>
</View>
)}
{file.syncStatus && !isUploading && (
<View style={styles.badge}>
<SyncStatusBadge status={file.syncStatus} size={16} />
</View>
)}
</View>
{file.ocrText && (
<Text style={styles.preview} numberOfLines={2}>
{file.ocrText}
</Text>
)}
<View style={styles.body}>
<View style={styles.header}>
<Text style={styles.name} numberOfLines={1}>
{file.name}
</Text>
{!isFolder && file.size > 0 && (
<Text style={styles.size}>{formatSize(file.size)}</Text>
)}
</View>
<View style={styles.tags}>
{file.tags.map((tag) => (
<TagChip key={tag.id} name={tag.tag_name} />
))}
{isUploading ? (
<View style={styles.uploadRow}>
<MaterialIcons name="cloud-upload" size={14} color="#1976D2" />
<Text style={styles.uploadText}>
Upload {(file.uploadProgress ?? 0)}%
</Text>
</View>
) : file.ocrText ? (
<Text style={styles.preview} numberOfLines={2}>
{file.ocrText}
</Text>
) : null}
{file.tags && file.tags.length > 0 && (
<View style={styles.tags}>
{file.tags.slice(0, 3).map((tag) => (
<TagChip key={tag.id} name={tag.tag_name} />
))}
</View>
)}
</View>
</TouchableOpacity>
);
@@ -50,49 +135,104 @@ export function FileCard({ file, onPress }: FileCardProps) {
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
backgroundColor: '#fff',
borderRadius: 8,
padding: 12,
borderRadius: 10,
padding: 10,
marginBottom: 8,
gap: 12,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 2,
elevation: 1,
},
imageContainer: {
marginBottom: 8,
borderRadius: 4,
containerSelected: {
opacity: 0.85,
borderWidth: 1.5,
borderColor: '#1976D2',
},
thumbnailWrap: {
width: 64,
height: 64,
borderRadius: 8,
overflow: 'hidden',
},
image: {
width: '100%',
height: 120,
borderRadius: 4,
thumbnail: {
width: 64,
height: 64,
borderRadius: 8,
},
placeholder: {
justifyContent: 'center',
alignItems: 'center',
gap: 1,
},
ext: {
fontSize: 9,
fontWeight: '700',
},
selectedOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-start',
alignItems: 'flex-end',
padding: 4,
},
checkCircle: {
width: 22,
height: 22,
borderRadius: 11,
backgroundColor: '#1976D2',
justifyContent: 'center',
alignItems: 'center',
},
badge: {
position: 'absolute',
bottom: 4,
left: 4,
},
body: {
flex: 1,
justifyContent: 'center',
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 4,
gap: 8,
},
name: {
fontSize: 16,
fontSize: 15,
fontWeight: '600',
color: '#333',
flex: 1,
marginRight: 8,
},
size: {
fontSize: 13,
fontSize: 12,
color: '#999',
},
preview: {
fontSize: 13,
color: '#666',
marginBottom: 8,
marginBottom: 6,
lineHeight: 18,
},
uploadRow: {
flexDirection: 'row',
alignItems: 'center',
gap: 6,
marginBottom: 6,
},
uploadText: {
fontSize: 13,
color: '#1976D2',
fontWeight: '500',
},
tags: {
flexDirection: 'row',
flexWrap: 'wrap',
mobile/components/FileThumbnail.tsx
+5 -2
View File
@@ -23,6 +23,8 @@ function getFileInfo(mimeType: string, fileName: string): FileTypeInfo {
if (mimeType.startsWith('text/')) return { icon: 'article', color: '#546E7A', bg: '#ECEFF1' };
if (mimeType.startsWith('video/')) return { icon: 'movie', color: '#6A1B9A', bg: '#F3E5F5' };
if (mimeType.startsWith('audio/')) return { icon: 'audiotrack', color: '#AD1457', bg: '#FCE4EC' };
if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('rar') || mimeType.includes('tar')) return { icon: 'folder-zip', color: '#6D4C41', bg: '#EFEBE9' };
if (mimeType.includes('json') || mimeType.includes('xml')) return { icon: 'code', color: '#37474F', bg: '#ECEFF1' };
return { icon: 'insert-drive-file', color: '#757575', bg: '#F5F5F5' };
}
@@ -34,6 +36,7 @@ function getExtension(fileName: string): string {
interface FileThumbnailProps {
uri?: string;
thumbnailUrl?: string;
thumbnailLocal?: string;
mimeType: string;
fileName: string;
size: number;
@@ -44,7 +47,7 @@ interface FileThumbnailProps {
uploadProgress?: number;
}
export const FileThumbnail = React.memo(function FileThumbnail({ uri, thumbnailUrl, mimeType, fileName, size, isLoading, syncStatus, isFolder, isUploading, uploadProgress }: FileThumbnailProps) {
export const FileThumbnail = React.memo(function FileThumbnail({ uri, thumbnailUrl, thumbnailLocal, mimeType, fileName, size, isLoading, syncStatus, isFolder, isUploading, uploadProgress }: FileThumbnailProps) {
const info = getFileInfo(mimeType, fileName);
const ext = getExtension(fileName);
@@ -64,7 +67,7 @@ export const FileThumbnail = React.memo(function FileThumbnail({ uri, thumbnailU
);
}
const imageUri = thumbnailUrl || (uri && mimeType.startsWith('image/') ? uri : undefined);
const imageUri = thumbnailUrl || thumbnailLocal || (uri && mimeType.startsWith('image/') ? uri : undefined);
if (imageUri) {
return (
mobile/components/SearchBar.tsx
+69 -58
View File
@@ -10,7 +10,13 @@ export interface SearchFilters {
ocrText: boolean;
}
export type MediaFilter = 'all' | 'documents' | 'photos-videos';
export type SortKey = 'date' | 'name' | 'size';
export type SortDirection = 'asc' | 'desc';
export interface SortState {
key: SortKey;
direction: SortDirection;
}
interface SearchBarProps {
query: string;
@@ -18,8 +24,8 @@ interface SearchBarProps {
onClear: () => void;
filters: SearchFilters;
onFiltersChange: (f: SearchFilters) => void;
mediaFilter: MediaFilter;
onMediaFilterChange: (f: MediaFilter) => void;
sort: SortState;
onSortChange: (s: SortState) => void;
bottomPadding?: number;
}
@@ -28,31 +34,19 @@ const FILTER_OPTIONS: { key: keyof SearchFilters; label: string; icon: IconName
{ key: 'ocrText', label: 'Texte OCR', icon: 'document-scanner' },
];
const MEDIA_OPTIONS: { key: MediaFilter; label: string; icon: IconName }[] = [
{ key: 'all', label: 'Tous', icon: 'filter-none' },
{ key: 'documents', label: 'Documents', icon: 'description' },
{ key: 'photos-videos', label: 'Photos', icon: 'photo-library' },
const SORT_OPTIONS: { key: SortKey; label: string; icon: IconName }[] = [
{ key: 'date', label: 'Date', icon: 'schedule' },
{ key: 'name', label: 'Nom', icon: 'sort-by-alpha' },
{ key: 'size', label: 'Taille', icon: 'data-usage' },
];
const MEDIA_ICONS: Record<MediaFilter, IconName> = {
all: 'filter-none',
documents: 'description',
'photos-videos': 'photo-library',
const SORT_LABELS: Record<SortKey, string> = {
date: 'Date',
name: 'Nom',
size: 'Taille',
};
const MEDIA_LABELS: Record<MediaFilter, string> = {
all: 'Tous',
documents: 'Documents',
'photos-videos': 'Photos',
};
function cycleMediaFilter(current: MediaFilter): MediaFilter {
if (current === 'all') return 'documents';
if (current === 'documents') return 'photos-videos';
return 'all';
}
export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersChange, mediaFilter, onMediaFilterChange, bottomPadding = 0 }: SearchBarProps) {
export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersChange, sort, onSortChange, bottomPadding = 0 }: SearchBarProps) {
const animatedHeight = useRef(new Animated.Value(0)).current;
const [panelOpen, setPanelOpen] = React.useState(false);
@@ -67,14 +61,22 @@ export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersCha
const panelMaxHeight = animatedHeight.interpolate({
inputRange: [0, 1],
outputRange: [0, 120],
outputRange: [0, 260],
});
const toggleFilter = (key: keyof SearchFilters) => {
onFiltersChange({ ...filters, [key]: !filters[key] });
};
const hasActiveFilter = filters.name || filters.ocrText;
const selectSort = (key: SortKey) => {
if (sort.key === key) {
onSortChange({ key, direction: sort.direction === 'asc' ? 'desc' : 'asc' });
} else {
onSortChange({ key, direction: 'desc' });
}
};
const hasActiveFilter = filters.name || filters.ocrText || sort.key !== 'date';
return (
<View style={[styles.wrapper, { paddingBottom: bottomPadding }]}>
@@ -107,20 +109,10 @@ export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersCha
color={hasActiveFilter ? '#fff' : '#1976D2'}
/>
</TouchableOpacity>
<TouchableOpacity
style={[styles.iconBtn, mediaFilter !== 'all' && styles.iconBtnActive]}
onPress={() => onMediaFilterChange(cycleMediaFilter(mediaFilter))}
>
<MaterialIcons
name={MEDIA_ICONS[mediaFilter]}
size={22}
color={mediaFilter !== 'all' ? '#fff' : '#1976D2'}
/>
</TouchableOpacity>
</View>
<Animated.View style={[styles.filterPanel, { maxHeight: panelMaxHeight, opacity: animatedHeight }]}>
<Text style={styles.sectionLabel}>Rechercher dans</Text>
{FILTER_OPTIONS.map((opt) => (
<TouchableOpacity
key={opt.key}
@@ -137,23 +129,33 @@ export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersCha
</Text>
</TouchableOpacity>
))}
<View style={styles.mediaDivider} />
{MEDIA_OPTIONS.map((opt) => (
<TouchableOpacity
key={opt.key}
style={[styles.filterChip, mediaFilter === opt.key && styles.filterChipActive]}
onPress={() => onMediaFilterChange(opt.key)}
>
<MaterialIcons
name={opt.icon}
size={16}
color={mediaFilter === opt.key ? '#fff' : '#1976D2'}
/>
<Text style={[styles.filterChipText, mediaFilter === opt.key && styles.filterChipTextActive]}>
{opt.label}
</Text>
</TouchableOpacity>
))}
<Text style={styles.sectionLabel}>Trier par</Text>
{SORT_OPTIONS.map((opt) => {
const active = sort.key === opt.key;
return (
<TouchableOpacity
key={opt.key}
style={[styles.filterChip, active && styles.filterChipActive]}
onPress={() => selectSort(opt.key)}
>
<MaterialIcons
name={active && sort.direction === 'desc' ? 'arrow-downward' : active && sort.direction === 'asc' ? 'arrow-upward' : opt.icon}
size={16}
color={active ? '#fff' : '#1976D2'}
/>
<Text style={[styles.filterChipText, active && styles.filterChipTextActive]}>
{opt.label}
</Text>
</TouchableOpacity>
);
})}
{sort.key !== 'date' && (
<Text style={styles.sortHint}>
Tri : {SORT_LABELS[sort.key]} ({sort.direction === 'asc' ? 'A → Z' : 'Z → A'})
</Text>
)}
</Animated.View>
</View>
);
@@ -208,16 +210,20 @@ const styles = StyleSheet.create({
filterPanel: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
paddingHorizontal: 12,
paddingBottom: 10,
gap: 8,
overflow: 'hidden',
},
mediaDivider: {
sectionLabel: {
width: '100%',
height: 1,
backgroundColor: '#e0e0e0',
marginVertical: 4,
fontSize: 12,
fontWeight: '700',
color: '#666',
marginTop: 4,
textTransform: 'uppercase',
letterSpacing: 0.5,
},
filterChip: {
flexDirection: 'row',
@@ -239,4 +245,9 @@ const styles = StyleSheet.create({
filterChipTextActive: {
color: '#fff',
},
sortHint: {
width: '100%',
fontSize: 12,
color: '#999',
},
});