refactor: align files tab with content tab design (#5621)

* fix: files.vue bugs before styling changes * feat: move files tab to shared layout structure * fix: qa * fix: qa * fix: bugs * fix: lint * fix: admonition cleanup with progress + actions * fix: cleanup * fix: modals * fix: admon title * fix: i18n standard * fix: lint + i18n pass * fix: remove transition * fix: type errors * feat: files tab in app * fix: qa * fix: backup item minmax * fix: use ContentPageHeader for server panel * fix: lint * fix: lint * fix: lint * feat: page leave safety * fix: lint * fix: cargo fmt fix * fix: blank in prod * fix: content card table stuff * Revert "fix: blank in prod" This reverts commit 74758fe185cf85a4a20355857f889cb091b97ace. * fix: import * feat: browse worlds/servers flow * fix: worlds tab parity with content tab * fix: perf bug + shader filter pill copy * feat: singleplayer filter * fix: ordering * fix: breadcrumbs * fix: lint * fix: qa * feat: store server proj id when adding to a non-linked instance * fix: lint * fix: i18n + qa * fix: conflict * qa: already installed modal + placeholders not server-specific * fix: qa * fix: add + edit server modals * fix: qa * fix: security * fix: devin flags * fix: lint * chore: change file to break build cache * fix: admon * fix: import path stuff * feat: qa * fix: fmt fmt idiot --------- Signed-off-by: Calum H. <calum@modrinth.com>
2026-03-26 18:55:15 +00:00
parent 706eb800cb
commit 381ea51cce
170 changed files with 8052 additions and 4571 deletions
--- a/packages/ui/src/stories/base/NavTabs.stories.ts
+++ b/packages/ui/src/stories/base/NavTabs.stories.ts
@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { getCurrentInstance, ref } from 'vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+import NavTabs from '../../components/base/NavTabs.vue'
+
+const router = createRouter({
+	history: createMemoryHistory(),
+	routes: [{ path: '/', component: { template: '<div />' } }],
+})
+
+const meta = {
+	title: 'Base/NavTabs',
+	component: NavTabs,
+	decorators: [
+		(story) => {
+			return {
+				components: { story },
+				setup() {
+					const app = getCurrentInstance()?.appContext.app
+					if (app && !app.config.globalProperties.$router) {
+						app.use(router)
+					}
+				},
+				template: '<story />',
+			}
+		},
+	],
+} satisfies Meta<typeof NavTabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		mode: 'local',
+		activeIndex: 0,
+		links: [
+			{ label: 'Overview', href: '' },
+			{ label: 'Gallery', href: 'gallery' },
+			{ label: 'Changelog', href: 'changelog' },
+			{ label: 'Versions', href: 'versions' },
+		],
+	},
+}
+
+export const LocalMode: StoryObj = {
+	render: () => ({
+		components: { NavTabs },
+		setup() {
+			const activeIndex = ref(0)
+			const links = [
+				{ label: 'Overview', href: '' },
+				{ label: 'Gallery', href: 'gallery' },
+				{ label: 'Changelog', href: 'changelog' },
+				{ label: 'Versions', href: 'versions' },
+			]
+			function onTabClick(index: number) {
+				activeIndex.value = index
+			}
+			return { activeIndex, links, onTabClick }
+		},
+		template: /* html */ `
+			<NavTabs
+				mode="local"
+				:active-index="activeIndex"
+				:links="links"
+				@tab-click="onTabClick"
+			/>
+		`,
+	}),
+}
+
+export const TwoTabs: StoryObj = {
+	render: () => ({
+		components: { NavTabs },
+		setup() {
+			const activeIndex = ref(0)
+			const links = [
+				{ label: 'Details', href: '' },
+				{ label: 'Settings', href: 'settings' },
+			]
+			function onTabClick(index: number) {
+				activeIndex.value = index
+			}
+			return { activeIndex, links, onTabClick }
+		},
+		template: /* html */ `
+			<NavTabs
+				mode="local"
+				:active-index="activeIndex"
+				:links="links"
+				@tab-click="onTabClick"
+			/>
+		`,
+	}),
+}