feat(app): keep library settings

apps/app-frontend/src/components/GridDisplay.vue

@@ -120,9 +120,9 @@ const handleOptionsClick = async (args) => {
 }
 
 const search = ref('')
-const group = ref('Category')
-const filters = ref('All profiles')
-const sortBy = ref('Name')
+const group = defineModel('group')
+const filters = defineModel('filters')
+const sortBy = defineModel('sortBy')
 
 const filteredResults = computed(() => {
   let instances = props.instances.filter((instance) => {

apps/app-frontend/src/composables/useSettings.js

@@ -0,0 +1,56 @@
+import { ref, watch } from 'vue'
+import { get, set } from '@/helpers/settings.js'
+import { optOutAnalytics, optInAnalytics } from '@/helpers/analytics'
+import { handleError } from '@/store/state'
+
+export async function useSettings() {
+  const rawSettings = await get().catch(handleError)
+
+  rawSettings.launchArgs = rawSettings.extra_launch_args.join(' ')
+  rawSettings.envVars = rawSettings.custom_env_vars.map((x) => x.join('=')).join(' ')
+
+  const settings = ref(rawSettings)
+
+  watch(
+    settings,
+    async (oldSettings, newSettings) => {
+      if (oldSettings.loaded_config_dir !== newSettings.loaded_config_dir) {
+        return
+      }
+
+      const setSettings = JSON.parse(JSON.stringify(newSettings))
+
+      if (setSettings.telemetry) {
+        optOutAnalytics()
+      } else {
+        optInAnalytics()
+      }
+
+      setSettings.extra_launch_args = setSettings.launchArgs.trim().split(/\s+/).filter(Boolean)
+      setSettings.custom_env_vars = setSettings.envVars
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((x) => x.split('=').filter(Boolean))
+
+      if (!setSettings.hooks.pre_launch) {
+        setSettings.hooks.pre_launch = null
+      }
+      if (!setSettings.hooks.wrapper) {
+        setSettings.hooks.wrapper = null
+      }
+      if (!setSettings.hooks.post_exit) {
+        setSettings.hooks.post_exit = null
+      }
+
+      if (!setSettings.custom_dir) {
+        setSettings.custom_dir = null
+      }
+
+      await set(setSettings)
+    },
+    { deep: true },
+  )
+
+  return settings
+}

apps/app-frontend/src/pages/Library.vue

@@ -10,6 +10,7 @@ import { Button } from '@modrinth/ui'
 import { PlusIcon } from '@modrinth/assets'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
 import { NewInstanceImage } from '@/assets/icons'
+import { useSettings } from '@/composables/useSettings.js'
 import { hide_ads_window } from '@/helpers/ads.js'
 
 onMounted(() => {
@@ -37,10 +38,19 @@ const unlistenProfile = await profile_listener(async () => {
 onUnmounted(() => {
   unlistenProfile()
 })
+
+const settings = await useSettings()
 </script>
 
 <template>
-  <GridDisplay v-if="instances.length > 0" label="Instances" :instances="instances" />
+  <GridDisplay
+    v-if="instances.length > 0"
+    label="Instances"
+    :instances="instances"
+    v-model:group="settings.library_group"
+    v-model:filters="settings.library_filter"
+    v-model:sortBy="settings.library_sort"
+  />
   <div v-else class="no-instance">
     <div class="icon">
       <NewInstanceImage />

apps/app-frontend/src/pages/Settings.vue

@@ -1,17 +1,16 @@
 <script setup>
-import { ref, watch, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { LogOutIcon, LogInIcon, BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
 import { Card, Slider, DropdownSelect, Toggle, Button } from '@modrinth/ui'
 import { handleError, useTheming } from '@/store/state'
-import { get, set } from '@/helpers/settings'
 import { get_java_versions, get_max_memory, set_java_version } from '@/helpers/jre'
 import { get as getCreds, logout } from '@/helpers/mr_auth.js'
 import JavaSelector from '@/components/ui/JavaSelector.vue'
 import ModrinthLoginScreen from '@/components/ui/tutorial/ModrinthLoginScreen.vue'
-import { optOutAnalytics, optInAnalytics } from '@/helpers/analytics'
 import { open } from '@tauri-apps/plugin-dialog'
 import { getOS } from '@/helpers/utils.js'
 import { getVersion } from '@tauri-apps/api/app'
+import { useSettings } from '@/composables/useSettings.js'
 import { get_user, purge_cache_types } from '@/helpers/cache.js'
 import { hide_ads_window } from '@/helpers/ads.js'
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
@@ -26,63 +25,12 @@ const themeStore = useTheming()
 
 const version = await getVersion()
 
-const accessSettings = async () => {
-  const settings = await get()
-
-  settings.launchArgs = settings.extra_launch_args.join(' ')
-  settings.envVars = settings.custom_env_vars.map((x) => x.join('=')).join(' ')
-
-  return settings
-}
-
-const fetchSettings = await accessSettings().catch(handleError)
-
-const settings = ref(fetchSettings)
+const settings = await useSettings()
 
 const maxMemory = ref(Math.floor((await get_max_memory().catch(handleError)) / 1024))
 
-watch(
-  settings,
-  async (oldSettings, newSettings) => {
-    if (oldSettings.loaded_config_dir !== newSettings.loaded_config_dir) {
-      return
-    }
-
-    const setSettings = JSON.parse(JSON.stringify(newSettings))
-
-    if (setSettings.telemetry) {
-      optInAnalytics()
-    } else {
-      optOutAnalytics()
-    }
-
-    setSettings.extra_launch_args = setSettings.launchArgs.trim().split(/\s+/).filter(Boolean)
-    setSettings.custom_env_vars = setSettings.envVars
-      .trim()
-      .split(/\s+/)
-      .filter(Boolean)
-      .map((x) => x.split('=').filter(Boolean))
-
-    if (!setSettings.hooks.pre_launch) {
-      setSettings.hooks.pre_launch = null
-    }
-    if (!setSettings.hooks.wrapper) {
-      setSettings.hooks.wrapper = null
-    }
-    if (!setSettings.hooks.post_exit) {
-      setSettings.hooks.post_exit = null
-    }
-
-    if (!setSettings.custom_dir) {
-      setSettings.custom_dir = null
-    }
-
-    await set(setSettings)
-  },
-  { deep: true },
-)
-
 const javaVersions = ref(await get_java_versions().catch(handleError))
+
 async function updateJavaVersion(version) {
   if (version?.path === '') {
     version.path = undefined

packages/app-lib/migrations/20240816103233_store_library_settings.sql

@@ -0,0 +1,6 @@
+ALTER TABLE settings
+  ADD library_sort   TEXT NOT NULL DEFAULT 'Name';
+ALTER TABLE settings
+  ADD library_filter TEXT NOT NULL DEFAULT 'All profiles';
+ALTER TABLE settings
+  ADD library_group  TEXT NOT NULL DEFAULT 'Category';

packages/app-lib/src/state/settings.rs

@@ -31,6 +31,10 @@ pub struct Settings {
     pub custom_dir: Option<String>,
     pub prev_custom_dir: Option<String>,
     pub migrated: bool,
+
+    pub library_sort: String,
+    pub library_filter: String,
+    pub library_group: String,
 }
 
 impl Settings {
@@ -47,7 +51,8 @@ impl Settings {
                 json(extra_launch_args) extra_launch_args, json(custom_env_vars) custom_env_vars,
                 mc_memory_max, mc_force_fullscreen, mc_game_resolution_x, mc_game_resolution_y, hide_on_process_start,
                 hook_pre_launch, hook_wrapper, hook_post_exit,
-                custom_dir, prev_custom_dir, migrated
+                custom_dir, prev_custom_dir, migrated,
+                library_sort, library_filter, library_group
             FROM settings
             "
         )
@@ -93,6 +98,9 @@ impl Settings {
             custom_dir: res.custom_dir,
             prev_custom_dir: res.prev_custom_dir,
             migrated: res.migrated == 1,
+            library_sort: res.library_sort,
+            library_filter: res.library_filter,
+            library_group: res.library_group,
         })
     }
 
@@ -140,7 +148,11 @@ impl Settings {
 
                 custom_dir = $22,
                 prev_custom_dir = $23,
-                migrated = $24
+                migrated = $24,
+
+                library_sort = $25,
+                library_filter = $26,
+                library_group = $27
             ",
             max_concurrent_writes,
             max_concurrent_downloads,
@@ -165,7 +177,10 @@ impl Settings {
             self.hooks.post_exit,
             self.custom_dir,
             self.prev_custom_dir,
-            self.migrated
+            self.migrated,
+            self.library_sort,
+            self.library_filter,
+            self.library_group,
         )
         .execute(exec)
         .await?;