refactor: no more vue multiselect (#5523)

* start multiselect component

* update styles

* small fix

* fix padding and styles

* add border bottom on sticky items

* add border bottom to search as well

* fix select all showing line

* use multi-select component for languages field

* add no options story for empty state

* refactor: remove vue-multiselect, replace with either our own combobox and multiselect

* pnpm prepr

* pnpm prepr

* fix combobox in transfer organization

apps/frontend/src/pages/index.vue

@@ -106,19 +106,22 @@
 									@input="updateSearchProjects"
 								/>
 								<div class="sort-by">
-									<span class="label">{{ formatMessage(commonMessages.sortByLabel) }}</span>
-									<Multiselect
+									<DropdownSelect
+										v-slot="{ selected }"
 										v-model="sortType"
-										placeholder="Select one"
-										class="selector"
-										:custom-label="(value) => value.charAt(0).toUpperCase() + value.slice(1)"
-										:options="['relevance', 'downloads', 'follows', 'updated', 'newest']"
-										:searchable="false"
-										:close-on-select="true"
-										:show-labels="false"
-										:allow-empty="false"
-										@update:model-value="updateSearchProjects"
-									/>
+										class="!h-9 !w-max flex-grow"
+										name="Sort by"
+										:options="sortOptions"
+										:display-name="(value) => value?.charAt(0).toUpperCase() + value?.slice(1)"
+										@change="updateSearchProjects()"
+									>
+										<div>
+											<span class="font-semibold text-primary"
+												>{{ formatMessage(commonMessages.sortByLabel) }}:
+											</span>
+											<span class="font-semibold text-secondary">{{ selected }}</span>
+										</div>
+									</DropdownSelect>
 								</div>
 							</div>
 							<div class="results display-mode--list">
@@ -444,6 +447,7 @@ import {
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
+	DropdownSelect,
 	IntlFormatted,
 	ProjectCard,
 	StyledInput,
@@ -451,7 +455,6 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
-import { Multiselect } from 'vue-multiselect'
 
 import ATLauncherLogo from '~/assets/images/external/atlauncher.svg?component'
 import PrismLauncherLogo from '~/assets/images/external/prism.svg?component'
@@ -464,6 +467,7 @@ const { formatMessage } = useVIntl()
 
 const searchQuery = ref('leave')
 const sortType = ref('relevance')
+const sortOptions = ['relevance', 'downloads', 'follows', 'updated', 'newest']
 
 const PROJECT_COUNT = 100000
 
@@ -955,7 +959,7 @@ const creatorFeatureMessages = defineMessages({
 						display: flex;
 						justify-content: space-between;
 						margin-bottom: 1rem;
-						gap: 1rem;
+						gap: 0.5rem;
 
 						.iconified-input {
 							width: 100%;
@@ -977,19 +981,6 @@ const creatorFeatureMessages = defineMessages({
 							display: flex;
 							gap: 0.75rem;
 							align-items: center;
-
-							.label {
-								white-space: nowrap;
-							}
-
-							.selector {
-								min-width: 8rem;
-								white-space: nowrap;
-							}
-
-							@media screen and (max-width: 500px) {
-								display: none;
-							}
 						}
 					}