feat: add usable state logic

4 files changed, 402 insertions, 83 deletions

diff --git a/Cargo.lock b/Cargo.lock
index 1e50ffa..c877aa9 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -19,6 +19,15 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c71b1793ee61086797f5c80b6efa2b8ffa6d5dd703f118545808a7f2e27f7046"
 
 [[package]]
+name = "addr2line"
+version = "0.22.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6e4503c46a5c0c7844e948c9a4d6acd9f50cccb4de1c48eb9e291ea17470c678"
+dependencies = [
+ "gimli",
+]
+
+[[package]]
 name = "adler"
 version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -134,12 +143,42 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0c4b4d0bd25bd0b74681c0ad21497610ce1b7c91b1022cd21c80c6fbdd9476b0"
 
 [[package]]
+name = "backtrace"
+version = "0.3.73"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5cc23269a4f8976d0a4d2e7109211a419fe30e8d88d677cd60b6bc79c5732e0a"
+dependencies = [
+ "addr2line",
+ "cc",
+ "cfg-if",
+ "libc",
+ "miniz_oxide 0.7.4",
+ "object",
+ "rustc-demangle",
+]
+
+[[package]]
 name = "base64"
 version = "0.21.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9d297deb1925b89f2ccc13d7635fa0714f12c87adce1c75356b39ca9b7178567"
 
 [[package]]
+name = "base64"
+version = "0.22.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
+
+[[package]]
+name = "bincode"
+version = "1.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1f45e9417d87227c7a56d22e471c6206462cba514c7590c09aff4cf6d1ddcad"
+dependencies = [
+ "serde",
+]
+
+[[package]]
 name = "bit-set"
 version = "0.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -573,6 +612,15 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5c297a1c74b71ae29df00c3e22dd9534821d60eb9af5a0192823fa2acea70c2a"
 
 [[package]]
+name = "deranged"
+version = "0.3.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b42b6fa04a440b495c8b04d0e71b707c585f83cb9cb28cf8cd0d976c315e31b4"
+dependencies = [
+ "powerfmt",
+]
+
+[[package]]
 name = "dispatch"
 version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -748,6 +796,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "fnv"
+version = "1.0.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f9eec918d3f24069decb9af1554cad7c880e2da24a9afd88aca000531ab82c1"
+
+[[package]]
 name = "font-types"
 version = "0.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -938,6 +992,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "gimli"
+version = "0.29.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "40ecd4077b5ae9fd2e9e169b102c6c330d0605168eb0e8bf79952b256dbefffd"
+
+[[package]]
 name = "gl_generator"
 version = "0.14.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -1110,6 +1170,7 @@ checksum = "7d4eb0fbbefb8c428b70680e77ed9013887b17c1d6be366b40f264f956d1a096"
 dependencies = [
  "iced_core",
  "iced_futures",
+ "iced_highlighter",
  "iced_renderer",
  "iced_widget",
  "iced_winit",
@@ -1122,6 +1183,8 @@ name = "iced-builder"
 version = "0.1.0"
 dependencies = [
  "iced",
+ "rust-format",
+ "tokio",
 ]
 
 [[package]]
@@ -1151,6 +1214,7 @@ dependencies = [
  "futures",
  "iced_core",
  "log",
+ "tokio",
  "wasm-bindgen-futures",
  "wasm-timer",
 ]
@@ -1180,6 +1244,17 @@ dependencies = [
 ]
 
 [[package]]
+name = "iced_highlighter"
+version = "0.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a1d27d1e5f526255ad4902907509f9ff9e98a40653dd31df36aba38d7c3905ad"
+dependencies = [
+ "iced_core",
+ "once_cell",
+ "syntect",
+]
+
+[[package]]
 name = "iced_renderer"
 version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -1341,6 +1416,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "itoa"
+version = "1.0.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "49f1f14873335454500d59611f1cf4a4b0f786f9ac11f4312a78e4cf2566695b"
+
+[[package]]
 name = "jni"
 version = "0.21.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -1484,6 +1565,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "linked-hash-map"
+version = "0.5.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0717cef1bc8b636c6e1c1bbdefc09e6322da8a9321966e8928ef80d20f7f770f"
+
+[[package]]
 name = "linux-raw-sys"
 version = "0.4.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -1696,6 +1783,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "num-conv"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9"
+
+[[package]]
 name = "num-traits"
 version = "0.2.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -1892,12 +1985,43 @@ dependencies = [
 ]
 
 [[package]]
+name = "object"
+version = "0.36.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "27b64972346851a39438c60b341ebc01bba47464ae329e55cf343eb93964efd9"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
 name = "once_cell"
 version = "1.19.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3fdb12b2476b595f9358c5161aa467c2438859caa136dec86c26fdd2efe17b92"
 
 [[package]]
+name = "onig"
+version = "6.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8c4b31c8722ad9171c6d77d3557db078cab2bd50afcc9d09c8b315c59df8ca4f"
+dependencies = [
+ "bitflags 1.3.2",
+ "libc",
+ "once_cell",
+ "onig_sys",
+]
+
+[[package]]
+name = "onig_sys"
+version = "69.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7b829e3d7e9cc74c7e315ee8edb185bf4190da5acde74afd7fc59c35b1f086e7"
+dependencies = [
+ "cc",
+ "pkg-config",
+]
+
+[[package]]
 name = "orbclient"
 version = "0.3.47"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2066,6 +2190,19 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d231b230927b5e4ad203db57bbcbee2802f6bce620b1e4a9024a07d94e2907ec"
 
 [[package]]
+name = "plist"
+version = "1.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "42cf17e9a1800f5f396bc67d193dc9411b59012a5876445ef450d449881e1016"
+dependencies = [
+ "base64 0.22.1",
+ "indexmap",
+ "quick-xml 0.32.0",
+ "serde",
+ "time",
+]
+
+[[package]]
 name = "png"
 version = "0.17.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2094,6 +2231,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "powerfmt"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "439ee305def115ba05938db6eb1644ff94165c5ab5e9420d1c1bcedbba909391"
+
+[[package]]
 name = "presser"
 version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2140,6 +2283,15 @@ checksum = "166f136dfdb199f98186f3649cf7a0536534a61417a1a30221b492b4fb60ce3f"
 
 [[package]]
 name = "quick-xml"
+version = "0.32.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1d3a6e5838b60e0e8fa7a43f22ade549a37d61f8bdbe636d0d7816191de969c2"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "quick-xml"
 version = "0.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6f24d770aeca0eacb81ac29dfbc55ebcc09312fdd1f8bbecdc7e4a84e000e3b4"
@@ -2262,6 +2414,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "regex-syntax"
+version = "0.8.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7a66a03ae7c801facd77a29370b4faec201768915ac14a721ba36f20bc9c209b"
+
+[[package]]
 name = "renderdoc-sys"
 version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2309,6 +2467,18 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6c20b6793b5c2fa6553b250154b78d6d0db37e72700ae35fad9387a46f487c97"
 
 [[package]]
+name = "rust-format"
+version = "0.3.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "60e7c00b6c3bf5e38a880eec01d7e829d12ca682079f8238a464def3c4b31627"
+
+[[package]]
+name = "rustc-demangle"
+version = "0.1.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "719b953e2095829ee67db738b3bfa9fa368c94900df327b3f07fe6e794d2fe1f"
+
+[[package]]
 name = "rustc-hash"
 version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2361,6 +2531,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "ryu"
+version = "1.0.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f3cb5ba0dc43242ce17de99c180e96db90b235b8a9fdc9543c96d2209116bd9f"
+
+[[package]]
 name = "same-file"
 version = "1.0.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2421,6 +2597,18 @@ dependencies = [
 ]
 
 [[package]]
+name = "serde_json"
+version = "1.0.127"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8043c06d9f82bd7271361ed64f415fe5e12a77fdb52e573e7f06a516dea329ad"
+dependencies = [
+ "itoa",
+ "memchr",
+ "ryu",
+ "serde",
+]
+
+[[package]]
 name = "shlex"
 version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2667,6 +2855,28 @@ dependencies = [
 ]
 
 [[package]]
+name = "syntect"
+version = "5.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "874dcfa363995604333cf947ae9f751ca3af4522c60886774c4963943b4746b1"
+dependencies = [
+ "bincode",
+ "bitflags 1.3.2",
+ "flate2",
+ "fnv",
+ "once_cell",
+ "onig",
+ "plist",
+ "regex-syntax",
+ "serde",
+ "serde_derive",
+ "serde_json",
+ "thiserror",
+ "walkdir",
+ "yaml-rust",
+]
+
+[[package]]
 name = "sys-locale"
 version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2716,6 +2926,37 @@ dependencies = [
 ]
 
 [[package]]
+name = "time"
+version = "0.3.36"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5dfd88e563464686c916c7e46e623e520ddc6d79fa6641390f2e3fa86e83e885"
+dependencies = [
+ "deranged",
+ "itoa",
+ "num-conv",
+ "powerfmt",
+ "serde",
+ "time-core",
+ "time-macros",
+]
+
+[[package]]
+name = "time-core"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef927ca75afb808a4d64dd374f00a2adf8d0fcff8e7b184af886c3c87ec4a3f3"
+
+[[package]]
+name = "time-macros"
+version = "0.2.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f252a68540fde3a3877aeea552b832b40ab9a69e318efd078774a01ddee1ccf"
+dependencies = [
+ "num-conv",
+ "time-core",
+]
+
+[[package]]
 name = "tiny-skia"
 version = "0.11.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2770,6 +3011,16 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
+name = "tokio"
+version = "1.39.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9babc99b9923bfa4804bd74722ff02c0381021eafa4db9949217e3be8e84fff5"
+dependencies = [
+ "backtrace",
+ "pin-project-lite",
+]
+
+[[package]]
 name = "toml_datetime"
 version = "0.6.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2907,7 +3158,7 @@ version = "0.36.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c51daa774fe9ee5efcf7b4fec13019b8119cda764d9a8b5b06df02bb1445c656"
 dependencies = [
- "base64",
+ "base64 0.21.7",
  "log",
  "pico-args",
  "usvg-parser",
@@ -3184,7 +3435,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d7b56f89937f1cf2ee1f1259cf2936a17a1f45d8f0aa1019fae6d470d304cfa6"
 dependencies = [
  "proc-macro2",
- "quick-xml",
+ "quick-xml 0.34.0",
  "quote",
 ]
 
@@ -3756,6 +4007,15 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6a5cbf750400958819fb6178eaa83bee5cd9c29a26a40cc241df8c70fdd46984"
 
 [[package]]
+name = "yaml-rust"
+version = "0.4.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56c1936c4cc7a1c9ab21a1ebb602eb942ba868cbd44a99cb7cdc5892335e1c85"
+dependencies = [
+ "linked-hash-map",
+]
+
+[[package]]
 name = "yazi"
 version = "0.1.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
diff --git a/Cargo.toml b/Cargo.toml
index 27755ab..50b4017 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -9,4 +9,6 @@ license = "GPL-3.0-or-later"
 keywords = ["gui", "iced"]
 
 [dependencies]
-iced = { version = "0.12.1", features = [ "image","svg","canvas","qr_code","advanced"] }
+iced = { version = "0.12.1", features = [ "image","svg","canvas","qr_code","advanced","tokio","highlighter"] }
+tokio = {version = "1.39.3",features = ["fs"]}
+rust-format = "0.3.4"
diff --git a/src/main.rs b/src/main.rs
index b9efce5..6ee558b 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,12 +1,18 @@
+mod types;
+
 use iced::{
-    executor, theme,
+    executor,
+    highlighter::{self, Highlighter},
+    theme,
     widget::{
         button, column, container,
         pane_grid::{self, Pane, PaneGrid},
-        row, text, Column,
+        row, text, text_editor, Column,
     },
-    Alignment, Application, Color, Command, Element, Length, Settings,
+    Alignment, Application, Color, Command, Element, Font, Length, Settings,
 };
+use rust_format::{Formatter, RustFmt};
+use types::{DesignerPage, DesignerState};
 
 fn main() -> iced::Result {
     App::run(Settings::default())
@@ -15,22 +21,24 @@ fn main() -> iced::Result {
 struct App {
     is_saved: bool,
     current_project: Option<String>,
-    theme: theme::Theme,
-    panes: pane_grid::State<Panes>,
+    dark_theme: bool,
+    pane_state: pane_grid::State<Panes>,
     focus: Option<Pane>,
+    designer_state: DesignerState,
     element_list: Vec<String>,
+    editor_content: text_editor::Content,
 }
 
 #[derive(Debug, Clone)]
 enum Message {
-    ToggleTheme(theme::Theme),
-    Dragged(pane_grid::DragEvent),
+    ToggleTheme,
     Resized(pane_grid::ResizeEvent),
+    Clicked(pane_grid::Pane),
 }
 
 #[derive(Clone, Debug)]
 enum Panes {
-    Preview,
+    Designer,
     ElementList,
 }
 
@@ -41,19 +49,28 @@ impl Application for App {
     type Flags = ();
 
     fn new(_flags: ()) -> (Self, Command<Message>) {
-        let (mut panes, pane) = pane_grid::State::new(Panes::Preview);
-        panes.split(pane_grid::Axis::Vertical, pane, Panes::ElementList);
+        let state = pane_grid::State::with_configuration(pane_grid::Configuration::Split {
+            axis: pane_grid::Axis::Vertical,
+            ratio: 0.8,
+            a: Box::new(pane_grid::Configuration::Pane(Panes::Designer)),
+            b: Box::new(pane_grid::Configuration::Pane(Panes::ElementList)),
+        });
         (
             Self {
                 is_saved: true,
                 current_project: None,
-                theme: theme::Theme::TokyoNight,
-                panes,
+                dark_theme: true,
+                pane_state: state,
                 focus: None,
+                designer_state: DesignerState {
+                    designer_content: vec![],
+                    designer_page: DesignerPage::Designer,
+                },
                 element_list: vec!["Column", "Row", "PickList", "PaneGrid", "Button", "Text"]
                     .into_iter()
                     .map(|c| c.to_owned())
                     .collect(),
+                editor_content: text_editor::Content::new(),
             },
             Command::none(),
         )
@@ -71,18 +88,21 @@ impl Application for App {
     }
 
     fn theme(&self) -> iced::Theme {
-        self.theme.clone()
+        if self.dark_theme {
+            theme::Theme::CatppuccinMocha
+        } else {
+            theme::Theme::CatppuccinLatte
+        }
     }
 
     fn update(&mut self, message: Message) -> Command<Message> {
         match message {
-            Message::ToggleTheme(theme) => self.theme = theme,
-            Message::Dragged(pane_grid::DragEvent::Dropped { pane, target }) => {
-                self.panes.drop(pane, target);
-            }
-            Message::Dragged(_) => {}
+            Message::ToggleTheme => self.dark_theme = !self.dark_theme,
             Message::Resized(pane_grid::ResizeEvent { split, ratio }) => {
-                self.panes.resize(split, ratio);
+                self.pane_state.resize(split, ratio);
+            }
+            Message::Clicked(pane) => {
+                self.focus = Some(pane);
             }
         }
 
@@ -90,32 +110,26 @@ impl Application for App {
     }
 
     fn view(&self) -> Element<Message> {
-        let header: Element<_> = row![button("Toggle Theme")
+        let header = row![button("Toggle Theme")
             .on_press(Message::ToggleTheme)
             .padding(5)]
-        .width(200)
-        .into();
-        let pane_grid = PaneGrid::new(&self.panes, |id, pane, _is_maximized| {
+        .width(200);
+        let pane_grid = PaneGrid::new(&self.pane_state, |id, pane, _is_maximized| {
             let is_focused = Some(id) == self.focus;
             match pane {
-                Panes::Preview => {
-                    let content = column![text("Preview")]
+                Panes::Designer => {
+                    let content = column![text("Designer")]
                         .align_items(Alignment::Center)
                         .height(Length::Fill)
                         .width(Length::Fill);
-                    let title = text("App Preview").style(if is_focused {
+                    let title = text("Designer").style(if is_focused {
                         PANE_ID_COLOR_FOCUSED
                     } else {
                         PANE_ID_COLOR_UNFOCUSED
                     });
-                    let title_bar =
-                        pane_grid::TitleBar::new(title)
-                            .padding(10)
-                            .style(if is_focused {
-                                style::title_bar_focused
-                            } else {
-                                style::title_bar_active
-                            });
+                    let title_bar = pane_grid::TitleBar::new(title)
+                        .padding(10)
+                        .style(style::title_bar);
                     pane_grid::Content::new(content)
                         .title_bar(title_bar)
                         .style(if is_focused {
@@ -135,14 +149,9 @@ impl Application for App {
                     } else {
                         PANE_ID_COLOR_UNFOCUSED
                     });
-                    let title_bar =
-                        pane_grid::TitleBar::new(title)
-                            .padding(10)
-                            .style(if is_focused {
-                                style::title_bar_focused
-                            } else {
-                                style::title_bar_active
-                            });
+                    let title_bar = pane_grid::TitleBar::new(title)
+                        .padding(10)
+                        .style(style::title_bar);
                     pane_grid::Content::new(content)
                         .title_bar(title_bar)
                         .style(if is_focused {
@@ -150,39 +159,69 @@ impl Application for App {
                         } else {
                             style::pane_active
                         })
-                }
+                } //Panes::CodeView => {
+                  //    let title = text("Generated Code").style(if is_focused {
+                  //        PANE_ID_COLOR_FOCUSED
+                  //    } else {
+                  //        PANE_ID_COLOR_UNFOCUSED
+                  //    });
+                  //    let title_bar =
+                  //        pane_grid::TitleBar::new(title)
+                  //            .padding(10)
+                  //            .style(if is_focused {
+                  //                style::title_bar_focused
+                  //            } else {
+                  //                style::title_bar_active
+                  //            });
+                  //    pane_grid::Content::new(
+                  //        text_editor(&self.editor_content).highlight::<Highlighter>(
+                  //            highlighter::Settings {
+                  //                theme: highlighter::Theme::Base16Mocha,
+                  //                extension: "rs".to_string(),
+                  //            },
+                  //            |highlight, _theme| highlight.to_format(),
+                  //        ),
+                  //    )
+                  //    .title_bar(title_bar)
+                  //    .style(if is_focused {
+                  //        style::pane_focused
+                  //    } else {
+                  //        style::pane_active
+                  //    })
+                  //}
             }
         })
         .width(Length::Fill)
         .height(Length::Fill)
         .spacing(10)
-        .on_drag(Message::Dragged)
-        .on_resize(10, Message::Resized);
-        //
-        //let content = Column::new()
-        //    .push(header)
-        //    .push(pane_grid)
-        //    .spacing(5)
-        //    .align_items(Alignment::Center)
-        //    .width(Length::Fill);
-
-        container(pane_grid).height(Length::Fill).into()
+        .on_resize(10, Message::Resized)
+        .on_click(Message::Clicked);
+
+        let content = Column::new()
+            .push(header)
+            .push(pane_grid)
+            .spacing(5)
+            .align_items(Alignment::Center)
+            .width(Length::Fill);
+
+        container(content).height(Length::Fill).into()
+    }
+}
+
+const fn from_grayscale(grayscale: f32) -> Color {
+    Color {
+        r: grayscale,
+        g: grayscale,
+        b: grayscale,
+        a: 1.0,
     }
 }
 
-// #fefefe
-const PANE_ID_COLOR_UNFOCUSED: Color = Color::from_rgb(
-    0xFE as f32 / 255.0,
-    0xFE as f32 / 255.0,
-    0xFE as f32 / 255.0,
-);
+// #ffffff
+const PANE_ID_COLOR_FOCUSED: Color = from_grayscale(1.0);
 
-// #bbbbbb
-const PANE_ID_COLOR_FOCUSED: Color = Color::from_rgb(
-    0xBB as f32 / 255.0,
-    0xBB as f32 / 255.0,
-    0xBB as f32 / 255.0,
-);
+// #e8e8e8
+const PANE_ID_COLOR_UNFOCUSED: Color = from_grayscale(0xE8 as f32 / 255.0);
 
 fn items_list_view(items: &Vec<String>) -> Element<'static, Message> {
     let mut column = Column::new()
@@ -201,7 +240,7 @@ mod style {
     use iced::widget::container;
     use iced::{Border, Theme};
 
-    pub fn title_bar_active(theme: &Theme) -> container::Appearance {
+    pub fn title_bar(theme: &Theme) -> container::Appearance {
         let palette = theme.extended_palette();
 
         container::Appearance {
@@ -211,23 +250,13 @@ mod style {
         }
     }
 
-    pub fn title_bar_focused(theme: &Theme) -> container::Appearance {
-        let palette = theme.extended_palette();
-
-        container::Appearance {
-            text_color: Some(palette.primary.strong.text),
-            background: Some(palette.primary.strong.color.into()),
-            ..Default::default()
-        }
-    }
-
     pub fn pane_active(theme: &Theme) -> container::Appearance {
         let palette = theme.extended_palette();
 
         container::Appearance {
             background: Some(palette.background.weak.color.into()),
             border: Border {
-                width: 2.0,
+                width: 1.0,
                 color: palette.background.strong.color,
                 ..Border::default()
             },
@@ -241,8 +270,8 @@ mod style {
         container::Appearance {
             background: Some(palette.background.weak.color.into()),
             border: Border {
-                width: 2.0,
-                color: palette.primary.strong.color,
+                width: 4.0,
+                color: palette.background.strong.color,
                 ..Border::default()
             },
             ..Default::default()
diff --git a/src/types/mod.rs b/src/types/mod.rs
new file mode 100644
index 0000000..69df615
--- /dev/null
+++ b/src/types/mod.rs
@@ -0,0 +1,28 @@
+use iced::{Font, Length};
+
+pub struct DesignerState {
+    pub designer_content: Vec<RenderedElement>,
+    pub designer_page: DesignerPage,
+}
+
+pub struct RenderedElement {
+    pub id: String,
+    pub children: Vec<RenderedElement>,
+    pub name: ElementName,
+    pub props: Vec<Prop>,
+}
+
+pub enum ElementName {}
+
+pub enum Prop {
+    String(String, String),
+    Decimal(String, i32),
+    Float(String, f32),
+    Font(String, Font),
+    Length(String, Length),
+}
+
+pub enum DesignerPage {
+    Designer,
+    CodeView,
+}