move debug svelte into debug folder. also control panel UI

src-tauri/src/ui/control_panel/mod.rs

@@ -0,0 +1,35 @@
+use tauri::{AppHandle, Manager, WebviewUrl};
+
+const WINDOW_LABEL: &str = "control-panel";
+
+pub fn init(handle: &AppHandle) {
+    if let Some(window) = handle.get_webview_window(WINDOW_LABEL) {
+        if !window.is_visible().unwrap() {
+            window.center().unwrap();
+            window.show().unwrap();
+        };
+        window.set_focus().unwrap();
+        return;
+    };
+
+    let builder = tauri::WebviewWindowBuilder::new(
+        handle,
+        WINDOW_LABEL,
+        WebviewUrl::App("/control-panel".into()),
+    )
+    .title("Wyd Control Panel")
+    .inner_size(400.0, 600.0)
+    .min_inner_size(400.0, 600.0)
+    .resizable(false)
+    .maximizable(false)
+    .visible(true);
+
+    let window = builder.build().unwrap();
+    let window_c = window.clone();
+    window.on_window_event(move |event: &tauri::WindowEvent| {
+        if let tauri::WindowEvent::CloseRequested { api, .. } = event {
+            api.prevent_close();
+            window_c.hide().unwrap();
+        }
+    });
+}

src-tauri/src/ui/mod.rs

@@ -1,5 +1,6 @@
 use tauri::AppHandle;
 
+mod control_panel;
 #[cfg(debug_assertions)]
 mod debug;
 pub mod scene;
@@ -8,4 +9,5 @@ pub fn init(app_handle: &AppHandle) {
     #[cfg(debug_assertions)]
     debug::init(app_handle);
     scene::init(app_handle);
+    control_panel::init(app_handle);
 }

src/app.css

@@ -27,9 +27,9 @@
   --color-warning-content: oklch(100% 0 0);
   --color-error: oklch(70% 0.191 22.216);
   --color-error-content: oklch(100% 0 0);
-  --radius-selector: 0.25rem;
-  --radius-field: 0.25rem;
-  --radius-box: 0.25rem;
+  --radius-selector: 0rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
   --size-selector: 0.1875rem;
   --size-field: 0.1875rem;
   --border: 1px;
@@ -63,9 +63,9 @@
   --color-warning-content: oklch(0% 0 0);
   --color-error: oklch(63% 0.237 25.331);
   --color-error-content: oklch(100% 0 0);
-  --radius-selector: 0.25rem;
-  --radius-field: 0.25rem;
-  --radius-box: 0.25rem;
+  --radius-selector: 0rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
   --size-selector: 0.1875rem;
   --size-field: 0.1875rem;
   --border: 1px;

src/routes/+page.svelte

@@ -1,10 +1,10 @@
 <script>
-  import FriendsList from "$lib/components/friends-list.svelte";
-  import FriendStatuses from "$lib/components/friend-statuses.svelte";
-  import ConnectionStatus from "$lib/components/connection-status.svelte";
-  import Profile from "$lib/components/profile.svelte";
-  import RemotesList from "$lib/components/remotes-list.svelte";
-  import LiveMetadata from "$lib/components/live-metadata.svelte";
+  import FriendsList from "$lib/components/debug/friends-list.svelte";
+  import FriendStatuses from "$lib/components/debug/friend-statuses.svelte";
+  import ConnectionStatus from "$lib/components/debug/connection-status.svelte";
+  import Profile from "$lib/components/debug/profile.svelte";
+  import RemotesList from "$lib/components/debug/remotes-list.svelte";
+  import LiveMetadata from "$lib/components/debug/live-metadata.svelte";
 </script>
 
 <main>

src/routes/control-panel/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  //
+</script>
+
+<section>
+  <div>
+    <p>Control panel</p>
+  </div>
+</section>