From c5ceb51ec404cd391ca47de65d7c6a99bfcd436e Mon Sep 17 00:00:00 2001
From: Fred Clausen <43556888+fredclausen@users.noreply.github.com>
Date: Tue, 21 May 2024 18:06:33 -0600
Subject: [PATCH 1/9] readme

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 589934b..3015829 100644
--- a/README.md
+++ b/README.md
@@ -32,6 +32,7 @@ Sorry, there is no migration path from ACARS Hub to SDR-E Hub. The data that ACA
   - [x] GitHub CI
   - [ ] FIXME/TODO Cleanup
   - [ ] Code documentation
+  - [ ] Unit Tests
 - [ ] Alpha 2
   - [ ] Connect to data providers
     - [ ] ADSB
@@ -43,6 +44,7 @@ Sorry, there is no migration path from ACARS Hub to SDR-E Hub. The data that ACA
   - [ ] Display data on the web interface
   - [ ] FIXME/TODO Cleanup
   - [ ] Code documentation
+  - [ ] Unit Tests
 - [ ] Alpha 3
   - [ ] Implement database storage
     - [ ] RRD style data storage for relevant stats
@@ -50,10 +52,12 @@ Sorry, there is no migration path from ACARS Hub to SDR-E Hub. The data that ACA
     - [ ] General stats
   - [ ] FIXME/TODO Cleanup
   - [ ] Code documentation
+  - [ ] Unit Tests
 - [ ] Beta 1
   - [ ] Focus on interface; clean it up, mobile functionality, etc
   - [ ] FIXME/TODO Cleanup
   - [ ] Code documentation
+  - [ ] Unit Tests
 
 ## Thank you
 

From 3e5bc904b79b7625d614eb03e07c6a87fafa1ee2 Mon Sep 17 00:00:00 2001
From: Fred Clausen <43556888+fredclausen@users.noreply.github.com>
Date: Wed, 22 May 2024 11:52:12 -0600
Subject: [PATCH 2/9] some css styling and related setup for settings

fix padding based on what is displayed in the panels
---
 sh-frontend/src/app/live.rs                   | 17 +++-
 sh-frontend/src/components/mod.rs             |  1 +
 .../src/components/setting_components/mod.rs  |  9 ++
 .../setting_components/sh_app_config.rs       | 25 ++++++
 .../setting_components/sh_data_sources.rs     | 25 ++++++
 .../sh_enabled_data_sources.rs                | 25 ++++++
 .../components/setting_components/sh_map.rs   | 25 ++++++
 sh-frontend/src/components/settings.rs        | 13 ++-
 sh-frontend/tailwind.css                      | 83 ++++++++++++++++++-
 9 files changed, 216 insertions(+), 7 deletions(-)
 create mode 100644 sh-frontend/src/components/setting_components/mod.rs
 create mode 100644 sh-frontend/src/components/setting_components/sh_app_config.rs
 create mode 100644 sh-frontend/src/components/setting_components/sh_data_sources.rs
 create mode 100644 sh-frontend/src/components/setting_components/sh_enabled_data_sources.rs
 create mode 100644 sh-frontend/src/components/setting_components/sh_map.rs

diff --git a/sh-frontend/src/app/live.rs b/sh-frontend/src/app/live.rs
index 89502f1..d778709 100644
--- a/sh-frontend/src/app/live.rs
+++ b/sh-frontend/src/app/live.rs
@@ -111,12 +111,25 @@ pub fn live() -> Html {
         }
     });
 
+    // FIXME: This feels garbage and yuck. Ideally we use tailwind classes and dynamically set them?
+    let pad_inside_left = if *left_panel == Panels::Map {
+        "padding: 0px;"
+    } else {
+        "padding: 0.5rem;"
+    };
+
+    let pad_inside_right = if *right_panel == Panels::Map {
+        "padding: 0px;"
+    } else {
+        "padding: 0.5rem;"
+    };
+
     html! {
         <div class="content flex w-full h-full">
-            <div class="content p-2 m-0 mt-1 md:w-96 h-full w-full rounded-2xl border-[#8963ba] border-4" id="live-left">
+            <div class="content m-0 mt-1 md:w-96 h-full w-full rounded-2xl border-[#8963ba] border-4 overflow-hidden" style={pad_inside_left} id="live-left">
                 { left_panel_show.clone() }
              </div>
-            <div class="content m-0 mt-1 ml-2 h-full w-full rounded-2xl border-[#8963ba] border-4 hidden md:block" style="overflow:hidden" id="live-right" ref={node}>
+            <div class="content m-0 mt-1 ml-2 h-full w-full rounded-2xl border-[#8963ba] border-4 hidden md:block overflow-hidden" style={pad_inside_right} id="live-right" ref={node}>
                 if visible {
                     { right_panel_status.clone() }
                 }
diff --git a/sh-frontend/src/components/mod.rs b/sh-frontend/src/components/mod.rs
index fec5496..272ab16 100644
--- a/sh-frontend/src/components/mod.rs
+++ b/sh-frontend/src/components/mod.rs
@@ -10,5 +10,6 @@ pub mod map;
 pub mod map_display;
 pub mod nav;
 pub mod search;
+pub mod setting_components;
 pub mod settings;
 pub mod stats;
diff --git a/sh-frontend/src/components/setting_components/mod.rs b/sh-frontend/src/components/setting_components/mod.rs
new file mode 100644
index 0000000..53c0f7e
--- /dev/null
+++ b/sh-frontend/src/components/setting_components/mod.rs
@@ -0,0 +1,9 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+pub mod sh_app_config;
+pub mod sh_data_sources;
+pub mod sh_enabled_data_sources;
+pub mod sh_map;
diff --git a/sh-frontend/src/components/setting_components/sh_app_config.rs b/sh-frontend/src/components/setting_components/sh_app_config.rs
new file mode 100644
index 0000000..b57dd19
--- /dev/null
+++ b/sh-frontend/src/components/setting_components/sh_app_config.rs
@@ -0,0 +1,25 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+use yew::prelude::*;
+
+#[function_component(ShAppConfig)]
+pub fn sh_app_config() -> Html {
+    html! {
+        <>
+        <input id="collapsible_app_config" class="toggle" type="checkbox" />
+        <label for="collapsible_app_config" class="lbl-toggle">{"SDR-E Hub Configuration"}</label>
+        <div class="collapsible-content">
+          <div class="content-inner">
+            <p>
+              {"QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with
+              its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without
+              plug-ins. Test-Driven Development."}
+            </p>
+          </div>
+        </div>
+        </>
+    }
+}
diff --git a/sh-frontend/src/components/setting_components/sh_data_sources.rs b/sh-frontend/src/components/setting_components/sh_data_sources.rs
new file mode 100644
index 0000000..e186a6e
--- /dev/null
+++ b/sh-frontend/src/components/setting_components/sh_data_sources.rs
@@ -0,0 +1,25 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+use yew::prelude::*;
+
+#[function_component(ShDataSourcesConfig)]
+pub fn sh_data_sources_config() -> Html {
+    html! {
+        <>
+        <input id="collapsible_data_sources" class="toggle" type="checkbox" />
+        <label for="collapsible_data_sources" class="lbl-toggle">{"Data Sources"}</label>
+        <div class="collapsible-content">
+          <div class="content-inner">
+            <p>
+              {"QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with
+              its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without
+              plug-ins. Test-Driven Development."}
+            </p>
+          </div>
+        </div>
+        </>
+    }
+}
diff --git a/sh-frontend/src/components/setting_components/sh_enabled_data_sources.rs b/sh-frontend/src/components/setting_components/sh_enabled_data_sources.rs
new file mode 100644
index 0000000..756d7bc
--- /dev/null
+++ b/sh-frontend/src/components/setting_components/sh_enabled_data_sources.rs
@@ -0,0 +1,25 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+use yew::prelude::*;
+
+#[function_component(ShEnabledDataSourcesConfig)]
+pub fn sh_enabled_data_sources_config() -> Html {
+    html! {
+        <>
+        <input id="collapsible_enabled_data_sources" class="toggle" type="checkbox" />
+        <label for="collapsible_enabled_data_sources" class="lbl-toggle">{"Enabled Data Sources"}</label>
+        <div class="collapsible-content">
+          <div class="content-inner">
+            <p>
+              {"QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with
+              its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without
+              plug-ins. Test-Driven Development."}
+            </p>
+          </div>
+        </div>
+        </>
+    }
+}
diff --git a/sh-frontend/src/components/setting_components/sh_map.rs b/sh-frontend/src/components/setting_components/sh_map.rs
new file mode 100644
index 0000000..1cf85b4
--- /dev/null
+++ b/sh-frontend/src/components/setting_components/sh_map.rs
@@ -0,0 +1,25 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+use yew::prelude::*;
+
+#[function_component(ShMapConfig)]
+pub fn sh_map_config() -> Html {
+    html! {
+        <>
+        <input id="collapsible_map_config" class="toggle" type="checkbox" />
+        <label for="collapsible_map_config" class="lbl-toggle">{"Map Configuration"}</label>
+        <div class="collapsible-content">
+          <div class="content-inner">
+            <p>
+              {"QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with
+              its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without
+              plug-ins. Test-Driven Development."}
+            </p>
+          </div>
+        </div>
+        </>
+    }
+}
diff --git a/sh-frontend/src/components/settings.rs b/sh-frontend/src/components/settings.rs
index 3f107ab..e59d6a3 100644
--- a/sh-frontend/src/components/settings.rs
+++ b/sh-frontend/src/components/settings.rs
@@ -3,14 +3,21 @@
 // license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
+use crate::components::setting_components::{
+    sh_app_config::ShAppConfig, sh_data_sources::ShDataSourcesConfig,
+    sh_enabled_data_sources::ShEnabledDataSourcesConfig, sh_map::ShMapConfig,
+};
 use yew::prelude::*;
 
 /// Home page
 #[function_component(ShSettings)]
 pub fn settings() -> Html {
     html! {
-        {
-            "Settings"
-        }
+        <>
+            <ShAppConfig />
+            <ShEnabledDataSourcesConfig />
+            <ShDataSourcesConfig />
+            <ShMapConfig />
+        </>
     }
 }
diff --git a/sh-frontend/tailwind.css b/sh-frontend/tailwind.css
index 8cab95e..07a7819 100644
--- a/sh-frontend/tailwind.css
+++ b/sh-frontend/tailwind.css
@@ -7,6 +7,8 @@ h2 {
   text-align: center;
 }
 
+/* Navbar styling and animation */
+
 .top-nav {
   display: flex;
   flex-direction: row;
@@ -52,11 +54,17 @@ h2 {
   display: none;
 }
 
+.menu-button:hover,
+.menu-button:hover::before,
+.menu-button:hover::after {
+  background-color: #73a942;
+}
+
 .menu-button,
 .menu-button::before,
 .menu-button::after {
   display: block;
-  background-color: #fff;
+  background-color: #fdfdff;
   position: absolute;
   height: 4px;
   width: 30px;
@@ -156,7 +164,7 @@ h2 {
   padding: 0.5em 0;
   min-width: 200px;
   max-width: 767px;
-  color: white;
+  color: #fdfdff;
   background-color: #222;
   justify-content: left;
 }
@@ -188,3 +196,74 @@ h2 {
   height: 100%;
   z-index: 1;
 }
+
+/* Settings (and more?) collapsable styling */
+
+.wrap-collabsible {
+  margin-bottom: 1.2rem 0;
+}
+
+input[type="checkbox"] {
+  display: none;
+}
+
+.lbl-toggle {
+  display: block;
+  text-transform: uppercase;
+  padding: 0.5rem;
+  margin-top: 0.25rem;
+  color: #fdfdff;
+  background-color: #8963ba;
+  background: linear-gradient(to left, #8963ba, #3c2f66);
+  cursor: pointer;
+  border-radius: 1.5rem;
+  transition: all 0.25s ease-out;
+}
+
+.lbl-toggle:hover {
+  color: #73a942;
+}
+
+.lbl-toggle::before {
+  content: " ";
+  display: inline-block;
+
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid currentColor;
+  vertical-align: middle;
+  margin-right: 0.7rem;
+  transform: translateY(-2px);
+
+  transition: transform 0.2s ease-out;
+}
+
+.toggle:checked + .lbl-toggle::before {
+  transform: rotate(90deg) translateX(-3px);
+}
+
+.collapsible-content {
+  max-height: 0px;
+  overflow: hidden;
+  transition: max-height 0.25s ease-in-out;
+}
+
+.toggle:checked + .lbl-toggle + .collapsible-content {
+  max-height: 100vh;
+}
+
+.toggle:checked + .lbl-toggle {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.collapsible-content .content-inner {
+  background: #101110;
+  /* FIXME: this should be a gradient that matches the element above */
+  border-bottom: 2px solid #8963ba;
+  border-left: 2px solid #8963ba;
+  border-right: 2px solid #8963ba;
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+  padding: 0.5rem;
+}

From 0eb54205de797ee2f28f467e77cde56ce77205c2 Mon Sep 17 00:00:00 2001
From: Fred Clausen <43556888+fredclausen@users.noreply.github.com>
Date: Thu, 23 May 2024 09:49:15 -0600
Subject: [PATCH 3/9] wip

---
 .../src/components/input/input_field.rs       | 43 ++++++++++++++++++
 sh-frontend/src/components/input/mod.rs       |  6 +++
 sh-frontend/src/components/mod.rs             |  1 +
 .../setting_components/sh_app_config.rs       | 44 ++++++++++++++++---
 sh-frontend/src/components/settings.rs        | 10 +++--
 sh-frontend/tailwind.css                      | 23 ++++++++++
 6 files changed, 118 insertions(+), 9 deletions(-)
 create mode 100644 sh-frontend/src/components/input/input_field.rs
 create mode 100644 sh-frontend/src/components/input/mod.rs

diff --git a/sh-frontend/src/components/input/input_field.rs b/sh-frontend/src/components/input/input_field.rs
new file mode 100644
index 0000000..df9de9d
--- /dev/null
+++ b/sh-frontend/src/components/input/input_field.rs
@@ -0,0 +1,43 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+use yew::prelude::*;
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct InputFieldProps {
+    pub input_value: String,
+    // pub on_cautious_change: Callback<ChangeData>,
+    pub label: String,
+    pub field_type: String,
+    pub name: String,
+    pub input_node_ref: NodeRef,
+}
+
+#[function_component(InputField)]
+pub fn input_field(props: &InputFieldProps) -> Html {
+    let InputFieldProps {
+        input_value,
+        // on_cautious_change,
+        label,
+        field_type,
+        name,
+        input_node_ref,
+    } = props;
+
+    log::debug!("InputField: {:?}", input_value);
+    html! {
+        <label for="cautious-input">
+                { label }
+                <input
+                    /* onchange={on_cautious_change} */
+                    type={field_type.clone()}
+                    value={input_value.clone()}
+                    name={name.clone()}
+                    ref={input_node_ref.clone()}
+                    class="text-black"
+                />
+        </label>
+    }
+}
\ No newline at end of file
diff --git a/sh-frontend/src/components/input/mod.rs b/sh-frontend/src/components/input/mod.rs
new file mode 100644
index 0000000..4e99455
--- /dev/null
+++ b/sh-frontend/src/components/input/mod.rs
@@ -0,0 +1,6 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+pub mod input_field;
\ No newline at end of file
diff --git a/sh-frontend/src/components/mod.rs b/sh-frontend/src/components/mod.rs
index 272ab16..313aaab 100644
--- a/sh-frontend/src/components/mod.rs
+++ b/sh-frontend/src/components/mod.rs
@@ -13,3 +13,4 @@ pub mod search;
 pub mod setting_components;
 pub mod settings;
 pub mod stats;
+pub mod input;
\ No newline at end of file
diff --git a/sh-frontend/src/components/setting_components/sh_app_config.rs b/sh-frontend/src/components/setting_components/sh_app_config.rs
index b57dd19..68e0413 100644
--- a/sh-frontend/src/components/setting_components/sh_app_config.rs
+++ b/sh-frontend/src/components/setting_components/sh_app_config.rs
@@ -3,21 +3,55 @@
 // license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
+
+use std::rc::Rc;
+
+use sh_config::web::sh_web_config::ShWebConfig;
 use yew::prelude::*;
+use yewdux::prelude::*;
+use crate::services::temp_state::WebAppStateTemp;
+use crate::components::input::input_field::InputField;
 
 #[function_component(ShAppConfig)]
 pub fn sh_app_config() -> Html {
+    let (state, dispatch) = use_store::<WebAppStateTemp>();
+
+    let config = use_selector(|state: &WebAppStateTemp | state.config.clone());
+
+    let database_url_node = use_node_ref();
+
+    let onsubmit = {
+            Callback::from(move |event: SubmitEvent| {
+            event.prevent_default();
+            log::debug!("Saving config");
+        })
+    };
+
     html! {
         <>
         <input id="collapsible_app_config" class="toggle" type="checkbox" />
         <label for="collapsible_app_config" class="lbl-toggle">{"SDR-E Hub Configuration"}</label>
         <div class="collapsible-content">
           <div class="content-inner">
-            <p>
-              {"QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with
-              its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without
-              plug-ins. Test-Driven Development."}
-            </p>
+                {
+                    if let Some(config) = config.as_ref() {
+                        log::debug!("Config: {:?}", config);
+                        let app = config.app.clone();
+                        log::debug!("App: {:?}", app);
+                        let database_url: String = app.database_url.clone();
+                        html! {
+                            <form onsubmit={onsubmit} class="registration-form">
+                                <InputField input_node_ref={database_url_node} label={"Database URL"} name={"databaseurl"} field_type={"text"} input_value={database_url} />
+                                <button type="submit" class="button">{"Update Configuration"}</button>
+                            </form>
+                        }
+                    } else {
+                        html!{ "Still loading!" }
+                    }
+                    // let config = Rc::<std::option::Option<ShWebConfig>>::get_mut(&mut config).unwrap().as_ref().unwrap();
+                    // let app = config.app.clone();
+                    // let database_url: String = app.database_url.clone();
+                }
           </div>
         </div>
         </>
diff --git a/sh-frontend/src/components/settings.rs b/sh-frontend/src/components/settings.rs
index e59d6a3..c340833 100644
--- a/sh-frontend/src/components/settings.rs
+++ b/sh-frontend/src/components/settings.rs
@@ -14,10 +14,12 @@ use yew::prelude::*;
 pub fn settings() -> Html {
     html! {
         <>
-            <ShAppConfig />
-            <ShEnabledDataSourcesConfig />
-            <ShDataSourcesConfig />
-            <ShMapConfig />
+            <div class="settings">
+                <ShAppConfig />
+                <ShEnabledDataSourcesConfig />
+                <ShDataSourcesConfig />
+                <ShMapConfig />
+            </div>
         </>
     }
 }
diff --git a/sh-frontend/tailwind.css b/sh-frontend/tailwind.css
index 07a7819..11d9fde 100644
--- a/sh-frontend/tailwind.css
+++ b/sh-frontend/tailwind.css
@@ -267,3 +267,26 @@ input[type="checkbox"] {
   border-bottom-right-radius: 1.5rem;
   padding: 0.5rem;
 }
+
+/* Input Classes */
+
+.button {
+  border: none;
+  padding: 0.3rem;
+  border-radius: 1.5rem;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  background-color: #73a942;
+}
+
+.button::hover {
+  cursor: pointer;
+}
+
+.settings {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  /* justify-content: center; */
+  height: 100%;
+}

From 1d627265bebc64d4d16e7a3e999526dcf1fa1807 Mon Sep 17 00:00:00 2001
From: Fred Clausen <43556888+fredclausen@users.noreply.github.com>
Date: Thu, 23 May 2024 09:50:37 -0600
Subject: [PATCH 4/9] update cargo

---
 Cargo.lock                  | 13 +++++++------
 src/bin/sh-tauri/Cargo.toml |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 2fc1f0a..0575c1f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -4016,9 +4016,9 @@ checksum = "e1fc403891a21bcfb7c37834ba66a547a8f402146eba7265b5a6d88059c9ff2f"
 
 [[package]]
 name = "tauri"
-version = "1.6.6"
+version = "1.6.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f3f99c42ed6e39885ad1bb14317b0379bc99aad7ffe20db517cd761267b30343"
+checksum = "67c7177b6be45bbb875aa239578f5adc982a1b3d5ea5b315ccd100aeb0043374"
 dependencies = [
  "anyhow",
  "bytes",
@@ -4029,6 +4029,7 @@ dependencies = [
  "encoding_rs",
  "flate2",
  "futures-util",
+ "getrandom 0.2.14",
  "glib",
  "glob",
  "gtk",
@@ -4154,9 +4155,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-runtime-wry"
-version = "0.14.7"
+version = "0.14.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ef2af45aeb15b1cadb4ca91248423f4438a0864b836298cecb436892afbfdff4"
+checksum = "1989b3b4d611f5428b3414a4abae6fa6df30c7eb8ed33250ca90a5f7e5bb3655"
 dependencies = [
  "arboard",
  "cocoa",
@@ -5560,9 +5561,9 @@ dependencies = [
 
 [[package]]
 name = "wry"
-version = "0.24.8"
+version = "0.24.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a04e72739ee84a218e3dbf8625888eadc874285637003ed21ab96a1bbbb538ec"
+checksum = "00711278ed357350d44c749c286786ecac644e044e4da410d466212152383b45"
 dependencies = [
  "base64 0.13.1",
  "block",
diff --git a/src/bin/sh-tauri/Cargo.toml b/src/bin/sh-tauri/Cargo.toml
index ee32dba..1e7142a 100644
--- a/src/bin/sh-tauri/Cargo.toml
+++ b/src/bin/sh-tauri/Cargo.toml
@@ -23,7 +23,7 @@ serde_json = "1.0.117"
 serde = { version = "1.0.202", features = ["derive"] }
 sdrehub = { path = "../../libraries/sdrehub" }
 sh-config = { path = "../../libraries/sh-config" }
-tauri = { version = "1.6.6", features = ["api-all"] }
+tauri = { version = "1.6.7", features = ["api-all"] }
 tokio = { version = "1.37.0", features = ["full", "tracing"] }
 
 [features]

From e0dc4792cdf1ad4e1b9088ea023c1ee2a14d40a1 Mon Sep 17 00:00:00 2001
From: Fred Clausen <43556888+fredclausen@users.noreply.github.com>
Date: Sun, 26 May 2024 01:16:40 -0600
Subject: [PATCH 5/9] wip

---
 sh-frontend/src/components/input/input_field.rs        |  2 +-
 .../src/components/setting_components/sh_app_config.rs | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/sh-frontend/src/components/input/input_field.rs b/sh-frontend/src/components/input/input_field.rs
index df9de9d..337cd0f 100644
--- a/sh-frontend/src/components/input/input_field.rs
+++ b/sh-frontend/src/components/input/input_field.rs
@@ -28,7 +28,7 @@ pub fn input_field(props: &InputFieldProps) -> Html {
 
     log::debug!("InputField: {:?}", input_value);
     html! {
-        <label for="cautious-input">
+        <label for={name.clone()}>
                 { label }
                 <input
                     /* onchange={on_cautious_change} */
diff --git a/sh-frontend/src/components/setting_components/sh_app_config.rs b/sh-frontend/src/components/setting_components/sh_app_config.rs
index 68e0413..572dde2 100644
--- a/sh-frontend/src/components/setting_components/sh_app_config.rs
+++ b/sh-frontend/src/components/setting_components/sh_app_config.rs
@@ -19,6 +19,8 @@ pub fn sh_app_config() -> Html {
     let config = use_selector(|state: &WebAppStateTemp | state.config.clone());
 
     let database_url_node = use_node_ref();
+    let log_level_node = use_node_ref();
+    let data_path_node = use_node_ref();
 
     let onsubmit = {
             Callback::from(move |event: SubmitEvent| {
@@ -39,10 +41,14 @@ pub fn sh_app_config() -> Html {
                         let app = config.app.clone();
                         log::debug!("App: {:?}", app);
                         let database_url: String = app.database_url.clone();
+                        let log_level: String = app.log_level.clone();
+                        let data_path: String = app.data_path.clone();
                         html! {
                             <form onsubmit={onsubmit} class="registration-form">
-                                <InputField input_node_ref={database_url_node} label={"Database URL"} name={"databaseurl"} field_type={"text"} input_value={database_url} />
-                                <button type="submit" class="button">{"Update Configuration"}</button>
+                                <div><InputField input_node_ref={database_url_node} label={"Database URL"} name={"databaseurl"} field_type={"text"} input_value={database_url} /></div>
+                                <div><InputField input_node_ref={log_level_node} label={"Log Level"} name={"loglevel"} field_type={"text"} input_value={log_level} /></div>
+                                <div><InputField input_node_ref={data_path_node} label={"Data Path"} name={"datapath"} field_type={"text"} input_value={data_path} /></div>
+                                <div><button type="submit" class="button">{"Update Configuration"}</button></div>
                             </form>
                         }
                     } else {

From c66703808a1a18ba10ae1b2a0901e82b3144553e Mon Sep 17 00:00:00 2001
From: Fred Clausen <43556888+fredclausen@users.noreply.github.com>
Date: Sun, 26 May 2024 01:19:18 -0600
Subject: [PATCH 6/9] Update pre-commit-updates.yaml

---
 .github/workflows/pre-commit-updates.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/pre-commit-updates.yaml b/.github/workflows/pre-commit-updates.yaml
index 6252070..c92a984 100644
--- a/.github/workflows/pre-commit-updates.yaml
+++ b/.github/workflows/pre-commit-updates.yaml
@@ -21,3 +21,4 @@ jobs:
           body: Update pre-commit hooks
           labels: dependencies
           delete-branch: True
+          assignees: "fredclausen"

From b4cf33cac01601fb288749000dd96ba3d3c56f41 Mon Sep 17 00:00:00 2001
From: Fred Clausen <43556888+fredclausen@users.noreply.github.com>
Date: Sun, 26 May 2024 01:53:28 -0600
Subject: [PATCH 7/9] Work on settings

* Some backend work
* Add alert box...or the start of
* Reorganize file structure
---
 Cargo.lock                                    |   8 +-
 sh-frontend/Cargo.lock                        |  30 ++-
 sh-frontend/Cargo.toml                        |  10 +-
 sh-frontend/index.html                        |  66 +++---
 sh-frontend/src/app/mod.rs                    |   1 -
 sh-frontend/src/app/webapp.rs                 |  10 +-
 .../src/components/alerts/alert_error.rs      |  55 +++++
 sh-frontend/src/components/alerts/mod.rs      |   8 +
 .../components/footer_components/connected.rs |  24 ++
 .../src/components/footer_components/mod.rs   |   6 +
 .../src/components/input/input_field.rs       |  91 ++++++--
 sh-frontend/src/components/input/mod.rs       |   2 +-
 .../components/layout_components/footer.rs    |  17 ++
 .../layout_components}/live.rs                |  18 +-
 .../src/components/layout_components/mod.rs   |   8 +
 .../components/{ => layout_components}/nav.rs |   2 +-
 .../{ => map_components}/control.rs           |   2 +-
 .../{ => map_components}/map_display.rs       |   4 +-
 .../src/components/map_components/mod.rs      |   7 +
 sh-frontend/src/components/mod.rs             |  17 +-
 .../src/components/nav_components/mod.rs      |   6 +
 .../components/{ => nav_components}/search.rs |   0
 .../components/{ => pages}/acars_messages.rs  |   0
 .../src/components/{map.rs => pages/adsb.rs}  |   0
 .../src/components/{ => pages}/help.rs        |   0
 sh-frontend/src/components/pages/mod.rs       |  10 +
 .../src/components/{ => pages}/settings.rs    |   2 +-
 .../src/components/{ => pages}/stats.rs       |   0
 .../setting_components/sh_app_config.rs       | 217 ++++++++++++++++--
 sh-frontend/src/services/temp_state.rs        |   2 +
 sh-frontend/src/services/websocket.rs         |  19 ++
 sh-frontend/tailwind.css                      |  72 ++++++
 src/bin/sh-tauri/Cargo.toml                   |   2 +-
 src/libraries/sh-api/Cargo.toml               |   2 +-
 src/libraries/sh-api/src/lib.rs               |  18 ++
 src/libraries/sh-common/Cargo.toml            |   2 +-
 src/libraries/sh-common/src/lib.rs            |   4 +-
 src/libraries/sh-config/Cargo.toml            |   2 +-
 38 files changed, 626 insertions(+), 118 deletions(-)
 create mode 100644 sh-frontend/src/components/alerts/alert_error.rs
 create mode 100644 sh-frontend/src/components/alerts/mod.rs
 create mode 100644 sh-frontend/src/components/footer_components/connected.rs
 create mode 100644 sh-frontend/src/components/footer_components/mod.rs
 create mode 100644 sh-frontend/src/components/layout_components/footer.rs
 rename sh-frontend/src/{app => components/layout_components}/live.rs (87%)
 create mode 100644 sh-frontend/src/components/layout_components/mod.rs
 rename sh-frontend/src/components/{ => layout_components}/nav.rs (99%)
 rename sh-frontend/src/components/{ => map_components}/control.rs (97%)
 rename sh-frontend/src/components/{ => map_components}/map_display.rs (94%)
 create mode 100644 sh-frontend/src/components/map_components/mod.rs
 create mode 100644 sh-frontend/src/components/nav_components/mod.rs
 rename sh-frontend/src/components/{ => nav_components}/search.rs (100%)
 rename sh-frontend/src/components/{ => pages}/acars_messages.rs (100%)
 rename sh-frontend/src/components/{map.rs => pages/adsb.rs} (100%)
 rename sh-frontend/src/components/{ => pages}/help.rs (100%)
 create mode 100644 sh-frontend/src/components/pages/mod.rs
 rename sh-frontend/src/components/{ => pages}/settings.rs (88%)
 rename sh-frontend/src/components/{ => pages}/stats.rs (100%)

diff --git a/Cargo.lock b/Cargo.lock
index 0575c1f..e65e82f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3481,9 +3481,9 @@ dependencies = [
 
 [[package]]
 name = "serde"
-version = "1.0.202"
+version = "1.0.203"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "226b61a0d411b2ba5ff6d7f73a476ac4f8bb900373459cd00fab8512828ba395"
+checksum = "7253ab4de971e72fb7be983802300c30b5a7f0c2e56fab8abfc6a214307c0094"
 dependencies = [
  "serde_derive",
 ]
@@ -3501,9 +3501,9 @@ dependencies = [
 
 [[package]]
 name = "serde_derive"
-version = "1.0.202"
+version = "1.0.203"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6048858004bcff69094cd972ed40a32500f153bd3be9f716b2eed2e8217c4838"
+checksum = "500cbc0ebeb6f46627f50f3f5811ccf6bf00643be300b4c3eabc0ef55dc5b5ba"
 dependencies = [
  "proc-macro2",
  "quote",
diff --git a/sh-frontend/Cargo.lock b/sh-frontend/Cargo.lock
index 09f3b02..69ac98a 100644
--- a/sh-frontend/Cargo.lock
+++ b/sh-frontend/Cargo.lock
@@ -1034,9 +1034,9 @@ dependencies = [
 
 [[package]]
 name = "leaflet"
-version = "0.4.0"
+version = "0.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f1ca4f4ecc791314ac38d50a5af6dc6506977aa7c7f0231b1bfd66989a9c4be3"
+checksum = "365807eb9e73da9377d2e313e5863af3d64e02b770ec31972d76feda3a271d17"
 dependencies = [
  "js-sys",
  "paste",
@@ -1385,9 +1385,9 @@ dependencies = [
 
 [[package]]
 name = "serde"
-version = "1.0.202"
+version = "1.0.203"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "226b61a0d411b2ba5ff6d7f73a476ac4f8bb900373459cd00fab8512828ba395"
+checksum = "7253ab4de971e72fb7be983802300c30b5a7f0c2e56fab8abfc6a214307c0094"
 dependencies = [
  "serde_derive",
 ]
@@ -1427,9 +1427,9 @@ dependencies = [
 
 [[package]]
 name = "serde_derive"
-version = "1.0.202"
+version = "1.0.203"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6048858004bcff69094cd972ed40a32500f153bd3be9f716b2eed2e8217c4838"
+checksum = "500cbc0ebeb6f46627f50f3f5811ccf6bf00643be300b4c3eabc0ef55dc5b5ba"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1514,6 +1514,7 @@ dependencies = [
  "wasm-logger",
  "web-sys",
  "yew",
+ "yew-alert",
  "yew-hooks",
  "yew-router",
  "yew-websocket",
@@ -2070,13 +2071,24 @@ dependencies = [
  "yew-macro",
 ]
 
+[[package]]
+name = "yew-alert"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc4e321496da4fe631ad3985b2d89e35e1cb4a9ce276bbd89f64721ee630b078"
+dependencies = [
+ "gloo 0.11.0",
+ "web-sys",
+ "yew",
+]
+
 [[package]]
 name = "yew-hooks"
-version = "0.3.1"
+version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1b6f2fe60864adbcc36f1d51f748a186f56f99857c55521d4c9ec1c6e4a0d0a9"
+checksum = "cbe7d30ef9d9afb9be38b1b310c42d59963c6d1c950f0e0435b78b346b4b24bf"
 dependencies = [
- "gloo 0.10.0",
+ "gloo 0.11.0",
  "js-sys",
  "log",
  "serde",
diff --git a/sh-frontend/Cargo.toml b/sh-frontend/Cargo.toml
index 2afbf75..7fda0d3 100644
--- a/sh-frontend/Cargo.toml
+++ b/sh-frontend/Cargo.toml
@@ -43,17 +43,18 @@ anyhow = "1.0.86"
 futures = "0.3.30"
 gloo = "0.11.0"
 gloo-utils = "0.2.0"
-leaflet = "0.4.0"
+leaflet = "0.4.1"
 log = "0.4.21"
-serde = { version = "1.0.202", features = ["derive"] }
-serde_derive = "1.0.202"
+serde = { version = "1.0.203", features = ["derive"] }
+serde_derive = "1.0.203"
 serde_json = "1.0.117"
 reqwasm = "0.5.0"
 yew = { version = "0.21.0", features = ["csr"] }
+yew-alert = "0.1.0"
 yewdux = "0.10.0"
 yew-websocket = "1.21.0"
 yew-router = "0.18.0"
-yew-hooks = "0.3.1"
+yew-hooks = "0.3.2"
 wasm-bindgen = "0.2.92"
 wasm-bindgen-futures = "0.4.42"
 wasm-logger = "0.2.0"
@@ -63,6 +64,7 @@ web-sys = { version = "0.3.69", features = [
     "HtmlCollection",
     "KeyboardEvent",
     "EventTarget",
+    "HtmlFormElement",
 ] }
 
 sh-common = { path = "../src/libraries/sh-common" }
diff --git a/sh-frontend/index.html b/sh-frontend/index.html
index c362f1e..3759c40 100644
--- a/sh-frontend/index.html
+++ b/sh-frontend/index.html
@@ -1,39 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>SDR Enthusiasts Hub</title>
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/site.webmanifest" />
-    <link data-trunk rel="copy-file" href="public/favicon.ico" />
-    <link data-trunk rel="copy-file" href="public/favicon-32x32.png" />
-    <link data-trunk rel="copy-file" href="public/favicon-16x16.png" />
-    <link data-trunk rel="copy-file" href="public/apple-touch-icon.png" />
-    <link data-trunk rel="copy-file" href="public/site.webmanifest" />
-    <link data-trunk rel="copy-file" href="public/android-chrome-192x192.png" />
-    <link data-trunk rel="copy-file" href="public/android-chrome-512x512.png" />
-    <link data-trunk rel="copy-file" href="public/logo.svg" />
-    <link data-trunk rel="tailwind-css" href="tailwind.css" />
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
-      integrity="sha512-mD70nAW2ThLsWH0zif8JPbfraZ8hbCtjQ+5RU1m4+ztZq6/MymyZeB55pWsi4YAX+73yvcaJyk61mzfYMvtm9w=="
-      crossorigin=""
-    />
-    <script
-      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
-      integrity="sha512-Dqm3h1Y4qiHUjbhxTuBGQsza0Tfppn53SHlu/uj1f+RT+xfShfe7r6czRf5r2NmllO2aKx+tYJgoxboOkn1Scg=="
-      crossorigin=""
-    ></script>
-    <link data-trunk rel="rust" />
-    <base data-trunk-public-url />
-  </head>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>SDR Enthusiasts Hub</title>
 
-  <body
-    class="h-screen w-screen max-h-screen max-w-screen text-[#FDFDFF] bg-[#101110] p-3"
-  ></body>
-</html>
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+  <link rel="manifest" href="/site.webmanifest" />
+  <link data-trunk rel="copy-file" href="public/favicon.ico" />
+  <link data-trunk rel="copy-file" href="public/favicon-32x32.png" />
+  <link data-trunk rel="copy-file" href="public/favicon-16x16.png" />
+  <link data-trunk rel="copy-file" href="public/apple-touch-icon.png" />
+  <link data-trunk rel="copy-file" href="public/site.webmanifest" />
+  <link data-trunk rel="copy-file" href="public/android-chrome-192x192.png" />
+  <link data-trunk rel="copy-file" href="public/android-chrome-512x512.png" />
+  <link data-trunk rel="copy-file" href="public/logo.svg" />
+  <link data-trunk rel="tailwind-css" href="tailwind.css" />
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
+    integrity="sha512-mD70nAW2ThLsWH0zif8JPbfraZ8hbCtjQ+5RU1m4+ztZq6/MymyZeB55pWsi4YAX+73yvcaJyk61mzfYMvtm9w=="
+    crossorigin="" />
+  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
+    integrity="sha512-Dqm3h1Y4qiHUjbhxTuBGQsza0Tfppn53SHlu/uj1f+RT+xfShfe7r6czRf5r2NmllO2aKx+tYJgoxboOkn1Scg=="
+    crossorigin=""></script>
+  <link data-trunk rel="rust" />
+  <base data-trunk-public-url />
+</head>
+
+<body class="text-[#FDFDFF] bg-[#101110] p-3">
+</body>
+
+</html>
\ No newline at end of file
diff --git a/sh-frontend/src/app/mod.rs b/sh-frontend/src/app/mod.rs
index fd195dc..002f80c 100644
--- a/sh-frontend/src/app/mod.rs
+++ b/sh-frontend/src/app/mod.rs
@@ -3,5 +3,4 @@
 // license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
-pub mod live;
 pub mod webapp;
diff --git a/sh-frontend/src/app/webapp.rs b/sh-frontend/src/app/webapp.rs
index d5dac01..d5d18ab 100644
--- a/sh-frontend/src/app/webapp.rs
+++ b/sh-frontend/src/app/webapp.rs
@@ -3,8 +3,9 @@
 // license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
-use super::live::Live;
-use crate::components::nav::Nav;
+use crate::components::layout_components::footer::Footer;
+use crate::components::layout_components::live::Live;
+use crate::components::layout_components::nav::Nav;
 use crate::services::websocket::ShWebSocketComponent;
 use yew::prelude::*;
 
@@ -13,11 +14,12 @@ pub fn app() -> Html {
     html! {
         <>
         <ShWebSocketComponent />
-        <div class="flex flex-col h-full w-full max-h-full max-w-full">
+        <div class="flex flex-col h-full w-full max-h-full max-w-full overflow-hidden">
             <Nav />
-            <section class="container text-left p-0 mt-1 h-full w-full max-h-full max-w-full">
+            <section class="container flex text-left p-0 pb-1 mt-1 mb-1 h-full w-full max-h-full max-w-full overflow-hidden">
                 <Live />
             </section>
+            <Footer />
         </div>
         </>
     }
diff --git a/sh-frontend/src/components/alerts/alert_error.rs b/sh-frontend/src/components/alerts/alert_error.rs
new file mode 100644
index 0000000..3b6479f
--- /dev/null
+++ b/sh-frontend/src/components/alerts/alert_error.rs
@@ -0,0 +1,55 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+use yew::prelude::*;
+use yew_alert::Alert;
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct AlertErrorProps {
+    #[prop_or_default]
+    pub message: &'static str,
+    #[prop_or_default]
+    pub title: &'static str,
+    pub show_alert: UseStateHandle<bool>,
+    #[prop_or_default]
+    pub on_confirm: Callback<()>,
+    #[prop_or_default]
+    pub on_cancel: Callback<()>,
+}
+
+#[function_component(AlertError)]
+pub fn alert_error(props: &AlertErrorProps) -> Html {
+    let show_alert = props.show_alert.clone();
+    let on_confirm = props.on_confirm.clone();
+    let on_cancel = props.on_cancel.clone();
+    let title = props.title;
+    let message = props.message;
+    html! {
+        <Alert
+            message={message}
+            timeout={5000}
+            show_alert={show_alert}
+            title={title}
+            container_class={""}
+            cancel_button_class={"mt-2 mx-2 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 focus:outline-none focus:border-gray-700 focus:ring focus:ring-gray-200"}
+            confirm_button_class={"mt-2 mx-2 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:border-blue-700 focus:ring focus:ring-blue-200"}
+            icon_type={"error"}
+            position={"middle"}
+            alert_class={"text-center rounded-md shadow-lg bg-red-500 text-white border border-yellow-700 p-4"}
+            title_class={"text-black"}
+            message_class={"text-black"}
+            icon_class={"flex justify-center"}
+            confirm_button_text={"Dismiss"}
+            cancel_button_text={""}
+            show_confirm_button={true}
+            show_cancel_button={false}
+            show_close_button={false}
+            on_confirm={ on_confirm }
+            on_cancel={ on_cancel }
+            icon_color={"black"}
+            icon_width={"50"}
+            />
+    }
+}
diff --git a/sh-frontend/src/components/alerts/mod.rs b/sh-frontend/src/components/alerts/mod.rs
new file mode 100644
index 0000000..90e3dd9
--- /dev/null
+++ b/sh-frontend/src/components/alerts/mod.rs
@@ -0,0 +1,8 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+// https://github.com/next-rs/yew-alert
+
+pub mod alert_error;
diff --git a/sh-frontend/src/components/footer_components/connected.rs b/sh-frontend/src/components/footer_components/connected.rs
new file mode 100644
index 0000000..50da187
--- /dev/null
+++ b/sh-frontend/src/components/footer_components/connected.rs
@@ -0,0 +1,24 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+use crate::services::temp_state::WebAppStateTemp;
+use yew::prelude::*;
+use yewdux::prelude::*;
+
+#[function_component(Connected)]
+pub fn connected() -> Html {
+    let connected = use_selector(|state: &WebAppStateTemp| state.websocket_connected.clone());
+
+    html! {
+        <div class="m-2"> {
+            if *connected {
+                html!{<span class="text-[#73a942]">{"Connected"}</span>}
+            } else {
+                html!{<span class="text-red-600">{"Disconnected"}</span>}
+            }
+         }
+         </div>
+    }
+}
diff --git a/sh-frontend/src/components/footer_components/mod.rs b/sh-frontend/src/components/footer_components/mod.rs
new file mode 100644
index 0000000..4f2622c
--- /dev/null
+++ b/sh-frontend/src/components/footer_components/mod.rs
@@ -0,0 +1,6 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+pub mod connected;
diff --git a/sh-frontend/src/components/input/input_field.rs b/sh-frontend/src/components/input/input_field.rs
index 337cd0f..4f79097 100644
--- a/sh-frontend/src/components/input/input_field.rs
+++ b/sh-frontend/src/components/input/input_field.rs
@@ -5,14 +5,32 @@
 
 use yew::prelude::*;
 
+#[derive(Clone, PartialEq)]
+pub enum InputFieldType {
+    Text,
+    Select,
+}
+
+impl ToString for InputFieldType {
+    fn to_string(&self) -> String {
+        match self {
+            InputFieldType::Text => "text".to_string(),
+            InputFieldType::Select => "select".to_string(),
+        }
+    }
+}
+
 #[derive(Clone, PartialEq, Properties)]
 pub struct InputFieldProps {
     pub input_value: String,
     // pub on_cautious_change: Callback<ChangeData>,
     pub label: String,
-    pub field_type: String,
+    pub field_type: InputFieldType,
+    pub select_options: Option<Vec<String>>,
     pub name: String,
     pub input_node_ref: NodeRef,
+    #[prop_or(false)]
+    pub read_only: bool,
 }
 
 #[function_component(InputField)]
@@ -22,22 +40,69 @@ pub fn input_field(props: &InputFieldProps) -> Html {
         // on_cautious_change,
         label,
         field_type,
+        select_options,
         name,
         input_node_ref,
+        read_only,
     } = props;
 
     log::debug!("InputField: {:?}", input_value);
     html! {
-        <label for={name.clone()}>
-                { label }
-                <input
-                    /* onchange={on_cautious_change} */
-                    type={field_type.clone()}
-                    value={input_value.clone()}
-                    name={name.clone()}
-                    ref={input_node_ref.clone()}
-                    class="text-black"
-                />
-        </label>
+        <>
+        <div><label for={name.clone()}>
+        { label }</label></div>
+            <div>
+                {
+                    match field_type {
+                        InputFieldType::Text => {
+                            if select_options.is_some() {
+                                log::warn!("Select options were provided for a text field. Ignoring them.");
+                            }
+
+                            html! {
+                                <input
+                                    /* onchange={on_cautious_change} */
+                                    type={field_type.to_string()}
+                                    value={input_value.clone()}
+                                    name={name.clone()}
+                                    ref={input_node_ref.clone()}
+                                    class="text-black"
+                                    readonly={*read_only}
+                                />
+                            }
+                        },
+                        InputFieldType::Select => {
+                            if select_options.is_none() {
+                                log::error!("Select options must be provided for a select field");
+
+                                return html! {
+                                    { "Field type is select but no select options were provided" }
+                                }
+                            }
+
+                            html! {
+                                <select
+                                    /* onchange={on_cautious_change} */
+                                    value={input_value.clone()}
+                                    name={name.clone()}
+                                    ref={input_node_ref.clone()}
+                                    class="text-black"
+                                    disabled={*read_only}
+                                >
+                                    {
+                                        select_options.as_ref().unwrap().iter().map(|option| {
+                                            let selected = &option == &input_value;
+                                            html! {
+                                                <option value={option.clone()} {selected}>{ option }</option>
+                                            }
+                                        }).collect::<Html>()
+                                    }
+                                </select>
+                            }
+                        }
+                    }
+                }
+            </div>
+        </>
     }
-}
\ No newline at end of file
+}
diff --git a/sh-frontend/src/components/input/mod.rs b/sh-frontend/src/components/input/mod.rs
index 4e99455..2a14ca3 100644
--- a/sh-frontend/src/components/input/mod.rs
+++ b/sh-frontend/src/components/input/mod.rs
@@ -3,4 +3,4 @@
 // license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
-pub mod input_field;
\ No newline at end of file
+pub mod input_field;
diff --git a/sh-frontend/src/components/layout_components/footer.rs b/sh-frontend/src/components/layout_components/footer.rs
new file mode 100644
index 0000000..7fdc6bd
--- /dev/null
+++ b/sh-frontend/src/components/layout_components/footer.rs
@@ -0,0 +1,17 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+use crate::components::footer_components::connected::Connected;
+use yew::prelude::*;
+
+#[function_component(Footer)]
+pub fn footer() -> Html {
+    html! {
+        <footer class="mt-1 p-0 flex flex-row h-12 w-full max-h14 max-w-full rounded-2xl border-[#8963ba] border-4 justify-center">
+            <Connected />
+            <div class="m-2">{ "Use of this source code is governed by an MIT-style" }</div>
+        </footer>
+    }
+}
diff --git a/sh-frontend/src/app/live.rs b/sh-frontend/src/components/layout_components/live.rs
similarity index 87%
rename from sh-frontend/src/app/live.rs
rename to sh-frontend/src/components/layout_components/live.rs
index d778709..7720f6c 100644
--- a/sh-frontend/src/app/live.rs
+++ b/sh-frontend/src/components/layout_components/live.rs
@@ -3,11 +3,11 @@
 // license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
-use crate::components::acars_messages::AcarsMessages;
-use crate::components::help::ShHelp;
-use crate::components::map_display::ShMap;
-use crate::components::settings::ShSettings;
-use crate::components::stats::ShStatistics;
+use crate::components::map_components::map_display::ShMap;
+use crate::components::pages::acars_messages::AcarsMessages;
+use crate::components::pages::help::ShHelp;
+use crate::components::pages::settings::ShSettings;
+use crate::components::pages::stats::ShStatistics;
 use crate::services::saved_state::WebAppState;
 use crate::{common::panels::Panels, services::temp_state::WebAppStateTemp};
 use yew::prelude::*;
@@ -125,15 +125,15 @@ pub fn live() -> Html {
     };
 
     html! {
-        <div class="content flex w-full h-full">
-            <div class="content m-0 mt-1 md:w-96 h-full w-full rounded-2xl border-[#8963ba] border-4 overflow-hidden" style={pad_inside_left} id="live-left">
+        <>
+            <div class="content m-0 mt-1 md:w-96 h-full w-full max-h-full rounded-2xl border-[#8963ba] border-4 overflow-hidden" style={pad_inside_left} id="live-left">
                 { left_panel_show.clone() }
              </div>
-            <div class="content m-0 mt-1 ml-2 h-full w-full rounded-2xl border-[#8963ba] border-4 hidden md:block overflow-hidden" style={pad_inside_right} id="live-right" ref={node}>
+            <div class="content m-0 mt-1 ml-2 h-full w-full max-h-full rounded-2xl border-[#8963ba] border-4 hidden md:block overflow-hidden" style={pad_inside_right} id="live-right" ref={node}>
                 if visible {
                     { right_panel_status.clone() }
                 }
             </div>
-        </div>
+        </>
     }
 }
diff --git a/sh-frontend/src/components/layout_components/mod.rs b/sh-frontend/src/components/layout_components/mod.rs
new file mode 100644
index 0000000..107ee4c
--- /dev/null
+++ b/sh-frontend/src/components/layout_components/mod.rs
@@ -0,0 +1,8 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+pub mod footer;
+pub mod live;
+pub mod nav;
diff --git a/sh-frontend/src/components/nav.rs b/sh-frontend/src/components/layout_components/nav.rs
similarity index 99%
rename from sh-frontend/src/components/nav.rs
rename to sh-frontend/src/components/layout_components/nav.rs
index cd1ec73..5d6ddfd 100644
--- a/sh-frontend/src/components/nav.rs
+++ b/sh-frontend/src/components/layout_components/nav.rs
@@ -3,8 +3,8 @@
 // license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
-use super::search::Search;
 use crate::common::panels::Panels;
+use crate::components::nav_components::search::Search;
 use crate::services::saved_state::WebAppState;
 use crate::services::temp_state::WebAppStateTemp;
 use std::rc::Rc;
diff --git a/sh-frontend/src/components/control.rs b/sh-frontend/src/components/map_components/control.rs
similarity index 97%
rename from sh-frontend/src/components/control.rs
rename to sh-frontend/src/components/map_components/control.rs
index 537c817..c6a2d1f 100644
--- a/sh-frontend/src/components/control.rs
+++ b/sh-frontend/src/components/map_components/control.rs
@@ -3,7 +3,7 @@
 // license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
-use super::map::City;
+use crate::components::pages::adsb::City;
 use yew::{html::ImplicitClone, prelude::*};
 
 pub enum Msg {
diff --git a/sh-frontend/src/components/map_display.rs b/sh-frontend/src/components/map_components/map_display.rs
similarity index 94%
rename from sh-frontend/src/components/map_display.rs
rename to sh-frontend/src/components/map_components/map_display.rs
index 9478b5e..a8c895c 100644
--- a/sh-frontend/src/components/map_display.rs
+++ b/sh-frontend/src/components/map_components/map_display.rs
@@ -4,8 +4,8 @@
 // https://opensource.org/licenses/MIT.
 
 use crate::components::{
-    control::Cities,
-    map::{City, Point, ShMapComponent},
+    map_components::control::Cities,
+    pages::adsb::{City, Point, ShMapComponent},
 };
 use yew::prelude::*;
 
diff --git a/sh-frontend/src/components/map_components/mod.rs b/sh-frontend/src/components/map_components/mod.rs
new file mode 100644
index 0000000..a19abdb
--- /dev/null
+++ b/sh-frontend/src/components/map_components/mod.rs
@@ -0,0 +1,7 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+pub mod control;
+pub mod map_display;
diff --git a/sh-frontend/src/components/mod.rs b/sh-frontend/src/components/mod.rs
index 313aaab..1e2ded6 100644
--- a/sh-frontend/src/components/mod.rs
+++ b/sh-frontend/src/components/mod.rs
@@ -3,14 +3,11 @@
 // license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
-pub mod acars_messages;
-pub mod control;
-pub mod help;
-pub mod map;
-pub mod map_display;
-pub mod nav;
-pub mod search;
+pub mod alerts;
+pub mod footer_components;
+pub mod input;
+pub mod layout_components;
+pub mod map_components;
+pub mod nav_components;
+pub mod pages;
 pub mod setting_components;
-pub mod settings;
-pub mod stats;
-pub mod input;
\ No newline at end of file
diff --git a/sh-frontend/src/components/nav_components/mod.rs b/sh-frontend/src/components/nav_components/mod.rs
new file mode 100644
index 0000000..90650ff
--- /dev/null
+++ b/sh-frontend/src/components/nav_components/mod.rs
@@ -0,0 +1,6 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+pub mod search;
diff --git a/sh-frontend/src/components/search.rs b/sh-frontend/src/components/nav_components/search.rs
similarity index 100%
rename from sh-frontend/src/components/search.rs
rename to sh-frontend/src/components/nav_components/search.rs
diff --git a/sh-frontend/src/components/acars_messages.rs b/sh-frontend/src/components/pages/acars_messages.rs
similarity index 100%
rename from sh-frontend/src/components/acars_messages.rs
rename to sh-frontend/src/components/pages/acars_messages.rs
diff --git a/sh-frontend/src/components/map.rs b/sh-frontend/src/components/pages/adsb.rs
similarity index 100%
rename from sh-frontend/src/components/map.rs
rename to sh-frontend/src/components/pages/adsb.rs
diff --git a/sh-frontend/src/components/help.rs b/sh-frontend/src/components/pages/help.rs
similarity index 100%
rename from sh-frontend/src/components/help.rs
rename to sh-frontend/src/components/pages/help.rs
diff --git a/sh-frontend/src/components/pages/mod.rs b/sh-frontend/src/components/pages/mod.rs
new file mode 100644
index 0000000..0ab255c
--- /dev/null
+++ b/sh-frontend/src/components/pages/mod.rs
@@ -0,0 +1,10 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+pub mod acars_messages;
+pub mod adsb;
+pub mod help;
+pub mod settings;
+pub mod stats;
diff --git a/sh-frontend/src/components/settings.rs b/sh-frontend/src/components/pages/settings.rs
similarity index 88%
rename from sh-frontend/src/components/settings.rs
rename to sh-frontend/src/components/pages/settings.rs
index c340833..032bea9 100644
--- a/sh-frontend/src/components/settings.rs
+++ b/sh-frontend/src/components/pages/settings.rs
@@ -14,7 +14,7 @@ use yew::prelude::*;
 pub fn settings() -> Html {
     html! {
         <>
-            <div class="settings">
+            <div class="settings h-full w-full max-h-full max-w-full overflow-y-scroll">
                 <ShAppConfig />
                 <ShEnabledDataSourcesConfig />
                 <ShDataSourcesConfig />
diff --git a/sh-frontend/src/components/stats.rs b/sh-frontend/src/components/pages/stats.rs
similarity index 100%
rename from sh-frontend/src/components/stats.rs
rename to sh-frontend/src/components/pages/stats.rs
diff --git a/sh-frontend/src/components/setting_components/sh_app_config.rs b/sh-frontend/src/components/setting_components/sh_app_config.rs
index 572dde2..becf04e 100644
--- a/sh-frontend/src/components/setting_components/sh_app_config.rs
+++ b/sh-frontend/src/components/setting_components/sh_app_config.rs
@@ -3,35 +3,216 @@
 // license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
-
-use std::rc::Rc;
-
-use sh_config::web::sh_web_config::ShWebConfig;
+use crate::components::alerts::alert_error::AlertError;
+use crate::components::input::input_field::{InputField, InputFieldType};
+use crate::services::temp_state::WebAppStateTemp;
+use crate::services::websocket::WsAction;
+use serde::{Deserialize, Serialize};
+use sh_common::{MessageData, UserMessageTypes, UserWssMessage};
+use wasm_bindgen::JsCast;
+use web_sys::{HtmlFormElement, HtmlInputElement};
 use yew::prelude::*;
 use yewdux::prelude::*;
-use crate::services::temp_state::WebAppStateTemp;
-use crate::components::input::input_field::InputField;
+
+// TODO: This entire panel should be hidden behind some kind of "advanced settings" toggle
+
+#[derive(Clone, PartialEq, Store, Default, Serialize, Deserialize)]
+#[store(storage = "local", storage_tab_sync)]
+struct ConfigAppState {
+    pub is_visible: bool,
+}
+
+enum ButtonAction {
+    Update,
+    Reset,
+}
+
+impl From<String> for ButtonAction {
+    fn from(action: String) -> Self {
+        match action.to_lowercase().as_str() {
+            "update" => ButtonAction::Update,
+            "reset" => ButtonAction::Reset,
+            _ => ButtonAction::Update,
+        }
+    }
+}
 
 #[function_component(ShAppConfig)]
 pub fn sh_app_config() -> Html {
-    let (state, dispatch) = use_store::<WebAppStateTemp>();
+    let config = use_selector(|state: &WebAppStateTemp| state.config.clone());
+    let (state, dispatch) = use_store::<ConfigAppState>();
+    let (temp_state, temp_dispatch) = use_store::<WebAppStateTemp>();
+    let show_alert = use_state(|| false);
 
-    let config = use_selector(|state: &WebAppStateTemp | state.config.clone());
+    let is_visible = use_state(|| state.is_visible);
+    let current_visible = *is_visible;
 
     let database_url_node = use_node_ref();
     let log_level_node = use_node_ref();
     let data_path_node = use_node_ref();
+    let log_levels = vec![
+        "trace".to_string(),
+        "debug".to_string(),
+        "info".to_string(),
+        "error".to_string(),
+        "warn".to_string(),
+    ];
 
     let onsubmit = {
-            Callback::from(move |event: SubmitEvent| {
+        let config = config.clone();
+        let database_url_node = database_url_node.clone();
+        let log_level_node = log_level_node.clone();
+        let data_path_node = data_path_node.clone();
+
+        Callback::from(move |event: SubmitEvent| {
             event.prevent_default();
-            log::debug!("Saving config");
+
+            match ButtonAction::from(event.submitter().unwrap().id()) {
+                ButtonAction::Update => {
+                    log::debug!("Saving config");
+
+                    let database_url = database_url_node
+                        .cast::<HtmlInputElement>()
+                        .unwrap()
+                        .value();
+                    let log_level = log_level_node.cast::<HtmlInputElement>().unwrap().value();
+                    let data_path = data_path_node.cast::<HtmlInputElement>().unwrap().value();
+
+                    log::debug!("Database URL: {}", database_url);
+                    log::debug!("Log Level: {}", log_level);
+                    log::debug!("Data Path: {}", data_path);
+
+                    if let Some(config) = config.as_ref() {
+                        let app = config.app.clone();
+                        let database_url_original = app.database_url.clone();
+                        let log_level_original = app.log_level.clone();
+                        let data_path_original = app.data_path.clone();
+
+                        if database_url != database_url_original
+                            || log_level != log_level_original
+                            || data_path != data_path_original
+                        {
+                            log::debug!("Values have changed");
+                            // save the new values
+
+                            let mut new_config = config.clone().app;
+                            new_config.database_url = database_url;
+                            new_config.log_level = log_level;
+                            new_config.data_path = data_path;
+
+                            let message = UserWssMessage::new(
+                                UserMessageTypes::UserUpdateAppConfig,
+                                MessageData::ShAppConfig(new_config),
+                            );
+                        }
+                    }
+
+                    // only do anything if the values have changed
+
+                    // if database_url != database_url_original || log_level != log_level_original || data_path != data_path_original {
+                    //     log::debug!("Values have changed");
+                    //     // save the new values
+
+                    //     let new_config = config.clone().unwrap();
+                    //     new_config.app.database_url = database_url;
+                    //     new_config.app.log_level = log_level;
+                    //     new_config.app.data_path = data_path;
+                    // }
+                }
+                ButtonAction::Reset => {
+                    // set all the values back to the original values
+                    if let Some(config) = config.as_ref() {
+                        let app = config.clone().app;
+                        let database_url = app.database_url.clone();
+                        let log_level = app.log_level.clone();
+                        let data_path = app.data_path.clone();
+
+                        database_url_node
+                            .cast::<HtmlInputElement>()
+                            .unwrap()
+                            .set_value(&database_url);
+                        log_level_node
+                            .cast::<HtmlInputElement>()
+                            .unwrap()
+                            .set_value(&log_level);
+                        data_path_node
+                            .cast::<HtmlInputElement>()
+                            .unwrap()
+                            .set_value(&data_path);
+                    }
+                }
+            }
+        })
+    };
+
+    let current_state = is_visible.clone();
+    let show_panel = {
+        // lets see if the user has changed any of the values
+        // if they have, we should prompt them to save the changes
+
+        let config = config.clone();
+        let database_url_node = database_url_node.clone();
+        let log_level_node = log_level_node.clone();
+        let data_path_node = data_path_node.clone();
+        let show_alert = show_alert.clone();
+
+        Callback::from(move |_: MouseEvent| {
+            // if we are changing from not showing the panel to showing the panel, just save the current state
+            // FIXME: Implement above logic to save literal nanoseconds of CPU time and memory lel
+            if let Some(config) = config.as_ref() {
+                let app = config.app.clone();
+                let database_url = app.database_url.clone();
+                let log_level = app.log_level.clone();
+                let data_path = app.data_path.clone();
+
+                // verify none of the inputs are empty
+
+                let database_url_node = database_url_node
+                    .cast::<HtmlInputElement>()
+                    .unwrap()
+                    .value();
+                let log_level_node = log_level_node.cast::<HtmlInputElement>().unwrap().value();
+                let data_path_node = data_path_node.cast::<HtmlInputElement>().unwrap().value();
+
+                if database_url_node.is_empty()
+                    || log_level_node.is_empty()
+                    || data_path_node.is_empty()
+                {
+                    log::debug!("One of the fields is empty");
+                    return;
+                }
+
+                // verify none of the inputs have changed
+
+                if database_url_node == database_url
+                    && log_level_node == log_level
+                    && data_path_node == data_path
+                {
+                    log::debug!("None of the fields have changed");
+                } else {
+                    log::debug!("One of the fields has changed");
+                    current_state.set(true);
+                    dispatch.reduce_mut(move |state| state.is_visible = true);
+                    // prompt the user to save the changes
+
+                    show_alert.set(true);
+                    return;
+                }
+            }
+        })
+    };
+
+    let alert_status = show_alert.clone();
+    let dismiss_alert = {
+        Callback::from(move |_| {
+            alert_status.set(false);
         })
     };
 
     html! {
         <>
-        <input id="collapsible_app_config" class="toggle" type="checkbox" />
+        <AlertError message={"You have unsaved changes. Would you like to save them?"} title={"Unsaved Changes"} show_alert={show_alert} on_confirm={dismiss_alert} />
+        <input id="collapsible_app_config" class="toggle" type="checkbox" checked={current_visible} onclick={show_panel}/>
         <label for="collapsible_app_config" class="lbl-toggle">{"SDR-E Hub Configuration"}</label>
         <div class="collapsible-content">
           <div class="content-inner">
@@ -45,18 +226,18 @@ pub fn sh_app_config() -> Html {
                         let data_path: String = app.data_path.clone();
                         html! {
                             <form onsubmit={onsubmit} class="registration-form">
-                                <div><InputField input_node_ref={database_url_node} label={"Database URL"} name={"databaseurl"} field_type={"text"} input_value={database_url} /></div>
-                                <div><InputField input_node_ref={log_level_node} label={"Log Level"} name={"loglevel"} field_type={"text"} input_value={log_level} /></div>
-                                <div><InputField input_node_ref={data_path_node} label={"Data Path"} name={"datapath"} field_type={"text"} input_value={data_path} /></div>
-                                <div><button type="submit" class="button">{"Update Configuration"}</button></div>
+                                <div class="settings-item"><InputField input_node_ref={database_url_node} label={"Database URL"} name={"databaseurl"} field_type={InputFieldType::Text} input_value={database_url} select_options={None} read_only={true} /></div>
+                                <div class="settings-item"><InputField input_node_ref={log_level_node} label={"Log Level"} name={"loglevel"} field_type={InputFieldType::Select} input_value={log_level} select_options={Some(log_levels)} /></div>
+                                <div class="settings-item"><InputField input_node_ref={data_path_node} label={"Data Path"} name={"datapath"} field_type={InputFieldType::Text} input_value={data_path} select_options={None} read_only={true}/></div>
+                                <div class="settings-item buttons">
+                                <div><button type="submit" class="button" id="update">{"Update Configuration"}</button></div>
+                                <div><button type="submit" class="button" id="reset">{"Reset Configuration"}</button></div>
+                                </div>
                             </form>
                         }
                     } else {
                         html!{ "Still loading!" }
                     }
-                    // let config = Rc::<std::option::Option<ShWebConfig>>::get_mut(&mut config).unwrap().as_ref().unwrap();
-                    // let app = config.app.clone();
-                    // let database_url: String = app.database_url.clone();
                 }
           </div>
         </div>
diff --git a/sh-frontend/src/services/temp_state.rs b/sh-frontend/src/services/temp_state.rs
index 00eefcb..bf2db9f 100644
--- a/sh-frontend/src/services/temp_state.rs
+++ b/sh-frontend/src/services/temp_state.rs
@@ -10,6 +10,7 @@ use yewdux::prelude::*;
 pub struct WebAppStateTemp {
     pub right_panel_visible: bool,
     pub config: Option<ShWebConfig>,
+    pub websocket_connected: bool,
 }
 
 impl Default for WebAppStateTemp {
@@ -17,6 +18,7 @@ impl Default for WebAppStateTemp {
         Self {
             right_panel_visible: true,
             config: None,
+            websocket_connected: false,
         }
     }
 }
diff --git a/sh-frontend/src/services/websocket.rs b/sh-frontend/src/services/websocket.rs
index 48c120d..1ea2fef 100644
--- a/sh-frontend/src/services/websocket.rs
+++ b/sh-frontend/src/services/websocket.rs
@@ -81,6 +81,13 @@ impl Component for ShWebSocketComponent {
                         .as_mut()
                         .unwrap()
                         .send(serde_json::to_string(&serialized_data).unwrap());
+
+                    if self.fetching == false {
+                        self.fetching = true;
+                        self.dispatch.reduce_mut(|state| {
+                            state.websocket_connected = true;
+                        });
+                    }
                     false
                 }
                 WsAction::Disconnect => {
@@ -88,13 +95,25 @@ impl Component for ShWebSocketComponent {
                     log::info!(
                         "WebSocket connection disconnected. Why? This should be unreachable"
                     );
+                    self.fetching = false;
+                    self.dispatch.reduce_mut(|state| {
+                        state.config = None;
+                        state.websocket_connected = false;
+                    });
+
                     false
                 }
                 WsAction::Lost => {
                     self.ws = None;
                     log::error!("WebSocket connection lost. Reconnecting");
+                    self.fetching = false;
                     // reconnect
                     ctx.link().send_message(WsAction::Connect);
+                    self.dispatch.reduce_mut(|state| {
+                        state.config = None;
+                        state.websocket_connected = false;
+                    });
+
                     false
                 }
             },
diff --git a/sh-frontend/tailwind.css b/sh-frontend/tailwind.css
index 11d9fde..8d37086 100644
--- a/sh-frontend/tailwind.css
+++ b/sh-frontend/tailwind.css
@@ -7,6 +7,15 @@ h2 {
   text-align: center;
 }
 
+html,
+body {
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
+
 /* Navbar styling and animation */
 
 .top-nav {
@@ -246,6 +255,7 @@ input[type="checkbox"] {
   max-height: 0px;
   overflow: hidden;
   transition: max-height 0.25s ease-in-out;
+  flex-shrink: 0;
 }
 
 .toggle:checked + .lbl-toggle + .collapsible-content {
@@ -290,3 +300,65 @@ input[type="checkbox"] {
   /* justify-content: center; */
   height: 100%;
 }
+
+/* Settings layouts */
+
+.settings-item {
+  display: flex;
+  flex-direction: row;
+  align-items: left;
+  /* justify-content: center; */
+  height: 100%;
+  width: 100%;
+  padding-bottom: 0.25rem;
+  flex-shrink: 0;
+}
+
+.settings-item > *:first-child {
+  width: 200px;
+}
+
+.settings-item > *:nth-child(2) {
+  width: 100%;
+}
+
+input[type="text"].text-black {
+  width: 100%;
+  padding-left: 0.25rem;
+}
+
+input:read-only,
+select:disabled {
+  background: grey;
+}
+
+select.text-black {
+  width: 100%;
+  padding-left: 0.25rem;
+}
+
+.settings-item > *:only-child {
+  width: 100%;
+}
+
+.settings-item.buttons > *:first-child {
+  width: 250px;
+}
+
+@media (max-width: 767px) {
+  .settings-item {
+    flex-direction: column;
+  }
+
+  .settings-item > *:first-child {
+    width: 100%;
+  }
+
+  .settings-item > *:nth-child(2) {
+    width: 100%;
+  }
+
+  .settings-item > *:only-child {
+    width: 100%;
+  }
+}
diff --git a/src/bin/sh-tauri/Cargo.toml b/src/bin/sh-tauri/Cargo.toml
index 1e7142a..1832842 100644
--- a/src/bin/sh-tauri/Cargo.toml
+++ b/src/bin/sh-tauri/Cargo.toml
@@ -20,7 +20,7 @@ tauri-build = { version = "1.5.2", features = [] }
 
 [dependencies]
 serde_json = "1.0.117"
-serde = { version = "1.0.202", features = ["derive"] }
+serde = { version = "1.0.203", features = ["derive"] }
 sdrehub = { path = "../../libraries/sdrehub" }
 sh-config = { path = "../../libraries/sh-config" }
 tauri = { version = "1.6.7", features = ["api-all"] }
diff --git a/src/libraries/sh-api/Cargo.toml b/src/libraries/sh-api/Cargo.toml
index 7e7cce2..6c8eb97 100644
--- a/src/libraries/sh-api/Cargo.toml
+++ b/src/libraries/sh-api/Cargo.toml
@@ -19,7 +19,7 @@ keywords.workspace = true
 async-trait = "0.1.80"
 axum = { version = "0.7.5", features = ["ws"] }
 log = "0.4.21"
-serde = { version = "1.0.202", features = ["derive"] }
+serde = { version = "1.0.203", features = ["derive"] }
 serde_json = "1.0.117"
 sh-common = { path = "../sh-common" }
 sh-config = { path = "../sh-config" }
diff --git a/src/libraries/sh-api/src/lib.rs b/src/libraries/sh-api/src/lib.rs
index 56dba57..56e23e8 100644
--- a/src/libraries/sh-api/src/lib.rs
+++ b/src/libraries/sh-api/src/lib.rs
@@ -175,6 +175,24 @@ async fn ws_handle_socket(mut socket: WebSocket, state: Arc<ShAPIServerState>) {
                         debug!("Sending config message: {config_serialized}");
                         socket.send(Message::Text(config_serialized)).await.unwrap();
                     }
+                    UserMessageTypes::UserUpdateAppConfig => {
+                        // check the data
+                        if message.data == MessageData::NoData {
+                            error!("Received UserUpdateAppConfig message without data");
+                            continue;
+                        }
+
+                        debug!("Received UserUpdateAppConfig message with data");
+                        let data = match message.data {
+                            MessageData::ShAppConfig(data) => data,
+                            _ => {
+                                error!("Received UserUpdateAppConfig message with incorrect data type");
+                                continue;
+                            }
+                        };
+
+                        debug!("Received app config: {:?}", data);
+                    }
                 }
             }
             Message::Binary(_) => {
diff --git a/src/libraries/sh-common/Cargo.toml b/src/libraries/sh-common/Cargo.toml
index 27be886..8bf2b81 100644
--- a/src/libraries/sh-common/Cargo.toml
+++ b/src/libraries/sh-common/Cargo.toml
@@ -17,6 +17,6 @@ keywords.workspace = true
 
 [dependencies]
 async-trait = "0.1.80"
-serde = { version = "1.0.202", features = ["derive"] }
+serde = { version = "1.0.203", features = ["derive"] }
 serde_json = "1.0.117"
 sh-config = { path = "../sh-config" }
diff --git a/src/libraries/sh-common/src/lib.rs b/src/libraries/sh-common/src/lib.rs
index b648221..3a46533 100644
--- a/src/libraries/sh-common/src/lib.rs
+++ b/src/libraries/sh-common/src/lib.rs
@@ -18,7 +18,7 @@ use std::sync::{Arc, Mutex};
 
 use async_trait::async_trait;
 use serde::{Deserialize, Serialize};
-use sh_config::{web::sh_web_config::ShWebConfig, ShConfig};
+use sh_config::{web::{sh_web_config::ShWebConfig, sh_web_sdrehub::ShWebSDREHub}, ShConfig};
 
 #[async_trait]
 pub trait ShDataUser {
@@ -36,6 +36,7 @@ pub type ShDataUserList = Vec<Box<dyn ShDataUser + Send + Sync>>;
 #[derive(Serialize, Deserialize, Debug)]
 pub enum UserMessageTypes {
     UserRequestConfig,
+    UserUpdateAppConfig
 }
 
 #[derive(Serialize, Deserialize, Debug)]
@@ -46,6 +47,7 @@ pub enum ServerMessageTypes {
 #[derive(Deserialize, Serialize, PartialEq, Debug)]
 pub enum MessageData {
     ShConfig(ShWebConfig),
+    ShAppConfig(ShWebSDREHub),
     NoData,
 }
 
diff --git a/src/libraries/sh-config/Cargo.toml b/src/libraries/sh-config/Cargo.toml
index c429a0a..4588440 100644
--- a/src/libraries/sh-config/Cargo.toml
+++ b/src/libraries/sh-config/Cargo.toml
@@ -19,7 +19,7 @@ keywords.workspace = true
 figment = { version = "0.10.19", features = ["toml", "env"] }
 sdre-rust-logging = "0.3.2"
 log = "0.4.21"
-serde = { version = "1.0.202", features = ["derive"] }
+serde = { version = "1.0.203", features = ["derive"] }
 serde-inline-default = "0.2.0"
 toml = "0.8.13"
 void = "1.0.2"

From 2f0ffc4d2bbe9135cbcef07bf9ae9c81a161208b Mon Sep 17 00:00:00 2001
From: Fred Clausen <43556888+fredclausen@users.noreply.github.com>
Date: Tue, 28 May 2024 15:25:28 -0600
Subject: [PATCH 8/9] SCSS

---
 .pre-commit-config.yaml                       |  10 +
 README.md                                     |   2 +-
 sh-frontend/css/app.scss                      |  15 +
 sh-frontend/css/components/_footer.scss       |  21 +
 sh-frontend/css/components/_live.scss         |  40 ++
 sh-frontend/css/components/_navbar.scss       | 164 ++++++++
 sh-frontend/css/components/_search.scss       |  27 ++
 sh-frontend/css/components/_settings.scss     | 156 ++++++++
 sh-frontend/css/config/_colors.scss           |  50 +++
 sh-frontend/css/config/_config.scss           |  18 +
 sh-frontend/css/mixins/_border.scss           |  31 ++
 sh-frontend/css/tailwind.css                  |  10 +
 sh-frontend/css/utility/_alerts.scss          |  26 ++
 sh-frontend/css/utility/_base.scss            |  26 ++
 sh-frontend/css/utility/_buttons.scss         |  20 +
 sh-frontend/index.html                        |  59 ++-
 .../src/components/alerts/alert_error.rs      |  44 ++-
 .../components/footer_components/connected.rs |   6 +-
 .../components/layout_components/footer.rs    |   3 +-
 .../src/components/layout_components/live.rs  |   4 +-
 .../src/components/layout_components/nav.rs   |   6 +-
 .../src/components/nav_components/search.rs   |   4 +-
 sh-frontend/src/components/pages/settings.rs  |   2 +-
 .../setting_components/sh_app_config.rs       |   2 +-
 sh-frontend/tailwind.config.js                |   2 +-
 sh-frontend/tailwind.css                      | 364 ------------------
 src/libraries/sh-api/src/lib.rs               |  10 +-
 src/libraries/sh-common/src/lib.rs            |   7 +-
 28 files changed, 697 insertions(+), 432 deletions(-)
 create mode 100644 sh-frontend/css/app.scss
 create mode 100644 sh-frontend/css/components/_footer.scss
 create mode 100644 sh-frontend/css/components/_live.scss
 create mode 100644 sh-frontend/css/components/_navbar.scss
 create mode 100644 sh-frontend/css/components/_search.scss
 create mode 100644 sh-frontend/css/components/_settings.scss
 create mode 100644 sh-frontend/css/config/_colors.scss
 create mode 100644 sh-frontend/css/config/_config.scss
 create mode 100644 sh-frontend/css/mixins/_border.scss
 create mode 100644 sh-frontend/css/tailwind.css
 create mode 100644 sh-frontend/css/utility/_alerts.scss
 create mode 100644 sh-frontend/css/utility/_base.scss
 create mode 100644 sh-frontend/css/utility/_buttons.scss
 delete mode 100644 sh-frontend/tailwind.css

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 8072a5c..e03bbf9 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -76,3 +76,13 @@ repos:
       - id: fmt
       - id: cargo-check
       - id: clippy
+
+  - repo: https://github.com/doublify/pre-commit-rust
+    rev: v1.0
+    hooks:
+      - id: fmt
+        args: ["--manifest-path", "./sh-frontend/Cargo.toml", "--"]
+      - id: cargo-check
+        args: ["--manifest-path", "./sh-frontend/Cargo.toml"]
+      - id: clippy
+        args: ["--manifest-path", "./sh-frontend/Cargo.toml"]
diff --git a/README.md b/README.md
index 3015829..227164e 100644
--- a/README.md
+++ b/README.md
@@ -67,7 +67,7 @@ ACARS Hub was a labor of love driven by the boundless enthusiasm of everyone tha
 
 ### Why Rust?
 
-I chose Rust mostly because I wanted to. The other option was to stick with python and TypeScript/NodeJS, which would have been signifiantly easier. The code would have been easier to write, the support of npm packages to do tasks is much bigger, and lastly the ability to search the web and find answers to questions is so much easier.
+I chose Rust mostly because I wanted to. The other option was to stick with python and TypeScript/NodeJS, which would have been much easier. The code would have been easier to write, the support of npm packages to do tasks is much bigger, and lastly the ability to search the web and find answers to questions is so much easier.
 
 That said, one of the main goals of this project was to be as performant as possible, as well as a unified code base that could generate both a web application and a desktop application. Rust makes this pretty easy.
 
diff --git a/sh-frontend/css/app.scss b/sh-frontend/css/app.scss
new file mode 100644
index 0000000..7cb5b19
--- /dev/null
+++ b/sh-frontend/css/app.scss
@@ -0,0 +1,15 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+@use "utility/base";
+@use "utility/buttons";
+@use "utility/alerts";
+@use "components/search";
+@use "components/navbar";
+@use "components/live";
+@use "components/settings";
+@use "components/footer";
+
+@import url("https://unpkg.com/leaflet@1.9.3/dist/leaflet.css");
diff --git a/sh-frontend/css/components/_footer.scss b/sh-frontend/css/components/_footer.scss
new file mode 100644
index 0000000..ff4e860
--- /dev/null
+++ b/sh-frontend/css/components/_footer.scss
@@ -0,0 +1,21 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+@use "../config/colors";
+@use "../config/config";
+@use "../mixins/border" as b;
+
+.footer {
+  margin-top: config.$normal-margin;
+  padding: 0rem;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  @include b.border;
+
+  & > div {
+    margin: config.$double-margin;
+  }
+}
diff --git a/sh-frontend/css/components/_live.scss b/sh-frontend/css/components/_live.scss
new file mode 100644
index 0000000..bbc716b
--- /dev/null
+++ b/sh-frontend/css/components/_live.scss
@@ -0,0 +1,40 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+@use "../config/colors";
+@use "../config/config";
+@use "../mixins/border" as b;
+
+@mixin live_panel($width: 100%, $margin-left: 0rem) {
+  margin: 0px;
+  margin-top: config.$normal-margin;
+  margin-left: $margin-left;
+  height: 100%;
+  width: $width;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  @include b.border;
+  display: block;
+}
+
+.live-panel-left {
+  @include live_panel(24rem);
+
+  @media (max-width: config.$transition-to-mobile) {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+.live-panel-right {
+  @include live_panel(100%, config.$double-margin);
+
+  @media (max-width: config.$transition-to-mobile) {
+    & {
+      display: none;
+    }
+  }
+}
diff --git a/sh-frontend/css/components/_navbar.scss b/sh-frontend/css/components/_navbar.scss
new file mode 100644
index 0000000..710da75
--- /dev/null
+++ b/sh-frontend/css/components/_navbar.scss
@@ -0,0 +1,164 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+@use "../config/colors";
+@use "../config/config";
+
+$rotation: 405deg;
+$menu-offset: 2rem;
+
+/* Navbar styling and animation */
+
+@mixin nav-transition($element: "height") {
+  transition: $element 400ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.top-nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background: linear-gradient(
+    to left,
+    colors.$light-purple,
+    colors.$dark-purple
+  );
+  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  color: colors.$text-color;
+  padding: config.$double-padding;
+  z-index: 1000;
+  border-radius: config.$border-radius;
+
+  .menu-right {
+    right: $menu-offset;
+  }
+
+  .menu-left {
+    left: $menu-offset;
+  }
+
+  #menu-toggle-right,
+  #menu-toggle-left {
+    display: none;
+    &:checked + .menu-button-container .menu-button::before {
+      margin-top: 0px;
+      transform: rotate($rotation);
+    }
+    &:checked + .menu-button-container .menu-button {
+      background: colors.$menu-flyout-background-color;
+    }
+    &:checked + .menu-button-container .menu-button::after {
+      margin-top: 0px;
+      transform: rotate(-$rotation);
+    }
+
+    & ~ .menu li {
+      height: 0;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      @include nav-transition;
+    }
+
+    &:checked ~ .menu li {
+      border: 1px solid colors.$menu-flyout-border-color;
+      height: 2.5em;
+      padding: 0.5em;
+      @include nav-transition;
+    }
+  }
+
+  .menu {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    list-style-type: none;
+    margin: 0;
+    margin-top: 4rem;
+    padding: 0;
+    position: absolute;
+    top: 0;
+
+    @media (max-width: config.$transition-to-mobile) {
+      & {
+        width: 100%;
+
+        & > li {
+          width: 100%;
+        }
+
+        &.menu-right {
+          right: 0px;
+        }
+
+        &.menu-left {
+          left: 0px;
+        }
+      }
+    }
+
+    li {
+      margin: 0 1rem;
+      overflow: hidden;
+      display: flex;
+      margin: 0;
+      padding: 0.5rem 0;
+      min-width: 12.5rem;
+      max-width: config.$transition-to-mobile;
+      color: colors.$text-color;
+      background-color: colors.$menu-li-background-color;
+      justify-content: left;
+
+      &:hover {
+        color: colors.$sdre-green;
+        cursor: pointer;
+      }
+      &:not(:last-child) {
+        border-bottom: 1px solid colors.$menu-flyout-border-bottom;
+      }
+    }
+  }
+
+  .menu-button-container {
+    display: flex;
+    height: 100%;
+    width: 2rem;
+    cursor: pointer;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .menu-button {
+      &:hover,
+      &:hover::before,
+      &:hover::after {
+        background-color: colors.$sdre-green;
+      }
+
+      &,
+      &::before,
+      &::after {
+        display: block;
+        background-color: colors.$text-color;
+        position: absolute;
+        height: 4px;
+        width: 2rem;
+        @include nav-transition(transform);
+        border-radius: 2px;
+      }
+
+      &::before {
+        content: "";
+        margin-top: -0.5rem;
+      }
+
+      &::after {
+        content: "";
+        margin-top: 0.5rem;
+      }
+    }
+  }
+}
diff --git a/sh-frontend/css/components/_search.scss b/sh-frontend/css/components/_search.scss
new file mode 100644
index 0000000..2e22528
--- /dev/null
+++ b/sh-frontend/css/components/_search.scss
@@ -0,0 +1,27 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+@use "../config/colors";
+@use "../config/config";
+
+.search-bar {
+  width: 66%;
+  text-align: center;
+  input[type="text"] {
+    width: 100%;
+    color: colors.$background-color;
+    padding: config.$double-padding;
+    border-radius: config.$border-radius;
+    &:focus {
+      outline: config.$border-size solid colors.$sdre-green;
+    }
+  }
+
+  @media (max-width: config.$transition-to-mobile) {
+    width: 100%;
+    margin-left: config.$double-margin;
+    padding-left: config.$double-padding;
+  }
+}
diff --git a/sh-frontend/css/components/_settings.scss b/sh-frontend/css/components/_settings.scss
new file mode 100644
index 0000000..f0ba524
--- /dev/null
+++ b/sh-frontend/css/components/_settings.scss
@@ -0,0 +1,156 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+@use "../config/colors";
+@use "../config/config";
+@use "../mixins/border" as b;
+
+@mixin settings_small() {
+  flex-direction: column;
+
+  & > *:first-child {
+    width: 100%;
+  }
+
+  & > *:nth-child(2) {
+    width: 100%;
+  }
+
+  & > *:only-child {
+    width: 100%;
+  }
+}
+
+.settings {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  height: 100%;
+  width: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  overflow-y: auto;
+
+  input[type="checkbox"] {
+    display: none;
+  }
+
+  .toggle {
+    &:checked + .lbl-toggle::before {
+      transform: rotate(90deg) translateX(-3px);
+    }
+
+    &:checked + .lbl-toggle + .collapsible-content {
+      max-height: 100%;
+    }
+
+    &:checked + .lbl-toggle {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .lbl-toggle {
+    display: block;
+    text-transform: uppercase;
+    padding: config.$double-padding;
+    margin-top: config.$normal-margin;
+    color: colors.$text-color;
+    background-color: colors.$light-purple;
+    background: linear-gradient(
+      to left,
+      colors.$light-purple,
+      colors.$dark-purple
+    );
+    cursor: pointer;
+    border-radius: config.$border-radius;
+    transition: all 0.25s ease-out;
+  }
+
+  .lbl-toggle:hover {
+    color: colors.$sdre-green;
+  }
+
+  .lbl-toggle::before {
+    content: " ";
+    display: inline-block;
+
+    border-top: config.$border-size solid transparent;
+    border-bottom: config.$border-size solid transparent;
+    border-left: config.$border-size solid currentColor;
+    vertical-align: middle;
+    margin-right: config.$double-margin;
+    transform: translateY(-2px);
+
+    transition: transform 0.2s ease-out;
+  }
+
+  .collapsible-content {
+    max-height: 0px;
+    overflow: hidden;
+    transition: max-height 0.25s ease-in-out;
+    flex-shrink: 0;
+
+    .content-inner {
+      background: colors.$background-color;
+      /* FIXME: this should be a gradient that matches the element above */
+      @include b.border-inner-content;
+      padding: config.$double-padding;
+
+      form {
+        input[type="text"].text-black {
+          width: 100%;
+          padding-left: config.$normal-padding;
+        }
+
+        input:read-only,
+        select:disabled {
+          background: colors.$grey;
+        }
+
+        select.text-black {
+          width: 100%;
+          padding-left: config.$normal-padding;
+        }
+
+        .settings-item {
+          display: flex;
+          flex-direction: row;
+          align-items: left;
+          height: 100%;
+          width: 100%;
+          padding-bottom: config.$normal-padding;
+          flex-shrink: 0;
+
+          @media (max-width: config.$transition-to-mobile) {
+            @include settings_small;
+          }
+
+          .live-panel-left > & {
+            @include settings_small;
+          }
+
+          &.buttons {
+            & > *:first-child {
+              width: 15.625rem;
+            }
+          }
+
+          & > *:first-child {
+            width: 12.5rem;
+          }
+
+          & > *:nth-child(2) {
+            width: 100%;
+          }
+
+          & > *:only-child {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/sh-frontend/css/config/_colors.scss b/sh-frontend/css/config/_colors.scss
new file mode 100644
index 0000000..9fbd7e3
--- /dev/null
+++ b/sh-frontend/css/config/_colors.scss
@@ -0,0 +1,50 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+$background-color: #101110;
+$text-color: #fdfdff;
+$light-purple: #8963ba;
+$dark-purple: #3c2f66;
+$grey: #808080;
+$sdre-green: #73a942;
+$sdre-red: #ef4444;
+$sdre-yellow: #f6a417;
+
+$menu-flyout-background-color: #ffffff00;
+$menu-flyout-border-color: #333333;
+$menu-flyout-border-bottom: #444444;
+$menu-li-background-color: #222222;
+
+// create a map of colors
+
+$colors: (
+  "background-color": $background-color,
+  "text-color": $text-color,
+  "light-purple": $light-purple,
+  "dark-purple": $dark-purple,
+  "grey": $grey,
+  "sdre-green": $sdre-green,
+  "sdre-red": $sdre-red,
+  "menu-flyout-background-color": $menu-flyout-background-color,
+  "menu-flyout-border-color": $menu-flyout-border-color,
+  "menu-flyout-border-bottom": $menu-flyout-border-bottom,
+  "menu-li-background-color": $menu-li-background-color,
+);
+
+@each $name, $value in $colors {
+  .text-#{$name} {
+    color: $value;
+  }
+
+  // now create 50% darker and 50% lighter versions of the color
+
+  .text-#{$name}-darker {
+    color: darken($value, 10%);
+  }
+
+  .text-#{$name}-lighter {
+    color: lighten($value, 10%);
+  }
+}
diff --git a/sh-frontend/css/config/_config.scss b/sh-frontend/css/config/_config.scss
new file mode 100644
index 0000000..645883d
--- /dev/null
+++ b/sh-frontend/css/config/_config.scss
@@ -0,0 +1,18 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+$transition-to-mobile: 767px;
+$text-size: 16px;
+
+$border-radius: 1rem;
+$border-size: 0.25rem;
+
+$border-size-small: 0.125rem;
+
+$normal-margin: 0.25rem;
+$double-margin: $normal-margin * 2;
+
+$normal-padding: 0.25rem;
+$double-padding: $normal-padding * 2;
diff --git a/sh-frontend/css/mixins/_border.scss b/sh-frontend/css/mixins/_border.scss
new file mode 100644
index 0000000..9723149
--- /dev/null
+++ b/sh-frontend/css/mixins/_border.scss
@@ -0,0 +1,31 @@
+@use "../config/config";
+@use "../config/colors";
+
+@mixin border(
+  $width: config.$border-size,
+  $style: solid,
+  $color: colors.$light-purple,
+  $border-radius: config.$border-radius
+) {
+  border: $width $style $color;
+  border-radius: $border-radius;
+}
+
+// border-bottom: 2px solid colors.$light-purple;
+// border-left: 2px solid colors.$light-purple;
+// border-right: 2px solid colors.$light-purple;
+// border-bottom-left-radius: 1.5rem;
+// border-bottom-right-radius: 1.5rem;
+
+@mixin border-inner-content(
+  $width: config.$border-size-small,
+  $style: solid,
+  $color: colors.$light-purple,
+  $border-radius: config.$border-radius
+) {
+  border-bottom: $width $style $color;
+  border-left: $width $style $color;
+  border-right: $width $style $color;
+  border-bottom-left-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+}
diff --git a/sh-frontend/css/tailwind.css b/sh-frontend/css/tailwind.css
new file mode 100644
index 0000000..e4f371d
--- /dev/null
+++ b/sh-frontend/css/tailwind.css
@@ -0,0 +1,10 @@
+/*
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+*/
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/sh-frontend/css/utility/_alerts.scss b/sh-frontend/css/utility/_alerts.scss
new file mode 100644
index 0000000..9371fc4
--- /dev/null
+++ b/sh-frontend/css/utility/_alerts.scss
@@ -0,0 +1,26 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+@use "../config/colors";
+@use "../config/config";
+
+.alert-error {
+    text-align: center;
+    color: colors.$text-color;
+    background-color: colors.$sdre-red;
+    border-radius: config.$border-radius;
+    border-width: config.$border-size;
+    border-color: colors.$sdre-yellow;
+    padding: config.$double-padding;
+    min-width: 250px;
+    max-width: 400px;
+    width: fit-content;
+    height: fit-content;
+}
+
+.alert-icon {
+    display: flex;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/sh-frontend/css/utility/_base.scss b/sh-frontend/css/utility/_base.scss
new file mode 100644
index 0000000..64af0f8
--- /dev/null
+++ b/sh-frontend/css/utility/_base.scss
@@ -0,0 +1,26 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+@use "../config/colors";
+@use "../config/config";
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  color: colors.$text-color;
+  background-color: colors.$background-color;
+  font-size: config.$text-size;
+}
+
+// to make the map fill the screen
+
+.map {
+  height: 100%;
+  z-index: 1;
+}
diff --git a/sh-frontend/css/utility/_buttons.scss b/sh-frontend/css/utility/_buttons.scss
new file mode 100644
index 0000000..078f987
--- /dev/null
+++ b/sh-frontend/css/utility/_buttons.scss
@@ -0,0 +1,20 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+@use "../config/colors";
+@use "../config/config";
+
+.button {
+  border: none;
+  padding: config.$double-padding;
+  border-radius: config.$border-radius;
+  margin-top: config.$normal-margin;
+  margin-bottom: config.$normal-margin;
+  background-color: colors.$sdre-green;
+
+  &::hover {
+    cursor: pointer;
+  }
+}
diff --git a/sh-frontend/index.html b/sh-frontend/index.html
index 3759c40..14f6aea 100644
--- a/sh-frontend/index.html
+++ b/sh-frontend/index.html
@@ -1,35 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>SDR Enthusiasts Hub</title>
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>SDR Enthusiasts Hub</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link data-trunk rel="copy-file" href="public/favicon.ico" />
+    <link data-trunk rel="copy-file" href="public/favicon-32x32.png" />
+    <link data-trunk rel="copy-file" href="public/favicon-16x16.png" />
+    <link data-trunk rel="copy-file" href="public/apple-touch-icon.png" />
+    <link data-trunk rel="copy-file" href="public/site.webmanifest" />
+    <link data-trunk rel="copy-file" href="public/android-chrome-192x192.png" />
+    <link data-trunk rel="copy-file" href="public/android-chrome-512x512.png" />
+    <link data-trunk rel="copy-file" href="public/logo.svg" />
+    <link data-trunk rel="tailwind-css" href="css/tailwind.css" />
+    <link data-trunk rel="scss" href="css/app.scss" />
+    <script
+      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
+      integrity="sha512-Dqm3h1Y4qiHUjbhxTuBGQsza0Tfppn53SHlu/uj1f+RT+xfShfe7r6czRf5r2NmllO2aKx+tYJgoxboOkn1Scg=="
+      crossorigin=""
+    ></script>
+    <link data-trunk rel="rust" />
+    <base data-trunk-public-url />
+  </head>
 
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-  <link rel="manifest" href="/site.webmanifest" />
-  <link data-trunk rel="copy-file" href="public/favicon.ico" />
-  <link data-trunk rel="copy-file" href="public/favicon-32x32.png" />
-  <link data-trunk rel="copy-file" href="public/favicon-16x16.png" />
-  <link data-trunk rel="copy-file" href="public/apple-touch-icon.png" />
-  <link data-trunk rel="copy-file" href="public/site.webmanifest" />
-  <link data-trunk rel="copy-file" href="public/android-chrome-192x192.png" />
-  <link data-trunk rel="copy-file" href="public/android-chrome-512x512.png" />
-  <link data-trunk rel="copy-file" href="public/logo.svg" />
-  <link data-trunk rel="tailwind-css" href="tailwind.css" />
-  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
-    integrity="sha512-mD70nAW2ThLsWH0zif8JPbfraZ8hbCtjQ+5RU1m4+ztZq6/MymyZeB55pWsi4YAX+73yvcaJyk61mzfYMvtm9w=="
-    crossorigin="" />
-  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
-    integrity="sha512-Dqm3h1Y4qiHUjbhxTuBGQsza0Tfppn53SHlu/uj1f+RT+xfShfe7r6czRf5r2NmllO2aKx+tYJgoxboOkn1Scg=="
-    crossorigin=""></script>
-  <link data-trunk rel="rust" />
-  <base data-trunk-public-url />
-</head>
-
-<body class="text-[#FDFDFF] bg-[#101110] p-3">
-</body>
-
-</html>
\ No newline at end of file
+  <body class="p-3"></body>
+</html>
diff --git a/sh-frontend/src/components/alerts/alert_error.rs b/sh-frontend/src/components/alerts/alert_error.rs
index 3b6479f..b9556d7 100644
--- a/sh-frontend/src/components/alerts/alert_error.rs
+++ b/sh-frontend/src/components/alerts/alert_error.rs
@@ -13,42 +13,60 @@ pub struct AlertErrorProps {
     #[prop_or_default]
     pub title: &'static str,
     pub show_alert: UseStateHandle<bool>,
-    #[prop_or_default]
+    #[prop_or(Callback::noop())]
     pub on_confirm: Callback<()>,
-    #[prop_or_default]
+    #[prop_or(Callback::noop())]
     pub on_cancel: Callback<()>,
+    #[prop_or(5000)]
+    pub timeout: u32,
+    #[prop_or("button")]
+    pub cancel_button_class: &'static str,
+    #[prop_or("button")]
+    pub confirm_button_class: &'static str,
+    #[prop_or_default]
+    pub show_cancel_button: bool,
+    #[prop_or(true)]
+    pub show_confirm_button: bool,
 }
 
+// FIXME: Before ridding of tailwind the "position" part of this prop needs us to implement some more CSS classes. See: https://github.com/next-rs/yew-alert/blob/37da6d37d10cb32dc778d4f7a642800eb8188175/src/lib.rs#L233
+
 #[function_component(AlertError)]
 pub fn alert_error(props: &AlertErrorProps) -> Html {
     let show_alert = props.show_alert.clone();
     let on_confirm = props.on_confirm.clone();
     let on_cancel = props.on_cancel.clone();
+    let show_cancel = props.show_cancel_button;
+    let show_confirm = props.show_confirm_button;
     let title = props.title;
     let message = props.message;
+    let timeout = props.timeout;
+    let cancel_button_class = props.cancel_button_class;
+    let confirm_button_class = props.confirm_button_class;
+
     html! {
         <Alert
             message={message}
-            timeout={5000}
+            timeout={timeout}
             show_alert={show_alert}
             title={title}
             container_class={""}
-            cancel_button_class={"mt-2 mx-2 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 focus:outline-none focus:border-gray-700 focus:ring focus:ring-gray-200"}
-            confirm_button_class={"mt-2 mx-2 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:border-blue-700 focus:ring focus:ring-blue-200"}
+            cancel_button_class={cancel_button_class}
+            confirm_button_class={confirm_button_class}
             icon_type={"error"}
             position={"middle"}
-            alert_class={"text-center rounded-md shadow-lg bg-red-500 text-white border border-yellow-700 p-4"}
-            title_class={"text-black"}
-            message_class={"text-black"}
-            icon_class={"flex justify-center"}
+            alert_class={"alert-error"}
+            title_class={"text-background-color"}
+            message_class={"text-background-color"}
+            icon_class={"alert-icon"}
             confirm_button_text={"Dismiss"}
-            cancel_button_text={""}
-            show_confirm_button={true}
-            show_cancel_button={false}
+            cancel_button_text={"Cancel"}
+            show_confirm_button={show_confirm}
+            show_cancel_button={show_cancel}
             show_close_button={false}
             on_confirm={ on_confirm }
             on_cancel={ on_cancel }
-            icon_color={"black"}
+            icon_color={"text-background-color"}
             icon_width={"50"}
             />
     }
diff --git a/sh-frontend/src/components/footer_components/connected.rs b/sh-frontend/src/components/footer_components/connected.rs
index 50da187..7c8f795 100644
--- a/sh-frontend/src/components/footer_components/connected.rs
+++ b/sh-frontend/src/components/footer_components/connected.rs
@@ -12,11 +12,11 @@ pub fn connected() -> Html {
     let connected = use_selector(|state: &WebAppStateTemp| state.websocket_connected.clone());
 
     html! {
-        <div class="m-2"> {
+        <div> {
             if *connected {
-                html!{<span class="text-[#73a942]">{"Connected"}</span>}
+                html!{<span class="text-sdre-green-lighter">{"Connected"}</span>}
             } else {
-                html!{<span class="text-red-600">{"Disconnected"}</span>}
+                html!{<span class="text-sdre-red-darker">{"Disconnected"}</span>}
             }
          }
          </div>
diff --git a/sh-frontend/src/components/layout_components/footer.rs b/sh-frontend/src/components/layout_components/footer.rs
index 7fdc6bd..ff56654 100644
--- a/sh-frontend/src/components/layout_components/footer.rs
+++ b/sh-frontend/src/components/layout_components/footer.rs
@@ -9,9 +9,8 @@ use yew::prelude::*;
 #[function_component(Footer)]
 pub fn footer() -> Html {
     html! {
-        <footer class="mt-1 p-0 flex flex-row h-12 w-full max-h14 max-w-full rounded-2xl border-[#8963ba] border-4 justify-center">
+        <footer class="footer">
             <Connected />
-            <div class="m-2">{ "Use of this source code is governed by an MIT-style" }</div>
         </footer>
     }
 }
diff --git a/sh-frontend/src/components/layout_components/live.rs b/sh-frontend/src/components/layout_components/live.rs
index 7720f6c..108a16e 100644
--- a/sh-frontend/src/components/layout_components/live.rs
+++ b/sh-frontend/src/components/layout_components/live.rs
@@ -126,10 +126,10 @@ pub fn live() -> Html {
 
     html! {
         <>
-            <div class="content m-0 mt-1 md:w-96 h-full w-full max-h-full rounded-2xl border-[#8963ba] border-4 overflow-hidden" style={pad_inside_left} id="live-left">
+            <div class="live-panel-left" style={pad_inside_left} id="live-left">
                 { left_panel_show.clone() }
              </div>
-            <div class="content m-0 mt-1 ml-2 h-full w-full max-h-full rounded-2xl border-[#8963ba] border-4 hidden md:block overflow-hidden" style={pad_inside_right} id="live-right" ref={node}>
+            <div class="live-panel-right" style={pad_inside_right} id="live-right" ref={node}>
                 if visible {
                     { right_panel_status.clone() }
                 }
diff --git a/sh-frontend/src/components/layout_components/nav.rs b/sh-frontend/src/components/layout_components/nav.rs
index 5d6ddfd..d5c370c 100644
--- a/sh-frontend/src/components/layout_components/nav.rs
+++ b/sh-frontend/src/components/layout_components/nav.rs
@@ -234,7 +234,7 @@ pub fn nav() -> Html {
     let hidden_menu_left = { *menu_state_left };
 
     html! {
-      <section class="top-nav rounded-3xl">
+      <section class="top-nav">
         <input id="menu-toggle-left" checked={hidden_menu_left.into()} onclick={mouse_show_menu_left.clone()} type="checkbox" />
         <label class="menu-button-container" for="menu-toggle-left">
             <div class="menu-button" title="Left Panel"></div>
@@ -242,7 +242,7 @@ pub fn nav() -> Html {
         {
             if hidden_menu_left == Checked::True {
                 html! {
-                    <ul class="menu text-[#101110] menu-left">
+                    <ul class="menu menu-left">
                     {
                         if left_panel_messages.show() {
                             html! {
@@ -302,7 +302,7 @@ pub fn nav() -> Html {
                         {
                         if hidden_menu_right == Checked::True {
                             html! {
-                                <ul class="menu text-[#101110] menu-right">
+                                <ul class="menu menu-right">
                                     {
                                         if right_panel_messages.show() {
                                             html! {
diff --git a/sh-frontend/src/components/nav_components/search.rs b/sh-frontend/src/components/nav_components/search.rs
index 7d5dfae..6ec96ea 100644
--- a/sh-frontend/src/components/nav_components/search.rs
+++ b/sh-frontend/src/components/nav_components/search.rs
@@ -9,8 +9,8 @@ use yew::prelude::*;
 #[function_component(Search)]
 pub fn search() -> Html {
     html! {
-        <div class="focus:outline-black lg:w-2/6 sm:w-3/6 text-center">
-            <input type="text" class="border border-gray-300 rounded-lg text-black p-2 focus:ring-gray-50/30 focus:outline-none focus:ring-4" placeholder="Search..." />
+        <div class="search-bar">
+            <input type="text" placeholder="Search..." />
         </div>
     }
 }
diff --git a/sh-frontend/src/components/pages/settings.rs b/sh-frontend/src/components/pages/settings.rs
index 032bea9..c340833 100644
--- a/sh-frontend/src/components/pages/settings.rs
+++ b/sh-frontend/src/components/pages/settings.rs
@@ -14,7 +14,7 @@ use yew::prelude::*;
 pub fn settings() -> Html {
     html! {
         <>
-            <div class="settings h-full w-full max-h-full max-w-full overflow-y-scroll">
+            <div class="settings">
                 <ShAppConfig />
                 <ShEnabledDataSourcesConfig />
                 <ShDataSourcesConfig />
diff --git a/sh-frontend/src/components/setting_components/sh_app_config.rs b/sh-frontend/src/components/setting_components/sh_app_config.rs
index becf04e..1ad760f 100644
--- a/sh-frontend/src/components/setting_components/sh_app_config.rs
+++ b/sh-frontend/src/components/setting_components/sh_app_config.rs
@@ -225,7 +225,7 @@ pub fn sh_app_config() -> Html {
                         let log_level: String = app.log_level.clone();
                         let data_path: String = app.data_path.clone();
                         html! {
-                            <form onsubmit={onsubmit} class="registration-form">
+                            <form onsubmit={onsubmit}>
                                 <div class="settings-item"><InputField input_node_ref={database_url_node} label={"Database URL"} name={"databaseurl"} field_type={InputFieldType::Text} input_value={database_url} select_options={None} read_only={true} /></div>
                                 <div class="settings-item"><InputField input_node_ref={log_level_node} label={"Log Level"} name={"loglevel"} field_type={InputFieldType::Select} input_value={log_level} select_options={Some(log_levels)} /></div>
                                 <div class="settings-item"><InputField input_node_ref={data_path_node} label={"Data Path"} name={"datapath"} field_type={InputFieldType::Text} input_value={data_path} select_options={None} read_only={true}/></div>
diff --git a/sh-frontend/tailwind.config.js b/sh-frontend/tailwind.config.js
index 4beeb6a..4cf2faf 100644
--- a/sh-frontend/tailwind.config.js
+++ b/sh-frontend/tailwind.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   mode: "jit",
   content: {
-    files: ["src/**/*.rs", "**/*.html"],
+    files: ["src/**/*.rs", "**/*.html", "**/*.scss"],
   },
   darkMode: "class", // 'media' or 'class'
   theme: {
diff --git a/sh-frontend/tailwind.css b/sh-frontend/tailwind.css
deleted file mode 100644
index 8d37086..0000000
--- a/sh-frontend/tailwind.css
+++ /dev/null
@@ -1,364 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-h2 {
-  vertical-align: center;
-  text-align: center;
-}
-
-html,
-body {
-  height: 100%;
-  width: 100%;
-  max-width: 100%;
-  max-height: 100%;
-  overflow: hidden;
-}
-
-/* Navbar styling and animation */
-
-.top-nav {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #00baf0;
-  background: linear-gradient(to left, #8963ba, #3c2f66);
-  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-  color: #fff;
-  /* height: 50px; */
-  padding: 1em;
-  z-index: 1000;
-}
-
-.menu {
-  display: flex;
-  flex-direction: row;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-.menu > li {
-  margin: 0 1rem;
-  overflow: hidden;
-}
-
-.menu-button-container {
-  display: none;
-  height: 100%;
-  width: 30px;
-  cursor: pointer;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-#menu-toggle-right {
-  display: none;
-}
-
-#menu-toggle-left {
-  display: none;
-}
-
-.menu-button:hover,
-.menu-button:hover::before,
-.menu-button:hover::after {
-  background-color: #73a942;
-}
-
-.menu-button,
-.menu-button::before,
-.menu-button::after {
-  display: block;
-  background-color: #fdfdff;
-  position: absolute;
-  height: 4px;
-  width: 30px;
-  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
-  border-radius: 2px;
-}
-
-.menu-button::before {
-  content: "";
-  margin-top: -8px;
-}
-
-.menu-button::after {
-  content: "";
-  margin-top: 8px;
-}
-
-#menu-toggle-right:checked + .menu-button-container .menu-button::before {
-  margin-top: 0px;
-  transform: rotate(405deg);
-}
-
-#menu-toggle-right:checked + .menu-button-container .menu-button {
-  background: rgba(255, 255, 255, 0);
-}
-
-#menu-toggle-right:checked + .menu-button-container .menu-button::after {
-  margin-top: 0px;
-  transform: rotate(-405deg);
-}
-
-#menu-toggle-left:checked + .menu-button-container .menu-button::before {
-  margin-top: 0px;
-  transform: rotate(405deg);
-}
-
-#menu-toggle-left:checked + .menu-button-container .menu-button {
-  background: rgba(255, 255, 255, 0);
-}
-
-#menu-toggle-left:checked + .menu-button-container .menu-button::after {
-  margin-top: 0px;
-  transform: rotate(-405deg);
-}
-
-.menu-button-container {
-  display: flex;
-}
-.menu {
-  position: absolute;
-  top: 0;
-  margin-top: 65px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.menu-right {
-  right: 30px;
-}
-
-.menu-left {
-  left: 30px;
-}
-
-#menu-toggle-right ~ .menu li {
-  height: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-#menu-toggle-right:checked ~ .menu li {
-  border: 1px solid #333;
-  height: 2.5em;
-  padding: 0.5em;
-  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-#menu-toggle-left ~ .menu li {
-  height: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-#menu-toggle-left:checked ~ .menu li {
-  border: 1px solid #333;
-  height: 2.5em;
-  padding: 0.5em;
-  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.menu > li {
-  display: flex;
-  margin: 0;
-  padding: 0.5em 0;
-  min-width: 200px;
-  max-width: 767px;
-  color: #fdfdff;
-  background-color: #222;
-  justify-content: left;
-}
-
-.menu > li:not(:last-child) {
-  border-bottom: 1px solid #444;
-}
-
-@media (max-width: 767px) {
-  .menu {
-    width: 100%;
-  }
-
-  .menu > li {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .menu-right {
-    right: 0px;
-  }
-
-  .menu-left {
-    left: 0px;
-  }
-}
-
-.map {
-  height: 100%;
-  z-index: 1;
-}
-
-/* Settings (and more?) collapsable styling */
-
-.wrap-collabsible {
-  margin-bottom: 1.2rem 0;
-}
-
-input[type="checkbox"] {
-  display: none;
-}
-
-.lbl-toggle {
-  display: block;
-  text-transform: uppercase;
-  padding: 0.5rem;
-  margin-top: 0.25rem;
-  color: #fdfdff;
-  background-color: #8963ba;
-  background: linear-gradient(to left, #8963ba, #3c2f66);
-  cursor: pointer;
-  border-radius: 1.5rem;
-  transition: all 0.25s ease-out;
-}
-
-.lbl-toggle:hover {
-  color: #73a942;
-}
-
-.lbl-toggle::before {
-  content: " ";
-  display: inline-block;
-
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid currentColor;
-  vertical-align: middle;
-  margin-right: 0.7rem;
-  transform: translateY(-2px);
-
-  transition: transform 0.2s ease-out;
-}
-
-.toggle:checked + .lbl-toggle::before {
-  transform: rotate(90deg) translateX(-3px);
-}
-
-.collapsible-content {
-  max-height: 0px;
-  overflow: hidden;
-  transition: max-height 0.25s ease-in-out;
-  flex-shrink: 0;
-}
-
-.toggle:checked + .lbl-toggle + .collapsible-content {
-  max-height: 100vh;
-}
-
-.toggle:checked + .lbl-toggle {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.collapsible-content .content-inner {
-  background: #101110;
-  /* FIXME: this should be a gradient that matches the element above */
-  border-bottom: 2px solid #8963ba;
-  border-left: 2px solid #8963ba;
-  border-right: 2px solid #8963ba;
-  border-bottom-left-radius: 1.5rem;
-  border-bottom-right-radius: 1.5rem;
-  padding: 0.5rem;
-}
-
-/* Input Classes */
-
-.button {
-  border: none;
-  padding: 0.3rem;
-  border-radius: 1.5rem;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  background-color: #73a942;
-}
-
-.button::hover {
-  cursor: pointer;
-}
-
-.settings {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-  /* justify-content: center; */
-  height: 100%;
-}
-
-/* Settings layouts */
-
-.settings-item {
-  display: flex;
-  flex-direction: row;
-  align-items: left;
-  /* justify-content: center; */
-  height: 100%;
-  width: 100%;
-  padding-bottom: 0.25rem;
-  flex-shrink: 0;
-}
-
-.settings-item > *:first-child {
-  width: 200px;
-}
-
-.settings-item > *:nth-child(2) {
-  width: 100%;
-}
-
-input[type="text"].text-black {
-  width: 100%;
-  padding-left: 0.25rem;
-}
-
-input:read-only,
-select:disabled {
-  background: grey;
-}
-
-select.text-black {
-  width: 100%;
-  padding-left: 0.25rem;
-}
-
-.settings-item > *:only-child {
-  width: 100%;
-}
-
-.settings-item.buttons > *:first-child {
-  width: 250px;
-}
-
-@media (max-width: 767px) {
-  .settings-item {
-    flex-direction: column;
-  }
-
-  .settings-item > *:first-child {
-    width: 100%;
-  }
-
-  .settings-item > *:nth-child(2) {
-    width: 100%;
-  }
-
-  .settings-item > *:only-child {
-    width: 100%;
-  }
-}
diff --git a/src/libraries/sh-api/src/lib.rs b/src/libraries/sh-api/src/lib.rs
index 56e23e8..8ad661e 100644
--- a/src/libraries/sh-api/src/lib.rs
+++ b/src/libraries/sh-api/src/lib.rs
@@ -183,12 +183,10 @@ async fn ws_handle_socket(mut socket: WebSocket, state: Arc<ShAPIServerState>) {
                         }
 
                         debug!("Received UserUpdateAppConfig message with data");
-                        let data = match message.data {
-                            MessageData::ShAppConfig(data) => data,
-                            _ => {
-                                error!("Received UserUpdateAppConfig message with incorrect data type");
-                                continue;
-                            }
+                        // FIXME: This needs to be a match once messagedata has more shit in it
+                        let MessageData::ShAppConfig(data) = message.data else {
+                            error!("Received UserUpdateAppConfig message with incorrect data type");
+                            continue;
                         };
 
                         debug!("Received app config: {:?}", data);
diff --git a/src/libraries/sh-common/src/lib.rs b/src/libraries/sh-common/src/lib.rs
index 3a46533..578ce88 100644
--- a/src/libraries/sh-common/src/lib.rs
+++ b/src/libraries/sh-common/src/lib.rs
@@ -18,7 +18,10 @@ use std::sync::{Arc, Mutex};
 
 use async_trait::async_trait;
 use serde::{Deserialize, Serialize};
-use sh_config::{web::{sh_web_config::ShWebConfig, sh_web_sdrehub::ShWebSDREHub}, ShConfig};
+use sh_config::{
+    web::{sh_web_config::ShWebConfig, sh_web_sdrehub::ShWebSDREHub},
+    ShConfig,
+};
 
 #[async_trait]
 pub trait ShDataUser {
@@ -36,7 +39,7 @@ pub type ShDataUserList = Vec<Box<dyn ShDataUser + Send + Sync>>;
 #[derive(Serialize, Deserialize, Debug)]
 pub enum UserMessageTypes {
     UserRequestConfig,
-    UserUpdateAppConfig
+    UserUpdateAppConfig,
 }
 
 #[derive(Serialize, Deserialize, Debug)]

From 2c583fe7c77eff6f59d4c155c04bcc9166f2650f Mon Sep 17 00:00:00 2001
From: Fred Clausen <43556888+fredclausen@users.noreply.github.com>
Date: Sat, 1 Jun 2024 09:10:54 -0600
Subject: [PATCH 9/9] update cargo deps

---
 Cargo.lock                       | 8 ++++----
 src/bin/sdre-hub/Cargo.toml      | 2 +-
 src/bin/sh-tauri/Cargo.toml      | 2 +-
 src/libraries/sdrehub/Cargo.toml | 2 +-
 src/libraries/sh-api/Cargo.toml  | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index e65e82f..a89de20 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -4343,9 +4343,9 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
 name = "tokio"
-version = "1.37.0"
+version = "1.38.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1adbebffeca75fcfd058afa480fb6c0b81e165a0323f9c9d39c9697e37c46787"
+checksum = "ba4f4a02a7a80d6f274636f0aa95c7e383b912d41fe721a31f29e29698585a4a"
 dependencies = [
  "backtrace",
  "bytes",
@@ -4363,9 +4363,9 @@ dependencies = [
 
 [[package]]
 name = "tokio-macros"
-version = "2.2.0"
+version = "2.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5b8a1e28f2deaa14e508979454cb3a223b10b938b45af148bc0986de36f1923b"
+checksum = "5f5ae998a069d4b5aba8ee9dad856af7d520c3699e6159b185c2acd48155d39a"
 dependencies = [
  "proc-macro2",
  "quote",
diff --git a/src/bin/sdre-hub/Cargo.toml b/src/bin/sdre-hub/Cargo.toml
index 4ba9165..907e41b 100644
--- a/src/bin/sdre-hub/Cargo.toml
+++ b/src/bin/sdre-hub/Cargo.toml
@@ -16,4 +16,4 @@ keywords.workspace = true
 [dependencies]
 sdrehub = { path = "../../libraries/sdrehub" }
 sh-config = { path = "../../libraries/sh-config" }
-tokio = { version = "1.37.0", features = ["full", "tracing"] }
+tokio = { version = "1.38.0", features = ["full", "tracing"] }
diff --git a/src/bin/sh-tauri/Cargo.toml b/src/bin/sh-tauri/Cargo.toml
index 1832842..42ebf42 100644
--- a/src/bin/sh-tauri/Cargo.toml
+++ b/src/bin/sh-tauri/Cargo.toml
@@ -24,7 +24,7 @@ serde = { version = "1.0.203", features = ["derive"] }
 sdrehub = { path = "../../libraries/sdrehub" }
 sh-config = { path = "../../libraries/sh-config" }
 tauri = { version = "1.6.7", features = ["api-all"] }
-tokio = { version = "1.37.0", features = ["full", "tracing"] }
+tokio = { version = "1.38.0", features = ["full", "tracing"] }
 
 [features]
 default = ["custom-protocol"]
diff --git a/src/libraries/sdrehub/Cargo.toml b/src/libraries/sdrehub/Cargo.toml
index 02abe83..49a732e 100644
--- a/src/libraries/sdrehub/Cargo.toml
+++ b/src/libraries/sdrehub/Cargo.toml
@@ -16,7 +16,7 @@ keywords.workspace = true
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-tokio = { version = "1.37.0", features = ["full", "tracing"] }
+tokio = { version = "1.38.0", features = ["full", "tracing"] }
 log = "0.4.21"
 sh-config = { path = "../sh-config" }
 sh-api = { path = "../sh-api" }
diff --git a/src/libraries/sh-api/Cargo.toml b/src/libraries/sh-api/Cargo.toml
index 6c8eb97..7eb9300 100644
--- a/src/libraries/sh-api/Cargo.toml
+++ b/src/libraries/sh-api/Cargo.toml
@@ -23,4 +23,4 @@ serde = { version = "1.0.203", features = ["derive"] }
 serde_json = "1.0.117"
 sh-common = { path = "../sh-common" }
 sh-config = { path = "../sh-config" }
-tokio = { version = "1.37.0", features = ["full", "tracing"] }
+tokio = { version = "1.38.0", features = ["full", "tracing"] }