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

Author: tdgao

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'
 

packages/assets/styles/defaults.scss

@@ -158,11 +158,11 @@ h3 {
 }
 
 ::-webkit-scrollbar-thumb {
-	background: var(--color-button-bg);
+	background: var(--color-scrollbar);
 }
 
 // Firefox scrollbar
 * {
 	scrollbar-width: thin;
-	scrollbar-color: var(--color-button-bg) transparent;
+	scrollbar-color: var(--color-scrollbar) transparent;
 }

packages/assets/styles/variables.scss

@@ -320,7 +320,7 @@ html {
 
 	--color-button-bg: var(--surface-4);
 	--color-button-border: rgba(193, 190, 209, 0.12);
-	--color-scrollbar: var(--color-button-bg);
+	--color-scrollbar: var(--surface-5);
 
 	--color-divider: var(--color-button-bg);
 	--color-divider-dark: #646c75;