Revert "refactor"

This reverts commit 96d65902d7.

apps/app-frontend/src/components/ui/ExportModal.vue

@@ -8,7 +8,6 @@ import {
 	injectNotificationManager,
 	NewModal,
 	StyledInput,
-	StyledTextarea,
 	useVIntl,
 } from '@modrinth/ui'
 import { save } from '@tauri-apps/plugin-dialog'
@@ -270,8 +269,9 @@ function isExportCandidateDisabled(path) {
 				<p class="m-0 text-contrast font-semibold">
 					{{ formatMessage(commonMessages.descriptionLabel) }}
 				</p>
-				<StyledTextarea
+				<StyledInput
 					v-model="exportDescription"
+					multiline
 					:placeholder="formatMessage(messages.descriptionPlaceholder)"
 					wrapper-class="w-full"
 				/>

apps/frontend/src/components/ui/admin/BatchCreditModal.vue

@@ -92,9 +92,10 @@
 					class="text-muted flex flex-col gap-2 rounded-lg border border-surface-5 bg-button-bg p-4"
 				>
 					<span>Hi {user.name},</span>
-					<StyledTextarea
+					<StyledInput
 						id="message-batch"
 						v-model="message"
+						multiline
 						:rows="3"
 						input-class="!bg-surface-3"
 					/>
@@ -136,7 +137,6 @@ import {
 	injectNotificationManager,
 	NewModal,
 	StyledInput,
-	StyledTextarea,
 	TagItem,
 	Toggle,
 } from '@modrinth/ui'

apps/frontend/src/components/ui/admin/TransferModal.vue

@@ -25,9 +25,10 @@
 					</span>
 					<span>Server IDs (one per line or comma-separated.)</span>
 				</label>
-				<StyledTextarea
+				<StyledInput
 					id="server-ids"
 					v-model="serverIdsInput"
+					multiline
 					:rows="4"
 					input-class="bg-surface-3"
 					placeholder="123e4569-e89b-12d3-a456-426614174005&#10;123e9569-e89b-12d3-a456-413678919876"
@@ -146,7 +147,7 @@
 					:format-label="(item) => scheduleOptionLabels[item]"
 					:capitalize="false"
 				/>
-				<NativeDateInput
+				<StyledInput
 					v-if="scheduleOption === 'later'"
 					v-model="scheduledDate"
 					type="datetime-local"
@@ -163,9 +164,10 @@
 					</span>
 					<span>Provide a reason for this transfer batch.</span>
 				</label>
-				<StyledTextarea
+				<StyledInput
 					id="reason"
 					v-model="reason"
+					multiline
 					:rows="2"
 					input-class="bg-surface-3"
 					placeholder="Node maintenance scheduled"
@@ -198,10 +200,8 @@ import {
 	Combobox,
 	injectModrinthClient,
 	injectNotificationManager,
-	NativeDateInput,
 	NewModal,
 	StyledInput,
-	StyledTextarea,
 	TagItem,
 	Toggle,
 } from '@modrinth/ui'

apps/frontend/src/components/ui/create/CollectionCreateModal.vue

@@ -25,9 +25,10 @@
 					}}</span>
 					<span>{{ formatMessage(messages.summaryDescription) }}</span>
 				</label>
-				<StyledTextarea
+				<StyledInput
 					id="additional-information"
 					v-model="description"
+					multiline
 					:maxlength="256"
 					:placeholder="formatMessage(messages.summaryPlaceholder)"
 					:disabled="hasHitLimit"
@@ -62,7 +63,6 @@ import {
 	injectNotificationManager,
 	NewModal,
 	StyledInput,
-	StyledTextarea,
 	useVIntl,
 } from '@modrinth/ui'
 

apps/frontend/src/components/ui/create/OrganizationCreateModal.vue

@@ -46,9 +46,10 @@
 					</span>
 					<span>{{ formatMessage(messages.summaryDescription) }}</span>
 				</label>
-				<StyledTextarea
+				<StyledInput
 					id="additional-information"
 					v-model="description"
+					multiline
 					:maxlength="256"
 					:placeholder="formatMessage(messages.summaryPlaceholder)"
 					:disabled="hasHitLimit"
@@ -84,7 +85,6 @@ import {
 	injectNotificationManager,
 	NewModal,
 	StyledInput,
-	StyledTextarea,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'

apps/frontend/src/components/ui/create/ProjectCreateModal.vue

@@ -100,9 +100,10 @@
 						{{ formatMessage(messages.summaryLabel) }}
 					</span>
 				</label>
-				<StyledTextarea
+				<StyledInput
 					id="additional-information"
 					v-model="description"
+					multiline
 					:maxlength="256"
 					:placeholder="formatMessage(messages.summaryPlaceholder)"
 					:disabled="hasHitLimit"
@@ -141,7 +142,6 @@ import {
 	injectNotificationManager,
 	NewModal,
 	StyledInput,
-	StyledTextarea,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, defineAsyncComponent, h } from 'vue'

apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue

@@ -218,9 +218,10 @@
 								:heading-buttons="false"
 								:on-image-upload="onUploadHandler"
 							/>
-							<StyledTextarea
+							<StyledInput
 								v-else
 								v-model="messageText"
+								multiline
 								placeholder="No message generated."
 								autocomplete="off"
 								input-class="h-[400px] font-mono"
@@ -413,7 +414,7 @@ import {
 	injectNotificationManager,
 	injectProjectPageContext,
 	MarkdownEditor,
-	StyledTextarea,
+	StyledInput,
 	useDebugLogger,
 } from '@modrinth/ui'
 import TeleportOverflowMenu from '@modrinth/ui/src/components/base/TeleportOverflowMenu.vue'

apps/frontend/src/components/ui/moderation/checklist/NodeRenderer.vue

@@ -34,7 +34,7 @@ import {
 	StyledInput,
 } from '@modrinth/ui'
 import { renderHighlightedString, renderString } from '@modrinth/utils'
-import { inject, onMounted, reactive, watchEffect } from 'vue'
+import { inject, nextTick, onMounted, reactive, watchEffect } from 'vue'
 
 import { NODE_META_KEY, STATE_KEY } from './checklist-context'
 
@@ -266,6 +266,7 @@ function setTextState(node: IdentifiedNodeBuilder, v: string): void {
 		const def = resolveDefault(node as ValueNodeBuilder)
 		const defStr = typeof def === 'string' ? def : ''
 		setNodeState(node, ov === defStr ? undefined : ov || undefined)
+		nextTick(() => textInputRefs.get(node)?.setValue(ov))
 		return
 	}
 
@@ -276,7 +277,7 @@ function setTextState(node: IdentifiedNodeBuilder, v: string): void {
 
 function handleButtonClick(node: ButtonNodeBuilder): void {
 	const before = new Map<NodeBuilder, string>()
-	for (const inputNode of textInputNodes) {
+	for (const inputNode of textInputRefs.keys()) {
 		before.set(inputNode, getTextState(asIdentified(inputNode)))
 	}
 	node._onClick?.(props.showContext)
@@ -287,7 +288,7 @@ function handleButtonClick(node: ButtonNodeBuilder): void {
 }
 
 onMounted(() => {
-	for (const inputNode of textInputNodes) {
+	for (const inputNode of textInputRefs.keys()) {
 		setTextState(asIdentified(inputNode), getTextState(asIdentified(inputNode)))
 	}
 })
@@ -324,7 +325,7 @@ function toggleChip(parent: IdentifiedNodeBuilder, child: IdentifiedNodeBuilder)
 	setNodeState(parent, selected.size > 0 ? selected : undefined)
 }
 
-const textInputNodes = new Set<NodeBuilder>()
+const textInputRefs = new Map<NodeBuilder, { setValue: (v: string) => void }>()
 const overrideHelpers = { override: (v: string): OverrideValue => ({ __override: v }) }
 
 function isOverrideValue(v: unknown): v is OverrideValue {
@@ -721,7 +722,7 @@ watchEffect(async () => {
 					<template v-else-if="item.type === 'text'">
 						<StyledInput
 							:id="`node-${asIdentified(item).id}`"
-							:ref="(el: any) => (el ? textInputNodes.add(item) : textInputNodes.delete(item))"
+							:ref="(el: any) => (el ? textInputRefs.set(item, el) : textInputRefs.delete(item))"
 							v-tooltip="getTooltipConfig(item, showContext)"
 							:model-value="getTextState(asIdentified(item))"
 							:placeholder="getPlaceholder(asInput(item))"

apps/frontend/src/pages/[type]/[project]/gallery.vue

@@ -52,9 +52,10 @@
 				<label for="gallery-image-desc">
 					<span class="label__title">Description</span>
 				</label>
-				<StyledTextarea
+				<StyledInput
 					id="gallery-image-desc"
 					v-model="editDescription"
+					multiline
 					:maxlength="255"
 					placeholder="Enter description..."
 				/>
@@ -306,7 +307,6 @@ import {
 	injectProjectPageContext,
 	NewModal as Modal,
 	StyledInput,
-	StyledTextarea,
 	useFormatDateTime,
 } from '@modrinth/ui'
 import { useEventListener } from '@vueuse/core'

apps/frontend/src/pages/[type]/[project]/settings/gallery.vue

@@ -52,9 +52,10 @@
 				<label for="gallery-image-desc">
 					<span class="label__title">Description</span>
 				</label>
-				<StyledTextarea
+				<StyledInput
 					id="gallery-image-desc"
 					v-model="editDescription"
+					multiline
 					:maxlength="255"
 					placeholder="Enter description..."
 				/>
@@ -296,7 +297,6 @@ import {
 	injectProjectPageContext,
 	NewModal as Modal,
 	StyledInput,
-	StyledTextarea,
 	useFormatDateTime,
 } from '@modrinth/ui'
 

apps/frontend/src/pages/[type]/[project]/settings/index.vue

@@ -53,9 +53,10 @@
 					<label for="project-summary">
 						<span class="label__title">Summary</span>
 					</label>
-					<StyledTextarea
+					<StyledInput
 						id="project-summary"
 						v-model="summary"
+						multiline
 						:maxlength="256"
 						:disabled="!hasPermission"
 						resize="vertical"
@@ -341,7 +342,6 @@ import {
 	injectNotificationManager,
 	injectProjectPageContext,
 	StyledInput,
-	StyledTextarea,
 	Toggle,
 	UnsavedChangesPopup,
 	useFormatBytes,

apps/frontend/src/pages/admin/servers/notices.vue

@@ -45,10 +45,11 @@
 					placeholder="E.g. rXGtq2"
 					autocomplete="off"
 				/>
-				<StyledTextarea
+				<StyledInput
 					v-else
 					id="notice-message"
 					v-model="newNoticeMessage"
+					multiline
 					wrapper-class="h-32"
 				/>
 			</div>
@@ -64,7 +65,7 @@
 					<span class="text-lg font-semibold text-contrast"> Announcement date </span>
 					<span>Leave blank for notice to be available immediately.</span>
 				</label>
-				<NativeDateInput
+				<StyledInput
 					id="scheduled-date"
 					v-model="newNoticeScheduledDate"
 					type="datetime-local"
@@ -76,7 +77,7 @@
 					<span class="text-lg font-semibold text-contrast"> Expiration date </span>
 					<span>The notice will automatically be deleted after this date.</span>
 				</label>
-				<NativeDateInput
+				<StyledInput
 					id="expiration-date"
 					v-model="newNoticeExpiresDate"
 					type="datetime-local"
@@ -269,11 +270,9 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	NativeDateInput,
 	NewModal,
 	ServerNotice,
 	StyledInput,
-	StyledTextarea,
 	TagItem,
 	Toggle,
 	useFormatDateTime,

apps/frontend/src/pages/collection/[collection].vue

@@ -94,9 +94,10 @@
 					>
 						{{ formatMessage(commonMessages.descriptionLabel) }}
 					</label>
-					<StyledTextarea
+					<StyledInput
 						id="collection-description"
 						v-model="current.description"
+						multiline
 						:maxlength="255"
 						wrapper-class="h-24"
 					/>
@@ -422,7 +423,6 @@ import {
 	RadioButtons,
 	SidebarCard,
 	StyledInput,
-	StyledTextarea,
 	useCompactNumber,
 	useFormatDateTime,
 	useRelativeTime,

apps/frontend/src/pages/moderation/external-projects.vue

@@ -17,18 +17,22 @@
 				class="!w-full"
 			/>
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-proof">Proof</label>
-			<StyledTextarea
+			<StyledInput
 				id="edit-form-proof"
 				v-model="editForm.proof"
+				type="text"
+				multiline
 				resize="both"
 				class="w-[30rem]"
 			/>
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-exceptions">
 				Exceptions / notes
 			</label>
-			<StyledTextarea
+			<StyledInput
 				id="edit-form-exceptions"
 				v-model="editForm.exceptions"
+				type="text"
+				multiline
 				resize="both"
 				class="w-[30rem]"
 			/>
@@ -137,7 +141,6 @@ import {
 	injectModrinthClient,
 	NewModal,
 	StyledInput,
-	StyledTextarea,
 	useVIntl,
 } from '@modrinth/ui'
 

apps/frontend/src/pages/organization/[organization]/settings/index.vue

@@ -7,7 +7,6 @@ import {
 	FileInput,
 	injectNotificationManager,
 	StyledInput,
-	StyledTextarea,
 	UnsavedChangesPopup,
 	useSavable,
 } from '@modrinth/ui'
@@ -213,9 +212,10 @@ const onDeleteOrganization = useClientTry(async () => {
 			<label for="project-summary">
 				<span class="label__title">Summary</span>
 			</label>
-			<StyledTextarea
+			<StyledInput
 				id="project-summary"
 				v-model="current.summary"
+				multiline
 				:maxlength="256"
 				:disabled="!hasPermission"
 				resize="vertical"

apps/frontend/src/pages/settings/applications.vue

@@ -59,10 +59,11 @@
 				>
 					{{ formatMessage(messages.descriptionLabel) }}
 				</label>
-				<StyledTextarea
+				<StyledInput
 					v-if="editingId"
 					id="app-description"
 					v-model="description"
+					multiline
 					:maxlength="255"
 					autocomplete="off"
 					:placeholder="formatMessage(messages.descriptionPlaceholder)"
@@ -265,7 +266,6 @@ import {
 	NewModal,
 	normalizeChildren,
 	StyledInput,
-	StyledTextarea,
 	useFormatDateTime,
 	useVIntl,
 } from '@modrinth/ui'