NormalPage component w/ Collections refactor (#4873)

* Refactor search page, migrate to /discover/

* Add NormalPage component for common layouts, refactor Collections page as an example, misc ui pkg cleanup

* intl:extract

* lint

* lint

* remove old components

* Refactor search page, migrate to /discover/

* Add NormalPage component for common layouts, refactor Collections page as an example, misc ui pkg cleanup

* intl:extract

* lint

* lint

* remove old components

apps/frontend/src/pages/auth/authorize.vue

@@ -81,13 +81,18 @@
 
 <script setup>
 import { CheckIcon, XIcon } from '@modrinth/assets'
-import { Avatar, Button, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import {
+	Avatar,
+	Button,
+	commonMessages,
+	injectNotificationManager,
+	normalizeChildren,
+} from '@modrinth/ui'
 import { IntlFormatted } from '@vintl/vintl/components'
 
 import { useAuth } from '@/composables/auth.js'
 import { useScopes } from '@/composables/auth/scopes.ts'
 import { useBaseFetch } from '@/composables/fetch.js'
-import { normalizeChildren } from '@/utils/vue-children.ts'
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()

apps/frontend/src/pages/auth/welcome.vue

@@ -49,11 +49,9 @@
 
 <script setup>
 import { RightArrowIcon, WavingRinthbot } from '@modrinth/assets'
-import { Checkbox, commonMessages } from '@modrinth/ui'
+import { Checkbox, commonMessages, normalizeChildren } from '@modrinth/ui'
 import { IntlFormatted } from '@vintl/vintl/components'
 
-import { normalizeChildren } from '@/utils/vue-children.ts'
-
 const route = useRoute()
 
 const { formatMessage } = useVIntl()

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

@@ -27,7 +27,7 @@
 				:to="`/collection/following`"
 				class="universal-card recessed collection"
 			>
-				<Avatar src="https://cdn.modrinth.com/follow-collection.png" class="icon" />
+				<Avatar src="https://cdn.modrinth.com/follow-collection.png" size="64px" />
 				<div class="details">
 					<span class="title">{{ formatMessage(commonMessages.followedProjectsLabel) }}</span>
 					<span class="description">
@@ -57,7 +57,7 @@
 				:to="`/collection/${collection.id}`"
 				class="universal-card recessed collection"
 			>
-				<Avatar :src="collection.icon_url" class="icon" />
+				<Avatar :src="collection.icon_url" size="64px" />
 				<div class="details">
 					<span class="title">{{ collection.name }}</span>
 					<span class="description">
@@ -188,15 +188,6 @@ const orderedCollections = computed(() => {
 		gap: var(--gap-md);
 		margin-bottom: 0;
 
-		.icon {
-			width: 100% !important;
-			height: 6rem !important;
-			max-width: unset !important;
-			max-height: unset !important;
-			aspect-ratio: 1 / 1;
-			object-fit: cover;
-		}
-
 		.details {
 			display: flex;
 			flex-direction: column;

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

@@ -205,12 +205,11 @@
 
 <script setup lang="ts">
 import { CodeIcon, RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager, ThemeSelector } from '@modrinth/ui'
+import { Button, injectNotificationManager, normalizeChildren, ThemeSelector } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
 
-import { normalizeChildren } from '@/utils/vue-children.ts'
 import MessageBanner from '~/components/ui/MessageBanner.vue'
 import type { DisplayLocation } from '~/plugins/cosmetics'
 import { isDarkTheme, type Theme } from '~/plugins/theme/index.ts'

apps/frontend/src/pages/user/[id].vue

@@ -276,7 +276,7 @@
 				</ContentPageHeader>
 			</div>
 			<div class="normal-page__content">
-				<div v-if="navLinks.length >= 2" class="mb-4 max-w-full overflow-x-auto">
+				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
 					<NavTabs :links="navLinks" />
 				</div>
 				<div v-if="projects.length > 0">
@@ -352,7 +352,7 @@
 						class="card collection-item"
 					>
 						<div class="collection">
-							<Avatar :src="collection.icon_url" class="icon" />
+							<Avatar :src="collection.icon_url" size="64px" />
 							<div class="details">
 								<h2 class="title">{{ collection.name }}</h2>
 								<div class="stats">