altre specie

pwa-app/src/App.jsx

@@ -121,6 +121,7 @@ export default function App({ googleClientIdConfigured = false }) {
   const cameraInputRef = useRef(null);
 
   const [searchResults, setSearchResults] = useState([]);
+  const [searchFile, setSearchFile] = useState(null);
   const [speciesPreviews, setSpeciesPreviews] = useState({});
   const [speciesCommonNames, setSpeciesCommonNames] = useState({});
   const [selectedSpecies, setSelectedSpecies] = useState("");
@@ -319,6 +320,7 @@ export default function App({ googleClientIdConfigured = false }) {
     setFile(nextFile);
     setSelectedSpecies("");
     setSearchResults([]);
+    setSearchFile(null);
     setSpeciesPreviews({});
     setSpeciesCommonNames({});
     setShowSpeciesGrid(true);
@@ -381,6 +383,7 @@ export default function App({ googleClientIdConfigured = false }) {
 
     setError("");
     setSearchResults([]);
+    setSearchFile(file);
     setSpeciesPreviews({});
     setSpeciesCommonNames({});
     setSelectedSpecies("");
@@ -416,6 +419,31 @@ export default function App({ googleClientIdConfigured = false }) {
     }
   }
 
+  async function loadMoreSpecies() {
+    if (!searchFile || busy.moreSpecies) return;
+    setBusy((prev) => ({ ...prev, moreSpecies: true }));
+    try {
+      const nextK = searchResults.length + 5;
+      const data = await searchPlantImage(searchFile, nextK);
+      const allResults = [...(data.results || [])].sort((a, b) => b.score - a.score);
+      const existingNames = new Set(searchResults.map((r) => r.species));
+      const newResults = allResults.filter((r) => !existingNames.has(r.species));
+      if (!newResults.length) return;
+      const newSpeciesNames = newResults.map((r) => r.species);
+      const [previewData, commonNameData] = await Promise.all([
+        getSpeciesPreviews(newSpeciesNames),
+        getSpeciesCommonNames(newSpeciesNames),
+      ]);
+      setSpeciesPreviews((prev) => ({ ...prev, ...(previewData.previews || {}) }));
+      setSpeciesCommonNames((prev) => ({ ...prev, ...(commonNameData.common_names || {}) }));
+      setSearchResults((prev) => [...prev, ...newResults]);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy((prev) => ({ ...prev, moreSpecies: false }));
+    }
+  }
+
   async function selectSpecies(speciesName) {
     setSelectedSpecies(speciesName);
     setShowSpeciesGrid(false);
@@ -940,6 +968,14 @@ export default function App({ googleClientIdConfigured = false }) {
                   </button>
                 ))}
               </div>
+              <button
+                type="button"
+                className="btn-secondary btn-more-species"
+                onClick={loadMoreSpecies}
+                disabled={busy.moreSpecies}
+              >
+                {busy.moreSpecies ? "Cerco..." : "+ Altre specie"}
+              </button>
             </>
           )}
         </section>

pwa-app/src/styles.css

@@ -248,6 +248,18 @@ button:disabled {
   padding: 0.5rem 1rem;
 }
 
+.btn-more-species {
+  display: block;
+  width: 100%;
+  margin-top: 0.75rem;
+  text-align: center;
+}
+
+.btn-more-species:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .btn-small {
   font-size: 0.78rem;
   padding: 0.25rem 0.65rem;