feat: add show ram as bytes always on

packages/ui/src/layouts/shared/server-settings/pages/general.vue

@@ -89,12 +89,15 @@
 						</div>
 						<span>{{ prefConfig.description }}</span>
 					</label>
-					<Toggle
-						:id="`pref-${key}`"
-						v-model="newUserPreferences[key]"
-						class="flex-none"
-						:disabled="!prefConfig.implemented"
-					/>
+					<div v-tooltip="getPreferenceTooltip(key)">
+						<Toggle
+							:id="`pref-${key}`"
+							:model-value="getPreferenceValue(key)"
+							class="flex-none"
+							:disabled="!prefConfig.implemented || isPreferenceForcedByFeatureFlag(key)"
+							@update:model-value="(value) => setPreferenceValue(key, !!value)"
+						/>
+					</div>
 				</div>
 
 				<!-- Info -->
@@ -138,11 +141,13 @@ import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
+	injectPageContext,
 } from '#ui/providers'
 
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 const { server: data, serverId, busyReasons } = injectModrinthServerContext()
+const { featureFlags } = injectPageContext()
 const queryClient = useQueryClient()
 
 const serverName = ref(data.value?.name)
@@ -207,6 +212,28 @@ const userPreferences = useStorage<UserPreferences>(
 
 const newUserPreferences = ref<UserPreferences>(JSON.parse(JSON.stringify(userPreferences.value)))
 
+const isRamAsBytesForcedByFeatureFlag = computed(
+	() => featureFlags?.serverRamAsBytesAlwaysOn?.value ?? false,
+)
+
+const isPreferenceForcedByFeatureFlag = (key: string) =>
+	key === 'ramAsNumber' && isRamAsBytesForcedByFeatureFlag.value
+
+const getPreferenceTooltip = (key: string) =>
+	isPreferenceForcedByFeatureFlag(key)
+		? 'Feature flag enabled to always show RAM as bytes.'
+		: undefined
+
+const getPreferenceValue = (key: string) =>
+	isPreferenceForcedByFeatureFlag(key) ? true : newUserPreferences.value[key as PreferenceKeys]
+
+const setPreferenceValue = (key: string, value: boolean) => {
+	if (isPreferenceForcedByFeatureFlag(key)) {
+		return
+	}
+	newUserPreferences.value[key as PreferenceKeys] = value
+}
+
 // Info properties
 const infoProperties = [
 	{ name: 'Server ID', value: serverId ?? 'Unknown' },

packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue

@@ -60,11 +60,12 @@ import { useStorage } from '@vueuse/core'
 import { computed, defineAsyncComponent, ref, shallowRef, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 
-import { injectModrinthServerContext } from '#ui/providers'
+import { injectModrinthServerContext, injectPageContext } from '#ui/providers'
 
 const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
 
 const { serverId } = injectModrinthServerContext()
+const { featureFlags } = injectPageContext()
 
 const props = withDefaults(
 	defineProps<{
@@ -83,6 +84,9 @@ const chartsReady = ref(new Set<number>())
 const userPreferences = useStorage(`pyro-server-${serverId || 'unknown'}-preferences`, {
 	ramAsNumber: false,
 })
+const isRamAsBytesForcedByFeatureFlag = computed(
+	() => featureFlags?.serverRamAsBytesAlwaysOn?.value ?? false,
+)
 
 const stats = shallowRef(
 	props.data?.current || {
@@ -214,7 +218,9 @@ const metrics = computed(() => {
 		{
 			title: 'Memory',
 			value:
-				props.showMemoryAsBytes || userPreferences.value.ramAsNumber
+				props.showMemoryAsBytes ||
+				isRamAsBytesForcedByFeatureFlag.value ||
+				userPreferences.value.ramAsNumber
 					? formatBytes(stats.value.ram_usage_bytes ?? 0)
 					: `${ramPercent.value.toFixed(2)}%`,
 			icon: DatabaseIcon,

packages/ui/src/providers/page-context.ts

@@ -6,6 +6,9 @@ export interface PageContext {
 	// pages may render sidebar content in #sidebar-teleport-target instead of in the main layout when true
 	hierarchicalSidebarAvailable: Ref<boolean>
 	showAds: Ref<boolean>
+	featureFlags?: {
+		serverRamAsBytesAlwaysOn?: Ref<boolean>
+	}
 	openExternalUrl: (url: string) => void
 }