Frontend overhaul: NetBox-style detail pages, selectable columns, data sources

- Cultivar/species detail pages rewritten with two-column card layout, attribute tables, em-dash placeholders - Column toggle + per-page selector on all list pages (families, species, cultivars, suppliers) - Species list: table/card view toggle with family, layer, N-fixer, uses columns - Cultivar detail: supplier links with SKU/price/product URL, species info section - Data sources page (/sources) with attribution for all 10 data sources - Fixed Cultivar/Species structs with #[serde(default)] for API compatibility - Added table_controls component (reusable column toggle + per-page selector) - Removed max-width constraint on content area for full-width tables - Fixed route conflicts: merged {slug}/{id} into single {ref} routes - Removed PostgreSQL enum types (plant_layer, drought_tolerance, etc.) in favor of TEXT - Fixed API per_page parameter support across all list endpoints
2026-03-15 00:53:06 +01:00
parent 484979ad53
commit 42906efd90
17 changed files with 2130 additions and 276 deletions
@@ -0,0 +1,100 @@
+use dioxus::prelude::*;
+
+struct DataSource {
+    name: &'static str,
+    url: &'static str,
+    description: &'static str,
+    data_used: &'static str,
+    license: &'static str,
+}
+
+const SOURCES: &[DataSource] = &[
+    DataSource {
+        name: "GBIF",
+        url: "https://gbif.org",
+        description: "Global Biodiversity Information Facility — the world's largest open biodiversity data network.",
+        data_used: "Taxonomy and German common names. Used for species name lookups and vernacular name enrichment.",
+        license: "CC0",
+    },
+    DataSource {
+        name: "Reinsaat",
+        url: "https://reinsaat.at",
+        description: "Austrian biodynamic seed producer.",
+        data_used: "Cultivar data, sowing calendars, spacing info. Scraped from product catalog.",
+        license: "Proprietary",
+    },
+    DataSource {
+        name: "Magic Garden Seeds",
+        url: "https://magicgardenseeds.com",
+        description: "Specialist seed shop with a wide range of rare and heritage varieties.",
+        data_used: "Cultivar data, growing info. Scraped from product catalog.",
+        license: "Proprietary",
+    },
+    DataSource {
+        name: "PFAF (Plants for a Future)",
+        url: "https://pfaf.org",
+        description: "Permaculture plant database with extensive information on useful plants.",
+        data_used: "Species data: uses, tolerances, hardiness zones, height/spread, bloom periods. Data from community SQLite export.",
+        license: "Open data",
+    },
+    DataSource {
+        name: "FloraWeb / BIOLFLOR",
+        url: "https://floraweb.de",
+        description: "German Federal Agency for Nature Conservation plant information system.",
+        data_used: "Ellenberg indicator values for soil pH, moisture, light requirements.",
+        license: "Public data",
+    },
+    DataSource {
+        name: "Arche Noah",
+        url: "https://arche-noah.at",
+        description: "Austrian heritage seed library dedicated to preserving crop diversity.",
+        data_used: "Cultivar data and heritage varieties.",
+        license: "Proprietary",
+    },
+    DataSource {
+        name: "Wikidata",
+        url: "https://wikidata.org",
+        description: "Free and open knowledge base providing structured data to Wikimedia projects and beyond.",
+        data_used: "Structured data: USDA zones, taxonomy links.",
+        license: "CC0",
+    },
+];
+
+#[component]
+pub fn Sources() -> Element {
+    rsx! {
+        div { class: "page sources-page",
+            h1 { "Data Sources" }
+            p { class: "sources-intro",
+                "HerbAPI aggregates plant data from multiple open sources. We are grateful to these projects for making botanical knowledge freely available."
+            }
+            div { class: "sources-grid",
+                for source in SOURCES.iter() {
+                    div { class: "source-card",
+                        div { class: "source-header",
+                            h3 { class: "source-name", "{source.name}" }
+                            a {
+                                class: "source-url",
+                                href: "{source.url}",
+                                target: "_blank",
+                                rel: "noopener",
+                                "{source.url}"
+                            }
+                        }
+                        p { class: "source-description", "{source.description}" }
+                        div { class: "source-details",
+                            div { class: "source-detail",
+                                span { class: "source-detail-label", "Data used" }
+                                span { class: "source-detail-value", "{source.data_used}" }
+                            }
+                            div { class: "source-detail",
+                                span { class: "source-detail-label", "License" }
+                                span { class: "source-detail-value source-license", "{source.license}" }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}