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/pages/instance/Index.vue

@@ -213,12 +213,11 @@ import { showProfileInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
 import { useBreadcrumbs, useLoading, useTheming } from '@/store/state'
 
-const themeStore = useTheming()
-
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
 const { handleError } = injectNotificationManager()
+const themeStore = useTheming()
 const route = useRoute()
 
 const router = useRouter()

apps/app-frontend/src/pages/instance/Logs.vue

@@ -39,12 +39,13 @@
 			</div>
 		</div>
 		<div class="button-row">
-			<input
+			<StyledInput
 				id="text-filter"
 				v-model="searchFilter"
 				autocomplete="off"
-				type="text"
-				class="text-filter"
+				:icon="SearchIcon"
+				type="search"
+				input-class="text-filter"
 				placeholder="Type to filter logs..."
 			/>
 			<div class="filter-group">
@@ -91,8 +92,15 @@
 <script setup>
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
-import { CheckIcon, ClipboardCopyIcon, ShareIcon, TrashIcon } from '@modrinth/assets'
-import { Button, Card, Checkbox, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
+import { CheckIcon, ClipboardCopyIcon, SearchIcon, ShareIcon, TrashIcon } from '@modrinth/assets'
+import {
+	Button,
+	Card,
+	Checkbox,
+	DropdownSelect,
+	injectNotificationManager,
+	StyledInput,
+} from '@modrinth/ui'
 import dayjs from 'dayjs'
 import isToday from 'dayjs/plugin/isToday'
 import isYesterday from 'dayjs/plugin/isYesterday'

apps/app-frontend/src/pages/instance/Mods.vue

@@ -2,19 +2,15 @@
 	<div>
 		<template v-if="projects?.length > 0">
 			<div class="flex items-center gap-2 mb-4">
-				<div class="iconified-input flex-grow">
-					<SearchIcon />
-					<input
-						v-model="searchFilter"
-						type="text"
-						:placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
-						class="text-input search-input"
-						autocomplete="off"
-					/>
-					<Button class="r-btn" @click="() => (searchFilter = '')">
-						<XIcon />
-					</Button>
-				</div>
+				<StyledInput
+					v-model="searchFilter"
+					:icon="SearchIcon"
+					type="text"
+					:placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
+					autocomplete="off"
+					clearable
+					wrapper-class="flex-grow"
+				/>
 				<AddContentButton :instance="instance" />
 			</div>
 			<div class="flex items-center justify-between">
@@ -268,10 +264,8 @@ import {
 	SlashIcon,
 	TrashIcon,
 	UpdatedIcon,
-	XIcon,
 } from '@modrinth/assets'
 import {
-	Button,
 	ButtonStyled,
 	ContentListPanel,
 	defineMessages,
@@ -279,6 +273,7 @@ import {
 	OverflowMenu,
 	Pagination,
 	RadialHeader,
+	StyledInput,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'

apps/app-frontend/src/pages/instance/Worlds.vue

@@ -28,19 +28,15 @@
 	/>
 	<div v-if="worlds.length > 0" class="flex flex-col gap-4">
 		<div class="flex flex-wrap gap-2 items-center">
-			<div class="iconified-input flex-grow">
-				<SearchIcon />
-				<input
-					v-model="searchFilter"
-					type="text"
-					:placeholder="`Search worlds...`"
-					class="text-input search-input"
-					autocomplete="off"
-				/>
-				<Button v-if="searchFilter" class="r-btn" @click="() => (searchFilter = '')">
-					<XIcon />
-				</Button>
-			</div>
+			<StyledInput
+				v-model="searchFilter"
+				:icon="SearchIcon"
+				type="text"
+				placeholder="Search worlds..."
+				autocomplete="off"
+				clearable
+				wrapper-class="flex-grow"
+			/>
 			<ButtonStyled>
 				<button :disabled="refreshingAll" @click="refreshAllWorlds">
 					<template v-if="refreshingAll">
@@ -121,9 +117,8 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { PlusIcon, SearchIcon, SpinnerIcon, UpdatedIcon, XIcon } from '@modrinth/assets'
+import { PlusIcon, SearchIcon, SpinnerIcon, UpdatedIcon } from '@modrinth/assets'
 import {
-	Button,
 	ButtonStyled,
 	defineMessages,
 	FilterBar,
@@ -132,6 +127,7 @@ import {
 	type GameVersion,
 	injectNotificationManager,
 	RadialHeader,
+	StyledInput,
 } from '@modrinth/ui'
 import type { Version } from '@modrinth/utils'
 import { platform } from '@tauri-apps/plugin-os'