feat: server play frontend draft

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

@@ -22,6 +22,7 @@ export const DEFAULT_FEATURE_FLAGS = {
 	friends_offline_collapsed: true,
 	friends_pending_collapsed: true,
 	dismissed_photosensitivity_filter_warning: false,
+	ServerPlayFrontend: false,
 }
 
 export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS

apps/app-frontend/src/pages/hosting/manage/Index.vue

@@ -9,6 +9,7 @@
 			:reload-page="() => router.go(0)"
 			:resolve-viewer="resolveViewer"
 			:show-copy-id-action="appSettings.devMode"
+			:show-play-tab="appSettings.getFeatureFlag('ServerPlayFrontend')"
 			:auth-user="authUser"
 			:navigate-to-billing="() => openUrl('https://modrinth.com/settings/billing')"
 			:navigate-to-servers="() => router.push('/hosting/manage')"

apps/app-frontend/src/pages/hosting/manage/Play.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ServersManagePlayPage } from '@modrinth/ui'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useAppSettings } from '@/composables/use-app-settings.ts'
+
+const route = useRoute()
+const router = useRouter()
+const appSettings = useAppSettings()
+
+if (!appSettings.getFeatureFlag('ServerPlayFrontend')) {
+	await router.replace(`/hosting/manage/${String(route.params.id)}`)
+}
+</script>
+
+<template>
+	<ServersManagePlayPage />
+</template>

apps/app-frontend/src/pages/hosting/manage/index.js

@@ -4,5 +4,6 @@ import Content from './Content.vue'
 import Files from './Files.vue'
 import Index from './Index.vue'
 import Overview from './Overview.vue'
+import Play from './Play.vue'
 
-export { Access, Backups, Content, Files, Index, Overview }
+export { Access, Backups, Content, Files, Index, Overview, Play }

apps/app-frontend/src/routes.js

@@ -26,6 +26,11 @@ export default new createRouter({
 			name: 'ServerManage',
 			component: Hosting.Index,
 			children: [
+				{
+					path: 'play',
+					name: 'ServerManagePlay',
+					component: Hosting.Play,
+				},
 				{
 					path: '',
 					name: 'ServerManageOverview',