feat: multi-select component (#5486)

* 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

* fix height

apps/frontend/src/pages/[type]/[id]/settings/server.vue

@@ -26,15 +26,13 @@
 							>Languages <span class="font-normal text-secondary">(optional)</span></span
 						>
 					</label>
-					<Multiselect
+					<MultiSelect
 						id="server-language"
 						v-model="languages"
-						:options="languageOptions.map((l) => l.value)"
-						:custom-label="(code) => languageOptions.find((l) => l.value === code)?.label ?? code"
-						:multiple="true"
-						:searchable="true"
-						:show-labels="false"
-						:close-on-select="false"
+						:options="languageOptions"
+						searchable
+						include-select-all-option
+						:maxTagRows="2"
 						placeholder="Select languages"
 						:disabled="!hasPermission"
 					/>
@@ -166,12 +164,12 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
+	MultiSelect,
 	SERVER_LANGUAGES,
 	SERVER_REGIONS,
 	StyledInput,
 	UnsavedChangesPopup,
 } from '@modrinth/ui'
-import { Multiselect } from 'vue-multiselect'
 
 import CompatibilityCard from '~/components/ui/project-settings/CompatibilityCard.vue'