refactor: migrate all input fields to StyledInput (#5306)

* feat: StyledInput component

* migrate: auth pages to styledInput

* migrate: search/filter inputs

* migrate: dashboard inputs

* migrate: app frontend

* migrate: search related inputs

* migrate: all of app-frontend

* fix: missing inputs on app-frontend

* migrate: frontend

* feat: multiline

* migrate: textareas

* fix: storybook use text-primary

* fix: lint

* fix: merge conflict

* feat: cleanup

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

@@ -1,6 +1,6 @@
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, Checkbox, injectNotificationManager } from '@modrinth/ui'
+import { Button, Checkbox, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref } from 'vue'
 
@@ -110,31 +110,33 @@ const exportPack = async () => {
 		<div class="modal-body">
 			<div class="labeled_input">
 				<p>Modpack Name</p>
-				<div class="iconified-input">
-					<PackageIcon />
-					<input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
-					<Button class="r-btn" @click="nameInput = ''">
-						<XIcon />
-					</Button>
-				</div>
+				<StyledInput
+					v-model="nameInput"
+					:icon="PackageIcon"
+					type="text"
+					placeholder="Modpack name"
+					clearable
+				/>
 			</div>
 			<div class="labeled_input">
 				<p>Version number</p>
-				<div class="iconified-input">
-					<VersionIcon />
-					<input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
-					<Button class="r-btn" @click="versionInput = ''">
-						<XIcon />
-					</Button>
-				</div>
+				<StyledInput
+					v-model="versionInput"
+					:icon="VersionIcon"
+					type="text"
+					placeholder="1.0.0"
+					clearable
+				/>
 			</div>
 			<div class="adjacent-input">
 				<div class="labeled_input">
 					<p>Description</p>
 
-					<div class="textarea-wrapper">
-						<textarea v-model="exportDescription" placeholder="Enter modpack description..." />
-					</div>
+					<StyledInput
+						v-model="exportDescription"
+						multiline
+						placeholder="Enter modpack description..."
+					/>
 				</div>
 			</div>
 
@@ -289,17 +291,4 @@ const exportPack = async () => {
 	align-items: center;
 	gap: 1rem;
 }
-
-.textarea-wrapper {
-	// margin-top: 1rem;
-	height: 12rem;
-
-	textarea {
-		max-height: 12rem;
-	}
-
-	.preview {
-		overflow-y: auto;
-	}
-}
 </style>

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

@@ -20,12 +20,13 @@
 			</div>
 			<div class="input-row">
 				<p class="input-label">Name</p>
-				<input
+				<StyledInput
 					v-model="profile_name"
 					autocomplete="off"
-					class="text-input"
 					type="text"
-					maxlength="100"
+					placeholder="Enter a name for your instance..."
+					:maxlength="100"
+					wrapper-class="w-full"
 				/>
 			</div>
 			<div class="input-row">
@@ -93,18 +94,14 @@
 			<div class="path-selection">
 				<h3>{{ selectedProfileType.name }} path</h3>
 				<div class="path-input">
-					<div class="iconified-input">
-						<FolderOpenIcon />
-						<input
-							v-model="selectedProfileType.path"
-							type="text"
-							placeholder="Path to launcher"
-							@change="setPath"
-						/>
-						<Button class="r-btn" @click="() => (selectedProfileType.path = '')">
-							<XIcon />
-						</Button>
-					</div>
+					<StyledInput
+						v-model="selectedProfileType.path"
+						:icon="FolderOpenIcon"
+						type="text"
+						placeholder="Path to launcher"
+						clearable
+						@change="setPath"
+					/>
 					<Button icon-only @click="selectLauncherPath">
 						<FolderSearchIcon />
 					</Button>
@@ -197,7 +194,14 @@ import {
 	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Checkbox, Chips, injectNotificationManager } from '@modrinth/ui'
+import {
+	Avatar,
+	Button,
+	Checkbox,
+	Chips,
+	injectNotificationManager,
+	StyledInput,
+} from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import { open } from '@tauri-apps/plugin-dialog'

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

@@ -1,18 +1,17 @@
 <template>
 	<JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
 	<div class="toggle-setting" :class="{ compact }">
-		<input
+		<StyledInput
 			autocomplete="off"
 			:disabled="props.disabled"
-			:value="props.modelValue ? props.modelValue.path : ''"
-			type="text"
-			class="installation-input"
+			:model-value="props.modelValue ? props.modelValue.path : ''"
 			:placeholder="placeholder ?? '/path/to/java'"
-			@input="
+			wrapper-class="installation-input"
+			@update:model-value="
 				(val) => {
 					emit('update:modelValue', {
 						...props.modelValue,
-						path: val.target.value,
+						path: val,
 					})
 				}
 			"
@@ -60,7 +59,7 @@ import {
 	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { Button, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref } from 'vue'
 

apps/app-frontend/src/components/ui/friends/FriendsList.vue

@@ -3,10 +3,10 @@ import { MailIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/ass
 import {
 	Avatar,
 	ButtonStyled,
-	commonMessages,
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
+	StyledInput,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -271,15 +271,14 @@ const messages = defineMessages({
 				{{ formatMessage(messages.usernameDescription) }}
 			</p>
 			<div class="flex items-center gap-2 mt-4">
-				<div class="iconified-input flex-1">
-					<UserIcon aria-hidden="true" />
-					<input
-						v-model="username"
-						type="text"
-						:placeholder="formatMessage(messages.usernamePlaceholder)"
-						@keyup.enter="addFriendFromModal"
-					/>
-				</div>
+				<StyledInput
+					v-model="username"
+					:icon="UserIcon"
+					type="text"
+					:placeholder="formatMessage(messages.usernamePlaceholder)"
+					wrapper-class="flex-1"
+					@keyup.enter="addFriendFromModal"
+				/>
 				<ButtonStyled color="brand">
 					<button :disabled="username.length === 0" @click="addFriendFromModal">
 						<SendIcon />
@@ -300,23 +299,15 @@ const messages = defineMessages({
 					<UserPlusIcon />
 				</button>
 			</ButtonStyled>
-			<div class="iconified-input flex-1">
-				<input
-					v-model="search"
-					type="text"
-					class="friends-search-bar flex w-full"
-					:placeholder="formatMessage(messages.searchFriends)"
-					@keyup.esc="search = ''"
-				/>
-				<button
-					v-if="search"
-					v-tooltip="formatMessage(commonMessages.clearButton)"
-					class="r-btn flex items-center justify-center bg-transparent button-animation p-2 cursor-pointer appearance-none border-none"
-					@click="search = ''"
-				>
-					<XIcon />
-				</button>
-			</div>
+			<StyledInput
+				v-model="search"
+				type="text"
+				:placeholder="formatMessage(messages.searchFriends)"
+				clearable
+				variant="outlined"
+				wrapper-class="flex-1"
+				@keyup.esc="search = ''"
+			/>
 		</template>
 		<h3 v-else class="ml-2 w-full text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
@@ -413,16 +404,3 @@ const messages = defineMessages({
 		</template>
 	</div>
 </template>
-<style scoped>
-.friends-search-bar {
-	background: none;
-	border: 2px solid var(--color-button-bg) !important;
-	padding: 8px;
-	border-radius: 12px;
-	height: 36px;
-}
-
-.friends-search-bar::placeholder {
-	@apply text-sm font-normal;
-}
-</style>

apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue

@@ -4,10 +4,11 @@ import {
 	DownloadIcon,
 	PlusIcon,
 	RightArrowIcon,
+	SearchIcon,
 	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
+import { Avatar, Button, Card, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
 import { computed, ref } from 'vue'
@@ -211,12 +212,12 @@ const createInstance = async () => {
 <template>
 	<ModalWrapper ref="installModal" header="Install project to instance" :on-hide="onInstall">
 		<div class="modal-body">
-			<input
+			<StyledInput
 				v-model="searchFilter"
-				autocomplete="off"
-				type="text"
-				class="search"
+				:icon="SearchIcon"
+				type="search"
 				placeholder="Search for an instance"
+				autocomplete="off"
 			/>
 			<div class="profiles" :class="{ 'hide-creation': !showCreation }">
 				<div v-for="profile in shownProfiles" :key="profile.name" class="option">
@@ -271,7 +272,7 @@ const createInstance = async () => {
 						</div>
 					</div>
 					<div class="creation-settings">
-						<input
+						<StyledInput
 							v-model="name"
 							autocomplete="off"
 							type="text"

apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue

@@ -7,6 +7,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	OverflowMenu,
+	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
@@ -245,13 +246,12 @@ const messages = defineMessages({
 			{{ formatMessage(messages.name) }}
 		</label>
 		<div class="flex">
-			<input
+			<StyledInput
 				id="instance-name"
 				v-model="title"
 				autocomplete="off"
-				maxlength="80"
-				class="flex-grow"
-				type="text"
+				:maxlength="80"
+				wrapper-class="flex-grow"
 			/>
 		</div>
 		<template v-if="instance.install_stage == 'installed'">
@@ -292,9 +292,8 @@ const messages = defineMessages({
 				@click="toggleGroup(group)"
 			/>
 			<div class="flex gap-2 items-center">
-				<input
+				<StyledInput
 					v-model="newCategoryInput"
-					type="text"
 					:placeholder="formatMessage(messages.libraryGroupsEnterName)"
 					@submit="() => addCategory"
 				/>

apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
-import { Checkbox, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/profile'
@@ -108,14 +114,13 @@ const messages = defineMessages({
 		<p class="m-0">
 			{{ formatMessage(messages.preLaunchDescription) }}
 		</p>
-		<input
+		<StyledInput
 			id="pre-launch"
 			v-model="hooks.pre_launch"
 			autocomplete="off"
 			:disabled="!overrideHooks"
-			type="text"
 			:placeholder="formatMessage(messages.preLaunchEnter)"
-			class="w-full mt-2"
+			wrapper-class="w-full mt-2"
 		/>
 
 		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
@@ -124,14 +129,13 @@ const messages = defineMessages({
 		<p class="m-0">
 			{{ formatMessage(messages.wrapperDescription) }}
 		</p>
-		<input
+		<StyledInput
 			id="wrapper"
 			v-model="hooks.wrapper"
 			autocomplete="off"
 			:disabled="!overrideHooks"
-			type="text"
 			:placeholder="formatMessage(messages.wrapperEnter)"
-			class="w-full mt-2"
+			wrapper-class="w-full mt-2"
 		/>
 
 		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
@@ -140,14 +144,13 @@ const messages = defineMessages({
 		<p class="m-0">
 			{{ formatMessage(messages.postExitDescription) }}
 		</p>
-		<input
+		<StyledInput
 			id="post-exit"
 			v-model="hooks.post_exit"
 			autocomplete="off"
 			:disabled="!overrideHooks"
-			type="text"
 			:placeholder="formatMessage(messages.postExitEnter)"
-			class="w-full mt-2"
+			wrapper-class="w-full mt-2"
 		/>
 	</div>
 </template>

apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
-import { Checkbox, defineMessages, injectNotificationManager, Slider, useVIntl } from '@modrinth/ui'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	Slider,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, readonly, ref, watch } from 'vue'
 
 import JavaSelector from '@/components/ui/JavaSelector.vue'
@@ -155,27 +162,25 @@ const messages = defineMessages({
 			{{ formatMessage(messages.javaArguments) }}
 		</h2>
 		<Checkbox v-model="overrideJavaArgs" label="Custom java arguments" class="my-2" />
-		<input
+		<StyledInput
 			id="java-args"
 			v-model="javaArgs"
 			autocomplete="off"
 			:disabled="!overrideJavaArgs"
-			type="text"
-			class="w-full"
 			placeholder="Enter java arguments..."
+			wrapper-class="w-full"
 		/>
 		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
 			{{ formatMessage(messages.javaEnvironmentVariables) }}
 		</h2>
 		<Checkbox v-model="overrideEnvVars" label="Custom environment variables" class="mb-2" />
-		<input
+		<StyledInput
 			id="env-vars"
 			v-model="envVars"
 			autocomplete="off"
 			:disabled="!overrideEnvVars"
-			type="text"
-			class="w-full"
 			placeholder="Enter environmental variables..."
+			wrapper-class="w-full"
 		/>
 	</div>
 </template>

apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { Checkbox, defineMessages, injectNotificationManager, Toggle, useVIntl } from '@modrinth/ui'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, type Ref, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/profile'
@@ -121,7 +128,7 @@ const messages = defineMessages({
 					{{ formatMessage(messages.widthDescription) }}
 				</p>
 			</div>
-			<input
+			<StyledInput
 				id="width"
 				v-model="resolution[0]"
 				autocomplete="off"
@@ -140,7 +147,7 @@ const messages = defineMessages({
 					{{ formatMessage(messages.heightDescription) }}
 				</p>
 			</div>
-			<input
+			<StyledInput
 				id="height"
 				v-model="resolution[1]"
 				autocomplete="off"

apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { injectNotificationManager, Slider, Toggle } from '@modrinth/ui'
+import { injectNotificationManager, Slider, StyledInput, Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import useMemorySlider from '@/composables/useMemorySlider'
@@ -73,7 +73,7 @@ watch(
 				</p>
 			</div>
 
-			<input
+			<StyledInput
 				id="width"
 				v-model="settings.game_resolution[0]"
 				:disabled="settings.force_fullscreen"
@@ -91,13 +91,12 @@ watch(
 				</p>
 			</div>
 
-			<input
+			<StyledInput
 				id="height"
 				v-model="settings.game_resolution[1]"
 				:disabled="settings.force_fullscreen"
 				autocomplete="off"
 				type="number"
-				class="input"
 				placeholder="Enter height..."
 			/>
 		</div>
@@ -118,23 +117,23 @@ watch(
 		/>
 
 		<h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Java arguments</h2>
-		<input
+		<StyledInput
 			id="java-args"
 			v-model="settings.launchArgs"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter java arguments..."
-			class="w-full"
+			wrapper-class="w-full"
 		/>
 
 		<h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Environmental variables</h2>
-		<input
+		<StyledInput
 			id="env-vars"
 			v-model="settings.envVars"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter environmental variables..."
-			class="w-full"
+			wrapper-class="w-full"
 		/>
 
 		<hr class="mt-4 bg-button-border border-none h-[1px]" />
@@ -143,37 +142,37 @@ watch(
 
 		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Pre launch</h3>
 		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">Ran before the instance is launched.</p>
-		<input
+		<StyledInput
 			id="pre-launch"
 			v-model="settings.hooks.pre_launch"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter pre-launch command..."
-			class="w-full"
+			wrapper-class="w-full"
 		/>
 
 		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Wrapper</h3>
 		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
 			Wrapper command for launching Minecraft.
 		</p>
-		<input
+		<StyledInput
 			id="wrapper"
 			v-model="settings.hooks.wrapper"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter wrapper command..."
-			class="w-full"
+			wrapper-class="w-full"
 		/>
 
 		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Post exit</h3>
 		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">Ran after the game closes.</p>
-		<input
+		<StyledInput
 			id="post-exit"
 			v-model="settings.hooks.post_exit"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter post-exit command..."
-			class="w-full"
+			wrapper-class="w-full"
 		/>
 	</div>
 </template>

apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager, Slider } from '@modrinth/ui'
+import { Button, injectNotificationManager, Slider, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref, watch } from 'vue'
 
@@ -65,13 +65,19 @@ async function findLauncherDir() {
 	</p>
 
 	<div class="m-1 my-2">
-		<div class="iconified-input w-full">
-			<BoxIcon />
-			<input id="appDir" v-model="settings.custom_dir" type="text" class="input" />
-			<Button class="r-btn" @click="findLauncherDir">
-				<FolderSearchIcon />
-			</Button>
-		</div>
+		<StyledInput
+			id="appDir"
+			v-model="settings.custom_dir"
+			:icon="BoxIcon"
+			type="text"
+			wrapper-class="w-full"
+		>
+			<template #right>
+				<Button class="r-btn" @click="findLauncherDir">
+					<FolderSearchIcon />
+				</Button>
+			</template>
+		</StyledInput>
 	</div>
 
 	<div>

apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue

@@ -6,6 +6,7 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
+	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
@@ -103,12 +104,11 @@ const messages = defineMessages({
 			<h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
 				{{ formatMessage(messages.name) }}
 			</h2>
-			<input
+			<StyledInput
 				v-model="name"
-				type="text"
 				:placeholder="formatMessage(messages.placeholderName)"
-				class="w-full"
 				autocomplete="off"
+				wrapper-class="w-full"
 			/>
 			<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
 		</div>

apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
-import { Combobox, defineMessages, type MessageDescriptor, useVIntl } from '@modrinth/ui'
+import {
+	Combobox,
+	defineMessages,
+	type MessageDescriptor,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 
 import type { ServerPackStatus } from '@/helpers/worlds.ts'
 
@@ -52,22 +58,20 @@ defineExpose({ resourcePackOptions })
 		<h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
 			{{ formatMessage(messages.name) }}
 		</h2>
-		<input
+		<StyledInput
 			v-model="name"
-			type="text"
 			:placeholder="formatMessage(messages.placeholderName)"
-			class="w-full"
 			autocomplete="off"
+			wrapper-class="w-full"
 		/>
 		<h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
 			{{ formatMessage(messages.address) }}
 		</h2>
-		<input
+		<StyledInput
 			v-model="address"
-			type="text"
 			placeholder="example.modrinth.gg"
-			class="w-full"
 			autocomplete="off"
+			wrapper-class="w-full"
 		/>
 		<h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
 			{{ formatMessage(messages.resourcePack) }}