refactor: compact mode with sync'd app settings

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">