Add function to display error as alert

Move random modal id generation to function

src/util/error.rs

@@ -45,6 +45,20 @@ impl fmt::Display for ErrorLocation {
 
 pub type Result<T, E = Error> = std::result::Result<T, E>;
 
+/// Generate a random string to use as an id for the modal
+/// This allows multiple toast/modal to be present
+fn rand_modal_id() -> String {
+    use rand::RngExt;
+
+    let mut rng = rand::rng();
+
+    let random_str = (0..5)
+        .map(|_| rng.sample(rand::distr::Alphanumeric) as char)
+        .collect::<String>();
+
+    format!("err-modal-{random_str}")
+}
+
 #[derive(Debug, Clone, Deserialize, Serialize, thiserror::Error)]
 pub struct Error {
     #[source]
@@ -173,42 +187,46 @@ impl Error {
         }
     }
 
+    /// Convert this error into an alert label, tied to the given modal id
+    fn as_alert_for(&self, modal_id: String) -> Element {
+        rsx! {
+            label {
+                class: "alert alert-error alert-soft cursor-pointer",
+                role: "alert",
+                r#for: modal_id,
+                lucide_dioxus::CircleAlert {}
+
+                p {
+                    class: "max-w-120 text-ellipsis line-clamp-3",
+                    {self.top_message()}
+                }
+            }
+        }
+    }
+
     /// Convert this error to a toast message, which opens a modal when clicked
     pub fn as_toast(&self) -> Element {
-        // Generate a random string to use as an id for the modal
+        let modal_id = rand_modal_id();
-        // This allows multiple toast/modal to be present
-        let modal_id = {
-            use rand::RngExt;
-
-            let mut rng = rand::rng();
-
-            let random_str = (0..5)
-                .map(|_| rng.sample(rand::distr::Alphanumeric) as char)
-                .collect::<String>();
-
-            format!("err-modal-{random_str}")
-        };
 
         rsx! {
             {self.as_modal(modal_id.clone())}
 
             div {
                 class: "toast z-99",
-
+                {self.as_alert_for(modal_id)}
-                label {
-                    class: "alert alert-error alert-soft cursor-pointer",
-                    role: "alert",
-                    r#for: modal_id,
-                    lucide_dioxus::CircleAlert {}
-
-                    p {
-                        class: "max-w-120 text-ellipsis line-clamp-3",
-                        {self.top_message()}
-                    }
-                }
             }
         }
     }
+
+    /// Convert this error into an alert label, which opens a modal when clicked
+    pub fn as_alert(&self) -> Element {
+        let modal_id = rand_modal_id();
+
+        rsx! {
+            {self.as_modal(modal_id.clone())}
+            {self.as_alert_for(modal_id)}
+        }
+    }
 }
 
 impl fmt::Display for Error {