fix wrong order of launch behaviours

frontend/src/components/index.ts

@@ -3,6 +3,7 @@ export { default as ControlButtons } from './general/ControlButtons.vue'
 export { default as Sidebar } from './general/Sidebar.vue'
 
 export { default as CardOverlay } from './reusable/CardOverlay.vue'
+export { default as PlatformSelectPanels } from './reusable/PlatformSelectPanels.vue'
 
 export { default as ModListFilter } from './selected-game/ModListFilter.vue'
 export { default as ProfileManager } from './selected-game/ProfileManager.vue'

frontend/src/components/reusable/OutlineHoverButton.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+interface HoverProps {
+    invert: boolean
+}
+
+const props = withDefaults(defineProps<HoverProps>(), { invert: false })
+const outlined = ref(props.invert)
+</script>
+
+<template>
+    <Button :outlined="outlined" 
+        @mouseover="outlined = props.invert ? false : true" 
+        @mouseleave="outlined = props.invert ? true : false"
+    />
+</template>

frontend/src/components/reusable/PlatformSelectPanels.vue

@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import { ref } from "vue"
+
+// import FileUpload from 'primevue/fileupload'
+// import DataView from 'primevue/dataview'
+
+import Splitter from 'primevue/splitter'
+import SplitterPanel from 'primevue/splitterpanel'
+//import OutlineHoverButton from "./OutlineHoverButton.vue"
+
+import { TSPackageManifest, TSPackageFile } from '@types'
+import { experimental } from '@frontend/wailsjs/go/models'
+
+// TODO: Finish implementing pack/unpack functionality
+import { 
+    //UnpackZip, 
+    ValidateIcon, 
+    ValidateManifest, 
+    ValidateReadme
+} from '@backend/thunderstore/Tools'
+
+// Validates each required file for uploading a Thunderstore mod.
+function ValidateFiles(icon: experimental.IconValidatorParams, readme: TSPackageFile, manifest: TSPackageManifest) {
+    ValidateIcon(icon)
+    ValidateReadme(readme.data)
+
+    if (!manifest.author) return
+    ValidateManifest(manifest.author, manifest.data)
+}
+
+const items = ref([{ 
+    label: 'Your Packages', 
+    icon: 'pi pi-box' 
+}, {
+    label: 'Package Validater',
+    icon: 'pi pi-check-square' 
+}])
+</script>
+
+<template>
+<Splitter 
+    class="platform-splitter"
+    gutterSize.number="2"
+    stateStorage="local"
+    stateKey="platform-splitter-state"
+>
+    <SplitterPanel :min-size="1" class="platform-splitter-panel panel-ts">
+        <div class="blur w-full h-full">
+            <div class="flex column panel-text">
+                Thunderstore
+                <Button class="mt-3" label="Select"/>
+            </div>
+        </div>
+    </SplitterPanel>
+
+    <SplitterPanel :min-size="1" class="platform-splitter-panel panel-nexus">
+        <div class="blur w-full h-full">
+            <div class="flex column panel-text">
+                Nexus Mods
+                <Button class="mt-3" label="Select"/>    
+            </div>
+        </div>
+    </SplitterPanel>
+</Splitter>
+
+<!-- <div class="mod-dev-tools column">
+    <DataView dataKey="dev-package-list">
+
+    </DataView>
+</div>
+
+<div class="no-drag">
+    <FileUpload
+        name="demo[]"
+        accept=".zip"
+        :multiple="false"
+        :maxFileSize="1000000"
+        :showUploadButton="false"
+        @select=""
+    >
+        <template #content>
+
+        </template>
+
+        <template #empty>
+            <div class="flex row pi pi-upload gap-2">
+                <div>Drag and drop your mod zip file here.</div>
+            </div>
+        </template>
+    </FileUpload>
+</div> -->
+</template>
+
+<style scoped>
+.platform-splitter {
+    margin-left: 75px;
+    height: 100vh;
+    width: 100vw;
+    background: transparent !important;
+    border: none;
+}
+
+.platform-splitter-panel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.panel-text {
+    font-size: 55px;
+    font-weight: 510;
+    user-select: none;
+    color: #ffffff;
+    text-shadow: 0 0 5px rgb(25, 25, 25);
+    text-wrap: nowrap;
+}
+
+.panel-ts {
+    background-image: url('../../assets/images/ts.webp');
+    background-position: center;
+    background-position-y: 0px;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.panel-nexus {
+    background-image: url('../../assets/images/nexus.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.blur {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: brightness(26%); /* TODO: Also use blur here, but on GPU not CPU */
+}
+
+:deep(.p-splitter-gutter) { 
+    background: #202125;
+    border: 1px solid rgba(255, 255, 255, 0.259);
+}
+
+:deep(.p-splitter-gutter-handle) { 
+    background: rgba(255, 255, 255, 0.617) !important;
+}
+
+.mod-dev-tools {
+    margin-left: 75px; /* Account for sidebar */
+    top: 350px;
+}
+</style>

frontend/src/components/settings/SettingsOverlay.vue

@@ -56,13 +56,13 @@ const updateBehaviour: Ref<Behaviour> = ref({
 
 const behaviours: Ref<Behaviour[]> = computed(() => [{
     label: t('settings.update-behaviour.option-1'),
-    value: app.UpdateBehaviour.OFF
+    value: app.UpdateBehaviour.AUTO
 }, {
     label: t('settings.update-behaviour.option-2'),
     value: app.UpdateBehaviour.NOTIFY
 }, {
     label: t('settings.update-behaviour.option-3'),
-    value: app.UpdateBehaviour.AUTO
+    value: app.UpdateBehaviour.OFF
 }])
 
 // Every time the overlay is opened.

frontend/src/router/routes.ts

@@ -3,7 +3,7 @@ import type { RouteRecordRaw } from 'vue-router'
 const Dashboard = () => import('../views/Dashboard.vue')
 const GameSelection = () => import('../views/GameSelection.vue')
 const SelectedGame = () => import('../views/SelectedGame.vue')
-const ModDevTools = () => import('../views/ModDevTools.vue')
+const ModDevTools = () => import('../views/mod-dev-tools/ModDevTools.vue')
 
 const ROUTES: RouteRecordRaw[] = [{
     path: '/', 

frontend/src/views/mod-dev-tools/ModDevTools.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { PlatformSelectPanels } from "@components"
+import { Nullable } from "primevue/ts-helpers"
+import { ref } from "vue"
+
+enum Platform {
+    THUNDERSTORE,
+    NEXUS
+}
+
+const selectedPlatform = ref<Nullable<Platform>>(null)
+</script>
+
+<template>
+    <PlatformSelectPanels v-if="!selectedPlatform" 
+        @selectThunderstore="selectedPlatform = Platform.THUNDERSTORE" 
+        @selectNexus="selectedPlatform = Platform.NEXUS"
+    />
+</template>
+
+<style scoped>
+
+</style>