feat: add toggle for showing play time (#6240)

* feat: add toggle for showing play time

* prepr

apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue

@@ -10,8 +10,9 @@ import type { ColorTheme, FeatureFlag } from '@/store/theme.ts'
 const themeStore = useTheming()
 const { formatMessage } = useVIntl()
 
-const worldsInHomeFeatureFlag = 'worlds_in_home' as FeatureFlag
-const skipUnknownPackWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag
+const worldsInHomeFlag: FeatureFlag = 'worlds_in_home'
+const skipUnknownPackWarningFlag: FeatureFlag = 'skip_unknown_pack_warning'
+const showPlayTimeFlag: FeatureFlag = 'show_instance_play_time'
 
 const messages = defineMessages({
 	colorThemeTitle: {
@@ -100,6 +101,14 @@ const messages = defineMessages({
 		defaultMessage:
 			"If you attempt to install a Modrinth Pack file (.mrpack) that isn't hosted on Modrinth, we'll make sure you understand the risks before installing it.",
 	},
+	showPlayTimeTitle: {
+		id: 'app.appearance-settings.show-play-time.title',
+		defaultMessage: 'Show play time',
+	},
+	showPlayTimeDescription: {
+		id: 'app.appearance-settings.show-play-time.description',
+		defaultMessage: `Displays how much time you've spent playing an instance.`,
+	},
 })
 
 const os = ref(await getOS())
@@ -153,25 +162,6 @@ watch(
 		/>
 	</div>
 
-	<div class="mt-6 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.hideNametagTitle) }}
-			</h2>
-			<p class="m-0 mt-1">{{ formatMessage(messages.hideNametagDescription) }}</p>
-		</div>
-		<Toggle
-			id="hide-nametag-skins-page"
-			:model-value="themeStore.hideNametagSkinsPage"
-			@update:model-value="
-				(e) => {
-					themeStore.hideNametagSkinsPage = !!e
-					settings.hide_nametag_skins_page = themeStore.hideNametagSkinsPage
-				}
-			"
-		/>
-	</div>
-
 	<div v-if="os !== 'MacOS'" class="mt-6 flex items-center justify-between gap-4">
 		<div>
 			<h2 class="m-0 text-lg font-semibold text-contrast">
@@ -192,6 +182,44 @@ watch(
 		<Toggle id="minimize-launcher" v-model="settings.hide_on_process_start" />
 	</div>
 
+	<div class="mt-6 flex items-center justify-between">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.showPlayTimeTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.showPlayTimeDescription) }}</p>
+		</div>
+		<Toggle
+			:model-value="themeStore.getFeatureFlag(showPlayTimeFlag)"
+			@update:model-value="
+				() => {
+					const newValue = !themeStore.getFeatureFlag(showPlayTimeFlag)
+					themeStore.featureFlags[showPlayTimeFlag] = newValue
+					settings.feature_flags[showPlayTimeFlag] = newValue
+				}
+			"
+		/>
+	</div>
+
+	<div class="mt-6 flex items-center justify-between">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.hideNametagTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.hideNametagDescription) }}</p>
+		</div>
+		<Toggle
+			id="hide-nametag-skins-page"
+			:model-value="themeStore.hideNametagSkinsPage"
+			@update:model-value="
+				(e) => {
+					themeStore.hideNametagSkinsPage = !!e
+					settings.hide_nametag_skins_page = themeStore.hideNametagSkinsPage
+				}
+			"
+		/>
+	</div>
+
 	<div class="mt-6 flex items-center justify-between">
 		<div>
 			<h2 class="m-0 text-lg font-semibold text-contrast">
@@ -226,12 +254,12 @@ watch(
 			<p class="m-0 mt-1">{{ formatMessage(messages.jumpBackIntoWorldsDescription) }}</p>
 		</div>
 		<Toggle
-			:model-value="themeStore.getFeatureFlag(worldsInHomeFeatureFlag)"
+			:model-value="themeStore.getFeatureFlag(worldsInHomeFlag)"
 			@update:model-value="
 				() => {
-					const newValue = !themeStore.getFeatureFlag(worldsInHomeFeatureFlag)
-					themeStore.featureFlags[worldsInHomeFeatureFlag] = newValue
-					settings.feature_flags[worldsInHomeFeatureFlag] = newValue
+					const newValue = !themeStore.getFeatureFlag(worldsInHomeFlag)
+					themeStore.featureFlags[worldsInHomeFlag] = newValue
+					settings.feature_flags[worldsInHomeFlag] = newValue
 				}
 			"
 		/>
@@ -245,13 +273,13 @@ watch(
 			<p class="m-0 mt-1">{{ formatMessage(messages.unknownPackWarningDescription) }}</p>
 		</div>
 		<Toggle
-			:model-value="!themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)"
+			:model-value="!themeStore.getFeatureFlag(skipUnknownPackWarningFlag)"
 			@update:model-value="
 				(e) => {
 					const warnBeforeUnknownPackInstall = !!e
 					const skipUnknownPackWarning = !warnBeforeUnknownPackInstall
-					themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = skipUnknownPackWarning
-					settings.feature_flags[skipUnknownPackWarningFeatureFlag] = skipUnknownPackWarning
+					themeStore.featureFlags[skipUnknownPackWarningFlag] = skipUnknownPackWarning
+					settings.feature_flags[skipUnknownPackWarningFlag] = skipUnknownPackWarning
 				}
 			"
 		/>

apps/app-frontend/src/locales/en-US/index.json

@@ -86,6 +86,12 @@
   "app.appearance-settings.select-option": {
     "message": "Select an option"
   },
+  "app.appearance-settings.show-play-time.description": {
+    "message": "Displays how much time you've spent playing an instance."
+  },
+  "app.appearance-settings.show-play-time.title": {
+    "message": "Show play time"
+  },
   "app.appearance-settings.toggle-sidebar.description": {
     "message": "Enables the ability to toggle the sidebar."
   },

apps/app-frontend/src/pages/instance/Index.vue

@@ -32,14 +32,16 @@
 								{{ instance.loader }} {{ instance.game_version }}
 							</div>
 
-							<div class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
+							<template v-if="showInstancePlayTime">
+								<div class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
 
-							<div class="flex items-center gap-2 font-medium">
-								<template v-if="timePlayed > 0">
-									{{ timePlayedHumanized }}
-								</template>
-								<template v-else> Never played </template>
-							</div>
+								<div class="flex items-center gap-2 font-medium">
+									<template v-if="timePlayed > 0">
+										{{ timePlayedHumanized }}
+									</template>
+									<template v-else> Never played </template>
+								</div>
+							</template>
 						</template>
 
 						<template v-else>
@@ -326,7 +328,7 @@ import { showProfileInFolder } from '@/helpers/utils.js'
 import { get_server_status, refreshWorlds } from '@/helpers/worlds'
 import { injectServerInstall } from '@/providers/server-install'
 import { handleSevereError } from '@/store/error.js'
-import { useBreadcrumbs } from '@/store/state'
+import { useBreadcrumbs, useTheming } from '@/store/state'
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
@@ -338,6 +340,8 @@ const route = useRoute()
 
 const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
+const themeStore = useTheming()
+const showInstancePlayTime = computed(() => themeStore.getFeatureFlag('show_instance_play_time'))
 const contentSubpageRouteNames = new Set(['Mods', 'ModsFilter'])
 
 const offline = ref(!navigator.onLine)

apps/app-frontend/src/store/theme.ts

@@ -11,6 +11,7 @@ export const DEFAULT_FEATURE_FLAGS = {
 	skip_unknown_pack_warning: false,
 	pride_fundraiser: true,
 	i18n_debug: false,
+	show_instance_play_time: true,
 }
 
 export const THEME_OPTIONS = ['dark', 'light', 'oled', 'system'] as const

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

@@ -62,6 +62,7 @@ pub enum FeatureFlag {
     ServersInApp,
     ServerProjectQa,
     I18nDebug,
+    ShowInstancePlayTime,
 }
 
 impl Settings {