MR App 0.9.5 - Big bugfix update (#3585)

* Add launcher_feature_version to Profile

* Misc fixes

- Add typing to theme and settings stuff
- Push instance route on creation from installing a modpack
- Fixed servers not reloading properly when first added

* Make old instances scan the logs folder for joined servers on launcher startup

* Create AttachedWorldData

* Change AttachedWorldData interface

* Rename WorldType::World to WorldType::Singleplayer

* Implement world display status system

* Fix Minecraft font

* Fix set_world_display_status Tauri error

* Add 'Play instance' option

* Add option to disable worlds showing in Home

* Fixes

- Fix available server filter only showing if there are some available
- Fixed server and singleplayer filters sometimes showing when there are only servers or singleplayer worlds
- Fixed new worlds not being automatically added when detected
- Rephrased Jump back into worlds option description

* Fixed sometimes more than 6 items showing up in Jump back in

* Fix servers.dat issue with instances you haven't played before

* Fix too large of bulk requests being made, limit max to 800 #3430

* Add hiding from home page, add types to Mods.vue

* Make recent worlds go into grid when display is huge

* Fix lint

* Remove redundant media query

* Fix protocol version on home page, and home page being blocked by pinging servers

* Clippy fix

* More Clippy fixes

* Fix Prettier lints

* Undo `from_string` changes

---------

Co-authored-by: Josiah Glosson <soujournme@gmail.com>
Co-authored-by: Alejandro González <me@alegon.dev>

apps/app-frontend/src/store/install.js

@@ -23,8 +23,8 @@ export const useInstall = defineStore('installStore', {
     setInstallConfirmModal(ref) {
       this.installConfirmModal = ref
     },
-    showInstallConfirmModal(project, version_id, onInstall) {
-      this.installConfirmModal.show(project, version_id, onInstall)
+    showInstallConfirmModal(project, version_id, onInstall, createInstanceCallback) {
+      this.installConfirmModal.show(project, version_id, onInstall, createInstanceCallback)
     },
     setIncompatibilityWarningModal(ref) {
       this.incompatibilityWarningModal = ref
@@ -41,7 +41,14 @@ export const useInstall = defineStore('installStore', {
   },
 })
 
-export const install = async (projectId, versionId, instancePath, source, callback = () => {}) => {
+export const install = async (
+  projectId,
+  versionId,
+  instancePath,
+  source,
+  callback = () => {},
+  createInstanceCallback = () => {},
+) => {
   const project = await get_project(projectId, 'must_revalidate').catch(handleError)
 
   if (project.project_type === 'modpack') {
@@ -49,7 +56,13 @@ export const install = async (projectId, versionId, instancePath, source, callba
     const packs = await list().catch(handleError)
 
     if (packs.length === 0 || !packs.find((pack) => pack.linked_data?.project_id === project.id)) {
-      await packInstall(project.id, version, project.title, project.icon_url).catch(handleError)
+      await packInstall(
+        project.id,
+        version,
+        project.title,
+        project.icon_url,
+        createInstanceCallback,
+      ).catch(handleError)
 
       trackEvent('PackInstall', {
         id: project.id,
@@ -61,7 +74,7 @@ export const install = async (projectId, versionId, instancePath, source, callba
       callback(version)
     } else {
       const install = useInstall()
-      install.showInstallConfirmModal(project, version, callback)
+      install.showInstallConfirmModal(project, version, callback, createInstanceCallback)
     }
   } else {
     if (instancePath) {

apps/app-frontend/src/store/state.js

@@ -1,4 +1,4 @@
-import { useTheming } from './theme'
+import { useTheming } from './theme.ts'
 import { useBreadcrumbs } from './breadcrumbs'
 import { useLoading } from './loading'
 import { useNotifications, handleError } from './notifications'

apps/app-frontend/src/store/theme.js

@@ -1,38 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useTheming = defineStore('themeStore', {
-  state: () => ({
-    themeOptions: ['dark', 'light', 'oled', 'system'],
-    advancedRendering: true,
-    selectedTheme: 'dark',
-    toggleSidebar: false,
-
-    devMode: false,
-    featureFlags: {},
-  }),
-  actions: {
-    setThemeState(newTheme) {
-      if (this.themeOptions.includes(newTheme)) this.selectedTheme = newTheme
-      else console.warn('Selected theme is not present. Check themeOptions.')
-
-      this.setThemeClass()
-    },
-    setThemeClass() {
-      for (const theme of this.themeOptions) {
-        document.getElementsByTagName('html')[0].classList.remove(`${theme}-mode`)
-      }
-
-      let theme = this.selectedTheme
-      if (this.selectedTheme === 'system') {
-        const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
-        if (darkThemeMq.matches) {
-          theme = 'dark'
-        } else {
-          theme = 'light'
-        }
-      }
-
-      document.getElementsByTagName('html')[0].classList.add(`${theme}-mode`)
-    },
-  },
-})

apps/app-frontend/src/store/theme.ts

@@ -0,0 +1,70 @@
+import { defineStore } from 'pinia'
+
+export const DEFAULT_FEATURE_FLAGS = {
+  project_background: false,
+  page_path: false,
+  worlds_tab: false,
+  worlds_in_home: true,
+}
+
+export const THEME_OPTIONS = ['dark', 'light', 'oled', 'system'] as const
+
+export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
+export type FeatureFlags = Record<FeatureFlag, boolean>
+export type ColorTheme = (typeof THEME_OPTIONS)[number]
+
+export type ThemeStore = {
+  selectedTheme: ColorTheme
+  advancedRendering: boolean
+  toggleSidebar: boolean
+
+  devMode: boolean
+  featureFlags: FeatureFlags
+}
+
+export const DEFAULT_THEME_STORE: ThemeStore = {
+  selectedTheme: 'dark',
+  advancedRendering: true,
+  toggleSidebar: false,
+
+  devMode: false,
+  featureFlags: DEFAULT_FEATURE_FLAGS,
+}
+
+export const useTheming = defineStore('themeStore', {
+  state: () => DEFAULT_THEME_STORE,
+  actions: {
+    setThemeState(newTheme: ColorTheme) {
+      if (THEME_OPTIONS.includes(newTheme)) {
+        this.selectedTheme = newTheme
+      } else {
+        console.warn('Selected theme is not present. Check themeOptions.')
+      }
+
+      this.setThemeClass()
+    },
+    setThemeClass() {
+      for (const theme of THEME_OPTIONS) {
+        document.getElementsByTagName('html')[0].classList.remove(`${theme}-mode`)
+      }
+
+      let theme = this.selectedTheme
+      if (this.selectedTheme === 'system') {
+        const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
+        if (darkThemeMq.matches) {
+          theme = 'dark'
+        } else {
+          theme = 'light'
+        }
+      }
+
+      document.getElementsByTagName('html')[0].classList.add(`${theme}-mode`)
+    },
+    getFeatureFlag(key: FeatureFlag) {
+      return this.featureFlags[key] ?? DEFAULT_FEATURE_FLAGS[key]
+    },
+    getThemeOptions() {
+      return THEME_OPTIONS
+    },
+  },
+})