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/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'