diff --git a/backend/build.gradle b/backend/build.gradle
index 2a17b3d..97dbe06 100644
--- a/backend/build.gradle
+++ b/backend/build.gradle
@@ -31,6 +31,7 @@ dependencies {
     implementation("me.shedaniel:linkie-core:1.0.121")
     implementation("io.ktor:ktor-server-cors:2.2.3")
     implementation("io.ktor:ktor-server-content-negotiation:2.2.3")
+    implementation("io.ktor:ktor-server-compression:2.2.3")
     implementation("io.ktor:ktor-server-status-pages:2.2.3")
     implementation("io.ktor:ktor-client-content-negotiation:2.2.3")
     implementation("io.ktor:ktor-serialization-kotlinx-json:2.2.3")
diff --git a/backend/src/main/kotlin/me/shedaniel/linkie/web/LinkieWebServer.kt b/backend/src/main/kotlin/me/shedaniel/linkie/web/LinkieWebServer.kt
index 2e43bcc..e707f8d 100644
--- a/backend/src/main/kotlin/me/shedaniel/linkie/web/LinkieWebServer.kt
+++ b/backend/src/main/kotlin/me/shedaniel/linkie/web/LinkieWebServer.kt
@@ -7,17 +7,16 @@ import io.ktor.serialization.kotlinx.json.*
 import io.ktor.server.application.*
 import io.ktor.server.engine.*
 import io.ktor.server.netty.*
+import io.ktor.server.plugins.compression.*
 import io.ktor.server.plugins.contentnegotiation.*
 import io.ktor.server.plugins.cors.routing.*
 import io.ktor.server.plugins.statuspages.*
 import io.ktor.server.response.*
 import io.ktor.server.routing.*
-import kotlinx.serialization.json.addJsonObject
-import kotlinx.serialization.json.buildJsonObject
-import kotlinx.serialization.json.put
-import kotlinx.serialization.json.putJsonArray
+import kotlinx.serialization.json.*
 import me.shedaniel.linkie.Namespaces
 import me.shedaniel.linkie.RemapperDaemon
+import me.shedaniel.linkie.namespaces.MojangSrgNamespace
 import me.shedaniel.linkie.utils.tryToVersion
 import me.shedaniel.linkie.web.deps.depsCycle
 import me.shedaniel.linkie.web.deps.startDepsCycle
@@ -30,6 +29,11 @@ fun main() {
     startLinkie()
     embeddedServer(Netty, port = 6969) {
         install(CORS) { anyHost() }
+        install(Compression) {
+            gzip {
+                matchContentType(ContentType.Application.Json)
+            }
+        }
         install(IgnoreTrailingSlash)
         install(ContentNegotiation) {
             json(json)
@@ -140,6 +144,39 @@ fun main() {
                         }
                     })
                 }
+                get("api/mappings") {
+                    val namespaceStr = call.parameters["namespace"]?.lowercase() ?: throw IllegalArgumentException("No namespace specified")
+                    val version = call.parameters["version"] ?: throw IllegalArgumentException("No version specified")
+                    val namespace = Namespaces.namespaces[namespaceStr] ?: throw IllegalArgumentException("No namespace found for $namespaceStr")
+                    val defaultVersion = namespace.defaultVersion.takeIf { it in namespace.getAllSortedVersions() } ?: namespace.getAllSortedVersions().first()
+                    val provider = version.let { namespace.getProvider(it) }.takeUnless { it.isEmpty() } ?: namespace.getProvider(defaultVersion)
+                    val noIntermediary = namespace == MojangSrgNamespace
+                    call.respond(buildJsonObject {
+                        provider.get().allClasses.forEach { clazz ->
+                            var intermediaryName = clazz.intermediaryName
+                            var mappedName = clazz.mappedName
+                            if (noIntermediary) {
+                                intermediaryName = mappedName ?: intermediaryName
+                                mappedName = null
+                            }
+                            val obj = buildJsonObject {
+                                clazz.members.filter { it.mappedName != null && it.mappedName != it.intermediaryName }.forEach { member ->
+                                    put(member.intermediaryName, member.mappedName)
+                                }
+                            }
+                            if (obj.isNotEmpty() || (mappedName != null && mappedName != intermediaryName)) {
+                                putJsonObject(intermediaryName) {
+                                    obj.entries.forEach { (key, value) ->
+                                        put(key, value)
+                                    }
+                                    if (mappedName != null && mappedName != intermediaryName) {
+                                        put("mappedName", mappedName)
+                                    }
+                                }
+                            }
+                        }
+                    })
+                }
             }
         }
     }.start(wait = true)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7e58078..273037b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "nprogress": "^0.2.0",
         "pinia": "^2.0.20",
         "pinia-plugin-persistedstate": "^3.2.1",
+        "prism-code-editor": "^3.2.1",
         "prismjs": "^1.29.0",
         "tailwind-gradient-mask-image": "^1.0.0",
         "vite-plugin-prismjs": "^0.0.11",
@@ -6198,6 +6199,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/prism-code-editor": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/prism-code-editor/-/prism-code-editor-3.2.1.tgz",
+      "integrity": "sha512-6IxKeCWPogFX7J5gNHQPheiWjA4PMUxHoSZBpUca3fsNJynUkSSAdSXYH+KuzkIdxNIrM9p9NKNwK8Dc5Tzmew=="
+    },
     "node_modules/prismjs": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index aa48ea7..6329891 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.20",
     "pinia-plugin-persistedstate": "^3.2.1",
+    "prism-code-editor": "^3.2.1",
     "prismjs": "^1.29.0",
     "tailwind-gradient-mask-image": "^1.0.0",
     "vite-plugin-prismjs": "^0.0.11",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 082e4cb..27c9c32 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -7,6 +7,7 @@ import Alerts from "./components/Alerts.vue"
 import {useI18nStore} from "./app/i18n-store"
 import {isTauri, tauriInit} from "./app/tauri/tauri"
 import Tauri from "./components/tauri/Tauri.vue"
+import {useI18n} from "vue-i18n"
 
 export default defineComponent({
     data() {
@@ -66,6 +67,10 @@ export default defineComponent({
             this.allowTransition = true
         }, 1000)
     },
+    setup() {
+        const { t } = useI18n()
+        return { t }
+    }
 })
 
 </script>
diff --git a/frontend/src/app/backend.ts b/frontend/src/app/backend.ts
index 0b26a77..69c6172 100644
--- a/frontend/src/app/backend.ts
+++ b/frontend/src/app/backend.ts
@@ -1,6 +1,6 @@
 import axios, {AxiosResponse} from "axios"
 import {isTauri} from "./tauri/tauri"
-import {LocationQuery, useRoute} from "vue-router"
+import {LocationQuery, RouteLocationNormalizedLoaded, useRoute} from "vue-router"
 
 export const backendServer = "https://linkieapi.shedaniel.me"
 export const localBackendServer = "http://localhost:6969"
@@ -57,8 +57,8 @@ export function reqStatusSource<T = any>(namespace: string): Promise<AxiosRespon
     return HTTP.get(`/api/status/sources/${namespace}`)
 }
 
-export function fullPath() {
-    let route = useRoute()
+export function fullPath(route: RouteLocationNormalizedLoaded | undefined = undefined) {
+    if (!route) route = useRoute()
     if (!route) return undefined
     return new URL(route.fullPath, window.location.origin).href
 }
diff --git a/frontend/src/app/mappings-store.ts b/frontend/src/app/mappings-store.ts
index 4167140..f7f0081 100644
--- a/frontend/src/app/mappings-store.ts
+++ b/frontend/src/app/mappings-store.ts
@@ -9,6 +9,7 @@ interface State {
     allowFields: boolean,
     allowMethods: boolean,
     searchText: string,
+    mode: string | undefined,
     translateMode: string | undefined,
     translateAs: string | undefined,
     translateAsVersion: string | undefined,
@@ -28,6 +29,7 @@ function newState(): State {
         allowFields: true,
         allowMethods: true,
         searchText: "",
+        mode: undefined,
         translateMode: undefined,
         translateAs: undefined,
         translateAsVersion: undefined,
diff --git a/frontend/src/components/Alerts.vue b/frontend/src/components/Alerts.vue
index 190611d..656a002 100644
--- a/frontend/src/components/Alerts.vue
+++ b/frontend/src/components/Alerts.vue
@@ -45,31 +45,16 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-import {Alert, useAlertsStore} from "../app/alerts-store"
-import {mapActions, mapState} from "pinia"
+<script setup lang="ts">
+import {useAlertsStore} from "../app/alerts-store"
+import {storeToRefs} from "pinia"
 import {useNotificationStore} from "../app/notification-store"
 
-export default defineComponent({
-    name: "Alerts",
-    data() {
-        return {
-            timer: undefined as any,
-        }
-    },
-    computed: {
-        ...mapState(useAlertsStore, ["alerts"]),
-        ...mapState(useNotificationStore, ["notifications"]),
-    },
-    methods: {
-        getAlertFor(type: string): Alert[] {
-            return this.alerts.filter((alert: Alert) => alert.type === type)
-        },
-        ...mapActions(useAlertsStore, ["removeAlert"]),
-        ...mapActions(useNotificationStore, ["removeNotification"]),
-    },
-})
+const { alerts } = storeToRefs(useAlertsStore())
+const { notifications } = storeToRefs(useNotificationStore())
+
+const { removeAlert } = useAlertsStore()
+const { removeNotification } = useNotificationStore()
 </script>
 
 <style>
diff --git a/frontend/src/components/Block.vue b/frontend/src/components/Block.vue
index d08e3ee..07fa158 100644
--- a/frontend/src/components/Block.vue
+++ b/frontend/src/components/Block.vue
@@ -4,12 +4,7 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "Block",
-})
+<script setup lang="ts">
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/Copyable.vue b/frontend/src/components/Copyable.vue
index 5fa1036..9eefacd 100644
--- a/frontend/src/components/Copyable.vue
+++ b/frontend/src/components/Copyable.vue
@@ -5,28 +5,14 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
+<script setup lang="ts">
 import {copyAs} from "../app/copy"
 import CopyableIcon from "./CopyableIcon.vue"
 
-export default defineComponent({
-    name: "Copyable",
-    components: {CopyableIcon},
-    data() {
-        return {
-            copyAs,
-        }
-    },
-    props: {
-        copy: {
-            type: String,
-        },
-        strokeWidth: {
-            type: String,
-        },
-    },
-})
+defineProps<{
+    copy?: string,
+    strokeWidth?: string,
+}>()
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/CopyableIcon.vue b/frontend/src/components/CopyableIcon.vue
index 63cfe08..4b77d2f 100644
--- a/frontend/src/components/CopyableIcon.vue
+++ b/frontend/src/components/CopyableIcon.vue
@@ -2,21 +2,12 @@
     <IconCopy class="min-w-[20px] w-[20px] ml-[1px] mr-[-.3rem]" :strokeWidth="strokeWidth ?? '2'"/>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
+<script setup lang="ts">
 import {IconCopy} from "@tabler/icons-vue"
 
-export default defineComponent({
-    name: "CopyableIcon",
-    components: {
-        IconCopy,
-    },
-    props: {
-        strokeWidth: {
-            type: String,
-        },
-    },
-})
+defineProps<{
+    strokeWidth?: string,
+}>()
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index f0d1033..f8e2d5e 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -30,14 +30,8 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
+<script setup lang="ts">
 import {IconBrandGithub, IconBrandOpenSource, IconBrandTwitter, IconHeartFilled, IconMail} from "@tabler/icons-vue"
-
-export default defineComponent({
-    name: "Footer",
-    components: {IconBrandGithub, IconBrandOpenSource, IconBrandTwitter, IconHeartFilled, IconMail},
-})
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/LoadingSection.vue b/frontend/src/components/LoadingSection.vue
index ccc6e60..738a9df 100644
--- a/frontend/src/components/LoadingSection.vue
+++ b/frontend/src/components/LoadingSection.vue
@@ -14,17 +14,11 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "LoadingSection",
-    props: {
-        text: {
-            type: String,
-            default: "Loading...",
-        },
-    }
+<script setup lang="ts">
+withDefaults(defineProps<{
+    text?: string,
+}>(), {
+    text: "Loading...",
 })
 </script>
 
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index c519a6d..a930672 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -82,74 +82,65 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-import NavbarButton from "./navbar/NavbarButton.vue"
-import {mapWritableState} from "pinia"
+<script setup lang="ts">
+import {computed, onMounted, ref} from "vue"
+import {ExportedGlobalComposer, VueI18n} from "vue-i18n"
 import {useI18nStore} from "../app/i18n-store"
+import {storeToRefs} from "pinia"
 import NavbarDropdown, {DropdownOption} from "./navbar/NavbarDropdown.vue"
-import {ExportedGlobalComposer, VueI18n} from "vue-i18n"
 import {IconExternalLink, IconLanguageHiragana, IconMoon, IconMoonOff} from "@tabler/icons-vue"
+import NavbarButton from "./navbar/NavbarButton.vue"
+
+const componentKey = ref(0)
+const addDropShadow = ref(false)
 
-export default defineComponent({
-    name: "Navbar",
-    components: {NavbarDropdown, NavbarButton, IconLanguageHiragana, IconMoon, IconMoonOff, IconExternalLink},
-    data() {
+onMounted(() => {
+    document.addEventListener("scroll", () => {
+        let element = document.getElementById("welcome-banner")
+        if (element) {
+            let navbar = document.getElementById("nav-bar")
+            addDropShadow.value = window.scrollY > element.clientHeight - (navbar?.clientHeight ?? 0)
+        } else {
+            addDropShadow.value = window.scrollY > 0
+        }
+    })
+})
+
+function darkMode(): boolean {
+    return localStorage.getItem("theme") === "dark"
+}
+
+function localeOptions(i18n: VueI18n | ExportedGlobalComposer): DropdownOption[] {
+    function createLocale(id: string, name: string): DropdownOption {
         return {
-            componentKey: 0,
-            addDropShadow: false,
+            id, name, onClick() {
+                useI18nStore().locale = id
+                i18n.locale = id
+            },
         }
-    },
-    computed: {
-        ...mapWritableState(useI18nStore, ["locale"]),
-    },
-    methods: {
-        localeOptions(i18n: VueI18n | ExportedGlobalComposer): DropdownOption[] {
-            function createLocale(id: string, name: string): DropdownOption {
-                return {
-                    id, name, onClick() {
-                        useI18nStore().locale = id
-                        i18n.locale = id
-                    },
-                }
-            }
+    }
 
-            return [
-                createLocale("en_US", "English (US)"),
-                createLocale("en_GB", "English (UK)"),
-                createLocale("zh_CN", "中文 (中国)"),
-                createLocale("zh_TW", "中文 (台灣)"),
-            ]
-        },
-        darkMode(): boolean {
-            return localStorage.getItem("theme") === "dark"
-        },
-        setDarkMode(darkMode: boolean) {
-            localStorage.setItem("theme", darkMode ? "dark" : "cupcake")
-            if (localStorage.getItem("theme") === "dark") {
-                document.documentElement.setAttribute("data-theme", "dark")
-                document.documentElement.classList.add("dark")
-                document.documentElement.style.setProperty("--color-scheme", "dark")
-            } else {
-                document.documentElement.removeAttribute("data-theme")
-                document.documentElement.classList.remove("dark")
-                document.documentElement.style.setProperty("--color-scheme", "light")
-            }
-            this.componentKey++
-        },
-    },
-    mounted() {
-        document.addEventListener("scroll", () => {
-            let element = document.getElementById("welcome-banner")
-            if (element) {
-                let navbar = document.getElementById("nav-bar")
-                this.addDropShadow = window.scrollY > element.clientHeight - (navbar?.clientHeight ?? 0)
-            } else {
-                this.addDropShadow = window.scrollY > 0
-            }
-        })
-    },
-})
+    return [
+        createLocale("en_US", "English (US)"),
+        createLocale("en_GB", "English (UK)"),
+        createLocale("zh_CN", "中文 (中国)"),
+        createLocale("zh_TW", "中文 (台灣)"),
+    ]
+}
+
+function setDarkMode(darkMode: boolean) {
+    localStorage.setItem("theme", darkMode ? "dark" : "cupcake")
+    if (localStorage.getItem("theme") === "dark") {
+        document.documentElement.setAttribute("data-theme", "dark")
+        document.documentElement.classList.add("dark")
+        document.documentElement.style.setProperty("--color-scheme", "dark")
+    } else {
+        document.documentElement.removeAttribute("data-theme")
+        document.documentElement.classList.remove("dark")
+        document.documentElement.style.setProperty("--color-scheme", "light")
+    }
+    componentKey.value++
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/NewsProjectGenerator.vue b/frontend/src/components/NewsProjectGenerator.vue
index e8fc2ff..cbd1707 100644
--- a/frontend/src/components/NewsProjectGenerator.vue
+++ b/frontend/src/components/NewsProjectGenerator.vue
@@ -15,14 +15,8 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
+<script setup lang="ts">
 import GeneratorDescription from "./generator/GeneratorDescription.vue"
-
-export default defineComponent({
-    name: "NewsProjectGenerator",
-    components: {GeneratorDescription},
-})
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/PageContent.vue b/frontend/src/components/PageContent.vue
index e204634..cee71c8 100644
--- a/frontend/src/components/PageContent.vue
+++ b/frontend/src/components/PageContent.vue
@@ -4,12 +4,7 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "PageContent",
-})
+<script setup lang="ts">
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/PageSidebar.vue b/frontend/src/components/PageSidebar.vue
index a20ff2f..aa30ee0 100644
--- a/frontend/src/components/PageSidebar.vue
+++ b/frontend/src/components/PageSidebar.vue
@@ -4,12 +4,7 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "PageSidebar",
-})
+<script setup lang="ts">
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/PageWidthLimiter.vue b/frontend/src/components/PageWidthLimiter.vue
index 1b42ceb..c97b925 100644
--- a/frontend/src/components/PageWidthLimiter.vue
+++ b/frontend/src/components/PageWidthLimiter.vue
@@ -4,12 +4,7 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "PageWidthLimiter",
-})
+<script setup lang="ts">
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/Tooltip.vue b/frontend/src/components/Tooltip.vue
index 96a4bef..2ebd81d 100644
--- a/frontend/src/components/Tooltip.vue
+++ b/frontend/src/components/Tooltip.vue
@@ -11,17 +11,11 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "Tooltip",
-    props: {
-        placement: {
-            type: String,
-            default: "right",
-        },
-    }
+<script setup lang="ts">
+withDefaults(defineProps<{
+    placement?: string
+}>(), {
+    placement: "right",
 })
 </script>
 
diff --git a/frontend/src/components/TransitionFadeIn.vue b/frontend/src/components/TransitionFadeIn.vue
index 7b88e42..85d93c1 100644
--- a/frontend/src/components/TransitionFadeIn.vue
+++ b/frontend/src/components/TransitionFadeIn.vue
@@ -10,12 +10,7 @@
     </transition-group>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "TransitionFadeIn",
-})
+<script setup lang="ts">
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/dependencies/SubHeader.vue b/frontend/src/components/dependencies/SubHeader.vue
index b97deb4..67d51d2 100644
--- a/frontend/src/components/dependencies/SubHeader.vue
+++ b/frontend/src/components/dependencies/SubHeader.vue
@@ -4,12 +4,7 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "SubHeader",
-})
+<script setup lang="ts">
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/home/HomeDependencies.vue b/frontend/src/components/home/HomeDependencies.vue
index 3e1bf1f..7af5892 100644
--- a/frontend/src/components/home/HomeDependencies.vue
+++ b/frontend/src/components/home/HomeDependencies.vue
@@ -1,54 +1,52 @@
 <template>
     <div class="flex gap-x-4 gap-y-3 flex-wrap">
         <router-link class="px-4 py-2 cursor-pointer border-2 border-base-content dark:border-base-dark-content
-        font-medium rounded-xl whitespace-nowrap hover:scale-110 transition-all" 
-               v-for="version in versions.slice(0, 16)" :to="select(version[0], version[1])">{{ version[0] }} {{ version[1] }}</router-link>
+        font-medium rounded-xl whitespace-nowrap hover:scale-110 transition-all"
+                     v-for="version in versions.slice(0, 16)" :to="select(version[0], version[1])">{{ version[0] }} {{ version[1] }}
+        </router-link>
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-import Block from "../Block.vue"
+<script setup lang="ts">
+import {computed, onMounted} from "vue"
 import {ensureDependencyData, updateDependencyData, useDependenciesDataStore} from "../../app/dependencies-data"
-import {mapState} from "pinia"
+import {storeToRefs} from "pinia"
 import {fullPath} from "../../app/backend"
+import {useRoute} from "vue-router"
 
-export default defineComponent({
-    name: "HomeDependencies",
-    components: {Block},
-    methods: {
-        select(loader: string, version: string): string {
-            return `/dependencies?loader=${loader.toLowerCase()}&version=${version}`
-        },
-    },
-    computed: {
-        versions() {
-            let versions = useDependenciesDataStore().searchData.versions
-            let list = Object.keys(versions).map(loader => versions[loader].filter(entry => entry.stable).map(entry => [loader, entry.version])).flat()
-            list = list.map(entry => [entry[0] == "fabric" ? "Fabric" : entry[0] == "neoforge" ? "NeoForge" : "Forge", entry[1]])
-            list.sort((b, a) => {
-                let aVersion = a[1]
-                let bVersion = b[1]
-                if (aVersion === bVersion) return 0
-                let aSplit = aVersion.split(".")
-                let bSplit = bVersion.split(".")
-                for (let i = 0; i < aSplit.length; i++) {
-                    if (bSplit.length <= i) return 1
-                    let aNum = parseInt(aSplit[i])
-                    let bNum = parseInt(bSplit[i])
-                    if (aNum === bNum) continue
-                    return aNum - bNum
-                }
-                return -1
-            })
-            return list
-        },
-        ...mapState(useDependenciesDataStore, ["searchData"]),
-    },
-    mounted() {
-        updateDependencyData(fullPath())
-        ensureDependencyData(fullPath())
-    },
+const {searchData} = storeToRefs(useDependenciesDataStore())
+
+const route = useRoute()
+
+const versions = computed(() => {
+    let versions = searchData.value.versions
+    let list = Object.keys(versions).map(loader => versions[loader].filter(entry => entry.stable).map(entry => [loader, entry.version])).flat()
+    list = list.map(entry => [entry[0] == "fabric" ? "Fabric" : entry[0] == "neoforge" ? "NeoForge" : "Forge", entry[1]])
+    list.sort((b, a) => {
+        let aVersion = a[1]
+        let bVersion = b[1]
+        if (aVersion === bVersion) return 0
+        let aSplit = aVersion.split(".")
+        let bSplit = bVersion.split(".")
+        for (let i = 0; i < aSplit.length; i++) {
+            if (bSplit.length <= i) return 1
+            let aNum = parseInt(aSplit[i])
+            let bNum = parseInt(bSplit[i])
+            if (aNum === bNum) continue
+            return aNum - bNum
+        }
+        return -1
+    })
+    return list
+})
+
+function select(loader: string, version: string): string {
+    return `/dependencies?loader=${loader.toLowerCase()}&version=${version}`
+}
+
+onMounted(() => {
+    updateDependencyData(fullPath(route))
+    ensureDependencyData(fullPath(route))
 })
 </script>
 
diff --git a/frontend/src/components/home/HomeMappings.vue b/frontend/src/components/home/HomeMappings.vue
index 4d674a6..e4e38e7 100644
--- a/frontend/src/components/home/HomeMappings.vue
+++ b/frontend/src/components/home/HomeMappings.vue
@@ -5,63 +5,56 @@
             <div class="flex gap-x-4 gap-y-3 flex-wrap">
                 <router-link class="px-4 py-2 cursor-pointer border-2 border-base-content dark:border-base-dark-content
                  font-medium rounded-xl whitespace-nowrap hover:scale-110 transition-all"
-                     v-for="version in vers.slice(0, 16)" :to="select(version[0], version[1])">{{ version[1] }}
+                             v-for="version in vers.slice(0, 16)" :to="select(version[0], version[1])">{{ version[1] }}
                 </router-link>
             </div>
         </div>
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-import Block from "../Block.vue"
-import {ensureMappingsData, updateMappingsData, useMappingsDataStore} from "../../app/mappings-data"
-import {mapState} from "pinia"
+<script setup lang="ts">
+import {computed, onMounted} from "vue"
+import {useMappingsDataStore} from "../../app/mappings-data"
+import {storeToRefs} from "pinia"
 import {fullPath, namespaceLocalizations} from "../../app/backend"
+import {ensureDependencyData, updateDependencyData} from "../../app/dependencies-data"
+import {useRoute} from "vue-router"
 
-export default defineComponent({
-    name: "HomeMappings",
-    components: {Block},
-    data() {
-        return {
-            namespaceLocalizations,
-        }
-    },
-    methods: {
-        select(namespace: string, version: string): string {
-            return `/mappings?namespace=${namespace.toLowerCase()}&version=${version}`
-        },
-    },
-    computed: {
-        versions() {
-            let namespaces = useMappingsDataStore().mappingsData.namespaces
-                    .filter(namespace => ["yarn", "mojang", "mojang_srg"].includes(namespace.id))
-            return namespaces.map(namespace => {
-                let l = namespace.versions.filter(entry => entry.stable).map(entry => [namespace.id, entry.version])
-                l.sort((b, a) => {
-                    let aVersion = a[1]
-                    let bVersion = b[1]
-                    if (aVersion === bVersion) return 0
-                    let aSplit = aVersion.split(".")
-                    let bSplit = bVersion.split(".")
-                    for (let i = 0; i < aSplit.length; i++) {
-                        if (bSplit.length <= i) return 1
-                        let aNum = parseInt(aSplit[i])
-                        let bNum = parseInt(bSplit[i])
-                        if (aNum === bNum) continue
-                        return aNum - bNum
-                    }
-                    return -1
-                })
-                return l
-            })
-        },
-        ...mapState(useMappingsDataStore, ["mappingsData"]),
-    },
-    mounted() {
-        updateMappingsData(fullPath())
-        ensureMappingsData(fullPath())
-    },
+const {mappingsData} = storeToRefs(useMappingsDataStore())
+
+const route = useRoute()
+
+const versions = computed(() => {
+    let namespaces = mappingsData.value.namespaces
+    .filter(namespace => ["yarn", "mojang", "mojang_srg"].includes(namespace.id))
+    return namespaces.map(namespace => {
+        let l = namespace.versions.filter(entry => entry.stable).map(entry => [namespace.id, entry.version])
+        l.sort((b, a) => {
+            let aVersion = a[1]
+            let bVersion = b[1]
+            if (aVersion === bVersion) return 0
+            let aSplit = aVersion.split(".")
+            let bSplit = bVersion.split(".")
+            for (let i = 0; i < aSplit.length; i++) {
+                if (bSplit.length <= i) return 1
+                let aNum = parseInt(aSplit[i])
+                let bNum = parseInt(bSplit[i])
+                if (aNum === bNum) continue
+                return aNum - bNum
+            }
+            return -1
+        })
+        return l
+    })
+})
+
+function select(namespace: string, version: string): string {
+    return `/mappings?namespace=${namespace.toLowerCase()}&version=${version}`
+}
+
+onMounted(() => {
+    updateDependencyData(fullPath(route))
+    ensureDependencyData(fullPath(route))
 })
 </script>
 
diff --git a/frontend/src/components/mappings/EntryDetails.vue b/frontend/src/components/mappings/EntryDetails.vue
index fbb9b8d..f3b63b9 100644
--- a/frontend/src/components/mappings/EntryDetails.vue
+++ b/frontend/src/components/mappings/EntryDetails.vue
@@ -8,19 +8,12 @@
     </div>
 </template>
 
-<script lang="ts">
-
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "EntryDetails",
-    props: {
-        title: String,
-        code: {
-            type: Boolean,
-            default: () => true,
-        },
-    },
+<script setup lang="ts">
+withDefaults(defineProps<{
+    title?: string,
+    code: boolean
+}>(), {
+    code: true,
 })
 </script>
 
diff --git a/frontend/src/components/mappings/MappingsFilterBlock.vue b/frontend/src/components/mappings/MappingsFilterBlock.vue
index 98edbce..e07d64f 100644
--- a/frontend/src/components/mappings/MappingsFilterBlock.vue
+++ b/frontend/src/components/mappings/MappingsFilterBlock.vue
@@ -1,5 +1,25 @@
 <template>
     <div class="flex flex-col">
+        <SubHeader class="mt-[-.25rem] mb-1 flex items-center gap-1.5">
+            {{ $t("mappings.mode") }}
+            <IconBrandCodepen :size="20"/>
+        </SubHeader>
+
+        <div class="pt-2 pb-2.5 flex gap-3">
+            <button v-for="item in ['mappings', 'stacktrace']"
+                    :aria-selected="(mode ?? 'mappings') === item" @click="selectMode(item)" @mouseenter="modeHover = true" @mouseleave="modeHover = false"
+                    class="selection-button py-2 px-3 flex items-center text-left rounded-lg bg-base-500 dark:bg-base-dark-200 bg-opacity-60 hover:bg-opacity-100
+                dark:hover:bg-base-dark-400 dark:focus:bg-base-dark-400 transition-all duration-150 border-none select-none group overflow-clip flex-shrink-0">
+                <IconTriangles class="flex-shrink-0" :size="20" v-if="item === 'mappings'"/>
+                <IconFileSad class="flex-shrink-0" :size="20" v-else/>
+                <span :aria-expanded="!modeHover && (mode ?? 'mappings') === item"
+                      class="group-hover:opacity-100 group-hover:w-fit group-hover:pl-2 aria-expanded:opacity-100 aria-expanded:w-fit aria-expanded:pl-2 w-0 pl-0 transition-all duration-150 opacity-[-100]">
+                    {{ $t(`mappings.mode.${item}`) }}</span>
+            </button>
+        </div>
+
+        <div class="divider mt-0 mb-0 pb-0.5"/>
+
         <SubHeader class="mt-[-.25rem] mb-1 flex items-center gap-1.5">
             {{ $t("mappings.namespace") }}
             <IconDatabase :size="20"/>
@@ -72,8 +92,8 @@
             </div>
         </div>
 
-        <div class="divider mt-0 mb-0"/>
-        <div class="mt-2">
+        <div class="divider mt-0 mb-0" v-if="mode === 'mappings'"/>
+        <div class="mt-2" v-if="mode === 'mappings'">
             <SubHeader class="flex items-center gap-1.5">
                 {{ $t("mappings.translation") }}
                 <IconWorld :size="20"/>
@@ -159,82 +179,70 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue"
-import {mapWritableState} from "pinia"
-import {applicableMappingsVersions, useMappingsStore, VersionPossible} from "../../app/mappings-store"
+<script setup lang="ts">
+import {computed, ref} from "vue"
+import {storeToRefs} from "pinia"
+import {applicableMappingsVersions, useMappingsStore} from "../../app/mappings-store"
 import SubHeader from "../dependencies/SubHeader.vue"
 import {allNamespaceGroups, hiddenNamespaceGroups, namespaceGroups, namespaceLocalizations} from "../../app/backend"
 import {MappingsData, Namespace} from "../../app/mappings-data"
-import {IconArrowBarToRight, IconArrowBounce, IconArrowIteration, IconDatabase, IconGitCherryPick, IconWorld} from "@tabler/icons-vue"
-
-export default defineComponent({
-    name: "MappingsFilterBlock",
-    components: {SubHeader, IconArrowBarToRight, IconArrowBounce, IconArrowIteration, IconDatabase, IconGitCherryPick, IconWorld},
-    data() {
-        return {
-            expandNamespaces: false,
-            expandTranslations: false,
-            hiddenNamespaceGroups,
+import {IconArrowBarToRight, IconArrowBounce, IconArrowIteration, IconBrandCodepen, IconDatabase, IconFileSad, IconGitCherryPick, IconTriangles, IconWorld} from "@tabler/icons-vue"
+import {useI18n} from "vue-i18n"
+
+const {data} = defineProps<{
+    data: MappingsData
+}>()
+
+const expandNamespaces = ref(false)
+const expandTranslations = ref(false)
+const modeHover = ref(false)
+
+const { t } = useI18n();
+
+const {namespace, version, allowSnapshots, mode, translateMode, translateAs, translateAsVersion} = storeToRefs(useMappingsStore())
+
+const namespaces = computed<Namespace[]>(() => data.namespaces)
+const namespacesGrouped = computed<[string, Namespace[]][]>(() => {
+    let groups = {} as { [group: string]: Namespace[] }
+    for (let ns in namespaces.value) {
+        let groupsApplicable = namespaceGroups[namespaces.value[ns].id] ?? "Others"
+        if (typeof groupsApplicable === "string") {
+            groupsApplicable = [groupsApplicable]
         }
-    },
-    methods: {
-        localizeNamespace(namespace?: Namespace | string): string | undefined {
-            if (typeof namespace === "string") {
-                return this.$t(`namespace.${namespace.toLowerCase()}`) || namespaceLocalizations[namespace.toLowerCase()] || namespace.toLowerCase()
-            } else if (namespace) {
-                let id = namespace.id
-                return this.$t(`namespace.${id.toLowerCase()}`) || namespaceLocalizations[id.toLowerCase()] || id.toLowerCase()
-            } else {
-                return undefined
-            }
-        },
-        delocalizeNamespace(string: string): Namespace {
-            let id = Object.entries(namespaceLocalizations)
-            .find(([id, name]) => name === string)
-                ?.[0] ?? this.namespace
-            return this.namespaces.find(ns => ns.id === id) ?? (this.namespaces.find(ns => ns.id === this.namespace) ?? this.namespaces[0])
-        },
-    },
-    computed: {
-        ...mapWritableState(useMappingsStore, ["namespace", "version", "allowSnapshots", "translateMode", "translateAs", "translateAsVersion"]),
-        namespaces(): Namespace[] {
-            return this.data.namespaces
-        },
-        namespacesGrouped(): [string, Namespace[]][] {
-            let groups = {} as { [group: string]: Namespace[] }
-            for (let ns in this.namespaces) {
-                let groupsApplicable = namespaceGroups[this.namespaces[ns].id] ?? "Others"
-                if (typeof groupsApplicable === "string") {
-                    groupsApplicable = [groupsApplicable]
-                }
-                for (let group of groupsApplicable) {
-                    if (!groups[group]) {
-                        groups[group] = []
-                    }
-                    groups[group].push(this.namespaces[ns])
-                }
+        for (let group of groupsApplicable) {
+            if (!groups[group]) {
+                groups[group] = []
             }
-            for (let groupsKey in groups) {
-                //sort
-                groups[groupsKey].sort((a, b) => (this.localizeNamespace(a) ?? "").localeCompare(this.localizeNamespace(b) ?? ""))
-            }
-            return Object.entries(groups).sort((a, b) => allNamespaceGroups.indexOf(a[0]) - allNamespaceGroups.indexOf(b[0]))
-        },
-        firstNamespace(): Namespace | undefined {
-            return this.namespaces[0]
-        },
-        applicableVersions(): VersionPossible[] {
-            return applicableMappingsVersions()
-        },
-    },
-    props: {
-        data: {
-            type: Object as PropType<MappingsData>,
-            required: true,
-        },
-    },
+            groups[group].push(namespaces.value[ns])
+        }
+    }
+    for (let groupsKey in groups) {
+        //sort
+        groups[groupsKey].sort((a, b) => (localizeNamespace(a) ?? "").localeCompare(localizeNamespace(b) ?? ""))
+    }
+    return Object.entries(groups).sort((a, b) => allNamespaceGroups.indexOf(a[0]) - allNamespaceGroups.indexOf(b[0]))
 })
+const applicableVersions = computed(() => applicableMappingsVersions())
+
+function localizeNamespace(namespace?: Namespace | string): string | undefined {
+    if (typeof namespace === "string") {
+        return t(`namespace.${namespace.toLowerCase()}`) || namespaceLocalizations[namespace.toLowerCase()] || namespace.toLowerCase()
+    } else if (namespace) {
+        let id = namespace.id
+        return t(`namespace.${id.toLowerCase()}`) || namespaceLocalizations[id.toLowerCase()] || id.toLowerCase()
+    } else {
+        return undefined
+    }
+}
+
+function selectMode(_mode: string) {
+    mode.value = _mode
+    if (mode.value === "stacktrace") {
+        translateMode.value = "none"
+        translateAs.value = undefined
+        translateAsVersion.value = undefined
+    }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/mappings/MappingsFilterPill.vue b/frontend/src/components/mappings/MappingsFilterPill.vue
index 4ba9637..1bbe32d 100644
--- a/frontend/src/components/mappings/MappingsFilterPill.vue
+++ b/frontend/src/components/mappings/MappingsFilterPill.vue
@@ -9,25 +9,13 @@
     </a>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
+<script setup lang="ts">
 import {IconFilter, IconFilterOff} from "@tabler/icons-vue"
 
-export default defineComponent({
-    name: "MappingsFilterPill",
-    components: {
-        IconFilter,
-        IconFilterOff,
-    },
-    props: {
-        enabled: {
-            type: Boolean,
-        },
-        text: {
-            type: String,
-        },
-    },
-})
+defineProps<{
+    enabled: boolean,
+    text: string,
+}>()
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/mappings/MappingsMethodLine.vue b/frontend/src/components/mappings/MappingsMethodLine.vue
index 316a687..6269672 100644
--- a/frontend/src/components/mappings/MappingsMethodLine.vue
+++ b/frontend/src/components/mappings/MappingsMethodLine.vue
@@ -32,39 +32,19 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue"
+<script setup lang="ts">
 import Tooltip from "../Tooltip.vue"
 import AutoBold from "./AutoBold.vue"
 import {MappingEntry} from "../../app/mappings-data"
 import {IconAlertCircle, IconAlertCircleFilled, IconAlertTriangle, IconAlertTriangleFilled} from "@tabler/icons-vue"
 
-export default defineComponent({
-    name: "MappingsMethodLine",
-    components: {AutoBold, Tooltip, IconAlertTriangle, IconAlertTriangleFilled, IconAlertCircle, IconAlertCircleFilled},
-    props: {
-        entry: {
-            type: Object as PropType<MappingEntry>,
-            required: true,
-        },
-        methodReturnType: {
-            type: Function as PropType<(entry: MappingEntry) => string>,
-            required: true,
-        },
-        methodArgs: {
-            type: Function as PropType<(entry: MappingEntry) => string>,
-            required: true,
-        },
-        getOptimumName: {
-            type: Function as PropType<(entry: MappingEntry) => string>,
-            required: true,
-        },
-        onlyClass: {
-            type: Function as PropType<(name: string) => string>,
-            required: true,
-        },
-    },
-})
+defineProps<{
+    entry: MappingEntry,
+    methodReturnType: (entry: MappingEntry) => string,
+    methodArgs: (entry: MappingEntry) => string,
+    getOptimumName: (entry: MappingEntry) => string,
+    onlyClass: (name: string) => string,
+}>()
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/mappings/MappingsSearchBlock.vue b/frontend/src/components/mappings/MappingsSearchBlock.vue
index 7d6f198..f03de6f 100644
--- a/frontend/src/components/mappings/MappingsSearchBlock.vue
+++ b/frontend/src/components/mappings/MappingsSearchBlock.vue
@@ -17,38 +17,24 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-import {mapState, mapWritableState} from "pinia"
+<script setup lang="ts">
+import {ref} from "vue"
+import {storeToRefs} from "pinia"
 import {useMappingsStore} from "../../app/mappings-store"
 import MappingsFilterPill from "./MappingsFilterPill.vue"
 import {IconSearch} from "@tabler/icons-vue"
 
-export default defineComponent({
-    name: "MappingsSearchBlock",
-    data() {
-        return {
-            timer: undefined as any,
-        }
-    },
-    components: {
-        MappingsFilterPill,
-        IconSearch,
-    },
-    computed: {
-        ...mapWritableState(useMappingsStore, ["allowClasses", "allowFields", "allowMethods"]),
-        ...mapState(useMappingsStore, ["searchText"]),
-    },
-    methods: {
-        searchTimeOut(event: any) {
-            clearTimeout(this.timer)
+const timer = ref<ReturnType<typeof setTimeout> | undefined>(undefined)
 
-            this.timer = setTimeout(() => {
-                useMappingsStore().searchText = (event.target as any)?.value?.replaceAll(" ", "")
-            }, 100)
-        },
-    },
-})
+const { searchText, allowClasses, allowFields, allowMethods } = storeToRefs(useMappingsStore())
+
+function searchTimeOut(event: KeyboardEvent) {
+    clearTimeout(timer.value)
+
+    timer.value = setTimeout(() => {
+        useMappingsStore().searchText = (event.target as any)?.value?.replaceAll(" ", "")
+    }, 100)
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/mappings/MappingsSearchPlaceholder.vue b/frontend/src/components/mappings/MappingsSearchPlaceholder.vue
index c8e3954..0a68e52 100644
--- a/frontend/src/components/mappings/MappingsSearchPlaceholder.vue
+++ b/frontend/src/components/mappings/MappingsSearchPlaceholder.vue
@@ -27,17 +27,11 @@
     </div>
 </template>
 
-<script lang="ts">
-
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "MappingsSearchPlaceholder",
-    props: {
-        searching: Boolean,
-        hasQuery: Boolean,
-    },
-})
+<script setup lang="ts">
+defineProps<{
+    searching: boolean,
+    hasQuery: boolean,
+}>()
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/mappings/MappingsStacktraceBlock.vue b/frontend/src/components/mappings/MappingsStacktraceBlock.vue
new file mode 100644
index 0000000..d0cae8f
--- /dev/null
+++ b/frontend/src/components/mappings/MappingsStacktraceBlock.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+
+import Block from "../Block.vue"
+import SubHeader from "../dependencies/SubHeader.vue"
+import {onMounted, ref} from "vue"
+import {HTTP} from "../../app/backend"
+import {useMappingsStore} from "../../app/mappings-store"
+import {storeToRefs} from "pinia"
+
+import "prism-code-editor/prism/languages/markup"
+import "prism-code-editor/prism/languages/java"
+import "prism-code-editor/layout.css"
+import "prism-code-editor/copy-button.css"
+import "prism-code-editor/search.css"
+import "prism-code-editor/themes/prism-tomorrow.css"
+
+// @ts-ignore
+import {createEditor, PrismEditor} from "prism-code-editor"
+// @ts-ignore
+import {matchBrackets} from "prism-code-editor/match-brackets"
+// @ts-ignore
+import {indentGuides} from "prism-code-editor/guides"
+// @ts-ignore
+import {defaultCommands} from "prism-code-editor/commands"
+// @ts-ignore
+import {copyButton} from "prism-code-editor/copy-button"
+// @ts-ignore
+import {highlightBracketPairs} from "prism-code-editor/highlight-brackets"
+// @ts-ignore
+import {searchWidget} from "prism-code-editor/search"
+
+const editor = ref<PrismEditor>()
+const {namespace, version} = storeToRefs(useMappingsStore())
+
+type Class = Record<string, string> & {
+    mappedName?: string
+}
+type Mappings = Record<string, Class>
+
+function formatName<T extends string | undefined>(str: T): T {
+    if (str) {
+        return str.replaceAll("$", ".").replaceAll("/", ".") as T
+    } else {
+        return str
+    }
+}
+
+function onlyClass<T extends string | undefined>(str: T): T {
+    if (str) {
+        let indexOf = str.lastIndexOf("/")
+        let substr = indexOf == -1 ? str : str.substring(indexOf + 1)
+        return formatName(substr) as T
+    } else {
+        return str
+    }
+}
+
+function translate() {
+    HTTP.get("api/mappings", {
+        params: {
+            namespace: namespace.value,
+            version: version.value,
+        },
+    }).then(response => {
+        let mappings: Mappings = response.data
+        if (!editor.value) {
+            console.error("Editor not initialized")
+            return
+        }
+        let stacktraces: string[] = editor.value.value.split("\n")
+        let replacements: [string | RegExp, string][] = []
+
+        function replaceAll(find: string | RegExp, replace: string) {
+            replacements.push([find, replace])
+        }
+
+        for (let [intermediaryName, clazz] of Object.entries(mappings).toReversed()) {
+            let intermediaryNameOnly = onlyClass(intermediaryName)
+            if (!!clazz.mappedName) {
+                let mappedNameOnly = onlyClass(clazz.mappedName)
+                replaceAll(intermediaryName.replaceAll("/", "."), clazz.mappedName.replaceAll("/", "."))
+                replaceAll(intermediaryNameOnly + ".java:", mappedNameOnly + ".java:")
+                replaceAll(new RegExp(intermediaryNameOnly + "(?!\\d)", "g"), mappedNameOnly)
+                for (let [functionName, mappedName] of Object.entries(clazz)) {
+                    if (functionName != "mappedName") {
+                        replaceAll(intermediaryNameOnly + "." + functionName, mappedNameOnly + "." + mappedName)
+                        replaceAll(mappedNameOnly + "." + functionName, mappedNameOnly + "." + mappedName)
+                    }
+                }
+            } else {
+                for (let [functionName, mappedName] of Object.entries(clazz)) {
+                    replaceAll(intermediaryNameOnly + "." + functionName, intermediaryNameOnly + "." + mappedName)
+                }
+            }
+        }
+
+        for (let [intermediaryName, clazz] of Object.entries(mappings).toReversed()) {
+            for (let [functionName, mappedName] of Object.entries(clazz)) {
+                if (functionName != "mappedName") {
+                    replaceAll("." + functionName + "(", "." + mappedName + "(")
+                }
+            }
+        }
+
+        stacktraces = stacktraces.map(stacktrace => {
+            for (let [find, replace] of replacements) {
+                stacktrace = stacktrace.replaceAll(find, replace)
+            }
+            return stacktrace
+        })
+
+        editor.value.setOptions({
+            value: stacktraces.join("\n"),
+        })
+        editor.value.textarea.focus()
+        editor.value.textarea.scrollTop = 0
+        editor.value.textarea.scrollLeft = 0
+    })
+}
+
+onMounted(() => {
+    editor.value = createEditor(
+        "#editor",
+        {
+            language: "java",
+            tabSize: 4,
+        },
+        indentGuides(),
+        matchBrackets(),
+        defaultCommands(),
+        highlightBracketPairs(),
+        searchWidget(),
+        copyButton(),
+    )
+})
+</script>
+
+<template>
+    <Block class="p-[-.25rem]">
+        <SubHeader class="mb-1.5 w-full flex justify-between items-center">
+            <span>Stacktrace</span>
+            <button class="bg-base-500/60 hover:bg-base-500/90 dark:bg-base-dark-300 dark:hover:bg-base-dark-400 transition-all rounded-lg px-3 py-2 text-base font-medium select-none" @click="translate()">Translate</button>
+        </SubHeader>
+<!--        <textarea ref="textarea" rows="30" class="w-full border-0 rounded-md py-2 mb-[-0.25rem] text-base-content dark:text-base-dark-content shadow-sm focus:ring-2 focus:ring-offset-2 focus:ring-base-content dark:focus:ring-base-dark-content caret-base-content dark:caret-base-dark-content focus:ring-offset-base-300 dark:focus:ring-offset-base-dark-200 text-sm leading-4 text-nowrap bg-base-l2 font-mono epic-scroller" autofocus @input="input" v-model="stacktrace"/>-->
+        <div id="editor" class="w-full [&>*]:min-h-[20rem] [&>*]:max-h-[60rem] text-sm [&>*]:rounded-md"/>
+    </Block>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/navbar/NavbarButton.vue b/frontend/src/components/navbar/NavbarButton.vue
index b90fd58..8402a59 100644
--- a/frontend/src/components/navbar/NavbarButton.vue
+++ b/frontend/src/components/navbar/NavbarButton.vue
@@ -3,27 +3,20 @@
             'px-4 py-3 rounded-lg transition-all duration-100 normal-case flex items-center',
             bold ? 'text-xl font-bold' : 'font-medium',
             hoverDim ? 'hover:opacity-70' : '',
-    ]" :to="{path: (href ?? ''), query: {}}">
+    ]" :to="{path: href, query: {}}">
         <slot/>
     </router-link>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "NavbarButton",
-    props: {
-        href: String,
-        bold: {
-            type: Boolean,
-            default: false,
-        },
-        hoverDim: {
-            type: Boolean,
-            default: true,
-        },
-    },
+<script setup lang="ts">
+withDefaults(defineProps<{
+    href?: string,
+    bold?: boolean,
+    hoverDim?: boolean,
+}>(), {
+    href: '',
+    bold: false,
+    hoverDim: true,
 })
 </script>
 
diff --git a/frontend/src/components/navbar/NavbarDropdown.vue b/frontend/src/components/navbar/NavbarDropdown.vue
index 7f07307..67db810 100644
--- a/frontend/src/components/navbar/NavbarDropdown.vue
+++ b/frontend/src/components/navbar/NavbarDropdown.vue
@@ -28,8 +28,8 @@
     </NavbarButton>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
+<script setup lang="ts">
+import {ref} from "vue"
 import NavbarButton from "./NavbarButton.vue"
 
 export interface DropdownOption {
@@ -38,21 +38,11 @@ export interface DropdownOption {
     onClick: () => void,
 }
 
-export default defineComponent({
-    name: "NavbarDropdown",
-    components: {NavbarButton},
-    data() {
-        return {
-            dropdownVisible: false,
-        }
-    },
-    props: {
-        options: {
-            type: Array as () => DropdownOption[],
-            required: true,
-        },
-    },
-})
+defineProps<{
+    options: DropdownOption[],
+}>()
+
+const dropdownVisible = ref(false)
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/statuses/NamespaceFilterBlock.vue b/frontend/src/components/statuses/NamespaceFilterBlock.vue
index ac21b2a..b587909 100644
--- a/frontend/src/components/statuses/NamespaceFilterBlock.vue
+++ b/frontend/src/components/statuses/NamespaceFilterBlock.vue
@@ -4,7 +4,7 @@
 
         <div class="flex gap-2 select-none justify-between mb-2">
             <label for="allow-snapshots"> {{ $t("dependencies.version.snapshots") }} </label>
-            <input type="checkbox" :checked="snapshots" @change="setSnapshots!!(($event.target as any).checked)"
+            <input type="checkbox" :checked="snapshots" @change="setSnapshots(($event.target as any).checked)"
                    id="allow-snapshots" aria-label="Enable Snapshots"/>
         </div>
 
@@ -12,7 +12,7 @@
             <div v-if="!namespace || namespace!!.supportsSource" :class="[
             ns === namespace?.id ? 'font-medium' : 'font-normal opacity-80 decoration-base-400/50 hover:decoration-base-500/70 dark:decoration-base-dark-400/50 dark:hover:decoration-base-dark-400/70',
             'underline underline-offset-2 decoration-2 cursor-pointer mx-[-.5rem] px-2 py-1 rounded transition-all bg-base-500 dark:hover:bg-base-dark-400 bg-opacity-0 hover:bg-opacity-70']"
-                 @click="setNs!!(namespace?.id as (string | null))">
+                 @click="setNs(namespace?.id as (string | null))">
                 <span v-if="!!namespace">
                     {{ namespaceLocalizations[namespace.id.toLowerCase()] || namespace.id.toLowerCase() }}
                 </span>
@@ -24,39 +24,20 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue"
-import {mapState} from "pinia"
+<script setup lang="ts">
+import {storeToRefs} from "pinia"
 import {useMappingsDataStore} from "../../app/mappings-data"
 import {namespaceLocalizations} from "../../app/backend"
 import SubHeader from "../dependencies/SubHeader.vue"
 
-export default defineComponent({
-    name: "NamespaceFilterBlock",
-    components: {SubHeader},
-    data() {
-        return {
-            namespaceLocalizations,
-        }
-    },
-    computed: {
-        ...mapState(useMappingsDataStore, ["mappingsData"]),
-    },
-    props: {
-        ns: {
-            type: Object as PropType<string | null>,
-        },
-        setNs: {
-            type: Object as PropType<(ns: string | null) => void>,
-        },
-        snapshots: {
-            type: Boolean,
-        },
-        setSnapshots: {
-            type: Object as PropType<(snapshots: boolean) => void>,
-        },
-    },
-})
+defineProps<{
+    ns?: string,
+    setNs: (ns: string | null) => void,
+    snapshots?: boolean,
+    setSnapshots: (snapshots: boolean) => void,
+}>()
+
+const {mappingsData} = storeToRefs(useMappingsDataStore())
 </script>
 
 <style scoped>
diff --git a/frontend/src/locales/en_US.json b/frontend/src/locales/en_US.json
index 37b71da..3e9f4c8 100644
--- a/frontend/src/locales/en_US.json
+++ b/frontend/src/locales/en_US.json
@@ -50,6 +50,9 @@
     "generator.mixins.config.description.2": "The Fabric Wiki's Introduction to Mixins is a great resource to start out. However, *you might not need Mixins* if your mod is something simple like adding a few blocks and items, APIs provide the essentials for that.\n\nhttps://fabricmc.net/wiki/tutorial:mixin_introduction",
     "generator.mixins.config.description.fabric": "This is not the case with Fabric. A large number of events and hooks are not available on Fabric, and most of the times you will need to hook it up yourselves.",
     "generator.dependencies.title": "Dependencies",
+    "mappings.mode": "Mode",
+    "mappings.mode.mappings": "Mappings",
+    "mappings.mode.stacktrace": "Stacktrace",
     "mappings.namespace": "Namespace",
     "mappings.namespace.show.more": "Show More...",
     "mappings.namespace.show.less": "Show Less...",
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 0f65895..7900f41 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -54,8 +54,10 @@ HTTP.interceptors.response.use(response => {
 })
 
 const i18n = createI18n({
+    legacy: false,
     locale: "en_US",
     fallbackLocale: "en_US",
+    allowComposition: true,
     messages: {
         "en_US": enUS,
         "en_GB": enGB,
diff --git a/frontend/src/routes/Dependencies.vue b/frontend/src/routes/Dependencies.vue
index 84394e5..a693e83 100644
--- a/frontend/src/routes/Dependencies.vue
+++ b/frontend/src/routes/Dependencies.vue
@@ -52,68 +52,58 @@
     <LoadingSection v-else class="h-[calc(100vh-56px-24px-5rem)]"/>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import DependencyFilterBlock from "../components/dependencies/DependencyFilterBlock.vue"
 import CodeBlock from "../components/dependencies/CodeBlock.vue"
 import SubHeader from "../components/dependencies/SubHeader.vue"
 import {formatDependency, formatMaven} from "../app/dep-format"
 import Block from "../components/Block.vue"
-import {defineComponent} from "vue"
+import {computed, onMounted, watch} from "vue"
 import {useDependencySearchStore} from "../app/dependency-store"
-import {mapState} from "pinia"
-import {DependencyBlockData, ensureDependencyData, updateDependencyData, useDependenciesDataStore} from "../app/dependencies-data"
+import {storeToRefs} from "pinia"
+import {ensureDependencyData, updateDependencyData, useDependenciesDataStore} from "../app/dependencies-data"
 import Copyable from "../components/Copyable.vue"
-import Header from "../components/dependencies/Header.vue"
 import PageWidthLimiter from "../components/PageWidthLimiter.vue"
 import PageSidebar from "../components/PageSidebar.vue"
 import PageContent from "../components/PageContent.vue"
 import LoadingSection from "../components/LoadingSection.vue"
 import {fullPath} from "../app/backend"
+import {useRoute} from "vue-router"
 
-export default defineComponent({
-    name: "Dependencies",
-    components: {LoadingSection, PageContent, PageSidebar, PageWidthLimiter, Header, Copyable, Block, CodeBlock, DependencyFilterBlock, SubHeader},
-    data() {
-        return {
-            formatMaven,
-            formatDependency,
-        }
-    },
-    computed: {
-        dependencyBlocks(): [string, DependencyBlockData][] {
-            let {loader, version} = useDependencySearchStore()
-            let {searchData} = useDependenciesDataStore()
-            return Object.entries(searchData.versions[loader ?? ""]
-                    ?.find(entry => entry.version === version)
-                    ?.blocks ?? {})
-        },
-        ...mapState(useDependenciesDataStore, ["searchData"]),
-        ...mapState(useDependencySearchStore, ["loader", "version", "allowSnapshots"]),
-    },
-    watch: {
-        loader: {
-            handler() {
-                updateDependencyData(fullPath())
-                ensureDependencyData(fullPath())
-            },
-            immediate: true,
-        },
-        version: {
-            handler() {
-                ensureDependencyData(fullPath())
-            },
-            immediate: true,
-        },
-        allowSnapshots: {
-            handler() {
-                ensureDependencyData(fullPath())
-            },
-            immediate: true,
-        },
-    },
-    mounted() {
-        updateDependencyData(fullPath(), this.$route.query)
-    },
+const { searchData } = storeToRefs(useDependenciesDataStore())
+const { loader, version, allowSnapshots } = storeToRefs(useDependencySearchStore())
+
+const route = useRoute()
+
+const dependencyBlocks = computed(() => {
+    let {loader, version} = useDependencySearchStore()
+    let {searchData} = useDependenciesDataStore()
+    return Object.entries(searchData.versions[loader ?? ""]
+    ?.find(entry => entry.version === version)
+        ?.blocks ?? {})
+})
+
+watch(loader, () => {
+    updateDependencyData(fullPath(route))
+    ensureDependencyData(fullPath(route))
+}, {
+    immediate: true,
+})
+
+watch(version, () => {
+    ensureDependencyData(fullPath(route))
+}, {
+    immediate: true,
+})
+
+watch(allowSnapshots, () => {
+    ensureDependencyData(fullPath(route))
+}, {
+    immediate: true,
+})
+
+onMounted(() => {
+    updateDependencyData(fullPath(route), useRoute().query)
 })
 </script>
 
diff --git a/frontend/src/routes/Home.vue b/frontend/src/routes/Home.vue
index 2af7b55..aaf65b1 100644
--- a/frontend/src/routes/Home.vue
+++ b/frontend/src/routes/Home.vue
@@ -51,22 +51,14 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-import Block from "../components/Block.vue"
+<script setup lang="ts">
 import HomeDependencies from "../components/home/HomeDependencies.vue"
 import HomeMappings from "../components/home/HomeMappings.vue"
 import Header from "../components/dependencies/Header.vue"
 import SubHeader from "../components/dependencies/SubHeader.vue"
-import Navbar from "../components/Navbar.vue"
 import PageContent from "../components/PageContent.vue"
 import PageWidthLimiter from "../components/PageWidthLimiter.vue"
 import NewsProjectGenerator from "../components/NewsProjectGenerator.vue"
-
-export default defineComponent({
-    name: "NotFound",
-    components: {NewsProjectGenerator, PageWidthLimiter, PageContent, Navbar, SubHeader, Header, Block, HomeDependencies, HomeMappings},
-})
 </script>
 
 <style scoped>
diff --git a/frontend/src/routes/Mappings.vue b/frontend/src/routes/Mappings.vue
index 533ec9b..2cbf664 100644
--- a/frontend/src/routes/Mappings.vue
+++ b/frontend/src/routes/Mappings.vue
@@ -5,7 +5,7 @@
                 <MappingsFilterBlock :data="mappingsData"/>
             </Block>
         </PageSidebar>
-        <PageContent class="flex flex-col gap-y-5">
+        <PageContent class="flex flex-col gap-y-5" v-if="(mode ?? 'mappings') === 'mappings'">
             <MappingsSearchBlock/>
             <MappingsEntryBlock v-for="entry in infoData.entries"
                                 :namespace="namespaceObj"
@@ -15,19 +15,22 @@
                                        :searching="!!searchController"
                                        :has-query="!!infoData.query"/>
         </PageContent>
+        <PageContent class="flex flex-col gap-y-5" v-else-if="mode === 'stacktrace'">
+            <MappingsStacktraceBlock/>
+        </PageContent>
     </PageWidthLimiter>
 
     <LoadingSection v-else class="h-[calc(100vh-56px-24px-5rem)]"/>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
+<script setup lang="ts">
+import {computed, onMounted, watch} from "vue"
 import {useMappingsStore} from "../app/mappings-store"
-import {mapState} from "pinia"
+import {storeToRefs} from "pinia"
 import MappingsSearchBlock from "../components/mappings/MappingsSearchBlock.vue"
 import MappingsEntryBlock from "../components/mappings/MappingsEntryBlock.vue"
 import MappingsFilterBlock from "../components/mappings/MappingsFilterBlock.vue"
-import {ensureMappingsData, Namespace, updateMappingsData, updateMappingsInfo, useMappingsDataStore} from "../app/mappings-data"
+import {ensureMappingsData, updateMappingsData, updateMappingsInfo, useMappingsDataStore} from "../app/mappings-data"
 import MappingsSearchPlaceholder from "../components/mappings/MappingsSearchPlaceholder.vue"
 import PageWidthLimiter from "../components/PageWidthLimiter.vue"
 import PageSidebar from "../components/PageSidebar.vue"
@@ -35,86 +38,37 @@ import PageContent from "../components/PageContent.vue"
 import LoadingSection from "../components/LoadingSection.vue"
 import Block from "../components/Block.vue"
 import {fullPath} from "../app/backend"
+import {useRoute} from "vue-router"
+import MappingsStacktraceBlock from "../components/mappings/MappingsStacktraceBlock.vue"
+
+const { mappingsData, infoData, searchController } = storeToRefs(useMappingsDataStore())
+const { mode, namespace, version, allowSnapshots, searchText, allowClasses, allowMethods, allowFields, translateAs, translateAsVersion } = storeToRefs(useMappingsStore())
+
+const namespaceObj = computed(() => mappingsData.value.namespaces.find(value => value.id === useMappingsStore().namespace)!!)
+
+const route = useRoute()
+
+watch([namespace, version], () => {
+    updateMappingsData(fullPath(route))
+    ensureMappingsData(fullPath(route))
+    updateMappingsInfo(fullPath(route))
+}, { immediate: true })
+
+watch(allowSnapshots, () => {
+    ensureMappingsData(fullPath(route))
+}, { immediate: true })
+
+watch([searchText, allowClasses, allowMethods, allowFields], () => {
+    updateMappingsInfo(fullPath(route))
+}, { immediate: true })
+
+watch([translateAs, translateAsVersion], () => {
+    ensureMappingsData(fullPath(route))
+    updateMappingsInfo(fullPath(route))
+}, { immediate: true })
 
-export default defineComponent({
-    name: "Mappings",
-    components: {
-        Block,
-        LoadingSection,
-        PageContent, PageSidebar, PageWidthLimiter, MappingsSearchPlaceholder, MappingsFilterBlock, MappingsSearchBlock, MappingsEntryBlock,
-    },
-    computed: {
-        namespaceObj(): Namespace {
-            return this.mappingsData.namespaces.find(value => value.id === this.infoData.namespace)!!
-        },
-        ...mapState(useMappingsDataStore, ["mappingsData", "infoData", "searchController"]),
-        ...mapState(useMappingsStore, ["namespace", "version", "allowSnapshots", "searchText", "allowClasses", "allowMethods", "allowFields", "translateAs", "translateAsVersion"]),
-    },
-    watch: {
-        namespace: {
-            handler() {
-                updateMappingsData(fullPath())
-                ensureMappingsData(fullPath())
-                updateMappingsInfo(fullPath())
-            },
-            immediate: true,
-        },
-        version: {
-            handler() {
-                updateMappingsData(fullPath())
-                ensureMappingsData(fullPath())
-                updateMappingsInfo(fullPath())
-            },
-            immediate: true,
-        },
-        allowSnapshots: {
-            handler() {
-                ensureMappingsData(fullPath())
-            },
-            immediate: true,
-        },
-        searchText: {
-            handler() {
-                updateMappingsInfo(fullPath())
-            },
-            immediate: true,
-        },
-        allowClasses: {
-            handler() {
-                updateMappingsInfo(fullPath())
-            },
-            immediate: true,
-        },
-        allowMethods: {
-            handler() {
-                updateMappingsInfo(fullPath())
-            },
-            immediate: true,
-        },
-        allowFields: {
-            handler() {
-                updateMappingsInfo(fullPath())
-            },
-            immediate: true,
-        },
-        translateAs: {
-            handler() {
-                ensureMappingsData(fullPath())
-                updateMappingsInfo(fullPath())
-            },
-            immediate: true,
-        },
-        translateAsVersion: {
-            handler() {
-                ensureMappingsData(fullPath())
-                updateMappingsInfo(fullPath())
-            },
-            immediate: true,
-        },
-    },
-    mounted() {
-        updateMappingsData(fullPath(), this.$route.query)
-    },
+onMounted(() => {
+    updateMappingsData(fullPath(route), route.query)
 })
 </script>
 
diff --git a/frontend/src/routes/NotFound.vue b/frontend/src/routes/NotFound.vue
index d8a1ecd..c7b49d9 100644
--- a/frontend/src/routes/NotFound.vue
+++ b/frontend/src/routes/NotFound.vue
@@ -7,12 +7,7 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "NotFound",
-})
+<script setup lang="ts">
 </script>
 
 <style scoped>
diff --git a/frontend/src/routes/OpenSourceLicenses.vue b/frontend/src/routes/OpenSourceLicenses.vue
index a429fa6..75a830a 100644
--- a/frontend/src/routes/OpenSourceLicenses.vue
+++ b/frontend/src/routes/OpenSourceLicenses.vue
@@ -52,16 +52,15 @@
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {reqOss} from "../app/backend"
 import Block from "../components/Block.vue"
 import SubHeader from "../components/dependencies/SubHeader.vue"
-import {defineComponent} from "vue"
+import {onMounted, ref} from "vue"
 import {addAlert} from "../app/alerts"
 import PageWidthLimiter from "../components/PageWidthLimiter.vue"
 import PageSidebar from "../components/PageSidebar.vue"
 import PageContent from "../components/PageContent.vue"
-import Header from "../components/dependencies/Header.vue"
 
 interface OssEntry {
     name: string,
@@ -69,24 +68,17 @@ interface OssEntry {
     license: string,
 }
 
-export default defineComponent({
-    name: "OpenSourceLicenses",
-    components: {Header, PageContent, PageSidebar, PageWidthLimiter, SubHeader, Block},
-    data() {
-        return {
-            entries: [] as OssEntry[],
-        }
-    },
-    mounted() {
-        reqOss().then(value => {
-            this.entries = value.data
-        }).catch(reason => {
-            addAlert({
-                type: "error",
-                message: `Failed to fetch entries: ${reason.message}`,
-            })
+const entries = ref<OssEntry[]>([])
+
+onMounted(() => {
+    reqOss().then(value => {
+        entries.value = value.data
+    }).catch(reason => {
+        addAlert({
+            type: "error",
+            message: `Failed to fetch entries: ${reason.message}`,
         })
-    },
+    })
 })
 </script>
 
diff --git a/frontend/src/routes/SourcesStatus.vue b/frontend/src/routes/SourcesStatus.vue
index 8d2d4ed..d9c33a5 100644
--- a/frontend/src/routes/SourcesStatus.vue
+++ b/frontend/src/routes/SourcesStatus.vue
@@ -2,9 +2,9 @@
     <PageWidthLimiter v-if="mappingsData.namespaces.length !== 0">
         <PageSidebar>
             <Block>
-                <NamespaceFilterBlock :ns="namespace" :set-ns="(ns) => namespace = ns"
+                <NamespaceFilterBlock :ns="namespace ?? undefined" :set-ns="(ns: string | null) => namespace = ns"
                                       :snapshots="snapshots"
-                                      :set-snapshots="(ss) => snapshots = ss"/>
+                                      :set-snapshots="(ss: boolean) => snapshots = ss"/>
             </Block>
         </PageSidebar>
         <PageContent>
@@ -47,18 +47,18 @@
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Block from "../components/Block.vue"
 import SubHeader from "../components/dependencies/SubHeader.vue"
-import {defineComponent} from "vue"
+import {computed, onMounted, ref, watch} from "vue"
 import PageWidthLimiter from "../components/PageWidthLimiter.vue"
 import PageSidebar from "../components/PageSidebar.vue"
 import PageContent from "../components/PageContent.vue"
-import Header from "../components/dependencies/Header.vue"
 import {ensureMappingsData, updateMappingsData, useMappingsDataStore} from "../app/mappings-data"
-import {mapState} from "pinia"
+import {storeToRefs} from "pinia"
 import NamespaceFilterBlock from "../components/statuses/NamespaceFilterBlock.vue"
-import {fullPath, namespaceLocalizations, reqStatusSource} from "../app/backend"
+import {fullPath, reqStatusSource} from "../app/backend"
+import {useRoute} from "vue-router"
 
 interface Cache {
     stable: boolean,
@@ -67,62 +67,55 @@ interface Cache {
     everCached: boolean,
 }
 
-export default defineComponent({
-    name: "SourcesStatus",
-    components: {NamespaceFilterBlock, Header, PageContent, PageSidebar, PageWidthLimiter, SubHeader, Block},
-    data() {
-        return {
-            namespaceLocalizations,
-            namespace: null as string | null,
-            snapshots: false,
-            data: {} as { [version: string]: Cache },
-            current: null as string | null,
-            next: null as string | null,
-            nextList: [] as string[],
+const namespace = ref<string | null>(null)
+const snapshots = ref(false)
+const data = ref<{ [version: string]: Cache }>({})
+const current = ref<string | null>(null)
+const next = ref<string | null>(null)
+const nextList = ref<string[]>([])
+
+const { mappingsData } = storeToRefs(useMappingsDataStore())
+
+const filteredData = computed(() => {
+    return Object.entries(data.value).filter(([version, cache]) => snapshots.value || cache.stable)
+})
+
+const route = useRoute()
+
+watch(namespace, (newValue) => {
+    reqStatusSource("current").then(value => {
+        if (value.data.namespace !== "null") {
+            current.value = `Currently remapping ${value.data.namespace} ${value.data.version}`
+        } else {
+            current.value = null
         }
-    },
-    computed: {
-        filteredData() {
-            return Object.entries(this.data).filter(([version, cache]) => this.snapshots || cache.stable)
-        },
-        ...mapState(useMappingsDataStore, ["mappingsData"]),
-    },
-    watch: {
-        namespace(newValue, oldValue) {
-            reqStatusSource("current").then(value => {
-                if (value.data.namespace !== "null") {
-                    this.current = `Currently remapping ${value.data.namespace} ${value.data.version}`
+    })
+    reqStatusSource(newValue ?? "next").then(value => {
+        if (namespace.value === newValue) {
+            next.value = null
+            nextList.value = []
+            if (!newValue) {
+                data.value = {}
+                let nextJson = value.data.next
+                if (nextJson.namespace !== "null") {
+                    next.value = `Next in line for remapper daemon is ${nextJson.namespace} ${nextJson.version}`
                 } else {
-                    this.current = null
+                    next.value = "No namespaces in queue"
                 }
-            })
-            reqStatusSource(newValue ?? "next").then(value => {
-                if (this.namespace === newValue) {
-                    this.next = null
-                    this.nextList = []
-                    if (!newValue) {
-                        this.data = {}
-                        let nextJson = value.data.next
-                        if (nextJson.namespace !== "null") {
-                            this.next = `Next in line for remapper daemon is ${nextJson.namespace} ${nextJson.version}`
-                        } else {
-                            this.next = "No namespaces in queue"
-                        }
-                        this.nextList = value.data.list.map((obj: {
-                            namespace: string,
-                            version: string
-                        }) => `${obj.namespace} ${obj.version}`)
-                    } else {
-                        this.data = value.data as unknown as { [version: string]: Cache }
-                    }
-                }
-            })
-        },
-    },
-    mounted() {
-        updateMappingsData(fullPath())
-        ensureMappingsData(fullPath())
-    },
+                nextList.value = value.data.list.map((obj: {
+                    namespace: string,
+                    version: string
+                }) => `${obj.namespace} ${obj.version}`)
+            } else {
+                data.value = value.data as unknown as { [version: string]: Cache }
+            }
+        }
+    })
+})
+
+onMounted(() => {
+    updateMappingsData(fullPath(route))
+    ensureMappingsData(fullPath(route))
 })
 </script>