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({

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

@@ -55,6 +55,7 @@ pub enum FeatureFlag {
     ProjectBackground,
     WorldsTab,
     WorldsInHome,
+    ServerRamAsBytesAlwaysOn,
     ServersInApp,
     ServerProjectQa,
     I18nDebug,

packages/assets/styles/classes.scss

@@ -906,10 +906,15 @@ a:not(.no-click-animation),
 		border-spacing: 0;
 		line-height: 1.5;
 		border: 0.1rem solid var(--color-button-bg);
-		border-radius: var(--radius-sm);
+		border-radius: var(--radius-xl);
 
 		th {
 			font-weight: 600;
+			background-color: var(--surface-3);
+		}
+
+		tr {
+			background-color: var(--surface-1-5);
 		}
 
 		td,
@@ -918,7 +923,7 @@ a:not(.no-click-animation),
 		}
 
 		tr:nth-child(2n) {
-			background-color: var(--color-accent-contrast);
+			background-color: var(--surface-1);
 		}
 
 		td:not(:last-of-type),

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

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

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

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

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

packages/ui/src/layouts/wrapped/hosting/manage/overview.vue

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

packages/ui/src/layouts/wrapped/hosting/manage/root.vue

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

packages/ui/src/providers/page-context.ts

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