MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Truman Gao
2026-04-15 03:12:31 -06:00
committed by GitHub
parent 74bad7456c
commit baee34b0b6
17 changed files with 282 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/ui/src/components/base/TeleportOverflowMenu.vue
View File

@@ -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

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

@@ -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>

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

@@ -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',

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

@@ -89,26 +89,36 @@
</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 -->
<div class="flex flex-col gap-2.5">
<div class="flex flex-col gap-2.5 pb-10">
<div class="text-lg m-0 font-semibold text-contrast">Info</div>
<div class="flex flex-col gap-2.5 rounded-xl bg-surface-2 p-4">
<div
v-for="property in infoProperties"
:key="property.name"
class="flex items-center justify-between gap-4"
class="flex items-start justify-between gap-4"
>
<template v-if="property.value !== 'Unknown'">
<span>{{ property.name }}</span>
<CopyCode :text="property.value" />
<span class="mt-1">{{ property.name }}</span>
<CopyCode v-if="property.type === 'copy'" :text="property.value" />
<div
v-else-if="property.type === 'specs'"
class="flex flex-col items-end text-right text-sm leading-5 break-words"
>
<span v-for="line in property.lines" :key="line">{{ line }}</span>
</div>
<span v-else class="text-right text-sm break-words">{{ property.value }}</span>
</template>
</div>
</div>
@@ -127,7 +137,8 @@
</template>
<script setup lang="ts">
import { useQueryClient } from '@tanstack/vue-query'
import type { Labrinth } from '@modrinth/api-client'
import { useQuery, useQueryClient } from '@tanstack/vue-query'
import { useStorage } from '@vueuse/core'
import { computed, ref, watch } from 'vue'
@@ -138,11 +149,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,11 +220,118 @@ 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
}
const { data: subscriptions } = useQuery({
queryKey: ['billing', 'subscriptions'],
queryFn: () => client.labrinth.billing_internal.getSubscriptions(),
})
const { data: products } = useQuery({
queryKey: ['billing', 'products'],
queryFn: () => client.labrinth.billing_internal.getProducts(),
})
const serverSubscription = computed(() =>
subscriptions.value?.find(
(subscription) =>
subscription.metadata?.type === 'pyro' && subscription.metadata.id === serverId,
),
)
const serverProduct = computed(() =>
products.value?.find((product) =>
product.prices.some((price) => price.id === serverSubscription.value?.price_id),
),
)
const formatSpecNumber = (value: number) =>
Number.isInteger(value) ? String(value) : value.toFixed(1)
const getServerSpecs = (product?: Labrinth.Billing.Internal.Product | null) => {
const metadata = product?.metadata
if (!metadata || (metadata.type !== 'pyro' && metadata.type !== 'medal')) {
return null
}
const sharedCpus = formatSpecNumber(metadata.cpu / 2)
const burstCpus = formatSpecNumber(metadata.cpu)
const ramGb = formatSpecNumber(metadata.ram / 1024)
const swapGb = formatSpecNumber(metadata.swap / 1024)
const storageGb = formatSpecNumber(metadata.storage / 1024)
return {
sharedCpus,
burstCpus,
ramGb,
swapGb,
storageGb,
}
}
const serverHostname = computed(() =>
serverSubdomain.value ? `${serverSubdomain.value}.modrinth.gg` : 'Unknown',
)
const serverSpecs = computed(() => getServerSpecs(serverProduct.value))
type InfoProperty =
| {
name: string
value: string
type: 'copy'
}
| {
name: string
value: string
type: 'text'
}
| {
name: string
value: string
type: 'specs'
lines: string[]
}
// Info properties
const infoProperties = [
{ name: 'Server ID', value: serverId ?? 'Unknown' },
{ name: 'Node', value: data.value?.node?.instance ?? 'Unknown' },
]
const infoProperties = computed<InfoProperty[]>(() => [
{ name: 'Server ID', value: serverId ?? 'Unknown', type: 'copy' },
{ name: 'Node', value: data.value?.node?.instance ?? 'Unknown', type: 'copy' },
{ name: 'Hostname', value: serverHostname.value, type: 'copy' },
{
name: 'Server specs',
value: serverSpecs.value ? 'Available' : 'Unknown',
type: 'specs',
lines: serverSpecs.value
? [
`${serverSpecs.value.sharedCpus} Shared CPU${Number(serverSpecs.value.sharedCpus) > 1 ? 's' : ''} (Bursts up to ${serverSpecs.value.burstCpus} CPUs)`,
`${serverSpecs.value.ramGb} GB RAM`,
`${serverSpecs.value.swapGb} GB Swap`,
`${serverSpecs.value.storageGb} GB SSD`,
]
: [],
},
])
// Unsaved changes tracking (API fields + preferences)
const hasUnsavedChanges = computed(

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

@@ -2,7 +2,7 @@
<div
data-pyro-server-stats
style="font-variant-numeric: tabular-nums"
class="flex select-none flex-col items-center gap-4 md:flex-row"
class="flex select-none flex-col items-center gap-3 md:flex-row"
:class="{ 'pointer-events-none': loading }"
:aria-hidden="loading"
>
@@ -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,

4
packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="relative flex select-none flex-col gap-6" data-pyro-server-manager-root>
<div class="flex flex-col gap-6">
<div class="flex flex-col gap-4">
<ServerManageStats
:data="!isWsAuthIncorrect ? stats : undefined"
:loading="isWsAuthIncorrect"
/>
<div class="flex min-h-[700px] flex-col gap-4">
<div class="flex min-h-[700px] flex-col gap-2">
<span class="text-2xl font-semibold text-contrast">Console</span>
<ConsolePageLayout />

2
packages/ui/src/layouts/wrapped/hosting/manage/root.vue
View File

@@ -107,7 +107,7 @@
<div
v-else-if="serverData"
data-pyro-server-manager-root
class="experimental-styles-within relative mx-auto pb-12 box-border flex min-h-[calc(100svh-100px)] w-full min-w-0 flex-col gap-6 px-6 transition-all duration-300"
class="experimental-styles-within relative mx-auto pb-12 box-border flex min-h-[calc(100svh-100px)] w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
:style="{
'--server-bg-image': serverImage
? `url(${serverImage})`

3
packages/ui/src/providers/page-context.ts
View File

@@ -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
}