Update examples, add css

examples/file_explorer.rs

@@ -1,12 +1,9 @@
 //! Example: File Explorer
-//! -------------------------
 //!
 //! This is a fun little desktop application that lets you explore the file system.
 //!
 //! This example is interesting because it's mixing filesystem operations and GUI, which is typically hard for UI to do.
-//!
-//! It also uses `use_ref` to maintain a model, rather than `use_state`. That way,
-//! we dont need to clutter our code with `read` commands.
+//! We store the state entirely in a single signal, making the explorer logic fairly easy to reason about.
 
 use dioxus::desktop::{Config, WindowBuilder};
 use dioxus::prelude::*;
@@ -37,25 +34,25 @@ fn app() -> Element {
             }
             style { "{_STYLE}" }
             main {
-                {files.read().path_names.iter().enumerate().map(|(dir_id, path)| {
-                    let path_end = path.split('/').last().unwrap_or(path.as_str());
-                    rsx! (
-                        div {
-                            class: "folder",
-                            key: "{path}",
-                            i { class: "material-icons",
-                                onclick: move |_| files.write().enter_dir(dir_id),
-                                if path_end.contains('.') {
-                                    "description"
-                                } else {
-                                    "folder"
+                for (dir_id, path) in files.read().path_names.iter().enumerate() {
+                    {
+                        let path_end = path.split('/').last().unwrap_or(path.as_str());
+                        rsx! {
+                            div { class: "folder", key: "{path}",
+                                i { class: "material-icons",
+                                    onclick: move |_| files.write().enter_dir(dir_id),
+                                    if path_end.contains('.') {
+                                        "description"
+                                    } else {
+                                        "folder"
+                                    }
+                                    p { class: "cooltip", "0 folders / 0 files" }
                                 }
-                                p { class: "cooltip", "0 folders / 0 files" }
+                                h1 { "{path_end}" }
                             }
-                            h1 { "{path_end}" }
                         }
-                    )
-                })},
+                    }
+                }
                 if let Some(err) = files.read().err.as_ref() {
                     div {
                         code { "{err}" }
@@ -67,6 +64,10 @@ fn app() -> Element {
     }
 }
 
+/// A simple little struct to hold the file explorer state
+///
+/// We don't use any fancy signals or memoization here - Dioxus is so fast that even a file explorer can be done with a
+/// single signal.
 struct Files {
     path_stack: Vec<String>,
     path_names: Vec<String>,