Function ModelBrowserScreen

example/src/ModelBrowserScreen.tsx:14–108

()

type RegistryEntry = { key: string; model: CactusModel };

const ModelBrowserScreen = () => {
  const [entries, setEntries] = useState<RegistryEntry[]>([]);
  const [filtered, setFiltered] = useState<RegistryEntry[]>([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    getRegistry()
      .then((registry) => {
        const list = Object.entries(registry).map(([key, model]) => ({
          key,
          model,
        }));
        list.sort((a, b) => a.key.localeCompare(b.key));
        setEntries(list);
        setFiltered(list);
      })
      .catch((e: unknown) =>
        setError(e instanceof Error ? e.message : String(e))
      )
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    const q = search.trim().toLowerCase();
    setFiltered(q ? entries.filter((e) => e.key.includes(q)) : entries);
  }, [search, entries]);

  if (loading) {
    return (
      <View style={styles.center}>
        <ActivityIndicator size="large" />
        <Text style={styles.loadingText}>Loading model registry...</Text>
      </View>
    );
  }

  if (error) {
    return (
      <View style={styles.center}>
        <Text style={styles.errorText}>{error}</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.search}
        value={search}
        onChangeText={setSearch}
        placeholder="Search models..."
        placeholderTextColor="#666"
        clearButtonMode="while-editing"
      />
      <Text style={styles.count}>
        {filtered.length} of {entries.length} models