From 8a820af631e74acfeea61d54427b89716c696f97 Mon Sep 17 00:00:00 2001 From: tdgao Date: Thu, 20 Aug 2026 11:40:29 -0600 Subject: [PATCH] refactor: compact mode with sync'd app settings --- apps/app-frontend/src/App.vue | 1 + .../ui/library/instance-group/index.vue | 6 +++--- .../instance-group/instance-card-view.vue | 6 +++--- .../ui/settings/display/BehaviorSettings.vue | 19 ++++++++----------- .../src/composables/use-app-settings.ts | 1 + apps/labrinth/src/models/v3/preferences.rs | 2 ++ .../api-client/src/modules/labrinth/types.ts | 1 + 7 files changed, 19 insertions(+), 17 deletions(-) diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue index 7456fa2dec..4e884871bb 100644 --- a/apps/app-frontend/src/App.vue +++ b/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, diff --git a/apps/app-frontend/src/components/ui/library/instance-group/index.vue b/apps/app-frontend/src/components/ui/library/instance-group/index.vue index 91bb6e41e2..fd8ac1d075 100644 --- a/apps/app-frontend/src/components/ui/library/instance-group/index.vue +++ b/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, diff --git a/apps/app-frontend/src/components/ui/library/instance-group/instance-card-view.vue b/apps/app-frontend/src/components/ui/library/instance-group/instance-card-view.vue index 4f1b373ccb..e062f193a6 100644 --- a/apps/app-frontend/src/components/ui/library/instance-group/instance-card-view.vue +++ b/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(null) const versionRef = ref(null) diff --git a/apps/app-frontend/src/components/ui/settings/display/BehaviorSettings.vue b/apps/app-frontend/src/components/ui/settings/display/BehaviorSettings.vue index 072346dfef..d52c4404a6 100644 --- a/apps/app-frontend/src/components/ui/settings/display/BehaviorSettings.vue +++ b/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(() => {

{{ formatMessage(messages.compactModeDescription) }}

- +
diff --git a/apps/app-frontend/src/composables/use-app-settings.ts b/apps/app-frontend/src/composables/use-app-settings.ts index 4ef0a51609..d5e9ca22b0 100644 --- a/apps/app-frontend/src/composables/use-app-settings.ts +++ b/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, diff --git a/apps/labrinth/src/models/v3/preferences.rs b/apps/labrinth/src/models/v3/preferences.rs index 8db8e69276..f2b8e8914a 100644 --- a/apps/labrinth/src/models/v3/preferences.rs +++ b/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, diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts index 35172b7eef..20e94d2ad6 100644 --- a/packages/api-client/src/modules/labrinth/types.ts +++ b/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