Squashed commit of the following:

commit d47a530 Author: O3H <[email protected]> Date: Tue Nov 5 20:54:29 2024 +0000 Migrate to PrimeVue v4. Squashed commits: commit 79a6eaa fixabunchastuff commit 43f536a read desc - Fixed grid skeleton when loading games being broken and ugly. - Added some more comments/todos for context. - html and body are now 100vw/100vh so everything stays in the viewport. commit 9192c7e begin migrating commit 1f6d7d3 Author: O3H <[email protected]> Date: Tue Nov 5 20:21:35 2024 +0000 o7 mac users (blame apple) commit dc7b7e8 Author: O3H <[email protected]> Date: Tue Oct 29 05:14:18 2024 +0000 replace `BrowserOpenURL` with slightly faster alternative commit d73a147 Author: O3H <[email protected]> Date: Tue Oct 29 04:50:51 2024 +0000 GameSelection qol commit 5e7471f Author: O3H <[email protected]> Date: Thu Oct 24 20:15:19 2024 +0100 fix select game button not working in list view commit d7fe603 Author: O3H <[email protected]> Date: Wed Oct 23 23:46:24 2024 +0100 make links in AppInfoOverlay open browser commit 620394c Author: O3H <[email protected]> Date: Wed Oct 23 03:29:21 2024 +0100 Pressing ESC to open overlay now works across the app. Pressing the 'Escape' key now closes all open dialogs (though there should only ever be 1). Due to this, the logic in `AppInfoOverlay` has been removed. commit 4be4e86 Author: O3H <[email protected]> Date: Mon Oct 21 03:28:58 2024 +0100 fix wrong order of launch behaviours commit 03cea0f Author: O3H <[email protected]> Date: Sun Oct 20 16:15:21 2024 +0100 use eslint and fix all commit fd5491d Author: O3H <[email protected]> Date: Fri Oct 18 19:34:41 2024 +0100 Update persistence.go
The-Egg-Corp · Nov 5, 2024 · f14a9b3 · f14a9b3
1 parent 540f36b
commit f14a9b3
Show file tree

Hide file tree

Showing 23 changed files with 361 additions and 246 deletions.
diff --git a/README.md b/README.md
@@ -46,7 +46,7 @@ There are currently no official releases. You can download dev builds under the
 
 ## Building from source
 1. Clone this repository.
-2. Install [Go](https://go.dev/doc/install), [Bun](https://bun.sh) and [Wails](https://wails.io/docs/gettingstarted/installation).
+2. Install dependencies ([Node 20+](https://nodejs.org/en/download), [Bun](https://bun.sh), [Go](https://go.dev/doc/install), [Wails](https://wails.io/docs/gettingstarted/installation)).
 3. Run one of the following commands:
    - `wails build` - Generates an executable in **/build/bin**.
    - `wails dev` - Opens a preview of the app with DevTools enabled.

diff --git a/frontend/index.html b/frontend/index.html
@@ -5,8 +5,8 @@
 
         <meta charset="UTF-8"/>
         <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-        
-        <link id="theme-link" rel="stylesheet" href="./src/assets/themes/aura-dark-purple/theme.css">
+
+        <!-- <link id="theme-link" rel="stylesheet" href="./src/assets/themes/aura-dark-purple/theme.css"> -->
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
     </head>
 

diff --git a/frontend/package.json b/frontend/package.json
@@ -8,34 +8,35 @@
     "reinstall": "bun run clean && bun i",
     "copy-themes": "copy-folder ./node_modules/primevue/resources/themes ./src/assets/themes --summary",
     "dev": "bunx vite",
-    "build": "bun run copy-themes && bunx vite build",
+    "build": "bunx vite build",
     "typecheck": "bunx vue-tsc --noEmit",
     "ci": "bun i && bun run typecheck",
     "lint": "bunx eslint ./src"
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
-    "compare-versions": "^6.1.0",
-    "pinia": "^2.1.7",
+    "@primevue/themes": "^4.1.1",
+    "compare-versions": "^6.1.1",
+    "pinia": "^2.2.4",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
-    "primevue": "^3.52.0",
-    "vue": "^3.4.26",
-    "vue-i18n": "9",
-    "vue-router": "4"
+    "primevue": "^4.1",
+    "vue": "^3.5.12",
+    "vue-i18n": "10",
+    "vue-router": "4.4.5"
   },
   "devDependencies": {
     "@babel/types": "^7.18.10",
     "@types/node": "^22.2.0",
-    "@vitejs/plugin-vue": "^3.0.3",
-    "copy-folder-util": "^1.1.3",
+    "@vitejs/plugin-vue": "latest",
+    "copy-folder-util": "^1.1.4",
     "rimraf": "latest",
     "typescript": "latest",
     "vite": "latest",
     "vue-tsc": "latest",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
-    "eslint": "^8.49.0",
+    "@typescript-eslint/eslint-plugin": "latest",
+    "@typescript-eslint/parser": "latest",
+    "eslint": "latest",
     "eslint-plugin-named-import-spacing": "^1.0.3"
   },
   "optionalDependencies": {

diff --git a/frontend/src/assets/fonts/Inter-italic.var.woff2 b/frontend/src/assets/fonts/Inter-italic.var.woff2
diff --git a/frontend/src/assets/fonts/Inter-roman.var.woff2 b/frontend/src/assets/fonts/Inter-roman.var.woff2
diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
@@ -1,12 +1,38 @@
+:root {
+    font-family: "Inter var", sans-serif;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+    font-variation-settings: normal;
+    --font-family: "Inter var", sans-serif;
+    --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+}
+
+@font-face {
+    font-family: "Inter var";
+    font-weight: 200 900;
+    font-display: swap;
+    font-style: normal;
+    font-named-instance: "Regular";
+    src: url("../fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter var";
+    font-weight: 200 900;
+    font-display: swap;
+    font-style: italic;
+    font-named-instance: "Italic";
+    src: url("../fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+
 html {
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     overflow: hidden;
 }
 
 body {
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     position: relative;
     box-sizing: border-box;
     margin: 0;
@@ -20,10 +46,14 @@ body::before {
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: rgb(12, 12, 14);
+    background-color: rgba(14, 14, 16);
     z-index: -1;
 }
 
+a {
+    text-decoration: none;
+}
+
 .flex-span {
     display: flex;
     width: 100vw;
@@ -50,4 +80,12 @@ body::before {
 
 .p-tooltip-arrow {
     border-left-color: transparent !important;
+}
+
+.border-faint {
+    border: 1px solid rgba(190, 190, 190, 0.2);
+}
+
+.border-top-faint {
+    border-top: 1px solid rgba(190, 190, 190, 0.2);
 }
diff --git a/frontend/src/components/general/Sidebar.vue b/frontend/src/components/general/Sidebar.vue
@@ -42,7 +42,7 @@ const ModDevTools = () => router.push('/mod-dev-tools')
 
         <div class="top flex column">
             <Button 
-                plain severity="secondary"
+                severity="secondary"
                 class="btn margin-lr no-drag" icon="pi pi-wrench"
                 v-tooltip="tooltipOpts(t('tooltips.sidebar.mod-dev-tools'))"
                 @click="ModDevTools"
@@ -54,15 +54,15 @@ const ModDevTools = () => router.push('/mod-dev-tools')
         <div class="spacer"></div>
 
         <div class="bottom flex column">
-            <Button outlined
-                class="btn-no-outline margin-lr no-drag"
+            <Button severity="secondary"
+                class="btn margin-lr no-drag"
                 icon="pi pi-info-circle"
                 @click="appInfo.setVisible()"
             />
 
             <!-- <Button text class="btn margin-lr no-drag" :icon="themeMode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'" @click="ToggleThemeMode"/> -->
             <Button
-                plain severity="secondary"
+                severity="secondary"
                 class="btn margin-lr spin-hover no-drag" icon="pi pi-cog" 
                 v-tooltip="tooltipOpts(t('keywords.settings'))"
                 @click="settings.setVisible()"
@@ -81,10 +81,8 @@ const ModDevTools = () => router.push('/mod-dev-tools')
     z-index: 999;
     height: 100vh;
     width: 75px;
-    border-right: rgba(255, 255, 255, 0.45) 1px outset;
+    border-right: 1px outset rgba(255, 255, 255, 0.45);
     background-color: #202125;
-    padding-left: 15px;
-    padding-right: 15px;
 }
 
 .sidebar img {
@@ -99,13 +97,7 @@ const ModDevTools = () => router.push('/mod-dev-tools')
 .btn {
     position: relative;
     border-radius: 3px;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.btn-no-outline {
-    position: relative;
-    border-radius: 3px;
-    border: none;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
 }
 
 .top .p-button {

diff --git a/frontend/src/components/selected-game/ConfigEditLayout.vue b/frontend/src/components/selected-game/ConfigEditLayout.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { game } from '@backend/models'
 import { computed } from 'vue'
 
 import Divider from 'primevue/divider'
-import { Nullable } from 'primevue/ts-helpers'
+
+import { game } from '@backend/models'
+import type { Nullable } from '@types'
 
 interface ConfigProps {
     config: game.BepinexConfig
@@ -85,7 +86,7 @@ const asBool = (str: string) => {
                     </div>
 
                     <div>
-                        <InputSwitch v-if="isBool(entry.default_value)" v-model="entry.checked"/>
+                        <ToggleSwitch v-if="isBool(entry.default_value)" v-model="entry.checked"/>
                         <InputText v-else class="ml-3 flex-grow-1" style="font-size: 16px;" :value="entry.value"/>
                     </div>
                 </div>

diff --git a/frontend/src/components/selected-game/ConfigEditorOverlay.vue b/frontend/src/components/selected-game/ConfigEditorOverlay.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { type Ref, ref, watch } from 'vue'
-import type { Nullable } from 'primevue/ts-helpers'
+import { ref, watch } from 'vue'
 
 import { BepinexConfigFiles, ParseBepinexConfig } from '@backend/game/GameManager'
 import { game } from '@backend/models'
@@ -10,12 +9,12 @@ import { CardOverlay, ConfigEditLayout } from '@components'
 
 import { t } from '@i18n'
 import { openLink } from "../../util"
-import type { ThunderstoreGame } from '@types'
+import type { ThunderstoreGame, Nullable } from '@types'
 
-const selectedConfig: Ref<Nullable<game.BepinexConfig>> = ref(null)
-const selectedConfigName: Ref<Nullable<string>> = ref(null)
+const selectedConfig = ref<Nullable<game.BepinexConfig>>(null)
+const selectedConfigName = ref<Nullable<string>>(null)
 
-const configFiles: Ref<string[]> = ref([])
+const configFiles = ref<string[]>([])
 
 const props = defineProps<{
     dialog: Dialog

diff --git a/frontend/src/components/selected-game/ModInstallationOverlay.vue b/frontend/src/components/selected-game/ModInstallationOverlay.vue
@@ -2,7 +2,7 @@
 import { v1 } from "@backend/models"
 import { CardOverlay } from "@components"
 import { Dialog } from "@composables"
-import { Nullable } from "primevue/ts-helpers"
+import type { Nullable } from "@types"
 
 const props = defineProps<{
     dialog: Dialog

diff --git a/frontend/src/components/selected-game/ModListFilter.vue b/frontend/src/components/selected-game/ModListFilter.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { computed, ComputedRef } from 'vue'
+import { computed } from 'vue'
+import { ValueItemLabeled } from '@types'
 
-const filters: ComputedRef<{ label: string, value: string }[]> = computed(() => [{ 
+const filters = computed<ValueItemLabeled<string>[]>(() => [{ 
     label: "Most Rated",
     value: "most-rated"
 }, {
@@ -17,17 +18,13 @@ const filters: ComputedRef<{ label: string, value: string }[]> = computed(() =>
 </script>
 
 <template>
-    <Dropdown 
-        class="no-drag"
-        :options="filters"
-        @change=""
-    >
+    <Dropdown  class="no-drag" :options="filters" @change="">
         <template #option>
 
         </template>
 
         <template #value>
-
+            
         </template>
     </Dropdown>
 </template>

diff --git a/frontend/src/components/selected-game/ProfileManager.vue b/frontend/src/components/selected-game/ProfileManager.vue
@@ -2,7 +2,7 @@
 import DataView from 'primevue/dataview'
 //import Toolbar from 'primevue/toolbar'
 
-import { Ref, ref } from 'vue'
+import { ref } from 'vue'
 import { t } from '@i18n'
 import { tooltipOpts } from '@frontend/src/util'
 
@@ -14,12 +14,12 @@ interface Profile {
     }
 }
 
-const selectedProfile: Ref<Profile> = ref({
+const selectedProfile = ref<Profile>({
     name: "Default", 
     mods: {}
 })
 
-const profiles: Ref<Profile[]> = ref([
+const profiles = ref<Profile[]>([
     { name: 'Default', mods: {} },
     { name: 'testing', mods: {} },
     { name: 'MEGALOPHOBIA', mods: {} },

diff --git a/frontend/src/components/settings/SettingsOverlay.vue b/frontend/src/components/settings/SettingsOverlay.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Ref, computed, ref, watch } from "vue"
+import { computed, ref, watch } from "vue"
 import { storeToRefs } from "pinia"
 
 import { app } from "@backend/models"
@@ -49,12 +49,12 @@ const setAccel = (value: boolean) => {
 //#region Update Behaviour
 type Behaviour = ValueItemLabeled<app.UpdateBehaviour>
 
-const updateBehaviour: Ref<Behaviour> = ref({ 
+const updateBehaviour = ref<Behaviour>({ 
     label: t('settings.update-behaviour.option-1'),
     value: app.UpdateBehaviour.AUTO
 })
 
-const behaviours: Ref<Behaviour[]> = computed(() => [{
+const behaviours = computed<Behaviour[]>(() => [{
     label: t('settings.update-behaviour.option-1'),
     value: app.UpdateBehaviour.AUTO
 }, {
@@ -138,7 +138,7 @@ const dividerAlignment: Alignment = "center"
                         <h3>{{ $t('settings.animations-enabled') }}</h3>
                     </div>
                     <div class="flex-item">
-                        <InputSwitch 
+                        <ToggleSwitch 
                             v-model="animationsEnabled" 
                             @update:model-value="setAnimationsEnabled(animationsEnabled)"
                         />
@@ -158,7 +158,7 @@ const dividerAlignment: Alignment = "center"
                         <h3>{{ $t('settings.gpu-acceleration') }}</h3>
                     </div>
                     <div class="flex-item">
-                        <InputSwitch 
+                        <ToggleSwitch 
                             v-model="accelChecked" 
                             @update:model-value="setAccel(accelChecked)"
                         />
@@ -228,6 +228,7 @@ const dividerAlignment: Alignment = "center"
 </template>
 
 <style scoped>
+/* TODO: Are these even needed now, if so they should be in App.vue 
 :global(.p-dialog) {
     border: 1px solid #4d4d4d;
     border-radius: 9px;
@@ -245,7 +246,7 @@ const dividerAlignment: Alignment = "center"
 
 :global(.p-divider-content) {
     background: none;
-}
+}*/
 
 :deep(.p-dialog-title) {
     user-select: none;

diff --git a/frontend/src/components/settings/ThemeDropdown.vue b/frontend/src/components/settings/ThemeDropdown.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ComputedRef, computed } from 'vue'
+import { computed } from 'vue'
 import { usePrimeVue } from 'primevue/config'
 
 import { useSettingsStore } from '@stores'
@@ -14,8 +14,8 @@ const currentTheme = () => {
     return general.theme as Theme || groupedThemes.value[0]
 }
 
-const selectedTheme: ComputedRef<Theme> = computed(currentTheme)
-const groupedThemes: ComputedRef<ThemeGroup[]> = computed(() => [{
+const selectedTheme = computed<Theme>(currentTheme)
+const groupedThemes = computed<ThemeGroup[]>(() => [{
     label: 'Aura Purple',
     themes: [{
         label: 'Dark',
@@ -35,12 +35,13 @@ const groupedThemes: ComputedRef<ThemeGroup[]> = computed(() => [{
     }]
 }])
 
-const PrimeVue = usePrimeVue()
+//const PrimeVue = usePrimeVue()
 
 const change = (e: ChangeEvent<Theme>) => {
     const newTheme = e.value
     
-    PrimeVue.changeTheme(currentTheme().value, newTheme.value, 'theme-link')
+    // TODO: Use presets instead
+    //PrimeVue.changeTheme(currentTheme().value, newTheme.value, 'theme-link')
 
     const { setTheme } = useSettingsStore()
     setTheme(newTheme)