diff --git a/src/editor_view.rs b/src/editor_view.rs
index 111e502..afccbde 100644
--- a/src/editor_view.rs
+++ b/src/editor_view.rs
@@ -2,11 +2,12 @@ use std::{ops::Deref, rc::Rc};
 
 use crate::{FrameId, GlobalLayoutState, GlobalMemoCell, PanelDirection, SplitPanel};
 use anyhow::Error;
+use create_script_dialog::CreateScriptDialog;
 use editor_area::EditorArea;
 use editor_nav::EditorNav;
 use storage::fetch_initial_editor_state;
 use wasm_bindgen::{closure::Closure, JsCast};
-use web_sys::{window, HtmlInputElement, KeyboardEvent};
+use web_sys::KeyboardEvent;
 use yew::{
     function_component, html, use_effect_with, use_node_ref, use_state, use_state_eq, AttrValue,
     Callback, Html, Properties, UseStateHandle,
@@ -14,6 +15,7 @@ use yew::{
 
 use self::storage::load_file_contents;
 
+mod create_script_dialog;
 mod editor_area;
 mod editor_nav;
 mod storage;
@@ -96,29 +98,6 @@ fn close_modals(state: &UseStateHandle<Rc<EditorViewState>>) {
     state.set(new_state.into());
 }
 
-fn create_script(state: &UseStateHandle<Rc<EditorViewState>>) {
-    let mut scriptname = window()
-        .and_then(|w| w.document())
-        .and_then(|d| d.get_element_by_id("newscriptname"))
-        .map(|el| el.unchecked_into::<HtmlInputElement>().value())
-        .unwrap_or_default();
-    if scriptname.is_empty() {
-        scriptname = "untitled.lua".to_owned();
-    }
-
-    let mut new_state = (*state.deref().deref()).clone();
-
-    let scriptname: AttrValue = scriptname.into();
-    if new_state.available_files.contains(&scriptname) {
-        new_state.error_msg = Some("A script with that name already exists".into());
-    }
-
-    new_state.available_files.push(scriptname.clone());
-    new_state.open_file = scriptname;
-    new_state.show_create_dialog = false;
-    state.set(new_state.into());
-}
-
 #[function_component(CodeEditorView)]
 pub fn editor_view(props: &EditorViewProps) -> Html {
     let editor_state: UseStateHandle<Rc<EditorViewState>> =
@@ -172,35 +151,10 @@ pub fn editor_view(props: &EditorViewProps) -> Html {
         Box::new(|| {})
     });
 
-    let state_modalclose1 = editor_state.clone();
-    let state_modalclose2 = editor_state.clone();
-    let state_createscript = editor_state.clone();
     html! {
         <div class="w-100 h-100" ref={editor_ref.clone()}>
         {if editor_state.show_create_dialog {
-            html! { <>
-                      <div class="modal-backdrop fade show"/>
-                        <div class="modal" tabindex="-1" aria-modal="true" role="dialog" style="display: block">
-                          <div class="modal-dialog">
-                            <div class="modal-content">
-                              <div class="modal-header">
-                                <h5 class="modal-title">{"Create script"}</h5>
-                                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
-                                     onclick={move |_ev| close_modals(&state_modalclose1) }></button>
-                              </div>
-                              <div class="modal-body">
-                                 <p class="d-flex flex-row"><label for="newscriptname" class="pe-1">{"New script name: "}</label>
-                                    <input class="flex-grow-1" type="text" id="newscriptname" tabindex="1"/></p>
-                              </div>
-                              <div class="modal-footer">
-                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
-                                        onclick={move |_ev| close_modals(&state_modalclose2) }>{"Close"}</button>
-                                <button type="button" class="btn btn-primary" onclick={move |_ev| create_script(&state_createscript) }>{"Create script"}</button>
-                              </div>
-                            </div>
-                        </div>
-                      </div>
-                    </>}
+            html! { <CreateScriptDialog ..detail_props.clone() /> }
         } else {
             html! { <></> }
         }}
diff --git a/src/editor_view/create_script_dialog.rs b/src/editor_view/create_script_dialog.rs
new file mode 100644
index 0000000..c109494
--- /dev/null
+++ b/src/editor_view/create_script_dialog.rs
@@ -0,0 +1,59 @@
+use std::{ops::Deref, rc::Rc};
+use wasm_bindgen::JsCast;
+use web_sys::{window, HtmlInputElement};
+use yew::{function_component, html, AttrValue, Html, UseStateHandle};
+
+use super::{close_modals, EditorViewDetailProps, EditorViewState};
+
+fn create_script(state: &UseStateHandle<Rc<EditorViewState>>) {
+    let mut scriptname = window()
+        .and_then(|w| w.document())
+        .and_then(|d| d.get_element_by_id("newscriptname"))
+        .map(|el| el.unchecked_into::<HtmlInputElement>().value())
+        .unwrap_or_default();
+    if scriptname.is_empty() {
+        scriptname = "untitled.lua".to_owned();
+    }
+
+    let mut new_state = (*state.deref().deref()).clone();
+
+    let scriptname: AttrValue = scriptname.into();
+    if new_state.available_files.contains(&scriptname) {
+        new_state.error_msg = Some("A script with that name already exists".into());
+    }
+
+    new_state.available_files.push(scriptname.clone());
+    new_state.open_file = scriptname;
+    new_state.show_create_dialog = false;
+    state.set(new_state.into());
+}
+
+#[function_component(CreateScriptDialog)]
+pub(super) fn create_script_dialog(props: &EditorViewDetailProps) -> Html {
+    let state_modalclose1 = props.editor_state.clone();
+    let state_modalclose2 = props.editor_state.clone();
+    let state_createscript = props.editor_state.clone();
+    html! { <>
+      <div class="modal-backdrop fade show"/>
+        <div class="modal" tabindex="-1" aria-modal="true" role="dialog" style="display: block">
+          <div class="modal-dialog">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h5 class="modal-title">{"Create script"}</h5>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
+                     onclick={move |_ev| close_modals(&state_modalclose1) }></button>
+              </div>
+              <div class="modal-body">
+                 <p class="d-flex flex-row"><label for="newscriptname" class="pe-1">{"New script name: "}</label>
+                    <input class="flex-grow-1" type="text" id="newscriptname" tabindex="1"/></p>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
+                        onclick={move |_ev| close_modals(&state_modalclose2) }>{"Close"}</button>
+                <button type="button" class="btn btn-primary" onclick={move |_ev| create_script(&state_createscript) }>{"Create script"}</button>
+              </div>
+            </div>
+        </div>
+      </div>
+    </>}
+}