From 64c4a47889b915542e1f79835e17b935b4b2675d Mon Sep 17 00:00:00 2001
From: cade <ca469@kent.ac.uk>
Date: Sat, 11 Jul 2026 23:51:58 +0800
Subject: [PATCH 01/11] Re-implemented several settings options

---
 .../v2/SettingsSection.vue                    |  13 +++
 .../settings-components/v2/SettingsView.vue   | 102 ++++++++++++++++++
 .../v2/SettingsViewWrapper.vue                |  61 +++++++++++
 .../v2/entries/DataDirectory.vue              |  54 ++++++++++
 .../v2/entries/ExpandCards.vue                |  49 +++++++++
 .../v2/entries/ExportProfile.vue              |  62 +++++++++++
 .../v2/entries/FunkyMode.vue                  |  45 ++++++++
 .../v2/entries/GameDirectory.vue              |  85 +++++++++++++++
 .../v2/entries/RefreshOnlineModList.vue       |  52 +++++++++
 .../settings-components/v2/entries/Theme.vue  |  44 ++++++++
 .../loaders/bind_impls/BindLoaderImpl.ts      |   2 +-
 src/router/routes.ts                          |   2 +-
 12 files changed, 569 insertions(+), 2 deletions(-)
 create mode 100644 src/components/settings-components/v2/SettingsSection.vue
 create mode 100644 src/components/settings-components/v2/SettingsView.vue
 create mode 100644 src/components/settings-components/v2/SettingsViewWrapper.vue
 create mode 100644 src/components/settings-components/v2/entries/DataDirectory.vue
 create mode 100644 src/components/settings-components/v2/entries/ExpandCards.vue
 create mode 100644 src/components/settings-components/v2/entries/ExportProfile.vue
 create mode 100644 src/components/settings-components/v2/entries/FunkyMode.vue
 create mode 100644 src/components/settings-components/v2/entries/GameDirectory.vue
 create mode 100644 src/components/settings-components/v2/entries/RefreshOnlineModList.vue
 create mode 100644 src/components/settings-components/v2/entries/Theme.vue

diff --git a/src/components/settings-components/v2/SettingsSection.vue b/src/components/settings-components/v2/SettingsSection.vue
new file mode 100644
index 000000000..147b509e2
--- /dev/null
+++ b/src/components/settings-components/v2/SettingsSection.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { provide, toRef } from 'vue';
+
+const props = defineProps<{ name: string }>();
+
+provide('settingsCategory', toRef(props, 'name'));
+</script>
+
+<template>
+    <section>
+        <slot></slot>
+    </section>
+</template>
diff --git a/src/components/settings-components/v2/SettingsView.vue b/src/components/settings-components/v2/SettingsView.vue
new file mode 100644
index 000000000..9653d8305
--- /dev/null
+++ b/src/components/settings-components/v2/SettingsView.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import VersionNumber from '../../../model/VersionNumber';
+import ManagerInformation from '../../../_managerinf/ManagerInformation';
+import { Hero } from '../../all';
+import SettingsSection from './SettingsSection.vue';
+import GameDirectory from './entries/GameDirectory.vue';
+import DataDirectory from './entries/DataDirectory.vue';
+import ExportProfile from './entries/ExportProfile.vue';
+import Theme from './entries/Theme.vue';
+import ExpandCards from './entries/ExpandCards.vue';
+import FunkyMode from './entries/FunkyMode.vue';
+import RefreshOnlineModList from './entries/RefreshOnlineModList.vue';
+
+const managerVersionNumber = ref<VersionNumber>(ManagerInformation.VERSION);
+const appName = computed(() => ManagerInformation.APP_NAME);
+
+const categories = ['All', 'Directories', 'Profile', 'Debugging', 'Modpacks', 'Other'] as const;
+type Category = typeof categories[number];
+
+const activeCategory = ref<Category>('All');
+
+function isVisible(section: Category): boolean {
+    return activeCategory.value === 'All' || activeCategory.value === section;
+}
+</script>
+
+<template>
+    <div id="settings-view">
+        <Hero
+            title="Settings"
+            :subtitle="`Advanced options for ${appName}: ${managerVersionNumber.toString()}`"
+            heroType="primary"
+        />
+        <div class="settings-shell">
+            <aside class="menu settings-nav">
+                <p class="menu-label">Sections</p>
+                <ul class="menu-list">
+                    <li v-for="category in categories" :key="category">
+                        <a
+                            :class="{ 'is-active': activeCategory === category }"
+                            @click="activeCategory = category"
+                        >
+                            {{ category }}
+                        </a>
+                    </li>
+                </ul>
+            </aside>
+
+            <div class="settings-list">
+                <SettingsSection v-if="isVisible('Directories')" name="Directories">
+                    <GameDirectory />
+                    <DataDirectory />
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Profile')" name="Profile">
+                    <ExportProfile />
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Other')" name="Other">
+                    <Theme />
+                    <ExpandCards />
+                    <FunkyMode />
+                    <RefreshOnlineModList />
+                </SettingsSection>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+#settings-view {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+.settings-shell {
+    display: flex;
+    align-items: flex-start;
+    flex: 1 0 auto;
+}
+
+.settings-nav {
+    flex: 0 0 200px;
+    padding: 1.25rem 1rem;
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+    max-height: 100vh;
+    overflow-y: auto;
+}
+
+.settings-list {
+    flex: 1;
+    min-width: 0;
+    padding: 1rem 1.25rem 1rem;
+}
+</style>
diff --git a/src/components/settings-components/v2/SettingsViewWrapper.vue b/src/components/settings-components/v2/SettingsViewWrapper.vue
new file mode 100644
index 000000000..9add0ee9a
--- /dev/null
+++ b/src/components/settings-components/v2/SettingsViewWrapper.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { inject, ref, type Ref } from 'vue';
+
+const category = inject<Ref<string>>('settingsCategory', ref(''));
+</script>
+
+<template>
+    <div class="settings-entry">
+        <p v-if="category" class="settings-entry__caption">{{ category }}</p>
+        <p class="settings-entry__title">
+            <slot name="title"></slot>
+        </p>
+        <p v-if="$slots.description" class="settings-entry__description">
+            <slot name="description"></slot>
+        </p>
+        <div class="settings-entry__control">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.settings-entry {
+    display: flex;
+    flex-direction: column;
+    padding: 1.1rem 0;
+    border-bottom: 1px solid var(--border, #e1e1e1);
+
+    &__caption {
+        font-size: 0.7rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--text-secondary, #6b6464);
+        margin-bottom: 0.2rem;
+    }
+
+    &__title {
+        font-size: 0.95rem;
+        font-weight: 600;
+        color: var(--text-strong, #363636);
+        margin-bottom: 0.35rem;
+        line-height: 1.35;
+    }
+
+    &__description {
+        font-size: 0.9rem;
+        color: var(--text-secondary, #6b6464);
+        line-height: 1.45;
+        margin-bottom: 0.6rem;
+        max-width: 46rem;
+    }
+
+    &__control {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+}
+</style>
diff --git a/src/components/settings-components/v2/entries/DataDirectory.vue b/src/components/settings-components/v2/entries/DataDirectory.vue
new file mode 100644
index 000000000..e7e8af0e2
--- /dev/null
+++ b/src/components/settings-components/v2/entries/DataDirectory.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import PathResolver from '../../../../r2mm/manager/PathResolver';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+
+const dataDirectory = ref<string>(PathResolver.ROOT || 'Not set');
+
+function selectDirectory() {
+    console.log("Should select");
+}
+</script>
+
+<template>
+    <SettingsViewWrapper>
+        <template #title>Data folder</template>
+        <template #description>
+            The folder where mods are stored for all games and profiles.
+            The folder will not be deleted, and existing profiles will not carry across.
+        </template>
+        <div class="data-directory-setting">
+            <div class="data-directory-setting__field">
+                <input
+                    class="input data-directory-setting__input"
+                    type="text"
+                    :value="dataDirectory"
+                    readonly
+                />
+                <button class="button" @click="selectDirectory">Change</button>
+                <button class="button" @click="selectDirectory">Browse</button>
+            </div>
+        </div>
+    </SettingsViewWrapper>
+</template>
+
+<style lang="scss" scoped>
+.data-directory-setting {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    flex: 1;
+
+    &__field {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    &__input {
+        flex: 1;
+        min-width: 14rem;
+        max-width: 30rem;
+    }
+}
+</style>
diff --git a/src/components/settings-components/v2/entries/ExpandCards.vue b/src/components/settings-components/v2/entries/ExpandCards.vue
new file mode 100644
index 000000000..89fc4b248
--- /dev/null
+++ b/src/components/settings-components/v2/entries/ExpandCards.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+
+const store = getStore<State>();
+const settings = ref<ManagerSettings | null>(null);
+const expandedCards = ref<boolean>(false);
+
+onMounted(async () => {
+    settings.value = await ManagerSettings.getSingleton(store.state.activeGame);
+    expandedCards.value = settings.value.getContext().global.expandedCards;
+});
+
+async function setExpanded(expanded: boolean) {
+    expandedCards.value = expanded;
+    if (expanded) {
+        await settings.value?.expandCards();
+    } else {
+        await settings.value?.collapseCards();
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper>
+        <template #title>Expand cards by default</template>
+        <template #description>
+            Show mod cards fully expanded rather than collapsed when opening a mod list.
+        </template>
+        <div class="field" @click.prevent.stop="setExpanded(!expandedCards)">
+            <input
+                id="switch-expand-cards"
+                type="checkbox"
+                :class="['switch', { 'is-info': expandedCards }]"
+                :checked="expandedCards"
+            />
+            <label for="switch-expand-cards">{{ expandedCards ? 'Expanded' : 'Collapsed' }}</label>
+        </div>
+    </SettingsViewWrapper>
+</template>
+
+<style scoped lang="scss">
+.switch {
+    position: relative;
+}
+</style>
diff --git a/src/components/settings-components/v2/entries/ExportProfile.vue b/src/components/settings-components/v2/entries/ExportProfile.vue
new file mode 100644
index 000000000..dfda1a0c9
--- /dev/null
+++ b/src/components/settings-components/v2/entries/ExportProfile.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import R2Error from '../../../../model/errors/R2Error';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+
+const store = getStore<State>();
+
+const activeExport = ref<'file' | 'code' | null>(null);
+const isExporting = computed(() => activeExport.value !== null);
+
+async function exportProfile(as: 'file' | 'code', action: string) {
+    if (isExporting.value) {
+        return;
+    }
+    activeExport.value = as;
+    try {
+        await store.dispatch(action);
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e));
+    } finally {
+        activeExport.value = null;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper>
+        <template #title>Export profile</template>
+        <template #description>
+            Export your mod list and configs to share with friends and get an identical profile quickly and easily.
+        </template>
+        <div class="export-profile-setting">
+            <button
+                class="button"
+                :class="{ 'is-loading': activeExport === 'file' }"
+                :disabled="isExporting"
+                @click="exportProfile('file', 'profileExport/exportProfileAsFile')"
+            >
+                As a file
+            </button>
+            <button
+                class="button"
+                :class="{ 'is-loading': activeExport === 'code' }"
+                :disabled="isExporting"
+                @click="exportProfile('code', 'profileExport/exportProfileAsCode')"
+            >
+                As a code
+            </button>
+        </div>
+    </SettingsViewWrapper>
+</template>
+
+<style lang="scss" scoped>
+.export-profile-setting {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+</style>
diff --git a/src/components/settings-components/v2/entries/FunkyMode.vue b/src/components/settings-components/v2/entries/FunkyMode.vue
new file mode 100644
index 000000000..7578bf634
--- /dev/null
+++ b/src/components/settings-components/v2/entries/FunkyMode.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+
+const store = getStore<State>();
+const settings = ref<ManagerSettings | null>(null);
+const funkyModeEnabled = ref<boolean>(false);
+
+onMounted(async () => {
+    settings.value = await ManagerSettings.getSingleton(store.state.activeGame);
+    funkyModeEnabled.value = settings.value.getContext().global.funkyModeEnabled;
+});
+
+async function setFunkyMode(enabled: boolean) {
+    funkyModeEnabled.value = enabled;
+    await settings.value?.setFunkyMode(enabled);
+}
+</script>
+
+<template>
+    <SettingsViewWrapper>
+        <template #title>Enable funky mode</template>
+        <template #description>
+            Adds a more colourful, playful flair to the manager. Purely cosmetic.
+        </template>
+        <div class="field" @click.prevent.stop="setFunkyMode(!funkyModeEnabled)">
+            <input
+                id="switch-funky-mode"
+                type="checkbox"
+                :class="['switch', { 'is-info': funkyModeEnabled }]"
+                :checked="funkyModeEnabled"
+            />
+            <label for="switch-funky-mode">{{ funkyModeEnabled ? 'Enabled' : 'Disabled' }}</label>
+        </div>
+    </SettingsViewWrapper>
+</template>
+
+<style scoped lang="scss">
+.switch {
+    position: relative;
+}
+</style>
diff --git a/src/components/settings-components/v2/entries/GameDirectory.vue b/src/components/settings-components/v2/entries/GameDirectory.vue
new file mode 100644
index 000000000..c1617b6a9
--- /dev/null
+++ b/src/components/settings-components/v2/entries/GameDirectory.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import Game from '../../../../model/game/Game';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import { computed, onMounted, ref, watch } from 'vue';
+import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { StorePlatform } from 'src/model/platform/StorePlatform';
+
+const store = getStore<State>();
+
+const activeGame = computed<Game>(() => store.state.activeGame);
+const settings = ref<ManagerSettings | null>(null);
+
+const gameDirectory = computed<string>(() =>
+    settings.value?.getContext().gameSpecific.gameDirectory || 'Not set'
+);
+
+onMounted(async () => {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+});
+
+watch(activeGame, async () => {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+});
+
+function selectDirectory() {
+    console.log("Should select");
+}
+
+function autoDiscoverDirectory() {
+    console.log("Should auto-discover from running processes");
+}
+</script>
+
+<template>
+    <SettingsViewWrapper>
+        <template #title>{{ activeGame.displayName }} folder</template>
+        <template #description>
+            The game directory is required to place the appropriate files correctly.
+            <span v-if="StorePlatform[activeGame.activePlatform.storePlatform] === StorePlatform.steam">
+                However <code class="code">{{ activeGame.displayName }}</code> will launch without mods if this is not set appropriately.
+            </span>
+        </template>
+        <div class="game-directory-setting">
+            <div class="game-directory-setting__field">
+                <input
+                    class="input game-directory-setting__input"
+                    type="text"
+                    :value="gameDirectory"
+                    readonly
+                />
+                <button class="button" @click="selectDirectory">Change</button>
+                <button class="button" @click="selectDirectory">Browse</button>
+            </div>
+            <a href="#" class="help-link" @click.prevent="autoDiscoverDirectory">I'm not sure what this should be</a>
+        </div>
+    </SettingsViewWrapper>
+</template>
+
+<style lang="scss" scoped>
+.game-directory-setting {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    flex: 1;
+
+    &__field {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    &__input {
+        flex: 1;
+        min-width: 14rem;
+        max-width: 30rem;
+    }
+}
+
+.help-link {
+    font-size: 0.9rem;
+    align-self: flex-start;
+}
+</style>
diff --git a/src/components/settings-components/v2/entries/RefreshOnlineModList.vue b/src/components/settings-components/v2/entries/RefreshOnlineModList.vue
new file mode 100644
index 000000000..05f23b89e
--- /dev/null
+++ b/src/components/settings-components/v2/entries/RefreshOnlineModList.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import moment from 'moment';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+
+const store = getStore<State>();
+
+const isRefreshing = computed<boolean>(() => store.state.tsMods.isThunderstoreModListUpdateInProgress);
+const hasActiveDownloads = computed<boolean>(() => store.getters['download/activeDownloadCount'] > 0);
+
+const status = computed<string>(() => {
+    if (isRefreshing.value) {
+        return store.state.tsMods.thunderstoreModListUpdateStatus || 'Refreshing...';
+    }
+    if (store.state.tsMods.thunderstoreModListUpdateError) {
+        return `Error refreshing the mod list: ${store.state.tsMods.thunderstoreModListUpdateError.message}`;
+    }
+    if (hasActiveDownloads.value) {
+        return 'Refreshing the mod list is disabled while there are active downloads.';
+    }
+    if (store.state.tsMods.modsLastUpdated !== undefined) {
+        return 'Cache date: ' + moment(store.state.tsMods.modsLastUpdated).format('MMMM Do YYYY, h:mm:ss a');
+    }
+    return 'No API information available';
+});
+
+async function refresh() {
+    if (isRefreshing.value || hasActiveDownloads.value) {
+        return;
+    }
+    await store.dispatch('tsMods/syncPackageList');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper>
+        <template #title>Refresh online mod list</template>
+        <template #description>
+            Check for any new mod releases. {{ status }}
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isRefreshing }"
+            :disabled="isRefreshing || hasActiveDownloads"
+            @click="refresh"
+        >
+            Refresh
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/Theme.vue b/src/components/settings-components/v2/entries/Theme.vue
new file mode 100644
index 000000000..a43184422
--- /dev/null
+++ b/src/components/settings-components/v2/entries/Theme.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
+import ThemeManager from '../../../../r2mm/manager/ThemeManager';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+
+const store = getStore<State>();
+const settings = ref<ManagerSettings | null>(null);
+const theme = ref<'light' | 'dark'>('dark');
+
+onMounted(async () => {
+    settings.value = await ManagerSettings.getSingleton(store.state.activeGame);
+    theme.value = settings.value.getContext().global.darkTheme ? 'dark' : 'light';
+});
+
+async function setTheme(value: 'light' | 'dark') {
+    theme.value = value;
+    const dark = value === 'dark';
+    if (settings.value && settings.value.getContext().global.darkTheme !== dark) {
+        await settings.value.toggleDarkTheme();
+    }
+    await ThemeManager.apply();
+    document.documentElement.classList.toggle('html--dark', dark);
+}
+</script>
+
+<template>
+    <SettingsViewWrapper>
+        <template #title>Theme</template>
+        <template #description>
+            Choose between a light or dark appearance for the manager.
+        </template>
+        <select
+            class="select"
+            :value="theme"
+            @change="setTheme(($event.target as HTMLSelectElement).value as 'light' | 'dark')"
+        >
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+        </select>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/providers/components/loaders/bind_impls/BindLoaderImpl.ts b/src/providers/components/loaders/bind_impls/BindLoaderImpl.ts
index cbefc87b0..c019fc9e5 100644
--- a/src/providers/components/loaders/bind_impls/BindLoaderImpl.ts
+++ b/src/providers/components/loaders/bind_impls/BindLoaderImpl.ts
@@ -5,7 +5,7 @@ import OnlineModListProvider from '../OnlineModListProvider';
 export default class BindLoaderImpl {
 
     static bind() {
-        SettingsViewProvider.provide(() => import("../../../../components/settings-components/SettingsView.vue"));
+        SettingsViewProvider.provide(() => import("../../../../components/settings-components/v2/SettingsView.vue"));
         LocalModListProvider.provide(() => import("../../../../components/views/LocalModList.vue"));
         OnlineModListProvider.provide(() => import("../../../../components/views/OnlineModListWithPanel.vue"));
     }
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 56a86a54b..ba39ec7e3 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -89,7 +89,7 @@ const routes: RouteRecordRaw[] = [
                         name: 'manager.settings',
                         path: 'settings/',
                         components: {
-                            subview: () => import('components/settings-components/SettingsView.vue')
+                            subview: () => import('components/settings-components/v2/SettingsView.vue')
                         },
                         meta: {title: () => profileTitle()}
                     }

From 23c85406814723babe816c25324b9c497cc18f97 Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Mon, 13 Jul 2026 18:52:38 +0800
Subject: [PATCH 02/11] Fully implemented currently ported settings and added
 improved search

- Searching can now be done via key terms
- Searches can also be by value for some entries
- Also added ModState.vue to replace Enable/disable all mods
---
 src/_managerinf/ManagerInformation.ts         |   1 +
 .../composables/SettingSearchComposable.ts    |  24 ++++
 .../modals/IncorrectGameDirectoryModal.vue    |  36 ++++++
 .../settings-components/v2/SettingsView.vue   |  35 +++--
 .../v2/entries/DataDirectory.vue              | 109 ++++++++++++++--
 .../v2/entries/ExpandCards.vue                |  15 ++-
 .../v2/entries/ExportProfile.vue              |  13 +-
 .../v2/entries/FunkyMode.vue                  |  14 +-
 .../v2/entries/GameDirectory.vue              | 121 ++++++++++++++++--
 .../v2/entries/ModState.vue                   |  98 ++++++++++++++
 .../v2/entries/RefreshOnlineModList.vue       |  12 +-
 .../settings-components/v2/entries/Theme.vue  |  14 +-
 src/pages/Manager.vue                         | 118 +----------------
 src/store/modules/ModalsModule.ts             |  10 ++
 src/utils/SearchUtils.ts                      |   8 +-
 15 files changed, 472 insertions(+), 156 deletions(-)
 create mode 100644 src/components/composables/SettingSearchComposable.ts
 create mode 100644 src/components/modals/IncorrectGameDirectoryModal.vue
 create mode 100644 src/components/settings-components/v2/entries/ModState.vue

diff --git a/src/_managerinf/ManagerInformation.ts b/src/_managerinf/ManagerInformation.ts
index 1fa431ef2..862df1ffb 100644
--- a/src/_managerinf/ManagerInformation.ts
+++ b/src/_managerinf/ManagerInformation.ts
@@ -4,4 +4,5 @@ export default class ManagerInformation {
     public static VERSION: VersionNumber = new VersionNumber('3.2.18');
     public static IS_PORTABLE: boolean = false;
     public static APP_NAME: string = "r2modman";
+    public static WIKI_GAME_DIRECTORY_HELP_URL = "https://github.com/ebkr/r2modmanPlus/wiki/Why-aren't-my-mods-working%3F#games-via-steam";
 }
diff --git a/src/components/composables/SettingSearchComposable.ts b/src/components/composables/SettingSearchComposable.ts
new file mode 100644
index 000000000..4c3f2ac1a
--- /dev/null
+++ b/src/components/composables/SettingSearchComposable.ts
@@ -0,0 +1,24 @@
+import { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue';
+
+import SearchUtils from '../../utils/SearchUtils';
+
+export type SettingSearchPhrases = MaybeRefOrGetter<(string | undefined | null)[]>;
+
+export function useSettingSearch(
+    searchTerm: MaybeRefOrGetter<string | undefined>,
+    keyPhrases: SettingSearchPhrases
+): { isVisible: ComputedRef<boolean> } {
+    const isVisible = computed<boolean>(() => {
+        const term = toValue(searchTerm);
+        if (!term) {
+            return true;
+        }
+        const keys = SearchUtils.makeKeys(term);
+        const haystack = toValue(keyPhrases)
+            .filter((phrase): phrase is string => Boolean(phrase))
+            .join(' ');
+        return SearchUtils.isSearched(keys, haystack);
+    });
+
+    return { isVisible };
+}
diff --git a/src/components/modals/IncorrectGameDirectoryModal.vue b/src/components/modals/IncorrectGameDirectoryModal.vue
new file mode 100644
index 000000000..3f67b826b
--- /dev/null
+++ b/src/components/modals/IncorrectGameDirectoryModal.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import ModalCard from '../../components/ModalCard.vue';
+import { computed } from 'vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+import Game from '../../model/game/Game';
+
+const store = getStore<State>();
+
+const activeGame = computed<Game>(() => store.state.activeGame);
+const isOpen = computed(() => store.state.modals.isIncorrectGameDirectoryModalOpen);
+
+function close() {
+    store.commit("closeIncorrectGameDirectoryModal");
+}
+</script>
+
+<template>
+    <ModalCard id="incorrect-game-directory-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Failed to set the {{ activeGame.displayName }} folder</h2>
+        </template>
+        <template v-slot:body>
+            <p>The selected executable must be any of the following:</p>
+            <ul class="list">
+                <li v-for="exe in activeGame.exeName"><strong>{{ exe }}</strong></li>
+            </ul>
+            <p class="margin-top">If this error has appeared but the executable is correct, please run as administrator.</p>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="close">
+                I understand
+            </button>
+        </template>
+    </ModalCard>
+</template>
diff --git a/src/components/settings-components/v2/SettingsView.vue b/src/components/settings-components/v2/SettingsView.vue
index 9653d8305..b57bb4f6a 100644
--- a/src/components/settings-components/v2/SettingsView.vue
+++ b/src/components/settings-components/v2/SettingsView.vue
@@ -11,11 +11,14 @@ import Theme from './entries/Theme.vue';
 import ExpandCards from './entries/ExpandCards.vue';
 import FunkyMode from './entries/FunkyMode.vue';
 import RefreshOnlineModList from './entries/RefreshOnlineModList.vue';
+import ModState from './entries/ModState.vue';
+
+const searchTerm = ref<string>('');
 
 const managerVersionNumber = ref<VersionNumber>(ManagerInformation.VERSION);
 const appName = computed(() => ManagerInformation.APP_NAME);
 
-const categories = ['All', 'Directories', 'Profile', 'Debugging', 'Modpacks', 'Other'] as const;
+const categories = ['All', 'Directories', 'Profile', 'Appearance', 'Other'] as const;
 type Category = typeof categories[number];
 
 const activeCategory = ref<Category>('All');
@@ -48,20 +51,36 @@ function isVisible(section: Category): boolean {
             </aside>
 
             <div class="settings-list">
+
+                <div class="sticky-top sticky-top--opaque sticky-top--no-shadow sticky-top--no-padding">
+                    <div class='border-at-bottom'>
+                        <div class='card is-shadowless is-square'>
+                            <div class='card-header-title'>
+                                <span class="non-selectable margin-right">Search:</span>
+                                <input v-model='searchTerm' class="input" type="text" placeholder="Search for a setting"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
                 <SettingsSection v-if="isVisible('Directories')" name="Directories">
-                    <GameDirectory />
-                    <DataDirectory />
+                    <DataDirectory :search-term="searchTerm"/>
+                        <GameDirectory :search-term="searchTerm"/>
                 </SettingsSection>
 
                 <SettingsSection v-if="isVisible('Profile')" name="Profile">
-                    <ExportProfile />
+                    <ExportProfile :search-term="searchTerm"/>
+                    <ModState :search-term="searchTerm"/>
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Appearance')" name="Appearance">
+                    <Theme :search-term="searchTerm"/>
+                    <ExpandCards :search-term="searchTerm"/>
+                    <FunkyMode :search-term="searchTerm"/>
                 </SettingsSection>
 
                 <SettingsSection v-if="isVisible('Other')" name="Other">
-                    <Theme />
-                    <ExpandCards />
-                    <FunkyMode />
-                    <RefreshOnlineModList />
+                    <RefreshOnlineModList :search-term="searchTerm"/>
                 </SettingsSection>
             </div>
         </div>
diff --git a/src/components/settings-components/v2/entries/DataDirectory.vue b/src/components/settings-components/v2/entries/DataDirectory.vue
index e7e8af0e2..a48ee5148 100644
--- a/src/components/settings-components/v2/entries/DataDirectory.vue
+++ b/src/components/settings-components/v2/entries/DataDirectory.vue
@@ -1,54 +1,135 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import PathResolver from '../../../../r2mm/manager/PathResolver';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import LinkProvider from '../../../../providers/components/LinkProvider';
+import { DataFolderProvider } from '../../../../providers/ror2/system/DataFolderProvider';
+import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import Game from '../../../../model/game/Game';
+import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
+import R2Error from '../../../../model/errors/R2Error';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
 
 const dataDirectory = ref<string>(PathResolver.ROOT || 'Not set');
+const activeGame = computed<Game>(() => store.state.activeGame);
+const settings = ref<ManagerSettings | null>(null);
+
+const profileDirectory = computed<string>(() =>
+    store.getters['profile/activeProfile']?.getProfilePath() || 'Not set'
+);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
+    'Data and profile directories',
+    dataDirectory.value,
+    profileDirectory.value,
+    'Change',
+    'Browse',
+]);
+
+onMounted(async () => {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+});
+
+watch(activeGame, async () => {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+});
+
+async function changeDataFolder() {
+    try {
+        const folder = await DataFolderProvider.instance.showSelectionDialog();
+
+        if (folder === null) {
+            return;
+        }
+
+        await DataFolderProvider.instance.throwForInvalidFolder(folder);
+        await DataFolderProvider.instance.writeOverrideFile(folder);
+        await settings.value!.setDataDirectory(folder);
+        InteractionProvider.instance.restartApp();
+    } catch(err) {
+        store.commit("error/handleError", R2Error.fromThrownValue(err));
+        return
+    }
+}
 
-function selectDirectory() {
-    console.log("Should select");
+function browseDataFolder() {
+    if (PathResolver.ROOT) {
+        LinkProvider.instance.openLink(PathResolver.ROOT);
+    }
+}
+
+function browseProfileFolder() {
+    const profilePath = store.getters['profile/activeProfile']?.getProfilePath();
+    if (profilePath) {
+        LinkProvider.instance.openLink(profilePath);
+    }
 }
 </script>
 
 <template>
-    <SettingsViewWrapper>
-        <template #title>Data folder</template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Data and profile directories</template>
         <template #description>
             The folder where mods are stored for all games and profiles.
             The folder will not be deleted, and existing profiles will not carry across.
         </template>
-        <div class="data-directory-setting">
-            <div class="data-directory-setting__field">
+        <div class="directory-settings">
+            <div class="directory-settings__row">
+                <label class="directory-settings__label">Data folder</label>
                 <input
-                    class="input data-directory-setting__input"
+                    class="input directory-settings__input"
                     type="text"
                     :value="dataDirectory"
                     readonly
                 />
-                <button class="button" @click="selectDirectory">Change</button>
-                <button class="button" @click="selectDirectory">Browse</button>
+                <button class="button" @click="changeDataFolder">Change</button>
+                <button class="button" @click="browseDataFolder">Browse</button>
+            </div>
+            <div class="directory-settings__row">
+                <label class="directory-settings__label">Profile folder</label>
+                <input
+                    class="input directory-settings__input"
+                    type="text"
+                    :value="profileDirectory"
+                    readonly
+                />
+                <button class="button" @click="browseProfileFolder">Browse</button>
             </div>
         </div>
     </SettingsViewWrapper>
 </template>
 
 <style lang="scss" scoped>
-.data-directory-setting {
+.directory-settings {
     display: flex;
     flex-direction: column;
-    gap: 0.4rem;
+    gap: 0.6rem;
     flex: 1;
 
-    &__field {
+    &__row {
         display: flex;
         align-items: center;
         gap: 0.5rem;
     }
 
+    &__label {
+        flex: 0 0 6.5rem;
+        font-size: 0.9rem;
+        color: var(--text-secondary, #6b6464);
+    }
+
     &__input {
         flex: 1;
         min-width: 14rem;
-        max-width: 30rem;
+        max-width: 35rem;
     }
 }
 </style>
diff --git a/src/components/settings-components/v2/entries/ExpandCards.vue b/src/components/settings-components/v2/entries/ExpandCards.vue
index 89fc4b248..1912e71ca 100644
--- a/src/components/settings-components/v2/entries/ExpandCards.vue
+++ b/src/components/settings-components/v2/entries/ExpandCards.vue
@@ -4,11 +4,24 @@ import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
 
 const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
 const settings = ref<ManagerSettings | null>(null);
 const expandedCards = ref<boolean>(false);
 
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Expand cards by default',
+    'Toggle',
+    'Collapsed',
+    'Expanded',
+]);
+
 onMounted(async () => {
     settings.value = await ManagerSettings.getSingleton(store.state.activeGame);
     expandedCards.value = settings.value.getContext().global.expandedCards;
@@ -25,7 +38,7 @@ async function setExpanded(expanded: boolean) {
 </script>
 
 <template>
-    <SettingsViewWrapper>
+    <SettingsViewWrapper v-show="isVisible">
         <template #title>Expand cards by default</template>
         <template #description>
             Show mod cards fully expanded rather than collapsed when opening a mod list.
diff --git a/src/components/settings-components/v2/entries/ExportProfile.vue b/src/components/settings-components/v2/entries/ExportProfile.vue
index dfda1a0c9..a9eda12a4 100644
--- a/src/components/settings-components/v2/entries/ExportProfile.vue
+++ b/src/components/settings-components/v2/entries/ExportProfile.vue
@@ -4,12 +4,23 @@ import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import R2Error from '../../../../model/errors/R2Error';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
 const activeExport = ref<'file' | 'code' | null>(null);
 const isExporting = computed(() => activeExport.value !== null);
 
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Export profile',
+    'As file',
+    'As code',
+]);
+
 async function exportProfile(as: 'file' | 'code', action: string) {
     if (isExporting.value) {
         return;
@@ -26,7 +37,7 @@ async function exportProfile(as: 'file' | 'code', action: string) {
 </script>
 
 <template>
-    <SettingsViewWrapper>
+    <SettingsViewWrapper v-show="isVisible">
         <template #title>Export profile</template>
         <template #description>
             Export your mod list and configs to share with friends and get an identical profile quickly and easily.
diff --git a/src/components/settings-components/v2/entries/FunkyMode.vue b/src/components/settings-components/v2/entries/FunkyMode.vue
index 7578bf634..e5648e25a 100644
--- a/src/components/settings-components/v2/entries/FunkyMode.vue
+++ b/src/components/settings-components/v2/entries/FunkyMode.vue
@@ -4,11 +4,21 @@ import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
 
 const store = getStore<State>();
 const settings = ref<ManagerSettings | null>(null);
 const funkyModeEnabled = ref<boolean>(false);
 
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Enable funky mode',
+    'Toggle',
+]);
+
 onMounted(async () => {
     settings.value = await ManagerSettings.getSingleton(store.state.activeGame);
     funkyModeEnabled.value = settings.value.getContext().global.funkyModeEnabled;
@@ -21,10 +31,10 @@ async function setFunkyMode(enabled: boolean) {
 </script>
 
 <template>
-    <SettingsViewWrapper>
+    <SettingsViewWrapper v-show="isVisible">
         <template #title>Enable funky mode</template>
         <template #description>
-            Adds a more colourful, playful flair to the manager. Purely cosmetic.
+        It's funky mode.
         </template>
         <div class="field" @click.prevent.stop="setFunkyMode(!funkyModeEnabled)">
             <input
diff --git a/src/components/settings-components/v2/entries/GameDirectory.vue b/src/components/settings-components/v2/entries/GameDirectory.vue
index c1617b6a9..db81e66fb 100644
--- a/src/components/settings-components/v2/entries/GameDirectory.vue
+++ b/src/components/settings-components/v2/entries/GameDirectory.vue
@@ -5,10 +5,22 @@ import { State } from '../../../../store';
 import { computed, onMounted, ref, watch } from 'vue';
 import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { StorePlatform } from 'src/model/platform/StorePlatform';
+import { StorePlatform } from '../../../../model/platform/StorePlatform';
+import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
+import path from '../../../../providers/node/path/path';
+import FsProvider from '../../../../providers/generic/file/FsProvider';
+import LinkProvider from '../../../../providers/components/LinkProvider';
+import AppWindow from '../../../../providers/node/app/app_window';
+import os from '../../../../providers/node/os/os';
+import R2Error from '../../../../model/errors/R2Error';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
 const activeGame = computed<Game>(() => store.state.activeGame);
 const settings = ref<ManagerSettings | null>(null);
 
@@ -16,6 +28,13 @@ const gameDirectory = computed<string>(() =>
     settings.value?.getContext().gameSpecific.gameDirectory || 'Not set'
 );
 
+const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
+    `${activeGame.value.displayName} folder`,
+    gameDirectory.value,
+    'Change',
+    'Browse',
+]);
+
 onMounted(async () => {
     settings.value = await ManagerSettings.getSingleton(activeGame.value);
 });
@@ -24,17 +43,99 @@ watch(activeGame, async () => {
     settings.value = await ManagerSettings.getSingleton(activeGame.value);
 });
 
-function selectDirectory() {
-    console.log("Should select");
+function changeGameInstallDirectory() {
+    if (StorePlatform[activeGame.value!.activePlatform.storePlatform] === StorePlatform['xbox-game-pass']) {
+        changeGameInstallDirectoryGamePass();
+    } else {
+        changeGameInstallDirectoryGeneral();
+    }
+}
+
+function changeGameInstallDirectoryGeneral() {
+    const ror2Directory: string = settings.value!.getContext().gameSpecific.gameDirectory || computeDefaultInstallDirectory();
+    InteractionProvider.instance.selectFile({
+        title: `Locate ${activeGame.value.displayName} Executable`,
+        // Lazy reduce. Assume Linux name and Windows name are identical besides extension.
+        // Should fix if needed, although unlikely.
+        filters: (activeGame.value.exeName.map(value => {
+            const nameSplit = value.split(".");
+            return [{
+                name: nameSplit[0],
+                extensions: [nameSplit[1]]
+            }] as any
+        }).reduce((previousValue, currentValue) => {
+            previousValue[0].extensions = [...previousValue[0].extensions, ...currentValue[0].extensions];
+            return previousValue;
+        })),
+        defaultPath: ror2Directory,
+        buttonLabel: 'Select Executable'
+    }).then(async files => {
+        if (files.length === 1) {
+            try {
+                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])));
+                } else {
+                    store.commit('openIncorrectGameDirectoryModal');
+                }
+            } catch (e) {
+                const err = R2Error.fromThrownValue(e, 'Failed to change the game folder');
+                store.commit('error/handleError', err);
+            }
+        }
+    });
 }
 
-function autoDiscoverDirectory() {
-    console.log("Should auto-discover from running processes");
+function changeGameInstallDirectoryGamePass() {
+    const ror2Directory: string = settings.value!.getContext().gameSpecific.gameDirectory || computeDefaultInstallDirectory();
+    InteractionProvider.instance.selectFile({
+        title: `Locate gamelaunchhelper Executable`,
+        filters: [{ name: "gamelaunchhelper", extensions: ["exe"] }],
+        defaultPath: ror2Directory,
+        buttonLabel: 'Select Executable'
+    }).then(async files => {
+        if (files.length === 1) {
+            try {
+                const containsGameExecutable = (path.basename(files[0]!).toLowerCase() === "gamelaunchhelper.exe");
+                if (containsGameExecutable) {
+                    await settings.value!.setGameDirectory(path.dirname(await FsProvider.instance.realpath(files[0]!)));
+                } else {
+                    throw new Error("The selected executable is not gamelaunchhelper.exe");
+                }
+            } catch (e) {
+                const err = R2Error.fromThrownValue(e, 'Failed to change the game folder');
+                store.commit('error/handleError', err);
+            }
+        }
+    });
+}
+
+function computeDefaultInstallDirectory(): string {
+    switch(AppWindow.getPlatform()){
+        case 'win32':
+            return path.resolve(
+                process.env['ProgramFiles(x86)'] || process.env.PROGRAMFILES || 'C:\\Program Files (x86)',
+                'Steam', 'steamapps', 'common', activeGame.value.steamFolderName
+            );
+        case 'linux':
+            return path.resolve(os.homedir(), '.local', 'share', 'Steam', 'steamapps', 'common', activeGame.value.steamFolderName);
+        case 'darwin':
+            return path.resolve(os.homedir(), 'Library', 'Application Support', 'Steam',
+                'steamapps', 'common', activeGame.value.steamFolderName);
+        default:
+            return '';
+    }
+}
+
+function browseDirectory() {
+    if (settings.value?.getContext().gameSpecific.gameDirectory) {
+        LinkProvider.instance.openLink(settings.value?.getContext().gameSpecific.gameDirectory!)
+    }
 }
 </script>
 
 <template>
-    <SettingsViewWrapper>
+    <SettingsViewWrapper v-show="isVisible">
         <template #title>{{ activeGame.displayName }} folder</template>
         <template #description>
             The game directory is required to place the appropriate files correctly.
@@ -50,10 +151,10 @@ function autoDiscoverDirectory() {
                     :value="gameDirectory"
                     readonly
                 />
-                <button class="button" @click="selectDirectory">Change</button>
-                <button class="button" @click="selectDirectory">Browse</button>
+                <button class="button" @click="changeGameInstallDirectory">Change</button>
+                <button class="button" @click="browseDirectory">Browse</button>
             </div>
-            <a href="#" class="help-link" @click.prevent="autoDiscoverDirectory">I'm not sure what this should be</a>
+            <a href="#" class="help-link">I'm not sure what this should be</a>
         </div>
     </SettingsViewWrapper>
 </template>
@@ -74,7 +175,7 @@ function autoDiscoverDirectory() {
     &__input {
         flex: 1;
         min-width: 14rem;
-        max-width: 30rem;
+        max-width: 35rem;
     }
 }
 
diff --git a/src/components/settings-components/v2/entries/ModState.vue b/src/components/settings-components/v2/entries/ModState.vue
new file mode 100644
index 000000000..271b7286c
--- /dev/null
+++ b/src/components/settings-components/v2/entries/ModState.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import R2Error from '../../../../model/errors/R2Error';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../../../components/composables/SettingSearchComposable';
+import { useRouter } from 'vue-router';
+import ManifestV2 from 'src/model/ManifestV2';
+
+const store = getStore<State>();
+const router = useRouter();
+const isEnablingState = ref<boolean>(false);
+const isDisablingState = ref<boolean>(false);
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const localModList = computed<ManifestV2[]>(() => store.state.profile.modList);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Change mod state',
+    'Toggle',
+    'Enable all mods',
+    'Disable all mods',
+]);
+
+const numberEnabled = computed<number>(() => localModList.value.filter(mod => mod.isEnabled()).length);
+const numberDisabled = computed<number>(() => localModList.value.length - numberEnabled.value);
+
+async function enableAllMods() {
+    isEnablingState.value = true;
+    await store.dispatch(
+        "profile/enableModsOnActiveProfile",
+        {mods: localModList.value}
+    );
+    isEnablingState.value = false;
+    await router.push({name: "manager.installed"});
+}
+
+async function disableAllMods() {
+    isDisablingState.value = true;
+    await store.dispatch(
+        "profile/disableModsFromActiveProfile",
+        {mods: localModList.value}
+    );
+    isDisablingState.value = false;
+    await router.push({name: "manager.installed"});
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Change mod state</template>
+        <template #description>
+        <p>Enable / disable all of the mods on your profile</p>
+        <p>
+            <template v-if="numberEnabled === localModList.length">
+                All of your mods are currently enabled.
+            </template>
+            <template v-else-if="numberDisabled === localModList.length">
+                All of your mods are currently disabled.
+            </template>
+            <template v-else>
+                You have {{ numberDisabled }} mod<template v-if="numberDisabled > 1">s</template> disabled.
+            </template>
+        </p>
+        </template>
+        <div class="export-profile-setting">
+            <button
+                class="button"
+                :class="{ 'is-loading': isEnablingState }"
+                :disabled="isEnablingState || isDisablingState"
+                @click="enableAllMods"
+            >
+                Enable all mods
+            </button>
+            <button
+                class="button"
+                :class="{ 'is-loading': isDisablingState }"
+                :disabled="isEnablingState || isDisablingState"
+                @click="disableAllMods"
+            >
+                Disable all mods
+            </button>
+        </div>
+    </SettingsViewWrapper>
+</template>
+
+<style lang="scss" scoped>
+.export-profile-setting {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+</style>
diff --git a/src/components/settings-components/v2/entries/RefreshOnlineModList.vue b/src/components/settings-components/v2/entries/RefreshOnlineModList.vue
index 05f23b89e..74be37f05 100644
--- a/src/components/settings-components/v2/entries/RefreshOnlineModList.vue
+++ b/src/components/settings-components/v2/entries/RefreshOnlineModList.vue
@@ -4,9 +4,19 @@ import moment from 'moment';
 import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Refresh online mod list',
+    'Check for new mod releases',
+]);
+
 const isRefreshing = computed<boolean>(() => store.state.tsMods.isThunderstoreModListUpdateInProgress);
 const hasActiveDownloads = computed<boolean>(() => store.getters['download/activeDownloadCount'] > 0);
 
@@ -35,7 +45,7 @@ async function refresh() {
 </script>
 
 <template>
-    <SettingsViewWrapper>
+    <SettingsViewWrapper v-show="isVisible">
         <template #title>Refresh online mod list</template>
         <template #description>
             Check for any new mod releases. {{ status }}
diff --git a/src/components/settings-components/v2/entries/Theme.vue b/src/components/settings-components/v2/entries/Theme.vue
index a43184422..43f2612ca 100644
--- a/src/components/settings-components/v2/entries/Theme.vue
+++ b/src/components/settings-components/v2/entries/Theme.vue
@@ -5,11 +5,23 @@ import { State } from '../../../../store';
 import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
 import ThemeManager from '../../../../r2mm/manager/ThemeManager';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
 
 const store = getStore<State>();
 const settings = ref<ManagerSettings | null>(null);
 const theme = ref<'light' | 'dark'>('dark');
 
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Theme',
+    'Light',
+    'Dark',
+    'Appearance',
+]);
+
 onMounted(async () => {
     settings.value = await ManagerSettings.getSingleton(store.state.activeGame);
     theme.value = settings.value.getContext().global.darkTheme ? 'dark' : 'light';
@@ -27,7 +39,7 @@ async function setTheme(value: 'light' | 'dark') {
 </script>
 
 <template>
-    <SettingsViewWrapper>
+    <SettingsViewWrapper v-show="isVisible">
         <template #title>Theme</template>
         <template #description>
             Choose between a light or dark appearance for the manager.
diff --git a/src/pages/Manager.vue b/src/pages/Manager.vue
index 6fa87189f..aaa6dc890 100644
--- a/src/pages/Manager.vue
+++ b/src/pages/Manager.vue
@@ -13,18 +13,6 @@
 			<button class="modal-close is-large" aria-label="close"
 			        @click="showSteamIncorrectDirectoryModal = false"></button>
 		</div>
-		<div id='ror2IncorrectDir' :class="['modal', {'is-active':(showRor2IncorrectDirectoryModal !== false)}]">
-			<div class="modal-background" @click="showRor2IncorrectDirectoryModal = false"></div>
-			<div class='modal-content'>
-				<div class='notification is-danger'>
-					<h3 class='title'>Failed to set the {{ activeGame.displayName }} folder</h3>
-					<p>The executable must be either of the following: "{{ activeGame.exeName.join('", "') }}".</p>
-					<p>If this error has appeared but the executable is correct, please run as administrator.</p>
-				</div>
-			</div>
-			<button class="modal-close is-large" aria-label="close"
-			        @click="showRor2IncorrectDirectoryModal = false"></button>
-		</div>
 		<ModalCard id="steam-installation-validation-modal" :is-active="isValidatingSteamInstallation" @close-modal="closeSteamInstallationValidationModal" :can-close="true">
 			<template v-slot:header>
 				<h2 class='modal-title'>Clearing the {{activeGame.displayName}} installation directory</h2>
@@ -113,6 +101,7 @@
 		</ModalCard>
 
         <CategoryFilterModal />
+        <IncorrectGameDirectoryModal />
         <SortModal />
         <LocalFileImportModal :visible="importingLocalMod" @close-modal="importingLocalMod = false" />
         <ProfileCodeExportModal />
@@ -144,6 +133,7 @@ import LocalFileImportModal from '../components/importing/LocalFileImportModal.v
 import { PackageLoader } from '../model/schema/ThunderstoreSchema';
 import GameInstructions from '../r2mm/launching/instructions/GameInstructions';
 import CategoryFilterModal from '../components/modals/CategoryFilterModal.vue';
+import IncorrectGameDirectoryModal from '../components/modals/IncorrectGameDirectoryModal.vue';
 import ModalCard from '../components/ModalCard.vue';
 import ProfileCodeExportModal from '../components/modals/ProfileCodeExportModal.vue';
 import SortModal from '../components/modals/SortModal.vue';
@@ -164,7 +154,6 @@ const router = useRouter();
 
 const isValidatingSteamInstallation = ref<boolean>(false);
 const showSteamIncorrectDirectoryModal = ref<boolean>(false);
-const showRor2IncorrectDirectoryModal = ref<boolean>(false);
 const launchParametersModel = ref<string>('');
 const showLaunchParameterModal = ref<boolean>(false);
 const showDependencyStrings = ref<boolean>(false);
@@ -194,82 +183,6 @@ async function validateSteamInstallation() {
     }
 }
 
-function computeDefaultInstallDirectory(): string {
-    switch(appWindow.getPlatform()){
-        case 'win32':
-            return path.resolve(
-                process.env['ProgramFiles(x86)'] || process.env.PROGRAMFILES || 'C:\\Program Files (x86)',
-                'Steam', 'steamapps', 'common', activeGame.value.steamFolderName
-            );
-        case 'linux':
-            return path.resolve(os.homedir(), '.local', 'share', 'Steam', 'steamapps', 'common', activeGame.value.steamFolderName);
-        case 'darwin':
-            return path.resolve(os.homedir(), 'Library', 'Application Support', 'Steam',
-                'steamapps', 'common', activeGame.value.steamFolderName);
-        default:
-            return '';
-    }
-}
-
-function changeGameInstallDirectory() {
-    const ror2Directory: string = settings.value.getContext().gameSpecific.gameDirectory || computeDefaultInstallDirectory();
-    InteractionProvider.instance.selectFile({
-        title: `Locate ${activeGame.value.displayName} Executable`,
-        // Lazy reduce. Assume Linux name and Windows name are identical besides extension.
-        // Should fix if needed, although unlikely.
-        filters: (activeGame.value.exeName.map(value => {
-            const nameSplit = value.split(".");
-            return [{
-                name: nameSplit[0],
-                extensions: [nameSplit[1]]
-            }]
-        }).reduce((previousValue, currentValue) => {
-            previousValue[0].extensions = [...previousValue[0].extensions, ...currentValue[0].extensions];
-            return previousValue;
-        })),
-        defaultPath: ror2Directory,
-        buttonLabel: 'Select Executable'
-    }).then(async files => {
-        if (files.length === 1) {
-            try {
-                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])));
-                } else {
-                    showRor2IncorrectDirectoryModal.value = true;
-                }
-            } catch (e) {
-                const err = R2Error.fromThrownValue(e, 'Failed to change the game folder');
-                store.commit('error/handleError', err);
-            }
-        }
-    });
-}
-
-function changeGameInstallDirectoryGamePass() {
-    const ror2Directory: string = settings.value.getContext().gameSpecific.gameDirectory || computeDefaultInstallDirectory();
-    InteractionProvider.instance.selectFile({
-        title: `Locate gamelaunchhelper Executable`,
-        filters: [{ name: "gamelaunchhelper", extensions: ["exe"] }],
-        defaultPath: ror2Directory,
-        buttonLabel: 'Select Executable'
-    }).then(async files => {
-        if (files.length === 1) {
-            try {
-                const containsGameExecutable = (path.basename(files[0]).toLowerCase() === "gamelaunchhelper.exe");
-                if (containsGameExecutable) {
-                    await settings.value.setGameDirectory(path.dirname(await FsProvider.instance.realpath(files[0])));
-                } else {
-                    throw new Error("The selected executable is not gamelaunchhelper.exe");
-                }
-            } catch (e) {
-                const err = R2Error.fromThrownValue(e, 'Failed to change the game folder');
-                store.commit('error/handleError', err);
-            }
-        }
-    });
-}
-
 function computeDefaultSteamDirectory(): string {
     switch(appWindow.getPlatform()){
         case 'win32':
@@ -413,24 +326,6 @@ async function copyTroubleshootingInfoToClipboard() {
     InteractionProvider.instance.copyToClipboard('```' + content + '```');
 }
 
-async function changeDataFolder() {
-    try {
-        const folder = await DataFolderProvider.instance.showSelectionDialog();
-
-        if (folder === null) {
-            return;
-        }
-
-        await DataFolderProvider.instance.throwForInvalidFolder(folder);
-        await DataFolderProvider.instance.writeOverrideFile(folder);
-        await settings.value.setDataDirectory(folder);
-        InteractionProvider.instance.restartApp();
-    } catch(err) {
-        store.commit("error/handleError", R2Error.fromThrownValue(err));
-        return
-    }
-}
-
 async function handleSettingsCallbacks(invokedSetting: any) {
     switch(invokedSetting) {
         case "BrowseDataFolder":
@@ -439,12 +334,6 @@ async function handleSettingsCallbacks(invokedSetting: any) {
         case "BrowseProfileFolder":
             browseProfileFolder();
             break;
-        case "ChangeGameDirectory":
-            changeGameInstallDirectory();
-            break;
-        case "ChangeGameDirectoryGamePass":
-            changeGameInstallDirectoryGamePass();
-            break;
         case "ChangeSteamDirectory":
             changeSteamDirectory();
             break;
@@ -499,9 +388,6 @@ async function handleSettingsCallbacks(invokedSetting: any) {
         case "ShowDependencyStrings":
             showDependencyStrings.value = true;
             break;
-        case "ChangeDataFolder":
-            await changeDataFolder();
-            break;
         case "CleanCache":
             CacheUtil.clean();
             break;
diff --git a/src/store/modules/ModalsModule.ts b/src/store/modules/ModalsModule.ts
index 5b7e6b5aa..775370fbd 100644
--- a/src/store/modules/ModalsModule.ts
+++ b/src/store/modules/ModalsModule.ts
@@ -21,6 +21,7 @@ interface State {
     uninstallModModalMod: ManifestV2 | null;
     isProfileCodeExportModalOpen: boolean;
     isLocalFileImportModalOpen: boolean;
+    isIncorrectGameDirectoryModalOpen: boolean;
 }
 
 export default {
@@ -44,6 +45,7 @@ export default {
         uninstallModModalMod: null,
         isProfileCodeExportModalOpen: false,
         isLocalFileImportModalOpen: false,
+        isIncorrectGameDirectoryModalOpen: false,
     }),
 
     mutations: {
@@ -111,6 +113,10 @@ export default {
             state.isLocalFileImportModalOpen = false;
         },
 
+        closeIncorrectGameDirectoryModal: function(state: State): void {
+            state.isIncorrectGameDirectoryModalOpen = false;
+        },
+
         openAssociatedModsModal: function(state: State, mod: ManifestV2): void {
             state.associatedModsModalMod = mod;
             state.isAssociatedModsModOpen = true;
@@ -174,5 +180,9 @@ export default {
         openLocalFileImportModal: function(state: State): void {
             state.isLocalFileImportModalOpen = true;
         },
+
+        openIncorrectGameDirectoryModal: function(state: State): void {
+            state.isIncorrectGameDirectoryModalOpen = true;
+        },
     }
 }
diff --git a/src/utils/SearchUtils.ts b/src/utils/SearchUtils.ts
index 41d483966..c47541048 100644
--- a/src/utils/SearchUtils.ts
+++ b/src/utils/SearchUtils.ts
@@ -3,9 +3,13 @@ export default class SearchUtils {
         return search.trim().toLowerCase().split(' ');
     }
 
-    public static isSearched(keys: string[], name: string, description: string) {
+    public static isSearched(keys: string[], name: string, description?: string) {
         name = name.toLowerCase();
-        description = description.toLowerCase();
+        if (description) {
+            description = description.toLowerCase();
+        } else {
+            description = '';
+        }
         return keys.every(i => name.indexOf(i) >= 0 || description.indexOf(i) >= 0);
     }
 }

From f055e93f0c5015ad4fe2a52914e7d80874ce5339 Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Mon, 13 Jul 2026 20:45:42 +0800
Subject: [PATCH 03/11] Added more settings

- Clean mod cache
- Clean online mod list cache
- Copy log
- Copy troubleshooting info
- Download to cache
- Import local mod
- Toggle CDN
- Update all mods
---
 .../settings-components/v2/SettingsView.vue   | 21 ++++-
 .../v2/entries/CleanModCache.vue              | 52 ++++++++++++
 .../v2/entries/CleanOnlineModListCache.vue    | 63 ++++++++++++++
 .../v2/entries/CopyLogToClipboard.vue         | 85 +++++++++++++++++++
 .../v2/entries/CopyTroubleshooting.vue        | 52 ++++++++++++
 .../v2/entries/DownloadCache.vue              | 49 +++++++++++
 .../v2/entries/ImportLocalMod.vue             | 32 +++++++
 .../v2/entries/ModState.vue                   | 22 ++---
 .../v2/entries/ToggleCdn.vue                  | 35 ++++++++
 .../v2/entries/UpdateAllMods.vue              | 43 ++++++++++
 10 files changed, 442 insertions(+), 12 deletions(-)
 create mode 100644 src/components/settings-components/v2/entries/CleanModCache.vue
 create mode 100644 src/components/settings-components/v2/entries/CleanOnlineModListCache.vue
 create mode 100644 src/components/settings-components/v2/entries/CopyLogToClipboard.vue
 create mode 100644 src/components/settings-components/v2/entries/CopyTroubleshooting.vue
 create mode 100644 src/components/settings-components/v2/entries/DownloadCache.vue
 create mode 100644 src/components/settings-components/v2/entries/ImportLocalMod.vue
 create mode 100644 src/components/settings-components/v2/entries/ToggleCdn.vue
 create mode 100644 src/components/settings-components/v2/entries/UpdateAllMods.vue

diff --git a/src/components/settings-components/v2/SettingsView.vue b/src/components/settings-components/v2/SettingsView.vue
index b57bb4f6a..d701a162d 100644
--- a/src/components/settings-components/v2/SettingsView.vue
+++ b/src/components/settings-components/v2/SettingsView.vue
@@ -12,13 +12,21 @@ import ExpandCards from './entries/ExpandCards.vue';
 import FunkyMode from './entries/FunkyMode.vue';
 import RefreshOnlineModList from './entries/RefreshOnlineModList.vue';
 import ModState from './entries/ModState.vue';
+import UpdateAllMods from './entries/UpdateAllMods.vue';
+import DownloadCache from './entries/DownloadCache.vue';
+import CopyLogToClipboard from './entries/CopyLogToClipboard.vue';
+import CopyTroubleshooting from './entries/CopyTroubleshooting.vue';
+import ImportLocalMod from './entries/ImportLocalMod.vue';
+import CleanModCache from './entries/CleanModCache.vue';
+import CleanOnlineModListCache from './entries/CleanOnlineModListCache.vue';
+import ToggleCdn from './entries/ToggleCdn.vue';
 
 const searchTerm = ref<string>('');
 
 const managerVersionNumber = ref<VersionNumber>(ManagerInformation.VERSION);
 const appName = computed(() => ManagerInformation.APP_NAME);
 
-const categories = ['All', 'Directories', 'Profile', 'Appearance', 'Other'] as const;
+const categories = ['All', 'Directories', 'Profile', 'Appearance', 'Debugging', 'Other'] as const;
 type Category = typeof categories[number];
 
 const activeCategory = ref<Category>('All');
@@ -71,6 +79,8 @@ function isVisible(section: Category): boolean {
                 <SettingsSection v-if="isVisible('Profile')" name="Profile">
                     <ExportProfile :search-term="searchTerm"/>
                     <ModState :search-term="searchTerm"/>
+                    <UpdateAllMods :search-term="searchTerm"/>
+                    <ImportLocalMod :search-term="searchTerm"/>
                 </SettingsSection>
 
                 <SettingsSection v-if="isVisible('Appearance')" name="Appearance">
@@ -79,6 +89,15 @@ function isVisible(section: Category): boolean {
                     <FunkyMode :search-term="searchTerm"/>
                 </SettingsSection>
 
+                <SettingsSection v-if="isVisible('Debugging')" name="Debugging">
+                    <CopyLogToClipboard :search-term="searchTerm"/>
+                    <CopyTroubleshooting :search-term="searchTerm"/>
+                    <DownloadCache :search-term="searchTerm"/>
+                    <CleanModCache :search-term="searchTerm"/>
+                    <CleanOnlineModListCache :search-term="searchTerm"/>
+                    <ToggleCdn :search-term="searchTerm"/>
+                </SettingsSection>
+
                 <SettingsSection v-if="isVisible('Other')" name="Other">
                     <RefreshOnlineModList :search-term="searchTerm"/>
                 </SettingsSection>
diff --git a/src/components/settings-components/v2/entries/CleanModCache.vue b/src/components/settings-components/v2/entries/CleanModCache.vue
new file mode 100644
index 000000000..93d54aa22
--- /dev/null
+++ b/src/components/settings-components/v2/entries/CleanModCache.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import CacheUtil from '../../../../r2mm/mods/CacheUtil';
+import R2Error from '../../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const isCleaning = ref<boolean>(false);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Clean mod cache',
+    'Free space',
+    'Clean',
+]);
+
+async function cleanCache() {
+    isCleaning.value = true;
+    try {
+        await CacheUtil.clean();
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to clean the mod cache'));
+    } finally {
+        isCleaning.value = false;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Clean mod cache</template>
+        <template #description>
+            Free extra space caused by cached mods that are not currently in a profile.
+            Checks all profiles for unused mods and clears the cache.
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isCleaning }"
+            :disabled="isCleaning"
+            @click="cleanCache"
+        >
+            Clean mod cache
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/CleanOnlineModListCache.vue b/src/components/settings-components/v2/entries/CleanOnlineModListCache.vue
new file mode 100644
index 000000000..f926151a5
--- /dev/null
+++ b/src/components/settings-components/v2/entries/CleanOnlineModListCache.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import R2Error from '../../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const isCleaning = ref<boolean>(false);
+const cacheStatus = ref<string>('');
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Clean online mod list cache',
+    'Reset mod list cache',
+    'Clean',
+]);
+
+async function refreshStatus() {
+    try {
+        cacheStatus.value = await store.dispatch('tsMods/getActiveGameCacheStatus');
+    } catch (e) {
+        cacheStatus.value = '';
+    }
+}
+
+onMounted(refreshStatus);
+
+async function cleanOnlineModList() {
+    isCleaning.value = true;
+    try {
+        await store.dispatch('tsMods/resetActiveGameCache');
+        await refreshStatus();
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to clean the online mod list'));
+    } finally {
+        isCleaning.value = false;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Clean online mod list cache</template>
+        <template #description>
+            Deletes the local copy of the mod list and retrieves a new one.
+            <template v-if="cacheStatus">{{ cacheStatus }}</template>
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isCleaning }"
+            :disabled="isCleaning"
+            @click="cleanOnlineModList"
+        >
+            Clean online mod list
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/CopyLogToClipboard.vue b/src/components/settings-components/v2/entries/CopyLogToClipboard.vue
new file mode 100644
index 000000000..ab19b3de9
--- /dev/null
+++ b/src/components/settings-components/v2/entries/CopyLogToClipboard.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import FsProvider from '../../../../providers/generic/file/FsProvider';
+import path from '../../../../providers/node/path/path';
+import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
+import { PackageLoader } from '../../../../model/schema/ThunderstoreSchema';
+import R2Error from '../../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const activeGame = computed(() => store.state.activeGame);
+const profile = computed(() => store.getters['profile/activeProfile']);
+const isCopying = ref<boolean>(false);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Copy log file contents to clipboard',
+    'LogOutput',
+    'LogOutput.txt',
+    'Discord',
+]);
+
+async function copyLogToClipboard() {
+    isCopying.value = true;
+    try {
+        const fs = FsProvider.instance;
+        let logOutputPath = "";
+        switch (activeGame.value.packageLoader) {
+            case PackageLoader.BEPINEX:
+            case PackageLoader.BEPISLOADER:
+                logOutputPath = path.join(profile.value.getProfilePath(), "BepInEx", "LogOutput.log");
+                break;
+            case PackageLoader.MELONLOADER:
+                logOutputPath = path.join(profile.value.getProfilePath(), "MelonLoader", "Latest.log");
+                break;
+            case PackageLoader.RETURN_OF_MODDING:
+                logOutputPath = path.join(profile.value.getProfilePath(), "ReturnOfModding", "LogOutput.log");
+                break;
+            case PackageLoader.GDWEAVE:
+                logOutputPath = path.join(profile.value.getProfilePath(), "GDWeave", "GDWeave.log");
+                break;
+            case PackageLoader.UMM:
+                logOutputPath = path.join(profile.value.getProfilePath(), "UMM", "Core", "Log.txt");
+                break;
+            case PackageLoader.RIVET:
+                logOutputPath = path.join(profile.value.getProfilePath(), "Rivet", "RivetLoader.log");
+                break;
+        }
+        const text = (await fs.readFile(logOutputPath)).toString();
+        if (text.length >= 1992) {
+            InteractionProvider.instance.copyToClipboard(text);
+        } else {
+            InteractionProvider.instance.copyToClipboard("```\n" + text + "\n```");
+        }
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to copy the log to the clipboard'));
+    } finally {
+        isCopying.value = false;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Copy log to clipboard</template>
+        <template #description>
+            Copy the contents of the log file to your clipboard, formatted for Discord.
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isCopying }"
+            :disabled="isCopying"
+            @click="copyLogToClipboard"
+        >
+            Copy log to clipboard
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/CopyTroubleshooting.vue b/src/components/settings-components/v2/entries/CopyTroubleshooting.vue
new file mode 100644
index 000000000..dac77d0d5
--- /dev/null
+++ b/src/components/settings-components/v2/entries/CopyTroubleshooting.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
+import R2Error from '../../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const isCopying = ref<boolean>(false);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Copy troubleshooting information to clipboard',
+    'Discord',
+    'support',
+]);
+
+async function copyTroubleshootingInfoToClipboard() {
+    isCopying.value = true;
+    try {
+        const content = await store.dispatch('profile/generateTroubleshootingString');
+        InteractionProvider.instance.copyToClipboard('```' + content + '```');
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to copy troubleshooting information'));
+    } finally {
+        isCopying.value = false;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Copy troubleshooting info to clipboard</template>
+        <template #description>
+            Copy settings and other information to your clipboard, formatted for Discord. Share this when requesting support.
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isCopying }"
+            :disabled="isCopying"
+            @click="copyTroubleshootingInfoToClipboard"
+        >
+            Copy troubleshooting info to clipboard
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/DownloadCache.vue b/src/components/settings-components/v2/entries/DownloadCache.vue
new file mode 100644
index 000000000..f63334d76
--- /dev/null
+++ b/src/components/settings-components/v2/entries/DownloadCache.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const cacheEnabled = computed<boolean>(() => !store.state.download.ignoreCache);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Toggle download cache',
+    'Download cache',
+    'Toggle',
+]);
+
+async function toggleCache() {
+    await store.dispatch('download/toggleIgnoreCache');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Download cache</template>
+        <template #description>
+            When enabled, downloads will be skipped if an existing copy is already cache.
+        </template>
+        <div class="field" @click.prevent.stop="toggleCache">
+            <input
+                id="toggle-download-cache"
+                type="checkbox"
+                :class="['switch', { 'is-info': cacheEnabled }]"
+                :checked="cacheEnabled"
+            />
+            <label for="toggle-download-cache">{{ cacheEnabled ? 'Enabled (recommended)' : 'Disabled' }}</label>
+        </div>
+    </SettingsViewWrapper>
+</template>
+
+<style scoped lang="scss">
+.switch {
+    position: relative;
+}
+</style>
diff --git a/src/components/settings-components/v2/entries/ImportLocalMod.vue b/src/components/settings-components/v2/entries/ImportLocalMod.vue
new file mode 100644
index 000000000..e2b7ee12a
--- /dev/null
+++ b/src/components/settings-components/v2/entries/ImportLocalMod.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Import local mod',
+    'Install offline',
+    'Import'
+]);
+
+function importLocalMod() {
+    store.commit('openLocalFileImportModal');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Import local mod</template>
+        <template #description>
+            Install a mod offline from your files. Not all mods can be installed locally.
+        </template>
+        <button class="button" @click="importLocalMod">Import local mod</button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/ModState.vue b/src/components/settings-components/v2/entries/ModState.vue
index 271b7286c..9f4c1cd2f 100644
--- a/src/components/settings-components/v2/entries/ModState.vue
+++ b/src/components/settings-components/v2/entries/ModState.vue
@@ -29,6 +29,16 @@ const { isVisible } = useSettingSearch(() => props.searchTerm, [
 const numberEnabled = computed<number>(() => localModList.value.filter(mod => mod.isEnabled()).length);
 const numberDisabled = computed<number>(() => localModList.value.length - numberEnabled.value);
 
+const statusText = computed<string>(() => {
+    if (numberEnabled.value === localModList.value.length) {
+        return 'All of your mods are currently enabled.';
+    }
+    if (numberDisabled.value === localModList.value.length) {
+        return 'All of your mods are currently disabled.';
+    }
+    return `You have ${numberDisabled.value} mod${numberDisabled.value > 1 ? 's' : ''} disabled.`;
+});
+
 async function enableAllMods() {
     isEnablingState.value = true;
     await store.dispatch(
@@ -55,17 +65,7 @@ async function disableAllMods() {
         <template #title>Change mod state</template>
         <template #description>
         <p>Enable / disable all of the mods on your profile</p>
-        <p>
-            <template v-if="numberEnabled === localModList.length">
-                All of your mods are currently enabled.
-            </template>
-            <template v-else-if="numberDisabled === localModList.length">
-                All of your mods are currently disabled.
-            </template>
-            <template v-else>
-                You have {{ numberDisabled }} mod<template v-if="numberDisabled > 1">s</template> disabled.
-            </template>
-        </p>
+        <p>{{ statusText }}</p>
         </template>
         <div class="export-profile-setting">
             <button
diff --git a/src/components/settings-components/v2/entries/ToggleCdn.vue b/src/components/settings-components/v2/entries/ToggleCdn.vue
new file mode 100644
index 000000000..bddd37d27
--- /dev/null
+++ b/src/components/settings-components/v2/entries/ToggleCdn.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import CdnProvider from '../../../../providers/generic/connection/CdnProvider';
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const currentCdn = ref(CdnProvider.current);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
+    'Toggle preferred Thunderstore CDN',
+    'CDN',
+    currentCdn.value.label,
+    currentCdn.value.url,
+]);
+
+function toggleCdn() {
+    CdnProvider.togglePreferredCdn();
+    currentCdn.value = CdnProvider.current;
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Toggle preferred Thunderstore CDN</template>
+        <template #description>
+            Switch the CDN until the app is restarted. This might bypass issues with downloading mods.
+            Current: {{ currentCdn.label }}<template v-if="currentCdn.url"> ({{ currentCdn.url }})</template>.
+        </template>
+        <button class="button" @click="toggleCdn">Toggle preferred CDN</button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/UpdateAllMods.vue b/src/components/settings-components/v2/entries/UpdateAllMods.vue
new file mode 100644
index 000000000..ce633cd98
--- /dev/null
+++ b/src/components/settings-components/v2/entries/UpdateAllMods.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../../../components/composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const outdatedCount = computed<number>(() => store.getters['profile/modsWithUpdates'].length);
+
+const statusText = computed<string>(() =>
+    outdatedCount.value === 1
+        ? '1 mod has an update available.'
+        : `${outdatedCount.value} mods have an update available.`
+);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, ['Update all mods', 'Update']);
+
+function updateAllMods() {
+    store.commit('openUpdateAllModsModal');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Update all mods</template>
+        <template #description>
+            Quickly update every installed mod to their latest versions. {{ statusText }}
+        </template>
+        <button
+            class="button"
+            :disabled="outdatedCount === 0"
+            @click="updateAllMods"
+        >
+            Update all mods
+        </button>
+    </SettingsViewWrapper>
+</template>

From 6c8fb9cb3807bbe51a3e46e502cbb52ffd287593 Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Tue, 14 Jul 2026 13:40:44 +0800
Subject: [PATCH 04/11] Ported remaining settings and cleaned up Manager.vue

---
 .../modals/DependencyStringsModal.vue         |  34 ++
 .../modals/IncorrectSteamDirectoryModal.vue   |  31 ++
 .../modals/LaunchArgumentsModal.vue           | 102 +++++
 .../SteamInstallationValidationModal.vue      |  45 +++
 .../settings-components/v2/SettingsView.vue   |  40 +-
 .../v2/entries/ChangeLaunchBehaviour.vue      |  56 +++
 .../v2/entries/CleanModCache.vue              |  52 ---
 .../v2/entries/CleanOnlineModListCache.vue    |  63 ---
 .../v2/entries/DownloadCache.vue              |  49 ---
 .../v2/entries/LaunchArguments.vue            |  31 ++
 .../v2/entries/ModCache.vue                   | 101 +++++
 ...eshOnlineModList.vue => OnlineModList.vue} |  74 +++-
 .../v2/entries/ResetGameInstallation.vue      |  55 +++
 .../v2/entries/ShowDependencyStrings.vue      |  35 ++
 .../v2/entries/SteamDirectory.vue             | 147 +++++++
 .../v2/entries/UpdateAllMods.vue              |   5 +-
 src/pages/Manager.vue                         | 370 +-----------------
 src/store/modules/ModalsModule.ts             |  40 ++
 18 files changed, 779 insertions(+), 551 deletions(-)
 create mode 100644 src/components/modals/DependencyStringsModal.vue
 create mode 100644 src/components/modals/IncorrectSteamDirectoryModal.vue
 create mode 100644 src/components/modals/LaunchArgumentsModal.vue
 create mode 100644 src/components/modals/SteamInstallationValidationModal.vue
 create mode 100644 src/components/settings-components/v2/entries/ChangeLaunchBehaviour.vue
 delete mode 100644 src/components/settings-components/v2/entries/CleanModCache.vue
 delete mode 100644 src/components/settings-components/v2/entries/CleanOnlineModListCache.vue
 delete mode 100644 src/components/settings-components/v2/entries/DownloadCache.vue
 create mode 100644 src/components/settings-components/v2/entries/LaunchArguments.vue
 create mode 100644 src/components/settings-components/v2/entries/ModCache.vue
 rename src/components/settings-components/v2/entries/{RefreshOnlineModList.vue => OnlineModList.vue} (50%)
 create mode 100644 src/components/settings-components/v2/entries/ResetGameInstallation.vue
 create mode 100644 src/components/settings-components/v2/entries/ShowDependencyStrings.vue
 create mode 100644 src/components/settings-components/v2/entries/SteamDirectory.vue

diff --git a/src/components/modals/DependencyStringsModal.vue b/src/components/modals/DependencyStringsModal.vue
new file mode 100644
index 000000000..8c6997007
--- /dev/null
+++ b/src/components/modals/DependencyStringsModal.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import ModalCard from '../../components/ModalCard.vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+import ManifestV2 from '../../model/ManifestV2';
+
+const store = getStore<State>();
+
+const isOpen = computed(() => store.state.modals.isDependencyStringsModalOpen);
+const localModList = computed<ManifestV2[]>(() => store.state.profile.modList);
+
+function close() {
+    store.commit('closeDependencyStringsModal');
+}
+</script>
+
+<template>
+    <ModalCard id="dependency-strings-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Dependency string list</h2>
+        </template>
+        <template v-slot:body>
+            <ul>
+                <li v-for="(mod, index) in localModList" :key="`dep-str-${index}`">
+                    {{ mod.getName() }}-{{ mod.getVersionNumber().toString() }}
+                </li>
+            </ul>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="close">Close</button>
+        </template>
+    </ModalCard>
+</template>
diff --git a/src/components/modals/IncorrectSteamDirectoryModal.vue b/src/components/modals/IncorrectSteamDirectoryModal.vue
new file mode 100644
index 000000000..b09ac29cd
--- /dev/null
+++ b/src/components/modals/IncorrectSteamDirectoryModal.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import ModalCard from '../../components/ModalCard.vue';
+import { computed } from 'vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+
+const store = getStore<State>();
+
+const isOpen = computed(() => store.state.modals.isIncorrectSteamDirectoryModalOpen);
+
+function close() {
+    store.commit("closeIncorrectSteamDirectoryModal");
+}
+</script>
+
+<template>
+    <ModalCard id="incorrect-steam-directory-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Failed to set the Steam folder</h2>
+        </template>
+        <template v-slot:body>
+            <p>The Steam executable was not selected.</p>
+            <p>If this error has appeared but the executable is correct, please run as administrator.</p>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="close">
+                I understand
+            </button>
+        </template>
+    </ModalCard>
+</template>
diff --git a/src/components/modals/LaunchArgumentsModal.vue b/src/components/modals/LaunchArgumentsModal.vue
new file mode 100644
index 000000000..33d13b8c6
--- /dev/null
+++ b/src/components/modals/LaunchArgumentsModal.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import ModalCard from '../../components/ModalCard.vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+import ManagerSettings from '../../r2mm/manager/ManagerSettings';
+import GameInstructions from '../../r2mm/launching/instructions/GameInstructions';
+import GameRunnerProvider from '../../providers/generic/game/GameRunnerProvider';
+import GameInstructionParser from '../../r2mm/launching/instructions/GameInstructionParser';
+import R2Error from '../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const isOpen = computed(() => store.state.modals.isLaunchArgumentsModalOpen);
+
+const activeGame = computed(() => store.state.activeGame);
+const profile = computed(() => store.getters['profile/activeProfile']);
+
+const settings = ref<ManagerSettings | null>(null);
+const launchArguments = ref<string>('');
+const doorstopTarget = ref<string>('');
+const vanillaLaunchArgs = ref<string>('');
+
+async function load() {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+    launchArguments.value = settings.value.getContext().gameSpecific.launchParameters;
+
+    GameInstructions.getInstructionsForGame(activeGame.value, profile.value).then(instructions => {
+        vanillaLaunchArgs.value = instructions.vanillaParameterList.map(value => `"${value}"`).join(' ');
+    });
+
+    GameRunnerProvider.instance.getGameArguments(activeGame.value, profile.value).then(target => {
+        if (target instanceof R2Error) {
+            doorstopTarget.value = '';
+        } else {
+            GameInstructionParser.parseList(target, activeGame.value, profile.value).then(instructions => {
+                if (instructions instanceof R2Error) {
+                    throw instructions;
+                }
+                doorstopTarget.value = instructions.map(value => `"${value}"`).join(' ');
+            });
+        }
+    });
+}
+
+watch(isOpen, (open) => {
+    if (open) {
+        load();
+    }
+});
+
+async function updateLaunchArguments() {
+    if (settings.value) {
+        await settings.value.setLaunchParameters(launchArguments.value);
+    }
+    close();
+}
+
+function close() {
+    store.commit('closeLaunchArgumentsModal');
+}
+</script>
+
+<template>
+    <ModalCard id="launch-arguments-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Set custom launch arguments</h2>
+        </template>
+        <template v-slot:body>
+            <p>Some arguments are provided by default:</p>
+            <br/>
+            <p>Modded:
+                <br/>
+                <code v-if="doorstopTarget.length > 0">{{ doorstopTarget }}</code>
+                <code v-else>These arguments will be available after installing a mod loader.</code>
+            </p>
+            <br/>
+            <p>Vanilla:
+                <br/>
+                <code>{{ vanillaLaunchArgs }}</code>
+            </p>
+            <br/>
+            <p>
+                <strong>Please note that these are called against the Steam executable. Be careful when
+                    entering custom launch arguments.</strong>
+            </p>
+            <br/>
+            <input
+                v-model="launchArguments"
+                id="launch-arguments-modal-input"
+                class="input"
+                placeholder="Enter arguments"
+                autocomplete="off"
+            />
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="updateLaunchArguments">
+                Update launch arguments
+            </button>
+        </template>
+    </ModalCard>
+</template>
diff --git a/src/components/modals/SteamInstallationValidationModal.vue b/src/components/modals/SteamInstallationValidationModal.vue
new file mode 100644
index 000000000..5da627642
--- /dev/null
+++ b/src/components/modals/SteamInstallationValidationModal.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import ModalCard from '../../components/ModalCard.vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+
+const store = getStore<State>();
+
+const isOpen = computed(() => store.state.modals.isSteamInstallationValidationModalOpen);
+const activeGame = computed(() => store.state.activeGame);
+
+function close() {
+    store.commit('closeSteamInstallationValidationModal');
+}
+</script>
+
+<template>
+    <ModalCard id="steam-installation-validation-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Clearing the {{ activeGame.displayName }} installation directory</h2>
+        </template>
+        <template v-slot:body>
+            <div class="notification is-warning">
+                <p>
+                    You will not be able to launch the game until
+                    Steam has verified the integrity of the game files.
+                </p>
+            </div>
+            <p>
+                Steam will be started and will attempt to verify the
+                integrity of {{ activeGame.displayName }}.
+            </p>
+            <br/>
+            <p>
+                Please check the Steam window for validation progress.
+                If the window has not yet appeared, please be patient.
+            </p>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="close">
+                I understand
+            </button>
+        </template>
+    </ModalCard>
+</template>
diff --git a/src/components/settings-components/v2/SettingsView.vue b/src/components/settings-components/v2/SettingsView.vue
index d701a162d..83da2324c 100644
--- a/src/components/settings-components/v2/SettingsView.vue
+++ b/src/components/settings-components/v2/SettingsView.vue
@@ -2,31 +2,41 @@
 import { computed, ref } from 'vue';
 import VersionNumber from '../../../model/VersionNumber';
 import ManagerInformation from '../../../_managerinf/ManagerInformation';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import appWindow from '../../../providers/node/app/app_window';
 import { Hero } from '../../all';
 import SettingsSection from './SettingsSection.vue';
 import GameDirectory from './entries/GameDirectory.vue';
 import DataDirectory from './entries/DataDirectory.vue';
+import SteamDirectory from './entries/SteamDirectory.vue';
 import ExportProfile from './entries/ExportProfile.vue';
 import Theme from './entries/Theme.vue';
 import ExpandCards from './entries/ExpandCards.vue';
 import FunkyMode from './entries/FunkyMode.vue';
-import RefreshOnlineModList from './entries/RefreshOnlineModList.vue';
+import OnlineModList from './entries/OnlineModList.vue';
 import ModState from './entries/ModState.vue';
 import UpdateAllMods from './entries/UpdateAllMods.vue';
-import DownloadCache from './entries/DownloadCache.vue';
+import ModCache from './entries/ModCache.vue';
 import CopyLogToClipboard from './entries/CopyLogToClipboard.vue';
 import CopyTroubleshooting from './entries/CopyTroubleshooting.vue';
 import ImportLocalMod from './entries/ImportLocalMod.vue';
-import CleanModCache from './entries/CleanModCache.vue';
-import CleanOnlineModListCache from './entries/CleanOnlineModListCache.vue';
 import ToggleCdn from './entries/ToggleCdn.vue';
+import LaunchArguments from './entries/LaunchArguments.vue';
+import ShowDependencyStrings from './entries/ShowDependencyStrings.vue';
+import ResetGameInstallation from './entries/ResetGameInstallation.vue';
+import ChangeLaunchBehaviour from './entries/ChangeLaunchBehaviour.vue';
 
 const searchTerm = ref<string>('');
 
 const managerVersionNumber = ref<VersionNumber>(ManagerInformation.VERSION);
 const appName = computed(() => ManagerInformation.APP_NAME);
 
-const categories = ['All', 'Directories', 'Profile', 'Appearance', 'Debugging', 'Other'] as const;
+const store = getStore<State>();
+const isSteamGame = computed<boolean>(() => store.state.activeGame.isInstalledViaSteam);
+const isSteamAndNotWindows = computed<boolean>(() => ['linux', 'darwin'].includes(appWindow.getPlatform()) && isSteamGame.value);
+
+const categories = ['All', 'Directories', 'Profile', 'Appearance', 'Debugging', 'Modpacks', 'Other'] as const;
 type Category = typeof categories[number];
 
 const activeCategory = ref<Category>('All');
@@ -74,6 +84,9 @@ function isVisible(section: Category): boolean {
                 <SettingsSection v-if="isVisible('Directories')" name="Directories">
                     <DataDirectory :search-term="searchTerm"/>
                         <GameDirectory :search-term="searchTerm"/>
+                    <template v-if="isSteamGame">
+                        <SteamDirectory :search-term="searchTerm"/>
+                    </template>
                 </SettingsSection>
 
                 <SettingsSection v-if="isVisible('Profile')" name="Profile">
@@ -90,16 +103,25 @@ function isVisible(section: Category): boolean {
                 </SettingsSection>
 
                 <SettingsSection v-if="isVisible('Debugging')" name="Debugging">
+                    <LaunchArguments :search-term="searchTerm"/>
+                    <template v-if="isSteamGame">
+                        <ResetGameInstallation :search-term="searchTerm"/>
+                    </template>
+                    <template v-if="isSteamAndNotWindows">
+                        <ChangeLaunchBehaviour :search-term="searchTerm"/>
+                    </template>
                     <CopyLogToClipboard :search-term="searchTerm"/>
                     <CopyTroubleshooting :search-term="searchTerm"/>
-                    <DownloadCache :search-term="searchTerm"/>
-                    <CleanModCache :search-term="searchTerm"/>
-                    <CleanOnlineModListCache :search-term="searchTerm"/>
+                    <ModCache :search-term="searchTerm"/>
                     <ToggleCdn :search-term="searchTerm"/>
                 </SettingsSection>
 
+                <SettingsSection v-if="isVisible('Modpacks')" name="Modpacks">
+                    <ShowDependencyStrings :search-term="searchTerm"/>
+                </SettingsSection>
+
                 <SettingsSection v-if="isVisible('Other')" name="Other">
-                    <RefreshOnlineModList :search-term="searchTerm"/>
+                    <OnlineModList :search-term="searchTerm"/>
                 </SettingsSection>
             </div>
         </div>
diff --git a/src/components/settings-components/v2/entries/ChangeLaunchBehaviour.vue b/src/components/settings-components/v2/entries/ChangeLaunchBehaviour.vue
new file mode 100644
index 000000000..598b695c9
--- /dev/null
+++ b/src/components/settings-components/v2/entries/ChangeLaunchBehaviour.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import Game from '../../../../model/game/Game';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { getLaunchType, LaunchType } from '../../../../model/real_enums/launch/LaunchType';
+import { LaunchTypeModalOpen } from '../../../../components/modals/launch-type/LaunchTypeRefs';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const activeGame = computed<Game>(() => store.state.activeGame);
+const launchType = ref<LaunchType>(LaunchType.AUTO);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
+    'Change launch behaviour',
+    'Set launch mode',
+    'Proton',
+    'Native',
+    'Auto',
+    launchType.value,
+]);
+
+async function refreshLaunchType() {
+    launchType.value = await getLaunchType(activeGame.value);
+}
+
+onMounted(refreshLaunchType);
+watch(activeGame, refreshLaunchType);
+
+watch(LaunchTypeModalOpen, (open) => {
+    if (!open) {
+        refreshLaunchType();
+    }
+});
+
+function openLaunchTypeModal() {
+    LaunchTypeModalOpen.value = true;
+}
+</script>
+
+<template>
+    <SettingsViewWrapper >
+        <template #title>Change launch behaviour</template>
+        <template #description>
+            <p>Select a specific launch behaviour. You can tell the manager that a game is explicitly using either Native or Proton.</p>
+            <p>The current launch behaviour is set to: <strong>{{ launchType }}</strong>.</p>
+        </template>
+        <button class="button" @click="openLaunchTypeModal">Change launch behaviour</button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/CleanModCache.vue b/src/components/settings-components/v2/entries/CleanModCache.vue
deleted file mode 100644
index 93d54aa22..000000000
--- a/src/components/settings-components/v2/entries/CleanModCache.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
-import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
-import CacheUtil from '../../../../r2mm/mods/CacheUtil';
-import R2Error from '../../../../model/errors/R2Error';
-
-const store = getStore<State>();
-
-const props = defineProps<{
-    searchTerm?: string;
-}>();
-
-const isCleaning = ref<boolean>(false);
-
-const { isVisible } = useSettingSearch(() => props.searchTerm, [
-    'Clean mod cache',
-    'Free space',
-    'Clean',
-]);
-
-async function cleanCache() {
-    isCleaning.value = true;
-    try {
-        await CacheUtil.clean();
-    } catch (e) {
-        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to clean the mod cache'));
-    } finally {
-        isCleaning.value = false;
-    }
-}
-</script>
-
-<template>
-    <SettingsViewWrapper v-show="isVisible">
-        <template #title>Clean mod cache</template>
-        <template #description>
-            Free extra space caused by cached mods that are not currently in a profile.
-            Checks all profiles for unused mods and clears the cache.
-        </template>
-        <button
-            class="button"
-            :class="{ 'is-loading': isCleaning }"
-            :disabled="isCleaning"
-            @click="cleanCache"
-        >
-            Clean mod cache
-        </button>
-    </SettingsViewWrapper>
-</template>
diff --git a/src/components/settings-components/v2/entries/CleanOnlineModListCache.vue b/src/components/settings-components/v2/entries/CleanOnlineModListCache.vue
deleted file mode 100644
index f926151a5..000000000
--- a/src/components/settings-components/v2/entries/CleanOnlineModListCache.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
-import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
-import R2Error from '../../../../model/errors/R2Error';
-
-const store = getStore<State>();
-
-const props = defineProps<{
-    searchTerm?: string;
-}>();
-
-const isCleaning = ref<boolean>(false);
-const cacheStatus = ref<string>('');
-
-const { isVisible } = useSettingSearch(() => props.searchTerm, [
-    'Clean online mod list cache',
-    'Reset mod list cache',
-    'Clean',
-]);
-
-async function refreshStatus() {
-    try {
-        cacheStatus.value = await store.dispatch('tsMods/getActiveGameCacheStatus');
-    } catch (e) {
-        cacheStatus.value = '';
-    }
-}
-
-onMounted(refreshStatus);
-
-async function cleanOnlineModList() {
-    isCleaning.value = true;
-    try {
-        await store.dispatch('tsMods/resetActiveGameCache');
-        await refreshStatus();
-    } catch (e) {
-        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to clean the online mod list'));
-    } finally {
-        isCleaning.value = false;
-    }
-}
-</script>
-
-<template>
-    <SettingsViewWrapper v-show="isVisible">
-        <template #title>Clean online mod list cache</template>
-        <template #description>
-            Deletes the local copy of the mod list and retrieves a new one.
-            <template v-if="cacheStatus">{{ cacheStatus }}</template>
-        </template>
-        <button
-            class="button"
-            :class="{ 'is-loading': isCleaning }"
-            :disabled="isCleaning"
-            @click="cleanOnlineModList"
-        >
-            Clean online mod list
-        </button>
-    </SettingsViewWrapper>
-</template>
diff --git a/src/components/settings-components/v2/entries/DownloadCache.vue b/src/components/settings-components/v2/entries/DownloadCache.vue
deleted file mode 100644
index f63334d76..000000000
--- a/src/components/settings-components/v2/entries/DownloadCache.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
-import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
-
-const store = getStore<State>();
-
-const props = defineProps<{
-    searchTerm?: string;
-}>();
-
-const cacheEnabled = computed<boolean>(() => !store.state.download.ignoreCache);
-
-const { isVisible } = useSettingSearch(() => props.searchTerm, [
-    'Toggle download cache',
-    'Download cache',
-    'Toggle',
-]);
-
-async function toggleCache() {
-    await store.dispatch('download/toggleIgnoreCache');
-}
-</script>
-
-<template>
-    <SettingsViewWrapper v-show="isVisible">
-        <template #title>Download cache</template>
-        <template #description>
-            When enabled, downloads will be skipped if an existing copy is already cache.
-        </template>
-        <div class="field" @click.prevent.stop="toggleCache">
-            <input
-                id="toggle-download-cache"
-                type="checkbox"
-                :class="['switch', { 'is-info': cacheEnabled }]"
-                :checked="cacheEnabled"
-            />
-            <label for="toggle-download-cache">{{ cacheEnabled ? 'Enabled (recommended)' : 'Disabled' }}</label>
-        </div>
-    </SettingsViewWrapper>
-</template>
-
-<style scoped lang="scss">
-.switch {
-    position: relative;
-}
-</style>
diff --git a/src/components/settings-components/v2/entries/LaunchArguments.vue b/src/components/settings-components/v2/entries/LaunchArguments.vue
new file mode 100644
index 000000000..3f7a0b776
--- /dev/null
+++ b/src/components/settings-components/v2/entries/LaunchArguments.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Set custom launch arguments',
+    'Launch parameters',
+]);
+
+function openLaunchArguments() {
+    store.commit('openLaunchArgumentsModal');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Launch arguments</template>
+        <template #description>
+            Provide custom arguments that are added when starting the game.
+        </template>
+        <button class="button" @click="openLaunchArguments">Set launch arguments</button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/ModCache.vue b/src/components/settings-components/v2/entries/ModCache.vue
new file mode 100644
index 000000000..5f391478a
--- /dev/null
+++ b/src/components/settings-components/v2/entries/ModCache.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import CacheUtil from '../../../../r2mm/mods/CacheUtil';
+import R2Error from '../../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const cacheEnabled = computed<boolean>(() => !store.state.download.ignoreCache);
+const isCleaning = ref<boolean>(false);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Mod cache',
+    'Download cache',
+    'Reuse cached downloads',
+    'Toggle',
+    'Clean mod cache',
+    'Free space',
+]);
+
+async function toggleCache() {
+    await store.dispatch('download/toggleIgnoreCache');
+}
+
+async function cleanCache() {
+    isCleaning.value = true;
+    try {
+        await CacheUtil.clean();
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to clean the mod cache'));
+    } finally {
+        isCleaning.value = false;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Mod cache</template>
+        <template #description>
+            Downloaded mods are kept in a cache so that they don't need to be downloaded again.
+        </template>
+        <div class="mod-cache-setting">
+            <div class="field" @click.prevent.stop="toggleCache">
+                <input
+                    id="toggle-download-cache"
+                    type="checkbox"
+                    :class="['switch', { 'is-info': cacheEnabled }]"
+                    :checked="cacheEnabled"
+                />
+                <label for="toggle-download-cache">
+                    {{ cacheEnabled ? 'Enabled' : 'Disabled' }}
+                </label>
+                <div class="mod-cache-setting__hint" @click.stop.prevent>{{ cacheEnabled ? 'Reusing cached downloads (recommended)' : 'Re-downloading every time' }}</div>
+            </div>
+            <div class="mod-cache-setting__clean">
+                <button
+                    class="button"
+                    :class="{ 'is-loading': isCleaning }"
+                    :disabled="isCleaning"
+                    @click="cleanCache"
+                >
+                    Clean cache
+                </button>
+                <span class="mod-cache-setting__hint">Removes cached mods that aren't in any profile to free up storage space.</span>
+            </div>
+        </div>
+    </SettingsViewWrapper>
+</template>
+
+<style scoped lang="scss">
+.mod-cache-setting {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    flex: 1;
+
+    &__clean {
+        display: flex;
+        align-items: center;
+        gap: 0.6rem;
+        flex-wrap: wrap;
+    }
+
+    &__hint {
+        font-size: 0.85rem;
+        color: var(--text-secondary, #6b6464);
+    }
+}
+
+.switch {
+    position: relative;
+}
+</style>
diff --git a/src/components/settings-components/v2/entries/RefreshOnlineModList.vue b/src/components/settings-components/v2/entries/OnlineModList.vue
similarity index 50%
rename from src/components/settings-components/v2/entries/RefreshOnlineModList.vue
rename to src/components/settings-components/v2/entries/OnlineModList.vue
index 74be37f05..365ea5145 100644
--- a/src/components/settings-components/v2/entries/RefreshOnlineModList.vue
+++ b/src/components/settings-components/v2/entries/OnlineModList.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import moment from 'moment';
 import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
 import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import R2Error from '../../../../model/errors/R2Error';
 
 const store = getStore<State>();
 
@@ -12,13 +13,9 @@ const props = defineProps<{
     searchTerm?: string;
 }>();
 
-const { isVisible } = useSettingSearch(() => props.searchTerm, [
-    'Refresh online mod list',
-    'Check for new mod releases',
-]);
-
 const isRefreshing = computed<boolean>(() => store.state.tsMods.isThunderstoreModListUpdateInProgress);
 const hasActiveDownloads = computed<boolean>(() => store.getters['download/activeDownloadCount'] > 0);
+const isCleaning = ref<boolean>(false);
 
 const status = computed<string>(() => {
     if (isRefreshing.value) {
@@ -31,32 +28,75 @@ const status = computed<string>(() => {
         return 'Refreshing the mod list is disabled while there are active downloads.';
     }
     if (store.state.tsMods.modsLastUpdated !== undefined) {
-        return 'Cache date: ' + moment(store.state.tsMods.modsLastUpdated).format('MMMM Do YYYY, h:mm:ss a');
+        return 'Last updated on: ' + moment(store.state.tsMods.modsLastUpdated).format('MMMM Do YYYY, h:mm:ss a');
     }
     return 'No API information available';
 });
 
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Refresh online mod list',
+    'Check for new mod releases',
+    'Clean online mod list cache',
+    'Reset mod list cache',
+]);
+
 async function refresh() {
     if (isRefreshing.value || hasActiveDownloads.value) {
         return;
     }
     await store.dispatch('tsMods/syncPackageList');
 }
+
+async function cleanCache() {
+    if (isRefreshing.value || isCleaning.value) {
+        return;
+    }
+    isCleaning.value = true;
+    try {
+        await store.dispatch('tsMods/resetActiveGameCache');
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to clean the online mod list'));
+    } finally {
+        isCleaning.value = false;
+    }
+}
 </script>
 
 <template>
     <SettingsViewWrapper v-show="isVisible">
-        <template #title>Refresh online mod list</template>
+        <template #title>Online mod list</template>
         <template #description>
-            Check for any new mod releases. {{ status }}
+        <p>
+            Check for new mod releases, or clear the local copy.
+        </p>
+        <p>{{ status }}</p>
         </template>
-        <button
-            class="button"
-            :class="{ 'is-loading': isRefreshing }"
-            :disabled="isRefreshing || hasActiveDownloads"
-            @click="refresh"
-        >
-            Refresh
-        </button>
+        <div class="online-mod-list-setting">
+            <button
+                class="button"
+                :class="{ 'is-loading': isRefreshing && !isCleaning }"
+                :disabled="isRefreshing || hasActiveDownloads"
+                @click="refresh"
+            >
+                Refresh
+            </button>
+            <button
+                class="button"
+                :class="{ 'is-loading': isCleaning }"
+                :disabled="isRefreshing || isCleaning"
+                @click="cleanCache"
+            >
+                Delete copy
+            </button>
+        </div>
     </SettingsViewWrapper>
 </template>
+
+<style scoped lang="scss">
+.online-mod-list-setting {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+</style>
diff --git a/src/components/settings-components/v2/entries/ResetGameInstallation.vue b/src/components/settings-components/v2/entries/ResetGameInstallation.vue
new file mode 100644
index 000000000..034fa4c9f
--- /dev/null
+++ b/src/components/settings-components/v2/entries/ResetGameInstallation.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { SteamInstallationValidator } from '../../../../r2mm/manager/SteamInstallationValidator';
+import R2Error from '../../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const activeGame = computed(() => store.state.activeGame);
+const isValidating = ref<boolean>(false);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
+    `Reset ${activeGame.value.displayName} installation`,
+    'Validate installation',
+    'Verify integrity',
+    'Corrupted files',
+]);
+
+async function validateSteamInstallation() {
+    isValidating.value = true;
+    const res = await SteamInstallationValidator.validateInstallation(activeGame.value);
+    isValidating.value = false;
+    if (res instanceof R2Error) {
+        store.commit('error/handleError', res);
+    } else {
+        store.commit('openSteamInstallationValidationModal');
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Reset {{ activeGame.displayName }} installation</template>
+        <template #description>
+            Fix problems caused by corrupted files or files left over from manual modding attempts.
+            This will delete all contents of the <code class="code">{{ activeGame.steamFolderName }}</code> folder and will
+            verify files through Steam.
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isValidating }"
+            :disabled="isValidating"
+            @click="validateSteamInstallation"
+        >
+            Reset installation
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/ShowDependencyStrings.vue b/src/components/settings-components/v2/entries/ShowDependencyStrings.vue
new file mode 100644
index 000000000..e0403b65a
--- /dev/null
+++ b/src/components/settings-components/v2/entries/ShowDependencyStrings.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const modCount = computed<number>(() => store.state.profile.modList.length);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Show dependency strings',
+    'Dependency',
+]);
+
+function showDependencyStrings() {
+    store.commit('openDependencyStringsModal');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Show dependency strings</template>
+        <template #description>
+            View a list of installed mods with their version strings, as used inside the dependencies array of a
+            manifest.json file. Shows dependency strings for {{ modCount }} mod(s).
+        </template>
+        <button class="button" @click="showDependencyStrings">Show dependency strings</button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/SteamDirectory.vue b/src/components/settings-components/v2/entries/SteamDirectory.vue
new file mode 100644
index 000000000..9667082fc
--- /dev/null
+++ b/src/components/settings-components/v2/entries/SteamDirectory.vue
@@ -0,0 +1,147 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import Game from '../../../../model/game/Game';
+import { getStore } from '../../../../providers/generic/store/StoreProvider';
+import { State } from '../../../../store';
+import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
+import path from '../../../../providers/node/path/path';
+import FsProvider from '../../../../providers/generic/file/FsProvider';
+import LinkProvider from '../../../../providers/components/LinkProvider';
+import AppWindow from '../../../../providers/node/app/app_window';
+import os from '../../../../providers/node/os/os';
+import R2Error from '../../../../model/errors/R2Error';
+import ManagerInformation from '../../../../_managerinf/ManagerInformation';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const appName = ManagerInformation.APP_NAME;
+const activeGame = computed<Game>(() => store.state.activeGame);
+const settings = ref<ManagerSettings | null>(null);
+
+const steamDirectory = computed<string>(() =>
+    settings.value?.getContext().global.steamDirectory || 'Not set'
+);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
+    'Change Steam folder',
+    'Change Steam directory',
+    steamDirectory.value,
+    'Browse'
+]);
+
+onMounted(async () => {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+});
+
+watch(activeGame, async () => {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+});
+
+function computeDefaultSteamDirectory(): string {
+    switch (AppWindow.getPlatform()) {
+        case 'win32':
+            return path.resolve(
+                process.env['ProgramFiles(x86)'] || process.env.PROGRAMFILES || 'C:\\Program Files (x86)',
+                'Steam'
+            );
+        case 'linux':
+            return path.resolve(os.homedir(), '.local', 'share', 'Steam');
+        case 'darwin':
+            return path.resolve(os.homedir(), 'Library', 'Application Support', 'Steam');
+        default:
+            return '';
+    }
+}
+
+async function checkIfSteamExecutableIsValid(file: string): Promise<boolean> {
+    switch (AppWindow.getPlatform()) {
+        case 'win32':
+            return path.basename(file).toLowerCase() === "steam.exe";
+        case 'linux':
+            return path.basename(file).toLowerCase() === "steam.sh";
+        case 'darwin':
+            return path.basename(file).toLowerCase() === 'steam.app';
+        default:
+            return true;
+    }
+}
+
+function changeSteamDirectory() {
+    const steamDir: string = settings.value!.getContext().global.steamDirectory || computeDefaultSteamDirectory();
+    InteractionProvider.instance.selectFile({
+        title: 'Locate Steam Executable',
+        defaultPath: steamDir,
+        filters: [{ name: "steam", extensions: ["exe", "sh", "app"] }],
+        buttonLabel: 'Select Executable'
+    }).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]!)));
+                } else {
+                    store.commit('openIncorrectSteamDirectoryModal');
+                }
+            } catch (e) {
+                const err = R2Error.fromThrownValue(e, 'Failed to change the Steam folder');
+                store.commit('error/handleError', err);
+            }
+        }
+    });
+}
+
+function browseDirectory() {
+    const dir = settings.value?.getContext().global.steamDirectory;
+    if (dir) {
+        LinkProvider.instance.openLink(dir);
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Steam folder</template>
+        <template #description>
+            Change the location of the Steam folder that {{ appName }} uses.
+        </template>
+        <div class="steam-directory-setting">
+            <div class="steam-directory-setting__field">
+                <input
+                    class="input steam-directory-setting__input"
+                    type="text"
+                    :value="steamDirectory"
+                    readonly
+                />
+                <button class="button" @click="changeSteamDirectory">Change</button>
+                <button class="button" @click="browseDirectory">Browse</button>
+            </div>
+        </div>
+    </SettingsViewWrapper>
+</template>
+
+<style lang="scss" scoped>
+.steam-directory-setting {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    flex: 1;
+
+    &__field {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    &__input {
+        flex: 1;
+        min-width: 14rem;
+        max-width: 35rem;
+    }
+}
+</style>
diff --git a/src/components/settings-components/v2/entries/UpdateAllMods.vue b/src/components/settings-components/v2/entries/UpdateAllMods.vue
index ce633cd98..1d27968ed 100644
--- a/src/components/settings-components/v2/entries/UpdateAllMods.vue
+++ b/src/components/settings-components/v2/entries/UpdateAllMods.vue
@@ -19,7 +19,10 @@ const statusText = computed<string>(() =>
         : `${outdatedCount.value} mods have an update available.`
 );
 
-const { isVisible } = useSettingSearch(() => props.searchTerm, ['Update all mods', 'Update']);
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Update all mods',
+    'Update'
+]);
 
 function updateAllMods() {
     store.commit('openUpdateAllModsModal');
diff --git a/src/pages/Manager.vue b/src/pages/Manager.vue
index aaa6dc890..78a8fbc09 100644
--- a/src/pages/Manager.vue
+++ b/src/pages/Manager.vue
@@ -1,107 +1,12 @@
 <template>
     <ManagerActivityBar />
 	<div class="manager-main-view">
-		<div id='steamIncorrectDir' :class="['modal', {'is-active':(showSteamIncorrectDirectoryModal !== false)}]">
-			<div class="modal-background" @click="showSteamIncorrectDirectoryModal = false"></div>
-			<div class='modal-content'>
-				<div class='notification is-danger'>
-					<h3 class='title'>Failed to set the Steam folder</h3>
-					<p>The steam executable was not selected.</p>
-					<p>If this error has appeared but the executable is correct, please run as administrator.</p>
-				</div>
-			</div>
-			<button class="modal-close is-large" aria-label="close"
-			        @click="showSteamIncorrectDirectoryModal = false"></button>
-		</div>
-		<ModalCard id="steam-installation-validation-modal" :is-active="isValidatingSteamInstallation" @close-modal="closeSteamInstallationValidationModal" :can-close="true">
-			<template v-slot:header>
-				<h2 class='modal-title'>Clearing the {{activeGame.displayName}} installation directory</h2>
-			</template>
-			<template v-slot:body>
-				<div class='notification is-warning'>
-					<p>
-						You will not not be able to launch the game until
-						Steam has verified the integrity of the game files.
-					</p>
-				</div>
-				<p>
-					Steam will be started and will attempt to verify the
-					integrity of {{ activeGame.displayName }}.
-				</p>
-				<br/>
-				<p>
-					Please check the Steam window for validation progress.
-					If the window has not yet appeared, please be patient.
-				</p>
-			</template>
-			<template v-slot:footer>
-				<button class="button is-info" @click="closeSteamInstallationValidationModal()">
-					I understand
-				</button>
-			</template>
-		</ModalCard>
-        <ModalCard id="dependency-strings-modal" :is-active="showDependencyStrings" @close-modal="showDependencyStrings = false;" :can-close="true">
-            <template v-slot:header>
-                <h2 class='modal-title'>Dependency string list</h2>
-            </template>
-            <template v-slot:body>
-                <ul>
-                    <li v-for="(key, index) in localModList" :key="`dep-str-${index}`">
-                        {{key.getName()}}-{{key.getVersionNumber().toString()}}
-                    </li>
-                </ul>
-            </template>
-            <template v-slot:footer>
-                <button class="button is-info"
-                        @click="showDependencyStrings = false;">
-                    Close
-                </button>
-            </template>
-        </ModalCard>
-		<ModalCard id="launch-parameters-modal" :is-active="showLaunchParameterModal" @close-modal="() => {showLaunchParameterModal = false;}" :can-close="true">
-			<template v-slot:header>
-				<h2 class='modal-title'>Set custom launch parameters</h2>
-			</template>
-			<template v-slot:body>
-				<p>Some arguments are provided by default:</p>
-				<br/>
-				<p>Modded:
-					<br/>
-					<code v-if="doorstopTarget.length > 0">
-						{{ doorstopTarget }}
-					</code>
-                    <code v-else>These parameters will be available after installing a mod loader.</code>
-				</p>
-				<br/>
-				<p>Vanilla:
-					<br>
-					<code>
-						{{ vanillaLaunchArgs }}
-					</code>
-				</p>
-				<br/>
-				<p>
-					<strong>Please note that these are called against the Steam executable. Be careful when
-						entering custom launch parameters.</strong>
-				</p>
-				<br/>
-				<input
-					v-model='launchParametersModel'
-					id='launch-parameters-modal-input'
-					class='input'
-					placeholder='Enter parameters'
-					autocomplete='off'
-				/>
-			</template>
-			<template v-slot:footer>
-				<button class='button is-info' @click='updateLaunchParameters()'>
-					Update launch parameters
-				</button>
-			</template>
-		</ModalCard>
-
         <CategoryFilterModal />
         <IncorrectGameDirectoryModal />
+        <IncorrectSteamDirectoryModal />
+        <LaunchArgumentsModal />
+        <DependencyStringsModal />
+        <SteamInstallationValidationModal />
         <SortModal />
         <LocalFileImportModal :visible="importingLocalMod" @close-modal="importingLocalMod = false" />
         <ProfileCodeExportModal />
@@ -111,30 +16,20 @@
         <LaunchTypeModal v-if="canRenderLaunchTypeModal()" />
 
         <div class="router-view">
-            <router-view name="subview" v-on:setting-invoked="handleSettingsCallbacks($event)" />
+            <router-view name="subview" />
         </div>
     </div>
 </template>
 
 <script lang='ts' setup>
-import { computed, onMounted, ref } from 'vue';
-import PathResolver from '../r2mm/manager/PathResolver';
-import { SteamInstallationValidator } from '../r2mm/manager/SteamInstallationValidator';
-import R2Error from '../model/errors/R2Error';
-import ThemeManager from '../r2mm/manager/ThemeManager';
-import { DataFolderProvider } from '../providers/ror2/system/DataFolderProvider';
-import InteractionProvider from '../providers/ror2/system/InteractionProvider';
-import os from '../providers/node/os/os';
-import FsProvider from '../providers/generic/file/FsProvider';
-import CacheUtil from '../r2mm/mods/CacheUtil';
-import LinkProvider from '../providers/components/LinkProvider';
-import GameRunnerProvider from '../providers/generic/game/GameRunnerProvider';
+import { ref } from 'vue';
 import LocalFileImportModal from '../components/importing/LocalFileImportModal.vue';
-import { PackageLoader } from '../model/schema/ThunderstoreSchema';
-import GameInstructions from '../r2mm/launching/instructions/GameInstructions';
 import CategoryFilterModal from '../components/modals/CategoryFilterModal.vue';
 import IncorrectGameDirectoryModal from '../components/modals/IncorrectGameDirectoryModal.vue';
-import ModalCard from '../components/ModalCard.vue';
+import IncorrectSteamDirectoryModal from '../components/modals/IncorrectSteamDirectoryModal.vue';
+import DependencyStringsModal from '../components/modals/DependencyStringsModal.vue';
+import SteamInstallationValidationModal from '../components/modals/SteamInstallationValidationModal.vue';
+import LaunchArgumentsModal from '../components/modals/LaunchArgumentsModal.vue';
 import ProfileCodeExportModal from '../components/modals/ProfileCodeExportModal.vue';
 import SortModal from '../components/modals/SortModal.vue';
 import DownloadModVersionSelectModal from '../components/views/DownloadModVersionSelectModal.vue';
@@ -142,265 +37,20 @@ import DownloadProgressModal from '../components/views/DownloadProgressModal.vue
 import UpdateAllInstalledModsModal from '../components/views/UpdateAllInstalledModsModal.vue';
 import { getStore } from '../providers/generic/store/StoreProvider';
 import { State } from '../store';
-import { useRouter } from 'vue-router';
-import path from '../providers/node/path/path';
 import LaunchTypeModal from "../components/modals/launch-type/LaunchTypeModal.vue";
 import appWindow from '../providers/node/app/app_window';
-import GameInstructionParser from "../r2mm/launching/instructions/GameInstructionParser";
 import ManagerActivityBar from '../components/navigation/ManagerActivityBar.vue';
 
 const store = getStore<State>();
-const router = useRouter();
 
-const isValidatingSteamInstallation = ref<boolean>(false);
-const showSteamIncorrectDirectoryModal = ref<boolean>(false);
-const launchParametersModel = ref<string>('');
-const showLaunchParameterModal = ref<boolean>(false);
-const showDependencyStrings = ref<boolean>(false);
 const importingLocalMod = ref<boolean>(false);
-const doorstopTarget = ref<string>("");
-const vanillaLaunchArgs = ref<string>("");
-
-const activeGame = computed(() => store.state.activeGame);
-const settings = computed(() => store.getters['settings']);
-const profile = computed(() => store.getters['profile/activeProfile']);
-const localModList = computed(() => store.state.profile.modList);
 
 function canRenderLaunchTypeModal() {
     return ['linux', 'darwin'].includes(appWindow.getPlatform());
 }
 
-function closeSteamInstallationValidationModal() {
-    isValidatingSteamInstallation.value = false;
-}
-
-async function validateSteamInstallation() {
-    const res = await SteamInstallationValidator.validateInstallation(activeGame.value);
-    if (res instanceof R2Error) {
-        store.commit('error/handleError', res);
-    } else {
-        isValidatingSteamInstallation.value = true;
-    }
-}
-
-function computeDefaultSteamDirectory(): string {
-    switch(appWindow.getPlatform()){
-        case 'win32':
-            return path.resolve(
-                process.env['ProgramFiles(x86)'] || process.env.PROGRAMFILES || 'C:\\Program Files (x86)',
-                'Steam'
-            );
-        case 'linux':
-            return path.resolve(os.homedir(), '.local', 'share', 'Steam');
-        case 'darwin':
-            return path.resolve(os.homedir(), 'Library', 'Application Support', 'Steam');
-        default:
-            return '';
-    }
-}
-
-async function checkIfSteamExecutableIsValid(file: string): Promise<boolean> {
-    switch(appWindow.getPlatform()){
-        case 'win32':
-            return path.basename(file).toLowerCase() === "steam.exe"
-        case 'linux':
-            return path.basename(file).toLowerCase() === "steam.sh"
-        case 'darwin':
-            return path.basename(file).toLowerCase() === 'steam.app'
-        default:
-            return true;
-    }
-}
-
-function changeSteamDirectory() {
-    const steamDir: string = settings.value.getContext().global.steamDirectory || computeDefaultSteamDirectory();
-    InteractionProvider.instance.selectFile({
-        title: 'Locate Steam Executable',
-        defaultPath: steamDir,
-        filters: [{name: "steam", extensions: ["exe", "sh", "app"]}],
-        buttonLabel: 'Select Executable'
-    }).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])));
-                } else {
-                    showSteamIncorrectDirectoryModal.value = true;
-                }
-            } catch (e) {
-                const err = R2Error.fromThrownValue(e, 'Failed to change the Steam folder');
-                store.commit('error/handleError', err);
-            }
-        }
-    });
-}
-
-function setFunkyMode(value: boolean) {
-    settings.value.setFunkyMode(value);
-}
-
-function browseDataFolder() {
-    LinkProvider.instance.openLink('file://' + PathResolver.ROOT);
-}
-
-function browseProfileFolder() {
-    LinkProvider.instance.openLink('file://' + profile.value.getProfilePath());
-}
-
-function toggleCardExpanded(expanded: boolean) {
-    if (expanded) {
-        settings.value.expandCards();
-    } else {
-        settings.value.collapseCards();
-    }
-    router.push({name: "manager.installed"});
-}
-
-async function toggleDarkTheme() {
-    await settings.value.toggleDarkTheme();
-    ThemeManager.apply();
-}
-
-function showLaunchParameters() {
-    GameInstructions.getInstructionsForGame(activeGame.value, profile.value).then(instructions => {
-        vanillaLaunchArgs.value = instructions.vanillaParameterList.map(value => `"${value}"`).join(' ');
-    });
-
-    GameRunnerProvider.instance.getGameArguments(activeGame.value, profile.value).then(target => {
-        if (target instanceof R2Error) {
-            doorstopTarget.value = "";
-        } else {
-            GameInstructionParser.parseList(target, activeGame.value, profile.value)
-                .then(instructions => {
-                    if (instructions instanceof R2Error) {
-                        throw instructions;
-                    }
-                    doorstopTarget.value = instructions.map(value => `"${value}"`).join(' ');
-                })
-        }
-    });
-
-    launchParametersModel.value = settings.value.getContext().gameSpecific.launchParameters;
-    showLaunchParameterModal.value = true;
-}
-
-function updateLaunchParameters() {
-    settings.value.setLaunchParameters(launchParametersModel.value);
-    showLaunchParameterModal.value = false;
-}
-
-async function copyLogToClipboard() {
-    const fs = FsProvider.instance;
-    let logOutputPath = "";
-    switch (activeGame.value.packageLoader) {
-        case PackageLoader.BEPINEX:
-        case PackageLoader.BEPISLOADER:
-            logOutputPath = path.join(profile.value.getProfilePath(), "BepInEx", "LogOutput.log");
-            break;
-        case PackageLoader.MELONLOADER:
-            logOutputPath = path.join(profile.value.getProfilePath(), "MelonLoader", "Latest.log");
-            break;
-        case PackageLoader.RETURN_OF_MODDING:
-            logOutputPath = path.join(profile.value.getProfilePath(), "ReturnOfModding", "LogOutput.log");
-            break;
-        case PackageLoader.GDWEAVE:
-            logOutputPath = path.join(profile.value.getProfilePath(), "GDWeave", "GDWeave.log");
-            break;
-        case PackageLoader.UMM:
-            logOutputPath = path.join(profile.value.getProfilePath(), "UMM", "Core", "Log.txt");
-            break;
-        case PackageLoader.RIVET:
-            logOutputPath = path.join(profile.value.getProfilePath(), "Rivet", "RivetLoader.log");
-            break;
-    }
-    const text = (await fs.readFile(logOutputPath)).toString();
-    if (text.length >= 1992) {
-        InteractionProvider.instance.copyToClipboard(text);
-    } else {
-        InteractionProvider.instance.copyToClipboard("```\n" + text + "\n```");
-    }
-}
-
-async function copyTroubleshootingInfoToClipboard() {
-    const content = await store.dispatch('profile/generateTroubleshootingString');
-    InteractionProvider.instance.copyToClipboard('```' + content + '```');
-}
-
-async function handleSettingsCallbacks(invokedSetting: any) {
-    switch(invokedSetting) {
-        case "BrowseDataFolder":
-            browseDataFolder();
-            break;
-        case "BrowseProfileFolder":
-            browseProfileFolder();
-            break;
-        case "ChangeSteamDirectory":
-            changeSteamDirectory();
-            break;
-        case "CopyLogToClipboard":
-            copyLogToClipboard();
-            break;
-        case "CopyTroubleshootingInfoToClipboard":
-            copyTroubleshootingInfoToClipboard();
-            break;
-        case "ToggleDownloadCache":
-            await store.dispatch('download/toggleIgnoreCache');
-            break;
-        case "ValidateSteamInstallation":
-            validateSteamInstallation();
-            break;
-        case "SetLaunchParameters":
-            showLaunchParameters();
-            break;
-        case "ChangeProfile":
-            router.push({name: "profiles"});
-            break;
-        case "ImportLocalMod":
-            importingLocalMod.value = true;
-            break;
-        case "ToggleFunkyMode":
-            setFunkyMode(!settings.value.getContext().global.funkyModeEnabled);
-            break;
-        case "SwitchTheme":
-            toggleDarkTheme();
-            document.documentElement.classList.toggle('html--dark', settings.value.getContext().global.darkTheme);
-            break;
-        case "SwitchCard":
-            toggleCardExpanded(!settings.value.getContext().global.expandedCards);
-            break;
-        case "EnableAll":
-            await store.dispatch(
-                "profile/enableModsOnActiveProfile",
-                {mods: localModList.value}
-            );
-            await router.push({name: "manager.installed"});
-            break;
-        case "DisableAll":
-            await store.dispatch(
-                "profile/disableModsFromActiveProfile",
-                {mods: localModList.value}
-            );
-            await router.push({name: "manager.installed"});
-            break;
-        case "UpdateAllMods":
-            store.commit("openUpdateAllModsModal");
-            break;
-        case "ShowDependencyStrings":
-            showDependencyStrings.value = true;
-            break;
-        case "CleanCache":
-            CacheUtil.clean();
-            break;
-    }
-}
-
 store.dispatch('profile/loadOrderingSettings');
 store.commit('modFilters/reset');
-
-onMounted(async () => {
-    launchParametersModel.value = settings.value.getContext().gameSpecific.launchParameters;
-})
-
 </script>
 
 <style lang="scss">
diff --git a/src/store/modules/ModalsModule.ts b/src/store/modules/ModalsModule.ts
index 775370fbd..a1b22528d 100644
--- a/src/store/modules/ModalsModule.ts
+++ b/src/store/modules/ModalsModule.ts
@@ -22,6 +22,10 @@ interface State {
     isProfileCodeExportModalOpen: boolean;
     isLocalFileImportModalOpen: boolean;
     isIncorrectGameDirectoryModalOpen: boolean;
+    isIncorrectSteamDirectoryModalOpen: boolean;
+    isDependencyStringsModalOpen: boolean;
+    isSteamInstallationValidationModalOpen: boolean;
+    isLaunchArgumentsModalOpen: boolean;
 }
 
 export default {
@@ -46,6 +50,10 @@ export default {
         isProfileCodeExportModalOpen: false,
         isLocalFileImportModalOpen: false,
         isIncorrectGameDirectoryModalOpen: false,
+        isIncorrectSteamDirectoryModalOpen: false,
+        isDependencyStringsModalOpen: false,
+        isSteamInstallationValidationModalOpen: false,
+        isLaunchArgumentsModalOpen: false,
     }),
 
     mutations: {
@@ -117,6 +125,22 @@ export default {
             state.isIncorrectGameDirectoryModalOpen = false;
         },
 
+        closeIncorrectSteamDirectoryModal: function(state: State): void {
+            state.isIncorrectSteamDirectoryModalOpen = false;
+        },
+
+        closeDependencyStringsModal: function(state: State): void {
+            state.isDependencyStringsModalOpen = false;
+        },
+
+        closeSteamInstallationValidationModal: function(state: State): void {
+            state.isSteamInstallationValidationModalOpen = false;
+        },
+
+        closeLaunchArgumentsModal: function(state: State): void {
+            state.isLaunchArgumentsModalOpen = false;
+        },
+
         openAssociatedModsModal: function(state: State, mod: ManifestV2): void {
             state.associatedModsModalMod = mod;
             state.isAssociatedModsModOpen = true;
@@ -184,5 +208,21 @@ export default {
         openIncorrectGameDirectoryModal: function(state: State): void {
             state.isIncorrectGameDirectoryModalOpen = true;
         },
+
+        openIncorrectSteamDirectoryModal: function(state: State): void {
+            state.isIncorrectSteamDirectoryModalOpen = true;
+        },
+
+        openDependencyStringsModal: function(state: State): void {
+            state.isDependencyStringsModalOpen = true;
+        },
+
+        openSteamInstallationValidationModal: function(state: State): void {
+            state.isSteamInstallationValidationModalOpen = true;
+        },
+
+        openLaunchArgumentsModal: function(state: State): void {
+            state.isLaunchArgumentsModalOpen = true;
+        },
     }
 }

From bf03f46810bcdf8979380801c5c04dd2bf422acc Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Tue, 14 Jul 2026 13:44:57 +0800
Subject: [PATCH 05/11] Game and steam directory changes are now reactive

---
 .../settings-components/v2/entries/GameDirectory.vue | 12 +++++++++---
 .../v2/entries/SteamDirectory.vue                    | 11 ++++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/settings-components/v2/entries/GameDirectory.vue b/src/components/settings-components/v2/entries/GameDirectory.vue
index db81e66fb..4856aa1d4 100644
--- a/src/components/settings-components/v2/entries/GameDirectory.vue
+++ b/src/components/settings-components/v2/entries/GameDirectory.vue
@@ -24,9 +24,11 @@ const props = defineProps<{
 const activeGame = computed<Game>(() => store.state.activeGame);
 const settings = ref<ManagerSettings | null>(null);
 
-const gameDirectory = computed<string>(() =>
-    settings.value?.getContext().gameSpecific.gameDirectory || 'Not set'
-);
+const gameDirectory = ref<string>('Not set');
+
+function syncGameDirectory() {
+    gameDirectory.value = settings.value?.getContext().gameSpecific.gameDirectory || 'Not set';
+}
 
 const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
     `${activeGame.value.displayName} folder`,
@@ -37,10 +39,12 @@ const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
 
 onMounted(async () => {
     settings.value = await ManagerSettings.getSingleton(activeGame.value);
+    syncGameDirectory();
 });
 
 watch(activeGame, async () => {
     settings.value = await ManagerSettings.getSingleton(activeGame.value);
+    syncGameDirectory();
 });
 
 function changeGameInstallDirectory() {
@@ -75,6 +79,7 @@ function changeGameInstallDirectoryGeneral() {
                 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])));
+                    syncGameDirectory();
                 } else {
                     store.commit('openIncorrectGameDirectoryModal');
                 }
@@ -99,6 +104,7 @@ function changeGameInstallDirectoryGamePass() {
                 const containsGameExecutable = (path.basename(files[0]!).toLowerCase() === "gamelaunchhelper.exe");
                 if (containsGameExecutable) {
                     await settings.value!.setGameDirectory(path.dirname(await FsProvider.instance.realpath(files[0]!)));
+                    syncGameDirectory();
                 } else {
                     throw new Error("The selected executable is not gamelaunchhelper.exe");
                 }
diff --git a/src/components/settings-components/v2/entries/SteamDirectory.vue b/src/components/settings-components/v2/entries/SteamDirectory.vue
index 9667082fc..f82ee725a 100644
--- a/src/components/settings-components/v2/entries/SteamDirectory.vue
+++ b/src/components/settings-components/v2/entries/SteamDirectory.vue
@@ -25,9 +25,11 @@ const appName = ManagerInformation.APP_NAME;
 const activeGame = computed<Game>(() => store.state.activeGame);
 const settings = ref<ManagerSettings | null>(null);
 
-const steamDirectory = computed<string>(() =>
-    settings.value?.getContext().global.steamDirectory || 'Not set'
-);
+const steamDirectory = ref<string>('Not set');
+
+function syncSteamDirectory() {
+    steamDirectory.value = settings.value?.getContext().global.steamDirectory || 'Not set';
+}
 
 const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
     'Change Steam folder',
@@ -38,10 +40,12 @@ const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
 
 onMounted(async () => {
     settings.value = await ManagerSettings.getSingleton(activeGame.value);
+    syncSteamDirectory();
 });
 
 watch(activeGame, async () => {
     settings.value = await ManagerSettings.getSingleton(activeGame.value);
+    syncSteamDirectory();
 });
 
 function computeDefaultSteamDirectory(): string {
@@ -85,6 +89,7 @@ function changeSteamDirectory() {
             try {
                 if (await checkIfSteamExecutableIsValid(files[0]!)) {
                     await settings.value!.setSteamDirectory(path.dirname(await FsProvider.instance.realpath(files[0]!)));
+                    syncSteamDirectory();
                 } else {
                     store.commit('openIncorrectSteamDirectoryModal');
                 }

From d5a66971daf198a6a3a29716f4764f9be891190f Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Tue, 14 Jul 2026 14:06:07 +0800
Subject: [PATCH 06/11] Made SCSS styling reusable across
 SettingsViewWrapper-based components

---
 .../v2/SettingsViewWrapper.vue                | 36 ++++++++++++++++
 .../v2/entries/DataDirectory.vue              | 41 ++++---------------
 .../v2/entries/ExpandCards.vue                |  6 ---
 .../v2/entries/ExportProfile.vue              | 11 +----
 .../v2/entries/FunkyMode.vue                  |  6 ---
 .../v2/entries/GameDirectory.vue              | 25 ++---------
 .../v2/entries/ModCache.vue                   | 34 +++------------
 .../v2/entries/ModState.vue                   | 11 +----
 .../v2/entries/OnlineModList.vue              | 11 +----
 .../v2/entries/SteamDirectory.vue             | 27 ++----------
 10 files changed, 57 insertions(+), 151 deletions(-)

diff --git a/src/components/settings-components/v2/SettingsViewWrapper.vue b/src/components/settings-components/v2/SettingsViewWrapper.vue
index 9add0ee9a..b3fc4770d 100644
--- a/src/components/settings-components/v2/SettingsViewWrapper.vue
+++ b/src/components/settings-components/v2/SettingsViewWrapper.vue
@@ -56,6 +56,42 @@ const category = inject<Ref<string>>('settingsCategory', ref(''));
         align-items: center;
         flex-wrap: wrap;
         gap: 0.5rem;
+
+        :deep(.switch) {
+            position: relative;
+            max-width: 0;
+        }
+
+        :deep(.setting-column) {
+            display: flex;
+            flex-direction: column;
+            gap: 0.6rem;
+            flex: 1;
+        }
+
+        :deep(.setting-row) {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        :deep(.setting-label) {
+            flex: 0 0 6.5rem;
+            font-size: 0.9rem;
+            color: var(--text-secondary, #6b6464);
+        }
+
+        :deep(.setting-input) {
+            flex: 1;
+            min-width: 14rem;
+            max-width: 35rem;
+        }
+
+        :deep(.setting-hint) {
+            font-size: 0.85rem;
+            color: var(--text-secondary, #6b6464);
+        }
     }
 }
 </style>
diff --git a/src/components/settings-components/v2/entries/DataDirectory.vue b/src/components/settings-components/v2/entries/DataDirectory.vue
index a48ee5148..aa77c9194 100644
--- a/src/components/settings-components/v2/entries/DataDirectory.vue
+++ b/src/components/settings-components/v2/entries/DataDirectory.vue
@@ -81,11 +81,11 @@ function browseProfileFolder() {
             The folder where mods are stored for all games and profiles.
             The folder will not be deleted, and existing profiles will not carry across.
         </template>
-        <div class="directory-settings">
-            <div class="directory-settings__row">
-                <label class="directory-settings__label">Data folder</label>
+        <div class="setting-column">
+            <div class="setting-row">
+                <label class="setting-label">Data folder</label>
                 <input
-                    class="input directory-settings__input"
+                    class="input setting-input"
                     type="text"
                     :value="dataDirectory"
                     readonly
@@ -93,10 +93,10 @@ function browseProfileFolder() {
                 <button class="button" @click="changeDataFolder">Change</button>
                 <button class="button" @click="browseDataFolder">Browse</button>
             </div>
-            <div class="directory-settings__row">
-                <label class="directory-settings__label">Profile folder</label>
+            <div class="setting-row">
+                <label class="setting-label">Profile folder</label>
                 <input
-                    class="input directory-settings__input"
+                    class="input setting-input"
                     type="text"
                     :value="profileDirectory"
                     readonly
@@ -106,30 +106,3 @@ function browseProfileFolder() {
         </div>
     </SettingsViewWrapper>
 </template>
-
-<style lang="scss" scoped>
-.directory-settings {
-    display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
-    flex: 1;
-
-    &__row {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-
-    &__label {
-        flex: 0 0 6.5rem;
-        font-size: 0.9rem;
-        color: var(--text-secondary, #6b6464);
-    }
-
-    &__input {
-        flex: 1;
-        min-width: 14rem;
-        max-width: 35rem;
-    }
-}
-</style>
diff --git a/src/components/settings-components/v2/entries/ExpandCards.vue b/src/components/settings-components/v2/entries/ExpandCards.vue
index 1912e71ca..3cd3695a9 100644
--- a/src/components/settings-components/v2/entries/ExpandCards.vue
+++ b/src/components/settings-components/v2/entries/ExpandCards.vue
@@ -54,9 +54,3 @@ async function setExpanded(expanded: boolean) {
         </div>
     </SettingsViewWrapper>
 </template>
-
-<style scoped lang="scss">
-.switch {
-    position: relative;
-}
-</style>
diff --git a/src/components/settings-components/v2/entries/ExportProfile.vue b/src/components/settings-components/v2/entries/ExportProfile.vue
index a9eda12a4..f3c27c3f2 100644
--- a/src/components/settings-components/v2/entries/ExportProfile.vue
+++ b/src/components/settings-components/v2/entries/ExportProfile.vue
@@ -42,7 +42,7 @@ async function exportProfile(as: 'file' | 'code', action: string) {
         <template #description>
             Export your mod list and configs to share with friends and get an identical profile quickly and easily.
         </template>
-        <div class="export-profile-setting">
+        <div class="setting-row">
             <button
                 class="button"
                 :class="{ 'is-loading': activeExport === 'file' }"
@@ -62,12 +62,3 @@ async function exportProfile(as: 'file' | 'code', action: string) {
         </div>
     </SettingsViewWrapper>
 </template>
-
-<style lang="scss" scoped>
-.export-profile-setting {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-}
-</style>
diff --git a/src/components/settings-components/v2/entries/FunkyMode.vue b/src/components/settings-components/v2/entries/FunkyMode.vue
index e5648e25a..14e241f76 100644
--- a/src/components/settings-components/v2/entries/FunkyMode.vue
+++ b/src/components/settings-components/v2/entries/FunkyMode.vue
@@ -47,9 +47,3 @@ async function setFunkyMode(enabled: boolean) {
         </div>
     </SettingsViewWrapper>
 </template>
-
-<style scoped lang="scss">
-.switch {
-    position: relative;
-}
-</style>
diff --git a/src/components/settings-components/v2/entries/GameDirectory.vue b/src/components/settings-components/v2/entries/GameDirectory.vue
index 4856aa1d4..66b3f29ed 100644
--- a/src/components/settings-components/v2/entries/GameDirectory.vue
+++ b/src/components/settings-components/v2/entries/GameDirectory.vue
@@ -149,10 +149,10 @@ function browseDirectory() {
                 However <code class="code">{{ activeGame.displayName }}</code> will launch without mods if this is not set appropriately.
             </span>
         </template>
-        <div class="game-directory-setting">
-            <div class="game-directory-setting__field">
+        <div class="setting-column">
+            <div class="setting-row">
                 <input
-                    class="input game-directory-setting__input"
+                    class="input setting-input"
                     type="text"
                     :value="gameDirectory"
                     readonly
@@ -166,25 +166,6 @@ function browseDirectory() {
 </template>
 
 <style lang="scss" scoped>
-.game-directory-setting {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-    flex: 1;
-
-    &__field {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-
-    &__input {
-        flex: 1;
-        min-width: 14rem;
-        max-width: 35rem;
-    }
-}
-
 .help-link {
     font-size: 0.9rem;
     align-self: flex-start;
diff --git a/src/components/settings-components/v2/entries/ModCache.vue b/src/components/settings-components/v2/entries/ModCache.vue
index 5f391478a..0091fbcd0 100644
--- a/src/components/settings-components/v2/entries/ModCache.vue
+++ b/src/components/settings-components/v2/entries/ModCache.vue
@@ -47,7 +47,7 @@ async function cleanCache() {
         <template #description>
             Downloaded mods are kept in a cache so that they don't need to be downloaded again.
         </template>
-        <div class="mod-cache-setting">
+        <div class="setting-column">
             <div class="field" @click.prevent.stop="toggleCache">
                 <input
                     id="toggle-download-cache"
@@ -58,9 +58,10 @@ async function cleanCache() {
                 <label for="toggle-download-cache">
                     {{ cacheEnabled ? 'Enabled' : 'Disabled' }}
                 </label>
-                <div class="mod-cache-setting__hint" @click.stop.prevent>{{ cacheEnabled ? 'Reusing cached downloads (recommended)' : 'Re-downloading every time' }}</div>
+                <p class="setting-hint" @click.stop.prevent>{{ cacheEnabled ? 'Reusing cached downloads (recommended)' : 'Ignores the cache when downloading mods. Re-downloads each time.' }}</p>
+                <p class="setting-hint" v-if="!cacheEnabled" @click.stop.prevent>Mods will still be written to the cache and will continue to use disk space.</p>
             </div>
-            <div class="mod-cache-setting__clean">
+            <div class="setting-row">
                 <button
                     class="button"
                     :class="{ 'is-loading': isCleaning }"
@@ -69,33 +70,8 @@ async function cleanCache() {
                 >
                     Clean cache
                 </button>
-                <span class="mod-cache-setting__hint">Removes cached mods that aren't in any profile to free up storage space.</span>
+                <span class="setting-hint">Removes cached mods that aren't in any profile to free up storage space.</span>
             </div>
         </div>
     </SettingsViewWrapper>
 </template>
-
-<style scoped lang="scss">
-.mod-cache-setting {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    flex: 1;
-
-    &__clean {
-        display: flex;
-        align-items: center;
-        gap: 0.6rem;
-        flex-wrap: wrap;
-    }
-
-    &__hint {
-        font-size: 0.85rem;
-        color: var(--text-secondary, #6b6464);
-    }
-}
-
-.switch {
-    position: relative;
-}
-</style>
diff --git a/src/components/settings-components/v2/entries/ModState.vue b/src/components/settings-components/v2/entries/ModState.vue
index 9f4c1cd2f..6ed0f9df3 100644
--- a/src/components/settings-components/v2/entries/ModState.vue
+++ b/src/components/settings-components/v2/entries/ModState.vue
@@ -67,7 +67,7 @@ async function disableAllMods() {
         <p>Enable / disable all of the mods on your profile</p>
         <p>{{ statusText }}</p>
         </template>
-        <div class="export-profile-setting">
+        <div class="setting-row">
             <button
                 class="button"
                 :class="{ 'is-loading': isEnablingState }"
@@ -87,12 +87,3 @@ async function disableAllMods() {
         </div>
     </SettingsViewWrapper>
 </template>
-
-<style lang="scss" scoped>
-.export-profile-setting {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-}
-</style>
diff --git a/src/components/settings-components/v2/entries/OnlineModList.vue b/src/components/settings-components/v2/entries/OnlineModList.vue
index 365ea5145..2bd0cd3e4 100644
--- a/src/components/settings-components/v2/entries/OnlineModList.vue
+++ b/src/components/settings-components/v2/entries/OnlineModList.vue
@@ -71,7 +71,7 @@ async function cleanCache() {
         </p>
         <p>{{ status }}</p>
         </template>
-        <div class="online-mod-list-setting">
+        <div class="setting-row">
             <button
                 class="button"
                 :class="{ 'is-loading': isRefreshing && !isCleaning }"
@@ -91,12 +91,3 @@ async function cleanCache() {
         </div>
     </SettingsViewWrapper>
 </template>
-
-<style scoped lang="scss">
-.online-mod-list-setting {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-}
-</style>
diff --git a/src/components/settings-components/v2/entries/SteamDirectory.vue b/src/components/settings-components/v2/entries/SteamDirectory.vue
index f82ee725a..98d30a907 100644
--- a/src/components/settings-components/v2/entries/SteamDirectory.vue
+++ b/src/components/settings-components/v2/entries/SteamDirectory.vue
@@ -115,10 +115,10 @@ function browseDirectory() {
         <template #description>
             Change the location of the Steam folder that {{ appName }} uses.
         </template>
-        <div class="steam-directory-setting">
-            <div class="steam-directory-setting__field">
+        <div class="setting-column">
+            <div class="setting-row">
                 <input
-                    class="input steam-directory-setting__input"
+                    class="input setting-input"
                     type="text"
                     :value="steamDirectory"
                     readonly
@@ -129,24 +129,3 @@ function browseDirectory() {
         </div>
     </SettingsViewWrapper>
 </template>
-
-<style lang="scss" scoped>
-.steam-directory-setting {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-    flex: 1;
-
-    &__field {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-
-    &__input {
-        flex: 1;
-        min-width: 14rem;
-        max-width: 35rem;
-    }
-}
-</style>

From 12cb1f1e6ff7d6d5beb9b8779bab2e46fc9d5f51 Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Tue, 14 Jul 2026 14:08:22 +0800
Subject: [PATCH 07/11] Help action in GameDirectory setting now opens the help
 wiki page

---
 .../settings-components/v2/entries/GameDirectory.vue     | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/settings-components/v2/entries/GameDirectory.vue b/src/components/settings-components/v2/entries/GameDirectory.vue
index 66b3f29ed..9eaff7bc4 100644
--- a/src/components/settings-components/v2/entries/GameDirectory.vue
+++ b/src/components/settings-components/v2/entries/GameDirectory.vue
@@ -13,7 +13,8 @@ import LinkProvider from '../../../../providers/components/LinkProvider';
 import AppWindow from '../../../../providers/node/app/app_window';
 import os from '../../../../providers/node/os/os';
 import R2Error from '../../../../model/errors/R2Error';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../../components/composables/SettingSearchComposable';
+import ManagerInformation from '../../../../_managerinf/ManagerInformation';
 
 const store = getStore<State>();
 
@@ -138,6 +139,10 @@ function browseDirectory() {
         LinkProvider.instance.openLink(settings.value?.getContext().gameSpecific.gameDirectory!)
     }
 }
+
+function openHelpLink() {
+    LinkProvider.instance.openLink(ManagerInformation.WIKI_GAME_DIRECTORY_HELP_URL);
+}
 </script>
 
 <template>
@@ -160,7 +165,7 @@ function browseDirectory() {
                 <button class="button" @click="changeGameInstallDirectory">Change</button>
                 <button class="button" @click="browseDirectory">Browse</button>
             </div>
-            <a href="#" class="help-link">I'm not sure what this should be</a>
+            <a href="#" class="help-link" @click.prevent.stop="openHelpLink">I'm not sure what this should be</a>
         </div>
     </SettingsViewWrapper>
 </template>

From 48e2f34e24e9aacbb08e8f22885a7a431ec7a6c7 Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Tue, 14 Jul 2026 14:12:43 +0800
Subject: [PATCH 08/11] Fixed non-relative imports

---
 .../settings-components/v2/entries/ChangeLaunchBehaviour.vue    | 2 +-
 .../settings-components/v2/entries/CopyLogToClipboard.vue       | 2 +-
 .../settings-components/v2/entries/CopyTroubleshooting.vue      | 2 +-
 src/components/settings-components/v2/entries/DataDirectory.vue | 2 +-
 src/components/settings-components/v2/entries/ExpandCards.vue   | 2 +-
 src/components/settings-components/v2/entries/ExportProfile.vue | 2 +-
 src/components/settings-components/v2/entries/FunkyMode.vue     | 2 +-
 .../settings-components/v2/entries/ImportLocalMod.vue           | 2 +-
 .../settings-components/v2/entries/LaunchArguments.vue          | 2 +-
 src/components/settings-components/v2/entries/ModCache.vue      | 2 +-
 src/components/settings-components/v2/entries/ModState.vue      | 2 +-
 src/components/settings-components/v2/entries/OnlineModList.vue | 2 +-
 .../settings-components/v2/entries/ResetGameInstallation.vue    | 2 +-
 .../settings-components/v2/entries/ShowDependencyStrings.vue    | 2 +-
 .../settings-components/v2/entries/SteamDirectory.vue           | 2 +-
 src/components/settings-components/v2/entries/Theme.vue         | 2 +-
 src/components/settings-components/v2/entries/ToggleCdn.vue     | 2 +-
 17 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/settings-components/v2/entries/ChangeLaunchBehaviour.vue b/src/components/settings-components/v2/entries/ChangeLaunchBehaviour.vue
index 598b695c9..47fe2e524 100644
--- a/src/components/settings-components/v2/entries/ChangeLaunchBehaviour.vue
+++ b/src/components/settings-components/v2/entries/ChangeLaunchBehaviour.vue
@@ -4,7 +4,7 @@ import Game from '../../../../model/game/Game';
 import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 import { getLaunchType, LaunchType } from '../../../../model/real_enums/launch/LaunchType';
 import { LaunchTypeModalOpen } from '../../../../components/modals/launch-type/LaunchTypeRefs';
 
diff --git a/src/components/settings-components/v2/entries/CopyLogToClipboard.vue b/src/components/settings-components/v2/entries/CopyLogToClipboard.vue
index ab19b3de9..928c44be2 100644
--- a/src/components/settings-components/v2/entries/CopyLogToClipboard.vue
+++ b/src/components/settings-components/v2/entries/CopyLogToClipboard.vue
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 import FsProvider from '../../../../providers/generic/file/FsProvider';
 import path from '../../../../providers/node/path/path';
 import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
diff --git a/src/components/settings-components/v2/entries/CopyTroubleshooting.vue b/src/components/settings-components/v2/entries/CopyTroubleshooting.vue
index dac77d0d5..7ccde59b3 100644
--- a/src/components/settings-components/v2/entries/CopyTroubleshooting.vue
+++ b/src/components/settings-components/v2/entries/CopyTroubleshooting.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
 import R2Error from '../../../../model/errors/R2Error';
 
diff --git a/src/components/settings-components/v2/entries/DataDirectory.vue b/src/components/settings-components/v2/entries/DataDirectory.vue
index aa77c9194..297238412 100644
--- a/src/components/settings-components/v2/entries/DataDirectory.vue
+++ b/src/components/settings-components/v2/entries/DataDirectory.vue
@@ -10,7 +10,7 @@ import { State } from '../../../../store';
 import Game from '../../../../model/game/Game';
 import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
 import R2Error from '../../../../model/errors/R2Error';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/ExpandCards.vue b/src/components/settings-components/v2/entries/ExpandCards.vue
index 3cd3695a9..350584966 100644
--- a/src/components/settings-components/v2/entries/ExpandCards.vue
+++ b/src/components/settings-components/v2/entries/ExpandCards.vue
@@ -4,7 +4,7 @@ import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/ExportProfile.vue b/src/components/settings-components/v2/entries/ExportProfile.vue
index f3c27c3f2..d8957c2dd 100644
--- a/src/components/settings-components/v2/entries/ExportProfile.vue
+++ b/src/components/settings-components/v2/entries/ExportProfile.vue
@@ -4,7 +4,7 @@ import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import R2Error from '../../../../model/errors/R2Error';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/FunkyMode.vue b/src/components/settings-components/v2/entries/FunkyMode.vue
index 14e241f76..628c0108c 100644
--- a/src/components/settings-components/v2/entries/FunkyMode.vue
+++ b/src/components/settings-components/v2/entries/FunkyMode.vue
@@ -4,7 +4,7 @@ import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 const settings = ref<ManagerSettings | null>(null);
diff --git a/src/components/settings-components/v2/entries/ImportLocalMod.vue b/src/components/settings-components/v2/entries/ImportLocalMod.vue
index e2b7ee12a..abda6d8ac 100644
--- a/src/components/settings-components/v2/entries/ImportLocalMod.vue
+++ b/src/components/settings-components/v2/entries/ImportLocalMod.vue
@@ -2,7 +2,7 @@
 import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/LaunchArguments.vue b/src/components/settings-components/v2/entries/LaunchArguments.vue
index 3f7a0b776..0a5cdf1a8 100644
--- a/src/components/settings-components/v2/entries/LaunchArguments.vue
+++ b/src/components/settings-components/v2/entries/LaunchArguments.vue
@@ -2,7 +2,7 @@
 import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/ModCache.vue b/src/components/settings-components/v2/entries/ModCache.vue
index 0091fbcd0..a3aaf956b 100644
--- a/src/components/settings-components/v2/entries/ModCache.vue
+++ b/src/components/settings-components/v2/entries/ModCache.vue
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 import CacheUtil from '../../../../r2mm/mods/CacheUtil';
 import R2Error from '../../../../model/errors/R2Error';
 
diff --git a/src/components/settings-components/v2/entries/ModState.vue b/src/components/settings-components/v2/entries/ModState.vue
index 6ed0f9df3..d7f825f12 100644
--- a/src/components/settings-components/v2/entries/ModState.vue
+++ b/src/components/settings-components/v2/entries/ModState.vue
@@ -6,7 +6,7 @@ import R2Error from '../../../../model/errors/R2Error';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
 import { useSettingSearch } from '../../../../components/composables/SettingSearchComposable';
 import { useRouter } from 'vue-router';
-import ManifestV2 from 'src/model/ManifestV2';
+import ManifestV2 from '../../../../model/ManifestV2';
 
 const store = getStore<State>();
 const router = useRouter();
diff --git a/src/components/settings-components/v2/entries/OnlineModList.vue b/src/components/settings-components/v2/entries/OnlineModList.vue
index 2bd0cd3e4..1dfbf2f52 100644
--- a/src/components/settings-components/v2/entries/OnlineModList.vue
+++ b/src/components/settings-components/v2/entries/OnlineModList.vue
@@ -4,7 +4,7 @@ import moment from 'moment';
 import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 import R2Error from '../../../../model/errors/R2Error';
 
 const store = getStore<State>();
diff --git a/src/components/settings-components/v2/entries/ResetGameInstallation.vue b/src/components/settings-components/v2/entries/ResetGameInstallation.vue
index 034fa4c9f..7adcdc5f3 100644
--- a/src/components/settings-components/v2/entries/ResetGameInstallation.vue
+++ b/src/components/settings-components/v2/entries/ResetGameInstallation.vue
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 import { SteamInstallationValidator } from '../../../../r2mm/manager/SteamInstallationValidator';
 import R2Error from '../../../../model/errors/R2Error';
 
diff --git a/src/components/settings-components/v2/entries/ShowDependencyStrings.vue b/src/components/settings-components/v2/entries/ShowDependencyStrings.vue
index e0403b65a..210fb30a4 100644
--- a/src/components/settings-components/v2/entries/ShowDependencyStrings.vue
+++ b/src/components/settings-components/v2/entries/ShowDependencyStrings.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/SteamDirectory.vue b/src/components/settings-components/v2/entries/SteamDirectory.vue
index 98d30a907..392a1a1f4 100644
--- a/src/components/settings-components/v2/entries/SteamDirectory.vue
+++ b/src/components/settings-components/v2/entries/SteamDirectory.vue
@@ -5,7 +5,7 @@ import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
 import path from '../../../../providers/node/path/path';
 import FsProvider from '../../../../providers/generic/file/FsProvider';
diff --git a/src/components/settings-components/v2/entries/Theme.vue b/src/components/settings-components/v2/entries/Theme.vue
index 43f2612ca..0ee8d30cc 100644
--- a/src/components/settings-components/v2/entries/Theme.vue
+++ b/src/components/settings-components/v2/entries/Theme.vue
@@ -5,7 +5,7 @@ import { State } from '../../../../store';
 import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
 import ThemeManager from '../../../../r2mm/manager/ThemeManager';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 const settings = ref<ManagerSettings | null>(null);
diff --git a/src/components/settings-components/v2/entries/ToggleCdn.vue b/src/components/settings-components/v2/entries/ToggleCdn.vue
index bddd37d27..0936635a2 100644
--- a/src/components/settings-components/v2/entries/ToggleCdn.vue
+++ b/src/components/settings-components/v2/entries/ToggleCdn.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 import CdnProvider from '../../../../providers/generic/connection/CdnProvider';
 
 const props = defineProps<{

From 76555e1bce707e27e8cfe5fc06e0cdf9ed48b12d Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Tue, 14 Jul 2026 14:16:13 +0800
Subject: [PATCH 09/11] Reduced import path traversal

---
 src/components/settings-components/v2/entries/GameDirectory.vue | 2 +-
 src/components/settings-components/v2/entries/ModState.vue      | 2 +-
 src/components/settings-components/v2/entries/UpdateAllMods.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/settings-components/v2/entries/GameDirectory.vue b/src/components/settings-components/v2/entries/GameDirectory.vue
index 9eaff7bc4..258859def 100644
--- a/src/components/settings-components/v2/entries/GameDirectory.vue
+++ b/src/components/settings-components/v2/entries/GameDirectory.vue
@@ -13,7 +13,7 @@ import LinkProvider from '../../../../providers/components/LinkProvider';
 import AppWindow from '../../../../providers/node/app/app_window';
 import os from '../../../../providers/node/os/os';
 import R2Error from '../../../../model/errors/R2Error';
-import { useSettingSearch } from '../../../../components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 import ManagerInformation from '../../../../_managerinf/ManagerInformation';
 
 const store = getStore<State>();
diff --git a/src/components/settings-components/v2/entries/ModState.vue b/src/components/settings-components/v2/entries/ModState.vue
index d7f825f12..28b2ca590 100644
--- a/src/components/settings-components/v2/entries/ModState.vue
+++ b/src/components/settings-components/v2/entries/ModState.vue
@@ -4,7 +4,7 @@ import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import R2Error from '../../../../model/errors/R2Error';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../../components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 import { useRouter } from 'vue-router';
 import ManifestV2 from '../../../../model/ManifestV2';
 
diff --git a/src/components/settings-components/v2/entries/UpdateAllMods.vue b/src/components/settings-components/v2/entries/UpdateAllMods.vue
index 1d27968ed..99367940d 100644
--- a/src/components/settings-components/v2/entries/UpdateAllMods.vue
+++ b/src/components/settings-components/v2/entries/UpdateAllMods.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { getStore } from '../../../../providers/generic/store/StoreProvider';
 import { State } from '../../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../../components/composables/SettingSearchComposable';
+import { useSettingSearch } from '../../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 

From 3305acf14ed02ba4dffd9a0092bb4e0bd5d1cdaa Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Tue, 14 Jul 2026 14:22:01 +0800
Subject: [PATCH 10/11] Simplified SettingSearchComposable searching

---
 .../composables/SettingSearchComposable.ts    | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/composables/SettingSearchComposable.ts b/src/components/composables/SettingSearchComposable.ts
index 4c3f2ac1a..3f008eaa3 100644
--- a/src/components/composables/SettingSearchComposable.ts
+++ b/src/components/composables/SettingSearchComposable.ts
@@ -4,20 +4,27 @@ import SearchUtils from '../../utils/SearchUtils';
 
 export type SettingSearchPhrases = MaybeRefOrGetter<(string | undefined | null)[]>;
 
+function isNonEmptyPhrase(phrase: string | undefined | null): phrase is string {
+    return phrase !== null && phrase !== undefined && phrase !== '';
+}
+
 export function useSettingSearch(
     searchTerm: MaybeRefOrGetter<string | undefined>,
     keyPhrases: SettingSearchPhrases
 ): { isVisible: ComputedRef<boolean> } {
     const isVisible = computed<boolean>(() => {
-        const term = toValue(searchTerm);
-        if (!term) {
+        const activeSearchTerm = toValue(searchTerm);
+        if (!activeSearchTerm) {
             return true;
         }
-        const keys = SearchUtils.makeKeys(term);
-        const haystack = toValue(keyPhrases)
-            .filter((phrase): phrase is string => Boolean(phrase))
-            .join(' ');
-        return SearchUtils.isSearched(keys, haystack);
+
+        const searchKeys = SearchUtils.makeKeys(activeSearchTerm);
+
+        const resolvedPhrases = toValue(keyPhrases);
+        const nonEmptyPhrases = resolvedPhrases.filter(isNonEmptyPhrase);
+        const searchableText = nonEmptyPhrases.join(' ');
+
+        return SearchUtils.isSearched(searchKeys, searchableText);
     });
 
     return { isVisible };

From 2ea52180e079ba4ec52d7f5726061eeb87de5a62 Mon Sep 17 00:00:00 2001
From: cade <cade.ayres@riskidev.fi>
Date: Tue, 14 Jul 2026 14:32:40 +0800
Subject: [PATCH 11/11] Deleted old Settings components and moved new
 components out of v2 folder

---
 .../settings-components/SettingsItem.vue      |  63 --
 .../{v2 => }/SettingsSection.vue              |   0
 .../settings-components/SettingsView.vue      | 536 +++++-------------
 .../{v2 => }/SettingsViewWrapper.vue          |   0
 .../entries/ChangeLaunchBehaviour.vue         |  12 +-
 .../entries/CleanOnlineModListCache.vue       |  63 ++
 .../{v2 => }/entries/CopyLogToClipboard.vue   |  16 +-
 .../{v2 => }/entries/CopyTroubleshooting.vue  |  10 +-
 .../{v2 => }/entries/DataDirectory.vue        |  20 +-
 .../entries/DownloadCache.vue                 |  49 ++
 .../{v2 => }/entries/ExpandCards.vue          |   8 +-
 .../{v2 => }/entries/ExportProfile.vue        |   8 +-
 .../{v2 => }/entries/FunkyMode.vue            |   8 +-
 .../{v2 => }/entries/GameDirectory.vue        |  32 +-
 .../{v2 => }/entries/ImportLocalMod.vue       |   6 +-
 .../{v2 => }/entries/LaunchArguments.vue      |   6 +-
 .../{v2 => }/entries/ModCache.vue             |  10 +-
 .../{v2 => }/entries/ModState.vue             |  10 +-
 .../{v2 => }/entries/OnlineModList.vue        |   8 +-
 .../entries/RefreshOnlineModList.vue          |  62 ++
 .../entries/ResetGameInstallation.vue         |  10 +-
 .../entries/ShowDependencyStrings.vue         |   6 +-
 .../{v2 => }/entries/SteamDirectory.vue       |  26 +-
 .../{v2 => }/entries/Theme.vue                |  10 +-
 .../{v2 => }/entries/ToggleCdn.vue            |   4 +-
 .../{v2 => }/entries/UpdateAllMods.vue        |   6 +-
 .../settings-components/v2/SettingsView.vue   | 162 ------
 .../loaders/bind_impls/BindLoaderImpl.ts      |   2 +-
 src/router/routes.ts                          |   2 +-
 29 files changed, 411 insertions(+), 744 deletions(-)
 delete mode 100644 src/components/settings-components/SettingsItem.vue
 rename src/components/settings-components/{v2 => }/SettingsSection.vue (100%)
 rename src/components/settings-components/{v2 => }/SettingsViewWrapper.vue (100%)
 rename src/components/settings-components/{v2 => }/entries/ChangeLaunchBehaviour.vue (76%)
 create mode 100644 src/components/settings-components/entries/CleanOnlineModListCache.vue
 rename src/components/settings-components/{v2 => }/entries/CopyLogToClipboard.vue (83%)
 rename src/components/settings-components/{v2 => }/entries/CopyTroubleshooting.vue (80%)
 rename src/components/settings-components/{v2 => }/entries/DataDirectory.vue (81%)
 create mode 100644 src/components/settings-components/entries/DownloadCache.vue
 rename src/components/settings-components/{v2 => }/entries/ExpandCards.vue (85%)
 rename src/components/settings-components/{v2 => }/entries/ExportProfile.vue (87%)
 rename src/components/settings-components/{v2 => }/entries/FunkyMode.vue (83%)
 rename src/components/settings-components/{v2 => }/entries/GameDirectory.vue (85%)
 rename src/components/settings-components/{v2 => }/entries/ImportLocalMod.vue (79%)
 rename src/components/settings-components/{v2 => }/entries/LaunchArguments.vue (79%)
 rename src/components/settings-components/{v2 => }/entries/ModCache.vue (88%)
 rename src/components/settings-components/{v2 => }/entries/ModState.vue (89%)
 rename src/components/settings-components/{v2 => }/entries/OnlineModList.vue (91%)
 create mode 100644 src/components/settings-components/entries/RefreshOnlineModList.vue
 rename src/components/settings-components/{v2 => }/entries/ResetGameInstallation.vue (82%)
 rename src/components/settings-components/{v2 => }/entries/ShowDependencyStrings.vue (83%)
 rename src/components/settings-components/{v2 => }/entries/SteamDirectory.vue (82%)
 rename src/components/settings-components/{v2 => }/entries/Theme.vue (81%)
 rename src/components/settings-components/{v2 => }/entries/ToggleCdn.vue (86%)
 rename src/components/settings-components/{v2 => }/entries/UpdateAllMods.vue (85%)
 delete mode 100644 src/components/settings-components/v2/SettingsView.vue

diff --git a/src/components/settings-components/SettingsItem.vue b/src/components/settings-components/SettingsItem.vue
deleted file mode 100644
index 9b28b8f16..000000000
--- a/src/components/settings-components/SettingsItem.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import Timeout = NodeJS.Timeout;
-import { onMounted, ref, onUnmounted } from 'vue';
-
-type SettingsItemProps = {
-    action?: string;
-    description?: string;
-    value?: () => Promise<any>;
-    icon?: string;
-}
-
-const reactiveValue = ref<any | null>(null);
-const timeout = ref<Timeout | null>(null);
-
-const props = withDefaults(defineProps<SettingsItemProps>(), {
-    action: '',
-    description: '',
-    icon: '',
-    value: Promise.resolve
-});
-
-const emits = defineEmits<{
-    (e: 'click'): void;
-}>();
-
-onMounted(async () => {
-    if (timeout.value !== null) {
-        clearInterval(timeout.value);
-    }
-    props.value().then(value => reactiveValue.value = value);
-    timeout.value = setInterval(() => {
-        props.value().then(value => reactiveValue.value = value);
-    }, 1000);
-});
-
-onUnmounted(() => {
-    if (timeout.value !== null) {
-        clearInterval(timeout.value);
-        timeout.value = null;
-    }
-})
-
-function emitClick() {
-    emits('click');
-    setTimeout(() => {
-        props.value().then(value => reactiveValue.value = value);
-    }, 20);
-}
-
-</script>
-
-<template>
-    <a class="panel-block is-block settings-panel" @click="emitClick()">
-        <span class="icon is-pulled-right">
-            <i :class="['fas', icon]" aria-hidden="true"></i>
-        </span>
-        <div class="settings-panel__content">
-            <p class="title is-6 is-marginless">{{action}}</p>
-            <p class="subtitle is-italic is-bold is-6 is-marginless">{{description}}</p>
-            <p class="subtitle is-6 text-grey" v-if="reactiveValue !== null">{{reactiveValue}}</p>
-        </div>
-    </a>
-</template>
diff --git a/src/components/settings-components/v2/SettingsSection.vue b/src/components/settings-components/SettingsSection.vue
similarity index 100%
rename from src/components/settings-components/v2/SettingsSection.vue
rename to src/components/settings-components/SettingsSection.vue
diff --git a/src/components/settings-components/SettingsView.vue b/src/components/settings-components/SettingsView.vue
index e804198fa..0c5ce4101 100644
--- a/src/components/settings-components/SettingsView.vue
+++ b/src/components/settings-components/SettingsView.vue
@@ -1,434 +1,129 @@
 <script lang="ts" setup>
-import SettingsItem from './SettingsItem.vue';
-import SettingsRow from '../../model/settings/SettingsRow';
-import ManagerSettings from '../../r2mm/manager/ManagerSettings';
-import GameDirectoryResolverProvider from '../../providers/ror2/game/GameDirectoryResolverProvider';
-import R2Error from '../../model/errors/R2Error';
-import PathResolver from '../../r2mm/manager/PathResolver';
-import LogOutputProvider from '../../providers/ror2/data/LogOutputProvider';
+import { computed, ref } from 'vue';
 import VersionNumber from '../../model/VersionNumber';
 import ManagerInformation from '../../_managerinf/ManagerInformation';
-import { Hero } from '../all';
-import ProfileModList from '../../r2mm/mods/ProfileModList';
-import { Platform } from '../../model/schema/ThunderstoreSchema';
-import moment from 'moment';
-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 { Hero } from '../all';
+import SettingsSection from './SettingsSection.vue';
+import GameDirectory from './entries/GameDirectory.vue';
+import DataDirectory from './entries/DataDirectory.vue';
+import SteamDirectory from './entries/SteamDirectory.vue';
+import ExportProfile from './entries/ExportProfile.vue';
+import Theme from './entries/Theme.vue';
+import ExpandCards from './entries/ExpandCards.vue';
+import FunkyMode from './entries/FunkyMode.vue';
+import OnlineModList from './entries/OnlineModList.vue';
+import ModState from './entries/ModState.vue';
+import UpdateAllMods from './entries/UpdateAllMods.vue';
+import ModCache from './entries/ModCache.vue';
+import CopyLogToClipboard from './entries/CopyLogToClipboard.vue';
+import CopyTroubleshooting from './entries/CopyTroubleshooting.vue';
+import ImportLocalMod from './entries/ImportLocalMod.vue';
+import ToggleCdn from './entries/ToggleCdn.vue';
+import LaunchArguments from './entries/LaunchArguments.vue';
+import ShowDependencyStrings from './entries/ShowDependencyStrings.vue';
+import ResetGameInstallation from './entries/ResetGameInstallation.vue';
+import ChangeLaunchBehaviour from './entries/ChangeLaunchBehaviour.vue';
+
+const searchTerm = ref<string>('');
 
-const store = getStore<State>();
-let router!: VueRouter;
-
-onMounted(() => {
-    router = getCurrentInstance()!.proxy.$router;
-})
-
-const activeTab = ref<string>('All');
-const tabs = ref<string[]>(['All', 'Profile', 'Locations', 'Debugging', 'Modpacks', 'Other']);
-const logOutput = ref<LogOutputProvider>(LogOutputProvider.instance);
-const search = ref<string>('');
 const managerVersionNumber = ref<VersionNumber>(ManagerInformation.VERSION);
-const searchableSettings = ref<SettingsRow[]>([]);
-
-const activeGame = computed(() => store.state.activeGame);
-const settings = computed(() => store.getters['settings']);
-const localModList = computed(() => store.state.profile.modList);
 const appName = computed(() => ManagerInformation.APP_NAME);
 
-let settingsList = [
-    new SettingsRow(
-        'Locations',
-        'Browse data folder',
-        'Open the folder where mods are stored for all games and profiles.',
-        async () => PathResolver.ROOT,
-        'fa-door-open',
-        () => {
-            emitInvoke('BrowseDataFolder');
-        }
-    ),
-    new SettingsRow(
-        'Locations',
-        `Change ${activeGame.value.displayName} folder`,
-        `Change the location of the ${activeGame.value.displayName} folder that ${appName.value} uses.`,
-        async () => {
-            if (settings.value.getContext().gameSpecific.gameDirectory !== null) {
-                const directory = await GameDirectoryResolverProvider.instance.getDirectory(activeGame.value);
-                if (!(directory instanceof R2Error)) {
-                    return directory;
-                }
-            }
-            return 'Please set manually';
-        },
-        'fa-folder-open',
-        () => {
-            if (Platform.XBOX_GAME_PASS == activeGame.value.activePlatform.storePlatform) {
-                emitInvoke('ChangeGameDirectoryGamePass');
-            }
-            else {
-                emitInvoke('ChangeGameDirectory');
-            }
-        }
-    ),
-    new SettingsRow(
-        'Locations',
-        'Browse profile folder',
-        'Open the folder where mods are stored for the current profile.',
-        async () => {
-            return store.getters['profile/activeProfile'].getProfilePath();
-        },
-        'fa-door-open',
-        () => emitInvoke('BrowseProfileFolder')
-    ),
-    new SettingsRow(
-        'Locations',
-        'Change data folder',
-        'Change the folder where mods are stored for all games and profiles. The folder will not be deleted, and existing profiles will not carry across.',
-        async () => {
-            return PathResolver.ROOT;
-        },
-        'fa-folder-open',
-        () => emitInvoke('ChangeDataFolder')
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Copy log file contents to clipboard',
-        'Copy the text inside the LogOutput.log file to the clipboard, with Discord formatting.',
-        async () => logOutput.value.exists ? 'Log file exists' : 'Log file does not exist',
-        'fa-clipboard',
-        () => {
-            if (logOutput.value.exists) {
-                emitInvoke('CopyLogToClipboard')
-            }
-        }
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Copy troubleshooting information to clipboard',
-        'Copy settings and other information to the clipboard, with Discord formatting.',
-        async () => 'Share this information when requesting support on Discord.',
-        'fa-clipboard',
-        () => emitInvoke('CopyTroubleshootingInfoToClipboard')
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Toggle download cache',
-        'Downloading a mod will ignore mods stored in the cache. Mods will still be placed in the cache.',
-        async () => {
-            return store.state.download.ignoreCache
-                ? 'Current: cache is disabled'
-                : 'Current: cache is enabled (recommended)';
-        },
-        'fa-exchange-alt',
-        () => emitInvoke('ToggleDownloadCache')
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Set launch parameters',
-        'Provide custom arguments used to start the game.',
-        async () => 'These commands are used against the Steam executable on game startup',
-        'fa-wrench',
-        () => emitInvoke('SetLaunchParameters')
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Clean mod cache',
-        'Free extra space caused by cached mods that are not currently in a profile.',
-        async () => 'Check all profiles for unused mods and clear cache',
-        'fa-trash',
-        () => emitInvoke('CleanCache')
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Clean online mod list',
-        'Deletes local copy of mod list, forcing the next refresh to fetch a new one.',
-        async () => store.dispatch('tsMods/getActiveGameCacheStatus'),
-        'fa-trash',
-        () => store.dispatch('tsMods/resetActiveGameCache')
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Toggle preferred Thunderstore CDN',
-        'Switch the CDN until app is restarted. This might bypass issues with downloading mods.',
-        async () => `Current: ${CdnProvider.current.label} (${CdnProvider.current.url})`,
-        'fa-exchange-alt',
-        CdnProvider.togglePreferredCdn
-    ),
-    new SettingsRow(
-        'Profile',
-        'Change profile',
-        'Change the mod profile.',
-        async () => {
-            return `Current profile: ${store.getters['profile/activeProfile'].getProfileName()}`
-        },
-        'fa-file-import',
-        () => emitInvoke('ChangeProfile')
-    ),
-    new SettingsRow(
-        'Profile',
-        'Enable all mods',
-        'Enable all mods for the current profile',
-        async () => `${localModList.value.length - ProfileModList.getDisabledModCount(localModList.value)}/${localModList.value.length} enabled`,
-        'fa-file-import',
-        () => emitInvoke('EnableAll')
-    ),
-    new SettingsRow(
-        'Profile',
-        'Disable all mods',
-        'Disable all mods for the current profile',
-        async () => `${ProfileModList.getDisabledModCount(localModList.value)}/${localModList.value.length} disabled`,
-        'fa-file-import',
-        () => emitInvoke('DisableAll')
-    ),
-    new SettingsRow(
-        'Profile',
-        'Import local mod',
-        'Install a mod offline from your files.',
-        async () => 'Not all mods can be installed locally',
-        'fa-file-import',
-        () => store.commit("openLocalFileImportModal")
-    ),
-    new SettingsRow(
-        'Profile',
-        'Export profile as a file',
-        'Export your mod list and configs as a file.',
-        async () => 'The exported file can be shared with friends to get an identical profile quickly and easily',
-        'fa-file-export',
-        () => store.dispatch("profileExport/exportProfileAsFile")
-    ),
-    new SettingsRow(
-        'Profile',
-        'Export profile as a code',
-        'Export your mod list and configs as a code.',
-        async () => 'The exported code can be shared with friends to get an identical profile quickly and easily',
-        'fa-file-export',
-        () => store.dispatch("profileExport/exportProfileAsCode")
-    ),
-    new SettingsRow(
-        'Profile',
-        'Update all mods',
-        'Quickly update every installed mod to their latest versions.',
-        async () => {
-            const outdatedMods = store.getters['profile/modsWithUpdates'];
-            if (outdatedMods.length === 1) {
-                return "1 mod has an update available";
-            }
-            return `${outdatedMods.length} mods have an update available`;
-        },
-        'fa-cloud-upload-alt',
-        () => emitInvoke('UpdateAllMods')
-    ),
-    new SettingsRow(
-        'Other',
-        'Toggle funky mode',
-        'Enable/disable funky mode.',
-        async () => {
-            return settings.value.getContext().global.funkyModeEnabled
-                ? 'Current: enabled'
-                : 'Current: disabled (default)';
-        },
-        'fa-exchange-alt',
-        () => emitInvoke('ToggleFunkyMode')
-    ),
-    new SettingsRow(
-        'Other',
-        'Switch theme',
-        'Switch between light and dark themes.',
-        async () => {
-            return settings.value.getContext().global.darkTheme
-                ? 'Current: dark theme'
-                : 'Current: light theme (default)';
-        },
-        'fa-exchange-alt',
-        () => emitInvoke('SwitchTheme')
-    ),
-    new SettingsRow(
-        'Other',
-        'Switch card display type',
-        'Switch between expanded or collapsed cards.',
-        async () => {
-            return settings.value.getContext().global.expandedCards
-                ? 'Current: expanded'
-                : 'Current: collapsed (default)';
-        },
-        'fa-exchange-alt',
-        () => emitInvoke('SwitchCard')
-    ),
-    new SettingsRow(
-        'Other',
-        'Refresh online mod list',
-        'Check for any new mod releases.',
-        async () => {
-                if (store.state.tsMods.isThunderstoreModListUpdateInProgress) {
-                    return store.state.tsMods.thunderstoreModListUpdateStatus || "Refreshing...";
-                }
-                if (store.state.tsMods.thunderstoreModListUpdateError) {
-                    return `Error refreshing the mod list: ${store.state.tsMods.thunderstoreModListUpdateError.message}`;
-                }
-                if (store.getters['download/activeDownloadCount'] > 0) {
-                    return "Refreshing the mod list is disabled while there are active downloads.";
-                }
-                if (store.state.tsMods.modsLastUpdated !== undefined) {
-                    return "Cache date: " + moment(store.state.tsMods.modsLastUpdated).format("MMMM Do YYYY, h:mm:ss a");
-                }
-                return "No API information available";
-            },
-        'fa-exchange-alt',
-        async () => await store.dispatch("tsMods/syncPackageList")
-    ),
-    new SettingsRow(
-      'Other',
-      'Change game',
-      'Change the current game',
-      async () => "",
-        'fa-gamepad',
-        async () => {
-            await ManagerSettings.resetDefaults();
-            await router.push({name: 'index'});
-        }
-    ),
-    new SettingsRow(
-        'Modpacks',
-        'Show dependency strings',
-        'View a list of installed mods with their version strings. Used inside the dependencies array inside the manifest.json file.',
-        async () => `Show dependency strings for ${localModList.value.length} mod(s)`,
-        'fa-file-alt',
-        () => emitInvoke('ShowDependencyStrings')
-    ),
-];
-
-watch(search, () => {
-    searchableSettings.value = settingsList
-        .filter(value =>
-            value.action.toLowerCase().indexOf(search.value.toLowerCase()) >= 0
-            || value.description.toLowerCase().indexOf(search.value.toLowerCase()) >= 0);
-});
-
-function getFilteredSettings() {
-    return searchableSettings.value.filter(value => value.group.toLowerCase() === activeTab.value.toLowerCase())
-        .sort((a, b) => a.action.localeCompare(b.action));
-}
-
-onMounted(async () => {
-    if ([Platform.STEAM, Platform.STEAM_DIRECT].includes(activeGame.value.activePlatform.storePlatform)) {
-        settingsList.push(
-            new SettingsRow(
-                'Locations',
-                'Change Steam folder',
-                `Change the location of the Steam folder that ${appName.value} uses.`,
-                async () => {
-                    if (settings.value.getContext().global.steamDirectory !== null) {
-                        const directory = await GameDirectoryResolverProvider.instance.getSteamDirectory();
-                        if (!(directory instanceof R2Error)) {
-                            return directory;
-                        }
-                    }
-                    return 'Please set manually';
-                },
-                'fa-folder-open',
-                () => emitInvoke('ChangeSteamDirectory')
-            ),
-            new SettingsRow(
-                'Debugging',
-                `Reset ${activeGame.value.displayName} installation`,
-                'Fix problems caused by corrupted files or files left over from manual modding attempts.',
-                async () => `This will delete all contents of the ${activeGame.value.steamFolderName} folder, and verify the files through Steam`,
-                'fa-wrench',
-                () => emitInvoke('ValidateSteamInstallation')
-            )
-        )
-    }
-
-    if (['linux', 'darwin'].includes(appWindow.getPlatform()) && activeGame.value.activePlatform.storePlatform === Platform.STEAM) {
-        settingsList.push(
-            new SettingsRow(
-                'Debugging',
-                'Change launch behaviour',
-                'Select specific launch behaviour such as forcing Steam to launch with Proton',
-                async () => {
-                    const launchType = await getLaunchType(activeGame.value);
-                    return `The current launch behaviour is set to: ${launchType}`;
-                },
-                'fa-gamepad',
-                () => {
-                    LaunchTypeModalOpen.value = true;
-                }
-            )
-        );
-    }
-    settingsList = settingsList.sort((a, b) => a.action.localeCompare(b.action));
-    searchableSettings.value = settingsList;
+const store = getStore<State>();
+const isSteamGame = computed<boolean>(() => store.state.activeGame.isInstalledViaSteam);
+const isSteamAndNotWindows = computed<boolean>(() => ['linux', 'darwin'].includes(appWindow.getPlatform()) && isSteamGame.value);
 
-    const gameDirectory = await GameDirectoryResolverProvider.instance.getDirectory(activeGame.value);
-    if (!(gameDirectory instanceof R2Error)) {
-        await settings.value.setGameDirectory(gameDirectory);
-    }
+const categories = ['All', 'Directories', 'Profile', 'Appearance', 'Debugging', 'Modpacks', 'Other'] as const;
+type Category = typeof categories[number];
 
-    const steamDirectory = await GameDirectoryResolverProvider.instance.getSteamDirectory();
-    if (!(steamDirectory instanceof R2Error)) {
-        await settings.value.setSteamDirectory(steamDirectory);
-    }
-});
+const activeCategory = ref<Category>('All');
 
-function changeTab(tab: string) {
-    activeTab.value = tab;
+function isVisible(section: Category): boolean {
+    return activeCategory.value === 'All' || activeCategory.value === section;
 }
-
-const emits = defineEmits<{
-    (e: 'setting-invoked', setting: string): void;
-}>();
-
-function emitInvoke(invoked: string) {
-    emits('setting-invoked', invoked);
-}
-
 </script>
 
 <template>
     <div id="settings-view">
-        <Hero title='Settings'
-              :subtitle='`Advanced options for ${appName}: ` + managerVersionNumber.toString()'
-              heroType='primary'/>
-        <div class="margin-right">
-            <div class="sticky-top sticky-top--opaque sticky-top--no-shadow sticky-top--no-padding">
-                <div class='border-at-bottom'>
-                    <div class='card is-shadowless is-square'>
-                        <div class='card-header-title'>
-                            <span class="non-selectable margin-right">Search:</span>
-                            <input v-model='search' class="input" type="text" placeholder="Search for a setting"/>
+        <Hero
+            title="Settings"
+            :subtitle="`Advanced options for ${appName}: ${managerVersionNumber.toString()}`"
+            heroType="primary"
+        />
+        <div class="settings-shell">
+            <aside class="menu settings-nav">
+                <p class="menu-label">Sections</p>
+                <ul class="menu-list">
+                    <li v-for="category in categories" :key="category">
+                        <a
+                            :class="{ 'is-active': activeCategory === category }"
+                            @click="activeCategory = category"
+                        >
+                            {{ category }}
+                        </a>
+                    </li>
+                </ul>
+            </aside>
+
+            <div class="settings-list">
+
+                <div class="sticky-top sticky-top--opaque sticky-top--no-shadow sticky-top--no-padding">
+                    <div class='border-at-bottom'>
+                        <div class='card is-shadowless is-square'>
+                            <div class='card-header-title'>
+                                <span class="non-selectable margin-right">Search:</span>
+                                <input v-model='searchTerm' class="input" type="text" placeholder="Search for a setting"/>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="tabs">
-                    <ul>
-                        <li v-for="(key, index) in tabs" :key="`tab-${key}`"
-                            :class="[{'is-active': activeTab === key}]"
-                            @click="changeTab(key)">
-                            <a>{{key}}</a>
-                        </li>
-                    </ul>
-                </div>
+
+                <SettingsSection v-if="isVisible('Directories')" name="Directories">
+                    <DataDirectory :search-term="searchTerm"/>
+                        <GameDirectory :search-term="searchTerm"/>
+                    <template v-if="isSteamGame">
+                        <SteamDirectory :search-term="searchTerm"/>
+                    </template>
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Profile')" name="Profile">
+                    <ExportProfile :search-term="searchTerm"/>
+                    <ModState :search-term="searchTerm"/>
+                    <UpdateAllMods :search-term="searchTerm"/>
+                    <ImportLocalMod :search-term="searchTerm"/>
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Appearance')" name="Appearance">
+                    <Theme :search-term="searchTerm"/>
+                    <ExpandCards :search-term="searchTerm"/>
+                    <FunkyMode :search-term="searchTerm"/>
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Debugging')" name="Debugging">
+                    <LaunchArguments :search-term="searchTerm"/>
+                    <template v-if="isSteamGame">
+                        <ResetGameInstallation :search-term="searchTerm"/>
+                    </template>
+                    <template v-if="isSteamAndNotWindows">
+                        <ChangeLaunchBehaviour :search-term="searchTerm"/>
+                    </template>
+                    <CopyLogToClipboard :search-term="searchTerm"/>
+                    <CopyTroubleshooting :search-term="searchTerm"/>
+                    <ModCache :search-term="searchTerm"/>
+                    <ToggleCdn :search-term="searchTerm"/>
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Modpacks')" name="Modpacks">
+                    <ShowDependencyStrings :search-term="searchTerm"/>
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Other')" name="Other">
+                    <OnlineModList :search-term="searchTerm"/>
+                </SettingsSection>
             </div>
-            <template v-if="activeTab === 'All'">
-                <SettingsItem v-for="(key, _) in searchableSettings" :key="`setting-${key.action}`"
-                              :action="key.action"
-                              :description="key.description"
-                              :value="key.value"
-                              :icon="key.icon"
-                              @click="key.clickAction()"/>
-            </template>
-            <template v-else>
-                <SettingsItem v-for="(key, _) in getFilteredSettings()" :key="`setting-${key.action}`"
-                              :action="key.action"
-                              :description="key.description"
-                              :value="key.value"
-                              :icon="key.icon"
-                              @click="key.clickAction()"/>
-            </template>
         </div>
     </div>
 </template>
@@ -439,6 +134,29 @@ function emitInvoke(invoked: string) {
     display: flex;
     flex-direction: column;
     flex: 1;
+    min-height: 0;
     overflow-y: auto;
 }
+
+.settings-shell {
+    display: flex;
+    align-items: flex-start;
+    flex: 1 0 auto;
+}
+
+.settings-nav {
+    flex: 0 0 200px;
+    padding: 1.25rem 1rem;
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+    max-height: 100vh;
+    overflow-y: auto;
+}
+
+.settings-list {
+    flex: 1;
+    min-width: 0;
+    padding: 1rem 1.25rem 1rem;
+}
 </style>
diff --git a/src/components/settings-components/v2/SettingsViewWrapper.vue b/src/components/settings-components/SettingsViewWrapper.vue
similarity index 100%
rename from src/components/settings-components/v2/SettingsViewWrapper.vue
rename to src/components/settings-components/SettingsViewWrapper.vue
diff --git a/src/components/settings-components/v2/entries/ChangeLaunchBehaviour.vue b/src/components/settings-components/entries/ChangeLaunchBehaviour.vue
similarity index 76%
rename from src/components/settings-components/v2/entries/ChangeLaunchBehaviour.vue
rename to src/components/settings-components/entries/ChangeLaunchBehaviour.vue
index 47fe2e524..acba75d43 100644
--- a/src/components/settings-components/v2/entries/ChangeLaunchBehaviour.vue
+++ b/src/components/settings-components/entries/ChangeLaunchBehaviour.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue';
-import Game from '../../../../model/game/Game';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
+import Game from '../../../model/game/Game';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
-import { getLaunchType, LaunchType } from '../../../../model/real_enums/launch/LaunchType';
-import { LaunchTypeModalOpen } from '../../../../components/modals/launch-type/LaunchTypeRefs';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import { getLaunchType, LaunchType } from '../../../model/real_enums/launch/LaunchType';
+import { LaunchTypeModalOpen } from '../../modals/launch-type/LaunchTypeRefs';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/entries/CleanOnlineModListCache.vue b/src/components/settings-components/entries/CleanOnlineModListCache.vue
new file mode 100644
index 000000000..70c049f23
--- /dev/null
+++ b/src/components/settings-components/entries/CleanOnlineModListCache.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import R2Error from '../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const isCleaning = ref<boolean>(false);
+const cacheStatus = ref<string>('');
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Clean online mod list cache',
+    'Reset mod list cache',
+    'Clean',
+]);
+
+async function refreshStatus() {
+    try {
+        cacheStatus.value = await store.dispatch('tsMods/getActiveGameCacheStatus');
+    } catch (e) {
+        cacheStatus.value = '';
+    }
+}
+
+onMounted(refreshStatus);
+
+async function cleanOnlineModList() {
+    isCleaning.value = true;
+    try {
+        await store.dispatch('tsMods/resetActiveGameCache');
+        await refreshStatus();
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to clean the online mod list'));
+    } finally {
+        isCleaning.value = false;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Clean online mod list cache</template>
+        <template #description>
+            Deletes the local copy of the mod list and retrieves a new one.
+            <template v-if="cacheStatus">{{ cacheStatus }}</template>
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isCleaning }"
+            :disabled="isCleaning"
+            @click="cleanOnlineModList"
+        >
+            Clean online mod list
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/CopyLogToClipboard.vue b/src/components/settings-components/entries/CopyLogToClipboard.vue
similarity index 83%
rename from src/components/settings-components/v2/entries/CopyLogToClipboard.vue
rename to src/components/settings-components/entries/CopyLogToClipboard.vue
index 928c44be2..ca330b7fa 100644
--- a/src/components/settings-components/v2/entries/CopyLogToClipboard.vue
+++ b/src/components/settings-components/entries/CopyLogToClipboard.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
-import FsProvider from '../../../../providers/generic/file/FsProvider';
-import path from '../../../../providers/node/path/path';
-import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
-import { PackageLoader } from '../../../../model/schema/ThunderstoreSchema';
-import R2Error from '../../../../model/errors/R2Error';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import FsProvider from '../../../providers/generic/file/FsProvider';
+import path from '../../../providers/node/path/path';
+import InteractionProvider from '../../../providers/ror2/system/InteractionProvider';
+import { PackageLoader } from '../../../model/schema/ThunderstoreSchema';
+import R2Error from '../../../model/errors/R2Error';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/CopyTroubleshooting.vue b/src/components/settings-components/entries/CopyTroubleshooting.vue
similarity index 80%
rename from src/components/settings-components/v2/entries/CopyTroubleshooting.vue
rename to src/components/settings-components/entries/CopyTroubleshooting.vue
index 7ccde59b3..84c08492d 100644
--- a/src/components/settings-components/v2/entries/CopyTroubleshooting.vue
+++ b/src/components/settings-components/entries/CopyTroubleshooting.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
-import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
-import R2Error from '../../../../model/errors/R2Error';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import InteractionProvider from '../../../providers/ror2/system/InteractionProvider';
+import R2Error from '../../../model/errors/R2Error';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/DataDirectory.vue b/src/components/settings-components/entries/DataDirectory.vue
similarity index 81%
rename from src/components/settings-components/v2/entries/DataDirectory.vue
rename to src/components/settings-components/entries/DataDirectory.vue
index 297238412..e83620da2 100644
--- a/src/components/settings-components/v2/entries/DataDirectory.vue
+++ b/src/components/settings-components/entries/DataDirectory.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue';
-import PathResolver from '../../../../r2mm/manager/PathResolver';
+import PathResolver from '../../../r2mm/manager/PathResolver';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import LinkProvider from '../../../../providers/components/LinkProvider';
-import { DataFolderProvider } from '../../../../providers/ror2/system/DataFolderProvider';
-import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
-import Game from '../../../../model/game/Game';
-import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
-import R2Error from '../../../../model/errors/R2Error';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
+import LinkProvider from '../../../providers/components/LinkProvider';
+import { DataFolderProvider } from '../../../providers/ror2/system/DataFolderProvider';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import Game from '../../../model/game/Game';
+import InteractionProvider from '../../../providers/ror2/system/InteractionProvider';
+import R2Error from '../../../model/errors/R2Error';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/entries/DownloadCache.vue b/src/components/settings-components/entries/DownloadCache.vue
new file mode 100644
index 000000000..bec936163
--- /dev/null
+++ b/src/components/settings-components/entries/DownloadCache.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const cacheEnabled = computed<boolean>(() => !store.state.download.ignoreCache);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Toggle download cache',
+    'Download cache',
+    'Toggle',
+]);
+
+async function toggleCache() {
+    await store.dispatch('download/toggleIgnoreCache');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Download cache</template>
+        <template #description>
+            When enabled, downloads will be skipped if an existing copy is already cache.
+        </template>
+        <div class="field" @click.prevent.stop="toggleCache">
+            <input
+                id="toggle-download-cache"
+                type="checkbox"
+                :class="['switch', { 'is-info': cacheEnabled }]"
+                :checked="cacheEnabled"
+            />
+            <label for="toggle-download-cache">{{ cacheEnabled ? 'Enabled (recommended)' : 'Disabled' }}</label>
+        </div>
+    </SettingsViewWrapper>
+</template>
+
+<style scoped lang="scss">
+.switch {
+    position: relative;
+}
+</style>
diff --git a/src/components/settings-components/v2/entries/ExpandCards.vue b/src/components/settings-components/entries/ExpandCards.vue
similarity index 85%
rename from src/components/settings-components/v2/entries/ExpandCards.vue
rename to src/components/settings-components/entries/ExpandCards.vue
index 350584966..fedb0da36 100644
--- a/src/components/settings-components/v2/entries/ExpandCards.vue
+++ b/src/components/settings-components/entries/ExpandCards.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
-import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/ExportProfile.vue b/src/components/settings-components/entries/ExportProfile.vue
similarity index 87%
rename from src/components/settings-components/v2/entries/ExportProfile.vue
rename to src/components/settings-components/entries/ExportProfile.vue
index d8957c2dd..ca3d661c3 100644
--- a/src/components/settings-components/v2/entries/ExportProfile.vue
+++ b/src/components/settings-components/entries/ExportProfile.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
-import R2Error from '../../../../model/errors/R2Error';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import R2Error from '../../../model/errors/R2Error';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/FunkyMode.vue b/src/components/settings-components/entries/FunkyMode.vue
similarity index 83%
rename from src/components/settings-components/v2/entries/FunkyMode.vue
rename to src/components/settings-components/entries/FunkyMode.vue
index 628c0108c..0a63008f6 100644
--- a/src/components/settings-components/v2/entries/FunkyMode.vue
+++ b/src/components/settings-components/entries/FunkyMode.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
-import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 const settings = ref<ManagerSettings | null>(null);
diff --git a/src/components/settings-components/v2/entries/GameDirectory.vue b/src/components/settings-components/entries/GameDirectory.vue
similarity index 85%
rename from src/components/settings-components/v2/entries/GameDirectory.vue
rename to src/components/settings-components/entries/GameDirectory.vue
index 258859def..57bcf411f 100644
--- a/src/components/settings-components/v2/entries/GameDirectory.vue
+++ b/src/components/settings-components/entries/GameDirectory.vue
@@ -1,20 +1,20 @@
 <script lang="ts" setup>
-import Game from '../../../../model/game/Game';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
+import Game from '../../../model/game/Game';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
 import { computed, onMounted, ref, watch } from 'vue';
-import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { StorePlatform } from '../../../../model/platform/StorePlatform';
-import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
-import path from '../../../../providers/node/path/path';
-import FsProvider from '../../../../providers/generic/file/FsProvider';
-import LinkProvider from '../../../../providers/components/LinkProvider';
-import AppWindow from '../../../../providers/node/app/app_window';
-import os from '../../../../providers/node/os/os';
-import R2Error from '../../../../model/errors/R2Error';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
-import ManagerInformation from '../../../../_managerinf/ManagerInformation';
+import { StorePlatform } from '../../../model/platform/StorePlatform';
+import InteractionProvider from '../../../providers/ror2/system/InteractionProvider';
+import path from '../../../providers/node/path/path';
+import FsProvider from '../../../providers/generic/file/FsProvider';
+import LinkProvider from '../../../providers/components/LinkProvider';
+import AppWindow from '../../../providers/node/app/app_window';
+import os from '../../../providers/node/os/os';
+import R2Error from '../../../model/errors/R2Error';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import ManagerInformation from '../../../_managerinf/ManagerInformation';
 
 const store = getStore<State>();
 
@@ -77,9 +77,9 @@ function changeGameInstallDirectoryGeneral() {
     }).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]!)));
                     syncGameDirectory();
                 } else {
                     store.commit('openIncorrectGameDirectoryModal');
diff --git a/src/components/settings-components/v2/entries/ImportLocalMod.vue b/src/components/settings-components/entries/ImportLocalMod.vue
similarity index 79%
rename from src/components/settings-components/v2/entries/ImportLocalMod.vue
rename to src/components/settings-components/entries/ImportLocalMod.vue
index abda6d8ac..b6dc70798 100644
--- a/src/components/settings-components/v2/entries/ImportLocalMod.vue
+++ b/src/components/settings-components/entries/ImportLocalMod.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/LaunchArguments.vue b/src/components/settings-components/entries/LaunchArguments.vue
similarity index 79%
rename from src/components/settings-components/v2/entries/LaunchArguments.vue
rename to src/components/settings-components/entries/LaunchArguments.vue
index 0a5cdf1a8..96fc49bc2 100644
--- a/src/components/settings-components/v2/entries/LaunchArguments.vue
+++ b/src/components/settings-components/entries/LaunchArguments.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/ModCache.vue b/src/components/settings-components/entries/ModCache.vue
similarity index 88%
rename from src/components/settings-components/v2/entries/ModCache.vue
rename to src/components/settings-components/entries/ModCache.vue
index a3aaf956b..3083cfce0 100644
--- a/src/components/settings-components/v2/entries/ModCache.vue
+++ b/src/components/settings-components/entries/ModCache.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
-import CacheUtil from '../../../../r2mm/mods/CacheUtil';
-import R2Error from '../../../../model/errors/R2Error';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import CacheUtil from '../../../r2mm/mods/CacheUtil';
+import R2Error from '../../../model/errors/R2Error';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/ModState.vue b/src/components/settings-components/entries/ModState.vue
similarity index 89%
rename from src/components/settings-components/v2/entries/ModState.vue
rename to src/components/settings-components/entries/ModState.vue
index 28b2ca590..16d0c3e92 100644
--- a/src/components/settings-components/v2/entries/ModState.vue
+++ b/src/components/settings-components/entries/ModState.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
-import R2Error from '../../../../model/errors/R2Error';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import R2Error from '../../../model/errors/R2Error';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
 import { useRouter } from 'vue-router';
-import ManifestV2 from '../../../../model/ManifestV2';
+import ManifestV2 from '../../../model/ManifestV2';
 
 const store = getStore<State>();
 const router = useRouter();
diff --git a/src/components/settings-components/v2/entries/OnlineModList.vue b/src/components/settings-components/entries/OnlineModList.vue
similarity index 91%
rename from src/components/settings-components/v2/entries/OnlineModList.vue
rename to src/components/settings-components/entries/OnlineModList.vue
index 1dfbf2f52..c144a2f63 100644
--- a/src/components/settings-components/v2/entries/OnlineModList.vue
+++ b/src/components/settings-components/entries/OnlineModList.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import moment from 'moment';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
-import R2Error from '../../../../model/errors/R2Error';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import R2Error from '../../../model/errors/R2Error';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/entries/RefreshOnlineModList.vue b/src/components/settings-components/entries/RefreshOnlineModList.vue
new file mode 100644
index 000000000..f6814da7c
--- /dev/null
+++ b/src/components/settings-components/entries/RefreshOnlineModList.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import moment from 'moment';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Refresh online mod list',
+    'Check for new mod releases',
+]);
+
+const isRefreshing = computed<boolean>(() => store.state.tsMods.isThunderstoreModListUpdateInProgress);
+const hasActiveDownloads = computed<boolean>(() => store.getters['download/activeDownloadCount'] > 0);
+
+const status = computed<string>(() => {
+    if (isRefreshing.value) {
+        return store.state.tsMods.thunderstoreModListUpdateStatus || 'Refreshing...';
+    }
+    if (store.state.tsMods.thunderstoreModListUpdateError) {
+        return `Error refreshing the mod list: ${store.state.tsMods.thunderstoreModListUpdateError.message}`;
+    }
+    if (hasActiveDownloads.value) {
+        return 'Refreshing the mod list is disabled while there are active downloads.';
+    }
+    if (store.state.tsMods.modsLastUpdated !== undefined) {
+        return 'Cache date: ' + moment(store.state.tsMods.modsLastUpdated).format('MMMM Do YYYY, h:mm:ss a');
+    }
+    return 'No API information available';
+});
+
+async function refresh() {
+    if (isRefreshing.value || hasActiveDownloads.value) {
+        return;
+    }
+    await store.dispatch('tsMods/syncPackageList');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Refresh online mod list</template>
+        <template #description>
+            Check for any new mod releases. {{ status }}
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isRefreshing }"
+            :disabled="isRefreshing || hasActiveDownloads"
+            @click="refresh"
+        >
+            Refresh
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/v2/entries/ResetGameInstallation.vue b/src/components/settings-components/entries/ResetGameInstallation.vue
similarity index 82%
rename from src/components/settings-components/v2/entries/ResetGameInstallation.vue
rename to src/components/settings-components/entries/ResetGameInstallation.vue
index 7adcdc5f3..41b2c9773 100644
--- a/src/components/settings-components/v2/entries/ResetGameInstallation.vue
+++ b/src/components/settings-components/entries/ResetGameInstallation.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
-import { SteamInstallationValidator } from '../../../../r2mm/manager/SteamInstallationValidator';
-import R2Error from '../../../../model/errors/R2Error';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import { SteamInstallationValidator } from '../../../r2mm/manager/SteamInstallationValidator';
+import R2Error from '../../../model/errors/R2Error';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/ShowDependencyStrings.vue b/src/components/settings-components/entries/ShowDependencyStrings.vue
similarity index 83%
rename from src/components/settings-components/v2/entries/ShowDependencyStrings.vue
rename to src/components/settings-components/entries/ShowDependencyStrings.vue
index 210fb30a4..6209c1a85 100644
--- a/src/components/settings-components/v2/entries/ShowDependencyStrings.vue
+++ b/src/components/settings-components/entries/ShowDependencyStrings.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/SteamDirectory.vue b/src/components/settings-components/entries/SteamDirectory.vue
similarity index 82%
rename from src/components/settings-components/v2/entries/SteamDirectory.vue
rename to src/components/settings-components/entries/SteamDirectory.vue
index 392a1a1f4..8dcabfaa7 100644
--- a/src/components/settings-components/v2/entries/SteamDirectory.vue
+++ b/src/components/settings-components/entries/SteamDirectory.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue';
-import Game from '../../../../model/game/Game';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
-import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
+import Game from '../../../model/game/Game';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
-import InteractionProvider from '../../../../providers/ror2/system/InteractionProvider';
-import path from '../../../../providers/node/path/path';
-import FsProvider from '../../../../providers/generic/file/FsProvider';
-import LinkProvider from '../../../../providers/components/LinkProvider';
-import AppWindow from '../../../../providers/node/app/app_window';
-import os from '../../../../providers/node/os/os';
-import R2Error from '../../../../model/errors/R2Error';
-import ManagerInformation from '../../../../_managerinf/ManagerInformation';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import InteractionProvider from '../../../providers/ror2/system/InteractionProvider';
+import path from '../../../providers/node/path/path';
+import FsProvider from '../../../providers/generic/file/FsProvider';
+import LinkProvider from '../../../providers/components/LinkProvider';
+import AppWindow from '../../../providers/node/app/app_window';
+import os from '../../../providers/node/os/os';
+import R2Error from '../../../model/errors/R2Error';
+import ManagerInformation from '../../../_managerinf/ManagerInformation';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/entries/Theme.vue b/src/components/settings-components/entries/Theme.vue
similarity index 81%
rename from src/components/settings-components/v2/entries/Theme.vue
rename to src/components/settings-components/entries/Theme.vue
index 0ee8d30cc..957034c7b 100644
--- a/src/components/settings-components/v2/entries/Theme.vue
+++ b/src/components/settings-components/entries/Theme.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
-import ManagerSettings from '../../../../r2mm/manager/ManagerSettings';
-import ThemeManager from '../../../../r2mm/manager/ThemeManager';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
+import ThemeManager from '../../../r2mm/manager/ThemeManager';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 const settings = ref<ManagerSettings | null>(null);
diff --git a/src/components/settings-components/v2/entries/ToggleCdn.vue b/src/components/settings-components/entries/ToggleCdn.vue
similarity index 86%
rename from src/components/settings-components/v2/entries/ToggleCdn.vue
rename to src/components/settings-components/entries/ToggleCdn.vue
index 0936635a2..64fb7c027 100644
--- a/src/components/settings-components/v2/entries/ToggleCdn.vue
+++ b/src/components/settings-components/entries/ToggleCdn.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
-import CdnProvider from '../../../../providers/generic/connection/CdnProvider';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import CdnProvider from '../../../providers/generic/connection/CdnProvider';
 
 const props = defineProps<{
     searchTerm?: string;
diff --git a/src/components/settings-components/v2/entries/UpdateAllMods.vue b/src/components/settings-components/entries/UpdateAllMods.vue
similarity index 85%
rename from src/components/settings-components/v2/entries/UpdateAllMods.vue
rename to src/components/settings-components/entries/UpdateAllMods.vue
index 99367940d..481bd2174 100644
--- a/src/components/settings-components/v2/entries/UpdateAllMods.vue
+++ b/src/components/settings-components/entries/UpdateAllMods.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { getStore } from '../../../../providers/generic/store/StoreProvider';
-import { State } from '../../../../store';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
 import SettingsViewWrapper from '../SettingsViewWrapper.vue';
-import { useSettingSearch } from '../../../composables/SettingSearchComposable';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
 
 const store = getStore<State>();
 
diff --git a/src/components/settings-components/v2/SettingsView.vue b/src/components/settings-components/v2/SettingsView.vue
deleted file mode 100644
index 83da2324c..000000000
--- a/src/components/settings-components/v2/SettingsView.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import VersionNumber from '../../../model/VersionNumber';
-import ManagerInformation from '../../../_managerinf/ManagerInformation';
-import { getStore } from '../../../providers/generic/store/StoreProvider';
-import { State } from '../../../store';
-import appWindow from '../../../providers/node/app/app_window';
-import { Hero } from '../../all';
-import SettingsSection from './SettingsSection.vue';
-import GameDirectory from './entries/GameDirectory.vue';
-import DataDirectory from './entries/DataDirectory.vue';
-import SteamDirectory from './entries/SteamDirectory.vue';
-import ExportProfile from './entries/ExportProfile.vue';
-import Theme from './entries/Theme.vue';
-import ExpandCards from './entries/ExpandCards.vue';
-import FunkyMode from './entries/FunkyMode.vue';
-import OnlineModList from './entries/OnlineModList.vue';
-import ModState from './entries/ModState.vue';
-import UpdateAllMods from './entries/UpdateAllMods.vue';
-import ModCache from './entries/ModCache.vue';
-import CopyLogToClipboard from './entries/CopyLogToClipboard.vue';
-import CopyTroubleshooting from './entries/CopyTroubleshooting.vue';
-import ImportLocalMod from './entries/ImportLocalMod.vue';
-import ToggleCdn from './entries/ToggleCdn.vue';
-import LaunchArguments from './entries/LaunchArguments.vue';
-import ShowDependencyStrings from './entries/ShowDependencyStrings.vue';
-import ResetGameInstallation from './entries/ResetGameInstallation.vue';
-import ChangeLaunchBehaviour from './entries/ChangeLaunchBehaviour.vue';
-
-const searchTerm = ref<string>('');
-
-const managerVersionNumber = ref<VersionNumber>(ManagerInformation.VERSION);
-const appName = computed(() => ManagerInformation.APP_NAME);
-
-const store = getStore<State>();
-const isSteamGame = computed<boolean>(() => store.state.activeGame.isInstalledViaSteam);
-const isSteamAndNotWindows = computed<boolean>(() => ['linux', 'darwin'].includes(appWindow.getPlatform()) && isSteamGame.value);
-
-const categories = ['All', 'Directories', 'Profile', 'Appearance', 'Debugging', 'Modpacks', 'Other'] as const;
-type Category = typeof categories[number];
-
-const activeCategory = ref<Category>('All');
-
-function isVisible(section: Category): boolean {
-    return activeCategory.value === 'All' || activeCategory.value === section;
-}
-</script>
-
-<template>
-    <div id="settings-view">
-        <Hero
-            title="Settings"
-            :subtitle="`Advanced options for ${appName}: ${managerVersionNumber.toString()}`"
-            heroType="primary"
-        />
-        <div class="settings-shell">
-            <aside class="menu settings-nav">
-                <p class="menu-label">Sections</p>
-                <ul class="menu-list">
-                    <li v-for="category in categories" :key="category">
-                        <a
-                            :class="{ 'is-active': activeCategory === category }"
-                            @click="activeCategory = category"
-                        >
-                            {{ category }}
-                        </a>
-                    </li>
-                </ul>
-            </aside>
-
-            <div class="settings-list">
-
-                <div class="sticky-top sticky-top--opaque sticky-top--no-shadow sticky-top--no-padding">
-                    <div class='border-at-bottom'>
-                        <div class='card is-shadowless is-square'>
-                            <div class='card-header-title'>
-                                <span class="non-selectable margin-right">Search:</span>
-                                <input v-model='searchTerm' class="input" type="text" placeholder="Search for a setting"/>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <SettingsSection v-if="isVisible('Directories')" name="Directories">
-                    <DataDirectory :search-term="searchTerm"/>
-                        <GameDirectory :search-term="searchTerm"/>
-                    <template v-if="isSteamGame">
-                        <SteamDirectory :search-term="searchTerm"/>
-                    </template>
-                </SettingsSection>
-
-                <SettingsSection v-if="isVisible('Profile')" name="Profile">
-                    <ExportProfile :search-term="searchTerm"/>
-                    <ModState :search-term="searchTerm"/>
-                    <UpdateAllMods :search-term="searchTerm"/>
-                    <ImportLocalMod :search-term="searchTerm"/>
-                </SettingsSection>
-
-                <SettingsSection v-if="isVisible('Appearance')" name="Appearance">
-                    <Theme :search-term="searchTerm"/>
-                    <ExpandCards :search-term="searchTerm"/>
-                    <FunkyMode :search-term="searchTerm"/>
-                </SettingsSection>
-
-                <SettingsSection v-if="isVisible('Debugging')" name="Debugging">
-                    <LaunchArguments :search-term="searchTerm"/>
-                    <template v-if="isSteamGame">
-                        <ResetGameInstallation :search-term="searchTerm"/>
-                    </template>
-                    <template v-if="isSteamAndNotWindows">
-                        <ChangeLaunchBehaviour :search-term="searchTerm"/>
-                    </template>
-                    <CopyLogToClipboard :search-term="searchTerm"/>
-                    <CopyTroubleshooting :search-term="searchTerm"/>
-                    <ModCache :search-term="searchTerm"/>
-                    <ToggleCdn :search-term="searchTerm"/>
-                </SettingsSection>
-
-                <SettingsSection v-if="isVisible('Modpacks')" name="Modpacks">
-                    <ShowDependencyStrings :search-term="searchTerm"/>
-                </SettingsSection>
-
-                <SettingsSection v-if="isVisible('Other')" name="Other">
-                    <OnlineModList :search-term="searchTerm"/>
-                </SettingsSection>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-#settings-view {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-}
-
-.settings-shell {
-    display: flex;
-    align-items: flex-start;
-    flex: 1 0 auto;
-}
-
-.settings-nav {
-    flex: 0 0 200px;
-    padding: 1.25rem 1rem;
-    position: sticky;
-    top: 0;
-    align-self: flex-start;
-    max-height: 100vh;
-    overflow-y: auto;
-}
-
-.settings-list {
-    flex: 1;
-    min-width: 0;
-    padding: 1rem 1.25rem 1rem;
-}
-</style>
diff --git a/src/providers/components/loaders/bind_impls/BindLoaderImpl.ts b/src/providers/components/loaders/bind_impls/BindLoaderImpl.ts
index c019fc9e5..cbefc87b0 100644
--- a/src/providers/components/loaders/bind_impls/BindLoaderImpl.ts
+++ b/src/providers/components/loaders/bind_impls/BindLoaderImpl.ts
@@ -5,7 +5,7 @@ import OnlineModListProvider from '../OnlineModListProvider';
 export default class BindLoaderImpl {
 
     static bind() {
-        SettingsViewProvider.provide(() => import("../../../../components/settings-components/v2/SettingsView.vue"));
+        SettingsViewProvider.provide(() => import("../../../../components/settings-components/SettingsView.vue"));
         LocalModListProvider.provide(() => import("../../../../components/views/LocalModList.vue"));
         OnlineModListProvider.provide(() => import("../../../../components/views/OnlineModListWithPanel.vue"));
     }
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ba39ec7e3..56a86a54b 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -89,7 +89,7 @@ const routes: RouteRecordRaw[] = [
                         name: 'manager.settings',
                         path: 'settings/',
                         components: {
-                            subview: () => import('components/settings-components/v2/SettingsView.vue')
+                            subview: () => import('components/settings-components/SettingsView.vue')
                         },
                         meta: {title: () => profileTitle()}
                     }