feat: add moderation checklist back to project page (#5814)

* fix: billing page server plan heading

* fix: matching server page spacing with instance page

* feat: update server header buttons

* feat: add show ram as bytes always on

* fix: revert to large buttons

* feat: add hostname and server states in info card

* feat: add publishing checklist to project page

* fix: markdown table style and max width

* fix: teleport overflow menu bad anchoring

apps/app-frontend/src/App.vue

@@ -157,6 +157,11 @@ provideModrinthClient(tauriApiClient)
 providePageContext({
 	hierarchicalSidebarAvailable: ref(true),
 	showAds: ref(false),
+	featureFlags: {
+		serverRamAsBytesAlwaysOn: computed(() =>
+			themeStore.getFeatureFlag('server_ram_as_bytes_always_on'),
+		),
+	},
 	openExternalUrl: (url) => openUrl(url),
 })
 provideModalBehavior({

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

@@ -6,6 +6,7 @@ export const DEFAULT_FEATURE_FLAGS = {
 	worlds_tab: false,
 	worlds_in_home: true,
 	server_project_qa: false,
+	server_ram_as_bytes_always_on: false,
 	i18n_debug: false,
 }
 

apps/frontend/src/assets/styles/layout.scss

@@ -62,6 +62,8 @@
 
 	.normal-page__content {
 		grid-area: content;
+		width: 100%;
+		min-width: 0;
 	}
 
 	.normal-page__header {
@@ -116,6 +118,8 @@
 	}
 
 	.normal-page__content {
+		width: 100%;
+		min-width: 0;
 		max-width: calc(80rem - 18.75rem - 1.5rem);
 		//overflow-x: hidden;
 	}
@@ -164,6 +168,8 @@
 
 	.normal-page__content {
 		grid-area: content;
+		width: 100%;
+		min-width: 0;
 		max-width: calc(80rem - 18.75rem - 1.5rem);
 		//overflow-x: hidden;
 	}

apps/frontend/src/composables/featureFlags.ts

@@ -38,6 +38,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	showProjectPageQuickServerButton: false,
 	newProjectGeneralSettings: false,
 	newProjectEnvironmentSettings: true,
+	serverRamAsBytesAlwaysOn: false,
 	archonSentryCapture: false,
 	hideRussiaCensorshipBanner: false,
 	disablePrettyProjectUrlRedirects: false,

apps/frontend/src/pages/[type]/[id].vue

@@ -439,6 +439,24 @@
 				}"
 			>
 				<div class="normal-page__header relative my-4">
+					<div class="mb-6">
+						<ModerationProjectNags
+							v-if="
+								projectV3 &&
+								((currentMember && project.status === 'draft') ||
+									tags.rejectedStatuses.includes(project.status))
+							"
+							:project="project"
+							:project-v3="projectV3"
+							:versions="versions ?? undefined"
+							:current-member="currentMember"
+							:collapsed="collapsedChecklist"
+							:route-name="route.name"
+							:tags="tags"
+							@toggle-collapsed="() => (collapsedChecklist = !collapsedChecklist)"
+							@set-processing="setProcessing"
+						/>
+					</div>
 					<ProjectHeader
 						v-if="projectV3Loaded"
 						:project="project"
@@ -1120,6 +1138,7 @@ import AutomaticAccordion from '~/components/ui/AutomaticAccordion.vue'
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 import MessageBanner from '~/components/ui/MessageBanner.vue'
 import ModerationChecklist from '~/components/ui/moderation/checklist/ModerationChecklist.vue'
+import ModerationProjectNags from '~/components/ui/moderation/ModerationProjectNags.vue'
 import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
 import { getSignInRouteObj } from '~/composables/auth.js'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'

apps/frontend/src/pages/settings/billing/index.vue

@@ -280,7 +280,7 @@
 				<div class="flex flex-col justify-between gap-4">
 					<div class="flex flex-col gap-4">
 						<ModrinthServersIcon class="flex h-8 w-fit" />
-						<div class="flex flex-col gap-2">
+						<div class="flex flex-col gap-6">
 							<ServerListing
 								v-if="subscription.serverInfo"
 								v-bind="subscription.serverInfo"
@@ -311,15 +311,16 @@
 									/>
 								</div>
 							</div>
-							<h3 class="m-0 mt-4 text-xl font-semibold leading-none text-contrast">
-								{{
-									formatMessage(messages.planTitle, {
-										size: getProductSize(getPyroProduct(subscription)),
-									})
-								}}
-							</h3>
+
 							<div class="flex flex-row justify-between">
-								<div class="mt-2 flex flex-col gap-2">
+								<div class="flex flex-col gap-2">
+									<h3 class="m-0 mb-1 text-xl font-semibold leading-none">
+										{{
+											formatMessage(messages.planTitle, {
+												size: getProductSize(getPyroProduct(subscription)),
+											})
+										}}
+									</h3>
 									<div class="flex items-center gap-2">
 										<CheckCircleIcon class="h-5 w-5 text-brand" />
 										<span>
@@ -370,8 +371,8 @@
 								</div>
 								<div class="flex flex-col items-end justify-between">
 									<div class="flex flex-col items-end gap-2">
-										<div class="flex text-2xl font-bold text-contrast">
-											<span class="text-contrast">
+										<h3 class="m-0 flex text-lg font-semibold text-contrast">
+											<span class="leading-none text-contrast">
 												{{
 													getProductPrice(getPyroProduct(subscription), subscription.interval)
 														? formatPrice(
@@ -383,14 +384,14 @@
 														: ''
 												}}
 											</span>
-											<span>
+											<span class="leading-none">
 												{{
 													formatMessage(messages.slashInterval, {
 														interval: getIntervalNounLabel(subscription.interval),
 													})
 												}}
 											</span>
-										</div>
+										</h3>
 										<div
 											v-if="
 												getPyroCharge(subscription) &&

apps/frontend/src/providers/setup/page-context.ts

@@ -1,12 +1,18 @@
 import { provideModalBehavior, providePageContext } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
+import { useFeatureFlags } from '~/composables/featureFlags.ts'
+
 export function setupPageContextProvider() {
 	const cosmetics = useCosmetics()
+	const featureFlags = useFeatureFlags()
 
 	providePageContext({
 		hierarchicalSidebarAvailable: ref(false),
 		showAds: ref(false),
+		featureFlags: {
+			serverRamAsBytesAlwaysOn: computed(() => featureFlags.value.serverRamAsBytesAlwaysOn),
+		},
 		openExternalUrl: (url) => window.open(url, '_blank'),
 	})
 	provideModalBehavior({