refactor: compact mode with sync'd app settings

apps/app-frontend/src/App.vue

@@ -1007,6 +1007,7 @@ watch(
 				if (behavior && appSettings.syncBehaviorAcrossDevices) {
 					const behaviorFeatureFlags = {
 						worlds_in_home: behavior.show_jump_in,
+						compact_instance_cards: behavior.compact_instance_cards,
 						show_instance_play_time: behavior.show_play_time,
 						skip_unknown_pack_warning: !behavior.warn_on_unknown_modpacks,
 						skip_non_essential_warnings: behavior.skip_non_essential_warnings,

apps/app-frontend/src/components/ui/library/instance-group/index.vue

@@ -29,8 +29,8 @@ import type {
 	InstanceGroup as InstanceGroupType,
 } from '@/components/ui/library/use-library'
 import { useLibrary } from '@/components/ui/library/use-library'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { FAVORITES_GROUP_ID, MAX_INSTANCE_GROUP_NAME_LENGTH } from '@/helpers/instance-groups'
-import { useTheming } from '@/store/state'
 
 const INSTANCE_GRID_OBSERVER_ACTIVATION_DELAY = 500
 
@@ -49,8 +49,8 @@ const props = withDefaults(
 )
 
 const { formatMessage } = useVIntl()
-const themeStore = useTheming()
-const compactMode = computed(() => themeStore.getFeatureFlag('compact_instance_cards'))
+const appSettings = useAppSettings()
+const compactMode = computed(() => appSettings.getFeatureFlag('compact_instance_cards'))
 const { addNotification } = injectNotificationManager()
 const {
 	isSectionCollapsed,

apps/app-frontend/src/components/ui/library/instance-group/instance-card-view.vue

@@ -2,9 +2,9 @@
 import { Avatar, truncatedTooltip } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { getInstanceIconUrl } from '@/helpers/instance'
 import type { GameInstance } from '@/helpers/types'
-import { useTheming } from '@/store/state'
 
 const props = withDefaults(
 	defineProps<{
@@ -17,8 +17,8 @@ const props = withDefaults(
 )
 
 const iconSrc = computed(() => getInstanceIconUrl(props.instance.icon_path))
-const themeStore = useTheming()
-const compactMode = computed(() => themeStore.getFeatureFlag('compact_instance_cards'))
+const appSettings = useAppSettings()
+const compactMode = computed(() => appSettings.getFeatureFlag('compact_instance_cards'))
 
 const nameRef = ref<HTMLElement | null>(null)
 const versionRef = ref<HTMLElement | null>(null)

apps/app-frontend/src/components/ui/settings/display/BehaviorSettings.vue

@@ -137,6 +137,7 @@ type BehaviorSettingsState = {
 	minimizeApp: boolean
 	hideRightSidebar: boolean
 	showJumpIn: boolean
+	compactInstanceCards: boolean
 	showPlayTime: boolean
 	hideNametag: boolean
 	warnOnUnknownModpacks: boolean
@@ -151,6 +152,9 @@ function getBehaviorSettingsState(settings: AppSettings): BehaviorSettingsState
 		minimizeApp: settings.hide_on_process_start,
 		hideRightSidebar: settings.toggle_sidebar,
 		showJumpIn: settings.feature_flags[worldsInHomeFlag] ?? DEFAULT_FEATURE_FLAGS[worldsInHomeFlag],
+		compactInstanceCards:
+			settings.feature_flags[compactInstanceCardsFlag] ??
+			DEFAULT_FEATURE_FLAGS[compactInstanceCardsFlag],
 		showPlayTime:
 			settings.feature_flags[showPlayTimeFlag] ?? DEFAULT_FEATURE_FLAGS[showPlayTimeFlag],
 		hideNametag: settings.hide_nametag_skins_page,
@@ -175,6 +179,7 @@ const { saved, current, changes, saving, hasChanges, reset, save } = useSavable(
 					minimize_app: value.minimizeApp,
 					hide_right_sidebar: value.hideRightSidebar,
 					show_jump_in: value.showJumpIn,
+					compact_instance_cards: value.compactInstanceCards,
 					show_play_time: value.showPlayTime,
 					hide_nametag: value.hideNametag,
 					warn_on_unknown_modpacks: value.warnOnUnknownModpacks,
@@ -192,6 +197,7 @@ const { saved, current, changes, saving, hasChanges, reset, save } = useSavable(
 			feature_flags: {
 				...persistedSettings.value.feature_flags,
 				[worldsInHomeFlag]: value.showJumpIn,
+				[compactInstanceCardsFlag]: value.compactInstanceCards,
 				[showPlayTimeFlag]: value.showPlayTime,
 				[skipUnknownPackWarningFlag]: !value.warnOnUnknownModpacks,
 				[skipNonEssentialWarningsFlag]: value.skipNonEssentialWarnings,
@@ -204,6 +210,7 @@ const { saved, current, changes, saving, hasChanges, reset, save } = useSavable(
 		appSettings.toggleSidebar = value.hideRightSidebar
 		appSettings.hideNametagSkinsPage = value.hideNametag
 		appSettings.featureFlags[worldsInHomeFlag] = value.showJumpIn
+		appSettings.featureFlags[compactInstanceCardsFlag] = value.compactInstanceCards
 		appSettings.featureFlags[showPlayTimeFlag] = value.showPlayTime
 		appSettings.featureFlags[skipUnknownPackWarningFlag] = !value.warnOnUnknownModpacks
 		appSettings.featureFlags[skipNonEssentialWarningsFlag] = value.skipNonEssentialWarnings
@@ -314,17 +321,7 @@ onBeforeUnmount(() => {
 					</h3>
 					<p class="m-0 mt-1">{{ formatMessage(messages.compactModeDescription) }}</p>
 				</div>
-				<Toggle
-					id="compact-mode"
-					:model-value="themeStore.getFeatureFlag(compactInstanceCardsFlag)"
-					@update:model-value="
-						() => {
-							const newValue = !themeStore.getFeatureFlag(compactInstanceCardsFlag)
-							themeStore.featureFlags[compactInstanceCardsFlag] = newValue
-							settings.feature_flags[compactInstanceCardsFlag] = newValue
-						}
-					"
-				/>
+				<Toggle id="compact-mode" v-model="current.compactInstanceCards" />
 			</div>
 
 			<div class="flex items-center justify-between gap-4">

apps/app-frontend/src/composables/use-app-settings.ts

@@ -13,6 +13,7 @@ export const DEFAULT_FEATURE_FLAGS = {
 	pride_fundraiser: true,
 	i18n_debug: false,
 	show_instance_play_time: true,
+	compact_instance_cards: false,
 	advanced_filters_collapsed: true,
 	always_show_copy_details: false,
 	hide_installed_modpacks: false,

apps/labrinth/src/models/v3/preferences.rs

@@ -41,6 +41,7 @@ pub struct BehaviorPreferences {
     pub minimize_app: bool,
     pub hide_right_sidebar: bool,
     pub show_jump_in: bool,
+    pub compact_instance_cards: bool,
     pub show_play_time: bool,
     pub hide_nametag: bool,
     pub warn_on_unknown_modpacks: bool,
@@ -53,6 +54,7 @@ impl Default for BehaviorPreferences {
             minimize_app: false,
             hide_right_sidebar: false,
             show_jump_in: true,
+            compact_instance_cards: false,
             show_play_time: true,
             hide_nametag: false,
             warn_on_unknown_modpacks: true,

packages/api-client/src/modules/labrinth/types.ts

@@ -1724,6 +1724,7 @@ export namespace Labrinth {
 				minimize_app: boolean
 				hide_right_sidebar: boolean
 				show_jump_in: boolean
+				compact_instance_cards: boolean
 				show_play_time: boolean
 				hide_nametag: boolean
 				warn_on_unknown_modpacks: boolean