From 69e59e352dabc3472bc49c93d91374ab05c1b06f Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Wed, 1 Jul 2026 15:34:55 +0800
Subject: [PATCH 1/7] Added typecheck build step

---
 .github/workflows/build.yml | 3 +++
 mise.toml                   | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 6853cb354..0aa00d4f2 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -32,6 +32,9 @@ jobs:
       - name: Install pnpm dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Check type validity
+        run: mise typecheck
+
       - if: matrix.platform == 'linux'
         name: Install bsdtar # Required by electron-builder when targeting pacman.
         run: |
diff --git a/mise.toml b/mise.toml
index 394a504af..458101bca 100644
--- a/mise.toml
+++ b/mise.toml
@@ -6,3 +6,7 @@ python = { version = "3.12", postinstall = "python -m pip install pipx" }
 [tasks.dev]
 description = "Start in dev mode"
 run = "pnpm run dev"
+
+[tasks.typecheck]
+description = "Ensure that the app is appropriately typed"
+run = "pnpm typecheck"

From d184bfccdab1a4083e7e32e1b3548ce1797992e7 Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Wed, 1 Jul 2026 15:50:21 +0800
Subject: [PATCH 2/7] Moved typecheck to separate file and added quasar prepare
 task

---
 .github/workflows/build.yml     |  3 ---
 .github/workflows/typecheck.yml | 24 ++++++++++++++++++++++++
 mise/config.ci.toml             |  6 ++++++
 3 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 .github/workflows/typecheck.yml
 create mode 100644 mise/config.ci.toml

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 0aa00d4f2..6853cb354 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -32,9 +32,6 @@ jobs:
       - name: Install pnpm dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Check type validity
-        run: mise typecheck
-
       - if: matrix.platform == 'linux'
         name: Install bsdtar # Required by electron-builder when targeting pacman.
         run: |
diff --git a/.github/workflows/typecheck.yml b/.github/workflows/typecheck.yml
new file mode 100644
index 000000000..f37ceaef3
--- /dev/null
+++ b/.github/workflows/typecheck.yml
@@ -0,0 +1,24 @@
+name: Typecheck
+
+on: [push]
+
+jobs:
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    env:
+      MISE_ENV: ci
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: jdx/mise-action@v3
+        with:
+          install: true
+          cache: true
+          log_level: debug
+
+      - name: Install pnpm dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Check type validity
+        run: mise typecheck
diff --git a/mise/config.ci.toml b/mise/config.ci.toml
new file mode 100644
index 000000000..630f1eb9b
--- /dev/null
+++ b/mise/config.ci.toml
@@ -0,0 +1,6 @@
+[tasks.typecheck]
+description = "Perform typechecking tasks"
+run = [
+    "npx @quasar/cli prepare",
+    "pnpm typecheck",
+]

From 537760525b9a06a839ff458b79d9d54eddaeef03 Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Wed, 1 Jul 2026 15:52:27 +0800
Subject: [PATCH 3/7] TEST: Purposefully broke type to verify typecheck causes
 issues

---
 src/installers/PackageInstaller.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/installers/PackageInstaller.ts b/src/installers/PackageInstaller.ts
index ae72e3aad..0149e6b08 100644
--- a/src/installers/PackageInstaller.ts
+++ b/src/installers/PackageInstaller.ts
@@ -64,7 +64,7 @@ export async function uninstallModLoader(mod: ManifestV2, profile: ImmutableProf
     const fs = FsProvider.instance;
 
     try {
-        const loader = MOD_LOADER_VARIANTS[GameManager.activeGame.internalFolderName]!.find(
+        const loader = MOD_LOADER_VARIANTS[GameManager.activeGame.internalFolderName].find(
             loader => loader.packageName.toLowerCase() === mod.getName().toLowerCase()
         );
 

From c8ee6ad1bbd0b7c1597fcc2adaebc5cc48b8b510 Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Wed, 1 Jul 2026 15:54:07 +0800
Subject: [PATCH 4/7] RESET: Re-added purposefully broken type to allow merge

---
 src/installers/PackageInstaller.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/installers/PackageInstaller.ts b/src/installers/PackageInstaller.ts
index 0149e6b08..ae72e3aad 100644
--- a/src/installers/PackageInstaller.ts
+++ b/src/installers/PackageInstaller.ts
@@ -64,7 +64,7 @@ export async function uninstallModLoader(mod: ManifestV2, profile: ImmutableProf
     const fs = FsProvider.instance;
 
     try {
-        const loader = MOD_LOADER_VARIANTS[GameManager.activeGame.internalFolderName].find(
+        const loader = MOD_LOADER_VARIANTS[GameManager.activeGame.internalFolderName]!.find(
             loader => loader.packageName.toLowerCase() === mod.getName().toLowerCase()
         );
 

From 0af3822c4115b3fa6291c4cacc1aa2fa266b5000 Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Thu, 2 Jul 2026 11:50:16 +0800
Subject: [PATCH 5/7] Switched tsc for vue-tsc and fixed remaining errors

---
 package.json                                  |   4 +-
 src-electron/ipc/node-path-impl.ts            |   4 +-
 src/components/DeferredInput.vue              |   2 +-
 src/components/Progress.vue                   |   3 +-
 src/components/buttons/DonateButton.vue       |   2 +-
 src/components/buttons/DonateIconButton.vue   |   2 +-
 .../importing/LocalFileImportModal.vue        |  22 +-
 src/components/input/MultiSelect.vue          |   2 +-
 .../modals/CategorySelectorModal.vue          |   4 +-
 src/components/modals/ErrorModal.vue          |   4 +-
 .../profiles-modals/ImportProfileModal.vue    |   6 +-
 .../profiles-modals/RenameProfileModal.vue    |   2 +-
 .../settings-components/SettingsView.vue      |   8 +-
 src/components/v2/OnlinePreviewPanel.vue      | 676 +++++++++---------
 .../views/DownloadModVersionSelectModal.vue   |   6 +-
 .../views/LocalModList/LocalModCard.vue       |   8 +-
 .../LocalModList/LocalModDraggableList.vue    |   4 +-
 src/components/views/OnlineModList.vue        |   2 +-
 .../views/OnlineModListWithPanel.vue          |   4 +-
 src/components/views/OnlineModView.vue        |   2 +-
 src/pages/ConfigEditor.vue                    |   2 +-
 src/pages/DownloadMonitor.vue                 |   3 +-
 src/pages/GameSelectionScreen.vue             |   4 +-
 src/pages/Manager.vue                         |  18 +-
 src/pages/Splash.vue                          |   4 +-
 src/providers/node/path/path.ts               |   4 +-
 src/store/index.ts                            |  24 +-
 src/store/modules/DownloadModule.ts           |   2 +-
 src/store/modules/ErrorModule.ts              |   2 +-
 src/store/modules/ModalsModule.ts             |   2 +-
 src/store/modules/ProfileExportModule.ts      |   2 +-
 src/store/modules/ProfileModule.ts            |   2 +-
 src/store/modules/ProfilesModule.ts           |   2 +-
 src/store/modules/SplashModule.ts             |   2 +-
 src/utils/DateUtils.ts                        |   2 +-
 35 files changed, 425 insertions(+), 417 deletions(-)

diff --git a/package.json b/package.json
index 11caab743..1d609fd2d 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "publish-win": "quasar build --mode electron -T win32 --publish always",
     "publish-linux": "quasar build --mode electron -T linux --publish always",
     "test": "vitest run ./test/vitest",
-    "typecheck": "tsc"
+    "typecheck": "vue-tsc"
   },
   "dependencies": {
     "@node-steam/vdf": "^2.1.0",
@@ -100,12 +100,12 @@
     "sass": "^1.70.0",
     "sass-loader": "^16.0.5",
     "sinon": "^11.1.1",
-    "tsc": "^2.0.4",
     "tsx": "^4.20.5",
     "typescript": "^5.9.2",
     "vite-plugin-node-polyfills": "^0.23.0",
     "vitest": "^3.2.4",
     "vue": "^3.5.16",
+    "vue-tsc": "^3.3.5",
     "wallaby-vue-compiler": "^1.0.3"
   },
   "engines": {
diff --git a/src-electron/ipc/node-path-impl.ts b/src-electron/ipc/node-path-impl.ts
index 046bdcf76..f1f5077ba 100644
--- a/src-electron/ipc/node-path-impl.ts
+++ b/src-electron/ipc/node-path-impl.ts
@@ -5,8 +5,8 @@ export function hookPathIpc(browserWindow: BrowserWindow) {
     ipcMain.on("node:path:join", (event, ...args) => {
         event.returnValue = path.join(...args);
     });
-    ipcMain.on("node:path:basename", (event, toResolve) => {
-        event.returnValue = path.basename(toResolve);
+    ipcMain.on("node:path:basename", (event, base, suffix) => {
+        event.returnValue = path.basename(base, suffix);
     });
     ipcMain.on("node:path:resolve", (event, ...args) => {
         event.returnValue = path.resolve(...args);
diff --git a/src/components/DeferredInput.vue b/src/components/DeferredInput.vue
index f1c4b7606..7147be263 100644
--- a/src/components/DeferredInput.vue
+++ b/src/components/DeferredInput.vue
@@ -22,5 +22,5 @@ function emitChange(value: string): void {
 </script>
 
 <template>
-    <input class="input" :value="modelValue" @input="e => debounceExecutor(e.target.value)" />
+    <input class="input" :value="modelValue" @input="e => debounceExecutor((e.target! as HTMLInputElement).value!)" />
 </template>
diff --git a/src/components/Progress.vue b/src/components/Progress.vue
index e35a9a7b4..1aa845008 100644
--- a/src/components/Progress.vue
+++ b/src/components/Progress.vue
@@ -18,8 +18,7 @@ type ProgressProps = {
 
 const props = withDefaults(defineProps<ProgressProps>(), {
     max: 100,
-    value: undefined,
-    className: []
+    className: () => [] as string[]
 });
 </script>
 
diff --git a/src/components/buttons/DonateButton.vue b/src/components/buttons/DonateButton.vue
index 9d27eaf43..4ee2ee5b9 100644
--- a/src/components/buttons/DonateButton.vue
+++ b/src/components/buttons/DonateButton.vue
@@ -1,6 +1,6 @@
 <template>
     <ExternalLink v-if="mod && mod.getDonationLink()"
-          :url="mod.getDonationLink()"
+          :url="mod.getDonationLink()!"
           class="button"
           v-tooltip.top="{content: 'Donate to the mod author', distance: 10}">
         <i class='fas fa-heart margin-right margin-right--half-width'></i>
diff --git a/src/components/buttons/DonateIconButton.vue b/src/components/buttons/DonateIconButton.vue
index 25015c6e6..3a51641c1 100644
--- a/src/components/buttons/DonateIconButton.vue
+++ b/src/components/buttons/DonateIconButton.vue
@@ -1,6 +1,6 @@
 <template>
     <span v-if="mod && mod.getDonationLink() && extraRenderCondition" class="card-header-icon">
-        <ExternalLink :url="mod.getDonationLink()" tag="span">
+        <ExternalLink :url="mod.getDonationLink()!" tag="span">
             <i class="fas fa-heart" v-tooltip.left="'Donate to the mod author'"></i>
         </ExternalLink>
     </span>
diff --git a/src/components/importing/LocalFileImportModal.vue b/src/components/importing/LocalFileImportModal.vue
index d423e471e..8c7430887 100644
--- a/src/components/importing/LocalFileImportModal.vue
+++ b/src/components/importing/LocalFileImportModal.vue
@@ -133,7 +133,7 @@ async function selectFile() {
         filters: []
     }).then(value => {
         if (value.length > 0) {
-            fileToImport.value = value[0];
+            fileToImport.value = value[0]!;
             assumeDefaults();
         } else {
             waitingForSelection.value = false;
@@ -228,28 +228,28 @@ function inferFieldValuesFromFile(file: string): ImportFieldAttributes {
     }
 
     if (hyphenSeparated.length === 3) {
-        data.modAuthor = hyphenSeparated[0];
-        data.modName = hyphenSeparated[1];
-        const modVersion = santizeVersionNumber(hyphenSeparated[2]).toString().split(".");
+        data.modAuthor = hyphenSeparated[0]!;
+        data.modName = hyphenSeparated[1]!;
+        const modVersion = santizeVersionNumber(hyphenSeparated[2]!).toString().split(".");
         data.modVersionMajor = Number(modVersion[0]);
         data.modVersionMinor = Number(modVersion[1]);
         data.modVersionPatch = Number(modVersion[2]);
     } else if (hyphenSeparated.length === 2) {
-        data.modName = hyphenSeparated[0];
-        const modVersion = santizeVersionNumber(hyphenSeparated[1]).toString().split(".");
+        data.modName = hyphenSeparated[0]!;
+        const modVersion = santizeVersionNumber(hyphenSeparated[1]!).toString().split(".");
         data.modVersionMajor = Number(modVersion[0]);
         data.modVersionMinor = Number(modVersion[1]);
         data.modVersionPatch = Number(modVersion[2]);
     } else if (underscoreSeparated.length === 3) {
-        data.modAuthor = underscoreSeparated[0];
-        data.modName = underscoreSeparated[1];
-        const modVersion = santizeVersionNumber(underscoreSeparated[2]).toString().split(".");
+        data.modAuthor = underscoreSeparated[0]!;
+        data.modName = underscoreSeparated[1]!;
+        const modVersion = santizeVersionNumber(underscoreSeparated[2]!).toString().split(".");
         data.modVersionMajor = Number(modVersion[0]);
         data.modVersionMinor = Number(modVersion[1]);
         data.modVersionPatch = Number(modVersion[2]);
     } else if (underscoreSeparated.length === 2) {
-        data.modName = underscoreSeparated[0];
-        const modVersion = santizeVersionNumber(underscoreSeparated[1]).toString().split(".");
+        data.modName = underscoreSeparated[0]!;
+        const modVersion = santizeVersionNumber(underscoreSeparated[1]!).toString().split(".");
         data.modVersionMajor = Number(modVersion[0]);
         data.modVersionMinor = Number(modVersion[1]);
         data.modVersionPatch = Number(modVersion[2]);
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index ff6f26792..8405d5711 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -46,7 +46,7 @@ const visibleSelectedOptions = computed(() => {
     return props.selected.filter(value => value.trim().length > 0);
 })
 
-function updateSelection(event: InputEvent) {
+function updateSelection(event: Event) {
     const target = event.target as HTMLSelectElement;
     emits('selection-changed', [...props.selected, target.value]);
     target.selectedIndex = 0;
diff --git a/src/components/modals/CategorySelectorModal.vue b/src/components/modals/CategorySelectorModal.vue
index 2658a5b68..fb1123b04 100644
--- a/src/components/modals/CategorySelectorModal.vue
+++ b/src/components/modals/CategorySelectorModal.vue
@@ -9,7 +9,7 @@ type CategorySelectorModalProps = {
 const props = defineProps<CategorySelectorModalProps>();
 const emits = defineEmits<{
     'selected-category': [ev: Event];
-    'deselectedCategory': [value: string];
+    'deselected-category': [value: string];
 }>();
 
 function emitSelected(event: Event) {
@@ -17,7 +17,7 @@ function emitSelected(event: Event) {
 }
 
 function emitDeselected(key: string) {
-    emits("deselected-category", key);
+    emits('deselected-category', key);
 }
 </script>
 
diff --git a/src/components/modals/ErrorModal.vue b/src/components/modals/ErrorModal.vue
index 7a2c63f7a..d0e4041bc 100644
--- a/src/components/modals/ErrorModal.vue
+++ b/src/components/modals/ErrorModal.vue
@@ -28,8 +28,8 @@ function close() {
                     <h5 class="title is-5">Suggestion</h5>
                     <p>{{solution}}</p>
                 </div>
-                <div class="mt-3 text-right" v-if="error.action">
-                    <button class="button is-white" @click="() => { error.action.function(); close(); }">
+                <div class="mt-3 text-right" v-if="error && error.action">
+                    <button class="button is-white" @click="() => { error?.action?.function(); close(); }">
                         {{error.action.label}}
                     </button>
                 </div>
diff --git a/src/components/profiles-modals/ImportProfileModal.vue b/src/components/profiles-modals/ImportProfileModal.vue
index f6afffe52..ae8a305bc 100644
--- a/src/components/profiles-modals/ImportProfileModal.vue
+++ b/src/components/profiles-modals/ImportProfileModal.vue
@@ -142,8 +142,10 @@ async function validateProfileFile(files: string[] | null) {
         return;
     }
 
+    const selectedFile = files[0]!;
+
     try {
-        const yamlContent = await ProfileUtils.readProfileFile(files[0]);
+        const yamlContent = await ProfileUtils.readProfileFile(selectedFile);
         profileImportContent.value = await ProfileUtils.parseYamlToExportFormat(yamlContent);
         profileMods.value = await ProfileUtils.exportModsToCombos(
             profileImportContent.value.getMods(),
@@ -156,7 +158,7 @@ async function validateProfileFile(files: string[] | null) {
         return;
     }
 
-    profileImportFilePath.value = files[0];
+    profileImportFilePath.value = selectedFile;
 
     if (profileMods.value.unknown.length > 0) {
         // Sometimes the reason some packages are unknown is that
diff --git a/src/components/profiles-modals/RenameProfileModal.vue b/src/components/profiles-modals/RenameProfileModal.vue
index fd7ed915e..38c4fbea4 100644
--- a/src/components/profiles-modals/RenameProfileModal.vue
+++ b/src/components/profiles-modals/RenameProfileModal.vue
@@ -34,7 +34,7 @@ watchEffect(() => {
 
 function closeModal() {
     renamingInProgress.value = false;
-    newProfileName.value = store.state.profile.activeProfile.getProfileName();
+    newProfileName.value = store.state.profile.activeProfile!.getProfileName();
     store.commit('closeRenameProfileModal');
 }
 
diff --git a/src/components/settings-components/SettingsView.vue b/src/components/settings-components/SettingsView.vue
index e804198fa..f20d50a3b 100644
--- a/src/components/settings-components/SettingsView.vue
+++ b/src/components/settings-components/SettingsView.vue
@@ -16,17 +16,13 @@ import CdnProvider from '../../providers/generic/connection/CdnProvider';
 import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue';
 import { getStore } from '../../providers/generic/store/StoreProvider';
 import { State } from '../../store';
-import VueRouter from 'vue-router';
 import {getLaunchType, LaunchType} from "../../model/real_enums/launch/LaunchType";
 import {LaunchTypeModalOpen} from "../../components/modals/launch-type/LaunchTypeRefs";
 import appWindow from '../../providers/node/app/app_window';
+import { useRouter } from 'vue-router';
 
 const store = getStore<State>();
-let router!: VueRouter;
-
-onMounted(() => {
-    router = getCurrentInstance()!.proxy.$router;
-})
+const router = useRouter();
 
 const activeTab = ref<string>('All');
 const tabs = ref<string[]>(['All', 'Profile', 'Locations', 'Debugging', 'Modpacks', 'Other']);
diff --git a/src/components/v2/OnlinePreviewPanel.vue b/src/components/v2/OnlinePreviewPanel.vue
index 0bd39c47a..92d38f300 100644
--- a/src/components/v2/OnlinePreviewPanel.vue
+++ b/src/components/v2/OnlinePreviewPanel.vue
@@ -1,338 +1,338 @@
-<script lang="ts" setup>
-import ThunderstoreMod from '../../model/ThunderstoreMod';
-import { computed, ref, watch, watchEffect } from 'vue';
-import MarkdownRender from './MarkdownRender.vue';
-import { valueToReadableDate } from '../../utils/DateUtils';
-import OnlineModList from '../views/OnlineModList.vue';
-import { State } from '../../store';
-import { getCombosByDependencyStrings } from '../../r2mm/manager/PackageDexieStore';
-import { ExternalLink } from '../all';
-import R2Error from '../../model/errors/R2Error';
-import { getFullDependencyList, InstallMode } from '../../utils/DependencyUtils';
-import debounce from 'lodash.debounce';
-import ManagerSettings from '../../r2mm/manager/ManagerSettings';
-import { getStore } from '../../providers/generic/store/StoreProvider';
-import { transformPackageUrl } from '../../providers/cdn/PackageUrlTransformer';
-
-const store = getStore<State>();
-
-interface ModPreviewPanelProps {
-    mod: ThunderstoreMod;
-}
-
-const props = defineProps<ModPreviewPanelProps>();
-const emits = defineEmits<{
-    (e: 'close'): void
-}>();
-
-const readme = ref<string | null>(null);
-const readmeError = ref<R2Error | null>(null);
-const changelog = ref<string | null>(null);
-const changelogError = ref<R2Error | null>(null);
-const activeTab = ref<"README" | "CHANGELOG" | "Dependencies">("README");
-const loadingPanel = ref<boolean>(true);
-const dependencies = ref<ThunderstoreMod[]>([]);
-const isNsfw = computed<boolean>(() => props.mod?.getNsfwFlag())
-
-const maxPanelWidth = ref(getMaxPanelWidth());
-
-function getMaxPanelWidth(): number {
-    return window.outerWidth - document.getElementsByClassName("nav-column")[0]!.scrollWidth;
-}
-
-function setActiveTab(tab: "README" | "CHANGELOG" | "Dependencies") {
-    activeTab.value = tab;
-}
-
-function fetchDataFor(mod: ThunderstoreMod, type: "readme" | "changelog"): Promise<string> {
-    return fetch(transformPackageUrl(`https://thunderstore.io/api/cyberstorm/package/${mod.getOwner()}/${mod.getName()}/v/${mod.getLatestVersion()}/${type}/`))
-        .then(res => {
-            if (!res.ok) {
-                throw new Error(`No ${type} available for ${mod.getName()}`)
-            }
-            return res.json();
-        })
-        .then(res => res.html);
-}
-
-function fetchReadme(modToLoad: ThunderstoreMod) {
-    readmeError.value = null;
-    readme.value = null;
-    return fetchDataFor(props.mod, "readme").then(res => {
-        if (props.mod === modToLoad) {
-            if (res && res.trim().length > 0) {
-                readme.value = res;
-            } else {
-                readme.value = null;
-            }
-        }
-    }).catch(e => {
-        if (props.mod === modToLoad) {
-            readmeError.value = e;
-        }
-    });
-}
-
-function fetchChangelog(modToLoad: ThunderstoreMod) {
-    changelogError.value = null;
-    changelog.value = null;
-    return fetchDataFor(props.mod, "changelog").then(res => {
-        if (props.mod === modToLoad) {
-            if (res && res.trim().length > 0) {
-                changelog.value = res;
-            } else {
-                changelog.value = null;
-            }
-        }
-    }).catch(e => {
-        if (props.mod === modToLoad) {
-            changelogError.value = e;
-        }
-    });
-}
-
-function fetchAll(modToLoad: ThunderstoreMod) {
-    setActiveTab("README");
-    loadingPanel.value = true;
-
-    fetchReadme(modToLoad)
-        .then(() => {
-            if (props.mod === modToLoad) {
-                loadingPanel.value = false;
-            }
-        });
-
-    buildDependencies(modToLoad)
-        .then(value => value.sort((a, b) => a.getName().localeCompare(b.getName())))
-        .then(value => dependencies.value = value);
-    fetchChangelog(modToLoad);
-}
-
-async function buildDependencies(mod: ThunderstoreMod) {
-    const modCombo = await getCombosByDependencyStrings(
-        store.state.activeGame,
-        [mod.getLatestDependencyString()]
-    );
-    const modAndDependencies = await getFullDependencyList(
-        modCombo,
-        store.state.activeGame,
-        [],
-        InstallMode.INSTALL_SPECIFIC
-    );
-    return modAndDependencies
-        .filter(value => value.getMod().getFullName() !== mod.getFullName())
-        .map(value => value.getMod());
-}
-
-fetchAll(props.mod);
-watch(() => props.mod, (newValue) => {
-    fetchAll(newValue);
-    document.getElementById('package-preview-details')?.setAttribute('open', 'true');
-});
-
-function getReadableDate(date: string): string {
-    return valueToReadableDate(new Date(date));
-}
-
-function getReadableCategories(mod: ThunderstoreMod) {
-    return mod.getCategories().join(", ") || "None";
-}
-
-const markdownToRender = computed(() => {
-    switch (activeTab.value) {
-        case "README": return readme.value;
-        case 'CHANGELOG': return changelog.value;
-        default: return null;
-    }
-});
-
-function showDownloadModal(mod: ThunderstoreMod) {
-    store.commit("openDownloadModVersionSelectModal", mod);
-}
-
-
-const previewPanelWidth = ref(450);
-ManagerSettings.getSingleton(store.state.activeGame)
-    .then(async settings => previewPanelWidth.value = await settings.getPreviewPanelWidth())
-
-watchEffect(() => {
-    const varWidth = previewPanelWidth.value;
-    const root = document.querySelector(':root')!;
-    root.style.setProperty('--preview-panel-width', varWidth);
-    maxPanelWidth.value = getMaxPanelWidth();
-});
-
-const resizeDebounce = debounce((event: DragEvent) => {
-    // Require conditional as on-release this is reset.
-    if (event.clientX > 0) {
-        previewPanelWidth.value = window.innerWidth - event.clientX;
-    }
-}, 1);
-
-function dragStart(event: DragEvent) {
-    event.target.style.opacity = 0;
-}
-
-function dragEnd(event: DragEvent) {
-    event.target.style.opacity = 1;
-    ManagerSettings.getSingleton(store.state.activeGame)
-        .then(settings => settings.setPreviewPanelWidth(previewPanelWidth.value));
-}
-
-</script>
-
-<template>
-    <div class="c-panel-window">
-        <div class="c-drag-pane" @drag.prevent.stop="resizeDebounce" @dragstart="dragStart" @dragend="dragEnd" draggable="true">
-            <i class="fas fa-grip-lines-vertical drag-item"></i>
-        </div>
-        <div class="c-preview-panel" :style="`width: calc(${previewPanelWidth}px - 2.5rem + 5px); max-width: ${maxPanelWidth}px`">
-            <div class="c-preview-panel__header">
-                <button class="close-button button" @click="() => emits('close')">
-                    <i class="fas fa-times"/>
-                </button>
-                <h1 class="title">
-                    {{ mod.getName() }}
-                </h1>
-                <h2 class="subtitle">
-                    By {{ mod.getOwner() }}
-                </h2>
-                <details id="package-preview-details" open="true">
-                    <summary class='card-timestamp non-selectable'>Package information</summary>
-                    <div class="notification is-warning margin-top" v-if="isNsfw">
-                        <p>This mod may contain potentially explicit material</p>
-                    </div>
-                    <div class="margin-top margin-bottom">
-                        <p class="description">{{ mod.getDescription() }}</p>
-                    </div>
-                    <p class='card-timestamp'><strong>Downloads:</strong> {{mod.getDownloadCount()}}</p>
-                    <p class='card-timestamp'><strong>Likes:</strong> {{mod.getRating()}}</p>
-                    <p class='card-timestamp'><strong>Last updated:</strong> {{getReadableDate(mod.getDateUpdated())}}</p>
-                    <p class='card-timestamp'><strong>Categories:</strong> {{getReadableCategories(mod)}}</p>
-                </details>
-            </div>
-            <div class="sticky-top sticky-top--no-shadow sticky-top--inherit no-margin sticky-top--no-padding">
-                <div class="button-group">
-                    <button class="button is-info" @click="showDownloadModal(mod)">Download</button>
-                    <ExternalLink tag="button" class="button" :url="props.mod.getPackageUrl()">View online</ExternalLink>
-                    <ExternalLink v-if="props.mod.getDonationLink()" tag="button" class="button" :url="props.mod.getDonationLink()">Donate</ExternalLink>
-                </div>
-                <div class="tabs margin-top">
-                    <ul>
-                        <li :class="{'is-active': activeTab === 'README'}"><a @click="setActiveTab('README')">README</a></li>
-                        <li :class="{'is-active': activeTab === 'CHANGELOG'}"><a @click="setActiveTab('CHANGELOG')">CHANGELOG</a></li>
-                        <li :class="{'is-active': activeTab === 'Dependencies'}"><a @click="setActiveTab('Dependencies')">Dependencies ({{ dependencies.length }})</a></li>
-                    </ul>
-                </div>
-            </div>
-            <div class="c-preview-panel__content">
-                <template v-if="loadingPanel">
-                    <div class="notification">
-                        <div class="container">
-                            <p>Fetching {{ activeTab }} for {{ props.mod.getFullName() }}</p>
-                        </div>
-                    </div>
-                </template>
-                <template v-else-if="activeTab === 'Dependencies'">
-                    <template v-if="dependencies.length > 0">
-                        <OnlineModList :paged-mod-list="dependencies" :read-only="true" />
-                    </template>
-                    <template v-else>
-                        <div class="notification">
-                            <div class="container">
-                                <p>{{ props.mod.getName() }} has no dependencies</p>
-                            </div>
-                        </div>
-                    </template>
-                </template>
-                <template v-else-if="activeTab === 'README'">
-                    <template v-if="readmeError !== null">
-                        <div class="notification is-danger">
-                            <h2 class="title is-6">Unable to fetch README for {{ props.mod.getFullName() }}</h2>
-                            <p>{{ readmeError.message }}</p>
-                        </div>
-                    </template>
-                    <template v-else-if="markdownToRender !== null">
-                        <MarkdownRender :markdown="markdownToRender" />
-                    </template>
-                </template>
-                <template v-else-if="activeTab === 'CHANGELOG'">
-                    <template v-if="changelogError !== null">
-                        <div class="notification is-danger">
-                            <h2 class="title is-6">Unable to fetch CHANGELOG for {{ props.mod.getFullName() }}</h2>
-                            <p>{{ changelogError.message }}</p>
-                        </div>
-                    </template>
-                    <template v-else-if="markdownToRender !== null">
-                        <MarkdownRender :markdown="markdownToRender" />
-                    </template>
-                </template>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.c-panel-window {
-    display: flex;
-    flex-direction: row;
-    max-width: 80vw;
-    background-color: var(--preview-panel-background-color);
-    margin-left: 1rem;
-}
-
-.c-drag-pane {
-    height: 100%;
-    background-color: transparent;
-    cursor: col-resize;
-    display: flex;
-    align-items: center;
-    padding-left: 1rem;
-    user-select: none !important;
-}
-
-.c-drag-pane:active {
-    cursor: none;
-}
-
-.c-preview-panel {
-    height: calc(100% - 1rem);
-    display: flex;
-    flex-flow: column;
-    margin: 1rem;
-    margin-left: 2rem;
-    color: var(--v2-primary-text-color);
-    min-width: 350px;
-
-    &__container {
-        flex: 0;
-    }
-
-    &__content {
-        flex: 1;
-        padding: 1rem 0;
-        display: block;
-        height: max-content;
-        overflow-y: auto;
-        overflow-x: hidden;
-        max-width: 100%;
-    }
-}
-
-.button-group {
-    padding-top: 1rem;
-    display: flex;
-    flex-grow: 0;
-    gap: 0.5rem;
-}
-
-.close-button {
-    float: right;
-}
-
-summary {
-    cursor: pointer;
-    display: list-item;
-    list-style: revert;
-}
-</style>
+<script lang="ts" setup>
+import ThunderstoreMod from '../../model/ThunderstoreMod';
+import { computed, ref, watch, watchEffect } from 'vue';
+import MarkdownRender from './MarkdownRender.vue';
+import { valueToReadableDate } from '../../utils/DateUtils';
+import OnlineModList from '../views/OnlineModList.vue';
+import { State } from '../../store';
+import { getCombosByDependencyStrings } from '../../r2mm/manager/PackageDexieStore';
+import { ExternalLink } from '../all';
+import R2Error from '../../model/errors/R2Error';
+import { getFullDependencyList, InstallMode } from '../../utils/DependencyUtils';
+import debounce from 'lodash.debounce';
+import ManagerSettings from '../../r2mm/manager/ManagerSettings';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { transformPackageUrl } from '../../providers/cdn/PackageUrlTransformer';
+
+const store = getStore<State>();
+
+interface ModPreviewPanelProps {
+    mod: ThunderstoreMod;
+}
+
+const props = defineProps<ModPreviewPanelProps>();
+const emits = defineEmits<{
+    (e: 'close'): void
+}>();
+
+const readme = ref<string | null>(null);
+const readmeError = ref<R2Error | null>(null);
+const changelog = ref<string | null>(null);
+const changelogError = ref<R2Error | null>(null);
+const activeTab = ref<"README" | "CHANGELOG" | "Dependencies">("README");
+const loadingPanel = ref<boolean>(true);
+const dependencies = ref<ThunderstoreMod[]>([]);
+const isNsfw = computed<boolean>(() => props.mod?.getNsfwFlag())
+
+const maxPanelWidth = ref(getMaxPanelWidth());
+
+function getMaxPanelWidth(): number {
+    return window.outerWidth - document.getElementsByClassName("nav-column")[0]!.scrollWidth;
+}
+
+function setActiveTab(tab: "README" | "CHANGELOG" | "Dependencies") {
+    activeTab.value = tab;
+}
+
+function fetchDataFor(mod: ThunderstoreMod, type: "readme" | "changelog"): Promise<string> {
+    return fetch(transformPackageUrl(`https://thunderstore.io/api/cyberstorm/package/${mod.getOwner()}/${mod.getName()}/v/${mod.getLatestVersion()}/${type}/`))
+        .then(res => {
+            if (!res.ok) {
+                throw new Error(`No ${type} available for ${mod.getName()}`)
+            }
+            return res.json();
+        })
+        .then(res => res.html);
+}
+
+function fetchReadme(modToLoad: ThunderstoreMod) {
+    readmeError.value = null;
+    readme.value = null;
+    return fetchDataFor(props.mod, "readme").then(res => {
+        if (props.mod === modToLoad) {
+            if (res && res.trim().length > 0) {
+                readme.value = res;
+            } else {
+                readme.value = null;
+            }
+        }
+    }).catch(e => {
+        if (props.mod === modToLoad) {
+            readmeError.value = e;
+        }
+    });
+}
+
+function fetchChangelog(modToLoad: ThunderstoreMod) {
+    changelogError.value = null;
+    changelog.value = null;
+    return fetchDataFor(props.mod, "changelog").then(res => {
+        if (props.mod === modToLoad) {
+            if (res && res.trim().length > 0) {
+                changelog.value = res;
+            } else {
+                changelog.value = null;
+            }
+        }
+    }).catch(e => {
+        if (props.mod === modToLoad) {
+            changelogError.value = e;
+        }
+    });
+}
+
+function fetchAll(modToLoad: ThunderstoreMod) {
+    setActiveTab("README");
+    loadingPanel.value = true;
+
+    fetchReadme(modToLoad)
+        .then(() => {
+            if (props.mod === modToLoad) {
+                loadingPanel.value = false;
+            }
+        });
+
+    buildDependencies(modToLoad)
+        .then(value => value.sort((a, b) => a.getName().localeCompare(b.getName())))
+        .then(value => dependencies.value = value);
+    fetchChangelog(modToLoad);
+}
+
+async function buildDependencies(mod: ThunderstoreMod) {
+    const modCombo = await getCombosByDependencyStrings(
+        store.state.activeGame,
+        [mod.getLatestDependencyString()]
+    );
+    const modAndDependencies = await getFullDependencyList(
+        modCombo,
+        store.state.activeGame,
+        [],
+        InstallMode.INSTALL_SPECIFIC
+    );
+    return modAndDependencies
+        .filter(value => value.getMod().getFullName() !== mod.getFullName())
+        .map(value => value.getMod());
+}
+
+fetchAll(props.mod);
+watch(() => props.mod, (newValue) => {
+    fetchAll(newValue);
+    document.getElementById('package-preview-details')?.setAttribute('open', 'true');
+});
+
+function getReadableDate(date: string): string {
+    return valueToReadableDate(new Date(date));
+}
+
+function getReadableCategories(mod: ThunderstoreMod) {
+    return mod.getCategories().join(", ") || "None";
+}
+
+const markdownToRender = computed(() => {
+    switch (activeTab.value) {
+        case "README": return readme.value;
+        case 'CHANGELOG': return changelog.value;
+        default: return null;
+    }
+});
+
+function showDownloadModal(mod: ThunderstoreMod) {
+    store.commit("openDownloadModVersionSelectModal", mod);
+}
+
+
+const previewPanelWidth = ref(450);
+ManagerSettings.getSingleton(store.state.activeGame)
+    .then(async settings => previewPanelWidth.value = await settings.getPreviewPanelWidth())
+
+watchEffect(() => {
+    const varWidth = previewPanelWidth.value;
+    const root = document.querySelector(':root')! as HTMLElement;
+    root.style.setProperty('--preview-panel-width', varWidth.toString());
+    maxPanelWidth.value = getMaxPanelWidth();
+});
+
+const resizeDebounce = debounce((event: DragEvent) => {
+    // Require conditional as on-release this is reset.
+    if (event.clientX > 0) {
+        previewPanelWidth.value = window.innerWidth - event.clientX;
+    }
+}, 1);
+
+function dragStart(event: DragEvent) {
+    (event.target as HTMLElement).style.opacity = '0';
+}
+
+function dragEnd(event: DragEvent) {
+    (event.target as HTMLElement).style.opacity = '1';
+    ManagerSettings.getSingleton(store.state.activeGame)
+        .then(settings => settings.setPreviewPanelWidth(previewPanelWidth.value));
+}
+
+</script>
+
+<template>
+    <div class="c-panel-window">
+        <div class="c-drag-pane" @drag.prevent.stop="resizeDebounce" @dragstart="dragStart" @dragend="dragEnd" draggable="true">
+            <i class="fas fa-grip-lines-vertical drag-item"></i>
+        </div>
+        <div class="c-preview-panel" :style="`width: calc(${previewPanelWidth}px - 2.5rem + 5px); max-width: ${maxPanelWidth}px`">
+            <div class="c-preview-panel__header">
+                <button class="close-button button" @click="() => emits('close')">
+                    <i class="fas fa-times"/>
+                </button>
+                <h1 class="title">
+                    {{ mod.getName() }}
+                </h1>
+                <h2 class="subtitle">
+                    By {{ mod.getOwner() }}
+                </h2>
+                <details id="package-preview-details" open="true">
+                    <summary class='card-timestamp non-selectable'>Package information</summary>
+                    <div class="notification is-warning margin-top" v-if="isNsfw">
+                        <p>This mod may contain potentially explicit material</p>
+                    </div>
+                    <div class="margin-top margin-bottom">
+                        <p class="description">{{ mod.getDescription() }}</p>
+                    </div>
+                    <p class='card-timestamp'><strong>Downloads:</strong> {{mod.getDownloadCount()}}</p>
+                    <p class='card-timestamp'><strong>Likes:</strong> {{mod.getRating()}}</p>
+                    <p class='card-timestamp'><strong>Last updated:</strong> {{getReadableDate(mod.getDateUpdated())}}</p>
+                    <p class='card-timestamp'><strong>Categories:</strong> {{getReadableCategories(mod)}}</p>
+                </details>
+            </div>
+            <div class="sticky-top sticky-top--no-shadow sticky-top--inherit no-margin sticky-top--no-padding">
+                <div class="button-group">
+                    <button class="button is-info" @click="showDownloadModal(mod)">Download</button>
+                    <ExternalLink tag="button" class="button" :url="props.mod.getPackageUrl()">View online</ExternalLink>
+                    <ExternalLink v-if="props.mod.getDonationLink()" tag="button" class="button" :url="props.mod.getDonationLink()!">Donate</ExternalLink>
+                </div>
+                <div class="tabs margin-top">
+                    <ul>
+                        <li :class="{'is-active': activeTab === 'README'}"><a @click="setActiveTab('README')">README</a></li>
+                        <li :class="{'is-active': activeTab === 'CHANGELOG'}"><a @click="setActiveTab('CHANGELOG')">CHANGELOG</a></li>
+                        <li :class="{'is-active': activeTab === 'Dependencies'}"><a @click="setActiveTab('Dependencies')">Dependencies ({{ dependencies.length }})</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="c-preview-panel__content">
+                <template v-if="loadingPanel">
+                    <div class="notification">
+                        <div class="container">
+                            <p>Fetching {{ activeTab }} for {{ props.mod.getFullName() }}</p>
+                        </div>
+                    </div>
+                </template>
+                <template v-else-if="activeTab === 'Dependencies'">
+                    <template v-if="dependencies.length > 0">
+                        <OnlineModList :paged-mod-list="(dependencies as ThunderstoreMod[])" :read-only="true" />
+                    </template>
+                    <template v-else>
+                        <div class="notification">
+                            <div class="container">
+                                <p>{{ props.mod.getName() }} has no dependencies</p>
+                            </div>
+                        </div>
+                    </template>
+                </template>
+                <template v-else-if="activeTab === 'README'">
+                    <template v-if="readmeError !== null">
+                        <div class="notification is-danger">
+                            <h2 class="title is-6">Unable to fetch README for {{ props.mod.getFullName() }}</h2>
+                            <p>{{ readmeError.message }}</p>
+                        </div>
+                    </template>
+                    <template v-else-if="markdownToRender !== null">
+                        <MarkdownRender :markdown="markdownToRender" />
+                    </template>
+                </template>
+                <template v-else-if="activeTab === 'CHANGELOG'">
+                    <template v-if="changelogError !== null">
+                        <div class="notification is-danger">
+                            <h2 class="title is-6">Unable to fetch CHANGELOG for {{ props.mod.getFullName() }}</h2>
+                            <p>{{ changelogError.message }}</p>
+                        </div>
+                    </template>
+                    <template v-else-if="markdownToRender !== null">
+                        <MarkdownRender :markdown="markdownToRender" />
+                    </template>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.c-panel-window {
+    display: flex;
+    flex-direction: row;
+    max-width: 80vw;
+    background-color: var(--preview-panel-background-color);
+    margin-left: 1rem;
+}
+
+.c-drag-pane {
+    height: 100%;
+    background-color: transparent;
+    cursor: col-resize;
+    display: flex;
+    align-items: center;
+    padding-left: 1rem;
+    user-select: none !important;
+}
+
+.c-drag-pane:active {
+    cursor: none;
+}
+
+.c-preview-panel {
+    height: calc(100% - 1rem);
+    display: flex;
+    flex-flow: column;
+    margin: 1rem;
+    margin-left: 2rem;
+    color: var(--v2-primary-text-color);
+    min-width: 350px;
+
+    &__container {
+        flex: 0;
+    }
+
+    &__content {
+        flex: 1;
+        padding: 1rem 0;
+        display: block;
+        height: max-content;
+        overflow-y: auto;
+        overflow-x: hidden;
+        max-width: 100%;
+    }
+}
+
+.button-group {
+    padding-top: 1rem;
+    display: flex;
+    flex-grow: 0;
+    gap: 0.5rem;
+}
+
+.close-button {
+    float: right;
+}
+
+summary {
+    cursor: pointer;
+    display: list-item;
+    list-style: revert;
+}
+</style>
diff --git a/src/components/views/DownloadModVersionSelectModal.vue b/src/components/views/DownloadModVersionSelectModal.vue
index d42a964b7..bb8fe83c3 100644
--- a/src/components/views/DownloadModVersionSelectModal.vue
+++ b/src/components/views/DownloadModVersionSelectModal.vue
@@ -94,7 +94,7 @@ watch(() => store.state.modals.downloadModalMod, async () => {
             mod.getFullName()
         );
 
-        const foundRecommendedVersion = MOD_LOADER_VARIANTS[activeGame.internalFolderName]
+        const foundRecommendedVersion = MOD_LOADER_VARIANTS[activeGame.internalFolderName]!
             .find(value => value.packageName === mod.getFullName());
 
         if (foundRecommendedVersion && foundRecommendedVersion.recommendedVersion) {
@@ -149,8 +149,8 @@ async function downloadHandler(tsMod: ThunderstoreMod, tsVersion: ThunderstoreVe
     closeModal();
 
     const combos = [new ThunderstoreCombo()];
-    combos[0].setMod(tsMod);
-    combos[0].setVersion(tsVersion);
+    combos[0]!.setMod(tsMod);
+    combos[0]!.setVersion(tsVersion);
 
     await store.dispatch('download/downloadAndInstallCombos', {
         combos,
diff --git a/src/components/views/LocalModList/LocalModCard.vue b/src/components/views/LocalModList/LocalModCard.vue
index ec48152cf..ac4475c1f 100644
--- a/src/components/views/LocalModList/LocalModCard.vue
+++ b/src/components/views/LocalModList/LocalModCard.vue
@@ -21,7 +21,7 @@ const store = getStore<State>();
 
 type LocalModCardProps = {
     mod: ManifestV2;
-    version?: ThunderstoreVersion;
+    version?: ThunderstoreVersion | undefined;
 }
 
 const props = defineProps<LocalModCardProps>();
@@ -248,15 +248,15 @@ function getReadableDate(value: number): string {
         </button>
 
         <button v-if="missingDependencies.length"
-            @click="downloadDependency(missingDependencies[0])"
+            @click="downloadDependency(missingDependencies[0]!)"
             class='button'>
             Download dependency
         </button>
 
         <button v-if="disabledDependencies.length"
-            @click="enableMod(disabledDependencies[0])"
+            @click="enableMod(disabledDependencies[0]!)"
             class='button'>
-            Enable {{disabledDependencies[0].getDisplayName()}}
+            Enable {{disabledDependencies[0]!.getDisplayName()}}
         </button>
 
         <DonateButton v-if="tsMod" :mod="tsMod"/>
diff --git a/src/components/views/LocalModList/LocalModDraggableList.vue b/src/components/views/LocalModList/LocalModDraggableList.vue
index 482b23380..561ad3280 100644
--- a/src/components/views/LocalModList/LocalModDraggableList.vue
+++ b/src/components/views/LocalModList/LocalModDraggableList.vue
@@ -9,7 +9,7 @@
                item-key="id">
         <template #item="{element}">
             <LocalModCard
-                :version="installedVersions.get(element.name)"
+                :version="(installedVersions.get(element.name) as ThunderstoreVersion | undefined)"
                 :mod="element" />
         </template>
     </draggable>
@@ -29,6 +29,8 @@ import ThunderstoreVersion from "../../../model/ThunderstoreVersion";
 
 const store = getStore<State>();
 
+const drag = ref<boolean>(false);
+
 const profile = computed<ImmutableProfile>(() => store.getters['profile/activeProfile'].asImmutableProfile());
 
 // Hack to workaround draggable issue where the VueX update is slightly delayed, which causes a jumping effect.
diff --git a/src/components/views/OnlineModList.vue b/src/components/views/OnlineModList.vue
index f257614f4..471d2970a 100644
--- a/src/components/views/OnlineModList.vue
+++ b/src/components/views/OnlineModList.vue
@@ -93,7 +93,7 @@ function showDownloadModal(mod: ThunderstoreMod) {
     store.commit("openDownloadModVersionSelectModal", mod);
 }
 
-function getReadableDate(date: Date): string {
+function getReadableDate(date: Date | string): string {
     return valueToReadableDate(date);
 }
 
diff --git a/src/components/views/OnlineModListWithPanel.vue b/src/components/views/OnlineModListWithPanel.vue
index 3be835c60..2ba325799 100644
--- a/src/components/views/OnlineModListWithPanel.vue
+++ b/src/components/views/OnlineModListWithPanel.vue
@@ -22,7 +22,7 @@
                     <i class='fas fa-map-pin' v-tooltip.left="'Pinned on Thunderstore'"></i>
                 </span>
                 <span class='card-header-icon' v-if="key.getDonationLink() && !readOnly">
-                    <ExternalLink :url="key.getDonationLink()" target="external" tag="span">
+                    <ExternalLink :url="key.getDonationLink()!" target="external" tag="span">
                         <i class='fas fa-heart' v-tooltip.left="'Donate to the mod author'"></i>
                     </ExternalLink>
                 </span>
@@ -56,7 +56,7 @@ type OnlineModListWithPanelProps = {
 }
 
 const props = withDefaults(defineProps<OnlineModListWithPanelProps>(), {
-    pagedModList: [],
+    pagedModList: () => [],
     selectedMod: null,
     readOnly: false,
 });
diff --git a/src/components/views/OnlineModView.vue b/src/components/views/OnlineModView.vue
index fc462df89..3811bd29a 100644
--- a/src/components/views/OnlineModView.vue
+++ b/src/components/views/OnlineModView.vue
@@ -77,7 +77,7 @@
         </div>
         <div id="mod-preview">
             <template v-if="previewMod !== null">
-                <OnlinePreviewPanel :mod="previewMod" @close="() => previewMod = null"/>
+                <OnlinePreviewPanel :mod="(previewMod as ThunderstoreMod)" @close="() => previewMod = null"/>
             </template>
         </div>
     </div>
diff --git a/src/pages/ConfigEditor.vue b/src/pages/ConfigEditor.vue
index 1cc1ac9d3..b868df14f 100644
--- a/src/pages/ConfigEditor.vue
+++ b/src/pages/ConfigEditor.vue
@@ -2,7 +2,7 @@
     <ManagerActivityBar />
     <div id="config-editor">
         <ConfigSelectionLayout v-show="editing === null" @edit="bindEdit($event)"/>
-        <ConfigEditLayout :config-file="editing" @changed="editing = null" v-if="editing"/>
+        <ConfigEditLayout :config-file="(editing as ConfigFile)" @changed="editing = null" v-if="editing"/>
     </div>
 </template>
 
diff --git a/src/pages/DownloadMonitor.vue b/src/pages/DownloadMonitor.vue
index caf3e641c..766513eb5 100644
--- a/src/pages/DownloadMonitor.vue
+++ b/src/pages/DownloadMonitor.vue
@@ -26,7 +26,7 @@
                 <div>
                     <div class="row no-wrap border-at-bottom pad pad--sides">
                         <div class="is-flex-grow-1 margin-right card is-shadowless">
-                            <p><strong>{{ downloadObject.initialMods.map(tsCombo => tsCombo.getUserFriendlyString()).join(", ") }}</strong></p>
+                            <p><strong>{{ downloadObject.initialMods.map((tsCombo: ThunderstoreCombo) => tsCombo.getUserFriendlyString()).join(", ") }}</strong></p>
 
                             <div class="row" v-if="downloadObject.status === DownloadStatusEnum.FAILED">
                                 <div class="col">
@@ -148,6 +148,7 @@ import * as DownloadUtils from '../utils/DownloadUtils';
 import { getStore } from '../providers/generic/store/StoreProvider';
 import { State } from '../store';
 import ManagerActivityBar from '../components/navigation/ManagerActivityBar.vue';
+import ThunderstoreCombo from 'src/model/ThunderstoreCombo';
 
 const store = getStore<State>();
 </script>
diff --git a/src/pages/GameSelectionScreen.vue b/src/pages/GameSelectionScreen.vue
index d7bc13b95..56a1e721d 100644
--- a/src/pages/GameSelectionScreen.vue
+++ b/src/pages/GameSelectionScreen.vue
@@ -53,11 +53,11 @@
                             <template v-if="viewMode === GameSelectionViewMode.LIST">
                                 <div class="margin-right">
                                     <button class="button is-info"
-                                       :disabled="selectedGame === null || runningMigration" @click="selectGame(selectedGame!)">Select {{ activeTab.toLowerCase() }}</button>
+                                       :disabled="selectedGame === null || runningMigration" @click="selectGame(selectedGame! as Game)">Select {{ activeTab.toLowerCase() }}</button>
                                 </div>
                                 <div class="margin-right">
                                     <button class="button"
-                                       :disabled="selectedGame === null || runningMigration" @click="selectDefaultGame(selectedGame!)">Set as default</button>
+                                       :disabled="selectedGame === null || runningMigration" @click="selectDefaultGame(selectedGame! as Game)">Set as default</button>
                                 </div>
                             </template>
                             <div>
diff --git a/src/pages/Manager.vue b/src/pages/Manager.vue
index 6fa87189f..20a11012e 100644
--- a/src/pages/Manager.vue
+++ b/src/pages/Manager.vue
@@ -220,11 +220,11 @@ function changeGameInstallDirectory() {
         filters: (activeGame.value.exeName.map(value => {
             const nameSplit = value.split(".");
             return [{
-                name: nameSplit[0],
-                extensions: [nameSplit[1]]
+                name: nameSplit[0]!,
+                extensions: [nameSplit[1]!]
             }]
         }).reduce((previousValue, currentValue) => {
-            previousValue[0].extensions = [...previousValue[0].extensions, ...currentValue[0].extensions];
+            previousValue[0]!.extensions = [...previousValue[0]!.extensions, ...currentValue[0]!.extensions];
             return previousValue;
         })),
         defaultPath: ror2Directory,
@@ -232,9 +232,9 @@ function changeGameInstallDirectory() {
     }).then(async files => {
         if (files.length === 1) {
             try {
-                const containsGameExecutable = activeGame.value.exeName.find(exeName => path.basename(files[0]).toLowerCase() === exeName.toLowerCase()) !== undefined
+                const containsGameExecutable = activeGame.value.exeName.find(exeName => path.basename(files[0]!).toLowerCase() === exeName.toLowerCase()) !== undefined
                 if (containsGameExecutable) {
-                    await settings.value.setGameDirectory(path.dirname(await FsProvider.instance.realpath(files[0])));
+                    await settings.value.setGameDirectory(path.dirname(await FsProvider.instance.realpath(files[0]!)));
                 } else {
                     showRor2IncorrectDirectoryModal.value = true;
                 }
@@ -256,9 +256,9 @@ function changeGameInstallDirectoryGamePass() {
     }).then(async files => {
         if (files.length === 1) {
             try {
-                const containsGameExecutable = (path.basename(files[0]).toLowerCase() === "gamelaunchhelper.exe");
+                const containsGameExecutable = (path.basename(files[0]!).toLowerCase() === "gamelaunchhelper.exe");
                 if (containsGameExecutable) {
-                    await settings.value.setGameDirectory(path.dirname(await FsProvider.instance.realpath(files[0])));
+                    await settings.value.setGameDirectory(path.dirname(await FsProvider.instance.realpath(files[0]!)));
                 } else {
                     throw new Error("The selected executable is not gamelaunchhelper.exe");
                 }
@@ -309,8 +309,8 @@ function changeSteamDirectory() {
     }).then(async files => {
         if (files.length === 1) {
             try {
-                if (await checkIfSteamExecutableIsValid(files[0])) {
-                    await settings.value.setSteamDirectory(path.dirname(await FsProvider.instance.realpath(files[0])));
+                if (await checkIfSteamExecutableIsValid(files[0]!)) {
+                    await settings.value.setSteamDirectory(path.dirname(await FsProvider.instance.realpath(files[0]!)));
                 } else {
                     showSteamIncorrectDirectoryModal.value = true;
                 }
diff --git a/src/pages/Splash.vue b/src/pages/Splash.vue
index a3d16f166..3a9638f74 100644
--- a/src/pages/Splash.vue
+++ b/src/pages/Splash.vue
@@ -135,6 +135,7 @@ import Buffer from '../providers/node/buffer/buffer';
 import ProtocolProvider from '../providers/generic/protocol/ProtocolProvider';
 import ManagerSettings from '../r2mm/manager/ManagerSettings';
 import { LaunchType } from '../model/real_enums/launch/LaunchType';
+import { UpdateRequestItemBody } from '../store/modules/SplashModule';
 
 const store = getStore<State>();
 const router = useRouter();
@@ -144,7 +145,7 @@ const {
 } = useSplashComposable();
 
 const heroTitle = ref<string>('Starting r2modman');
-const heroType = ref<string>('primary');
+const heroType = ref<'primary' | 'warning'>('primary');
 const view = ref<string>('main');
 const splashText = computed(() => store.state.splash.splashText);
 
@@ -191,7 +192,6 @@ async function ensureWrapperInGameFolder(wrapperName: WrapperScript) {
         const wrapperFileResult = await fetch(ProtocolProvider.getPublicAssetUrl(`/${wrapperName}`)).then(res => res.arrayBuffer());
         const wrapperFileContent = Buffer.from(wrapperFileResult);
         await FsProvider.instance.writeFile(path.join(PathResolver.MOD_ROOT, wrapperName), wrapperFileContent);
-        await FsProvider.instance.writeFile(path.join(PathResolver.MOD_ROOT, wrapperName), wrapperFileContent);
     }
     await FsProvider.instance.chmod(path.join(PathResolver.MOD_ROOT, wrapperName), 0o755);
 }
diff --git a/src/providers/node/path/path.ts b/src/providers/node/path/path.ts
index 54043049c..698ae6f82 100644
--- a/src/providers/node/path/path.ts
+++ b/src/providers/node/path/path.ts
@@ -4,7 +4,7 @@ export type NodePathProvider = {
     join: (...paths: string[]) => string;
     dirname: (path: string) => string;
     extname: (path: string) => string;
-    basename: (path: string) => string;
+    basename: (path: string, suffix?: string) => string;
     relative: (pathOne: string, pathTwo: string) => string;
     resolve: (...paths: string[]) => string;
     sep: string;
@@ -28,7 +28,7 @@ const nodePath: NodePathProvider = {
     join: (...args) => getImplementation().join(...args),
     dirname: path => getImplementation().dirname(path),
     extname: path => getImplementation().extname(path),
-    basename: path => getImplementation().basename(path),
+    basename: (path, suffix) => getImplementation().basename(path, suffix),
     relative: (pathOne, pathTwo) => getImplementation().relative(pathOne, pathTwo),
     resolve: (...args) => getImplementation().resolve(...args),
     get sep() { return getImplementation().sep }
diff --git a/src/store/index.ts b/src/store/index.ts
index 4de52fc91..c2a7d8216 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,12 +1,12 @@
 import { ActionContext, createStore } from 'vuex';
 
-import ErrorModule from './modules/ErrorModule';
-import { DownloadModule } from './modules/DownloadModule';
-import ModalsModule from './modules/ModalsModule';
+import ErrorModule, { State as ErrorState } from './modules/ErrorModule';
+import { DownloadModule, State as DownloadState } from './modules/DownloadModule';
+import ModalsModule, { State as ModalsState } from './modules/ModalsModule';
 import ModFilterModule, { State as ModFilterState } from './modules/ModFilterModule';
-import ProfileModule from './modules/ProfileModule';
-import ProfileExportModule from './modules/ProfileExportModule';
-import { ProfilesModule } from './modules/ProfilesModule';
+import ProfileModule, { State as ProfileState } from './modules/ProfileModule';
+import ProfileExportModule, { State as ProfileExportState } from './modules/ProfileExportModule';
+import { ProfilesModule, State as ProfilesState } from './modules/ProfilesModule';
 import { TsModsModule, State as TsModsState } from './modules/TsModsModule';
 import { FolderMigration } from '../migrations/FolderMigration';
 import Game from '../model/game/Game';
@@ -14,8 +14,8 @@ import GameManager from '../model/game/GameManager';
 import R2Error from '../model/errors/R2Error';
 import { getModLoaderPackageNames } from '../r2mm/installing/profile_installers/ModLoaderVariantRecord';
 import ManagerSettings from '../r2mm/manager/ManagerSettings';
-import { SplashModule } from './modules/SplashModule';
-import { EcosystemUpdateModule } from './modules/EcosystemUpdateModule';
+import { SplashModule, State as SplashState } from './modules/SplashModule';
+import { EcosystemUpdateModule, EcosystemUpdateState } from './modules/EcosystemUpdateModule';
 
 export interface State {
     activeGame: Game;
@@ -24,6 +24,14 @@ export interface State {
     _settings: ManagerSettings | null;
     modFilters: ModFilterState;
     tsMods: TsModsState;
+    profile: ProfileState;
+    modals: ModalsState;
+    download: DownloadState;
+    error: ErrorState;
+    profileExport: ProfileExportState;
+    ecosystemUpdate: EcosystemUpdateState;
+    profiles: ProfilesState;
+    splash: SplashState;
 }
 
 type Context = ActionContext<State, State>;
diff --git a/src/store/modules/DownloadModule.ts b/src/store/modules/DownloadModule.ts
index aad88dd60..eb348a28c 100644
--- a/src/store/modules/DownloadModule.ts
+++ b/src/store/modules/DownloadModule.ts
@@ -39,7 +39,7 @@ interface UpdateObject {
     status?: DownloadStatusEnum;
 }
 
-interface State {
+export interface State {
     allDownloads: DownloadProgress[],
     ignoreCache: boolean,
 }
diff --git a/src/store/modules/ErrorModule.ts b/src/store/modules/ErrorModule.ts
index 38acf5571..884ba37bf 100644
--- a/src/store/modules/ErrorModule.ts
+++ b/src/store/modules/ErrorModule.ts
@@ -1,7 +1,7 @@
 import R2Error from "../../model/errors/R2Error";
 import LoggerProvider, { LogSeverity } from '../../providers/ror2/logging/LoggerProvider';
 
-interface State {
+export interface State {
     error: R2Error | null;
 }
 
diff --git a/src/store/modules/ModalsModule.ts b/src/store/modules/ModalsModule.ts
index 5b7e6b5aa..2dfd030df 100644
--- a/src/store/modules/ModalsModule.ts
+++ b/src/store/modules/ModalsModule.ts
@@ -1,7 +1,7 @@
 import ManifestV2 from "../../model/ManifestV2";
 import ThunderstoreMod from "../../model/ThunderstoreMod";
 
-interface State {
+export interface State {
     associatedModsModalMod: ManifestV2 | null;
     disableModModalMod: ManifestV2 | null;
     downloadModalMod: ThunderstoreMod | null;
diff --git a/src/store/modules/ProfileExportModule.ts b/src/store/modules/ProfileExportModule.ts
index c0c746d87..800b67bd4 100644
--- a/src/store/modules/ProfileExportModule.ts
+++ b/src/store/modules/ProfileExportModule.ts
@@ -4,7 +4,7 @@ import InteractionProvider from '../../providers/ror2/system/InteractionProvider
 import { ActionTree, MutationTree } from 'vuex';
 import { State as RootState } from '../../store';
 
-interface State {
+export interface State {
     exportCode?: string | undefined;
 }
 
diff --git a/src/store/modules/ProfileModule.ts b/src/store/modules/ProfileModule.ts
index 06de50e35..be9459228 100644
--- a/src/store/modules/ProfileModule.ts
+++ b/src/store/modules/ProfileModule.ts
@@ -26,7 +26,7 @@ export interface UnsatisfiedDependencies {
     missingDependencies: string[];
 }
 
-interface State {
+export interface State {
     activeProfile: Profile | null;
     expandedByDefault: boolean;
     funkyMode: boolean;
diff --git a/src/store/modules/ProfilesModule.ts b/src/store/modules/ProfilesModule.ts
index 8cba6c7d1..7f6ebcda2 100644
--- a/src/store/modules/ProfilesModule.ts
+++ b/src/store/modules/ProfilesModule.ts
@@ -6,7 +6,7 @@ import Profile from "../../model/Profile";
 import FsProvider from "../../providers/generic/file/FsProvider";
 import path from "../../providers/node/path/path";
 
-interface State {
+export interface State {
     profileList: string[];
 }
 
diff --git a/src/store/modules/SplashModule.ts b/src/store/modules/SplashModule.ts
index ffa8ab0cd..42e21bce2 100644
--- a/src/store/modules/SplashModule.ts
+++ b/src/store/modules/SplashModule.ts
@@ -3,7 +3,7 @@ import { ActionTree } from 'vuex';
 import { State as RootState } from "../../store";
 import type { PackageListIndex } from './TsModsModule';
 
-interface State {
+export interface State {
     requests: RequestItem[];
     splashText: string;
 }
diff --git a/src/utils/DateUtils.ts b/src/utils/DateUtils.ts
index 7d4ffaf15..4cfe21731 100644
--- a/src/utils/DateUtils.ts
+++ b/src/utils/DateUtils.ts
@@ -1,4 +1,4 @@
-export function valueToReadableDate(date: number | Date): string {
+export function valueToReadableDate(date: number | Date | string): string {
     const dateObject: Date = new Date(date);
     return `${dateObject.toDateString()}, ${dateObject.toLocaleTimeString()}`
 }

From 0bcf8eb4bb0fa7a9ca15ddb31315e42029bae0fa Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Fri, 3 Jul 2026 15:20:50 +0800
Subject: [PATCH 6/7] Updated pnpm-lock.yaml to use vue-tsc

---
 pnpm-lock.yaml | 74 +++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 64 insertions(+), 10 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc3d6192c..dc414e14d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -225,9 +225,6 @@ importers:
       sinon:
         specifier: ^11.1.1
         version: 11.1.2
-      tsc:
-        specifier: ^2.0.4
-        version: 2.0.4
       tsx:
         specifier: ^4.20.5
         version: 4.21.0
@@ -243,6 +240,9 @@ importers:
       vue:
         specifier: ^3.5.16
         version: 3.5.31(typescript@5.9.3)
+      vue-tsc:
+        specifier: ^3.3.5
+        version: 3.3.6(typescript@5.9.3)
       wallaby-vue-compiler:
         specifier: ^1.0.3
         version: 1.0.6(vue-template-compiler@2.7.16)
@@ -1479,6 +1479,15 @@ packages:
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
+  '@volar/language-core@2.4.28':
+    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
+
+  '@volar/source-map@2.4.28':
+    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
+
+  '@volar/typescript@2.4.28':
+    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
+
   '@vue/compiler-core@3.5.31':
     resolution: {integrity: sha512-k/ueL14aNIEy5Onf0OVzR8kiqF/WThgLdFhxwa4e/KF/0qe38IwIdofoSWBTvvxQOesaz6riAFAUaYjoF9fLLQ==}
 
@@ -1512,6 +1521,9 @@ packages:
     resolution: {integrity: sha512-VsjulR8NUlOq42B0r+Qom9MLDE89OatemeBTy+JlWghkXOQH5NwTuuAWdlC/IsA4wnFkhEWshUbdxEjXPqQb1Q==}
     hasBin: true
 
+  '@vue/language-core@3.3.6':
+    resolution: {integrity: sha512-LgBMZAy2sR3cQWknpyaxnI6yBkqDfLBPkbdhwRhQCvzfNJRQXPilgQIrdI/v4ytJ0sAq9bWhaPsjqBqneomJ3Q==}
+
   '@vue/reactivity@3.5.31':
     resolution: {integrity: sha512-DtKXxk9E/KuVvt8VxWu+6Luc9I9ETNcqR1T1oW1gf02nXaZ1kuAx58oVu7uX9XxJR0iJCro6fqBLw9oSBELo5g==}
 
@@ -1587,6 +1599,9 @@ packages:
   ajv@8.20.0:
     resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
 
+  alien-signals@3.2.1:
+    resolution: {integrity: sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==}
+
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -3394,6 +3409,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
   mute-stream@3.0.0:
     resolution: {integrity: sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==}
     engines: {node: ^20.17.0 || >=22.9.0}
@@ -4456,11 +4474,6 @@ packages:
       typescript:
         optional: true
 
-  tsc@2.0.4:
-    resolution: {integrity: sha512-fzoSieZI5KKJVBYGvwbVZs/J5za84f2lSTLPYf6AGiIf43tZ3GNrI1QzTLcjtyDDP4aLxd46RTZq1nQxe7+k5Q==}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
-    hasBin: true
-
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
@@ -4722,6 +4735,9 @@ packages:
   vm-browserify@1.1.2:
     resolution: {integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==}
 
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
   vue-component-type-helpers@2.2.12:
     resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
 
@@ -4744,6 +4760,12 @@ packages:
   vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
 
+  vue-tsc@3.3.6:
+    resolution: {integrity: sha512-ERXGgbKSBGFUkavrJ1Iwj0ZVxKqB/5UOx65IXy7fPf2UsoI21n3ssQLwdvx8xyUGgJe9PvSZTM/FYzIdwUDPFA==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
   vue@3.5.31:
     resolution: {integrity: sha512-iV/sU9SzOlmA/0tygSmjkEN6Jbs3nPoIPFhCMLD2STrjgOU8DX7ZtzMhg4ahVwf5Rp9KoFzcXeB1ZrVbLBp5/Q==}
     peerDependencies:
@@ -6184,6 +6206,18 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
+  '@volar/language-core@2.4.28':
+    dependencies:
+      '@volar/source-map': 2.4.28
+
+  '@volar/source-map@2.4.28': {}
+
+  '@volar/typescript@2.4.28':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
   '@vue/compiler-core@3.5.31':
     dependencies:
       '@babel/parser': 7.29.2
@@ -6272,6 +6306,16 @@ snapshots:
       - vite
       - vue
 
+  '@vue/language-core@3.3.6':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      '@vue/compiler-dom': 3.5.31
+      '@vue/shared': 3.5.31
+      alien-signals: 3.2.1
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.4
+
   '@vue/reactivity@3.5.31':
     dependencies:
       '@vue/shared': 3.5.31
@@ -6347,6 +6391,8 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
+  alien-signals@3.2.1: {}
+
   ansi-regex@5.0.1: {}
 
   ansi-regex@6.2.2: {}
@@ -8332,6 +8378,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  muggle-string@0.4.1: {}
+
   mute-stream@3.0.0: {}
 
   nanoid@3.3.11: {}
@@ -9514,8 +9562,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
-  tsc@2.0.4: {}
-
   tslib@1.14.1: {}
 
   tslib@2.8.1: {}
@@ -9764,6 +9810,8 @@ snapshots:
 
   vm-browserify@1.1.2: {}
 
+  vscode-uri@3.1.0: {}
+
   vue-component-type-helpers@2.2.12: {}
 
   vue-i18n@11.3.0(vue@3.5.31(typescript@5.9.3)):
@@ -9788,6 +9836,12 @@ snapshots:
       de-indent: 1.0.2
       he: 1.2.0
 
+  vue-tsc@3.3.6(typescript@5.9.3):
+    dependencies:
+      '@volar/typescript': 2.4.28
+      '@vue/language-core': 3.3.6
+      typescript: 5.9.3
+
   vue@3.5.31(typescript@5.9.3):
     dependencies:
       '@vue/compiler-dom': 3.5.31

From 3e0e8d38838f3d36aca0dee867b59e0a87ab1b7e Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Fri, 3 Jul 2026 16:22:58 +0800
Subject: [PATCH 7/7] Fixed remaining type issues

---
 src/env.d.ts                                        | 13 +++++++++++++
 .../utils/utils.getDeprecatedPackageMap.ts.spec.ts  |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/env.d.ts b/src/env.d.ts
index 38d3bb67a..a69be8a4a 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -19,6 +19,19 @@ declare namespace NodeJS {
 }
 
 declare global {
+    interface ImportMetaEnv {
+        readonly MODE: string;
+        readonly BASE_URL: string;
+        readonly DEV: boolean;
+        readonly PROD: boolean;
+        readonly SSR: boolean;
+        readonly [key: string]: any;
+    }
+
+    interface ImportMeta {
+        readonly env: ImportMetaEnv;
+    }
+
     interface Window {
         zip: {
             extractAllTo: (zip: string | Buffer, outputFolder: string) => Promise<void>;
diff --git a/test/vitest/tests/utils/utils.getDeprecatedPackageMap.ts.spec.ts b/test/vitest/tests/utils/utils.getDeprecatedPackageMap.ts.spec.ts
index 99c9c2466..782c03e80 100644
--- a/test/vitest/tests/utils/utils.getDeprecatedPackageMap.ts.spec.ts
+++ b/test/vitest/tests/utils/utils.getDeprecatedPackageMap.ts.spec.ts
@@ -2,7 +2,7 @@ import ThunderstoreMod from "../../../../src/model/ThunderstoreMod";
 import ThunderstoreVersion from "../../../../src/model/ThunderstoreVersion";
 import { Deprecations } from "../../../../src/utils/Deprecations";
 import {describe, beforeEach, afterEach, test, expect, vi} from 'vitest';
-import { MockInstance } from '@vitest/spy';
+import type { MockInstance } from 'vitest';
 
 
 // TODO: The implementation is currently intentionally broken (see the