feat: improve add dependency flow (#6075)

* fix: shadow on nav

* feat: improve add dependency flow

* feat: update suggested dependency style

* feat: update dependency rows to use version number and update styles

* feat: implement combobox select searched text on focus

* feat: add Tabs.vue

* feat: update nav tabs to use tabs

* feat: improve project search dropdown

* fix: dependency search not clearing inbound query

* fix: combobox no options open state bug

* feat: improve dependency project and version search

packages/ui/src/components/base/Chips.vue

@@ -95,7 +95,7 @@ function toggleItem(item: T) {
 		background-color: var(--color-brand-highlight);
 		box-shadow:
 			inset 0 0 0 transparent,
-			0 0 0 2px var(--color-brand);
+			0 0 0 1px var(--color-brand);
 	}
 }
 </style>

packages/ui/src/components/base/Combobox.vue

@@ -28,7 +28,8 @@
 				class="relative z-[1]"
 				@input="handleSearchInput"
 				@keydown="handleSearchKeydown"
-				@focus="handleSearchFocus"
+				@focusin="handleSearchFocus"
+				@focusout="handleSearchFocusout"
 				@click="handleSearchClick"
 			>
 				<template v-if="showChevron" #right>
@@ -90,7 +91,7 @@
 				leave-to-class="opacity-0"
 			>
 				<div
-					v-if="isOpen"
+					v-if="shouldRenderDropdown"
 					ref="dropdownRef"
 					class="fixed z-[9999] flex flex-col overflow-hidden rounded-[14px] bg-surface-4 border border-solid border-surface-5"
 					:class="[
@@ -122,6 +123,7 @@
 								class="group/option flex items-center gap-2.5 cursor-pointer rounded-xl p-3 text-left transition-colors duration-150 text-contrast hover:bg-surface-5 focus:bg-surface-5"
 								:class="getOptionClasses(item, index)"
 								tabindex="-1"
+								@mousedown.prevent
 								@click="handleOptionClick(item, index)"
 								@mouseenter="handleOptionMouseEnter(item, index)"
 							>
@@ -225,12 +227,15 @@ const props = withDefaults(
 		showIconInSelected?: boolean
 		maxHeight?: number
 		displayValue?: string
+		searchValue?: string
 		triggerClass?: string
 		forceDirection?: 'up' | 'down'
 		noOptionsMessage?: string
 		disableSearchFilter?: boolean
 		/** Keep the selected option's label in the input after selection, and show all options on focus */
 		syncWithSelection?: boolean
+		/** Select the searchable input text when the field receives focus */
+		selectSearchTextOnFocus?: boolean
 		/** Show a search icon in the searchable input */
 		showSearchIcon?: boolean
 	}>(),
@@ -245,6 +250,7 @@ const props = withDefaults(
 		maxHeight: DEFAULT_MAX_HEIGHT,
 		noOptionsMessage: 'No results found',
 		syncWithSelection: true,
+		selectSearchTextOnFocus: false,
 		showSearchIcon: false,
 	},
 )
@@ -256,6 +262,7 @@ const emit = defineEmits<{
 	open: []
 	close: []
 	searchInput: [query: string]
+	searchBlur: [query: string]
 }>()
 
 const slots = useSlots()
@@ -337,6 +344,14 @@ const filteredOptions = computed(() => {
 	})
 })
 
+const hasDropdownContent = computed(() => {
+	return filteredOptions.value.length > 0 || !!searchQuery.value || !!slots['dropdown-footer']
+})
+
+const shouldRenderDropdown = computed(() => {
+	return isOpen.value && hasDropdownContent.value
+})
+
 function getOptionClasses(item: ComboboxOption<T> & { key: string }, index: number) {
 	return [
 		item.class,
@@ -432,7 +447,7 @@ async function updateDropdownPosition() {
 }
 
 async function openDropdown() {
-	if (props.disabled || isOpen.value) return
+	if (props.disabled || isOpen.value || !hasDropdownContent.value) return
 
 	isOpen.value = true
 	emit('open')
@@ -503,15 +518,20 @@ function handleOptionMouseEnter(option: ComboboxOption<T>, index: number) {
 
 function findNextFocusableOption(currentIndex: number, direction: 'next' | 'previous'): number {
 	const length = filteredOptions.value.length
+	if (length === 0) return -1
+
 	let index = currentIndex
-	let option
 
-	do {
+	for (let i = 0; i < length; i++) {
 		index = direction === 'next' ? (index + 1) % length : (index - 1 + length) % length
-		option = filteredOptions.value[index]
-	} while (isDivider(option) || option.disabled)
+		const option = filteredOptions.value[index]
 
-	return index
+		if (!isDivider(option) && !option.disabled) {
+			return index
+		}
+	}
+
+	return -1
 }
 
 function focusOption(index: number) {
@@ -627,12 +647,33 @@ function handleSearchInput() {
 	}
 }
 
-function handleSearchFocus() {
+function handleSearchFocus(event: FocusEvent) {
+	const target = event.target
+	if (props.selectSearchTextOnFocus && target instanceof HTMLInputElement) {
+		window.setTimeout(() => {
+			if (document.activeElement === target) {
+				target.select()
+			}
+		})
+	}
+
 	if (!isOpen.value) {
 		openDropdown()
 	}
 }
 
+function handleSearchFocusout(event: FocusEvent) {
+	const nextTarget = event.relatedTarget
+	if (nextTarget instanceof Node && containerRef.value?.contains(nextTarget)) return
+	if (nextTarget instanceof Node && dropdownRef.value?.contains(nextTarget)) return
+
+	emit('searchBlur', searchQuery.value)
+	if (props.searchValue !== undefined) {
+		searchQuery.value = props.searchValue
+	}
+	closeDropdown()
+}
+
 function handleSearchClick() {
 	if (!isOpen.value) {
 		openDropdown()
@@ -683,12 +724,24 @@ watch(isOpen, (value) => {
 	}
 })
 
+watch(shouldRenderDropdown, (value) => {
+	if (value) {
+		updateDropdownPosition()
+	}
+})
+
 watch(filteredOptions, () => {
 	if (isOpen.value) {
 		updateDropdownPosition()
 	}
 })
 
+watch(hasDropdownContent, (value) => {
+	if (!value && isOpen.value) {
+		closeDropdown()
+	}
+})
+
 watch(
 	[() => props.modelValue, () => props.options],
 	([val]) => {

packages/ui/src/components/base/Tabs.vue

@@ -0,0 +1,97 @@
+<template>
+	<div
+		v-if="tabs.length > 0"
+		class="inline-flex w-fit items-center overflow-x-auto rounded-xl border border-solid border-surface-5 p-0.5 shadow-sm gap-1"
+		role="tablist"
+	>
+		<button
+			v-for="(tab, index) in tabs"
+			:key="tab.value"
+			ref="tabButtons"
+			type="button"
+			class="flex min-h-6 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border border-solid px-2.5 py-1 text-sm font-medium outline-none transition-all active:scale-[0.97] focus-visible:ring-4 focus-visible:ring-brand-shadow"
+			:class="
+				tab.value === value
+					? 'border-green bg-highlight-green text-green'
+					: 'border-transparent bg-transparent text-primary hover:bg-surface-4'
+			"
+			role="tab"
+			:aria-selected="tab.value === value"
+			:tabindex="tab.value === value || (!hasSelectedTab && index === 0) ? 0 : -1"
+			@click="selectTab(tab)"
+			@keydown="onTabKeydown($event, index)"
+		>
+			<component
+				:is="tab.icon"
+				v-if="tab.icon"
+				class="size-5 shrink-0"
+				:class="tab.value === value ? 'text-green' : 'text-secondary'"
+			/>
+			<span class="text-nowrap">{{ tab.label }}</span>
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { computed, ref } from 'vue'
+
+export type TabsValue = string | number
+
+export interface TabsTab {
+	value: TabsValue
+	label: string
+	icon?: Component
+}
+
+const props = defineProps<{
+	value: TabsValue
+	tabs: TabsTab[]
+}>()
+
+const emit = defineEmits<{
+	'update:value': [value: TabsValue]
+	change: [tab: TabsTab]
+}>()
+
+const tabButtons = ref<HTMLButtonElement[]>()
+
+const hasSelectedTab = computed(() => props.tabs.some((tab) => tab.value === props.value))
+
+function selectTab(tab: TabsTab) {
+	emit('update:value', tab.value)
+	emit('change', tab)
+}
+
+function selectTabAtIndex(index: number) {
+	const tab = props.tabs[index]
+	if (!tab) return
+
+	selectTab(tab)
+	requestAnimationFrame(() => {
+		tabButtons.value?.[index]?.focus()
+	})
+}
+
+function onTabKeydown(event: KeyboardEvent, index: number) {
+	if (props.tabs.length === 0) return
+
+	const lastIndex = props.tabs.length - 1
+	let nextIndex: number | undefined
+
+	if (event.key === 'ArrowRight') {
+		nextIndex = index === lastIndex ? 0 : index + 1
+	} else if (event.key === 'ArrowLeft') {
+		nextIndex = index === 0 ? lastIndex : index - 1
+	} else if (event.key === 'Home') {
+		nextIndex = 0
+	} else if (event.key === 'End') {
+		nextIndex = lastIndex
+	}
+
+	if (nextIndex === undefined) return
+
+	event.preventDefault()
+	selectTabAtIndex(nextIndex)
+}
+</script>

packages/ui/src/components/base/index.ts

@@ -79,6 +79,8 @@ export { default as StatItem } from './StatItem.vue'
 export { default as StyledInput } from './StyledInput.vue'
 export type { TableColumn } from './Table.vue'
 export { default as Table } from './Table.vue'
+export type { TabsTab, TabsValue } from './Tabs.vue'
+export { default as Tabs } from './Tabs.vue'
 export { default as TagItem } from './TagItem.vue'
 export { default as TagTagItem } from './TagTagItem.vue'
 export { default as Timeline } from './Timeline.vue'

packages/ui/src/stories/base/Combobox.stories.ts

@@ -43,6 +43,24 @@ export const Searchable: Story = {
 		],
 		searchable: true,
 		searchPlaceholder: 'Search loaders...',
+		selectSearchTextOnFocus: true,
+	},
+}
+
+export const SearchableEmpty: Story = {
+	args: {
+		options: [],
+		searchable: true,
+		searchPlaceholder: 'Search projects...',
+		noOptionsMessage: 'No projects found',
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					'Covers the idle empty searchable state: focusing the input should not open an empty dropdown until there is a query or footer content.',
+			},
+		},
 	},
 }
 

packages/ui/src/stories/base/Tabs.stories.ts

@@ -0,0 +1,50 @@
+import { ChartIcon, DownloadIcon, UsersIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import Tabs from '../../components/base/Tabs.vue'
+
+const meta = {
+	title: 'Base/Tabs',
+	component: Tabs,
+} satisfies Meta<typeof Tabs>
+
+export default meta
+
+export const Default: StoryObj = {
+	render: () => ({
+		components: { Tabs },
+		setup() {
+			const value = ref('area')
+			const tabs = [
+				{ value: 'line', label: 'Line' },
+				{ value: 'area', label: 'Area' },
+				{ value: 'bar', label: 'Bar' },
+			]
+
+			return { value, tabs }
+		},
+		template: /* html */ `
+			<Tabs v-model:value="value" :tabs="tabs" />
+		`,
+	}),
+}
+
+export const WithIcons: StoryObj = {
+	render: () => ({
+		components: { Tabs },
+		setup() {
+			const value = ref('downloads')
+			const tabs = [
+				{ value: 'overview', label: 'Overview', icon: ChartIcon },
+				{ value: 'downloads', label: 'Downloads', icon: DownloadIcon },
+				{ value: 'users', label: 'Users', icon: UsersIcon },
+			]
+
+			return { value, tabs }
+		},
+		template: /* html */ `
+			<Tabs v-model:value="value" :tabs="tabs" />
+		`,
+	}),
+}