81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, FlatList, ActivityIndicator, RefreshControl } from 'react-native';
|
|
import type { LocalModel } from '../../store/types';
|
|
import { createStyles } from './styles';
|
|
import { useTheme } from '../../theme/ThemeProvider';
|
|
|
|
interface EmptyListProps {
|
|
message: string;
|
|
submessage: string;
|
|
colors: {
|
|
text: string;
|
|
border: string;
|
|
};
|
|
}
|
|
|
|
function EmptyList({ message, submessage, colors }: EmptyListProps) {
|
|
const styles = createStyles(colors);
|
|
return (
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={styles.emptyText}>{message}</Text>
|
|
<Text style={styles.emptySubtext}>{submessage}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
interface ModelsListProps {
|
|
models: LocalModel[];
|
|
isLoading: boolean;
|
|
onRefresh: () => void;
|
|
renderItem: (item: { item: LocalModel }) => React.ReactElement;
|
|
}
|
|
|
|
export default function ModelsList({
|
|
models,
|
|
isLoading,
|
|
onRefresh,
|
|
renderItem,
|
|
}: ModelsListProps) {
|
|
const { colors } = useTheme();
|
|
const styles = createStyles(colors);
|
|
|
|
return (
|
|
<View style={styles.modelsSection}>
|
|
<View style={styles.modelsHeader}>
|
|
<Text style={styles.sectionTitle}>
|
|
Modèles locaux ({models.length})
|
|
</Text>
|
|
</View>
|
|
|
|
{isLoading && models.length === 0 ? (
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator size="large" color={colors.primary} />
|
|
<Text style={styles.loadingText}>Scan en cours...</Text>
|
|
</View>
|
|
) : (
|
|
<FlatList
|
|
data={models}
|
|
renderItem={renderItem}
|
|
keyExtractor={(item) => item.path}
|
|
ListEmptyComponent={
|
|
<EmptyList
|
|
message="Aucun fichier .gguf trouvé dans ce dossier"
|
|
submessage="Placez vos modèles dans le dossier configuré"
|
|
colors={colors}
|
|
/>
|
|
}
|
|
contentContainerStyle={styles.listContent}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={isLoading}
|
|
onRefresh={onRefresh}
|
|
colors={[colors.primary]}
|
|
tintColor={colors.primary}
|
|
/>
|
|
}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|