From 66aecdc3fedee17b7b0b2580d43faad98b80f2ae Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Sun, 15 Mar 2026 17:19:57 -0500
Subject: [PATCH 01/23] infobar and launch button (not interactable yet)

---
 src/main.css          | 26 ++++++++++++---
 src/views/Library.vue | 75 +++++++++++++++++++++++++++++++++++++++----
 2 files changed, 91 insertions(+), 10 deletions(-)

diff --git a/src/main.css b/src/main.css
index 4440e0e..c9c0beb 100644
--- a/src/main.css
+++ b/src/main.css
@@ -95,7 +95,8 @@
     content: '';
   }
 
-  .btn {
+  .btn,
+  .shiny-btn {
     @apply flex items-center justify-center px-3 py-2 bg-center border-black/20 border-2 cursor-pointer rounded-xl;
 
     transition-duration: 150ms;
@@ -107,17 +108,34 @@
     );
     background-position: center 60%;
     background-size: 250% 200%;
-    text-shadow: 1px 1px 2px var(--color-codename-500);
+    text-box-trim: trim-both;
 
     &:hover {
       @apply brightness-140;
     }
 
-    &[class*='icon-'],
-    & > [class*='icon-'] {
+    > * {
+      @apply pointer-events-none;
       filter: drop-shadow(1px 1px 2px var(--color-codename-500));
     }
   }
+
+  .shiny-btn {
+    @apply border-transparent border shadow-lg shadow-black/30;
+    background:
+      linear-gradient(120deg, var(--color-codename-500), #e7a1f2, #c55ad4)
+        padding-box,
+      linear-gradient(180deg, #ff81d5, #501696) border-box;
+
+    &:hover {
+      @apply brightness-110;
+    }
+
+    > * {
+      filter: drop-shadow(0 2px 0 color-mix(in oklab, black 25%, transparent));
+      background-blend-mode: plus-lighter;
+    }
+  }
 }
 
 button#decorum-tb-minimize,
diff --git a/src/views/Library.vue b/src/views/Library.vue
index 85ff61c..980d650 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -36,6 +36,13 @@ async function handleAddClick() {
   }
 }
 
+async function handleLaunchClick() {
+  if (curItem.value) {
+    // TODO
+    console.info('Launching', curItem.value);
+  }
+}
+
 async function refreshEngineContexts() {
   const engineContexts = await invoke<EngineCanonInfo[]>('get_engine_contexts');
   const engineInstances = await invoke<Instance[]>('get_instances', {
@@ -191,16 +198,49 @@ onMounted(async () => {
           <ScrollAreaThumb class="thumb" />
         </ScrollAreaScrollbar>
       </ScrollAreaRoot>
-      <button class="fab">
-        <img src="@assets/images/icon/add.png?url" @click="handleAddClick" />
+      <button class="fab btn" @click="handleAddClick">
+        <img src="@assets/images/icon/add.png?url" />
       </button>
     </div>
 
     <Separator orientation="vertical" class="w-0.5 bg-modfriend-950/30" />
 
     <ScrollAreaRoot class="scroll-area main-content">
-      <ScrollAreaViewport class="w-full h-full">
-        TODO: details-panel
+      <ScrollAreaViewport class="w-full h-full" v-if="curItem">
+        <div class="banner-spacer" />
+        <h1 class="text-3xl mb-4 text-shadow-modfriend-900 text-shadow-md">
+          {{
+            curItem?.instance?.edited_info?.display_name ||
+            curItem?.canonInfo.canonical_display_name
+          }}
+        </h1>
+        <div class="infobar">
+          <button class="shiny-btn action-button" @click="handleLaunchClick">
+            <img src="@assets/images/icon/play.png?url" class="size-4" />
+            <span class="text-lg">launch</span>
+          </button>
+          <div
+            class="infobar-item"
+            v-if="
+              curItem.canonInfo.kind === 'engine' &&
+              curItem.canonInfo.engine_kind
+            "
+          >
+            <span class="key"> Engine Type </span>
+            <span class="value">
+              {{ curItem.canonInfo.engine_kind }}
+            </span>
+          </div>
+          <div class="infobar-item">
+            <span class="key"> Author </span>
+            <span class="value">
+              {{
+                curItem.instance?.edited_info?.author ||
+                curItem.canonInfo.canonical_author
+              }}
+            </span>
+          </div>
+        </div>
 
         <pre class="text-xs">{{ curItem }}</pre>
       </ScrollAreaViewport>
@@ -241,7 +281,7 @@ onMounted(async () => {
     }
   }
   > .fab {
-    @apply absolute size-12 bottom-3 place-items-center right-4 p-3 bg-codename-400/50 rounded-full hover:bg-codename-300/50 transition-colors shadow-md shadow-black/20 pointer-events-auto;
+    @apply absolute size-12 bottom-3 place-items-center right-4 p-3 shadow-md shadow-black/20;
   }
 }
 
@@ -249,7 +289,7 @@ onMounted(async () => {
   @apply w-full grow min-h-0 relative overflow-hidden;
 }
 .main-content {
-  @apply w-full pl-2;
+  @apply w-full pl-6;
 }
 
 .scroll-area {
@@ -302,4 +342,27 @@ onMounted(async () => {
     @apply cursor-pointer;
   }
 }
+
+.banner-spacer {
+  @apply h-38;
+}
+.action-button {
+  @apply uppercase flex items-center gap-1 py-2.5;
+  > span {
+    text-box-trim: trim-end;
+  }
+}
+.infobar {
+  @apply flex items-center gap-4 mb-4;
+
+  .infobar-item {
+    @apply flex flex-col gap-0.5 text-xs h-full;
+    > .key {
+      @apply text-modfriend-300 uppercase;
+    }
+    > .value {
+      @apply text-modfriend-100;
+    }
+  }
+}
 </style>

From 532efb1d0768e339e35d86c9d578ede7ed8cd793 Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Sun, 15 Mar 2026 18:59:01 -0500
Subject: [PATCH 02/23] saving instance info and popover (kinda temp-ish)

---
 src/Root.vue          |   2 +-
 src/views/Library.vue | 191 ++++++++++++++++++++++++++++++++++++++----
 2 files changed, 178 insertions(+), 15 deletions(-)

diff --git a/src/Root.vue b/src/Root.vue
index 7f8c60c..a0f72c5 100644
--- a/src/Root.vue
+++ b/src/Root.vue
@@ -50,7 +50,7 @@ const curCategoryComponent = computed(() => {
 @reference "./main.css";
 
 #main {
-  @apply relative isolate px-2 py-4 flex flex-col space-y-2 bg-modfriend-900 overflow-hidden;
+  @apply relative isolate pl-2 py-4 flex flex-col space-y-2 bg-modfriend-900 overflow-hidden;
 
   > :not(.background-layers) {
     @apply relative z-10;
diff --git a/src/views/Library.vue b/src/views/Library.vue
index 980d650..ddef907 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -8,7 +8,15 @@ import {
   ScrollAreaViewport,
   Separator,
 } from 'reka-ui';
-import { onMounted, ref } from 'vue';
+import {
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+} from 'reka-ui';
+import { onMounted, ref, watch } from 'vue';
 
 import { globalStore } from '@core/store';
 
@@ -21,6 +29,9 @@ const LAST_SELECTED_INSTANCE_KEY = 'lastSelectedInstance';
 const listItems = ref<ListDisplayInfo[]>([]);
 const curItem = ref<ListDisplayInfo>();
 
+const instanceSettingsOpen = ref(false);
+const editDraft = ref<InstanceInfo>({} as InstanceInfo);
+
 async function handleAddClick() {
   const selected = await open({
     title: 'Select Engine Directory',
@@ -43,6 +54,31 @@ async function handleLaunchClick() {
   }
 }
 
+async function handleSave() {
+  if (!curItem.value) return;
+
+  const newInfo = {
+    display_name: editDraft.value.display_name,
+    author: editDraft.value.author,
+    version: editDraft.value.version,
+    description: editDraft.value.description,
+  };
+
+  await invoke('edit_instance', {
+    folderPath: curItem.value?.instance?.folder_path ?? '',
+    newInfo,
+  });
+
+  // Keep in-memory state in sync
+  const updatedItem = listItems.value.find(
+    (item) =>
+      item.instance?.folder_path === curItem.value?.instance?.folder_path,
+  );
+  if (updatedItem?.instance) {
+    updatedItem.instance.edited_info = newInfo;
+  }
+}
+
 async function refreshEngineContexts() {
   const engineContexts = await invoke<EngineCanonInfo[]>('get_engine_contexts');
   const engineInstances = await invoke<Instance[]>('get_instances', {
@@ -134,6 +170,31 @@ function getLastSelectedInstance(): ListDisplayInfo | undefined {
   return undefined;
 }
 
+watch(curItem, () => {
+  // Close the menu when switching the selected item.
+  instanceSettingsOpen.value = false;
+});
+
+watch(instanceSettingsOpen, async (isOpen, wasOpen) => {
+  if (isOpen && curItem.value) {
+    editDraft.value = {
+      display_name:
+        curItem.value.instance?.edited_info?.display_name ??
+        curItem.value.canonInfo.canonical_display_name,
+      author:
+        curItem.value.instance?.edited_info?.author ??
+        curItem.value.canonInfo.canonical_author,
+      version: curItem.value.instance?.edited_info?.version ?? '',
+      description: curItem.value.instance?.edited_info?.description ?? '',
+    };
+    return;
+  }
+
+  if (wasOpen && !isOpen) {
+    await handleSave();
+  }
+});
+
 onMounted(async () => {
   await refreshEngineContexts();
   const bgModule = await import('@assets/images/bg/codename.png?url'); // This is just a temporary thing, as the background should load dynamically based on the selected mod
@@ -152,7 +213,7 @@ onMounted(async () => {
           </div>
           <input type="text" placeholder="Search..." class="search-bar" />
         </div>
-        <button>
+        <button class="control-button">
           <img src="@assets/images/icon/sort.png?url" />
         </button>
       </div>
@@ -181,7 +242,9 @@ onMounted(async () => {
                   item.instance?.edited_info?.author ||
                   item.canonInfo.canonical_author
                 }}
-                - {{ 'v1.0.0' }}
+                <template v-if="item.instance?.edited_info?.version">
+                  {{ ' - v' + item.instance.edited_info.version }}
+                </template>
               </div>
               <div
                 class="text-xs text-modfriend-600 truncate"
@@ -206,7 +269,7 @@ onMounted(async () => {
     <Separator orientation="vertical" class="w-0.5 bg-modfriend-950/30" />
 
     <ScrollAreaRoot class="scroll-area main-content">
-      <ScrollAreaViewport class="w-full h-full" v-if="curItem">
+      <ScrollAreaViewport class="w-full h-full viewport" v-if="curItem">
         <div class="banner-spacer" />
         <h1 class="text-3xl mb-4 text-shadow-modfriend-900 text-shadow-md">
           {{
@@ -240,8 +303,95 @@ onMounted(async () => {
               }}
             </span>
           </div>
+          <div
+            class="infobar-item"
+            v-if="curItem.instance?.edited_info?.version"
+          >
+            <span class="key"> Version </span>
+            <span class="value">
+              {{ curItem.instance.edited_info.version }}
+            </span>
+          </div>
+          <PopoverRoot v-model:open="instanceSettingsOpen" :modal="true">
+            <PopoverTrigger class="control-button ml-auto" :disabled="!curItem">
+              <img src="@assets/images/icon/wrench.png?url" />
+            </PopoverTrigger>
+            <PopoverPortal>
+              <PopoverContent
+                align="end"
+                :side-offset="8"
+                class="bg-modfriend-800 p-2 rounded-md border border-modfriend-700"
+              >
+                <div class="flex flex-col gap-4 mb-2">
+                  <legend class="text-sm text-modfriend-300">
+                    Instance Settings
+                  </legend>
+                  <div class="grid grid-cols-2 gap-2">
+                    <fieldset class="flex flex-col gap-1">
+                      <label
+                        class="text-xs text-modfriend-300"
+                        for="display-name"
+                      >
+                        Display Name
+                      </label>
+                      <input
+                        id="display-name"
+                        type="text"
+                        class="text-input"
+                        v-model="editDraft.display_name"
+                      />
+                    </fieldset>
+                    <fieldset class="flex flex-col gap-1">
+                      <label class="text-xs text-modfriend-300" for="author">
+                        Author
+                      </label>
+                      <input
+                        id="author"
+                        type="text"
+                        class="text-input"
+                        v-model="editDraft.author"
+                      />
+                    </fieldset>
+                    <fieldset class="flex flex-col gap-1">
+                      <label class="text-xs text-modfriend-300" for="version">
+                        Version
+                      </label>
+                      <input
+                        id="version"
+                        type="text"
+                        class="text-input"
+                        v-model="editDraft.version"
+                      />
+                    </fieldset>
+                    <fieldset class="flex flex-col gap-1 col-span-2">
+                      <label
+                        class="text-xs text-modfriend-300"
+                        for="description"
+                      >
+                        Description
+                      </label>
+                      <textarea
+                        id="description"
+                        class="text-input resize-none h-24"
+                        v-model="editDraft.description"
+                      />
+                    </fieldset>
+                  </div>
+                </div>
+                <PopoverArrow class="fill-modfriend-700" />
+                <PopoverClose class="btn text-modfriend-50 w-20">
+                  Save
+                </PopoverClose>
+              </PopoverContent>
+            </PopoverPortal>
+          </PopoverRoot>
+        </div>
+        <div
+          v-if="curItem.instance?.edited_info?.description"
+          class="text-modfriend-100 whitespace-pre-wrap"
+        >
+          {{ curItem.instance.edited_info.description }}
         </div>
-
         <pre class="text-xs">{{ curItem }}</pre>
       </ScrollAreaViewport>
       <ScrollAreaScrollbar orientation="vertical" class="scrollbar">
@@ -271,25 +421,34 @@ onMounted(async () => {
         @apply bg-transparent focus:outline-none ml-2 w-full border-b-2 border-transparent focus:border-codename-500 transition-colors;
       }
     }
-
-    > button {
-      @apply size-8 shrink-0 grid place-items-center rounded-full hover:bg-modfriend-500/30 active:bg-modfriend-500/50 transition-colors;
-
-      > img {
-        @apply size-6;
-      }
-    }
   }
   > .fab {
     @apply absolute size-12 bottom-3 place-items-center right-4 p-3 shadow-md shadow-black/20;
   }
 }
 
+.control-button {
+  @apply size-8 shrink-0 grid place-items-center rounded-full hover:bg-modfriend-500/30 active:bg-modfriend-500/50 transition-colors;
+
+  > img {
+    @apply size-6;
+  }
+}
+
 .instance-list {
   @apply w-full grow min-h-0 relative overflow-hidden;
 }
 .main-content {
-  @apply w-full pl-6;
+  @apply w-full;
+
+  /* This is terrible, but it's so that we can have full width components if we need to */
+  > .viewport {
+    > div {
+      > * {
+        @apply pl-6 pr-4;
+      }
+    } /* Reka UI adds another div after the viewport */
+  }
 }
 
 .scroll-area {
@@ -343,6 +502,10 @@ onMounted(async () => {
   }
 }
 
+.text-input {
+  @apply bg-modfriend-700 text-modfriend-50 px-2 py-1 rounded outline-0 focus:ring-2 focus:ring-codename-500 focus:ring-offset-1 focus:ring-offset-modfriend-700;
+}
+
 .banner-spacer {
   @apply h-38;
 }

From fe132e4d1c227adefdf6d9a2efdd70171a124e14 Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Mon, 16 Mar 2026 14:59:02 -0500
Subject: [PATCH 03/23] review things and some styling cleanup

---
 src/main.css          |   4 +-
 src/views/Library.vue | 212 ++++++++++++++++++++++--------------------
 2 files changed, 111 insertions(+), 105 deletions(-)

diff --git a/src/main.css b/src/main.css
index c9c0beb..2d46973 100644
--- a/src/main.css
+++ b/src/main.css
@@ -96,7 +96,7 @@
   }
 
   .btn,
-  .shiny-btn {
+  .btn-shiny {
     @apply flex items-center justify-center px-3 py-2 bg-center border-black/20 border-2 cursor-pointer rounded-xl;
 
     transition-duration: 150ms;
@@ -120,7 +120,7 @@
     }
   }
 
-  .shiny-btn {
+  .btn-shiny {
     @apply border-transparent border shadow-lg shadow-black/30;
     background:
       linear-gradient(120deg, var(--color-codename-500), #e7a1f2, #c55ad4)
diff --git a/src/views/Library.vue b/src/views/Library.vue
index ddef907..e751ab8 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -57,13 +57,12 @@ async function handleLaunchClick() {
 async function handleSave() {
   if (!curItem.value) return;
 
-  const newInfo = {
-    display_name: editDraft.value.display_name,
-    author: editDraft.value.author,
-    version: editDraft.value.version,
-    description: editDraft.value.description,
+  const newInfo: InstanceInfo = {
+    ...editDraft.value,
   };
 
+  console.log('Saving', newInfo);
+
   await invoke('edit_instance', {
     folderPath: curItem.value?.instance?.folder_path ?? '',
     newInfo,
@@ -197,8 +196,10 @@ watch(instanceSettingsOpen, async (isOpen, wasOpen) => {
 
 onMounted(async () => {
   await refreshEngineContexts();
-  const bgModule = await import('@assets/images/bg/codename.png?url'); // This is just a temporary thing, as the background should load dynamically based on the selected mod
+  // FIXME: This is just a temporary thing, as the background should load dynamically based on the selected mod
+  const bgModule = await import('@assets/images/bg/codename.png?url');
   globalStore.background = bgModule.default;
+
   curItem.value = getLastSelectedInstance();
 });
 </script>
@@ -213,7 +214,7 @@ onMounted(async () => {
           </div>
           <input type="text" placeholder="Search..." class="search-bar" />
         </div>
-        <button class="control-button">
+        <button class="simple-button">
           <img src="@assets/images/icon/sort.png?url" />
         </button>
       </div>
@@ -278,109 +279,88 @@ onMounted(async () => {
           }}
         </h1>
         <div class="infobar">
-          <button class="shiny-btn action-button" @click="handleLaunchClick">
-            <img src="@assets/images/icon/play.png?url" class="size-4" />
-            <span class="text-lg">launch</span>
-          </button>
-          <div
-            class="infobar-item"
-            v-if="
-              curItem.canonInfo.kind === 'engine' &&
-              curItem.canonInfo.engine_kind
-            "
-          >
-            <span class="key"> Engine Type </span>
-            <span class="value">
-              {{ curItem.canonInfo.engine_kind }}
-            </span>
-          </div>
-          <div class="infobar-item">
-            <span class="key"> Author </span>
-            <span class="value">
-              {{
-                curItem.instance?.edited_info?.author ||
-                curItem.canonInfo.canonical_author
-              }}
-            </span>
-          </div>
-          <div
-            class="infobar-item"
-            v-if="curItem.instance?.edited_info?.version"
-          >
-            <span class="key"> Version </span>
-            <span class="value">
-              {{ curItem.instance.edited_info.version }}
-            </span>
+          <div>
+            <button class="btn-shiny action-button" @click="handleLaunchClick">
+              <img src="@assets/images/icon/play.png?url" class="size-4" />
+              <span class="text-lg">launch</span>
+            </button>
+            <div
+              class="infobar-item"
+              v-if="
+                curItem.canonInfo.kind === 'engine' &&
+                curItem.canonInfo.engine_kind
+              "
+            >
+              <span class="key"> Engine Type </span>
+              <span class="value">
+                {{ curItem.canonInfo.engine_kind }}
+              </span>
+            </div>
+            <div class="infobar-item">
+              <span class="key"> Author </span>
+              <span class="value">
+                {{
+                  curItem.instance?.edited_info?.author ||
+                  curItem.canonInfo.canonical_author
+                }}
+              </span>
+            </div>
+            <div
+              class="infobar-item"
+              v-if="curItem.instance?.edited_info?.version"
+            >
+              <span class="key"> Version </span>
+              <span class="value">
+                {{ curItem.instance.edited_info.version }}
+              </span>
+            </div>
           </div>
           <PopoverRoot v-model:open="instanceSettingsOpen" :modal="true">
-            <PopoverTrigger class="control-button ml-auto" :disabled="!curItem">
+            <PopoverTrigger class="simple-button" :disabled="!curItem">
               <img src="@assets/images/icon/wrench.png?url" />
             </PopoverTrigger>
             <PopoverPortal>
               <PopoverContent
                 align="end"
                 :side-offset="8"
-                class="bg-modfriend-800 p-2 rounded-md border border-modfriend-700"
+                class="instance-settings"
               >
-                <div class="flex flex-col gap-4 mb-2">
-                  <legend class="text-sm text-modfriend-300">
-                    Instance Settings
-                  </legend>
-                  <div class="grid grid-cols-2 gap-2">
-                    <fieldset class="flex flex-col gap-1">
-                      <label
-                        class="text-xs text-modfriend-300"
-                        for="display-name"
-                      >
-                        Display Name
-                      </label>
-                      <input
-                        id="display-name"
-                        type="text"
-                        class="text-input"
-                        v-model="editDraft.display_name"
-                      />
-                    </fieldset>
-                    <fieldset class="flex flex-col gap-1">
-                      <label class="text-xs text-modfriend-300" for="author">
-                        Author
-                      </label>
-                      <input
-                        id="author"
-                        type="text"
-                        class="text-input"
-                        v-model="editDraft.author"
-                      />
-                    </fieldset>
-                    <fieldset class="flex flex-col gap-1">
-                      <label class="text-xs text-modfriend-300" for="version">
-                        Version
-                      </label>
-                      <input
-                        id="version"
-                        type="text"
-                        class="text-input"
-                        v-model="editDraft.version"
-                      />
-                    </fieldset>
-                    <fieldset class="flex flex-col gap-1 col-span-2">
-                      <label
-                        class="text-xs text-modfriend-300"
-                        for="description"
-                      >
-                        Description
-                      </label>
-                      <textarea
-                        id="description"
-                        class="text-input resize-none h-24"
-                        v-model="editDraft.description"
-                      />
-                    </fieldset>
-                  </div>
+                <legend>Instance Settings</legend>
+                <div class="instance-setttings-content">
+                  <fieldset>
+                    <label for="display-name"> Display Name </label>
+                    <input
+                      id="display-name"
+                      type="text"
+                      v-model="editDraft.display_name"
+                    />
+                  </fieldset>
+                  <fieldset>
+                    <label for="author"> Author </label>
+                    <input id="author" type="text" v-model="editDraft.author" />
+                  </fieldset>
+                  <fieldset>
+                    <label for="version"> Version </label>
+                    <input
+                      id="version"
+                      type="text"
+                      v-model="editDraft.version"
+                    />
+                  </fieldset>
+                  <fieldset class="col-span-2">
+                    <label for="description"> Description </label>
+                    <textarea
+                      id="description"
+                      class="h-24"
+                      v-model="editDraft.description"
+                    />
+                  </fieldset>
                 </div>
                 <PopoverArrow class="fill-modfriend-700" />
-                <PopoverClose class="btn text-modfriend-50 w-20">
-                  Save
+                <PopoverClose
+                  class="simple-button text-modfriend-50 w-16 absolute right-1 top-1"
+                >
+                  <img src="@assets/images/icon/close.png?url" class="size-4" />
                 </PopoverClose>
               </PopoverContent>
             </PopoverPortal>
@@ -427,7 +407,7 @@ onMounted(async () => {
   }
 }
 
-.control-button {
+.simple-button {
   @apply size-8 shrink-0 grid place-items-center rounded-full hover:bg-modfriend-500/30 active:bg-modfriend-500/50 transition-colors;
 
   > img {
@@ -502,8 +482,31 @@ onMounted(async () => {
   }
 }
 
-.text-input {
-  @apply bg-modfriend-700 text-modfriend-50 px-2 py-1 rounded outline-0 focus:ring-2 focus:ring-codename-500 focus:ring-offset-1 focus:ring-offset-modfriend-700;
+:deep(.instance-settings) {
+  @apply bg-modfriend-800 p-2 rounded-xl border border-modfriend-700 flex flex-col gap-4 mb-2 shadow-lg shadow-black/25;
+
+  legend {
+    @apply text-right mr-7 text-modfriend-300;
+  }
+
+  .instance-setttings-content {
+    @apply grid grid-cols-2 gap-2;
+
+    fieldset {
+      @apply flex flex-col gap-1;
+
+      label {
+        @apply text-xs text-modfriend-300;
+      }
+      input,
+      textarea {
+        @apply bg-modfriend-700 text-modfriend-50 px-2 py-1 rounded-md outline-0 focus:ring-2 focus:ring-codename-500 focus:ring-offset-1 focus:ring-offset-modfriend-700;
+      }
+      textarea {
+        @apply resize-none;
+      }
+    }
+  }
 }
 
 .banner-spacer {
@@ -516,7 +519,10 @@ onMounted(async () => {
   }
 }
 .infobar {
-  @apply flex items-center gap-4 mb-4;
+  @apply flex items-center gap-4 mb-4 justify-between;
+  > div {
+    @apply flex items-center gap-4;
+  }
 
   .infobar-item {
     @apply flex flex-col gap-0.5 text-xs h-full;

From ae98df53ed6279f671e528e27897c88e792c572e Mon Sep 17 00:00:00 2001
From: Frakits <90983918+Frakits@users.noreply.github.com>
Date: Sat, 21 Mar 2026 16:59:30 +0200
Subject: [PATCH 04/23] 2 widgets WIP

---
 src/main.css          | 5 +++++
 src/views/Library.vue | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/main.css b/src/main.css
index 2d46973..b40484c 100644
--- a/src/main.css
+++ b/src/main.css
@@ -136,6 +136,11 @@
       background-blend-mode: plus-lighter;
     }
   }
+  #widget {
+    /* TODO: stylize this properly */
+    background: darkgray;
+    border: thick solid black;
+  }
 }
 
 button#decorum-tb-minimize,
diff --git a/src/views/Library.vue b/src/views/Library.vue
index e751ab8..b143e8c 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import WidgetAdvancedInfo from '@components/WidgetAdvancedInfo.vue';
+import WidgetRawData from '@components/WidgetRawData.vue';
 import { invoke } from '@tauri-apps/api/core';
 import { open } from '@tauri-apps/plugin-dialog';
 import {
@@ -372,7 +374,8 @@ onMounted(async () => {
         >
           {{ curItem.instance.edited_info.description }}
         </div>
-        <pre class="text-xs">{{ curItem }}</pre>
+        <WidgetAdvancedInfo :instanceData="curItem" />
+        <WidgetRawData :instanceData="curItem" />
       </ScrollAreaViewport>
       <ScrollAreaScrollbar orientation="vertical" class="scrollbar">
         <ScrollAreaThumb class="thumb" />

From e70599b3ea4f4997a7e54cad0f6f5dbc2ea1f4be Mon Sep 17 00:00:00 2001
From: Frakits <90983918+Frakits@users.noreply.github.com>
Date: Sat, 21 Mar 2026 17:45:46 +0200
Subject: [PATCH 05/23] gave up

---
 package-lock.json                     | 10 ++++++
 package.json                          |  1 +
 src-tauri/Cargo.lock                  |  1 +
 src-tauri/Cargo.toml                  |  1 +
 src-tauri/capabilities/default.json   |  3 +-
 src-tauri/src/lib.rs                  |  1 +
 src/components/WidgetAdvancedInfo.vue | 52 +++++++++++++++++++++++++++
 src/components/WidgetRawData.vue      | 17 +++++++++
 8 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 src/components/WidgetAdvancedInfo.vue
 create mode 100644 src/components/WidgetRawData.vue

diff --git a/package-lock.json b/package-lock.json
index 2c337ea..c899b04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@tailwindcss/vite": "^4.1.18",
         "@tauri-apps/api": "^2.10.1",
         "@tauri-apps/plugin-dialog": "^2.6.0",
+        "@tauri-apps/plugin-fs": "^2.4.5",
         "@tauri-apps/plugin-opener": "^2.5.3",
         "@tauri-apps/plugin-os": "~2.3.2",
         "reka-ui": "^2.8.0",
@@ -1545,6 +1546,15 @@
         "@tauri-apps/api": "^2.8.0"
       }
     },
+    "node_modules/@tauri-apps/plugin-fs": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-fs/-/plugin-fs-2.4.5.tgz",
+      "integrity": "sha512-dVxWWGE6VrOxC7/jlhyE+ON/Cc2REJlM35R3PJX3UvFw2XwYhLGQVAIyrehenDdKjotipjYEVc4YjOl3qq90fA==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.8.0"
+      }
+    },
     "node_modules/@tauri-apps/plugin-opener": {
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-opener/-/plugin-opener-2.5.3.tgz",
diff --git a/package.json b/package.json
index 875dc42..aefb8ea 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@tailwindcss/vite": "^4.1.18",
     "@tauri-apps/api": "^2.10.1",
     "@tauri-apps/plugin-dialog": "^2.6.0",
+    "@tauri-apps/plugin-fs": "^2.4.5",
     "@tauri-apps/plugin-opener": "^2.5.3",
     "@tauri-apps/plugin-os": "~2.3.2",
     "reka-ui": "^2.8.0",
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 3a961f5..6f7cde7 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -2325,6 +2325,7 @@ dependencies = [
  "tauri-build",
  "tauri-plugin-decorum",
  "tauri-plugin-dialog",
+ "tauri-plugin-fs",
  "tauri-plugin-opener",
  "tauri-plugin-os",
 ]
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index fce7d82..29b8180 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -22,3 +22,4 @@ colog = "1.4.0"
 serini = "0.2.2"
 tauri-plugin-decorum = "1.1.1"
 tauri-plugin-os = "2"
+tauri-plugin-fs = "2"
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 2181336..6d1169b 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -20,6 +20,7 @@
     "core:window:allow-start-dragging",
     "core:window:allow-toggle-maximize",
     "decorum:allow-show-snap-overlay",
-    "os:default"
+    "os:default",
+    "fs:default"
   ]
 }
\ No newline at end of file
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 54d2ad1..63ed29c 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -36,6 +36,7 @@ pub fn run() {
     colog::init();
 
     tauri::Builder::default()
+        .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_decorum::init())
diff --git a/src/components/WidgetAdvancedInfo.vue b/src/components/WidgetAdvancedInfo.vue
new file mode 100644
index 0000000..b745586
--- /dev/null
+++ b/src/components/WidgetAdvancedInfo.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { stat } from '@tauri-apps/plugin-fs';
+import * as path from '@tauri-apps/api/path';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+//i dont fucking know
+
+const props = defineProps<{
+  instanceData: Category;
+}>();
+
+var dih = await stat(props.instanceData.canonInfo.folder_path);
+const totalFileSize = computed(() => {
+	return dih
+})
+</script>
+
+<template>
+	<div id="widget" class="ml-6 mr-6 text-wrap">
+		<div class="infobar-item">
+			<span class="key">Mods Count</span>
+			<span class="value">
+				{{
+					instanceData.canonInfo.softcode_list.length
+      	}}
+			</span>
+		</div>
+		<div class="infobar-item">
+			<span class="key">Total Size</span>
+			<Suspense>
+				<span class="value">
+				{{
+					totalFileSize
+      	}}
+			</span>
+			</Suspense>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="css">
+	@reference "maincss";
+
+	.infobar-item {
+    @apply flex flex-col gap-0.5 text-xs h-full;
+    > .key {
+      @apply text-modfriend-300 uppercase;
+    }
+    > .value {
+      @apply text-modfriend-100;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/WidgetRawData.vue b/src/components/WidgetRawData.vue
new file mode 100644
index 0000000..2d1d81f
--- /dev/null
+++ b/src/components/WidgetRawData.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+//i dont fucking know
+
+const props = defineProps<{
+  instanceData: Category;
+}>();
+</script>
+
+<template>
+	<div id="widget" class="ml-6 mr-6 text-wrap">
+		<pre class="text-xs">{{ props.instanceData }}</pre>
+	</div>
+</template>
+
+<style scoped lang="css">
+	@reference "maincss";
+</style>
\ No newline at end of file

From 66e544fccba00f2f30e5c45bd2dddc410193ad50 Mon Sep 17 00:00:00 2001
From: HeroEyad <hero@heroeyad.xyz>
Date: Sat, 21 Mar 2026 19:16:05 +0200
Subject: [PATCH 06/23] ok

---
 src-tauri/src/lib.rs                  |  25 ++++-
 src/components/WidgetAdvancedInfo.vue | 135 ++++++++++++++++++++------
 2 files changed, 129 insertions(+), 31 deletions(-)

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 63ed29c..a483744 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -31,6 +31,27 @@ struct InstanceStore {
     instance_list: InstanceList,
 }
 
+#[tauri::command]
+fn get_dir_size(folder_path: String) -> u64 {
+    fn walk(path: &std::path::Path) -> u64 {
+        let Ok(entries) = std::fs::read_dir(path) else {
+            return 0;
+        };
+        entries
+            .filter_map(|e| e.ok())
+            .map(|e| {
+                let p = e.path();
+                if p.is_dir() {
+                    walk(&p)
+                } else {
+                    e.metadata().map(|m| m.len()).unwrap_or(0)
+                }
+            })
+            .sum()
+    }
+    walk(std::path::Path::new(&folder_path))
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     colog::init();
@@ -100,8 +121,10 @@ pub fn run() {
             instances::remove_child_instance,
             instances::edit_instance,
             instances::remove_instance,
+            // lib.rs
+            get_dir_size,
         ])
         .plugin(tauri_plugin_opener::init())
         .run(tauri::generate_context!())
         .expect("Error while running tauri application");
-}
+}
\ No newline at end of file
diff --git a/src/components/WidgetAdvancedInfo.vue b/src/components/WidgetAdvancedInfo.vue
index b745586..8378ab0 100644
--- a/src/components/WidgetAdvancedInfo.vue
+++ b/src/components/WidgetAdvancedInfo.vue
@@ -1,46 +1,121 @@
 <script setup lang="ts">
-import { stat } from '@tauri-apps/plugin-fs';
-import * as path from '@tauri-apps/api/path';
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
-//i dont fucking know
+import { invoke } from '@tauri-apps/api/core';
+import { computed, onMounted, ref, watch } from 'vue';
+// well I know!
+interface ListDisplayInfo {
+  canonInfo: CanonInfo;
+  instance?: Instance;
+  children?: ListDisplayInfo[];
+}
 
 const props = defineProps<{
-  instanceData: Category;
+  instanceData: ListDisplayInfo;
 }>();
 
-var dih = await stat(props.instanceData.canonInfo.folder_path);
+const totalBytes = ref<number | null>(null);
+const isLoading = ref(true);
+const hasError = ref(false);
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
 const totalFileSize = computed(() => {
-	return dih
-})
+  if (isLoading.value) return '...';
+  if (hasError.value || totalBytes.value === null) return 'N/A';
+  return formatSize(totalBytes.value);
+});
+
+const modsCount = computed(() => {
+  if (props.instanceData.canonInfo.kind === 'engine') {
+    return props.instanceData.canonInfo.softcode_list.length;
+  }
+  return null;
+});
+
+async function computeSize() {
+  totalBytes.value = null;
+  isLoading.value = true;
+  hasError.value = false;
+
+  try {
+    if (props.instanceData.canonInfo.kind === 'engine') {
+      const modPaths: string[] =
+        props.instanceData.children?.map((child) => child.canonInfo.folder_path) ?? [];
+
+      if (modPaths.length === 0) {
+        totalBytes.value = 0;
+        return;
+      }
+
+      const sizes = await Promise.all(
+        modPaths.map((folderPath) =>
+          invoke<number>('get_dir_size', { folderPath })
+        )
+      );
+
+      totalBytes.value = sizes.reduce((sum, s) => sum + s, 0);
+    } else {
+      const size = await invoke<number>('get_dir_size', {
+        folderPath: props.instanceData.canonInfo.folder_path,
+      });
+      totalBytes.value = size;
+    }
+  } catch (e) {
+    console.error('Failed to compute size:', e);
+    hasError.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+watch(() => props.instanceData, computeSize, { immediate: false });
+onMounted(computeSize);
 </script>
 
 <template>
-	<div id="widget" class="ml-6 mr-6 text-wrap">
-		<div class="infobar-item">
-			<span class="key">Mods Count</span>
-			<span class="value">
-				{{
-					instanceData.canonInfo.softcode_list.length
-      	}}
-			</span>
-		</div>
-		<div class="infobar-item">
-			<span class="key">Total Size</span>
-			<Suspense>
-				<span class="value">
-				{{
-					totalFileSize
-      	}}
-			</span>
-			</Suspense>
-		</div>
-	</div>
+  <div id="widget" class="ml-6 mr-6 text-wrap">
+    <!-- Engine view -->
+    <template v-if="instanceData.canonInfo.kind === 'engine'">
+      <div class="infobar-item">
+        <span class="key">Mods Count</span>
+        <span class="value">{{ modsCount }}</span>
+      </div>
+      <div class="infobar-item">
+        <span class="key">Total Size</span>
+        <span class="value">{{ totalFileSize }}</span>
+      </div>
+      <div class="infobar-item">
+        <span class="key">Engine Type</span>
+        <span class="value">{{ instanceData.canonInfo.engine_kind }}</span>
+      </div>
+    </template>
+
+    <!-- Mod view -->
+    <template v-else>
+      <div class="infobar-item">
+        <span class="key">Mod Size</span>
+        <span class="value">{{ totalFileSize }}</span>
+      </div>
+      <div class="infobar-item">
+        <span class="key">Version</span>
+        <span class="value">{{ instanceData.canonInfo.canonical_version || 'N/A' }}</span>
+      </div>
+      <div class="infobar-item">
+        <span class="key">Mod Kind</span>
+        <span class="value">{{ instanceData.canonInfo.mod_kind }}</span>
+      </div>
+    </template>
+  </div>
 </template>
 
 <style scoped lang="css">
-	@reference "maincss";
+  @reference "maincss";
 
-	.infobar-item {
+  .infobar-item {
     @apply flex flex-col gap-0.5 text-xs h-full;
     > .key {
       @apply text-modfriend-300 uppercase;

From fab39cd896e6285a759862be578f957dcd2f37b7 Mon Sep 17 00:00:00 2001
From: HeroEyad <hero@heroeyad.xyz>
Date: Sat, 21 Mar 2026 19:35:35 +0200
Subject: [PATCH 07/23] normalize the path

---
 src-tauri/src/lib.rs                  | 3 ++-
 src/components/WidgetAdvancedInfo.vue | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index a483744..ff0dfca 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -49,7 +49,8 @@ fn get_dir_size(folder_path: String) -> u64 {
             })
             .sum()
     }
-    walk(std::path::Path::new(&folder_path))
+    let normalized = folder_path.replace("\\", "/");
+    walk(std::path::Path::new(&normalized))
 }
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
diff --git a/src/components/WidgetAdvancedInfo.vue b/src/components/WidgetAdvancedInfo.vue
index 8378ab0..387c82d 100644
--- a/src/components/WidgetAdvancedInfo.vue
+++ b/src/components/WidgetAdvancedInfo.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { invoke } from '@tauri-apps/api/core';
 import { computed, onMounted, ref, watch } from 'vue';
+
 // well I know!
 interface ListDisplayInfo {
   canonInfo: CanonInfo;

From c3e3e073e62dda25e375dece5f7e9d27c05d9cb2 Mon Sep 17 00:00:00 2001
From: HeroEyad <hero@heroeyad.xyz>
Date: Sat, 21 Mar 2026 19:50:12 +0200
Subject: [PATCH 08/23] here

---
 src-tauri/src/lib.rs | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index ff0dfca..ba8a785 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -34,23 +34,26 @@ struct InstanceStore {
 #[tauri::command]
 fn get_dir_size(folder_path: String) -> u64 {
     fn walk(path: &std::path::Path) -> u64 {
-        let Ok(entries) = std::fs::read_dir(path) else {
-            return 0;
-        };
-        entries
-            .filter_map(|e| e.ok())
-            .map(|e| {
-                let p = e.path();
-                if p.is_dir() {
-                    walk(&p)
-                } else {
-                    e.metadata().map(|m| m.len()).unwrap_or(0)
-                }
-            })
-            .sum()
+        match std::fs::read_dir(path) {
+            Err(e) => {
+                log::warn!("get_dir_size: cannot read {:?}: {}", path, e);
+                0
+            }
+            Ok(entries) => entries
+                .filter_map(|e| e.ok())
+                .map(|e| {
+                    let p = e.path();
+                    if p.is_dir() {
+                        walk(&p)
+                    } else {
+                        e.metadata().map(|m| m.len()).unwrap_or(0)
+                    }
+                })
+                .sum(),
+        }
     }
-    let normalized = folder_path.replace("\\", "/");
-    walk(std::path::Path::new(&normalized))
+    log::info!("get_dir_size called with: {:?}", folder_path);
+    walk(std::path::Path::new(&folder_path))
 }
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]

From d52d6c802eeee6a1df01f2b82814abce3b401f82 Mon Sep 17 00:00:00 2001
From: HeroEyad <hero@heroeyad.xyz>
Date: Sat, 21 Mar 2026 20:08:34 +0200
Subject: [PATCH 09/23] ok

---
 src-tauri/src/lib.rs                  | 36 +++++++++++++++++++++++++--
 src/components/WidgetAdvancedInfo.vue | 27 ++++++++------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index ba8a785..9fdc879 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -52,8 +52,39 @@ fn get_dir_size(folder_path: String) -> u64 {
                 .sum(),
         }
     }
-    log::info!("get_dir_size called with: {:?}", folder_path);
-    walk(std::path::Path::new(&folder_path))
+    let path = std::path::Path::new(&folder_path);
+    log::info!("get_dir_size called with: {:?} (exists: {})", folder_path, path.exists());
+    walk(path)
+}
+
+#[tauri::command]
+fn get_engine_mods_size(engine_folder_path: String) -> u64 {
+    fn walk(path: &std::path::Path) -> u64 {
+        match std::fs::read_dir(path) {
+            Err(e) => {
+                log::warn!("get_engine_mods_size: cannot read {:?}: {}", path, e);
+                0
+            }
+            Ok(entries) => entries
+                .filter_map(|e| e.ok())
+                .map(|e| {
+                    let p = e.path();
+                    if p.is_dir() {
+                        walk(&p)
+                    } else {
+                        e.metadata().map(|m| m.len()).unwrap_or(0)
+                    }
+                })
+                .sum(),
+        }
+    }
+    let mods_path = std::path::Path::new(&engine_folder_path).join("mods");
+    log::info!(
+        "get_engine_mods_size: scanning {:?} (exists: {})",
+        mods_path,
+        mods_path.exists()
+    );
+    walk(&mods_path)
 }
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
@@ -127,6 +158,7 @@ pub fn run() {
             instances::remove_instance,
             // lib.rs
             get_dir_size,
+            get_engine_mods_size,
         ])
         .plugin(tauri_plugin_opener::init())
         .run(tauri::generate_context!())
diff --git a/src/components/WidgetAdvancedInfo.vue b/src/components/WidgetAdvancedInfo.vue
index 387c82d..61d20b5 100644
--- a/src/components/WidgetAdvancedInfo.vue
+++ b/src/components/WidgetAdvancedInfo.vue
@@ -2,7 +2,6 @@
 import { invoke } from '@tauri-apps/api/core';
 import { computed, onMounted, ref, watch } from 'vue';
 
-// well I know!
 interface ListDisplayInfo {
   canonInfo: CanonInfo;
   instance?: Instance;
@@ -44,21 +43,15 @@ async function computeSize() {
 
   try {
     if (props.instanceData.canonInfo.kind === 'engine') {
-      const modPaths: string[] =
-        props.instanceData.children?.map((child) => child.canonInfo.folder_path) ?? [];
+      // scan the engines mods/ folder directly on the rust side.
+      // ts includes ALL mods regardless of whether they have valid modpack.ini,
+      // so the count is always accurate even when some mods fail to parse.
 
-      if (modPaths.length === 0) {
-        totalBytes.value = 0;
-        return;
-      }
-
-      const sizes = await Promise.all(
-        modPaths.map((folderPath) =>
-          invoke<number>('get_dir_size', { folderPath })
-        )
-      );
-
-      totalBytes.value = sizes.reduce((sum, s) => sum + s, 0);
+			// in summary: bypass everything and just get the folder size
+      const size = await invoke<number>('get_engine_mods_size', {
+        engineFolderPath: props.instanceData.canonInfo.folder_path,
+      });
+      totalBytes.value = size;
     } else {
       const size = await invoke<number>('get_dir_size', {
         folderPath: props.instanceData.canonInfo.folder_path,
@@ -66,7 +59,7 @@ async function computeSize() {
       totalBytes.value = size;
     }
   } catch (e) {
-    console.error('Failed to compute size:', e);
+    console.error('[ModFriend] Failed to compute size:', e);
     hasError.value = true;
   } finally {
     isLoading.value = false;
@@ -125,4 +118,4 @@ onMounted(computeSize);
       @apply text-modfriend-100;
     }
   }
-</style>
\ No newline at end of file
+</style>

From c4bf54e04734788df880d5ea6264c419349867b3 Mon Sep 17 00:00:00 2001
From: HeroEyad <hero@heroeyad.xyz>
Date: Sat, 21 Mar 2026 20:17:56 +0200
Subject: [PATCH 10/23] ok

---
 src-tauri/src/lib.rs   | 64 ++----------------------------------------
 src-tauri/src/utils.rs | 56 ++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 61 deletions(-)

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 9fdc879..bb88efb 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -30,63 +30,6 @@ struct InstanceStore {
     json_save_path: String,
     instance_list: InstanceList,
 }
-
-#[tauri::command]
-fn get_dir_size(folder_path: String) -> u64 {
-    fn walk(path: &std::path::Path) -> u64 {
-        match std::fs::read_dir(path) {
-            Err(e) => {
-                log::warn!("get_dir_size: cannot read {:?}: {}", path, e);
-                0
-            }
-            Ok(entries) => entries
-                .filter_map(|e| e.ok())
-                .map(|e| {
-                    let p = e.path();
-                    if p.is_dir() {
-                        walk(&p)
-                    } else {
-                        e.metadata().map(|m| m.len()).unwrap_or(0)
-                    }
-                })
-                .sum(),
-        }
-    }
-    let path = std::path::Path::new(&folder_path);
-    log::info!("get_dir_size called with: {:?} (exists: {})", folder_path, path.exists());
-    walk(path)
-}
-
-#[tauri::command]
-fn get_engine_mods_size(engine_folder_path: String) -> u64 {
-    fn walk(path: &std::path::Path) -> u64 {
-        match std::fs::read_dir(path) {
-            Err(e) => {
-                log::warn!("get_engine_mods_size: cannot read {:?}: {}", path, e);
-                0
-            }
-            Ok(entries) => entries
-                .filter_map(|e| e.ok())
-                .map(|e| {
-                    let p = e.path();
-                    if p.is_dir() {
-                        walk(&p)
-                    } else {
-                        e.metadata().map(|m| m.len()).unwrap_or(0)
-                    }
-                })
-                .sum(),
-        }
-    }
-    let mods_path = std::path::Path::new(&engine_folder_path).join("mods");
-    log::info!(
-        "get_engine_mods_size: scanning {:?} (exists: {})",
-        mods_path,
-        mods_path.exists()
-    );
-    walk(&mods_path)
-}
-
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     colog::init();
@@ -143,6 +86,8 @@ pub fn run() {
         .invoke_handler(tauri::generate_handler![
             // utils.rs
             utils::show_main_window,
+            utils::get_dir_size,
+            utils::get_engine_mods_size,
             // engines.rs
             engines::get_engine_contexts,
             engines::add_engine_context,
@@ -155,10 +100,7 @@ pub fn run() {
             instances::add_child_instance,
             instances::remove_child_instance,
             instances::edit_instance,
-            instances::remove_instance,
-            // lib.rs
-            get_dir_size,
-            get_engine_mods_size,
+            instances::remove_instance
         ])
         .plugin(tauri_plugin_opener::init())
         .run(tauri::generate_context!())
diff --git a/src-tauri/src/utils.rs b/src-tauri/src/utils.rs
index 647f5da..6e29ec2 100644
--- a/src-tauri/src/utils.rs
+++ b/src-tauri/src/utils.rs
@@ -4,3 +4,59 @@
 pub fn show_main_window(window: tauri::Window) {
     window.show().unwrap();
 }
+
+#[tauri::command]
+fn get_dir_size(folder_path: String) -> u64 {
+    fn walk(path: &std::path::Path) -> u64 {
+        match std::fs::read_dir(path) {
+            Err(e) => {
+                log::warn!("get_dir_size: cannot read {:?}: {}", path, e);
+                0
+            }
+            Ok(entries) => entries
+                .filter_map(|e| e.ok())
+                .map(|e| {
+                    let p = e.path();
+                    if p.is_dir() {
+                        walk(&p)
+                    } else {
+                        e.metadata().map(|m| m.len()).unwrap_or(0)
+                    }
+                })
+                .sum(),
+        }
+    }
+    let path = std::path::Path::new(&folder_path);
+    log::info!("get_dir_size called with: {:?} (exists: {})", folder_path, path.exists());
+    walk(path)
+}
+
+#[tauri::command]
+fn get_engine_mods_size(engine_folder_path: String) -> u64 {
+    fn walk(path: &std::path::Path) -> u64 {
+        match std::fs::read_dir(path) {
+            Err(e) => {
+                log::warn!("get_engine_mods_size: cannot read {:?}: {}", path, e);
+                0
+            }
+            Ok(entries) => entries
+                .filter_map(|e| e.ok())
+                .map(|e| {
+                    let p = e.path();
+                    if p.is_dir() {
+                        walk(&p)
+                    } else {
+                        e.metadata().map(|m| m.len()).unwrap_or(0)
+                    }
+                })
+                .sum(),
+        }
+    }
+    let mods_path = std::path::Path::new(&engine_folder_path).join("mods");
+    log::info!(
+        "get_engine_mods_size: scanning {:?} (exists: {})",
+        mods_path,
+        mods_path.exists()
+    );
+    walk(&mods_path)
+}

From 657b6b2329309250e0b15c5330e7ad01b03df254 Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Sat, 21 Mar 2026 18:43:57 -0500
Subject: [PATCH 11/23] fix some small things

---
 pnpm-lock.yaml                        | 10 ++++
 src-tauri/src/lib.rs                  |  3 +-
 src-tauri/src/utils.rs                | 36 ++----------
 src/components/WidgetAdvancedInfo.vue | 80 ++++++++++++++-------------
 src/components/WidgetRawData.vue      | 14 ++---
 src/core/engines.ts                   |  4 +-
 src/core/instances.ts                 | 20 +++++--
 src/core/mods.ts                      | 11 +++-
 src/core/utils.ts                     |  7 +++
 src/main.css                          |  3 +-
 src/views/Library.vue                 |  9 ++-
 11 files changed, 103 insertions(+), 94 deletions(-)
 create mode 100644 src/core/utils.ts

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d544384..b51f85f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@tauri-apps/plugin-dialog':
         specifier: ^2.6.0
         version: 2.6.0
+      '@tauri-apps/plugin-fs':
+        specifier: ^2.4.5
+        version: 2.4.5
       '@tauri-apps/plugin-opener':
         specifier: ^2.5.3
         version: 2.5.3
@@ -615,6 +618,9 @@ packages:
   '@tauri-apps/plugin-dialog@2.6.0':
     resolution: {integrity: sha512-q4Uq3eY87TdcYzXACiYSPhmpBA76shgmQswGkSVio4C82Sz2W4iehe9TnKYwbq7weHiL88Yw19XZm7v28+Micg==}
 
+  '@tauri-apps/plugin-fs@2.4.5':
+    resolution: {integrity: sha512-dVxWWGE6VrOxC7/jlhyE+ON/Cc2REJlM35R3PJX3UvFw2XwYhLGQVAIyrehenDdKjotipjYEVc4YjOl3qq90fA==}
+
   '@tauri-apps/plugin-opener@2.5.3':
     resolution: {integrity: sha512-CCcUltXMOfUEArbf3db3kCE7Ggy1ExBEBl51Ko2ODJ6GDYHRp1nSNlQm5uNCFY5k7/ufaK5Ib3Du/Zir19IYQQ==}
 
@@ -1428,6 +1434,10 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.10.1
 
+  '@tauri-apps/plugin-fs@2.4.5':
+    dependencies:
+      '@tauri-apps/api': 2.10.1
+
   '@tauri-apps/plugin-opener@2.5.3':
     dependencies:
       '@tauri-apps/api': 2.10.1
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index bb88efb..674953b 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -87,7 +87,6 @@ pub fn run() {
             // utils.rs
             utils::show_main_window,
             utils::get_dir_size,
-            utils::get_engine_mods_size,
             // engines.rs
             engines::get_engine_contexts,
             engines::add_engine_context,
@@ -105,4 +104,4 @@ pub fn run() {
         .plugin(tauri_plugin_opener::init())
         .run(tauri::generate_context!())
         .expect("Error while running tauri application");
-}
\ No newline at end of file
+}
diff --git a/src-tauri/src/utils.rs b/src-tauri/src/utils.rs
index 6e29ec2..fcd25c1 100644
--- a/src-tauri/src/utils.rs
+++ b/src-tauri/src/utils.rs
@@ -6,7 +6,7 @@ pub fn show_main_window(window: tauri::Window) {
 }
 
 #[tauri::command]
-fn get_dir_size(folder_path: String) -> u64 {
+pub fn get_dir_size(folder_path: String) -> u64 {
     fn walk(path: &std::path::Path) -> u64 {
         match std::fs::read_dir(path) {
             Err(e) => {
@@ -27,36 +27,10 @@ fn get_dir_size(folder_path: String) -> u64 {
         }
     }
     let path = std::path::Path::new(&folder_path);
-    log::info!("get_dir_size called with: {:?} (exists: {})", folder_path, path.exists());
-    walk(path)
-}
-
-#[tauri::command]
-fn get_engine_mods_size(engine_folder_path: String) -> u64 {
-    fn walk(path: &std::path::Path) -> u64 {
-        match std::fs::read_dir(path) {
-            Err(e) => {
-                log::warn!("get_engine_mods_size: cannot read {:?}: {}", path, e);
-                0
-            }
-            Ok(entries) => entries
-                .filter_map(|e| e.ok())
-                .map(|e| {
-                    let p = e.path();
-                    if p.is_dir() {
-                        walk(&p)
-                    } else {
-                        e.metadata().map(|m| m.len()).unwrap_or(0)
-                    }
-                })
-                .sum(),
-        }
-    }
-    let mods_path = std::path::Path::new(&engine_folder_path).join("mods");
     log::info!(
-        "get_engine_mods_size: scanning {:?} (exists: {})",
-        mods_path,
-        mods_path.exists()
+        "get_dir_size called with: {:?} (exists: {})",
+        folder_path,
+        path.exists()
     );
-    walk(&mods_path)
+    walk(path)
 }
diff --git a/src/components/WidgetAdvancedInfo.vue b/src/components/WidgetAdvancedInfo.vue
index 61d20b5..5d5b0e0 100644
--- a/src/components/WidgetAdvancedInfo.vue
+++ b/src/components/WidgetAdvancedInfo.vue
@@ -1,34 +1,32 @@
 <script setup lang="ts">
 import { invoke } from '@tauri-apps/api/core';
+import { join } from '@tauri-apps/api/path';
 import { computed, onMounted, ref, watch } from 'vue';
 
-interface ListDisplayInfo {
-  canonInfo: CanonInfo;
-  instance?: Instance;
-  children?: ListDisplayInfo[];
-}
+import type { ListDisplayInfo } from '@core/instances';
+import { formatSize } from '@core/utils';
 
 const props = defineProps<{
   instanceData: ListDisplayInfo;
 }>();
 
 const totalBytes = ref<number | null>(null);
+const modsTotalBytes = ref<number | null>(null);
 const isLoading = ref(true);
 const hasError = ref(false);
 
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
-}
-
 const totalFileSize = computed(() => {
   if (isLoading.value) return '...';
   if (hasError.value || totalBytes.value === null) return 'N/A';
   return formatSize(totalBytes.value);
 });
 
+const modsFileSize = computed(() => {
+  if (isLoading.value) return '...';
+  if (hasError.value || modsTotalBytes.value === null) return 'N/A';
+  return formatSize(modsTotalBytes.value);
+});
+
 const modsCount = computed(() => {
   if (props.instanceData.canonInfo.kind === 'engine') {
     return props.instanceData.canonInfo.softcode_list.length;
@@ -42,24 +40,25 @@ async function computeSize() {
   hasError.value = false;
 
   try {
-    if (props.instanceData.canonInfo.kind === 'engine') {
-      // scan the engines mods/ folder directly on the rust side.
-      // ts includes ALL mods regardless of whether they have valid modpack.ini,
-      // so the count is always accurate even when some mods fail to parse.
+    totalBytes.value = await invoke<number>('get_dir_size', {
+      folderPath: props.instanceData.canonInfo.folder_path,
+    });
 
-			// in summary: bypass everything and just get the folder size
-      const size = await invoke<number>('get_engine_mods_size', {
-        engineFolderPath: props.instanceData.canonInfo.folder_path,
-      });
-      totalBytes.value = size;
-    } else {
-      const size = await invoke<number>('get_dir_size', {
-        folderPath: props.instanceData.canonInfo.folder_path,
+    // If it's an engine that has mods, check the size of the mods folder as well
+    if (
+      props.instanceData.canonInfo.kind === 'engine' &&
+      modsCount.value &&
+      modsCount.value > 0
+    ) {
+      modsTotalBytes.value = await invoke<number>('get_dir_size', {
+        folderPath: await join(
+          props.instanceData.canonInfo.folder_path,
+          'mods',
+        ), // FIXME: mods folder could possibly be named differently (looking at you, Nightmarevision). Should account for that
       });
-      totalBytes.value = size;
     }
   } catch (e) {
-    console.error('[ModFriend] Failed to compute size:', e);
+    console.error('Failed to compute size:', e);
     hasError.value = true;
   } finally {
     isLoading.value = false;
@@ -74,14 +73,19 @@ onMounted(computeSize);
   <div id="widget" class="ml-6 mr-6 text-wrap">
     <!-- Engine view -->
     <template v-if="instanceData.canonInfo.kind === 'engine'">
-      <div class="infobar-item">
+      <div class="infobar-item" v-if="modsCount">
         <span class="key">Mods Count</span>
         <span class="value">{{ modsCount }}</span>
       </div>
+      <div class="infobar-item" v-if="modsCount && modsTotalBytes !== null">
+        <span class="key">Mods Size</span>
+        <span class="value">{{ modsFileSize }}</span>
+      </div>
       <div class="infobar-item">
         <span class="key">Total Size</span>
         <span class="value">{{ totalFileSize }}</span>
       </div>
+
       <div class="infobar-item">
         <span class="key">Engine Type</span>
         <span class="value">{{ instanceData.canonInfo.engine_kind }}</span>
@@ -96,7 +100,9 @@ onMounted(computeSize);
       </div>
       <div class="infobar-item">
         <span class="key">Version</span>
-        <span class="value">{{ instanceData.canonInfo.canonical_version || 'N/A' }}</span>
+        <span class="value">{{
+          instanceData.canonInfo.canonical_version || 'N/A'
+        }}</span>
       </div>
       <div class="infobar-item">
         <span class="key">Mod Kind</span>
@@ -107,15 +113,15 @@ onMounted(computeSize);
 </template>
 
 <style scoped lang="css">
-  @reference "maincss";
+@reference "maincss";
 
-  .infobar-item {
-    @apply flex flex-col gap-0.5 text-xs h-full;
-    > .key {
-      @apply text-modfriend-300 uppercase;
-    }
-    > .value {
-      @apply text-modfriend-100;
-    }
+.infobar-item {
+  @apply flex flex-col gap-0.5 text-xs h-full;
+  > .key {
+    @apply text-modfriend-300 uppercase;
+  }
+  > .value {
+    @apply text-modfriend-100;
   }
+}
 </style>
diff --git a/src/components/WidgetRawData.vue b/src/components/WidgetRawData.vue
index 2d1d81f..ab65676 100644
--- a/src/components/WidgetRawData.vue
+++ b/src/components/WidgetRawData.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-//i dont fucking know
+import { ListDisplayInfo } from '@core/instances';
 
 const props = defineProps<{
-  instanceData: Category;
+  instanceData: ListDisplayInfo;
 }>();
 </script>
 
 <template>
-	<div id="widget" class="ml-6 mr-6 text-wrap">
-		<pre class="text-xs">{{ props.instanceData }}</pre>
-	</div>
+  <div id="widget" class="ml-6 mr-6 text-wrap">
+    <pre class="text-xs">{{ props.instanceData }}</pre>
+  </div>
 </template>
 
 <style scoped lang="css">
-	@reference "maincss";
-</style>
\ No newline at end of file
+@reference "maincss";
+</style>
diff --git a/src/core/engines.ts b/src/core/engines.ts
index ec56812..df16aa9 100644
--- a/src/core/engines.ts
+++ b/src/core/engines.ts
@@ -1,10 +1,12 @@
+import type { BasicCanonInfo } from '@core/instances';
+
 interface EngineContext {
   folder_path: string;
   exe_path: string;
   engine_kind: number;
 }
 
-interface EngineCanonInfo extends EngineContext, BasicCanonInfo {
+export interface EngineCanonInfo extends EngineContext, BasicCanonInfo {
   supports_softcode: boolean;
   softcode_list: string[];
 }
diff --git a/src/core/instances.ts b/src/core/instances.ts
index 7e3612c..59fb9d8 100644
--- a/src/core/instances.ts
+++ b/src/core/instances.ts
@@ -1,5 +1,7 @@
+import type { EngineCanonInfo } from '@core/engines';
+import type { ModCanonInfo } from '@core/mods';
 
-interface BasicCanonInfo {
+export interface BasicCanonInfo {
   canonical_display_name: string;
   canonical_author: string;
 
@@ -9,11 +11,11 @@ interface BasicCanonInfo {
   canonical_banner_path?: String;
 }
 
-type CanonInfo =
-  | ({ kind: "mod" } & ModCanonInfo)
-  | ({ kind: "engine" } & EngineCanonInfo);
+export type CanonInfo =
+  | ({ kind: 'mod' } & ModCanonInfo)
+  | ({ kind: 'engine' } & EngineCanonInfo);
 
-interface InstanceInfo {
+export interface InstanceInfo {
   display_name?: string;
   version?: string;
   author?: string;
@@ -24,8 +26,14 @@ interface InstanceInfo {
   launch_args?: string;
 }
 
-interface Instance {
+export interface Instance {
   folder_path: string;
   edited_info?: InstanceInfo;
   children?: string[];
 }
+
+export interface ListDisplayInfo {
+  canonInfo: CanonInfo;
+  instance?: Instance;
+  children?: ListDisplayInfo[];
+}
diff --git a/src/core/mods.ts b/src/core/mods.ts
index 0882e36..fefa2fa 100644
--- a/src/core/mods.ts
+++ b/src/core/mods.ts
@@ -1,3 +1,5 @@
+import type { BasicCanonInfo } from '@core/instances';
+
 interface ModContext {
   folder_path: string;
   mod_kind: number;
@@ -5,7 +7,10 @@ interface ModContext {
   // data: any; // Not needed for the library view, can be very large
 }
 
-interface ModCanonInfo extends ModContext, BasicCanonInfo {
-  canonical_description: String;
-  canonical_version: String;
+export interface ModCanonInfo extends ModContext, BasicCanonInfo {
+  canonical_description: string;
+  canonical_version: string;
+  canonical_color: string; // In hex format
+  canonical_icon?: string;
+  canonical_banner?: string;
 }
diff --git a/src/core/utils.ts b/src/core/utils.ts
new file mode 100644
index 0000000..86fec01
--- /dev/null
+++ b/src/core/utils.ts
@@ -0,0 +1,7 @@
+export function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024)
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
diff --git a/src/main.css b/src/main.css
index b40484c..01843cc 100644
--- a/src/main.css
+++ b/src/main.css
@@ -138,8 +138,7 @@
   }
   #widget {
     /* TODO: stylize this properly */
-    background: darkgray;
-    border: thick solid black;
+    border: 1px solid black;
   }
 }
 
diff --git a/src/views/Library.vue b/src/views/Library.vue
index b143e8c..01ba619 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -20,13 +20,11 @@ import {
 } from 'reka-ui';
 import { onMounted, ref, watch } from 'vue';
 
+import { EngineCanonInfo } from '@core/engines';
+import { Instance, InstanceInfo, ListDisplayInfo } from '@core/instances';
+import { ModCanonInfo } from '@core/mods';
 import { globalStore } from '@core/store';
 
-interface ListDisplayInfo {
-  canonInfo: CanonInfo;
-  instance?: Instance;
-  children?: ListDisplayInfo[];
-}
 const LAST_SELECTED_INSTANCE_KEY = 'lastSelectedInstance';
 const listItems = ref<ListDisplayInfo[]>([]);
 const curItem = ref<ListDisplayInfo>();
@@ -423,6 +421,7 @@ onMounted(async () => {
 }
 .main-content {
   @apply w-full;
+  mask-image: linear-gradient(to top, white 95%, transparent);
 
   /* This is terrible, but it's so that we can have full width components if we need to */
   > .viewport {

From b3d1ab99963ee75c06100ef7ac7afaf1883e9688 Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Sun, 22 Mar 2026 11:42:38 -0500
Subject: [PATCH 12/23] minor reorganization for library + launching (on linux,
 at least!)

---
 src-tauri/src/engines.rs                      |  21 ++-
 src-tauri/src/lib.rs                          |   1 +
 src-tauri/src/paths.rs                        |   4 +-
 src-tauri/src/utils.rs                        |  44 ++++++
 .../library/InstanceSettingsPopover.vue       | 104 ++++++++++++++
 .../widgets}/WidgetAdvancedInfo.vue           |   0
 .../{ => library/widgets}/WidgetRawData.vue   |   0
 src/core/instances.ts                         |  11 +-
 src/views/Library.vue                         | 130 +++++-------------
 9 files changed, 208 insertions(+), 107 deletions(-)
 create mode 100644 src/components/library/InstanceSettingsPopover.vue
 rename src/components/{ => library/widgets}/WidgetAdvancedInfo.vue (100%)
 rename src/components/{ => library/widgets}/WidgetRawData.vue (100%)

diff --git a/src-tauri/src/engines.rs b/src-tauri/src/engines.rs
index 768a76b..ce0a9c6 100644
--- a/src-tauri/src/engines.rs
+++ b/src-tauri/src/engines.rs
@@ -37,6 +37,7 @@ pub struct EngineContext {
     pub folder_path: String,
     pub exe_path: String,
     pub engine_kind: EngineKind,
+    pub exe_type: ExecutableType,
 }
 
 /// Acesss the registery using:
@@ -75,6 +76,7 @@ impl EngineRegistery {
             folder_path: string_path.clone(),
             exe_path: string_path,
             engine_kind: EngineKind::Executable,
+            exe_type: ExecutableType::Platform,
         };
 
         for (engine_kind, detector) in &self.detectors {
@@ -86,8 +88,9 @@ impl EngineRegistery {
         // Sort by engine kind, the highest one wins if we have multiple
         found_kinds.sort_by_key(|a| *a.0);
 
-        if let Some((final_kind, exe_kind)) = found_kinds.last() {
+        if let Some((final_kind, exe_type)) = found_kinds.last() {
             base_context.engine_kind = **final_kind;
+            base_context.exe_type = *exe_type;
 
             // Update any context properties that may change from detector to detector
             // Executable detector sets the exe_path internally due to the nature of how it detects
@@ -98,7 +101,7 @@ impl EngineRegistery {
             // Manually set the exe_path for other engines
 
             if base_context.engine_kind != EngineKind::Executable {
-                let exe_extenstion = if exe_kind == &ExecutableType::Platform {
+                let exe_extenstion = if base_context.exe_type == ExecutableType::Platform {
                     EXE_EXTENSION
                 } else {
                     WINDOWS_EXE_EXTENSION
@@ -202,8 +205,9 @@ impl EngineDetector for ExecutableDetector {
         let folder_path = Path::new(&context.folder_path);
         let mut exe_filename = "".to_owned();
 
-        if let Some((_, exe_path)) = check_for_any_executable(folder_path) {
+        if let Some((exe_type, exe_path)) = check_for_any_executable(folder_path) {
             context.exe_path = exe_path.to_string_lossy().to_string();
+            context.exe_type = exe_type;
             exe_filename = exe_path.file_stem().unwrap().to_string_lossy().to_string();
         }
 
@@ -472,6 +476,8 @@ pub struct EngineCanonInfo {
 
     pub canonical_icon_path: Option<String>,
     pub canonical_banner_path: Option<String>,
+    pub canonical_launch_args: Option<String>,
+    pub canonical_command: Option<String>,
 }
 
 #[tauri::command]
@@ -511,6 +517,13 @@ pub fn get_engine_contexts_internal(context_store: &ContextStore) -> Vec<EngineC
                 let canonical_icon_path = detector.detect_icon();
                 let canonical_banner_path = detector.detect_banner();
 
+                let canonical_command = if context.exe_type == ExecutableType::WindowsOnUnix {
+                    // FIXME: Detectors should be able to specify/override this launch command
+                    Some("wine".to_string())
+                } else {
+                    None
+                };
+
                 EngineCanonInfo {
                     context: context.clone(),
 
@@ -524,6 +537,8 @@ pub fn get_engine_contexts_internal(context_store: &ContextStore) -> Vec<EngineC
 
                     canonical_icon_path,
                     canonical_banner_path,
+                    canonical_launch_args: None, // FIXME: Detectors should be able to specify launch args
+                    canonical_command,
                 }
             })
         })
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 674953b..b1c5c5e 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -87,6 +87,7 @@ pub fn run() {
             // utils.rs
             utils::show_main_window,
             utils::get_dir_size,
+            utils::launch_executable,
             // engines.rs
             engines::get_engine_contexts,
             engines::add_engine_context,
diff --git a/src-tauri/src/paths.rs b/src-tauri/src/paths.rs
index ad4dbe8..4bba2f6 100644
--- a/src-tauri/src/paths.rs
+++ b/src-tauri/src/paths.rs
@@ -4,11 +4,13 @@ use std::{
     path::{Path, PathBuf},
 };
 
+use serde::Serialize;
+
 /// Windows EXE suffix for unix systems where EXE_SUFFIX is empty, used for wine support
 pub const WINDOWS_EXE_EXTENSION: &str = "exe";
 
 /// Allows engine detectors to find out what type of executable they found, used for wine support
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize)]
 pub enum ExecutableType {
     Platform,
     #[allow(dead_code)]
diff --git a/src-tauri/src/utils.rs b/src-tauri/src/utils.rs
index fcd25c1..e7bb809 100644
--- a/src-tauri/src/utils.rs
+++ b/src-tauri/src/utils.rs
@@ -34,3 +34,47 @@ pub fn get_dir_size(folder_path: String) -> u64 {
     );
     walk(path)
 }
+
+#[tauri::command]
+pub fn launch_executable(
+    working_dir: String,
+    executable_path: String,
+    launcher_command: Option<String>,
+    launch_args: Option<String>,
+) -> Result<(), String> {
+    let working_dir = std::path::Path::new(working_dir.trim());
+    let executable_path = std::path::Path::new(executable_path.trim());
+    let command = launcher_command
+        .as_ref()
+        .map(|s| s.trim())
+        .filter(|s| !s.is_empty());
+    let args = launch_args
+        .as_ref()
+        .map(|s| s.trim())
+        .filter(|s| !s.is_empty())
+        .map(|s| s.split_whitespace().collect::<Vec<_>>())
+        .unwrap_or_default();
+
+    log::info!(
+        "launch_executable called with: working_dir={:?}, executable_path={:?}, launcher_command={:?}, launch_args={:?}",
+        working_dir,
+        executable_path,
+        command,
+        args
+    );
+
+    let mut process = if let Some(launcher) = command {
+        let mut cmd = std::process::Command::new(launcher);
+        cmd.arg(executable_path);
+        cmd
+    } else {
+        std::process::Command::new(executable_path)
+    };
+
+    process
+        .args(args)
+        .current_dir(working_dir)
+        .spawn()
+        .map_err(|e| format!("Failed to launch executable: {}", e))?;
+    return Ok(());
+}
diff --git a/src/components/library/InstanceSettingsPopover.vue b/src/components/library/InstanceSettingsPopover.vue
new file mode 100644
index 0000000..6cacf22
--- /dev/null
+++ b/src/components/library/InstanceSettingsPopover.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import {
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+} from 'reka-ui';
+
+import { InstanceInfo } from '@core/instances';
+
+// Using v-model (instead of props) for communication w/ parent component
+const open = defineModel<boolean>('open', { required: true });
+const editDraft = defineModel<InstanceInfo>('editDraft', { required: true });
+
+defineProps<{
+  disabled?: boolean;
+}>();
+</script>
+
+<template>
+  <PopoverRoot v-model:open="open" :modal="true">
+    <PopoverTrigger class="simple-button" :disabled="disabled">
+      <img src="@assets/images/icon/wrench.png?url" />
+    </PopoverTrigger>
+    <PopoverPortal>
+      <PopoverContent align="end" :side-offset="8" class="instance-settings">
+        <legend>Instance Settings</legend>
+        <div class="instance-setttings-content">
+          <fieldset>
+            <label for="display-name"> Display Name </label>
+            <input
+              id="display-name"
+              type="text"
+              v-model="editDraft.display_name"
+            />
+          </fieldset>
+          <fieldset>
+            <label for="author"> Author </label>
+            <input id="author" type="text" v-model="editDraft.author" />
+          </fieldset>
+          <fieldset>
+            <label for="version"> Version </label>
+            <input id="version" type="text" v-model="editDraft.version" />
+          </fieldset>
+          <fieldset class="col-span-2">
+            <label for="description"> Description </label>
+            <textarea
+              id="description"
+              class="h-24"
+              v-model="editDraft.description"
+            />
+          </fieldset>
+        </div>
+        <PopoverArrow class="fill-modfriend-700" />
+        <PopoverClose
+          class="simple-button text-modfriend-50 w-16 absolute right-1 top-1"
+        >
+          <img src="@assets/images/icon/close.png?url" class="size-4" />
+        </PopoverClose>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>
+
+<style scoped lang="css">
+@reference "maincss";
+
+.simple-button {
+  @apply size-8 shrink-0 grid place-items-center rounded-full hover:bg-modfriend-500/30 active:bg-modfriend-500/50 transition-colors;
+
+  > img {
+    @apply size-6;
+  }
+}
+
+:deep(.instance-settings) {
+  @apply bg-modfriend-800 p-2 rounded-xl border border-modfriend-700 flex flex-col gap-4 mb-2 shadow-lg shadow-black/25;
+
+  legend {
+    @apply text-right mr-7 text-modfriend-300;
+  }
+
+  .instance-setttings-content {
+    @apply grid grid-cols-2 gap-2;
+
+    fieldset {
+      @apply flex flex-col gap-1;
+
+      label {
+        @apply text-xs text-modfriend-300;
+      }
+      input,
+      textarea {
+        @apply bg-modfriend-700 text-modfriend-50 px-2 py-1 rounded-md outline-0 focus:ring-2 focus:ring-codename-500 focus:ring-offset-1 focus:ring-offset-modfriend-700;
+      }
+      textarea {
+        @apply resize-none;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/WidgetAdvancedInfo.vue b/src/components/library/widgets/WidgetAdvancedInfo.vue
similarity index 100%
rename from src/components/WidgetAdvancedInfo.vue
rename to src/components/library/widgets/WidgetAdvancedInfo.vue
diff --git a/src/components/WidgetRawData.vue b/src/components/library/widgets/WidgetRawData.vue
similarity index 100%
rename from src/components/WidgetRawData.vue
rename to src/components/library/widgets/WidgetRawData.vue
diff --git a/src/core/instances.ts b/src/core/instances.ts
index 59fb9d8..932f33f 100644
--- a/src/core/instances.ts
+++ b/src/core/instances.ts
@@ -4,11 +4,11 @@ import type { ModCanonInfo } from '@core/mods';
 export interface BasicCanonInfo {
   canonical_display_name: string;
   canonical_author: string;
-
-  canonical_color_hex: String;
-
-  canonical_icon_path?: String;
-  canonical_banner_path?: String;
+  canonical_color_hex: string;
+  canonical_icon_path: string | null;
+  canonical_banner_path: string | null;
+  canonical_launch_args: string | null;
+  canonical_command: string | null;
 }
 
 export type CanonInfo =
@@ -24,6 +24,7 @@ export interface InstanceInfo {
   icon_path?: string;
   banner_path?: string;
   launch_args?: string;
+  launch_command?: string;
 }
 
 export interface Instance {
diff --git a/src/views/Library.vue b/src/views/Library.vue
index 01ba619..8b69367 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import WidgetAdvancedInfo from '@components/WidgetAdvancedInfo.vue';
-import WidgetRawData from '@components/WidgetRawData.vue';
+import InstanceSettingsPopover from '@components/library/InstanceSettingsPopover.vue';
+import WidgetAdvancedInfo from '@components/library/widgets/WidgetAdvancedInfo.vue';
+import WidgetRawData from '@components/library/widgets/WidgetRawData.vue';
 import { invoke } from '@tauri-apps/api/core';
 import { open } from '@tauri-apps/plugin-dialog';
 import {
@@ -10,14 +11,6 @@ import {
   ScrollAreaViewport,
   Separator,
 } from 'reka-ui';
-import {
-  PopoverArrow,
-  PopoverClose,
-  PopoverContent,
-  PopoverPortal,
-  PopoverRoot,
-  PopoverTrigger,
-} from 'reka-ui';
 import { onMounted, ref, watch } from 'vue';
 
 import { EngineCanonInfo } from '@core/engines';
@@ -48,9 +41,30 @@ async function handleAddClick() {
 }
 
 async function handleLaunchClick() {
-  if (curItem.value) {
-    // TODO
-    console.info('Launching', curItem.value);
+  if (curItem.value && curItem.value.canonInfo.kind === 'engine') {
+    const workingDir =
+      curItem.value.instance?.folder_path ??
+      curItem.value.canonInfo.folder_path;
+    const launcherCommand =
+      curItem.value.instance?.edited_info?.launch_command ??
+      curItem.value.canonInfo.canonical_command ??
+      undefined;
+    const launchArgs =
+      curItem.value.instance?.edited_info?.launch_args ??
+      curItem.value.canonInfo.canonical_launch_args ??
+      undefined;
+
+    try {
+      await invoke('launch_executable', {
+        workingDir,
+        executablePath: curItem.value.canonInfo.exe_path,
+        launcherCommand,
+        launchArgs,
+      });
+      console.log('Launching', curItem.value.canonInfo.exe_path);
+    } catch (error) {
+      console.error('Failed to launch executable:', error);
+    }
   }
 }
 
@@ -315,56 +329,11 @@ onMounted(async () => {
               </span>
             </div>
           </div>
-          <PopoverRoot v-model:open="instanceSettingsOpen" :modal="true">
-            <PopoverTrigger class="simple-button" :disabled="!curItem">
-              <img src="@assets/images/icon/wrench.png?url" />
-            </PopoverTrigger>
-            <PopoverPortal>
-              <PopoverContent
-                align="end"
-                :side-offset="8"
-                class="instance-settings"
-              >
-                <legend>Instance Settings</legend>
-                <div class="instance-setttings-content">
-                  <fieldset>
-                    <label for="display-name"> Display Name </label>
-                    <input
-                      id="display-name"
-                      type="text"
-                      v-model="editDraft.display_name"
-                    />
-                  </fieldset>
-                  <fieldset>
-                    <label for="author"> Author </label>
-                    <input id="author" type="text" v-model="editDraft.author" />
-                  </fieldset>
-                  <fieldset>
-                    <label for="version"> Version </label>
-                    <input
-                      id="version"
-                      type="text"
-                      v-model="editDraft.version"
-                    />
-                  </fieldset>
-                  <fieldset class="col-span-2">
-                    <label for="description"> Description </label>
-                    <textarea
-                      id="description"
-                      class="h-24"
-                      v-model="editDraft.description"
-                    />
-                  </fieldset>
-                </div>
-                <PopoverArrow class="fill-modfriend-700" />
-                <PopoverClose
-                  class="simple-button text-modfriend-50 w-16 absolute right-1 top-1"
-                >
-                  <img src="@assets/images/icon/close.png?url" class="size-4" />
-                </PopoverClose>
-              </PopoverContent>
-            </PopoverPortal>
-          </PopoverRoot>
+          <InstanceSettingsPopover
+            v-model:open="instanceSettingsOpen"
+            v-model:editDraft="editDraft"
+            :disabled="!curItem"
+          />
         </div>
         <div
           v-if="curItem.instance?.edited_info?.description"
@@ -408,14 +377,6 @@ onMounted(async () => {
   }
 }
 
-.simple-button {
-  @apply size-8 shrink-0 grid place-items-center rounded-full hover:bg-modfriend-500/30 active:bg-modfriend-500/50 transition-colors;
-
-  > img {
-    @apply size-6;
-  }
-}
-
 .instance-list {
   @apply w-full grow min-h-0 relative overflow-hidden;
 }
@@ -484,33 +445,6 @@ onMounted(async () => {
   }
 }
 
-:deep(.instance-settings) {
-  @apply bg-modfriend-800 p-2 rounded-xl border border-modfriend-700 flex flex-col gap-4 mb-2 shadow-lg shadow-black/25;
-
-  legend {
-    @apply text-right mr-7 text-modfriend-300;
-  }
-
-  .instance-setttings-content {
-    @apply grid grid-cols-2 gap-2;
-
-    fieldset {
-      @apply flex flex-col gap-1;
-
-      label {
-        @apply text-xs text-modfriend-300;
-      }
-      input,
-      textarea {
-        @apply bg-modfriend-700 text-modfriend-50 px-2 py-1 rounded-md outline-0 focus:ring-2 focus:ring-codename-500 focus:ring-offset-1 focus:ring-offset-modfriend-700;
-      }
-      textarea {
-        @apply resize-none;
-      }
-    }
-  }
-}
-
 .banner-spacer {
   @apply h-38;
 }

From e5dc152c1bdabebd95c34773b5f4ca3e39de7576 Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Sun, 22 Mar 2026 12:17:20 -0500
Subject: [PATCH 13/23] temp editing of launch stuff

---
 .../library/InstanceSettingsPopover.vue       | 42 +++++++++++++++++++
 src/views/Library.vue                         | 12 ++++++
 2 files changed, 54 insertions(+)

diff --git a/src/components/library/InstanceSettingsPopover.vue b/src/components/library/InstanceSettingsPopover.vue
index 6cacf22..5788d9a 100644
--- a/src/components/library/InstanceSettingsPopover.vue
+++ b/src/components/library/InstanceSettingsPopover.vue
@@ -7,12 +7,19 @@ import {
   PopoverRoot,
   PopoverTrigger,
 } from 'reka-ui';
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from 'reka-ui';
+import { ref } from 'vue';
 
 import { InstanceInfo } from '@core/instances';
 
 // Using v-model (instead of props) for communication w/ parent component
 const open = defineModel<boolean>('open', { required: true });
 const editDraft = defineModel<InstanceInfo>('editDraft', { required: true });
+const advancedOpen = ref(false);
 
 defineProps<{
   disabled?: boolean;
@@ -44,6 +51,10 @@ defineProps<{
             <label for="version"> Version </label>
             <input id="version" type="text" v-model="editDraft.version" />
           </fieldset>
+          <fieldset>
+            <label for="color"> Color </label>
+            <input id="color" type="color" v-model="editDraft.color_hex" />
+          </fieldset>
           <fieldset class="col-span-2">
             <label for="description"> Description </label>
             <textarea
@@ -52,6 +63,37 @@ defineProps<{
               v-model="editDraft.description"
             />
           </fieldset>
+          <CollapsibleRoot class="col-span-2" v-model:open="advancedOpen">
+            <CollapsibleTrigger
+              class="w-full flex justify-between items-center hover:bg-modfriend-700 text-modfriend-500"
+            >
+              Advanced Settings
+              <img
+                src="@assets/images/icon/expand.png?url"
+                :style="{
+                  transform: advancedOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                }"
+              />
+            </CollapsibleTrigger>
+            <CollapsibleContent class="py-2 gap-2 flex flex-col">
+              <fieldset>
+                <label for="launch-command"> Launch Command </label>
+                <input
+                  id="launch-command"
+                  type="text"
+                  v-model="editDraft.launch_command"
+                />
+              </fieldset>
+              <fieldset>
+                <label for="launch-args"> Launch Arguments </label>
+                <input
+                  id="launch-args"
+                  type="text"
+                  v-model="editDraft.launch_args"
+                />
+              </fieldset>
+            </CollapsibleContent>
+          </CollapsibleRoot>
         </div>
         <PopoverArrow class="fill-modfriend-700" />
         <PopoverClose
diff --git a/src/views/Library.vue b/src/views/Library.vue
index 8b69367..54c3560 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -199,6 +199,18 @@ watch(instanceSettingsOpen, async (isOpen, wasOpen) => {
         curItem.value.canonInfo.canonical_author,
       version: curItem.value.instance?.edited_info?.version ?? '',
       description: curItem.value.instance?.edited_info?.description ?? '',
+      color_hex:
+        curItem.value.instance?.edited_info?.color_hex ??
+        curItem.value.canonInfo.canonical_color_hex ??
+        '#000000',
+      launch_command:
+        curItem.value.instance?.edited_info?.launch_command ??
+        curItem.value.canonInfo.canonical_command ??
+        '',
+      launch_args:
+        curItem.value.instance?.edited_info?.launch_args ??
+        curItem.value.canonInfo.canonical_launch_args ??
+        '',
     };
     return;
   }

From 4f8ecd771194eb14385b90d9ac190395e102111d Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Sun, 22 Mar 2026 12:27:28 -0500
Subject: [PATCH 14/23] whoops

---
 src-tauri/src/instances.rs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src-tauri/src/instances.rs b/src-tauri/src/instances.rs
index 6dc6b57..582c2c1 100644
--- a/src-tauri/src/instances.rs
+++ b/src-tauri/src/instances.rs
@@ -65,6 +65,7 @@ pub struct EditableInstanceInfo {
     pub color_hex: Option<String>,
     pub icon_path: Option<String>,
     pub banner_path: Option<String>,
+    pub launch_command: Option<String>,
     pub launch_args: Option<String>,
 }
 

From d1014464aa46985be73b09a9b1e7ab94fb594697 Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Sun, 22 Mar 2026 13:06:19 -0500
Subject: [PATCH 15/23] async `get_dir_size`

---
 src-tauri/src/utils.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-tauri/src/utils.rs b/src-tauri/src/utils.rs
index e7bb809..207d414 100644
--- a/src-tauri/src/utils.rs
+++ b/src-tauri/src/utils.rs
@@ -6,7 +6,7 @@ pub fn show_main_window(window: tauri::Window) {
 }
 
 #[tauri::command]
-pub fn get_dir_size(folder_path: String) -> u64 {
+pub async fn get_dir_size(folder_path: String) -> u64 {
     fn walk(path: &std::path::Path) -> u64 {
         match std::fs::read_dir(path) {
             Err(e) => {

From 4b02d78f44f2acf66b2fe8f164a2201ef5d45f0d Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Sun, 22 Mar 2026 17:16:02 -0500
Subject: [PATCH 16/23] drag and drop

---
 src/views/Library.vue | 165 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 161 insertions(+), 4 deletions(-)

diff --git a/src/views/Library.vue b/src/views/Library.vue
index 54c3560..9b5147c 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -3,7 +3,9 @@ import InstanceSettingsPopover from '@components/library/InstanceSettingsPopover
 import WidgetAdvancedInfo from '@components/library/widgets/WidgetAdvancedInfo.vue';
 import WidgetRawData from '@components/library/widgets/WidgetRawData.vue';
 import { invoke } from '@tauri-apps/api/core';
+import { UnlistenFn, listen } from '@tauri-apps/api/event';
 import { open } from '@tauri-apps/plugin-dialog';
+import { exists, readDir } from '@tauri-apps/plugin-fs';
 import {
   ScrollAreaRoot,
   ScrollAreaScrollbar,
@@ -11,7 +13,7 @@ import {
   ScrollAreaViewport,
   Separator,
 } from 'reka-ui';
-import { onMounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { EngineCanonInfo } from '@core/engines';
 import { Instance, InstanceInfo, ListDisplayInfo } from '@core/instances';
@@ -25,6 +27,40 @@ const curItem = ref<ListDisplayInfo>();
 const instanceSettingsOpen = ref(false);
 const editDraft = ref<InstanceInfo>({} as InstanceInfo);
 
+type HoverState = {
+  state: null | 'hoveringWindow' | 'hoveringSidebar';
+  paths: string[] | null;
+  hasInvalidPaths: boolean;
+};
+const hoverState = ref<HoverState>({
+  state: null,
+  paths: null,
+  hasInvalidPaths: false,
+});
+const hoverListeners: UnlistenFn[] = [];
+
+async function hasNonDirectoryPath(paths: string[]): Promise<boolean> {
+  for (const path of paths) {
+    if (!(await exists(path))) {
+      return true;
+    }
+
+    try {
+      await readDir(path);
+    } catch {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+async function addEngineFromFolder(folderPath: string): Promise<void> {
+  await invoke('add_engine_context', { folderPath });
+  await invoke('add_instance', { folderPath });
+  await invoke('scan_mod_instances', { folderPath });
+}
+
 async function handleAddClick() {
   const selected = await open({
     title: 'Select Engine Directory',
@@ -33,9 +69,7 @@ async function handleAddClick() {
   });
 
   if (typeof selected === 'string') {
-    await invoke('add_engine_context', { folderPath: selected });
-    await invoke('add_instance', { folderPath: selected });
-    await invoke('scan_mod_instances', { folderPath: selected });
+    await addEngineFromFolder(selected);
     await refreshEngineContexts();
   }
 }
@@ -227,6 +261,94 @@ onMounted(async () => {
   globalStore.background = bgModule.default;
 
   curItem.value = getLastSelectedInstance();
+
+  // Listen to hover events
+  hoverListeners.push(
+    await listen('tauri://drag-enter', async (event) => {
+      const payload = event.payload as {
+        paths?: string[];
+        position?: { x: number; y: number };
+      };
+      console.log('Drag enter', payload);
+      if (payload.paths && payload.paths.length > 0) {
+        hoverState.value = {
+          state: 'hoveringWindow',
+          paths: payload.paths,
+          hasInvalidPaths: await hasNonDirectoryPath(payload.paths),
+        };
+      } else {
+        hoverState.value = {
+          state: 'hoveringWindow',
+          paths: payload.paths ?? null,
+          hasInvalidPaths: true,
+        };
+      }
+    }),
+  );
+  hoverListeners.push(
+    await listen('tauri://drag-over', (event) => {
+      const payload = event.payload as { position?: { x: number; y: number } };
+
+      // Check if in sidebar
+      const sidebar = document.querySelector('.list-panel');
+      if (sidebar) {
+        const rect = sidebar.getBoundingClientRect();
+        if (
+          payload.position &&
+          payload.position.x >= rect.left &&
+          payload.position.x <= rect.right &&
+          payload.position.y >= rect.top &&
+          payload.position.y <= rect.bottom
+        ) {
+          hoverState.value.state = 'hoveringSidebar';
+        } else {
+          hoverState.value.state = 'hoveringWindow';
+        }
+      }
+    }),
+  );
+
+  hoverListeners.push(
+    await listen('tauri://drag-drop', async (event) => {
+      console.log('Drop event', event);
+      if (hoverState.value.paths && hoverState.value.paths.length > 0) {
+        // Only handle if hovering the sidebar
+        if (
+          hoverState.value.state === 'hoveringSidebar' &&
+          !hoverState.value.hasInvalidPaths
+        ) {
+          let addedAtLeastOne = false;
+
+          for (const filePath of hoverState.value.paths) {
+            try {
+              await addEngineFromFolder(filePath);
+              addedAtLeastOne = true;
+            } catch (error) {
+              console.error('Failed to add engine from dropped folder:', {
+                filePath,
+                error,
+              });
+            }
+          }
+
+          if (addedAtLeastOne) {
+            await refreshEngineContexts();
+          }
+        }
+      }
+      hoverState.value = { state: null, paths: null, hasInvalidPaths: false };
+    }),
+  );
+
+  hoverListeners.push(
+    await listen('tauri://drag-leave', () => {
+      hoverState.value = { state: null, paths: null, hasInvalidPaths: false };
+    }),
+  );
+});
+
+onBeforeUnmount(() => {
+  hoverListeners.forEach((unlisten) => unlisten());
 });
 </script>
 
@@ -246,6 +368,29 @@ onMounted(async () => {
       </div>
       <ScrollAreaRoot class="instance-list scroll-area">
         <ScrollAreaViewport class="w-full h-full">
+          <div
+            class="dragdrop-overlay"
+            :class="
+              hoverState.state === 'hoveringSidebar'
+                ? hoverState.hasInvalidPaths
+                  ? 'hovering-sidebar invalid'
+                  : 'hovering-sidebar'
+                : undefined
+            "
+            v-if="hoverState.state"
+          >
+            <span
+              v-if="
+                !hoverState.hasInvalidPaths ||
+                hoverState.state !== 'hoveringSidebar'
+              "
+              >Drag and drop engine folders here to add them to your
+              library.</span
+            >
+            <span v-else-if="hoverState.state === 'hoveringSidebar'"
+              >Erm... doesn't look like a valid engine folder to me.</span
+            >
+          </div>
           <div
             class="engine-item"
             v-for="item in listItems"
@@ -391,6 +536,18 @@ onMounted(async () => {
 
 .instance-list {
   @apply w-full grow min-h-0 relative overflow-hidden;
+
+  .dragdrop-overlay {
+    @apply absolute inset-0 bg-black/75 pointer-events-none transition-colors flex items-center justify-center text-center p-2 text-sm bg-blend-darken border-dashed border-2;
+    z-index: 10;
+
+    &.hovering-sidebar {
+      @apply bg-black/50 border-codename-500/50 box-content text-shadow-codename-500/75 text-shadow-lg;
+      &.invalid {
+        @apply border-red-500/50 bg-red-950/75;
+      }
+    }
+  }
 }
 .main-content {
   @apply w-full;

From 5c8fffabe3061dcfe281ae961ef9d449bb377ae3 Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Sun, 22 Mar 2026 17:25:08 -0500
Subject: [PATCH 17/23] small style change Lol

---
 src/views/Library.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Library.vue b/src/views/Library.vue
index 9b5147c..58cdbab 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -544,7 +544,7 @@ onBeforeUnmount(() => {
     &.hovering-sidebar {
       @apply bg-black/50 border-codename-500/50 box-content text-shadow-codename-500/75 text-shadow-lg;
       &.invalid {
-        @apply border-red-500/50 bg-red-950/75;
+        @apply border-red-500/50 bg-red-950/75 text-shadow-red-500/75;
       }
     }
   }

From 0197a7e1862ef86e10b5f4f23493e0ec63160c73 Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Sun, 22 Mar 2026 17:35:47 -0500
Subject: [PATCH 18/23] Okay tauri I am not dealing with your permission
 nonsense

---
 src-tauri/src/lib.rs   |  1 +
 src-tauri/src/utils.rs |  8 ++++++++
 src/views/Library.vue  | 18 +++++-------------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index b1c5c5e..7d2052d 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -88,6 +88,7 @@ pub fn run() {
             utils::show_main_window,
             utils::get_dir_size,
             utils::launch_executable,
+            utils::has_non_directory_path,
             // engines.rs
             engines::get_engine_contexts,
             engines::add_engine_context,
diff --git a/src-tauri/src/utils.rs b/src-tauri/src/utils.rs
index 207d414..b1abe2a 100644
--- a/src-tauri/src/utils.rs
+++ b/src-tauri/src/utils.rs
@@ -78,3 +78,11 @@ pub fn launch_executable(
         .map_err(|e| format!("Failed to launch executable: {}", e))?;
     return Ok(());
 }
+
+#[tauri::command]
+pub fn has_non_directory_path(paths: Vec<String>) -> bool {
+    paths.iter().any(|raw_path| {
+        let path = std::path::Path::new(raw_path.trim());
+        !path.exists() || !path.is_dir()
+    })
+}
diff --git a/src/views/Library.vue b/src/views/Library.vue
index 58cdbab..3032434 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -5,7 +5,6 @@ import WidgetRawData from '@components/library/widgets/WidgetRawData.vue';
 import { invoke } from '@tauri-apps/api/core';
 import { UnlistenFn, listen } from '@tauri-apps/api/event';
 import { open } from '@tauri-apps/plugin-dialog';
-import { exists, readDir } from '@tauri-apps/plugin-fs';
 import {
   ScrollAreaRoot,
   ScrollAreaScrollbar,
@@ -40,19 +39,12 @@ const hoverState = ref<HoverState>({
 const hoverListeners: UnlistenFn[] = [];
 
 async function hasNonDirectoryPath(paths: string[]): Promise<boolean> {
-  for (const path of paths) {
-    if (!(await exists(path))) {
-      return true;
-    }
-
-    try {
-      await readDir(path);
-    } catch {
-      return true;
-    }
+  try {
+    return await invoke<boolean>('has_non_directory_path', { paths });
+  } catch (error) {
+    console.error('Failed to validate dropped paths:', { paths, error });
+    return true;
   }
-
-  return false;
 }
 
 async function addEngineFromFolder(folderPath: string): Promise<void> {

From ec150926f713e88ead53a8af49828e794b56e413 Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Sun, 22 Mar 2026 20:08:59 -0500
Subject: [PATCH 19/23] fonts

---
 .../library/InstanceSettingsPopover.vue       |  2 +-
 src/main.css                                  |  2 +-
 src/views/Library.vue                         | 22 +++++++++++--------
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/library/InstanceSettingsPopover.vue b/src/components/library/InstanceSettingsPopover.vue
index 5788d9a..2e658ae 100644
--- a/src/components/library/InstanceSettingsPopover.vue
+++ b/src/components/library/InstanceSettingsPopover.vue
@@ -131,7 +131,7 @@ defineProps<{
       @apply flex flex-col gap-1;
 
       label {
-        @apply text-xs text-modfriend-300;
+        @apply text-xs text-modfriend-300 font-display uppercase;
       }
       input,
       textarea {
diff --git a/src/main.css b/src/main.css
index 01843cc..2048738 100644
--- a/src/main.css
+++ b/src/main.css
@@ -97,7 +97,7 @@
 
   .btn,
   .btn-shiny {
-    @apply flex items-center justify-center px-3 py-2 bg-center border-black/20 border-2 cursor-pointer rounded-xl;
+    @apply flex items-center justify-center px-3 py-2 bg-center border-black/20 border-2 cursor-pointer rounded-xl font-phantommuff;
 
     transition-duration: 150ms;
     transition-property: filter;
diff --git a/src/views/Library.vue b/src/views/Library.vue
index 3032434..65ae5ea 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -401,14 +401,16 @@ onBeforeUnmount(() => {
                   item.canonInfo.canonical_display_name
                 }}
               </div>
-              <div class="text-xs text-modfriend-300 truncate font-bold">
-                {{
-                  item.instance?.edited_info?.author ||
-                  item.canonInfo.canonical_author
-                }}
-                <template v-if="item.instance?.edited_info?.version">
+              <div class="text-xs text-modfriend-300 truncate">
+                <span class="font-bold">
+                  {{
+                    item.instance?.edited_info?.author ||
+                    item.canonInfo.canonical_author
+                  }}
+                </span>
+                <span v-if="item.instance?.edited_info?.version">
                   {{ ' - v' + item.instance.edited_info.version }}
-                </template>
+                </span>
               </div>
               <div
                 class="text-xs text-modfriend-600 truncate"
@@ -435,7 +437,9 @@ onBeforeUnmount(() => {
     <ScrollAreaRoot class="scroll-area main-content">
       <ScrollAreaViewport class="w-full h-full viewport" v-if="curItem">
         <div class="banner-spacer" />
-        <h1 class="text-3xl mb-4 text-shadow-modfriend-900 text-shadow-md">
+        <h1
+          class="text-3xl mb-4 text-shadow-modfriend-900 text-shadow-md font-phantommuff"
+        >
           {{
             curItem?.instance?.edited_info?.display_name ||
             curItem?.canonInfo.canonical_display_name
@@ -624,7 +628,7 @@ onBeforeUnmount(() => {
   .infobar-item {
     @apply flex flex-col gap-0.5 text-xs h-full;
     > .key {
-      @apply text-modfriend-300 uppercase;
+      @apply text-modfriend-300 uppercase font-display;
     }
     > .value {
       @apply text-modfriend-100;

From 2082ceb6b3d172c618169106bdc84985b208424d Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Mon, 23 Mar 2026 00:26:54 -0500
Subject: [PATCH 20/23] some scroll area tweaksish

---
 .../library/widgets/WidgetAdvancedInfo.vue    |  55 ++--
 src/views/Library.vue                         | 275 ++++++++++--------
 2 files changed, 182 insertions(+), 148 deletions(-)

diff --git a/src/components/library/widgets/WidgetAdvancedInfo.vue b/src/components/library/widgets/WidgetAdvancedInfo.vue
index 5d5b0e0..9d52840 100644
--- a/src/components/library/widgets/WidgetAdvancedInfo.vue
+++ b/src/components/library/widgets/WidgetAdvancedInfo.vue
@@ -73,23 +73,22 @@ onMounted(computeSize);
   <div id="widget" class="ml-6 mr-6 text-wrap">
     <!-- Engine view -->
     <template v-if="instanceData.canonInfo.kind === 'engine'">
-      <div class="infobar-item" v-if="modsCount">
-        <span class="key">Mods Count</span>
-        <span class="value">{{ modsCount }}</span>
-      </div>
-      <div class="infobar-item" v-if="modsCount && modsTotalBytes !== null">
-        <span class="key">Mods Size</span>
-        <span class="value">{{ modsFileSize }}</span>
-      </div>
-      <div class="infobar-item">
-        <span class="key">Total Size</span>
-        <span class="value">{{ totalFileSize }}</span>
-      </div>
-
-      <div class="infobar-item">
-        <span class="key">Engine Type</span>
-        <span class="value">{{ instanceData.canonInfo.engine_kind }}</span>
-      </div>
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <span class="key">Size</span>
+              <span class="value">{{ totalFileSize }}</span>
+            </td>
+          </tr>
+          <tr v-if="modsCount !== null">
+            <td>
+              <span class="key">Mods Size</span>
+              <span class="value">{{ modsFileSize }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </template>
 
     <!-- Mod view -->
@@ -115,13 +114,21 @@ onMounted(computeSize);
 <style scoped lang="css">
 @reference "maincss";
 
-.infobar-item {
-  @apply flex flex-col gap-0.5 text-xs h-full;
-  > .key {
-    @apply text-modfriend-300 uppercase;
-  }
-  > .value {
-    @apply text-modfriend-100;
+table {
+  width: 100%;
+  tbody {
+    tr {
+      td {
+        padding: 0.25rem 0;
+        .key {
+          margin-right: 0.5rem;
+          font-weight: bold;
+        }
+        .value {
+          @apply text-codename-100;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/Library.vue b/src/views/Library.vue
index 65ae5ea..8062f95 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -359,70 +359,72 @@ onBeforeUnmount(() => {
         </button>
       </div>
       <ScrollAreaRoot class="instance-list scroll-area">
-        <ScrollAreaViewport class="w-full h-full">
-          <div
-            class="dragdrop-overlay"
-            :class="
-              hoverState.state === 'hoveringSidebar'
-                ? hoverState.hasInvalidPaths
-                  ? 'hovering-sidebar invalid'
-                  : 'hovering-sidebar'
-                : undefined
+        <div
+          class="dragdrop-overlay"
+          :class="
+            hoverState.state === 'hoveringSidebar'
+              ? hoverState.hasInvalidPaths
+                ? 'hovering-sidebar invalid'
+                : 'hovering-sidebar'
+              : undefined
+          "
+          v-if="hoverState.state"
+        >
+          <span
+            v-if="
+              !hoverState.hasInvalidPaths ||
+              hoverState.state !== 'hoveringSidebar'
             "
-            v-if="hoverState.state"
+            >Drag and drop engine folders here to add them to your
+            library.</span
           >
-            <span
-              v-if="
-                !hoverState.hasInvalidPaths ||
-                hoverState.state !== 'hoveringSidebar'
-              "
-              >Drag and drop engine folders here to add them to your
-              library.</span
-            >
-            <span v-else-if="hoverState.state === 'hoveringSidebar'"
-              >Erm... doesn't look like a valid engine folder to me.</span
-            >
-          </div>
-          <div
-            class="engine-item"
-            v-for="item in listItems"
-            :key="item.canonInfo.folder_path"
-            :class="{ current: item === curItem }"
-            @click="selectItem(item)"
+          <span v-else-if="hoverState.state === 'hoveringSidebar'"
+            >Erm... doesn't look like a valid engine folder to me.</span
           >
-            <img
-              src="@assets/images/engine/codename.png?url"
-              class="size-12 shrink-0"
-            />
-            <div class="info flex flex-col overflow-hidden">
-              <div class="text-sm truncate font-phantommuff">
-                {{
-                  item.instance?.edited_info?.display_name ||
-                  item.canonInfo.canonical_display_name
-                }}
-              </div>
-              <div class="text-xs text-modfriend-300 truncate">
-                <span class="font-bold">
+        </div>
+        <div class="scroll-area-content h-full min-h-0 overflow-hidden">
+          <ScrollAreaViewport class="w-full h-full">
+            <div
+              class="engine-item"
+              v-for="item in listItems"
+              :key="item.canonInfo.folder_path"
+              :class="{ current: item === curItem }"
+              @click="selectItem(item)"
+            >
+              <img
+                src="@assets/images/engine/codename.png?url"
+                class="size-12 shrink-0"
+              />
+              <div class="info flex flex-col overflow-hidden">
+                <div class="text-sm truncate font-phantommuff">
                   {{
-                    item.instance?.edited_info?.author ||
-                    item.canonInfo.canonical_author
+                    item.instance?.edited_info?.display_name ||
+                    item.canonInfo.canonical_display_name
                   }}
-                </span>
-                <span v-if="item.instance?.edited_info?.version">
-                  {{ ' - v' + item.instance.edited_info.version }}
-                </span>
-              </div>
-              <div
-                class="text-xs text-modfriend-600 truncate"
-                v-if="item.canonInfo.kind === 'engine'"
-              >
-                {{
-                  `${item.canonInfo.softcode_list.length} ${item.canonInfo.softcode_list.length === 1 ? 'mod' : 'mods'} installed`
-                }}
+                </div>
+                <div class="text-xs text-modfriend-300 truncate">
+                  <span class="font-bold">
+                    {{
+                      item.instance?.edited_info?.author ||
+                      item.canonInfo.canonical_author
+                    }}
+                  </span>
+                  <span v-if="item.instance?.edited_info?.version">
+                    {{ ' - v' + item.instance.edited_info.version }}
+                  </span>
+                </div>
+                <div
+                  class="text-xs text-modfriend-600 truncate"
+                  v-if="item.canonInfo.kind === 'engine'"
+                >
+                  {{
+                    `${item.canonInfo.softcode_list.length} ${item.canonInfo.softcode_list.length === 1 ? 'mod' : 'mods'} installed`
+                  }}
+                </div>
               </div>
             </div>
-          </div>
-        </ScrollAreaViewport>
+          </ScrollAreaViewport>
+        </div>
         <ScrollAreaScrollbar orientation="vertical" class="scrollbar">
           <ScrollAreaThumb class="thumb" />
         </ScrollAreaScrollbar>
@@ -435,68 +437,73 @@ onBeforeUnmount(() => {
     <Separator orientation="vertical" class="w-0.5 bg-modfriend-950/30" />
 
     <ScrollAreaRoot class="scroll-area main-content">
-      <ScrollAreaViewport class="w-full h-full viewport" v-if="curItem">
-        <div class="banner-spacer" />
-        <h1
-          class="text-3xl mb-4 text-shadow-modfriend-900 text-shadow-md font-phantommuff"
-        >
-          {{
-            curItem?.instance?.edited_info?.display_name ||
-            curItem?.canonInfo.canonical_display_name
-          }}
-        </h1>
-        <div class="infobar">
-          <div>
-            <button class="btn-shiny action-button" @click="handleLaunchClick">
-              <img src="@assets/images/icon/play.png?url" class="size-4" />
-              <span class="text-lg">launch</span>
-            </button>
-            <div
-              class="infobar-item"
-              v-if="
-                curItem.canonInfo.kind === 'engine' &&
-                curItem.canonInfo.engine_kind
-              "
-            >
-              <span class="key"> Engine Type </span>
-              <span class="value">
-                {{ curItem.canonInfo.engine_kind }}
-              </span>
-            </div>
-            <div class="infobar-item">
-              <span class="key"> Author </span>
-              <span class="value">
-                {{
-                  curItem.instance?.edited_info?.author ||
-                  curItem.canonInfo.canonical_author
-                }}
-              </span>
-            </div>
-            <div
-              class="infobar-item"
-              v-if="curItem.instance?.edited_info?.version"
-            >
-              <span class="key"> Version </span>
-              <span class="value">
-                {{ curItem.instance.edited_info.version }}
-              </span>
+      <div class="scroll-area-content h-full min-h-0 overflow-hidden">
+        <ScrollAreaViewport class="w-full h-full viewport" v-if="curItem">
+          <div class="banner-spacer" />
+          <h1
+            class="text-3xl mb-4 text-shadow-modfriend-900 text-shadow-md font-phantommuff"
+          >
+            {{
+              curItem?.instance?.edited_info?.display_name ||
+              curItem?.canonInfo.canonical_display_name
+            }}
+          </h1>
+          <div class="infobar">
+            <div>
+              <button
+                class="btn-shiny action-button"
+                @click="handleLaunchClick"
+              >
+                <img src="@assets/images/icon/play.png?url" class="size-4" />
+                <span class="text-lg">launch</span>
+              </button>
+              <div
+                class="infobar-item"
+                v-if="
+                  curItem.canonInfo.kind === 'engine' &&
+                  curItem.canonInfo.engine_kind
+                "
+              >
+                <span class="key"> Engine Type </span>
+                <span class="value">
+                  {{ curItem.canonInfo.engine_kind }}
+                </span>
+              </div>
+              <div class="infobar-item">
+                <span class="key"> Author </span>
+                <span class="value">
+                  {{
+                    curItem.instance?.edited_info?.author ||
+                    curItem.canonInfo.canonical_author
+                  }}
+                </span>
+              </div>
+              <div
+                class="infobar-item"
+                v-if="curItem.instance?.edited_info?.version"
+              >
+                <span class="key"> Version </span>
+                <span class="value">
+                  {{ curItem.instance.edited_info.version }}
+                </span>
+              </div>
             </div>
+            <InstanceSettingsPopover
+              v-model:open="instanceSettingsOpen"
+              v-model:editDraft="editDraft"
+              :disabled="!curItem"
+            />
           </div>
-          <InstanceSettingsPopover
-            v-model:open="instanceSettingsOpen"
-            v-model:editDraft="editDraft"
-            :disabled="!curItem"
-          />
-        </div>
-        <div
-          v-if="curItem.instance?.edited_info?.description"
-          class="text-modfriend-100 whitespace-pre-wrap"
-        >
-          {{ curItem.instance.edited_info.description }}
-        </div>
-        <WidgetAdvancedInfo :instanceData="curItem" />
-        <WidgetRawData :instanceData="curItem" />
-      </ScrollAreaViewport>
+          <div
+            v-if="curItem.instance?.edited_info?.description"
+            class="text-modfriend-100 whitespace-pre-wrap"
+          >
+            {{ curItem.instance.edited_info.description }}
+          </div>
+          <WidgetAdvancedInfo :instanceData="curItem" />
+          <WidgetRawData :instanceData="curItem" />
+        </ScrollAreaViewport>
+      </div>
       <ScrollAreaScrollbar orientation="vertical" class="scrollbar">
         <ScrollAreaThumb class="thumb" />
       </ScrollAreaScrollbar>
@@ -547,20 +554,37 @@ onBeforeUnmount(() => {
 }
 .main-content {
   @apply w-full;
-  mask-image: linear-gradient(to top, white 95%, transparent);
 
   /* This is terrible, but it's so that we can have full width components if we need to */
-  > .viewport {
-    > div {
-      > * {
-        @apply pl-6 pr-4;
-      }
-    } /* Reka UI adds another div after the viewport */
+  > .scroll-area-content {
+    > .viewport {
+      > div {
+        > * {
+          @apply pl-6 pr-4;
+        }
+      } /* Reka UI adds another div after the viewport */
+    }
   }
 }
 
 .scroll-area {
   --scrollbar-size: 10px;
+  .scroll-area-content {
+    /* TODO: Figure out how to hide top/bottom depending on scroll position*/
+    -webkit-mask-image: linear-gradient(
+      to top,
+      white,
+      transparent 3%,
+      white 97%
+    );
+    mask-image: linear-gradient(
+      to top,
+      transparent,
+      white 3%,
+      white 97%,
+      transparent
+    );
+  }
 
   > .scrollbar {
     @apply flex select-none touch-none p-0.5 bg-transparent w-2 transition-colors;
@@ -599,6 +623,9 @@ onBeforeUnmount(() => {
   }
   &.current {
     @apply border-codename-300;
+    .font-phantommuff {
+      @apply text-codename-200;
+    }
   }
 
   & > * {

From 3b36f94993b4224252850cfd0a07a67772b560a6 Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Tue, 24 Mar 2026 18:42:57 -0500
Subject: [PATCH 21/23] instance delete (find somewhere else to put the button)

---
 src-tauri/src/engines.rs          |  21 ++++++++++++++
 src-tauri/src/lib.rs              |   1 +
 src/assets/images/icon/delete.png | Bin 0 -> 195 bytes
 src/views/Library.vue             |  46 ++++++++++++++++++++++++++----
 4 files changed, 63 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/images/icon/delete.png

diff --git a/src-tauri/src/engines.rs b/src-tauri/src/engines.rs
index ce0a9c6..3437bcf 100644
--- a/src-tauri/src/engines.rs
+++ b/src-tauri/src/engines.rs
@@ -604,3 +604,24 @@ pub fn add_engine_context_internal(
         }
     })
 }
+
+#[tauri::command]
+pub fn remove_engine_context(
+    context_store: State<Mutex<ContextStore>>,
+    folder_path: String,
+) -> Result<(), String> {
+    let mut store = context_store.lock().unwrap();
+    remove_engine_context_internal(&mut store, folder_path)
+}
+
+pub fn remove_engine_context_internal(
+    context_store: &mut ContextStore,
+    folder_path: String,
+) -> Result<(), String> {
+    if let Some(_) = context_store.engine_list.remove(&folder_path) {
+        context_store.mods_list.remove(&folder_path);
+        Ok(())
+    } else {
+        Err("No engine found at the specified folder!".to_string())
+    }
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 7d2052d..85530e1 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -92,6 +92,7 @@ pub fn run() {
             // engines.rs
             engines::get_engine_contexts,
             engines::add_engine_context,
+            engines::remove_engine_context,
             // mods.rs
             mods::get_mod_contexts_in_folder,
             // instances.rs
diff --git a/src/assets/images/icon/delete.png b/src/assets/images/icon/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cb3f17a97c11ac722a97b76a007f7cc2e4873a3
GIT binary patch
literal 195
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjU7jwEAs*gurzUb8P~d3&ELS?=
z9e?uo71b7I5<HvtCQ0zVichKgWulzE=fsWuvzaFZCFx!kVB*<eu);EXYLL@$=5rqJ
zb)r-pzO8CI%qZ0H?R=GKYJ<$a)IAK-nY<S{F<lA$yj4@GWPW!Jn?v8zon|sur_U+w
tJG192Lx)Dy`|?Wme;&31XTSY#V0N)NA$ih|Wk1kW44$rjF6*2UngE*sN`(Lb

literal 0
HcmV?d00001

diff --git a/src/views/Library.vue b/src/views/Library.vue
index 8062f95..b457934 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -118,6 +118,37 @@ async function handleSave() {
   }
 }
 
+async function handleDelete() {
+  if (!curItem.value) return;
+
+  const deletedPath = curItem.value.instance?.folder_path;
+  const deletedIndex = listItems.value.findIndex(
+    (item) => item.instance?.folder_path === deletedPath,
+  );
+
+  await invoke('remove_engine_context', {
+    folderPath: deletedPath,
+  });
+
+  await invoke('remove_instance', {
+    folderPath: deletedPath,
+  });
+
+  await refreshEngineContexts();
+  if (listItems.value.length !== 0) {
+    // Select the next available item
+    const nextIndex = Math.min(
+      deletedIndex >= 0 ? deletedIndex : 0,
+      listItems.value.length - 1,
+    );
+    selectItem(listItems.value[nextIndex]);
+  } else {
+    // No items left, clear selection
+    curItem.value = undefined;
+    localStorage.removeItem(LAST_SELECTED_INSTANCE_KEY);
+  }
+}
+
 async function refreshEngineContexts() {
   const engineContexts = await invoke<EngineCanonInfo[]>('get_engine_contexts');
   const engineInstances = await invoke<Instance[]>('get_instances', {
@@ -488,11 +519,16 @@ onBeforeUnmount(() => {
                 </span>
               </div>
             </div>
-            <InstanceSettingsPopover
-              v-model:open="instanceSettingsOpen"
-              v-model:editDraft="editDraft"
-              :disabled="!curItem"
-            />
+            <div>
+              <button class="simple-button" @click="handleDelete">
+                <img src="@assets/images/icon/delete.png?url" class="size-6" />
+              </button>
+              <InstanceSettingsPopover
+                v-model:open="instanceSettingsOpen"
+                v-model:editDraft="editDraft"
+                :disabled="!curItem"
+              />
+            </div>
           </div>
           <div
             v-if="curItem.instance?.edited_info?.description"

From d0a83d3f2d218c78ad6a7b7af88331e2412d05d9 Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Tue, 24 Mar 2026 20:45:59 -0500
Subject: [PATCH 22/23] fix unix detection and small tweaks

---
 src-tauri/src/paths.rs                        | 99 ++++++++++++-------
 .../library/InstanceSettingsPopover.vue       | 28 +++---
 src/main.css                                  |  3 +
 src/views/Library.vue                         | 36 +++++--
 4 files changed, 114 insertions(+), 52 deletions(-)

diff --git a/src-tauri/src/paths.rs b/src-tauri/src/paths.rs
index 4bba2f6..2167c25 100644
--- a/src-tauri/src/paths.rs
+++ b/src-tauri/src/paths.rs
@@ -1,14 +1,16 @@
+use serde::Serialize;
 use std::{
-    env::consts::EXE_EXTENSION,
     fs,
     path::{Path, PathBuf},
 };
 
-use serde::Serialize;
-
 /// Windows EXE suffix for unix systems where EXE_SUFFIX is empty, used for wine support
 pub const WINDOWS_EXE_EXTENSION: &str = "exe";
 
+// This is used to exclude certain file types from being detected as executables. This will match any part of the file extension!
+// For example, "file.so.lol" will be excluded because it contains "so"
+pub const EXCLUDED_EXE_FILE_EXTENSIONS: [&str; 2] = ["ndll", "so"];
+
 /// Allows engine detectors to find out what type of executable they found, used for wine support
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize)]
 pub enum ExecutableType {
@@ -32,6 +34,63 @@ pub fn get_paths_in_folder(folder_path: &Path) -> Vec<PathBuf> {
     vec![]
 }
 
+fn get_executable_type(path: &Path) -> Option<ExecutableType> {
+    if path.is_dir() {
+        return None;
+    }
+
+    #[cfg(target_family = "unix")]
+    {
+        // First check if it's an ELF binary (with exclusions)
+        let valid_elf = loop {
+            if let Some(ext) = path.extension() {
+                if let Some(ext_str) = ext.to_str() {
+                    if EXCLUDED_EXE_FILE_EXTENSIONS.contains(&ext_str) {
+                        log::info!(
+                            "Excluded file extension found: {} ({}), skipping ELF check",
+                            ext_str,
+                            path.display()
+                        );
+                        break false;
+                    }
+                }
+            }
+            break true;
+        };
+
+        if valid_elf {
+            if let Ok(mut file) = fs::File::open(path) {
+                use std::io::Read;
+                let mut magic_buf = [0u8; 4];
+                if file.read_exact(&mut magic_buf).is_ok() && &magic_buf == b"\x7FELF" {
+                    log::info!("ELF executable found: {}", path.display());
+                    return Some(ExecutableType::Platform);
+                }
+            }
+        }
+
+        // if not an ELF, check if it has a windows exe suffix for wine support
+        if let Some(ext) = path.extension() {
+            if ext == WINDOWS_EXE_EXTENSION {
+                log::info!("Windows executable found: {}", path.display());
+                return Some(ExecutableType::WindowsOnUnix);
+            }
+        }
+    }
+
+    #[cfg(target_family = "windows")]
+    {
+        if let Some(ext) = path.extension() {
+            if ext == "exe" {
+                log::info!("Windows executable found: {}", path.display());
+                return Some(ExecutableType::Platform);
+            }
+        }
+    }
+
+    None
+}
+
 pub fn get_folders_in_folder(folder_path: &Path) -> Vec<String> {
     let folders = get_paths_in_folder(folder_path);
     let mut found_folders = vec![];
@@ -53,20 +112,8 @@ pub fn check_for_specific_executable(folder_path: &Path, name: String) -> Option
     for file in paths {
         if let Some(file_stem) = file.file_stem() {
             if !file.is_dir() && *file_stem == *name {
-                if let Some(ext) = file.extension() {
-                    let is_platform_executable = *ext == *EXE_EXTENSION;
-
-                    if is_platform_executable {
-                        return Some(ExecutableType::Platform);
-                    } else {
-                        // A check for .exe on unix systems, since some users use Wine to run the engines
-                        #[cfg(target_family = "unix")]
-                        {
-                            if *ext == *WINDOWS_EXE_EXTENSION {
-                                return Some(ExecutableType::WindowsOnUnix);
-                            }
-                        }
-                    }
+                if let Some(executable_type) = get_executable_type(file.as_path()) {
+                    return Some(executable_type);
                 }
             }
         }
@@ -81,22 +128,8 @@ pub fn check_for_any_executable(folder_path: &Path) -> Option<(ExecutableType, P
     let mut found_executables: Vec<(ExecutableType, PathBuf)> = vec![];
 
     for file in paths {
-        if let Some(ext) = file.extension() {
-            if !file.is_dir() {
-                let is_platform_executable = *ext == *EXE_EXTENSION;
-
-                if is_platform_executable {
-                    found_executables.push((ExecutableType::Platform, file));
-                } else {
-                    // A check for .exe on unix systems, since some users use Wine to run the engines
-                    #[cfg(target_family = "unix")]
-                    {
-                        if *ext == *WINDOWS_EXE_EXTENSION {
-                            found_executables.push((ExecutableType::WindowsOnUnix, file));
-                        }
-                    }
-                }
-            }
+        if let Some(executable_type) = get_executable_type(file.as_path()) {
+            found_executables.push((executable_type, file));
         }
     }
 
diff --git a/src/components/library/InstanceSettingsPopover.vue b/src/components/library/InstanceSettingsPopover.vue
index 2e658ae..a99f05e 100644
--- a/src/components/library/InstanceSettingsPopover.vue
+++ b/src/components/library/InstanceSettingsPopover.vue
@@ -28,7 +28,10 @@ defineProps<{
 
 <template>
   <PopoverRoot v-model:open="open" :modal="true">
-    <PopoverTrigger class="simple-button" :disabled="disabled">
+    <PopoverTrigger
+      class="btn-simple w-8 rounded-full p-1"
+      :disabled="disabled"
+    >
       <img src="@assets/images/icon/wrench.png?url" />
     </PopoverTrigger>
     <PopoverPortal>
@@ -49,7 +52,12 @@ defineProps<{
           </fieldset>
           <fieldset>
             <label for="version"> Version </label>
-            <input id="version" type="text" v-model="editDraft.version" />
+            <input
+              id="version"
+              type="text"
+              v-model="editDraft.version"
+              placeholder="0.0.0"
+            />
           </fieldset>
           <fieldset>
             <label for="color"> Color </label>
@@ -66,6 +74,7 @@ defineProps<{
           <CollapsibleRoot class="col-span-2" v-model:open="advancedOpen">
             <CollapsibleTrigger
               class="w-full flex justify-between items-center hover:bg-modfriend-700 text-modfriend-500"
+              as="legend"
             >
               Advanced Settings
               <img
@@ -97,9 +106,9 @@ defineProps<{
         </div>
         <PopoverArrow class="fill-modfriend-700" />
         <PopoverClose
-          class="simple-button text-modfriend-50 w-16 absolute right-1 top-1"
+          class="btn-simple text-modfriend-50 w-6 absolute right-2 top-2.5 rounded-full"
         >
-          <img src="@assets/images/icon/close.png?url" class="size-4" />
+          <img src="@assets/images/icon/close.png?url" class="size-6" />
         </PopoverClose>
       </PopoverContent>
     </PopoverPortal>
@@ -109,14 +118,6 @@ defineProps<{
 <style scoped lang="css">
 @reference "maincss";
 
-.simple-button {
-  @apply size-8 shrink-0 grid place-items-center rounded-full hover:bg-modfriend-500/30 active:bg-modfriend-500/50 transition-colors;
-
-  > img {
-    @apply size-6;
-  }
-}
-
 :deep(.instance-settings) {
   @apply bg-modfriend-800 p-2 rounded-xl border border-modfriend-700 flex flex-col gap-4 mb-2 shadow-lg shadow-black/25;
 
@@ -140,6 +141,9 @@ defineProps<{
       textarea {
         @apply resize-none;
       }
+      input[type='color'] {
+        @apply h-full w-full rounded-md;
+      }
     }
   }
 }
diff --git a/src/main.css b/src/main.css
index 2048738..01b6228 100644
--- a/src/main.css
+++ b/src/main.css
@@ -136,6 +136,9 @@
       background-blend-mode: plus-lighter;
     }
   }
+  .btn-simple {
+    @apply shrink-0 flex items-center justify-center hover:bg-modfriend-500/30 active:bg-modfriend-500/50 transition-colors aspect-square;
+  }
   #widget {
     /* TODO: stylize this properly */
     border: 1px solid black;
diff --git a/src/views/Library.vue b/src/views/Library.vue
index b457934..1dfbf00 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -356,6 +356,14 @@ onMounted(async () => {
 
           if (addedAtLeastOne) {
             await refreshEngineContexts();
+            // Select one of the engines
+            var newItem: ListDisplayInfo | undefined = listItems.value.find(
+              (item) =>
+                item.instance?.folder_path === hoverState.value.paths?.[0],
+            );
+            if (newItem) {
+              selectItem(newItem);
+            }
           }
         }
       }
@@ -417,6 +425,7 @@ onBeforeUnmount(() => {
           <ScrollAreaViewport class="w-full h-full">
             <div
               class="engine-item"
+              v-if="listItems.length !== 0"
               v-for="item in listItems"
               :key="item.canonInfo.folder_path"
               :class="{ current: item === curItem }"
@@ -454,6 +463,16 @@ onBeforeUnmount(() => {
                 </div>
               </div>
             </div>
+            <div v-else class="p-4 text-modfriend-500 text-md">
+              <b>No instances added yet!</b><br />
+              Add an engine by clicking the
+              <img
+                src="@assets/images/icon/add.png?url"
+                class="inline size-4"
+              />
+              button or by dragging and dropping an engine folder into the
+              sidebar.
+            </div>
           </ScrollAreaViewport>
         </div>
         <ScrollAreaScrollbar orientation="vertical" class="scrollbar">
@@ -480,7 +499,7 @@ onBeforeUnmount(() => {
             }}
           </h1>
           <div class="infobar">
-            <div>
+            <div class="infobar-content">
               <button
                 class="btn-shiny action-button"
                 @click="handleLaunchClick"
@@ -519,9 +538,12 @@ onBeforeUnmount(() => {
                 </span>
               </div>
             </div>
-            <div>
-              <button class="simple-button" @click="handleDelete">
-                <img src="@assets/images/icon/delete.png?url" class="size-6" />
+            <div class="flex items-center gap-2">
+              <button
+                class="btn-simple w-8 rounded-full p-1"
+                @click="handleDelete"
+              >
+                <img src="@assets/images/icon/delete.png?url" />
               </button>
               <InstanceSettingsPopover
                 v-model:open="instanceSettingsOpen"
@@ -551,7 +573,7 @@ onBeforeUnmount(() => {
 @reference "maincss";
 
 .content {
-  @apply flex flex-row min-h-0;
+  @apply flex flex-row min-h-0 min-w-0 w-full;
 }
 
 .list-panel {
@@ -589,7 +611,7 @@ onBeforeUnmount(() => {
   }
 }
 .main-content {
-  @apply w-full;
+  @apply flex-1 min-w-0 min-h-0;
 
   /* This is terrible, but it's so that we can have full width components if we need to */
   > .scroll-area-content {
@@ -684,7 +706,7 @@ onBeforeUnmount(() => {
 }
 .infobar {
   @apply flex items-center gap-4 mb-4 justify-between;
-  > div {
+  > .infobar-content {
     @apply flex items-center gap-4;
   }
 

From 1236a81ae5301ae3c06ad628637a1959f53773f6 Mon Sep 17 00:00:00 2001
From: echolotl <echolotl@echolotl.lol>
Date: Tue, 24 Mar 2026 23:14:45 -0500
Subject: [PATCH 23/23] banner customization

---
 src-tauri/Cargo.lock                          |  7 ++++
 src-tauri/Cargo.toml                          |  2 +-
 src-tauri/capabilities/default.json           |  6 +--
 src-tauri/tauri.conf.json                     | 10 ++++-
 src/components/Background.vue                 | 20 ++++++++--
 .../library/InstanceSettingsPopover.vue       | 35 ++++++++++++++++++
 src/views/Library.vue                         | 37 +++++++++++++++++--
 7 files changed, 103 insertions(+), 14 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 6f7cde7..fe23980 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -1696,6 +1696,12 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "http-range"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "21dec9db110f5f872ed9699c3ecf50cf16f423502706ba5c72462e28d3157573"
+
 [[package]]
 name = "httparse"
 version = "1.10.1"
@@ -4011,6 +4017,7 @@ dependencies = [
  "gtk",
  "heck 0.5.0",
  "http",
+ "http-range",
  "jni",
  "libc",
  "log",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 29b8180..50f0505 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -12,7 +12,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2.10.1", features = [] }
+tauri = { version = "2.10.1", features = ["protocol-asset"] }
 tauri-plugin-opener = "2"
 tauri-plugin-dialog = "2.6.0"
 serde = { version = "1", features = ["derive"] }
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 6d1169b..892b6a7 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -2,9 +2,7 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "Capability for the main window",
-  "windows": [
-    "main"
-  ],
+  "windows": ["main"],
   "permissions": [
     "core:default",
     "opener:default",
@@ -23,4 +21,4 @@
     "os:default",
     "fs:default"
   ]
-}
\ No newline at end of file
+}
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 7a23eda..127df39 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -26,7 +26,15 @@
       }
     ],
     "security": {
-      "csp": null
+      "csp": {
+        "default-src": [
+          "'self' ipc: http://ipc.localhost; img-src 'self' asset: http://asset.localhost"
+        ]
+      },
+      "assetProtocol": {
+        "enable": true,
+        "scope": ["**"]
+      }
     },
     "withGlobalTauri": true
   },
diff --git a/src/components/Background.vue b/src/components/Background.vue
index 765f0f7..5c76a54 100644
--- a/src/components/Background.vue
+++ b/src/components/Background.vue
@@ -14,8 +14,20 @@ watch(
   () => globalStore.background,
   (background, oldBackground) => {
     if (oldBackgroundRef.value && backgroundRef.value) {
-      oldBackgroundRef.value.style.backgroundImage = `url(${oldBackground})`;
-      backgroundRef.value.style.backgroundImage = `url(${background})`;
+      if (background.startsWith('#')) {
+        backgroundRef.value.style.backgroundColor = background;
+        backgroundRef.value.style.backgroundImage = 'none';
+      } else {
+        backgroundRef.value.style.backgroundColor = 'transparent';
+        backgroundRef.value.style.backgroundImage = `url(${background})`;
+      }
+      if (oldBackground.startsWith('#')) {
+        oldBackgroundRef.value.style.backgroundColor = oldBackground;
+        oldBackgroundRef.value.style.backgroundImage = 'none';
+      } else {
+        oldBackgroundRef.value.style.backgroundColor = 'transparent';
+        oldBackgroundRef.value.style.backgroundImage = `url(${oldBackground})`;
+      }
 
       oldBackgroundRef.value.animate([{ opacity: 1 }, { opacity: 0 }], {
         duration: props.duration ?? 300,
@@ -63,8 +75,8 @@ watch(
   mask-position: right top;
   mask-size: contain;
   mask-repeat: no-repeat;
-  background-position: right top;
-  background-size: contain;
+  background-position: center;
+  background-size: cover;
   background-repeat: no-repeat;
 }
 </style>
diff --git a/src/components/library/InstanceSettingsPopover.vue b/src/components/library/InstanceSettingsPopover.vue
index a99f05e..8ac6b35 100644
--- a/src/components/library/InstanceSettingsPopover.vue
+++ b/src/components/library/InstanceSettingsPopover.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { open as openDialog } from '@tauri-apps/plugin-dialog';
 import {
   PopoverArrow,
   PopoverClose,
@@ -21,6 +22,23 @@ const open = defineModel<boolean>('open', { required: true });
 const editDraft = defineModel<InstanceInfo>('editDraft', { required: true });
 const advancedOpen = ref(false);
 
+async function handleBannerSelect() {
+  const selected = await openDialog({
+    directory: false,
+    multiple: false,
+    filters: [
+      {
+        name: 'Image Files',
+        extensions: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
+      },
+    ],
+  });
+  if (selected) {
+    console.log('Selected banner:', selected);
+    editDraft.value.banner_path = selected;
+  }
+}
+
 defineProps<{
   disabled?: boolean;
 }>();
@@ -63,6 +81,23 @@ defineProps<{
             <label for="color"> Color </label>
             <input id="color" type="color" v-model="editDraft.color_hex" />
           </fieldset>
+          <fieldset class="col-span-2">
+            <label for="banner"> Banner Path </label>
+            <div class="flex gap-1">
+              <input
+                id="banner"
+                class="flex-grow"
+                type="text"
+                v-model="editDraft.banner_path"
+              />
+              <button
+                class="btn-simple w-8 rounded-full shrink-0 p-1"
+                @click="handleBannerSelect()"
+              >
+                <img src="@assets/images/icon/folder.png?url" />
+              </button>
+            </div>
+          </fieldset>
           <fieldset class="col-span-2">
             <label for="description"> Description </label>
             <textarea
diff --git a/src/views/Library.vue b/src/views/Library.vue
index 1dfbf00..42d4bb7 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -2,7 +2,7 @@
 import InstanceSettingsPopover from '@components/library/InstanceSettingsPopover.vue';
 import WidgetAdvancedInfo from '@components/library/widgets/WidgetAdvancedInfo.vue';
 import WidgetRawData from '@components/library/widgets/WidgetRawData.vue';
-import { invoke } from '@tauri-apps/api/core';
+import { convertFileSrc, invoke } from '@tauri-apps/api/core';
 import { UnlistenFn, listen } from '@tauri-apps/api/event';
 import { open } from '@tauri-apps/plugin-dialog';
 import {
@@ -19,6 +19,8 @@ import { Instance, InstanceInfo, ListDisplayInfo } from '@core/instances';
 import { ModCanonInfo } from '@core/mods';
 import { globalStore } from '@core/store';
 
+import DEFAULT_BACKGROUND from '@assets/images/bg/codename.png?url';
+
 const LAST_SELECTED_INSTANCE_KEY = 'lastSelectedInstance';
 const listItems = ref<ListDisplayInfo[]>([]);
 const curItem = ref<ListDisplayInfo>();
@@ -116,6 +118,8 @@ async function handleSave() {
   if (updatedItem?.instance) {
     updatedItem.instance.edited_info = newInfo;
   }
+
+  updateLibraryBackground(curItem.value);
 }
 
 async function handleDelete() {
@@ -145,6 +149,7 @@ async function handleDelete() {
   } else {
     // No items left, clear selection
     curItem.value = undefined;
+    updateLibraryBackground(undefined);
     localStorage.removeItem(LAST_SELECTED_INSTANCE_KEY);
   }
 }
@@ -229,6 +234,25 @@ function selectItem(item: ListDisplayInfo): void {
     item.instance?.folder_path || '',
   );
 }
+function updateLibraryBackground(item: ListDisplayInfo | undefined): void {
+  if (!item) {
+    globalStore.background = DEFAULT_BACKGROUND;
+    return;
+  }
+
+  const bannerPath =
+    item.instance?.edited_info?.banner_path ??
+    item.canonInfo.canonical_banner_path;
+  if (bannerPath) {
+    globalStore.background = convertFileSrc(bannerPath.trim());
+    return;
+  }
+
+  const colorHex =
+    item.instance?.edited_info?.color_hex ?? item.canonInfo.canonical_color_hex;
+  globalStore.background = colorHex.trim();
+  return;
+}
 
 function getLastSelectedInstance(): ListDisplayInfo | undefined {
   const lastSelected = localStorage.getItem(LAST_SELECTED_INSTANCE_KEY);
@@ -243,6 +267,7 @@ function getLastSelectedInstance(): ListDisplayInfo | undefined {
 watch(curItem, () => {
   // Close the menu when switching the selected item.
   instanceSettingsOpen.value = false;
+  updateLibraryBackground(curItem.value);
 });
 
 watch(instanceSettingsOpen, async (isOpen, wasOpen) => {
@@ -268,6 +293,10 @@ watch(instanceSettingsOpen, async (isOpen, wasOpen) => {
         curItem.value.instance?.edited_info?.launch_args ??
         curItem.value.canonInfo.canonical_launch_args ??
         '',
+      banner_path:
+        curItem.value.instance?.edited_info?.banner_path ??
+        curItem.value.canonInfo.canonical_banner_path ??
+        '',
     };
     return;
   }
@@ -279,11 +308,11 @@ watch(instanceSettingsOpen, async (isOpen, wasOpen) => {
 
 onMounted(async () => {
   await refreshEngineContexts();
-  // FIXME: This is just a temporary thing, as the background should load dynamically based on the selected mod
-  const bgModule = await import('@assets/images/bg/codename.png?url');
-  globalStore.background = bgModule.default;
+
+  globalStore.background = DEFAULT_BACKGROUND;
 
   curItem.value = getLastSelectedInstance();
+  updateLibraryBackground(curItem.value);
 
   // Listen to hover events
   hoverListeners.push(