Initial commit

app/src/screens/LocalModelsScreen/ModelsList.tsx

@@ -0,0 +1,80 @@
+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>
+  );
+}