From 047b5a85d2d10271d47ef30015c5a12740626400 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 5 Jan 2026 11:48:19 +0200
Subject: [PATCH] chore(client): load stylesheets

---
 apps/client/src/desktop.html             | 36 ++++++++++++++++++++++--
 apps/server/src/assets/views/desktop.ejs | 15 ----------
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/apps/client/src/desktop.html b/apps/client/src/desktop.html
index 3ad6a9649..334e12d6e 100644
--- a/apps/client/src/desktop.html
+++ b/apps/client/src/desktop.html
@@ -27,20 +27,52 @@
         <!-- Bootstrap (request server for required information) -->
         <script>
             async function bootstrap() {
+                await setupGlob();
+                await loadStylesheets();
+                await loadScripts();
+            }
+
+            async function setupGlob() {
                 const response = await fetch("./bootstrap");
                 const json = await response.json();
                 
                 global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
-                
                 window.glob = {
                     ...json,
                     activeDialog: null
                 };
+            }
 
-                const { assetPath } = json;
+            async function loadStylesheets() {
+                const { assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
+                const cssToLoad = [];
+                cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
+                if (themeCssUrl) {
+                    cssToLoad.push(themeCssUrl);
+                }
+                if (themeUseNextAsBase === "next") {
+                    cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`)
+                } else if (themeUseNextAsBase === "next-dark") {
+                    cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`)
+                } else if (themeUseNextAsBase === "next-light") {
+                    cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`)
+                }
+                cssToLoad.push(`${assetPath}/stylesheets/style.css`);
+
+                for (const href of cssToLoad) {
+                    const linkEl = document.createElement("link");
+                    linkEl.href = href;
+                    linkEl.rel = "stylesheet";
+                    document.body.appendChild(linkEl);
+                }
+            }
+
+            async function loadScripts() {
+                const assetPath = glob.assetPath;
                 await import(`./${assetPath}/runtime.js`);
                 await import(`./${assetPath}/desktop.js`);
             }
+            
             bootstrap();
         </script>
 
diff --git a/apps/server/src/assets/views/desktop.ejs b/apps/server/src/assets/views/desktop.ejs
index a0e395226..1a81cc883 100644
--- a/apps/server/src/assets/views/desktop.ejs
+++ b/apps/server/src/assets/views/desktop.ejs
@@ -12,21 +12,6 @@
 
 <link href="<%= assetPath %>/stylesheets/ckeditor-theme.css" rel="stylesheet">
 <link href="api/fonts" rel="stylesheet">
-<link href="<%= assetPath %>/stylesheets/theme-light.css" rel="stylesheet">
-
-<% if (themeCssUrl) { %>
-<link href="<%= themeCssUrl %>" rel="stylesheet">
-<% } %>
-
-<% if (themeUseNextAsBase === "next") { %>
-  <link href="<%= assetPath %>/stylesheets/theme-next.css" rel="stylesheet">
-<% } else if (themeUseNextAsBase === "next-dark") { %>
-  <link href="<%= assetPath %>/stylesheets/theme-next-dark.css" rel="stylesheet">
-<% } else if (themeUseNextAsBase === "next-light") { %>
-  <link href="<%= assetPath %>/stylesheets/theme-next-light.css" rel="stylesheet">
-<% } %>
-
-<link href="<%= assetPath %>/stylesheets/style.css" rel="stylesheet">
 
 <script src="<%= appPath %>/desktop.js" crossorigin type="module"></script>