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/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" />
+		`,
+	}),
+}