From 42bbd7c5fd8e423dd3ccf583080354ff28772ad2 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Thu, 4 Sep 2025 19:02:24 +0200
Subject: [PATCH] ui/imports: fix asset imports

---
 pkgs/clan-app/ui/gtk.webview.js                      |  2 +-
 .../src/workflows/InstallMachine/UpdateMachine.tsx   |  7 ++-----
 .../InstallMachine/steps/createInstaller.tsx         |  7 ++-----
 .../workflows/InstallMachine/steps/installSteps.tsx  |  7 ++-----
 pkgs/clan-app/ui/vite.config.ts                      | 12 ++++++++++++
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/pkgs/clan-app/ui/gtk.webview.js b/pkgs/clan-app/ui/gtk.webview.js
index e75eecc12..e0c2f4b98 100644
--- a/pkgs/clan-app/ui/gtk.webview.js
+++ b/pkgs/clan-app/ui/gtk.webview.js
@@ -38,7 +38,7 @@ fs.readFile(manifestPath, { encoding: "utf8" }, (err, data) => {
   assets.forEach((asset) => {
     // console.log(asset);
     if (asset.src === "index.html") {
-      asset.css.forEach((cssEntry) => {
+      asset.css?.forEach((cssEntry) => {
         // css to be processed
 
         const css = fs.readFileSync(`dist/${cssEntry}`, "utf8");
diff --git a/pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.tsx b/pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.tsx
index b2b26258e..1d7a6285a 100644
--- a/pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.tsx
+++ b/pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.tsx
@@ -19,6 +19,7 @@ import { LoadingBar } from "@/src/components/LoadingBar/LoadingBar";
 import { useApiClient } from "@/src/hooks/ApiClient";
 import { useClanURI } from "@/src/hooks/clan";
 import { AlertProps } from "@/src/components/Alert/Alert";
+import usbLogo from "@/logos/usb-stick-min.png?url";
 
 // TODO: Deduplicate
 interface UpdateStepperProps {
@@ -135,11 +136,7 @@ const UpdateProgress = () => {
 
   return (
     <div class="relative flex size-full flex-col items-center justify-end bg-inv-4">
-      <img
-        src="/logos/usb-stick-min.png"
-        alt="usb logo"
-        class="absolute top-2 z-0"
-      />
+      <img src={usbLogo} alt="usb logo" class="absolute top-2 z-0" />
       <div class="z-10 mb-6 flex w-full max-w-md flex-col items-center gap-2 fg-inv-1">
         <Typography
           hierarchy="title"
diff --git a/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/createInstaller.tsx b/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/createInstaller.tsx
index 9e09108d7..d9ce07061 100644
--- a/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/createInstaller.tsx
+++ b/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/createInstaller.tsx
@@ -20,6 +20,7 @@ import { useSystemStorageOptions } from "@/src/hooks/queries";
 import { useApiClient } from "@/src/hooks/ApiClient";
 import { onMount } from "solid-js";
 import cx from "classnames";
+import usbLogo from "@/logos/usb-stick-min.png?url";
 
 const Prose = () => (
   <StepLayout
@@ -335,11 +336,7 @@ const FlashProgress = () => {
         "relative flex size-full flex-col items-center justify-end bg-inv-4",
       )}
     >
-      <img
-        src="/logos/usb-stick-min.png"
-        alt="usb logo"
-        class="absolute top-4 z-0"
-      />
+      <img src={usbLogo} alt="usb logo" class="absolute top-4 z-0" />
       <div class="z-10 mb-6 flex w-full max-w-md flex-col items-center gap-2 fg-inv-1">
         <Typography
           hierarchy="title"
diff --git a/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/installSteps.tsx b/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/installSteps.tsx
index 8fadd0bb4..b6bd9fd46 100644
--- a/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/installSteps.tsx
+++ b/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/installSteps.tsx
@@ -36,6 +36,7 @@ import { useApiClient } from "@/src/hooks/ApiClient";
 import { ProcessMessage, useNotifyOrigin } from "@/src/hooks/notify";
 import { Loader } from "@/src/components/Loader/Loader";
 import { Button as KButton } from "@kobalte/core/button";
+import usbLogo from "@/logos/usb-stick-min.png?url";
 
 export const InstallHeader = (props: { machineName: string }) => {
   return (
@@ -829,11 +830,7 @@ const InstallProgress = () => {
 
   return (
     <div class="relative flex size-full flex-col items-center justify-end bg-inv-4">
-      <img
-        src="/logos/usb-stick-min.png"
-        alt="usb logo"
-        class="absolute top-2 z-0"
-      />
+      <img src={usbLogo} alt="usb logo" class="absolute top-2 z-0" />
       <div class="z-10 mb-6 flex w-full max-w-md flex-col items-center gap-2 fg-inv-1">
         <Typography
           hierarchy="title"
diff --git a/pkgs/clan-app/ui/vite.config.ts b/pkgs/clan-app/ui/vite.config.ts
index ece21d2de..3a99f02e1 100644
--- a/pkgs/clan-app/ui/vite.config.ts
+++ b/pkgs/clan-app/ui/vite.config.ts
@@ -30,6 +30,7 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./"), // Adjust the path as needed
     },
   },
+  base: "./",
   optimizeDeps: {
     include: ["debug", "extend"],
   },
@@ -48,7 +49,18 @@ export default defineConfig({
   },
   build: {
     target: "safari11",
+    modulePreload: false,
     //  assetsDi
     manifest: true,
+    // Inline everything: TODO
+    // Detect file:///assets requests and point to the correct directory in webview
+    rollupOptions: {
+      output: {
+        format: "iife",
+        // entryFileName: ""
+        // inlineDynamicImports: true,
+      },
+    },
+    // assetsInlineLimit: 0,
   },
 });