From 8ca4418f1e6e20c8e76ddf49e9517f46556583f2 Mon Sep 17 00:00:00 2001
From: Qu1et-x <lum27149@gmail.com>
Date: Sun, 15 Feb 2026 09:55:06 +0800
Subject: [PATCH 1/3] "feat(collections): fix sorting logic and add URL
 persistence"

---
 .../src/pages/dashboard/collections.vue       | 139 +++++++++++++-----
 1 file changed, 101 insertions(+), 38 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index a729f9862c..8696d2ae10 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -2,24 +2,47 @@
 	<div class="universal-card">
 		<CollectionCreateModal ref="modal_creation" />
 		<h2 class="text-2xl">{{ formatMessage(commonMessages.collectionsLabel) }}</h2>
-		<div class="search-row">
-			<div class="flex-grow">
-				<label for="search-input" hidden>{{ formatMessage(messages.searchInputLabel) }}</label>
-				<StyledInput
-					id="search-input"
-					v-model="filterQuery"
-					:icon="SearchIcon"
-					type="text"
-					clearable
-					placeholder="Search collections..."
-					wrapper-class="w-full"
-					input-class="h-8"
-				/>
+		<div class="mb-3 flex flex-col gap-3">
+			<StyledInput
+				id="search-input"
+				v-model="filterQuery"
+				:icon="SearchIcon"
+				type="text"
+				clearable
+				placeholder="Search collections..."
+				wrapper-class="w-full"
+				input-class="!h-12"
+			/>
+
+			<div class="flex flex-wrap items-center gap-2">
+				<DropdownSelect
+					v-slot="{ selected }"
+					v-model="sortBy"
+					class="!w-auto flex-grow md:flex-grow-0"
+					name="Sort by"
+					:options="['updated', 'created', 'name']"
+					:display-name="
+						(option) =>
+							option === 'updated'
+								? 'Recently Updated'
+								: option === 'created'
+									? 'Recently Created'
+									: 'Name (A-Z)'
+					"
+				>
+					<span class="font-semibold text-primary">Sort by: </span>
+					<span class="font-semibold text-secondary">{{ selected }}</span>
+				</DropdownSelect>
+
+				<Button
+					color="primary"
+					class="ml-auto"
+					@click="(event) => $refs.modal_creation.show(event)"
+				>
+					<PlusIcon aria-hidden="true" />
+					{{ formatMessage(messages.createNewButton) }}
+				</Button>
 			</div>
-			<Button color="primary" @click="(event) => $refs.modal_creation.show(event)">
-				<PlusIcon aria-hidden="true" />
-				{{ formatMessage(messages.createNewButton) }}
-			</Button>
 		</div>
 		<div class="collections-grid">
 			<nuxt-link
@@ -50,9 +73,7 @@
 				</div>
 			</nuxt-link>
 			<nuxt-link
-				v-for="collection in orderedCollections.sort(
-					(a, b) => new Date(b.created) - new Date(a.created),
-				)"
+				v-for="collection in orderedCollections"
 				:key="collection.id"
 				:to="`/collection/${collection.id}`"
 				class="universal-card recessed collection"
@@ -95,6 +116,23 @@
 			</nuxt-link>
 		</div>
 	</div>
+	<div v-if="orderedCollections.length === 0" class="empty-state-container">
+		<div class="py-12 text-center">
+			<BoxIcon class="mx-auto h-12 w-12 text-secondary opacity-50" aria-hidden="true" />
+			<p class="mt-4 text-lg font-medium text-contrast">
+				{{
+					filterQuery ? 'No collections match your search' : "You don't have any collections yet"
+				}}
+			</p>
+			<p class="text-sm text-secondary">
+				{{
+					filterQuery
+						? 'Try adjusting your filters or search terms.'
+						: 'Create your first collection to get started!'
+				}}
+			</p>
+		</div>
+	</div>
 </template>
 <script setup>
 import {
@@ -106,7 +144,15 @@ import {
 	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, commonMessages, defineMessages, StyledInput, useVIntl } from '@modrinth/ui'
+import {
+	Avatar,
+	Button,
+	commonMessages,
+	defineMessages,
+	DropdownSelect,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 
@@ -157,19 +203,32 @@ const { data: collections } = await useAsyncData(`user/${auth.value.user.id}/col
 	useBaseFetch(`user/${auth.value.user.id}/collections`, { apiVersion: 3 }),
 )
 
+const route = useNativeRoute()
+const router = useNativeRouter()
+const sortBy = ref(route.query.s || 'updated')
+
 const orderedCollections = computed(() => {
 	if (!collections.value) return []
-	return [...collections.value] // copy to avoid in-place mutation (no side effects)
+	return [...collections.value]
+		.filter(
+			(c) => !filterQuery.value || c.name.toLowerCase().includes(filterQuery.value.toLowerCase()),
+		)
 		.sort((a, b) => {
-			const aUpdated = new Date(a.updated)
-			const bUpdated = new Date(b.updated)
-			return bUpdated - aUpdated
-		})
-		.filter((collection) => {
-			if (!filterQuery.value) return true
-			return collection.name.toLowerCase().includes(filterQuery.value.toLowerCase())
+			if (sortBy.value === 'name') return a.name.localeCompare(b.name)
+			if (sortBy.value === 'created') return new Date(b.created) - new Date(a.created)
+			return new Date(b.updated) - new Date(a.updated)
 		})
 })
+
+watch(sortBy, (newVal) => {
+	router.replace({
+		path: route.path,
+		query: {
+			...route.query,
+			s: newVal,
+		},
+	})
+})
 </script>
 <style lang="scss">
 .collections-grid {
@@ -225,18 +284,22 @@ const orderedCollections = computed(() => {
 }
 
 .search-row {
-	margin-bottom: var(--gap-lg);
-	display: flex;
-	align-items: center;
-	gap: var(--gap-lg) var(--gap-sm);
-	flex-wrap: wrap;
-	justify-content: center;
+	.flex-wrap {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--gap-sm);
+	}
 
-	.iconified-input {
-		flex-grow: 1;
+	@media screen and (max-width: 768px) {
+		.md\:flex-grow-0 {
+			flex-grow: 1;
+		}
+	}
 
+	.iconified-input {
 		input {
-			height: 2rem;
+			height: 3rem !important;
 		}
 	}
 }

From 3924855fafcf2921056e31b7606a143de01ed6a6 Mon Sep 17 00:00:00 2001
From: Qu1et-x <lum27149@gmail.com>
Date: Sun, 15 Feb 2026 22:50:07 +0800
Subject: [PATCH 2/3] fix(navigation): use replaceState for project filters to
 prevent history pollution

---
 apps/frontend/src/components/ui/NavTabs.vue | 1 +
 apps/frontend/src/pages/[type]/[id].vue     | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/components/ui/NavTabs.vue b/apps/frontend/src/components/ui/NavTabs.vue
index 48ecc5dee7..0425dcd787 100644
--- a/apps/frontend/src/components/ui/NavTabs.vue
+++ b/apps/frontend/src/components/ui/NavTabs.vue
@@ -6,6 +6,7 @@
 	>
 		<template v-if="mode === 'navigation'">
 			<NuxtLink
+				replace
 				v-for="(link, index) in filteredLinks"
 				v-show="link.shown ?? true"
 				:key="link.href"
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index b41727d5b2..5a62a2f180 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -97,12 +97,12 @@
 				ref="downloadModal"
 				:on-show="
 					() => {
-						navigateTo({ query: route.query, hash: '#download' })
+						navigateTo({ query: route.query, hash: '#download' }, { replace: true })
 					}
 				"
 				:on-hide="
 					() => {
-						navigateTo({ query: route.query, hash: '' })
+						navigateTo({ query: route.query, hash: '' }, { replace: true })
 					}
 				"
 			>
@@ -251,7 +251,7 @@
 															}),
 														},
 														hash: route.hash,
-													})
+													}, { replace: true })
 												}
 											"
 										>
@@ -352,7 +352,7 @@
 															}),
 														},
 														hash: route.hash,
-													})
+													}, { replace: true })
 												}
 											"
 										>

From 543f293fc62f28df3fff7da1fdd623f222b2663f Mon Sep 17 00:00:00 2001
From: Qu1et-x <lum27149@gmail.com>
Date: Sun, 15 Feb 2026 22:54:28 +0800
Subject: [PATCH 3/3] Revert "fix(navigation): use replaceState for project
 filters to prevent history pollution"

This reverts commit 3924855fafcf2921056e31b7606a143de01ed6a6.
---
 apps/frontend/src/components/ui/NavTabs.vue | 1 -
 apps/frontend/src/pages/[type]/[id].vue     | 8 ++++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/components/ui/NavTabs.vue b/apps/frontend/src/components/ui/NavTabs.vue
index 0425dcd787..48ecc5dee7 100644
--- a/apps/frontend/src/components/ui/NavTabs.vue
+++ b/apps/frontend/src/components/ui/NavTabs.vue
@@ -6,7 +6,6 @@
 	>
 		<template v-if="mode === 'navigation'">
 			<NuxtLink
-				replace
 				v-for="(link, index) in filteredLinks"
 				v-show="link.shown ?? true"
 				:key="link.href"
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 5a62a2f180..b41727d5b2 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -97,12 +97,12 @@
 				ref="downloadModal"
 				:on-show="
 					() => {
-						navigateTo({ query: route.query, hash: '#download' }, { replace: true })
+						navigateTo({ query: route.query, hash: '#download' })
 					}
 				"
 				:on-hide="
 					() => {
-						navigateTo({ query: route.query, hash: '' }, { replace: true })
+						navigateTo({ query: route.query, hash: '' })
 					}
 				"
 			>
@@ -251,7 +251,7 @@
 															}),
 														},
 														hash: route.hash,
-													}, { replace: true })
+													})
 												}
 											"
 										>
@@ -352,7 +352,7 @@
 															}),
 														},
 														hash: route.hash,
-													}, { replace: true })
+													})
 												}
 											"
 										>