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

packages/ui/src/components/base/TeleportOverflowMenu.vue

@@ -162,9 +162,8 @@ const calculateMenuPosition = () => {
 	if (!triggerRef.value || !menuRef.value) return { top: '0px', left: '0px' }
 
 	const triggerRect = triggerRef.value.getBoundingClientRect()
-	const menuRect = menuRef.value.getBoundingClientRect()
-	const menuWidth = menuRect.width + 16
-	const menuHeight = menuRect.height
+	const menuWidth = menuRef.value.offsetWidth
+	const menuHeight = menuRef.value.offsetHeight
 	const margin = 8
 
 	let top: number

packages/ui/src/components/servers/server-header/PanelServerActionButton.vue

@@ -8,7 +8,7 @@
 			</ButtonStyled>
 
 			<template v-else>
-				<ButtonStyled v-if="showStopButton" type="transparent" size="large">
+				<ButtonStyled v-if="showStopButton" type="standard" color="red" size="large">
 					<button
 						v-tooltip="busyTooltip"
 						:disabled="!canTakeAction"
@@ -21,9 +21,38 @@
 					</button>
 				</ButtonStyled>
 
-				<ButtonStyled type="standard" color="brand" size="large">
+				<div v-if="showRestartDropdown" class="joined-buttons">
+					<ButtonStyled type="standard" color="orange" size="large">
+						<button v-tooltip="busyTooltip" :disabled="!canTakeAction" @click="handlePrimaryAction">
+							<UpdatedIcon />
+							<span>{{ primaryActionText }}</span>
+						</button>
+					</ButtonStyled>
+					<ButtonStyled type="standard" color="orange" size="large">
+						<OverflowMenu
+							v-tooltip="busyTooltip"
+							:disabled="!canTakeAction"
+							:options="[
+								{
+									id: 'kill_server',
+									action: () => initiateAction('Kill'),
+								},
+							]"
+						>
+							<div class="w-0 text-xl relative top-0.5 right-2.5">
+								<DropdownIcon />
+							</div>
+
+							<template #kill_server>
+								<SlashIcon class="h-5 w-5" />
+								Kill server
+							</template>
+						</OverflowMenu>
+					</ButtonStyled>
+				</div>
+				<ButtonStyled v-else type="standard" color="brand" size="large">
 					<button v-tooltip="busyTooltip" :disabled="!canTakeAction" @click="handlePrimaryAction">
-						<component :is="isRunning || showStopButton ? UpdatedIcon : PlayIcon" />
+						<PlayIcon />
 						<span>{{ primaryActionText }}</span>
 					</button>
 				</ButtonStyled>
@@ -33,10 +62,17 @@
 </template>
 
 <script setup lang="ts">
-import { LoaderCircleIcon, PlayIcon, StopCircleIcon, UpdatedIcon } from '@modrinth/assets'
+import {
+	DropdownIcon,
+	LoaderCircleIcon,
+	PlayIcon,
+	SlashIcon,
+	StopCircleIcon,
+	UpdatedIcon,
+} from '@modrinth/assets'
 import { computed } from 'vue'
 
-import { ButtonStyled } from '#ui/components'
+import { ButtonStyled, OverflowMenu } from '#ui/components'
 
 import { useServerPowerAction } from './use-server-power-action'
 
@@ -51,7 +87,6 @@ const props = withDefaults(
 
 const {
 	isInstalling,
-	isRunning,
 	showStopButton,
 	busyTooltip,
 	canTakeAction,
@@ -61,4 +96,32 @@ const {
 } = useServerPowerAction({
 	disabled: computed(() => props.disabled),
 })
+
+const showRestartDropdown = computed(() => primaryActionText.value === 'Restart')
 </script>
+
+<style scoped>
+.joined-buttons {
+	display: flex;
+	align-items: center;
+}
+
+.joined-buttons > :deep(.btn) {
+	border-radius: 0;
+}
+
+.joined-buttons > :deep(.btn:first-child) {
+	border-top-left-radius: var(--radius-md);
+	border-bottom-left-radius: var(--radius-md);
+}
+
+.joined-buttons > :deep(.btn:last-child) {
+	border-top-right-radius: var(--radius-md);
+	border-bottom-right-radius: var(--radius-md);
+	margin-left: -1px;
+}
+
+.joined-buttons > :deep(.btn:not(:last-child)) {
+	border-right: none;
+}
+</style>

packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue

@@ -3,10 +3,6 @@
 		<ButtonStyled circular type="transparent" size="large">
 			<TeleportOverflowMenu :options="menuOptions">
 				<MoreVerticalIcon aria-hidden="true" />
-				<template #kill>
-					<SlashIcon class="h-5 w-5" />
-					<span>Kill server</span>
-				</template>
 				<template #allServers>
 					<ServerIcon class="h-5 w-5" />
 					<span>All servers</span>
@@ -21,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { ClipboardCopyIcon, MoreVerticalIcon, ServerIcon, SlashIcon } from '@modrinth/assets'
+import { ClipboardCopyIcon, MoreVerticalIcon, ServerIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -29,8 +25,6 @@ import { ButtonStyled } from '#ui/components'
 import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
 import { injectModrinthServerContext } from '#ui/providers'
 
-import { useServerPowerAction } from './use-server-power-action'
-
 const props = withDefaults(
 	defineProps<{
 		disabled?: boolean
@@ -49,21 +43,7 @@ const props = withDefaults(
 const router = useRouter()
 const { serverId } = injectModrinthServerContext()
 
-const { isInstalling, initiateAction } = useServerPowerAction({
-	disabled: computed(() => props.disabled),
-})
-
 const menuOptions = computed(() => [
-	...(isInstalling.value
-		? []
-		: [
-				{
-					id: 'kill',
-					label: 'Kill server',
-					icon: SlashIcon,
-					action: () => initiateAction('Kill'),
-				},
-			]),
 	{
 		id: 'allServers',
 		label: 'All servers',