qa: shared instances post release (#6893)

* fix: 20 user cap

* qa: invite modal dropdown + other + clamp limits

* fix: hide filters if just one type

* feat: update req banner

* feat: invite management frontend

* fix: moderation issues with shared instances

* feat: instance icon improvements

* fix: better offline handling

* fix: lint

* feat: show avatar in install to play modal

* feat: smaller qa points

* fix: fmt

* fix: fmt

* fix: yeet svg

* fix: 50 user limit

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

@@ -4,7 +4,7 @@
 		:title="formatMessage(copiedMessage)"
 		@click="copyText"
 	>
-		<span>{{ text }}</span>
+		<span>{{ displayText ?? text }}</span>
 		<CheckIcon v-if="copied" />
 		<ClipboardCopyIcon v-else />
 	</button>
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { CheckIcon, ClipboardCopyIcon } from '@modrinth/assets'
-import { ref } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
 
 import { defineMessage, useVIntl } from '../../composables/i18n'
 
@@ -22,12 +22,22 @@ const copiedMessage = defineMessage({
 })
 const { formatMessage } = useVIntl()
 
-const props = defineProps<{ text: string }>()
+const props = defineProps<{
+	text: string
+	displayText?: string
+}>()
 
 const copied = ref(false)
+let copiedResetTimeout: ReturnType<typeof setTimeout> | undefined
 
 async function copyText() {
 	await navigator.clipboard.writeText(props.text)
 	copied.value = true
+	clearTimeout(copiedResetTimeout)
+	copiedResetTimeout = setTimeout(() => {
+		copied.value = false
+	}, 2000)
 }
+
+onBeforeUnmount(() => clearTimeout(copiedResetTimeout))
 </script>

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

@@ -142,6 +142,7 @@ const props = withDefaults(
 		min?: number
 		max?: number
 		step?: number
+		clamp?: boolean
 		disabled?: boolean
 		readonly?: boolean
 		error?: boolean
@@ -159,6 +160,7 @@ const props = withDefaults(
 		type: 'text',
 		size: 'standard',
 		variant: 'filled',
+		clamp: false,
 		disabled: false,
 		readonly: false,
 		error: false,
@@ -189,12 +191,22 @@ defineExpose({
 
 function onInput(event: Event) {
 	const target = event.target as HTMLInputElement | HTMLTextAreaElement
-	model.value =
-		props.type === 'number' && !props.multiline
-			? target.value === ''
-				? undefined
-				: Number(target.value)
-			: target.value
+	if (props.type !== 'number' || props.multiline) {
+		model.value = target.value
+		return
+	}
+	if (target.value === '') {
+		model.value = undefined
+		return
+	}
+
+	let value = Number(target.value)
+	if (props.clamp) {
+		if (props.min !== undefined) value = Math.max(props.min, value)
+		if (props.max !== undefined) value = Math.min(props.max, value)
+		target.value = String(value)
+	}
+	model.value = value
 }
 
 function clear() {

packages/ui/src/components/sharing/invite-players-modal/index.vue

@@ -135,6 +135,7 @@
 		ref="inviteLinkEditor"
 		:link-expires-at="linkExpiresAt"
 		:link-max-uses="linkMaxUses"
+		:link-max-uses-limit="linkMaxUsesLimit"
 		:update-invite-link="updateInviteLink"
 	/>
 </template>
@@ -169,6 +170,7 @@ const props = withDefaults(
 		link?: string
 		linkExpiresAt?: string | Date | null
 		linkMaxUses?: number
+		linkMaxUsesLimit?: number
 		updateInviteLink?: (settings: InviteLinkSettings) => Promise<void>
 		friendsLabel?: string
 		searchPlaceholder?: string
@@ -188,6 +190,7 @@ const props = withDefaults(
 		suggestions: () => [],
 		canInvite: true,
 		linkMaxUses: 10,
+		linkMaxUsesLimit: 2147483647,
 	},
 )
 

packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue

@@ -1,19 +1,62 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.title)" max-width="30rem">
+	<NewModal ref="modal" :header="formatMessage(messages.title)" width="420px" max-width="420px">
 		<div class="flex flex-col gap-6">
 			<div class="flex flex-col gap-2">
 				<span class="font-semibold text-contrast">{{ formatMessage(messages.expiryLabel) }}</span>
-				<DatePicker
-					v-model="expiry"
+				<Combobox
+					:model-value="selectedExpiryPreset"
+					:options="expiryDropdownOptions"
+					:display-value="expiryPickerLabel"
 					:disabled="saving"
-					:min-date="minimumExpiry"
-					:max-date="maximumExpiry"
-					date-format="Y-m-d H:i"
-					alt-format="F j, Y at h:i K"
-					enable-time
-					wrapper-class="w-full"
-					input-class="w-full"
-				/>
+					:dropdown-min-width="customExpiryOpen ? '20rem' : undefined"
+					:dropdown-class="customExpiryOpen ? 'bg-transparent border-0 -mt-1 pb-2 shadow-none' : ''"
+					@open="handleExpiryPickerOpen"
+					@close="handleExpiryPickerClose"
+					@select="selectExpiryPreset"
+				>
+					<template #dropdown-footer>
+						<div
+							v-if="customExpiryOpen"
+							class="flex flex-col rounded-2xl border border-solid border-surface-5 bg-surface-3 p-1"
+						>
+							<DatePicker
+								v-model="customExpiry"
+								:min-date="minimumExpiry"
+								:max-date="maximumExpiry"
+								:default-view-date="customExpiry || minimumExpiry"
+								date-format="Y-m-d H:i"
+								enable-time
+								calendar-only
+								wrapper-class="w-full"
+								calendar-class="!border-none"
+							/>
+							<div class="flex justify-end gap-2 p-3 pt-1">
+								<ButtonStyled type="outlined">
+									<button type="button" @click="cancelCustomExpiry">
+										{{ formatMessage(messages.cancel) }}
+									</button>
+								</ButtonStyled>
+								<ButtonStyled color="brand">
+									<button
+										type="button"
+										:disabled="!canApplyCustomExpiry"
+										@click="applyCustomExpiry"
+									>
+										{{ formatMessage(messages.apply) }}
+									</button>
+								</ButtonStyled>
+							</div>
+						</div>
+						<button
+							v-else
+							type="button"
+							class="flex w-full cursor-pointer items-center border-0 border-t border-solid border-surface-5 bg-transparent px-4 py-3 text-left text-base font-semibold leading-tight text-primary transition-colors hover:bg-surface-5"
+							@click.stop="openCustomExpiry"
+						>
+							{{ formatMessage(messages.customExpiry) }}
+						</button>
+					</template>
+				</Combobox>
 			</div>
 			<div class="flex flex-col gap-2">
 				<span class="font-semibold text-contrast">{{ formatMessage(messages.maxUsesLabel) }}</span>
@@ -21,9 +64,10 @@
 					v-model="maxUses"
 					type="number"
 					:min="1"
-					:max="2147483647"
+					:max="maximumUses"
 					:step="1"
-					:disabled="saving"
+					:disabled="saving || maximumUses === 0"
+					clamp
 				/>
 			</div>
 		</div>
@@ -49,29 +93,58 @@
 
 <script setup lang="ts">
 import { SaveIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
+import { useFormatDateTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { injectNotificationManager } from '../../../providers'
 import ButtonStyled from '../../base/ButtonStyled.vue'
+import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
 import DatePicker from '../../base/DatePicker.vue'
 import StyledInput from '../../base/StyledInput.vue'
 import NewModal from '../../modal/NewModal.vue'
 import type { InviteLinkSettings } from './types'
 
-const props = defineProps<{
-	linkExpiresAt?: string | Date | null
-	linkMaxUses: number
-	updateInviteLink?: (settings: InviteLinkSettings) => Promise<void>
-}>()
+const EXPIRY_PRESET_DURATIONS = {
+	one_hour: 3_600_000,
+	six_hours: 6 * 3_600_000,
+	twelve_hours: 12 * 3_600_000,
+	one_day: 86_400_000,
+	three_days: 3 * 86_400_000,
+	seven_days: 7 * 86_400_000,
+} as const
+const MINIMUM_EXPIRY_DURATION = EXPIRY_PRESET_DURATIONS.one_hour
+const MAXIMUM_EXPIRY_DURATION = EXPIRY_PRESET_DURATIONS.seven_days
+const EXPIRY_PRESET_MATCH_TOLERANCE = 2 * 60_000
+
+type ExpiryPreset = keyof typeof EXPIRY_PRESET_DURATIONS
+
+const props = withDefaults(
+	defineProps<{
+		linkExpiresAt?: string | Date | null
+		linkMaxUses: number
+		linkMaxUsesLimit?: number
+		updateInviteLink?: (settings: InviteLinkSettings) => Promise<void>
+	}>(),
+	{
+		linkMaxUsesLimit: 2147483647,
+	},
+)
 const { formatMessage } = useVIntl()
 const notificationManager = injectNotificationManager(null)
 const modal = ref<InstanceType<typeof NewModal> | null>(null)
 const expiry = ref('')
+const expiryMode = ref<'preset' | 'custom'>('preset')
+const expiryPreset = ref<ExpiryPreset>('seven_days')
+const expiryReferenceTime = ref(Date.now())
+const customExpiry = ref('')
+const customExpiryOpen = ref(false)
 const maxUses = ref<number>()
 const minimumExpiry = ref(new Date())
 const maximumExpiry = ref(new Date())
 const saving = ref(false)
+const maximumUses = computed(() => Math.max(0, Math.floor(props.linkMaxUsesLimit)))
+const formatExpiryDate = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
 
 const messages = defineMessages({
 	title: {
@@ -86,10 +159,46 @@ const messages = defineMessages({
 		id: 'sharing.invite-players-modal.max-uses-label',
 		defaultMessage: 'Maximum uses',
 	},
+	inOneHour: {
+		id: 'sharing.invite-players-modal.expiry-in-one-hour',
+		defaultMessage: 'In 1 hour',
+	},
+	inSixHours: {
+		id: 'sharing.invite-players-modal.expiry-in-six-hours',
+		defaultMessage: 'In 6 hours',
+	},
+	inTwelveHours: {
+		id: 'sharing.invite-players-modal.expiry-in-twelve-hours',
+		defaultMessage: 'In 12 hours',
+	},
+	inOneDay: {
+		id: 'sharing.invite-players-modal.expiry-in-one-day',
+		defaultMessage: 'In 1 day',
+	},
+	inThreeDays: {
+		id: 'sharing.invite-players-modal.expiry-in-three-days',
+		defaultMessage: 'In 3 days',
+	},
+	inSevenDays: {
+		id: 'sharing.invite-players-modal.expiry-in-seven-days',
+		defaultMessage: 'In 7 days',
+	},
+	customExpiry: {
+		id: 'sharing.invite-players-modal.custom-expiry',
+		defaultMessage: 'Custom...',
+	},
+	customExpiryValue: {
+		id: 'sharing.invite-players-modal.custom-expiry-value',
+		defaultMessage: 'Custom: {date}',
+	},
 	cancel: {
 		id: 'sharing.invite-players-modal.cancel-button',
 		defaultMessage: 'Cancel',
 	},
+	apply: {
+		id: 'sharing.invite-players-modal.apply-button',
+		defaultMessage: 'Apply',
+	},
 	save: {
 		id: 'sharing.invite-players-modal.save-button',
 		defaultMessage: 'Save',
@@ -100,6 +209,35 @@ const messages = defineMessages({
 	},
 })
 
+const expiryOptions = computed<ComboboxOption<ExpiryPreset>[]>(() => [
+	{ value: 'one_hour', label: formatMessage(messages.inOneHour) },
+	{ value: 'six_hours', label: formatMessage(messages.inSixHours) },
+	{ value: 'twelve_hours', label: formatMessage(messages.inTwelveHours) },
+	{ value: 'one_day', label: formatMessage(messages.inOneDay) },
+	{ value: 'three_days', label: formatMessage(messages.inThreeDays) },
+	{ value: 'seven_days', label: formatMessage(messages.inSevenDays) },
+])
+const expiryDropdownOptions = computed(() => (customExpiryOpen.value ? [] : expiryOptions.value))
+const selectedExpiryPreset = computed(() =>
+	expiryMode.value === 'preset' ? expiryPreset.value : undefined,
+)
+const expiryPickerLabel = computed(() => {
+	if (expiryMode.value === 'preset') {
+		return (
+			expiryOptions.value.find((option) => option.value === expiryPreset.value)?.label ??
+			formatMessage(messages.inSevenDays)
+		)
+	}
+
+	const date = parseLocalDate(expiry.value)
+	return date
+		? formatMessage(messages.customExpiryValue, { date: formatExpiryDate(date) })
+		: formatMessage(messages.customExpiry)
+})
+const canApplyCustomExpiry = computed(() => {
+	const date = parseLocalDate(customExpiry.value)
+	return !!date && date >= minimumExpiry.value && date <= maximumExpiry.value
+})
 const canSave = computed(() => {
 	const date = parseLocalDate(expiry.value)
 	return (
@@ -109,7 +247,7 @@ const canSave = computed(() => {
 		date <= maximumExpiry.value &&
 		Number.isInteger(maxUses.value ?? 0) &&
 		(maxUses.value ?? 0) > 0 &&
-		(maxUses.value ?? 0) <= 2147483647
+		(maxUses.value ?? 0) <= maximumUses.value
 	)
 })
 
@@ -126,13 +264,48 @@ function parseLocalDate(value: string) {
 	return Number.isNaN(date.getTime()) ? null : date
 }
 
+function roundDownToMinute(timestamp: number) {
+	const date = new Date(timestamp)
+	date.setSeconds(0, 0)
+	return date
+}
+
+function roundUpToMinute(timestamp: number) {
+	const date = roundDownToMinute(timestamp)
+	if (date.getTime() < timestamp) date.setMinutes(date.getMinutes() + 1)
+	return date
+}
+
+function expiryForPreset(preset: ExpiryPreset) {
+	const expiryTimestamp = expiryReferenceTime.value + EXPIRY_PRESET_DURATIONS[preset]
+	const date = roundDownToMinute(expiryTimestamp)
+	if (date < minimumExpiry.value) return minimumExpiry.value
+	if (date > maximumExpiry.value) return maximumExpiry.value
+	return date
+}
+
+function matchingExpiryPreset(date: Date) {
+	const duration = date.getTime() - expiryReferenceTime.value
+	let closestPreset: ExpiryPreset | null = null
+	let closestDifference = Number.POSITIVE_INFINITY
+
+	for (const [preset, presetDuration] of Object.entries(EXPIRY_PRESET_DURATIONS) as Array<
+		[ExpiryPreset, number]
+	>) {
+		const difference = Math.abs(duration - presetDuration)
+		if (difference < closestDifference) {
+			closestPreset = preset
+			closestDifference = difference
+		}
+	}
+
+	return closestDifference <= EXPIRY_PRESET_MATCH_TOLERANCE ? closestPreset : null
+}
+
 function show() {
-	const now = new Date()
-	minimumExpiry.value = new Date(now.getTime() + 3_600_000)
-	minimumExpiry.value.setSeconds(0, 0)
-	minimumExpiry.value.setMinutes(minimumExpiry.value.getMinutes() + 1)
-	maximumExpiry.value = new Date(now.getTime() + 7 * 86_400_000)
-	maximumExpiry.value.setSeconds(0, 0)
+	expiryReferenceTime.value = Date.now()
+	minimumExpiry.value = roundUpToMinute(expiryReferenceTime.value + MINIMUM_EXPIRY_DURATION)
+	maximumExpiry.value = roundDownToMinute(expiryReferenceTime.value + MAXIMUM_EXPIRY_DURATION)
 	const currentExpiry = props.linkExpiresAt ? new Date(props.linkExpiresAt) : maximumExpiry.value
 	const date =
 		Number.isNaN(currentExpiry.getTime()) || currentExpiry < minimumExpiry.value
@@ -141,16 +314,63 @@ function show() {
 				? maximumExpiry.value
 				: currentExpiry
 	expiry.value = formatLocalDate(date)
-	maxUses.value = props.linkMaxUses
+	const matchingPreset = matchingExpiryPreset(date)
+	expiryMode.value = matchingPreset ? 'preset' : 'custom'
+	if (matchingPreset) expiryPreset.value = matchingPreset
+	customExpiry.value = expiry.value
+	customExpiryOpen.value = false
+	maxUses.value = Math.min(props.linkMaxUses, maximumUses.value)
 	modal.value?.show()
 }
 
+function selectExpiryPreset(option: ComboboxOption<ExpiryPreset>) {
+	expiryMode.value = 'preset'
+	expiryPreset.value = option.value
+	expiry.value = formatLocalDate(expiryForPreset(option.value))
+}
+
+function handleExpiryPickerOpen() {
+	customExpiryOpen.value = false
+}
+
+function handleExpiryPickerClose() {
+	customExpiryOpen.value = false
+	customExpiry.value = expiry.value
+}
+
+function openCustomExpiry() {
+	customExpiry.value = expiry.value
+	customExpiryOpen.value = true
+}
+
+function cancelCustomExpiry() {
+	customExpiry.value = expiry.value
+	customExpiryOpen.value = false
+}
+
+function closeExpiryPicker(event: Event) {
+	const target = event.target
+	if (!(target instanceof HTMLElement)) return
+	target
+		.closest('[role="listbox"], [role="menu"]')
+		?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+}
+
+function applyCustomExpiry(event: MouseEvent) {
+	const date = parseLocalDate(customExpiry.value)
+	if (!canApplyCustomExpiry.value || !date) return
+	expiryMode.value = 'custom'
+	expiry.value = formatLocalDate(date)
+	closeExpiryPicker(event)
+}
+
 async function save() {
 	const date = parseLocalDate(expiry.value)
 	if (!canSave.value || !date || !props.updateInviteLink) return
+	const clampedMaxUses = Math.min(maxUses.value ?? 1, maximumUses.value)
 	saving.value = true
 	try {
-		await props.updateInviteLink({ expiresAt: date, maxUses: maxUses.value ?? 1 })
+		await props.updateInviteLink({ expiresAt: date, maxUses: clampedMaxUses })
 		modal.value?.hide()
 	} catch (error) {
 		notificationManager?.addNotification({
@@ -163,5 +383,9 @@ async function save() {
 	}
 }
 
+watch([maxUses, maximumUses], ([uses, limit]) => {
+	if (uses !== undefined && uses > limit) maxUses.value = limit
+})
+
 defineExpose({ show })
 </script>