Merge pull request 'ui/imports: fix asset imports' (#5119) from fix-imports into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5119

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");

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"

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"

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"

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,
   },
 });