App: pass app state into outline as context

app-proto/sketch-outline/src/outline.rs

@@ -0,0 +1,42 @@
+use itertools::Itertools;
+use sycamore::{prelude::*, web::tags::div};
+
+use crate::AppState;
+
+#[component]
+pub fn Outline() -> View {
+    let state = use_context::<AppState>();
+    
+    // sort the elements alphabetically by ID
+    let elements_sorted = create_memo(move ||
+        state.assembly.elements
+            .get_clone()
+            .into_iter()
+            .sorted_by_key(|elt| elt.id.clone())
+            .collect()
+    );
+    
+    view! {
+        ul {
+            Keyed(
+                list=elements_sorted,
+                view=|elt| {
+                    let label = elt.label.clone();
+                    let rep_components = elt.rep.iter().map(|u| {
+                        let u_coord = u.to_string().replace("-", "\u{2212}");
+                        View::from(div().children(u_coord))
+                    }).collect::<Vec<_>>();
+                    view! {
+                        /* [TO DO] switch to integer-valued parameters whenever
+                        that becomes possible again */
+                        li(tabindex="0") {
+                            div(class="elt-label") { (label) }
+                            div(class="elt-rep") { (rep_components) }
+                        }
+                    }
+                },
+                key=|elt| elt.id.clone()
+            )
+        }
+    }
+}