From b48d9aa0520a790ebddb794fca742123f2f8d06d Mon Sep 17 00:00:00 2001
From: Irastris <irastris15@gmail.com>
Date: Tue, 28 Apr 2026 19:09:47 -0400
Subject: [PATCH] Split window document and styles out to files for readability

---
 res/rcss/window.rcss   | 142 +++++++++++++++++++++++++++++++++++
 res/rml/window.rml     |  19 +++++
 src/dusk/ui/window.cpp | 167 +----------------------------------------
 3 files changed, 162 insertions(+), 166 deletions(-)
 create mode 100644 res/rcss/window.rcss
 create mode 100644 res/rml/window.rml

diff --git a/res/rcss/window.rcss b/res/rcss/window.rcss
new file mode 100644
index 0000000000..1596be869e
--- /dev/null
+++ b/res/rcss/window.rcss
@@ -0,0 +1,142 @@
+*, *:before, *:after {
+    box-sizing: border-box;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    padding: 64dp;
+    font-family: "Fira Sans";
+    font-weight: normal;
+    font-style: normal;
+    font-size: 15dp;
+    color: #E0DBC8;
+}
+
+.window {
+    max-width: 1088dp;
+    max-height: 768dp;
+    margin: auto;
+    border-radius: 14dp;
+    overflow: hidden;
+    border: 2dp #92875B;
+    backdrop-filter: blur(5dp);
+    box-shadow: 0 0 25dp 5dp;
+    background-color: rgba(21, 22, 16, 90%);
+}
+
+.window .tab-bar {
+    display: flex;
+    height: 64dp;
+    background-color: rgba(217, 217, 217, 10%);
+    font-family: "Fira Sans Condensed";
+    font-weight: bold;
+    font-size: 18dp;
+    text-transform: uppercase;
+    border-bottom: 2dp #92875B;
+}
+
+.window .tab-bar .tab {
+    padding: 0 24dp;
+    line-height: 64dp;
+    opacity: 0.25;
+    tab-index: auto;
+    nav: horizontal;
+    focus: auto;
+}
+
+.window .tab-bar .tab.active {
+    opacity: 1;
+    border-bottom: 4dp #C2A42D;
+    font-effect: glow(0dp 4dp 0dp 4dp black);
+    decorator: linear-gradient(to bottom, rgba(194, 164, 45, 0%) 0%, rgba(194, 164, 45, 15%) 100%);
+}
+
+.window .tab-bar .tab:focus-visible {
+    opacity: 1;
+    font-effect: glow(0dp 4dp 0dp 4dp black);
+    decorator: linear-gradient(to bottom, rgba(194, 164, 45, 0%) 0%, rgba(194, 164, 45, 15%) 100%);
+}
+
+.window .content {
+    display: flex;
+    height: 100%;
+}
+
+.window .content .pane {
+    display: flex;
+    flex-flow: column;
+    flex: 1 1 0;
+    height: 100%;
+    padding: 24dp;
+    gap: 8dp;
+    overflow: auto;
+}
+
+.window .content .pane:not(:last-of-type) {
+    border-right: 1dp #92875B;
+}
+
+.section-heading {
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 22dp;
+    opacity: 0.25;
+}
+
+.button {
+    text-align: center;
+    background-color: rgba(17, 16, 10, 20%);
+    opacity: 0.9;
+    padding: 8dp 16dp;
+    border-radius: 14dp;
+    box-shadow: rgba(146, 135, 91, 25%) 0 0 0 1dp;
+    font-size: 20dp;
+    transition: background-color 0.1s linear-in-out, opacity 0.1s linear-in-out;
+}
+
+.button.active, .button:hover {
+    background-color: rgba(204, 184, 119, 20%);
+    box-shadow: #C2A42D 0 0 0 2dp;
+}
+
+.button.selected, .button:active {
+    opacity: 1;
+    background-color: rgba(204, 184, 119, 40%);
+    box-shadow: #C2A42D 0 0 0 2dp;
+}
+
+.select-button {
+    display: flex;
+    align-items: center;
+    gap: 8dp;
+    background-color: rgba(17, 16, 10, 20%);
+    opacity: 0.9;
+    padding: 8dp 16dp;
+    border-radius: 14dp;
+    box-shadow: rgba(146, 135, 91, 25%) 0 0 0 1dp;
+    transition: background-color 0.1s linear-in-out, opacity 0.1s linear-in-out;
+}
+
+.select-button.active, .select-button:hover {
+    background-color: rgba(204, 184, 119, 20%);
+    box-shadow: #C2A42D 0 0 0 2dp;
+}
+
+.select-button.selected, .select-button:active {
+    opacity: 1;
+    background-color: rgba(204, 184, 119, 40%);
+    box-shadow: #C2A42D 0 0 0 2dp;
+}
+
+.select-button .key {
+    font-family: "Fira Sans Condensed";
+    font-weight: bold;
+    font-size: 18dp;
+    text-transform: uppercase;
+}
+
+.select-button .value {
+    margin-left: auto;
+    font-size: 20dp;
+}
diff --git a/res/rml/window.rml b/res/rml/window.rml
new file mode 100644
index 0000000000..93a4397ae1
--- /dev/null
+++ b/res/rml/window.rml
@@ -0,0 +1,19 @@
+<rml>
+<head>
+    <title>Window</title>
+    <link type="text/rcss" href="window.rcss" />
+</head>
+<body data-model="window">
+    <div class="window">
+        <div class="tab-bar">
+            <button class="tab"
+                data-for="tab, i : tabs"
+                data-class-active="i == active_tab"
+                data-event-click="set_active_tab(i)">
+                {{ tab.label }}
+            </button>
+        </div>
+        <div id="content" class="content"></div>
+    </div>
+</body>
+</rml>
diff --git a/src/dusk/ui/window.cpp b/src/dusk/ui/window.cpp
index 749d737385..e7ac3eb3c6 100644
--- a/src/dusk/ui/window.cpp
+++ b/src/dusk/ui/window.cpp
@@ -7,171 +7,6 @@
 namespace dusk::ui {
 namespace {
 
-const Rml::String kWindowDocumentRml = R"RML(
-<rml>
-<head>
-    <title>Window</title>
-    <style>
-        *, *:before, *:after {
-          box-sizing: border-box;
-        }
-
-		body {
-            width: 100%;
-            height: 100%;
-		    padding: 64dp;
-	        font-family: "Fira Sans";
-	        font-weight: normal;
-	        font-style: normal;
-	        font-size: 15dp;
-	        color: #E0DBC8;
-		}
-
-        .window {
-			max-width: 1088dp;
-			max-height: 768dp;
-            margin: auto;
-            border-radius: 14dp;
-            overflow: hidden;
-            border: 2dp #92875B;
-            backdrop-filter: blur(5dp);
-            box-shadow: 0 0 25dp 5dp;
-            background-color: rgba(21, 22, 16, 90%);
-        }
-
-        .window .tab-bar {
-            display: flex;
-            height: 64dp;
-            background-color: rgba(217, 217, 217, 10%);
-            font-family: "Fira Sans Condensed";
-            font-weight: bold;
-            font-size: 18dp;
-            text-transform: uppercase;
-            border-bottom: 2dp #92875B;
-        }
-
-        .window .tab-bar .tab {
-            padding: 0 24dp;
-            line-height: 64dp;
-            opacity: 0.25;
-            tab-index: auto;
-            nav: horizontal;
-            focus: auto;
-        }
-
-        .window .tab-bar .tab.active {
-            opacity: 1;
-            border-bottom: 4dp #C2A42D;
-            font-effect: glow(0dp 4dp 0dp 4dp black);
-            decorator: linear-gradient(to bottom, rgba(194, 164, 45, 0%) 0%, rgba(194, 164, 45, 15%) 100%);
-        }
-
-        .window .tab-bar .tab:focus-visible {
-            opacity: 1;
-            font-effect: glow(0dp 4dp 0dp 4dp black);
-            decorator: linear-gradient(to bottom, rgba(194, 164, 45, 0%) 0%, rgba(194, 164, 45, 15%) 100%);
-        }
-
-        .window .content {
-            display: flex;
-            height: 100%;
-        }
-
-        .window .content .pane {
-            display: flex;
-            flex-flow: column;
-            flex: 1 1 0;
-            height: 100%;
-            padding: 24dp;
-            gap: 8dp;
-            overflow: auto;
-        }
-
-        .window .content .pane:not(:last-of-type) {
-            border-right: 1dp #92875B;
-        }
-
-        .section-heading {
-            font-weight: bold;
-            text-transform: uppercase;
-            font-size: 22dp;
-            opacity: 0.25;
-        }
-
-        .button {
-            text-align: center;
-            background-color: rgba(17, 16, 10, 20%);
-            opacity: 0.9;
-            padding: 8dp 16dp;
-            border-radius: 14dp;
-            box-shadow: rgba(146, 135, 91, 25%) 0 0 0 1dp;
-            font-size: 20dp;
-            transition: background-color 0.1s linear-in-out, opacity 0.1s linear-in-out;
-        }
-
-        .button.active, .button:hover {
-            background-color: rgba(204, 184, 119, 20%);
-            box-shadow: #C2A42D 0 0 0 2dp;
-        }
-
-        .button.selected, .button:active {
-            opacity: 1;
-            background-color: rgba(204, 184, 119, 40%);
-            box-shadow: #C2A42D 0 0 0 2dp;
-        }
-
-        .select-button {
-            display: flex;
-            align-items: center;
-            gap: 8dp;
-            background-color: rgba(17, 16, 10, 20%);
-            opacity: 0.9;
-            padding: 8dp 16dp;
-            border-radius: 14dp;
-            box-shadow: rgba(146, 135, 91, 25%) 0 0 0 1dp;
-            transition: background-color 0.1s linear-in-out, opacity 0.1s linear-in-out;
-        }
-
-        .select-button.active, .select-button:hover {
-            background-color: rgba(204, 184, 119, 20%);
-            box-shadow: #C2A42D 0 0 0 2dp;
-        }
-
-        .select-button.selected, .select-button:active {
-            opacity: 1;
-            background-color: rgba(204, 184, 119, 40%);
-            box-shadow: #C2A42D 0 0 0 2dp;
-        }
-
-        .select-button .key {
-            font-family: "Fira Sans Condensed";
-            font-weight: bold;
-            font-size: 18dp;
-            text-transform: uppercase;
-        }
-
-        .select-button .value {
-            margin-left: auto;
-            font-size: 20dp;
-        }
-	</style>
-</head>
-<body data-model="window">
-    <div class="window">
-        <div class="tab-bar">
-            <button class="tab"
-                data-for="tab, i : tabs"
-                data-class-active="i == active_tab"
-                data-event-click="set_active_tab(i)">
-                {{ tab.label }}
-            </button>
-        </div>
-        <div id="content" class="content"></div>
-    </div>
-</body>
-</rml>
-)RML";
-
 bool setup_window_model(Rml::Context* context, WindowModel& model, Rml::DataModelHandle& handle) {
     Rml::DataModelConstructor constructor = context->CreateDataModel("window");
     if (!constructor) {
@@ -239,7 +74,7 @@ Window::Window(WindowModel model) : mModel(std::move(model)) {
         return;
     }
     setup_window_model(context, mModel, mModelHandle);
-    mDocument = context->LoadDocumentFromMemory(kWindowDocumentRml);
+    mDocument = context->LoadDocument("res/rml/window.rml");
     if (mDocument == nullptr) {
         return;
     }