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/frontend/src/pages/dashboard/affiliate-links.vue

@@ -18,20 +18,14 @@
 				{{ formatMessage(messages.yourAffiliateLinks) }}
 			</h1>
 			<div class="flex items-center gap-2">
-				<div class="iconified-input">
-					<SearchIcon aria-hidden="true" />
-					<input
-						v-model="filterQuery"
-						class="card-shadow"
-						autocomplete="off"
-						spellcheck="false"
-						type="text"
-						:placeholder="formatMessage(messages.searchAffiliateLinks)"
-					/>
-					<Button v-if="filterQuery" class="r-btn" @click="() => (filterQuery = '')">
-						<XIcon />
-					</Button>
-				</div>
+				<StyledInput
+					v-model="filterQuery"
+					:icon="SearchIcon"
+					type="text"
+					autocomplete="off"
+					:placeholder="formatMessage(messages.searchAffiliateLinks)"
+					clearable
+				/>
 				<ButtonStyled color="brand">
 					<button @click="createModal?.show">
 						<PlusIcon />
@@ -63,16 +57,16 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { PlusIcon, SearchIcon, XCircleIcon, XIcon } from '@modrinth/assets'
+import { PlusIcon, SearchIcon, XCircleIcon } from '@modrinth/assets'
 import {
 	Admonition,
 	AffiliateLinkCard,
 	AffiliateLinkCreateModal,
-	Button,
 	ButtonStyled,
 	ConfirmModal,
 	defineMessages,
 	injectNotificationManager,
+	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import type { AffiliateLink } from '@modrinth/utils'

apps/frontend/src/pages/dashboard/collections.vue

@@ -3,18 +3,18 @@
 		<CollectionCreateModal ref="modal_creation" />
 		<h2 class="text-2xl">{{ formatMessage(commonMessages.collectionsLabel) }}</h2>
 		<div class="search-row">
-			<div class="iconified-input">
+			<div class="flex-grow">
 				<label for="search-input" hidden>{{ formatMessage(messages.searchInputLabel) }}</label>
-				<SearchIcon aria-hidden="true" />
-				<input id="search-input" v-model="filterQuery" type="text" />
-				<Button
-					v-if="filterQuery"
-					class="r-btn"
-					aria-label="Clear search"
-					@click="() => (filterQuery = '')"
-				>
-					<XIcon aria-hidden="true" />
-				</Button>
+				<StyledInput
+					id="search-input"
+					v-model="filterQuery"
+					:icon="SearchIcon"
+					type="text"
+					clearable
+					placeholder="Search collections..."
+					wrapper-class="w-full"
+					input-class="h-8"
+				/>
 			</div>
 			<Button color="primary" @click="(event) => $refs.modal_creation.show(event)">
 				<PlusIcon aria-hidden="true" />
@@ -106,7 +106,7 @@ import {
 	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
+import { Avatar, Button, commonMessages, defineMessages, StyledInput, useVIntl } from '@modrinth/ui'
 
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 

apps/frontend/src/pages/dashboard/projects.vue

@@ -15,7 +15,7 @@
 						<span class="label__title">Issue tracker</span>
 					</label>
 					<div class="input-group shrink-first">
-						<input
+						<StyledInput
 							id="issue-tracker-input"
 							v-model="editLinks.issues.val"
 							:disabled="editLinks.issues.clear"
@@ -23,7 +23,7 @@
 							:placeholder="
 								editLinks.issues.clear ? 'Existing link will be cleared' : 'Enter a valid URL'
 							"
-							maxlength="2048"
+							:maxlength="2048"
 						/>
 						<button
 							v-tooltip="'Clear link'"
@@ -42,12 +42,12 @@
 						<span class="label__title">Source code</span>
 					</label>
 					<div class="input-group shrink-first">
-						<input
+						<StyledInput
 							id="source-code-input"
 							v-model="editLinks.source.val"
 							:disabled="editLinks.source.clear"
 							type="url"
-							maxlength="2048"
+							:maxlength="2048"
 							:placeholder="
 								editLinks.source.clear ? 'Existing link will be cleared' : 'Enter a valid URL'
 							"
@@ -69,12 +69,12 @@
 						<span class="label__title">Wiki page</span>
 					</label>
 					<div class="input-group shrink-first">
-						<input
+						<StyledInput
 							id="wiki-page-input"
 							v-model="editLinks.wiki.val"
 							:disabled="editLinks.wiki.clear"
 							type="url"
-							maxlength="2048"
+							:maxlength="2048"
 							:placeholder="
 								editLinks.wiki.clear ? 'Existing link will be cleared' : 'Enter a valid URL'
 							"
@@ -93,12 +93,12 @@
 						<span class="label__title">Discord invite</span>
 					</label>
 					<div class="input-group shrink-first">
-						<input
+						<StyledInput
 							id="discord-invite-input"
 							v-model="editLinks.discord.val"
 							:disabled="editLinks.discord.clear"
 							type="url"
-							maxlength="2048"
+							:maxlength="2048"
 							:placeholder="
 								editLinks.discord.clear
 									? 'Existing link will be cleared'
@@ -335,6 +335,7 @@ import {
 	injectNotificationManager,
 	NewModal,
 	ProjectStatusBadge,
+	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'